@work-rjkashyap/unified-ui 0.3.4 → 0.3.5

package/dist/components/color-picker.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+
+interface ColorPickerProps {
+    /** Current color value in HEX format (e.g., "#ff0000"). */
+    value?: string;
+    /** Default color for uncontrolled mode. @default "#000000" */
+    defaultValue?: string;
+    /** Callback when color changes. */
+    onChange?: (color: string) => void;
+    /** Preset color swatches to display. */
+    presets?: string[];
+    /** Whether to show the HEX input field. @default true */
+    showInput?: boolean;
+    /** Whether the picker is disabled. @default false */
+    disabled?: boolean;
+    /** Size of the trigger swatch. @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Additional CSS classes. */
+    className?: string;
+    /** Placeholder label for accessibility. @default "Choose color" */
+    label?: string;
+}
+/**
+ * `ColorPicker` — a color selection component with spectrum, hue slider,
+ * HEX input, and preset swatches.
+ *
+ * @example
+ * ```tsx
+ * <ColorPicker value={color} onChange={setColor} />
+ * <ColorPicker defaultValue="#3b82f6" presets={["#ef4444", "#22c55e", "#3b82f6"]} />
+ * ```
+ */
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ColorPicker, type ColorPickerProps };

package/dist/components/color-picker.mjs

