@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/ColorPicker/index.tsx

@@ -1,8 +1,8 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { Pipette } from "@tamagui/lucide-icons-2";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
-import { type Popover, Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
+import { useResolvedKnobs, useChartPalette, normalizeToHex } from "@multiplatform.one/theme";
+import { type ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type Popover, View, XStack, YStack, isWeb, useProps, useTheme } from "tamagui";
 import { Button } from "../../Button";
 
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -28,8 +28,9 @@ import {
   hexToHsv,
   hexToRgb,
   hsvToHex,
-  isValidHex,
+  hexAlphaByte,
   normalizeHex,
+  parseHex,
   rgbToHex,
 } from "./parts";
 
@@ -74,7 +75,7 @@ export type ColorPickerProps<
     onValueChange?: (value: string) => void;
     /** When true, renders a skeleton placeholder instead of the color picker */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
+    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
     compact?: boolean;
   };
 
@@ -82,20 +83,36 @@ export type ColorPickerProps<
 // Default preset colors
 // ---------------------------------------------------------------------------
 
-const defaultPresets = [
-  "#EF4444",
-  "#F97316",
-  "#EAB308",
-  "#22C55E",
-  "#14B8A6",
-  "#3B82F6",
-  "#8B5CF6",
-  "#EC4899",
-  "#000000",
-  "#6B7280",
-  "#D1D5DB",
-  "#FFFFFF",
-];
+function useThemePresetColors(): string[] {
+  const palette = useChartPalette();
+  const theme = useTheme();
+  return useMemo(() => {
+    const ink = theme.color12?.val;
+    const mid = theme.color8?.val;
+    const paper = theme.color1?.val;
+    const raw = [
+      ...palette.categorical.slice(0, 8),
+      palette.semantic.error,
+      palette.semantic.success,
+      palette.semantic.warning,
+      typeof ink === "string" ? ink : undefined,
+      typeof mid === "string" ? mid : undefined,
+      typeof paper === "string" ? paper : undefined,
+    ];
+    const seen = new Set<string>();
+    const out: string[] = [];
+    for (const color of raw) {
+      if (typeof color !== "string") continue;
+      const hex = normalizeToHex(color);
+      if (!hex) continue;
+      const key = hex.toUpperCase();
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(key);
+    }
+    return out;
+  }, [palette, theme.color12, theme.color8, theme.color1]);
+}
 
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
 
