@multiplatform.one/forms 6.0.0

package/src/fields/ColorPicker/parts.tsx

@@ -0,0 +1,557 @@
+import { Palette, X } from "@tamagui/lucide-icons-2";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ComponentProps, ReactNode, RefObject } from "react";
+import { View, XStack, isWeb } from "tamagui";
+
+import { Button } from "../../Button";
+import { FloatingPanel } from "../../FloatingPanel";
+import { Input as InputParts } from "../../InputParts";
+import { formControlColors } from "../../shared/colorRamps";
+import { useIsInTableCell } from "../../shared/tableCellContext";
+
+// ---------------------------------------------------------------------------
+// Color conversion utilities
+// ---------------------------------------------------------------------------
+
+export function hsvToRgb(h: number, s: number, v: number) {
+  const h6 = (h / 360) * 6;
+  const s1 = s / 100;
+  const v1 = v / 100;
+
+  const i = Math.floor(h6);
+  const f = h6 - i;
+  const p = v1 * (1 - s1);
+  const q = v1 * (1 - f * s1);
+  const t = v1 * (1 - (1 - f) * s1);
+
+  let r: number;
+  let g: number;
+  let b: number;
+
+  switch (i % 6) {
+    case 0:
+      r = v1;
+      g = t;
+      b = p;
+      break;
+    case 1:
+      r = q;
+      g = v1;
+      b = p;
+      break;
+    case 2:
+      r = p;
+      g = v1;
+      b = t;
+      break;
+    case 3:
+      r = p;
+      g = q;
+      b = v1;
+      break;
+    case 4:
+      r = t;
+      g = p;
+      b = v1;
+      break;
+    default:
+      r = v1;
+      g = p;
+      b = q;
+      break;
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+}
+
+export function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (x: number) => {
+    const hex = Math.max(0, Math.min(255, Math.round(x))).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+
+export function hsvToHex(h: number, s: number, v: number): string {
+  const { r, g, b } = hsvToRgb(h, s, v);
+  return rgbToHex(r, g, b);
+}
+
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return null;
+  return {
+    r: Number.parseInt(result[1], 16),
+    g: Number.parseInt(result[2], 16),
+    b: Number.parseInt(result[3], 16),
+  };
+}
+
+export function rgbToHsv(r: number, g: number, b: number): { h: number; s: number; v: number } {
+  const r1 = r / 255;
+  const g1 = g / 255;
+  const b1 = b / 255;
+
+  const max = Math.max(r1, g1, b1);
+  const min = Math.min(r1, g1, b1);
+  const d = max - min;
+
+  let h = 0;
+  const s = max === 0 ? 0 : (d / max) * 100;
+  const v = max * 100;
+
+  if (d !== 0) {
+    switch (max) {
+      case r1:
+        h = ((g1 - b1) / d + (g1 < b1 ? 6 : 0)) / 6;
+        break;
+      case g1:
+        h = ((b1 - r1) / d + 2) / 6;
+        break;
+      case b1:
+        h = ((r1 - g1) / d + 4) / 6;
+        break;
+    }
+    h *= 360;
+  }
+
+  return { h: Math.round(h), s: Math.round(s), v: Math.round(v) };
+}
+
+export function hexToHsv(hex: string): { h: number; s: number; v: number } {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return { h: 0, s: 100, v: 100 };
+  return rgbToHsv(rgb.r, rgb.g, rgb.b);
+}
+
+export function isValidHex(hex: string): boolean {
+  return /^#([a-f\d]{3}|[a-f\d]{6})$/i.test(hex);
+}
+
+export function normalizeHex(hex: string): string {
+  const normalized = hex.startsWith("#") ? hex : `#${hex}`;
+  if (normalized.length === 4) {
+    return `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`.toUpperCase();
+  }
+  return normalized.toUpperCase();
+}
+
+// ---------------------------------------------------------------------------
+// Styled sub-components
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// useDrag — shared pointer-drag state for sliders and panels
+// ---------------------------------------------------------------------------
+
+function useDrag(onUpdate: (clientX: number, clientY: number) => void) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  useEffect(() => {
+    if (!isDragging || !isWeb) return;
+    const handleMove = (e: PointerEvent) => {
+      e.preventDefault();
+      onUpdate(e.clientX, e.clientY);
+    };
+    const handleUp = () => setIsDragging(false);
+    document.addEventListener("pointermove", handleMove);
+    document.addEventListener("pointerup", handleUp);
+    return () => {
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", handleUp);
+    };
+  }, [isDragging, onUpdate]);
+
+  const onPointerDown = useCallback(
+    (e: { clientX: number; clientY: number }) => {
+      setIsDragging(true);
+      onUpdate(e.clientX, e.clientY);
+    },
+    [onUpdate],
+  );
+
+  return { onPointerDown };
+}
+
+// ---------------------------------------------------------------------------
+// SaturationPanel — 2D saturation (x) × value (y) picker
+// ---------------------------------------------------------------------------
+
+interface SaturationPanelProps {
+  hue: number;
+  saturation: number;
+  value: number;
+  onChangeSV: (s: number, v: number) => void;
+  size?: number;
+}
+
+export function SaturationPanel({
+  hue,
+  saturation,
+  value,
+  onChangeSV,
+  size = 220,
+}: SaturationPanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const updateColor = useCallback(
+    (clientX: number, clientY: number) => {
+      const panel = panelRef.current;
+      if (!panel) return;
+      const rect = panel.getBoundingClientRect();
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
+      onChangeSV(Math.round((x / rect.width) * 100), Math.round(100 - (y / rect.height) * 100));
+    },
+    [onChangeSV],
+  );
+
+  const { onPointerDown } = useDrag(updateColor);
+  const hueColor = `hsl(${hue}, 100%, 50%)`;
+
+  return (
+    <View
+      ref={panelRef as never}
+      width={size}
+      height={size}
+      borderRadius="$2"
+      overflow="hidden"
+      cursor="crosshair"
+      position="relative"
+      onPointerDown={onPointerDown}
+      userSelect="none"
+      style={{
+        background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`,
+        touchAction: "none",
+      }}
+    >
+      <View
+        position="absolute"
+        width={14}
+        height={14}
+        borderRadius={7}
+        borderWidth={2}
+        borderColor="white"
+        style={{
+          left: `${saturation}%`,
+          top: `${100 - value}%`,
+          transform: "translate(-50%, -50%)",
+          boxShadow: "0 0 2px rgba(0,0,0,0.6)",
+          pointerEvents: "none",
+        }}
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// HueStrip — horizontal rainbow hue selector
+// ---------------------------------------------------------------------------
+
+interface HueStripProps {
+  hue: number;
+  onChangeHue: (h: number) => void;
+  width?: number;
+}
+
+export function HueStrip({ hue, onChangeHue, width = 220 }: HueStripProps) {
+  const stripRef = useRef<HTMLDivElement>(null);
+
+  const updateHue = useCallback(
+    (clientX: number, _clientY: number) => {
+      const strip = stripRef.current;
+      if (!strip) return;
+      const rect = strip.getBoundingClientRect();
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      onChangeHue(Math.round((x / rect.width) * 360));
+    },
+    [onChangeHue],
+  );
+
+  const { onPointerDown } = useDrag(updateHue);
+
+  return (
+    <View
+      ref={stripRef as never}
+      width={width}
+      height={14}
+      borderRadius="$2"
+      cursor="pointer"
+      position="relative"
+      onPointerDown={onPointerDown}
+      userSelect="none"
+      style={{
+        background:
+          "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+        touchAction: "none",
+      }}
+    >
+      <View
+        position="absolute"
+        width={6}
+        height={18}
+        borderRadius={3}
+        borderWidth={2}
+        borderColor="white"
+        top={-2}
+        style={{
+          left: `${(hue / 360) * 100}%`,
+          transform: "translateX(-50%)",
+          boxShadow: "0 0 2px rgba(0,0,0,0.6)",
+          pointerEvents: "none",
+        }}
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// AlphaStrip — horizontal alpha/transparency selector
+// ---------------------------------------------------------------------------
+
+interface AlphaStripProps {
+  hue: number;
+  saturation: number;
+  value: number;
+  alpha: number;
+  onChangeAlpha: (a: number) => void;
+  width?: number;
+}
+
+export function AlphaStrip({
+  hue,
+  saturation,
+  value,
+  alpha,
+  onChangeAlpha,
+  width = 220,
+}: AlphaStripProps) {
+  const stripRef = useRef<HTMLDivElement>(null);
+  const hex = useMemo(() => hsvToHex(hue, saturation, value), [hue, saturation, value]);
+
+  const updateAlpha = useCallback(
+    (clientX: number, _clientY: number) => {
+      const strip = stripRef.current;
+      if (!strip) return;
+      const rect = strip.getBoundingClientRect();
+      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+      onChangeAlpha(Math.round((x / rect.width) * 100));
+    },
+    [onChangeAlpha],
+  );
+
+  const { onPointerDown } = useDrag(updateAlpha);
+
+  return (
+    <View
+      ref={stripRef as never}
+      width={width}
+      height={14}
+      borderRadius="$2"
+      cursor="pointer"
+      position="relative"
+      overflow="hidden"
+      onPointerDown={onPointerDown}
+      userSelect="none"
+      style={{
+        touchAction: "none",
+      }}
+    >
+      {/* Checkerboard background */}
+      <View
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        style={{
+          backgroundImage:
+            "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)",
+          backgroundSize: "8px 8px",
+          backgroundPosition: "0 0, 4px 0, 4px -4px, 0px 4px",
+        }}
+      />
+      {/* Alpha gradient */}
+      <View
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        style={{
+          background: `linear-gradient(to right, transparent, ${hex})`,
+        }}
+      />
+      {/* Thumb */}
+      <View
+        position="absolute"
+        width={6}
+        height={18}
+        borderRadius={3}
+        borderWidth={2}
+        borderColor="white"
+        top={-2}
+        style={{
+          left: `${alpha}%`,
+          transform: "translateX(-50%)",
+          boxShadow: "0 0 2px rgba(0,0,0,0.6)",
+          pointerEvents: "none",
+        }}
+      />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// PresetSwatches — grid of clickable preset colors
+// ---------------------------------------------------------------------------
+
+interface PresetSwatchesProps {
+  presetColors: string[];
+  selectedColor: string;
+  onSelect: (color: string) => void;
+  width?: number;
+}
+
+export function PresetSwatches({
+  presetColors,
+  selectedColor,
+  onSelect,
+  width,
+}: PresetSwatchesProps) {
+  const { knobProps } = useResolvedKnobs();
+  if (!Array.isArray(presetColors) || presetColors.length === 0) return null;
+  const swatchSize = width && width < 200 ? 18 : 22;
+  return (
+    <XStack flexWrap="wrap" gap="$1.5" width={width} justifyContent="center">
+      {presetColors.map((color) => {
+        const isSelected = selectedColor.toUpperCase() === color.toUpperCase();
+        return (
+          <Button
+            key={color}
+            size="$2"
+            width={swatchSize}
+            height={swatchSize}
+            padding={0}
+            backgroundColor={color}
+            borderWidth={0}
+            borderRadius={knobProps.borderRadius.borderRadius}
+            onPress={() => onSelect(color)}
+            opacity={isSelected ? 1 : 0.75}
+            scale={isSelected ? 1.15 : 1}
+            hoverStyle={{ opacity: 1, scale: 1.1 }}
+          />
+        );
+      })}
+    </XStack>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ColorPickerInputTrigger — compound input with swatch + clear icon
+// ---------------------------------------------------------------------------
+
+interface ColorPickerInputTriggerProps {
+  value: string;
+  placeholder: string;
+  disabled?: boolean;
+  onReset: () => void;
+  onButtonPress: () => void;
+  error?: boolean;
+  "aria-required"?: boolean;
+  "aria-invalid"?: boolean;
+  inputProps?: Omit<
+    ComponentProps<typeof InputParts.Area>,
+    "value" | "onChangeText" | "ref" | "readOnly"
+  >;
+}
+
+export const ColorPickerInputTrigger = InputParts.Area.styleable<ColorPickerInputTriggerProps>(
+  (props, ref) => {
+    const { knobProps } = useResolvedKnobs();
+    const inTableCell = useIsInTableCell();
+    const { value, onButtonPress, onReset, disabled, placeholder, error } = props;
+    return (
+      <View ref={ref}>
+        <InputParts
+          cursor="pointer"
+          onPress={disabled ? undefined : onButtonPress}
+          size={knobProps.sizeToken}
+        >
+          <InputParts.Box
+            theme={error ? "red" : undefined}
+            {...(disabled ? { opacity: 0.5, pointerEvents: "none" } : undefined)}
+          >
+            <InputParts.Icon adornment="leading">
+              <View
+                width={20}
+                height={20}
+                borderRadius={knobProps.borderRadius.borderRadius}
+                backgroundColor={value || formControlColors.background}
+                aria-label="Color swatch"
+              />
+            </InputParts.Icon>
+            {!inTableCell && (
+              <InputParts.Area
+                readOnly
+                value={value}
+                placeholder={placeholder}
+                pointerEvents="none"
+                disabled={disabled}
+              />
+            )}
+            <InputParts.Button
+              onPress={(e) => {
+                if (value) {
+                  e.stopPropagation();
+                  onReset();
+                } else {
+                  onButtonPress();
+                }
+              }}
+            >
+              <InputParts.Icon>{value ? <X /> : <Palette />}</InputParts.Icon>
+            </InputParts.Button>
+          </InputParts.Box>
+        </InputParts>
+      </View>
+    );
+  },
+);
+
+// ---------------------------------------------------------------------------
+// ColorPickerPopoverShell — Popover + Adapt/Sheet wrapper
+// ---------------------------------------------------------------------------
+
+interface ColorPickerPopoverShellProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger: ReactNode;
+  children: ReactNode;
+  popoverRef?: RefObject<any>;
+}
+
+export function ColorPickerPopoverShell({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+}: ColorPickerPopoverShellProps) {
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={onOpenChange}
+      trigger={trigger}
+      scrollable
+      sizing="fill"
+      fitContent
+    >
+      {children}
+    </FloatingPanel>
+  );
+}

package/src/fields/Combobox/Combobox.spec.tsx

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Form } from "../../Form";
+import { Combobox } from "./index";
+
+const options = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "cherry", label: "Cherry" },
+];
+
+describe("Combobox", () => {
+  describe("without form context", () => {
+    it("renders with label", () => {
+      const result = renderWithProviders(<Combobox label="Fruit" name="fruit" options={options} />);
+      expect(result.findTextElement("Fruit")).toBeDefined();
+    });
+
+    it("renders required label with asterisk", () => {
+      const result = renderWithProviders(
+        <Combobox label="Required" name="req" options={options} required />,
+      );
+      const label = result.container.querySelector("label");
+      expect(label?.textContent).toContain("*");
+    });
+
+    it("renders with helper text", () => {
+      const result = renderWithProviders(
+        <Combobox label="Fruit" name="fruit" options={options} helperText="Pick a fruit" />,
+      );
+      expect(result.findTextElement("Pick a fruit")).toBeDefined();
+    });
+
+    it("renders skeleton placeholder", () => {
+      const result = renderWithProviders(
+        <Combobox label="Loading" name="l" options={options} skeleton />,
+      );
+      // No interactive trigger rendered in skeleton mode
+      const buttons = result.container.querySelectorAll("button");
+      expect(buttons.length).toBe(0);
+    });
+
+    it("renders with pre-selected value", () => {
+      const result = renderWithProviders(
+        <Combobox label="Fruit" name="fruit" options={options} value="apple" />,
+      );
+      expect(result.findTextElement("Apple")).toBeDefined();
+    });
+
+    it("renders disabled state", () => {
+      const result = renderWithProviders(
+        <Combobox label="Disabled" name="d" options={options} disabled />,
+      );
+      expect(result.findTextElement("Disabled")).toBeDefined();
+    });
+  });
+
+  describe("with form context", () => {
+    it("renders inside form", () => {
+      const result = renderWithProviders(
+        <Form formOptions={{ defaultValues: { fruit: "" } }} submitText="Submit">
+          <Combobox name="fruit" label="Fruit" options={options} />
+        </Form>,
+      );
+      expect(result.findTextElement("Fruit")).toBeDefined();
+    });
+  });
+});