@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/color-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { HexColorPicker } from 'react-colorful'\nimport { cn } from './lib/utils'\nimport { springs, durations } from './lib/motion'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets (color-blind accessible) ──\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#EF4444', label: 'Red' },\n  { hex: '#F59E0B', label: 'Amber' },\n  { hex: '#10B981', label: 'Emerald' },\n  { hex: '#3B82F6', label: 'Blue' },\n  { hex: '#8B5CF6', label: 'Violet' },\n  { hex: '#EC4899', label: 'Pink' },\n  { hex: '#06B6D4', label: 'Cyan' },\n  { hex: '#F97316', label: 'Orange' },\n  { hex: '#84CC16', label: 'Lime' },\n  { hex: '#6366F1', label: 'Indigo' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-ds-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-ds-sm border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    React.useEffect(() => { setInternalColor(value) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-ds-md px-ds-04 py-ds-02 font-mono text-ds-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                aria-label={`Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-ds-md border border-surface-border-strong',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                aria-label={`Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-ds-sm bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Revert display to current color if input is incomplete\n                          const display = internalColor.replace('#', '').toUpperCase()\n                          if (display.length !== 6) setInternalColor(internalColor)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-ds-sm border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border hover:border-surface-border-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-full border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-ds-xs text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}

package/dist/ui/color-swatch.js

@@ -1,91 +1,61 @@
 "use client";
