@morphika/andami 0.5.1 → 0.5.2

package/components/builder/color-picker/SwatchBar.tsx

@@ -1,93 +1,93 @@
-"use client";
-
-/**
- * SwatchBar — User palette swatches + common neutral colors.
- *
- * Integrated inside the color picker modal. Shows:
- * - "Your Palette" row with user swatches + an "add to palette" button
- * - "Common" row with standard neutrals (white → black)
- */
-
-import { useCallback } from "react";
-import type { SwatchBarProps } from "./types";
-
-// Common neutral colors always available
-const COMMON_COLORS = [
-  "#ffffff",
-  "#f5f5f5",
-  "#e5e5e5",
-  "#a3a3a3",
-  "#525252",
-  "#262626",
-  "#171717",
-  "#000000",
-];
-
-export default function SwatchBar({
-  value,
-  onSelect,
-  swatches = [],
-}: SwatchBarProps) {
-  const handleSwatchClick = useCallback(
-    (hex: string) => {
-      onSelect(hex);
-    },
-    [onSelect]
-  );
-
-  return (
-    <div className="border-t border-neutral-200 pt-4">
-      {/* User palette */}
-      {swatches.length > 0 && (
-        <div className="mb-3">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-[10px] text-neutral-400 uppercase tracking-widest">
-              Your Palette
-            </span>
-          </div>
-          <div className="flex flex-wrap gap-1.5">
-            {swatches.map((s, i) => (
-              <button
-                key={s._key || `swatch-${i}`}
-                type="button"
-                onClick={() => handleSwatchClick(s.hex)}
-                title={`${s.name}: ${s.hex}`}
-                className={`w-8 h-8 rounded-lg cursor-pointer transition-all ${
-                  value.toLowerCase() === s.hex.toLowerCase()
-                    ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
-                    : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
-                }`}
-                style={{ background: s.hex }}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Common colors */}
-      <div>
-        {swatches.length > 0 && (
-          <span className="text-[10px] text-neutral-400 uppercase tracking-widest block mb-2">
-            Common
-          </span>
-        )}
-        <div className="flex gap-1">
-          {COMMON_COLORS.map((c) => (
-            <button
-              key={c}
-              type="button"
-              onClick={() => handleSwatchClick(c)}
-              title={c.toUpperCase()}
-              className={`w-6 h-6 rounded-md cursor-pointer transition-all ${
-                value.toLowerCase() === c
-                  ? "ring-2 ring-[#076bff] ring-offset-1 ring-offset-white"
-                  : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
-              }`}
-              style={{ background: c }}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+/**
+ * SwatchBar — User palette swatches + common neutral colors.
+ *
+ * Integrated inside the color picker modal. Shows:
+ * - "Your Palette" row with user swatches + an "add to palette" button
+ * - "Common" row with standard neutrals (white → black)
+ */
+
+import { useCallback } from "react";
+import type { SwatchBarProps } from "./types";
+
+// Common neutral colors always available
+const COMMON_COLORS = [
+  "#ffffff",
+  "#f5f5f5",
+  "#e5e5e5",
+  "#a3a3a3",
+  "#525252",
+  "#262626",
+  "#171717",
+  "#000000",
+];
+
+export default function SwatchBar({
+  value,
+  onSelect,
+  swatches = [],
+}: SwatchBarProps) {
+  const handleSwatchClick = useCallback(
+    (hex: string) => {
+      onSelect(hex);
+    },
+    [onSelect]
+  );
+
+  return (
+    <div className="border-t border-neutral-200 pt-4">
+      {/* User palette */}
+      {swatches.length > 0 && (
+        <div className="mb-3">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-[10px] text-neutral-400 uppercase tracking-widest">
+              Your Palette
+            </span>
+          </div>
+          <div className="flex flex-wrap gap-1.5">
+            {swatches.map((s, i) => (
+              <button
+                key={s._key || `swatch-${i}`}
+                type="button"
+                onClick={() => handleSwatchClick(s.hex)}
+                title={`${s.name}: ${s.hex}`}
+                className={`w-8 h-8 rounded-lg cursor-pointer transition-all ${
+                  value.toLowerCase() === s.hex.toLowerCase()
+                    ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-white"
+                    : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
+                }`}
+                style={{ background: s.hex }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Common colors */}
+      <div>
+        {swatches.length > 0 && (
+          <span className="text-[10px] text-neutral-400 uppercase tracking-widest block mb-2">
+            Common
+          </span>
+        )}
+        <div className="flex gap-1">
+          {COMMON_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => handleSwatchClick(c)}
+              title={c.toUpperCase()}
+              className={`w-6 h-6 rounded-md cursor-pointer transition-all ${
+                value.toLowerCase() === c
+                  ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-white"
+                  : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
+              }`}
+              style={{ background: c }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}