@morphika/andami 0.5.1 → 0.5.3

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

@@ -1,93 +1,98 @@
-"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";
+import { BubbleTooltip } from "../BubbleIcons";
+
+// 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)}
+                aria-label={`${s.name}: ${s.hex}`}
+                className={`group/bb relative 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 }}
+              >
+                <BubbleTooltip>{`${s.name}: ${s.hex}`}</BubbleTooltip>
+              </button>
+            ))}
+          </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)}
+              aria-label={c.toUpperCase()}
+              className={`group/bb relative 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 }}
+            >
+              <BubbleTooltip>{c.toUpperCase()}</BubbleTooltip>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -45,6 +45,7 @@ import {
 import { getPresetsForCategory } from "../../../lib/builder/gradient-presets";
 import type { GradientPresetInfo } from "../../../lib/builder/gradient-presets";
 import type { ColorSwatch } from "../../../lib/sanity/types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 type GradientTab = "solid" | "linear" | "radial" | "mesh";
 
@@ -554,11 +555,13 @@ export default function UnifiedColorPicker({
                   <button
                     key={preset.id}
                     type="button"
-                    title={preset.label}
+                    aria-label={preset.label}
                     onClick={() => handlePresetSelect(preset)}
-                    className="w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
+                    className="group/bb relative w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
                     style={{ backgroundImage: colorToCSS(preset.template) }}
-                  />
+                  >
+                    <BubbleTooltip>{preset.label}</BubbleTooltip>
+                  </button>
                 ))}
               </div>
             )}
@@ -678,11 +681,13 @@ export default function UnifiedColorPicker({
                   <button
                     key={preset.id}
                     type="button"
-                    title={preset.label}
+                    aria-label={preset.label}
                     onClick={() => handlePresetSelect(preset)}
-                    className="w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
+                    className="group/bb relative w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
                     style={{ backgroundImage: colorToCSS(preset.template) }}
-                  />
+                  >
+                    <BubbleTooltip>{preset.label}</BubbleTooltip>
+                  </button>
                 ))}
               </div>
             )}