@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/collapsible.d.ts

@@ -0,0 +1,159 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from 'radix-ui';
+
+interface CollapsibleContextValue {
+    open: boolean;
+    contentId: string;
+}
+declare function useCollapsibleContext(): CollapsibleContextValue;
+interface CollapsibleProps extends Omit<ComponentPropsWithoutRef<typeof Collapsible$1.Root>, "asChild"> {
+    /**
+     * Whether the collapsible is expanded.
+     * When provided, the component is controlled.
+     */
+    open?: boolean;
+    /**
+     * Default open state for uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the collapsible is disabled.
+     * When disabled, the trigger cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content to render inside the collapsible root. */
+    children: ReactNode;
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+}
+interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<typeof Collapsible$1.Trigger> {
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+interface CollapsibleContentProps extends Omit<ComponentPropsWithoutRef<typeof Collapsible$1.Content>, "asChild" | "forceMount"> {
+    /**
+     * Duration of the expand/collapse animation in seconds.
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Whether to force-mount the content in the DOM even when collapsed.
+     * Useful for SEO or when you need to measure the content.
+     * @default false
+     */
+    forceMount?: boolean;
+    /** Additional CSS classes to merge on the content wrapper. */
+    className?: string;
+    /** Content to render inside the collapsible section. */
+    children: ReactNode;
+}
+/**
+ * Collapsible — an animated show/hide section.
+ *
+ * Built on Radix UI's Collapsible primitive for accessibility and Framer
+ * Motion for smooth height animations. The root component manages the
+ * open/closed state and provides context to child components.
+ *
+ * Accessibility:
+ *   - Radix handles `aria-expanded` on the trigger
+ *   - Radix handles `aria-controls` linking trigger → content
+ *   - Keyboard: Space/Enter toggles the collapsible
+ *   - Disabled state prevents interaction
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Collapsible>
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="ghost">Show more</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>Hidden content revealed on toggle.</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * // Controlled
+ * <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="ghost">
+ *       {isOpen ? "Hide" : "Show"} details
+ *     </Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>Controlled collapsible content.</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * // Default open
+ * <Collapsible defaultOpen>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>This content is visible by default.</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+declare function Collapsible({ open: openProp, defaultOpen, onOpenChange, disabled, className, children, ...rest }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+declare namespace Collapsible {
+    var displayName: string;
+}
+/**
+ * CollapsibleTrigger — the button that toggles the collapsible open/closed.
+ *
+ * Use `asChild` to render your own trigger element (e.g., a Button)
+ * instead of the default `<button>`.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleTrigger asChild>
+ *   <Button variant="ghost" size="sm">
+ *     <ChevronDown className="size-4" />
+ *     Toggle section
+ *   </Button>
+ * </CollapsibleTrigger>
+ * ```
+ */
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * CollapsibleContent — the content section that expands/collapses.
+ *
+ * Uses Framer Motion's AnimatePresence for enter/exit animations.
+ * The content smoothly animates its height from 0 to auto when opening,
+ * and from auto to 0 when closing. Overflow is hidden during the
+ * animation to prevent content from being visible outside the bounds.
+ *
+ * The `forceMount` prop can be used to keep the content in the DOM
+ * even when collapsed (useful for SEO or measurement purposes). When
+ * force-mounted and collapsed, the content is visually hidden with
+ * `height: 0` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleContent>
+ *   <div className="p-4">
+ *     <p>This content animates in and out.</p>
+ *   </div>
+ * </CollapsibleContent>
+ *
+ * // Custom animation duration
+ * <CollapsibleContent duration={0.3}>
+ *   <p>Slower animation.</p>
+ * </CollapsibleContent>
+ *
+ * // Force mounted (always in DOM)
+ * <CollapsibleContent forceMount>
+ *   <p>Always in the DOM, visually hidden when collapsed.</p>
+ * </CollapsibleContent>
+ * ```
+ */
+declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, useCollapsibleContext };

package/dist/components/collapsible.mjs

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useState
+} from "react";
+const CollapsibleContext = createContext({
+  open: false,
+  contentId: ""
+});
+function useCollapsibleContext() {
+  return useContext(CollapsibleContext);
+}
+const collapseTransition = {
+  duration: 0.2,
+  ease: [0.25, 0.1, 0.25, 1]
+};
+const reducedMotionTransition = {
+  duration: 0.01,
+  ease: "linear"
+};
+function Collapsible({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  className,
+  children,
+  ...rest
+}) {
+  const contentId = useId();
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = isControlled ? openProp : internalOpen;
+  const handleOpenChange = useCallback(
+    (value) => {
+      if (!isControlled) {
+        setInternalOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: { open, contentId }, children: /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.Root,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      disabled,
+      className: cn(className),
+      "data-ds": "",
+      "data-ds-component": "collapsible",
+      ...open ? { "data-ds-open": "" } : {},
+      ...rest,
+      children
+    }
+  ) });
+}
+Collapsible.displayName = "Collapsible";
+const CollapsibleTrigger = forwardRef(function CollapsibleTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.Trigger,
+    {
+      ref,
+      className: cn(className),
+      "data-ds": "",
+      "data-ds-component": "collapsible-trigger",
+      ...rest
+    }
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const MotionDiv = motion.div;
+function AnimatedCollapsibleInner({
+  duration = 0.2,
+  className,
+  children
+}) {
+  const prefersReduced = useReducedMotion();
+  const transition = prefersReduced ? reducedMotionTransition : { ...collapseTransition, duration };
+  return /* @__PURE__ */ jsx(
+    MotionDiv,
+    {
+      initial: { height: 0, opacity: 0, overflow: "hidden" },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        overflow: "hidden",
+        transitionEnd: { overflow: "visible" }
+      },
+      exit: { height: 0, opacity: 0, overflow: "hidden" },
+      transition,
+      className: cn(className),
+      "data-ds": "",
+      "data-ds-component": "collapsible-content",
+      children
+    }
+  );
+}
+const CollapsibleContent = forwardRef(function CollapsibleContent2({ duration = 0.2, forceMount = false, className, children, ...rest }, ref) {
+  const { open } = useCollapsibleContext();
+  if (forceMount) {
+    return /* @__PURE__ */ jsxs(CollapsiblePrimitive.Content, { forceMount: true, ref, ...rest, children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(AnimatedCollapsibleInner, { duration, className, children }) }),
+      !open && /* @__PURE__ */ jsx("div", { style: { height: 0, overflow: "hidden" }, "aria-hidden": "true" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { forceMount: true, ref, ...rest, children: /* @__PURE__ */ jsx(AnimatedCollapsibleInner, { duration, className, children }) }) });
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsibleContext
+};

package/dist/components/color-picker.cjs

@@ -0,0 +1,348 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_picker_exports = {};
+__export(color_picker_exports, {
+  ColorPicker: () => ColorPicker
+});
+module.exports = __toCommonJS(color_picker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_focus_ring = require("../utils/focus-ring.cjs");
+var import_react = require("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 = (0, import_react.forwardRef)(
+  function ColorPicker2({
+    value,
+    defaultValue = "#000000",
+    onChange,
+    presets = DEFAULT_PRESETS,
+    showInput = true,
+    disabled = false,
+    size = "md",
+    className,
+    label = "Choose color"
+  }, ref) {
+    const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue);
+    const currentValue = value ?? internalValue;
+    const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+    const [hexInput, setHexInput] = (0, import_react.useState)(currentValue);
+    const popoverRef = (0, import_react.useRef)(null);
+    const triggerRef = (0, import_react.useRef)(null);
+    const hsl = (0, import_react.useMemo)(() => hexToHsl(currentValue), [currentValue]);
+    const [hue, setHue] = (0, import_react.useState)(hsl.h);
+    const [sat, setSat] = (0, import_react.useState)(hsl.s);
+    const [lit, setLit] = (0, import_react.useState)(hsl.l);
+    const [prevValue, setPrevValue] = (0, import_react.useState)(currentValue);
+    if (currentValue !== prevValue) {
+      setPrevValue(currentValue);
+      const parsed = hexToHsl(currentValue);
+      setHue(parsed.h);
+      setSat(parsed.s);
+      setLit(parsed.l);
+      setHexInput(currentValue);
+    }
+    const updateColor = (0, import_react.useCallback)(
+      (hex) => {
+        if (!value) setInternalValue(hex);
+        onChange?.(hex);
+        setHexInput(hex);
+      },
+      [value, onChange]
+    );
+    const handleHueChange = (0, import_react.useCallback)(
+      (newHue) => {
+        setHue(newHue);
+        updateColor(hslToHex(newHue, sat, lit));
+      },
+      [sat, lit, updateColor]
+    );
+    const handleSatLitChange = (0, import_react.useCallback)(
+      (newSat, newLit) => {
+        setSat(newSat);
+        setLit(newLit);
+        updateColor(hslToHex(hue, newSat, newLit));
+      },
+      [hue, updateColor]
+    );
+    const handleHexInput = (0, import_react.useCallback)(
+      (val) => {
+        setHexInput(val);
+        if (isValidHex(val)) {
+          updateColor(val.toLowerCase());
+        }
+      },
+      [updateColor]
+    );
+    (0, import_react.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]);
+    (0, import_react.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 = (0, import_react.useRef)(null);
+    const handleSpectrumPointer = (0, import_react.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 = (0, import_react.useCallback)(
+      (e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        handleSpectrumPointer(e);
+      },
+      [handleSpectrumPointer]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)("relative inline-block", className),
+        "data-ds": "",
+        "data-ds-component": "color-picker",
+        ...disabled ? { "data-ds-disabled": "" } : {},
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              disabled,
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              className: (0, import_cn.cn)(
+                "rounded-md border border-border shadow-sm transition-shadow",
+                "hover:shadow-md disabled:opacity-50 disabled:pointer-events-none",
+                sizeMap[size],
+                import_focus_ring.focusRingClasses
+              ),
+              style: { backgroundColor: currentValue },
+              "aria-label": label,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "dialog"
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              ref: popoverRef,
+              className: (0, import_cn.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 360,
+                    value: hue,
+                    onChange: (e) => handleHueChange(Number(e.target.value)),
+                    className: (0, import_cn.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mb-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: "size-8 rounded-md border border-border shrink-0",
+                      style: { backgroundColor: currentValue }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "text",
+                      value: hexInput,
+                      onChange: (e) => handleHexInput(e.target.value),
+                      onBlur: () => {
+                        if (!isValidHex(hexInput)) setHexInput(currentValue);
+                      },
+                      className: (0, import_cn.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",
+                        import_focus_ring.focusRingClasses
+                      ),
+                      placeholder: "#000000",
+                      maxLength: 7,
+                      "aria-label": "HEX color value"
+                    }
+                  )
+                ] }),
+                presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-1.5", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => updateColor(preset),
+                    className: (0, import_cn.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",
+                      import_focus_ring.focusRingClasses
+                    ),
+                    style: { backgroundColor: preset },
+                    "aria-label": `Select ${preset}`
+                  },
+                  preset
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPicker
+});

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

@@ -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 };