@@ -0,0 +1,331 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+function hexToHsl(hex) {
+  let r = 0, g = 0, b = 0;
+  const h6 = hex.replace("#", "");
+  if (h6.length === 3) {
+    r = parseInt(h6[0] + h6[0], 16) / 255;
+    g = parseInt(h6[1] + h6[1], 16) / 255;
+    b = parseInt(h6[2] + h6[2], 16) / 255;
+  } else if (h6.length === 6) {
+    r = parseInt(h6.slice(0, 2), 16) / 255;
+    g = parseInt(h6.slice(2, 4), 16) / 255;
+    b = parseInt(h6.slice(4, 6), 16) / 255;
+  }
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let hue = 0, sat = 0;
+  const lit = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    sat = lit > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        hue = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        hue = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        hue = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(hue * 360),
+    s: Math.round(sat * 100),
+    l: Math.round(lit * 100)
+  };
+}
+function hslToHex(h, s, l) {
+  const sn = s / 100, ln = l / 100;
+  const a = sn * Math.min(ln, 1 - ln);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const color = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+function isValidHex(hex) {
+  return /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex);
+}
+const DEFAULT_PRESETS = [
+  "#000000",
+  "#374151",
+  "#6b7280",
+  "#9ca3af",
+  "#d1d5db",
+  "#ffffff",
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#3b82f6",
+  "#8b5cf6",
+  "#ec4899",
+  "#14b8a6",
+  "#06b6d4",
+  "#6366f1",
+  "#a855f7",
+  "#f43f5e"
+];
+const sizeMap = {
+  sm: "size-7",
+  md: "size-9",
+  lg: "size-11"
+};
+const ColorPicker = forwardRef(
+  function ColorPicker2({
+    value,
+    defaultValue = "#000000",
+    onChange,
+    presets = DEFAULT_PRESETS,
+    showInput = true,
+    disabled = false,
+    size = "md",
+    className,
+    label = "Choose color"
+  }, ref) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = value ?? internalValue;
+    const [isOpen, setIsOpen] = useState(false);
+    const [hexInput, setHexInput] = useState(currentValue);
+    const popoverRef = useRef(null);
+    const triggerRef = useRef(null);
+    const hsl = useMemo(() => hexToHsl(currentValue), [currentValue]);
+    const [hue, setHue] = useState(hsl.h);
+    const [sat, setSat] = useState(hsl.s);
+    const [lit, setLit] = useState(hsl.l);
+    const [prevValue, setPrevValue] = useState(currentValue);
+    if (currentValue !== prevValue) {
+      setPrevValue(currentValue);
+      const parsed = hexToHsl(currentValue);
+      setHue(parsed.h);
+      setSat(parsed.s);
+      setLit(parsed.l);
+      setHexInput(currentValue);
+    }
+    const updateColor = useCallback(
+      (hex) => {
+        if (!value) setInternalValue(hex);
+        onChange?.(hex);
+        setHexInput(hex);
+      },
+      [value, onChange]
+    );
+    const handleHueChange = useCallback(
+      (newHue) => {
+        setHue(newHue);
+        updateColor(hslToHex(newHue, sat, lit));
+      },
+      [sat, lit, updateColor]
+    );
+    const handleSatLitChange = useCallback(
+      (newSat, newLit) => {
+        setSat(newSat);
+        setLit(newLit);
+        updateColor(hslToHex(hue, newSat, newLit));
+      },
+      [hue, updateColor]
+    );
+    const handleHexInput = useCallback(
+      (val) => {
+        setHexInput(val);
+        if (isValidHex(val)) {
+          updateColor(val.toLowerCase());
+        }
+      },
+      [updateColor]
+    );
+    useEffect(() => {
+      if (!isOpen) return;
+      const handler = (e) => {
+        if (popoverRef.current && !popoverRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const handler = (e) => {
+        if (e.key === "Escape") setIsOpen(false);
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, [isOpen]);
+    const spectrumRef = useRef(null);
+    const handleSpectrumPointer = useCallback(
+      (e) => {
+        const rect = spectrumRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        const x = Math.max(
+          0,
+          Math.min(1, (e.clientX - rect.left) / rect.width)
+        );
+        const y = Math.max(
+          0,
+          Math.min(1, (e.clientY - rect.top) / rect.height)
+        );
+        const newSat = Math.round(x * 100);
+        const newLit = Math.round((1 - y) * 100);
+        handleSatLitChange(newSat, newLit);
+      },
+      [handleSatLitChange]
+    );
+    const handleSpectrumDown = useCallback(
+      (e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        handleSpectrumPointer(e);
+      },
+      [handleSpectrumPointer]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block", className),
+        "data-ds": "",
+        "data-ds-component": "color-picker",
+        ...disabled ? { "data-ds-disabled": "" } : {},
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              disabled,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              className: cn(
+                "rounded-md border border-border shadow-sm transition-shadow",
+                "hover:shadow-md disabled:opacity-50 disabled:pointer-events-none",
+                sizeMap[size],
+                focusRingClasses
+              ),
+              style: { backgroundColor: currentValue },
+              "aria-label": label,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "dialog"
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: popoverRef,
+              className: cn(
+                "absolute z-50 mt-2 w-64 rounded-lg border border-border bg-background p-3 shadow-lg",
+                "animate-in fade-in-0 zoom-in-95"
+              ),
+              role: "dialog",
+              "aria-label": "Color picker",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: spectrumRef,
+                    className: "relative h-36 w-full rounded-md cursor-crosshair overflow-hidden mb-3",
+                    style: {
+                      background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${hue}, 100%, 50%))`
+                    },
+                    onPointerDown: handleSpectrumDown,
+                    onPointerMove: (e) => {
+                      if (e.buttons > 0) handleSpectrumPointer(e);
+                    },
+                    "aria-label": "Saturation and lightness",
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "absolute size-3.5 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 pointer-events-none",
+                        style: {
+                          left: `${sat}%`,
+                          top: `${100 - lit}%`,
+                          backgroundColor: currentValue
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 360,
+                    value: hue,
+                    onChange: (e) => handleHueChange(Number(e.target.value)),
+                    className: cn(
+                      "w-full h-3 rounded-full appearance-none cursor-pointer",
+                      "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer"
+                    ),
+                    style: {
+                      background: "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)"
+                    },
+                    "aria-label": "Hue"
+                  }
+                ) }),
+                showInput && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "size-8 rounded-md border border-border shrink-0",
+                      style: { backgroundColor: currentValue }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: hexInput,
+                      onChange: (e) => handleHexInput(e.target.value),
+                      onBlur: () => {
+                        if (!isValidHex(hexInput)) setHexInput(currentValue);
+                      },
+                      className: cn(
+                        "flex-1 h-8 rounded-md border border-border bg-background px-2.5 text-sm font-mono",
+                        "text-foreground placeholder:text-muted-foreground",
+                        focusRingClasses
+                      ),
+                      placeholder: "#000000",
+                      maxLength: 7,
+                      "aria-label": "HEX color value"
+                    }
+                  )
+                ] }),
+                presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: presets.map((preset) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => updateColor(preset),
+                    className: cn(
+                      "size-6 rounded-md border transition-shadow",
+                      currentValue.toLowerCase() === preset.toLowerCase() ? "border-foreground shadow-sm ring-1 ring-foreground/20" : "border-border hover:shadow-sm",
+                      focusRingClasses
+                    ),
+                    style: { backgroundColor: preset },
+                    "aria-label": `Select ${preset}`
+                  },
+                  preset
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker
+};