-import { jsxs as h, Fragment as N, jsx as t } from "react/jsx-runtime";
-import * as s from "react";
-import { cn as o } from "./lib/utils.js";
-const S = {
-  sm: "h-3 w-3",
-  md: "h-4 w-4",
-  lg: "h-6 w-6"
-}, l = {
-  circle: "rounded-full",
-  square: "rounded-none",
-  rounded: "rounded-ds-sm"
-}, k = s.forwardRef(
-  ({ color: a, size: g = "md", shape: n = "circle", ring: y = !1, copyable: i = !1, checkerboard: e = !1, className: w, style: x, ...c }, d) => {
-    const [b, u] = s.useState(!1), p = s.useRef(void 0);
-    s.useEffect(() => () => clearTimeout(p.current), []);
-    const m = o(
-      "inline-block shrink-0 relative",
-      S[g],
-      l[n],
-      y && "shadow-ring-sm",
-      i && "cursor-pointer",
-      w
-    ), C = e ? {
-      backgroundImage: "repeating-conic-gradient(var(--color-neutral-5) 0% 25%, transparent 0% 50%)",
-      backgroundSize: "8px 8px"
-    } : {}, r = {
-      backgroundColor: a,
-      ...x
-    };
-    function v() {
-      navigator.clipboard.writeText(a).then(() => {
-        u(!0), p.current = setTimeout(() => u(!1), 1500);
-      });
-    }
-    const f = e ? /* @__PURE__ */ h(N, { children: [
-      /* @__PURE__ */ t(
-        "span",
-        {
-          className: o("absolute inset-0", l[n]),
-          style: C,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ t(
-        "span",
-        {
-          className: o("absolute inset-0", l[n]),
-          style: r
-        }
-      )
-    ] }) : null;
-    return i ? /* @__PURE__ */ h(
-      "button",
-      {
-        type: "button",
-        ref: d,
-        className: m,
-        style: e ? {} : r,
-        onClick: v,
-        "aria-label": `Copy color ${a}`,
-        ...c,
-        children: [
-          f,
-          b && /* @__PURE__ */ t(
-            "span",
-            {
-              role: "status",
-              className: "absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating",
-              children: "Copied!"
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ t(
-      "span",
-      {
-        ref: d,
-        className: m,
-        style: e ? {} : r,
-        role: "presentation",
-        ...c,
-        children: f
-      }
-    );
-  }
-);
-k.displayName = "ColorSwatch";
-export {
-  k as ColorSwatch
-};
+import { cn as e } from "./lib/utils.js";
+import * as t from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/ui/color-swatch.tsx
+var a = {
+	sm: "h-3 w-3",
+	md: "h-4 w-4",
+	lg: "h-6 w-6"
+}, o = {
+	circle: "rounded-full",
+	square: "rounded-none",
+	rounded: "rounded-ds-sm"
+}, s = t.forwardRef(({ color: s, size: c = "md", shape: l = "circle", ring: u = !1, copyable: d = !1, checkerboard: f = !1, className: p, style: m, ...h }, g) => {
+	let [_, v] = t.useState(!1), y = t.useRef(void 0);
+	t.useEffect(() => () => clearTimeout(y.current), []);
+	let b = e("inline-block shrink-0 relative", a[c], o[l], u && "shadow-ring-sm", d && "cursor-pointer", p), x = f ? {
+		backgroundImage: "repeating-conic-gradient(var(--color-neutral-5) 0% 25%, transparent 0% 50%)",
+		backgroundSize: "8px 8px"
+	} : {}, S = {
+		backgroundColor: s,
+		...m
+	};
+	function C() {
+		navigator.clipboard.writeText(s).then(() => {
+			v(!0), y.current = setTimeout(() => v(!1), 1500);
+		});
+	}
+	let w = f ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		className: e("absolute inset-0", o[l]),
+		style: x,
+		"aria-hidden": "true"
+	}), /* @__PURE__ */ r("span", {
+		className: e("absolute inset-0", o[l]),
+		style: S
+	})] }) : null;
+	return d ? /* @__PURE__ */ i("button", {
+		type: "button",
+		ref: g,
+		className: b,
+		style: f ? {} : S,
+		onClick: C,
+		"aria-label": `Copy color ${s}`,
+		...h,
+		children: [w, _ && /* @__PURE__ */ r("span", {
+			role: "status",
+			className: "absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating",
+			children: "Copied!"
+		})]
+	}) : /* @__PURE__ */ r("span", {
+		ref: g,
+		className: b,
+		style: f ? {} : S,
+		role: "presentation",
+		...h,
+		children: w
+	});
+});
+s.displayName = "ColorSwatch";
+//#endregion
+export { s as ColorSwatch };

package/dist/ui/color-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch.js","names":[],"sources":["../../src/ui/color-swatch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from './lib/utils'\n\nconst sizeMap = {\n  sm: 'h-3 w-3',\n  md: 'h-4 w-4',\n  lg: 'h-6 w-6',\n} as const\n\nconst shapeMap = {\n  circle: 'rounded-full',\n  square: 'rounded-none',\n  rounded: 'rounded-ds-sm',\n} as const\n\n/**\n * A tiny color swatch for displaying dynamic runtime colors (e.g. brand colors from a database).\n *\n * @example\n * <ColorSwatch color=\"#FF5733\" />\n * <ColorSwatch color={org.brandColor} size=\"lg\" ring />\n * <ColorSwatch color=\"rgba(0,0,0,0.5)\" checkerboard copyable />\n */\nexport interface ColorSwatchProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Any valid CSS color string (hex, rgb, oklch, etc.) */\n  color: string\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** @default 'circle' */\n  shape?: 'circle' | 'square' | 'rounded'\n  /** Show subtle ring border — useful for light colors that blend into the background */\n  ring?: boolean\n  /** Render as a button that copies the color string to clipboard on click */\n  copyable?: boolean\n  /** Show a checkerboard pattern behind the color — useful for transparent colors */\n  checkerboard?: boolean\n}\n\nconst ColorSwatch = React.forwardRef<HTMLSpanElement, ColorSwatchProps>(\n  ({ color, size = 'md', shape = 'circle', ring = false, copyable = false, checkerboard = false, className, style, ...props }, ref) => {\n    const [copied, setCopied] = React.useState(false)\n    const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n    const sharedClasses = cn(\n      'inline-block shrink-0 relative',\n      sizeMap[size],\n      shapeMap[shape],\n      ring && 'shadow-ring-sm',\n      copyable && 'cursor-pointer',\n      className,\n    )\n\n    const checkerboardStyle: React.CSSProperties = checkerboard\n      ? {\n          backgroundImage: `repeating-conic-gradient(var(--color-neutral-5) 0% 25%, transparent 0% 50%)`,\n          backgroundSize: '8px 8px',\n        }\n      : {}\n\n    const colorOverlayStyle: React.CSSProperties = {\n      backgroundColor: color,\n      ...style,\n    }\n\n    function handleCopy() {\n      navigator.clipboard.writeText(color).then(() => {\n        setCopied(true)\n        timerRef.current = setTimeout(() => setCopied(false), 1500)\n      })\n    }\n\n    const inner = checkerboard ? (\n      <>\n        <span\n          className={cn('absolute inset-0', shapeMap[shape])}\n          style={checkerboardStyle}\n          aria-hidden=\"true\"\n        />\n        <span\n          className={cn('absolute inset-0', shapeMap[shape])}\n          style={colorOverlayStyle}\n        />\n      </>\n    ) : null\n\n    if (copyable) {\n      return (\n        <button\n          type=\"button\"\n          ref={ref as React.Ref<HTMLButtonElement>}\n          className={sharedClasses}\n          style={checkerboard ? {} : colorOverlayStyle}\n          onClick={handleCopy}\n          aria-label={`Copy color ${color}`}\n          {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        >\n          {inner}\n          {copied && (\n            <span\n              role=\"status\"\n              className=\"absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating\"\n            >\n              Copied!\n            </span>\n          )}\n        </button>\n      )\n    }\n\n    return (\n      <span\n        ref={ref}\n        className={sharedClasses}\n        style={checkerboard ? {} : colorOverlayStyle}\n        role=\"presentation\"\n        {...props}\n      >\n        {inner}\n      </span>\n    )\n  },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\n"],"mappings":";;;;;AAKA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAW;CACf,QAAQ;CACR,QAAQ;CACR,SAAS;CACV,EAyBK,IAAc,EAAM,YACvB,EAAE,UAAO,UAAO,MAAM,WAAQ,UAAU,UAAO,IAAO,cAAW,IAAO,kBAAe,IAAO,cAAW,UAAO,GAAG,KAAS,MAAQ;CACnI,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM,EAC3C,IAAW,EAAM,OAAkD,KAAA,EAAU;AACnF,GAAM,sBAAsB,aAAa,EAAS,QAAQ,EAAE,EAAE,CAAC;CAE/D,IAAM,IAAgB,EACpB,kCACA,EAAQ,IACR,EAAS,IACT,KAAQ,kBACR,KAAY,kBACZ,EACD,EAEK,IAAyC,IAC3C;EACE,iBAAiB;EACjB,gBAAgB;EACjB,GACD,EAAE,EAEA,IAAyC;EAC7C,iBAAiB;EACjB,GAAG;EACJ;CAED,SAAS,IAAa;AACpB,YAAU,UAAU,UAAU,EAAM,CAAC,WAAW;AAE9C,GADA,EAAU,GAAK,EACf,EAAS,UAAU,iBAAiB,EAAU,GAAM,EAAE,KAAK;IAC3D;;CAGJ,IAAM,IAAQ,IACZ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,eAAY;EACZ,CAAA,EACF,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,CAAA,CACD,EAAA,CAAA,GACD;AA0BJ,QAxBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACA;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,SAAS;EACT,cAAY,cAAc;EAC1B,GAAK;YAPP,CASG,GACA,KACC,kBAAC,QAAD;GACE,MAAK;GACL,WAAU;aACX;GAEM,CAAA,CAEF;MAKX,kBAAC,QAAD;EACO;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,MAAK;EACL,GAAI;YAEH;EACI,CAAA;EAGZ;AACD,EAAY,cAAc"}

package/dist/ui/combobox.d.ts

@@ -1,5 +1,10 @@
 "use client";
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+export declare const comboboxTriggerVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>;
 /**
  * Option shape for a Combobox dropdown item.
  * `value` must be unique across all options — it is the key used in selection state.
@@ -75,6 +80,8 @@ interface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode;
     /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */
     accessibleLabel?: string;
+    /** Size of the trigger. Controls height, text size, padding, and pill sizing. */
+    size?: ComboboxSize;
 }
 interface ComboboxSingleProps extends ComboboxBaseProps {
     multiple?: false;

package/dist/ui/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,+CAA+C;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oGAAoG;IACpG,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAA;AAQvE,QAAA,MAAM,QAAQ,yFAoYb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AASjE,eAAO,MAAM,uBAAuB;;8EAmBnC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AA0B5F;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,+CAA+C;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oGAAoG;IACpG,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iFAAiF;IACjF,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAA;AAQvE,QAAA,MAAM,QAAQ,yFA+Yb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}