@@ -193,8 +210,9 @@ function parseColorValue(value: string | undefined, format: "hex" | "rgb" | "hsl
   if (!raw) return { hex: "", alpha: 100, isValid: true };
 
   if (format === "hex") {
-    if (!isValidHex(raw)) return { hex: "", alpha: 100, isValid: false };
-    return { hex: normalizeHex(raw), alpha: 100, isValid: true };
+    const parsed = parseHex(raw);
+    if (!parsed) return { hex: "", alpha: 100, isValid: false };
+    return { hex: rgbToHex(parsed.r, parsed.g, parsed.b), alpha: parsed.alpha, isValid: true };
   }
 
   if (format === "rgb") {
@@ -235,7 +253,11 @@ function serializeColorValue(
   includeAlpha: boolean,
 ): string {
   if (!hex) return "";
-  if (format === "hex") return normalizeHex(hex);
+  if (format === "hex") {
+    const rgb = normalizeHex(hex);
+    if (includeAlpha) return `${rgb}${hexAlphaByte(alpha)}`;
+    return rgb;
+  }
 
   const rgb = hexToRgb(hex);
   if (!rgb) return "";
@@ -275,10 +297,14 @@ interface ColorBodyProps {
 
 const panelSizeMap: Record<string, number> = {
   small: 160,
-  medium: 220,
-  large: 260,
+  medium: 192,
+  large: 224,
 };
 
+function binaryRadius(pointy: boolean | undefined, size: number): number {
+  return pointy ? 0 : size / 2;
+}
+
 function ColorBody({
   hue,
   saturation,
@@ -293,8 +319,9 @@ function ColorBody({
   onHexInput,
   onSelectPreset,
 }: ColorBodyProps) {
-  const { knobProps } = useResolvedKnobs();
-  const panelSize = panelSizeMap[knobProps.size] ?? 220;
+  const { knobProps } = useResolvedKnobs({ compact: true });
+  const panelSize = panelSizeMap[knobProps.size] ?? 192;
+  const previewSize = 24;
   const [hexInputValue, setHexInputValue] = useState(selectedColor);
   const [hexEditing, setHexEditing] = useState(false);
   useEffect(() => {
@@ -308,16 +335,11 @@ function ColorBody({
     (text: string) => {
       setHexInputValue(text);
       const normalized = text.startsWith("#") ? text : `#${text}`;
-      if (isValidHex(normalized)) {
-        onHexInput(normalizeHex(normalized));
-        return;
-      }
-      // 8-digit hex (#RRGGBBAA): commit the color and apply the alpha channel.
-      const hexWithAlpha = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(normalized);
-      if (hexWithAlpha) {
-        const alphaPercent = Math.round((Number.parseInt(hexWithAlpha[2], 16) / 255) * 100);
-        onHexInput(normalizeHex(`#${hexWithAlpha[1]}`), alphaPercent);
-      }
+      const parsed = parseHex(normalized);
+      if (!parsed) return;
+      const digits = normalized.startsWith("#") ? normalized.slice(1) : normalized;
+      const hasAlphaByte = digits.length === 8;
+      onHexInput(rgbToHex(parsed.r, parsed.g, parsed.b), hasAlphaByte ? parsed.alpha : undefined);
     },
     [onHexInput],
   );
@@ -341,17 +363,21 @@ function ColorBody({
   const hasEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
 
   return (
-    <YStack {...knobProps.gap} alignItems="center">
-      <SaturationPanel
-        hue={hue}
-        saturation={saturation}
-        value={value}
-        onChangeSV={onChangeSV}
-        size={panelSize}
-      />
-
-      <YStack gap="$1.5" width={panelSize}>
-        <HueStrip hue={hue} onChangeHue={onChangeHue} width={panelSize} />
+    <YStack {...knobProps.gap}>
+      <XStack {...knobProps.gap} alignItems="stretch">
+        <SaturationPanel
+          hue={hue}
+          saturation={saturation}
+          value={value}
+          onChangeSV={onChangeSV}
+          size={panelSize}
+        />
+        <HueStrip
+          hue={hue}
+          onChangeHue={onChangeHue}
+          height={panelSize}
+          orientation="vertical"
+        />
         {showAlpha && (
           <AlphaStrip
             hue={hue}
@@ -359,10 +385,11 @@ function ColorBody({
             value={value}
             alpha={alpha}
             onChangeAlpha={onChangeAlpha}
-            width={panelSize}
+            height={panelSize}
+            orientation="vertical"
           />
         )}
-      </YStack>
+      </XStack>
 
       <PresetSwatches
         presetColors={presetColors}
@@ -370,18 +397,19 @@ function ColorBody({
         onSelect={(color) => {
           if (color !== null) onSelectPreset(color);
         }}
-        width={panelSize}
       />
 
-      <XStack gap="$2" width={panelSize} alignItems="center">
+      <XStack {...knobProps.gap} alignItems="center">
         <View
-          width={24}
-          height={24}
-          borderRadius={knobProps.borderRadius.borderRadius}
+          width={previewSize}
+          height={previewSize}
+          borderRadius={binaryRadius(knobProps.pointy, previewSize)}
+          borderWidth={1}
+          borderColor="$color10"
           backgroundColor={selectedColor}
           flexShrink={0}
         />
-        <InputParts size="$3" flex={1}>
+        <InputParts size={knobProps.sizeToken} flex={1}>
           <InputParts.Box>
             <InputParts.Area
               value={hexInputValue}
@@ -389,32 +417,22 @@ function ColorBody({
               onFocus={() => setHexEditing(true)}
               onBlur={() => setHexEditing(false)}
               placeholder="#000000"
-              maxLength={9}
+              maxLength={showAlpha ? 9 : 7}
             />
           </InputParts.Box>
         </InputParts>
         {hasEyeDropper && (
           <Button
-            size="$3"
+            size={knobProps.sizeToken}
             chromeless
             icon={<Pipette size={14} />}
             onPress={handleEyeDropper}
             cursor="pointer"
+            aria-label={t("Eyedropper")}
             hoverStyle={{ opacity: 0.7 }}
           />
         )}
       </XStack>
-
-      {showAlpha && (
-        <Text
-          fontSize="$3"
-          {...knobProps.body}
-          color={knobProps.textAccentColor}
-          alignSelf="flex-start"
-        >
-          Opacity: {alpha}%
-        </Text>
-      )}
     </YStack>
   );
 }
@@ -580,7 +598,9 @@ function ColorPickerControl({
         <View
           width={20}
           height={20}
-          borderRadius={knobProps.borderRadius.borderRadius}
+          borderRadius={binaryRadius(knobProps.pointy, 20)}
+          borderWidth={1}
+          borderColor="$color10"
           marginInlineStart="$2"
           alignSelf="center"
           backgroundColor={displayValue || "transparent"}
@@ -629,7 +649,8 @@ function ColorPickerControl({
           }}
           error={hasError}
           id={id}
-          aria-labelledby={hasLabel && id ? `${id}-label` : undefined}
+          // Labelled: the sibling Label wires `aria-labelledby` onto this id
+          // itself — naming it here too doubles the spoken name.
           aria-label={hasLabel ? undefined : t("Color")}
           aria-describedby={
             [
@@ -666,7 +687,7 @@ export function ColorPicker<
     form,
     format: _format = "hex",
     showAlpha = false,
-    presetColors = defaultPresets,
+    presetColors: presetColorsProp,
     placeholder = t("Select color"),
     inputProps,
     mode,
@@ -690,6 +711,9 @@ export function ColorPicker<
     id: idProp,
   } = useProps(props);
 
+  const themePresets = useThemePresetColors();
+  const presetColors = presetColorsProp ?? themePresets;
+
   // Canonical `onChange` and the alias `onValueChange` both fire from a
   // single emit per change (same reconciliation as Switch).
   const emitValueChange = useCallback(