From e8a303c99a62b9c8022b01cd6e99528140913fca Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:25 +0330
Subject: [PATCH] Import source: src/components/ui/ColorSwatch

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/components/ui/ColorSwatch.tsx | 33 +++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/ui/ColorSwatch.tsx

diff --git a/src/components/ui/ColorSwatch.tsx b/src/components/ui/ColorSwatch.tsx
new file mode 100644
index 0000000..72b25cd
--- /dev/null
+++ b/src/components/ui/ColorSwatch.tsx
@@ -0,0 +1,33 @@
+interface Props {
+  color: string | null; selected: boolean;
+  onClick: () => void; isRainbow?: boolean;
+}
+
+export function ColorSwatch({ color, selected, onClick, isRainbow }: Props) {
+  const isTransparent = color === null && !isRainbow;
+  return (
+    <button
+      onClick={onClick}
+      className="relative w-9 h-9 rounded-full flex-shrink-0 cursor-pointer transition-transform duration-100 hover:scale-110 focus:outline-none"
+      style={{
+        ...(isRainbow
+          ? { background: 'conic-gradient(red,yellow,lime,cyan,blue,magenta,red)' }
+          : isTransparent
+          ? { background: 'var(--bg-elevated)', border: '2px dashed var(--border-hover)' }
+          : { background: color! }),
+        ...(selected ? { outline: '2px solid #7C6FE0', outlineOffset: '2px' } : {}),
+      }}
+      title={isTransparent ? 'Default' : isRainbow ? 'Rainbow' : color!}
+    >
+      {selected && (
+        <span className="absolute inset-0 flex items-center justify-center">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M2 7L5.5 10.5L12 3.5"
+              stroke={isTransparent ? '#7C6FE0' : 'white'}
+              strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </span>
+      )}
+    </button>
+  );
+}