@sableui/react 0.6.1 → 0.7.0

package/dist/components/collapsible/collapsible.meta.js

@@ -0,0 +1,117 @@
+// src/components/collapsible/collapsible.meta.ts
+var collapsibleMeta = {
+  name: "Collapsible",
+  summary: "Show/hide a panel of content over Base UI Collapsible \u2014 open/close state, ARIA expanded wiring, and the animated height transition. The minimal primitive behind Accordion: a trigger that toggles an overflow-clipped panel.",
+  status: "stable",
+  keywords: [
+    "collapsible",
+    "disclosure",
+    "expand",
+    "collapse"
+  ],
+  usage: {
+    description: "Use Collapsible for a single piece of optional content that can expand in place.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for local detail, advanced settings, or secondary context."
+      },
+      {
+        guidance: "do",
+        description: "Make the trigger label describe the hidden content, not the mechanism."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Collapsible for multi-section navigation; use Accordion or Tabs instead."
+      },
+      {
+        guidance: "dont",
+        description: "Do not animate it by transitioning height from auto. Use the motion-disclosure recipe, which transitions to the measured panel height \u2014 `auto` does not animate and the panel will snap."
+      }
+    ],
+    anatomy: [
+      {
+        name: "CollapsibleTrigger",
+        required: true,
+        description: "The control that toggles the panel."
+      },
+      {
+        name: "CollapsiblePanel",
+        required: true,
+        description: "The content that expands or collapses."
+      },
+      {
+        name: "CollapsibleIndicator",
+        required: false,
+        description: "A visual affordance for open or closed state."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Accordion",
+      "ShowMore"
+    ]
+  },
+  props: [
+    {
+      name: "Collapsible (Root)",
+      type: "Base UI Collapsible.Root props (open, defaultOpen, onOpenChange, disabled)",
+      default: "\u2014",
+      description: "Groups the trigger and panel and owns open state. Uncontrolled by default; pass `open` + `onOpenChange` to control it."
+    },
+    {
+      name: "defaultOpen",
+      type: "boolean",
+      default: "false",
+      description: "Whether the panel starts open in the uncontrolled case."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Disables the trigger and prevents toggling."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "CollapsibleTrigger",
+      type: "Base UI Collapsible.Trigger props + render",
+      description: 'The button that toggles the panel. Compose with render={<Button variant="ghost" \u2026 />}.'
+    },
+    {
+      name: "CollapsiblePanel",
+      type: "Base UI Collapsible.Panel props + className (keepMounted, hiddenUntilFound)",
+      description: "The collapsible contents. Overflow-hidden; animates height via the --collapsible-panel-height var Base UI sets."
+    },
+    {
+      name: "CollapsibleIndicator",
+      type: "{ className? }",
+      description: "Auto-rotating disclosure chevron. Place it inside the trigger content and add the `group/collapsible` class to the trigger so it flips 180\xB0 on open."
+    }
+  ],
+  tokensUsed: ["foreground", "muted-foreground"],
+  a11y: [
+    "Base UI wires aria-expanded on the trigger and aria-controls/id between trigger and panel.",
+    "Trigger is a real <button>; toggles on click and Enter/Space.",
+    "Animate open/close via data-[starting-style]/data-[ending-style]; data-[panel-open] marks the open state.",
+    "Set hiddenUntilFound on the panel to let in-page browser search expand it."
+  ],
+  examples: [
+    {
+      label: "Basic",
+      code: '<Collapsible><CollapsibleTrigger render={<Button variant="ghost">Details</Button>} /><CollapsiblePanel><p className="pt-3">Hidden content revealed on toggle.</p></CollapsiblePanel></Collapsible>'
+    },
+    {
+      label: "Open by default",
+      code: '<Collapsible defaultOpen><CollapsibleTrigger render={<Button variant="ghost">Summary</Button>} /><CollapsiblePanel><p className="pt-3">Visible on first render.</p></CollapsiblePanel></Collapsible>'
+    },
+    {
+      label: "With rotating chevron",
+      code: '<Collapsible><CollapsibleTrigger className="group/collapsible" render={<Button variant="ghost">Details <CollapsibleIndicator /></Button>} /><CollapsiblePanel><p className="pt-3">Revealed on toggle.</p></CollapsiblePanel></Collapsible>'
+    }
+  ]
+};
+export {
+  collapsibleMeta
+};

package/dist/components/collapsible/index.js

@@ -0,0 +1,15 @@
+// src/components/collapsible/index.ts
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleIndicator,
+  CollapsiblePanel
+} from "./collapsible.js";
+import { collapsibleMeta } from "./collapsible.meta.js";
+export {
+  Collapsible,
+  CollapsibleIndicator,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+  collapsibleMeta
+};

package/dist/components/color-field/color-field.js

@@ -0,0 +1,293 @@
+"use client";
+
+// src/components/color-field/color-field.tsx
+import { useCallback, useRef, useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/index.js";
+import { Input } from "../input/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.js";
+import { TRANSPARENT, formatHex, hsvToRgb, hueColor, isTransparent, parseHex, rgbToHsv } from "./color.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function useAreaDrag(onChange) {
+  const ref = useRef(null);
+  return {
+    ref,
+    onPointerDown: useCallback(
+      (event) => {
+        const el = ref.current;
+        if (!el || event.button !== 0) return;
+        event.preventDefault();
+        const emit = (clientX, clientY) => {
+          const box = el.getBoundingClientRect();
+          if (box.width === 0 || box.height === 0) return;
+          onChange(
+            Math.min(1, Math.max(0, (clientX - box.left) / box.width)),
+            Math.min(1, Math.max(0, (clientY - box.top) / box.height))
+          );
+        };
+        emit(event.clientX, event.clientY);
+        const onMove = (e) => emit(e.clientX, e.clientY);
+        const onUp = () => {
+          window.removeEventListener("pointermove", onMove);
+          window.removeEventListener("pointerup", onUp);
+          window.removeEventListener("pointercancel", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onUp);
+      },
+      [onChange]
+    )
+  };
+}
+function seed(value) {
+  const parsed = isTransparent(value) ? null : parseHex(value);
+  const rgb = parsed?.rgb ?? { r: 0, g: 0, b: 0 };
+  return { hsv: rgbToHsv(rgb), a: parsed?.a ?? 1, key: value };
+}
+function ColorField({
+  value,
+  onValueChange,
+  allowTransparent = false,
+  allowAlpha = false,
+  swatches,
+  label = "Colour",
+  className,
+  ...props
+}) {
+  const [picker, setPicker] = useState(() => seed(value));
+  const [hexDraft, setHexDraft] = useState(null);
+  const transparent = isTransparent(value);
+  if (picker.key !== value) {
+    setPicker(isTransparent(value) ? { ...picker, key: value } : seed(value));
+    setHexDraft(null);
+  }
+  const rgb = hsvToRgb(picker.hsv);
+  const solid = formatHex(rgb);
+  const withAlpha = formatHex(rgb, allowAlpha ? picker.a : 1);
+  const commit = (next, emitted) => {
+    setPicker({ ...next, key: emitted });
+    setHexDraft(null);
+    onValueChange(emitted);
+  };
+  const setHsv = (hsv) => {
+    const emitted = formatHex(hsvToRgb(hsv), allowAlpha ? picker.a : 1);
+    commit({ ...picker, hsv }, emitted);
+  };
+  const sv = useAreaDrag((x, y) => setHsv({ ...picker.hsv, s: x, v: 1 - y }));
+  const hue = useAreaDrag((x) => setHsv({ ...picker.hsv, h: x * 360 }));
+  const alpha = useAreaDrag((x) => commit({ ...picker, a: x }, formatHex(rgb, x)));
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `${label}: ${transparent ? "transparent" : withAlpha}`,
+            className: cn(
+              "checkerboard [--checkerboard-size:8px]",
+              "size-(--control-xs) shrink-0 rounded-xs ring-1 ring-hairline-strong",
+              "motion-interactive focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "block size-full rounded-[inherit]",
+                style: { backgroundColor: transparent ? "transparent" : withAlpha }
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-56 p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: sv.ref,
+          onPointerDown: sv.onPointerDown,
+          className: "relative h-28 w-full cursor-crosshair rounded-concentric-md/2 ring-1 ring-hairline",
+          style: { backgroundColor: hueColor(picker.hsv.h) },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "absolute inset-0 rounded-[inherit]",
+                style: {
+                  backgroundImage: (
+                    // design-lint-disable-next-line inline-color -- axes of the colour space, not theme surfaces
+                    "linear-gradient(to right, #fff, transparent), linear-gradient(to top, #000, transparent)"
+                  )
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: (
+                  // design-lint-disable-next-line raw-black-white -- handle over arbitrary user colour; no token can guarantee contrast
+                  "absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white ring-inset shadow-(--knob-shadow)"
+                ),
+                style: {
+                  left: `${picker.hsv.s * 100}%`,
+                  top: `${(1 - picker.hsv.v) * 100}%`,
+                  backgroundColor: solid,
+                  outline: "1px solid rgb(0 0 0 / 0.35)"
+                }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: hue.ref,
+          onPointerDown: hue.onPointerDown,
+          className: "relative h-3 w-full cursor-ew-resize rounded-full ring-1 ring-hairline",
+          style: {
+            backgroundImage: (
+              // design-lint-disable-next-line inline-color -- the hue wheel IS these six primaries
+              "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
+            )
+          },
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: (
+                // design-lint-disable-next-line raw-black-white -- handle over arbitrary hue; see HANDLE CONTRAST above
+                "absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white ring-1 ring-black/30"
+              ),
+              style: { left: `${picker.hsv.h / 360 * 100}%` }
+            }
+          )
+        }
+      ),
+      allowAlpha ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: alpha.ref,
+          onPointerDown: alpha.onPointerDown,
+          className: "checkerboard [--checkerboard-size:8px] relative h-3 w-full cursor-ew-resize rounded-full ring-1 ring-hairline",
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "absolute inset-0 rounded-[inherit]",
+                style: {
+                  backgroundImage: `linear-gradient(to right, ${formatHex(rgb, 0)}, ${solid})`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: (
+                  // design-lint-disable-next-line raw-black-white -- handle over arbitrary hue and checkerboard; see HANDLE CONTRAST above
+                  "absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white ring-1 ring-black/30"
+                ),
+                style: { left: `${picker.a * 100}%` }
+              }
+            )
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": `${label} hex`,
+            value: hexDraft ?? (transparent ? "" : withAlpha),
+            placeholder: transparent ? TRANSPARENT : void 0,
+            spellCheck: false,
+            onChange: (event) => {
+              const next = event.target.value;
+              setHexDraft(next);
+              const parsed = parseHex(next);
+              if (!parsed) return;
+              const emitted = formatHex(parsed.rgb, allowAlpha ? parsed.a : 1);
+              setPicker({ hsv: rgbToHsv(parsed.rgb), a: parsed.a, key: emitted });
+              onValueChange(emitted);
+            },
+            onBlur: () => setHexDraft(null),
+            size: "xs",
+            className: "min-w-0 flex-1 text-ui-num"
+          }
+        ),
+        typeof window !== "undefined" && "EyeDropper" in window ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon-xs",
+            variant: "ghost",
+            "aria-label": "Pick colour from screen",
+            onClick: async () => {
+              try {
+                const result = await new window.EyeDropper().open();
+                const parsed = parseHex(String(result.sRGBHex));
+                if (!parsed) return;
+                const emitted = formatHex(parsed.rgb, allowAlpha ? picker.a : 1);
+                commit({ hsv: rgbToHsv(parsed.rgb), a: picker.a, key: emitted }, emitted);
+              } catch {
+              }
+            },
+            children: /* @__PURE__ */ jsx(Icon, { name: "eyedropper" })
+          }
+        ) : null
+      ] }),
+      swatches?.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: swatches.map((swatch) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": swatch,
+          onClick: () => {
+            const parsed = parseHex(swatch);
+            if (!parsed) return;
+            const emitted = formatHex(parsed.rgb, allowAlpha ? parsed.a : 1);
+            commit({ hsv: rgbToHsv(parsed.rgb), a: parsed.a, key: emitted }, emitted);
+          },
+          className: "hit-target size-5 rounded-xs ring-1 ring-hairline-strong motion-interactive hover:scale-110 [--hit-target-size:24px]",
+          style: { backgroundColor: swatch }
+        },
+        swatch
+      )) }) : null,
+      allowTransparent ? (
+        // Inside the picker, as a value — not a switch beside the field.
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "xs",
+            variant: transparent ? "secondary" : "ghost",
+            "aria-pressed": transparent,
+            onClick: () => transparent ? commit(picker, formatHex(rgb, allowAlpha ? picker.a : 1)) : commit(picker, TRANSPARENT),
+            className: "w-full justify-start gap-1.5 text-ui-md",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "checkerboard [--checkerboard-size:6px] size-3 shrink-0 rounded-xs ring-1 ring-hairline-strong"
+                }
+              ),
+              "Transparent"
+            ]
+          }
+        )
+      ) : null
+    ] }) })
+  ] });
+}
+ColorField.displayName = "ColorField";
+export {
+  ColorField
+};

package/dist/components/color-field/color-field.meta.js

@@ -0,0 +1,142 @@
+// src/components/color-field/color-field.meta.ts
+var colorFieldMeta = {
+  name: "ColorField",
+  summary: "A colour swatch that opens a themed picker \u2014 saturation/value area, hue and alpha sliders, hex entry, presets, and transparent as a value rather than a separate toggle.",
+  keywords: [
+    "color",
+    "colour",
+    "color picker",
+    "swatch",
+    "hex",
+    "alpha",
+    "transparency",
+    "eyedropper",
+    "property",
+    "workspace"
+  ],
+  usage: {
+    description: 'Use ColorField wherever a colour is a property: a canvas background, an effect parameter, a stroke or fill. It is sized to the control ladder so it lines up inside a PropertyRow or PropertyPair. Deliberately not <input type="color">, which opens the OS dialog \u2014 that ignores the theme entirely, cannot show a transparency checkerboard, has no alpha channel, hosts no eyedropper or presets, and renders at whatever size the platform picks, so it never aligns in a property grid.',
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Use allowTransparent when "no colour" is a real value. It appears inside the picker as a value; a transparent switch sitting beside a colour control reads as two properties when it is one.'
+      },
+      {
+        guidance: "do",
+        description: "Pass swatches when a surface has a house palette. Presets are how most colour choices actually get made, and they cost one row."
+      },
+      {
+        guidance: "do",
+        description: "Decide whether your persistence layer accepts 8-digit hex before enabling allowAlpha. The value format is the contract \u2014 see the tokens note."
+      },
+      {
+        guidance: "dont",
+        description: "Put a separate opacity slider next to a ColorField that already has allowAlpha. Two controls writing one channel is how they drift out of sync."
+      },
+      {
+        guidance: "dont",
+        description: "Re-derive hue from the committed value on every render. Grey has no hue, so dragging saturation to zero would snap the hue slider to red with no way back \u2014 ColorField keeps hue in its own state for exactly this reason."
+      },
+      {
+        guidance: "dont",
+        description: "Hand-roll a transparency checkerboard. Use the `checkerboard` utility with `--checkerboard-size` (~16px for an artboard, ~8px for a 24px swatch); two hand-rolled copies had already drifted before it existed. Its colours come from --panel / --panel-raised, so it is correct in both modes. It is deliberately not named bg-checkerboard: a custom bg-* utility lands in tailwind-merge's background group and silently evicts, or is evicted by, a real bg-* colour class."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Trigger",
+        required: true,
+        description: "A swatch at --control-xs with a hairline ring, on a checkerboard so a translucent or transparent value reads as such."
+      },
+      {
+        name: "Picker",
+        required: true,
+        description: "Saturation/value area over the current hue, a hue slider, an alpha slider when allowAlpha, and a hex field."
+      },
+      {
+        name: "Presets",
+        required: false,
+        description: "An optional swatch row, and the Transparent entry when allowTransparent."
+      }
+    ]
+  },
+  related: {
+    components: ["PropertyRow", "PropertyPair", "ScrubField", "Input", "Popover"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "value",
+      type: "string",
+      description: 'The current value: "transparent", "#rrggbb", or "#rrggbbaa".'
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string) => void",
+      description: "Called with the new value on every commit, including mid-drag."
+    },
+    {
+      name: "allowTransparent",
+      type: "boolean",
+      default: "false",
+      description: 'Offers "transparent" as a value inside the picker. Colour \u2192 transparent \u2192 colour restores the colour you had.'
+    },
+    {
+      name: "allowAlpha",
+      type: "boolean",
+      default: "false",
+      description: "Enables the alpha slider, and therefore 8-digit hex output. Off by default because it widens the value format."
+    },
+    { name: "swatches", type: "string[]", description: "Optional preset row." },
+    {
+      name: "label",
+      type: "string",
+      default: '"Colour"',
+      description: "Accessible name for the trigger; the current value is appended to it."
+    }
+  ],
+  a11y: [
+    `The trigger's accessible name includes the current value, so a screen reader announces the colour rather than just "button" \u2014 the swatch itself conveys nothing without sight.`,
+    "The Transparent entry is a toggle with aria-pressed, because it is a state of the value and not a navigation action.",
+    "The hex field is the keyboard path to any colour. The saturation/value area and the sliders are pointer-driven and are NOT keyboard operable \u2014 a known gap, and the reason the hex field is never hidden.",
+    "The eyedropper is only rendered where the EyeDropper API exists (Chromium), rather than shown and broken elsewhere."
+  ],
+  tokensUsed: ["panel", "panel-raised", "hairline", "hairline-strong", "ring", "popover"],
+  examples: [
+    {
+      label: "Canvas background",
+      code: `<PropertyRow label="Background">
+  <ColorField value={background} onValueChange={setBackground} allowTransparent />
+</PropertyRow>`
+    },
+    {
+      label: "With alpha and a palette",
+      code: `<ColorField
+  value={tint}
+  onValueChange={setTint}
+  allowAlpha
+  swatches={["#f43f5e", "#facc15", "#22c55e", "#3b82f6", "#a855f7"]}
+  label="Tint"
+/>`
+    },
+    {
+      label: "The value format is the contract",
+      code: `// ColorField only ever EMITS these three shapes:
+//   "transparent" | "#rrggbb" | "#rrggbbaa"
+// It accepts #rgb and #rgba on paste but never produces them, so a consumer's
+// parser has three cases to handle rather than five.
+//
+// Alpha is omitted when fully opaque \u2014 "#3b82f6", never "#3b82f6ff" \u2014 so a
+// parser written before alpha support keeps reading opaque colours correctly.
+// Only enable allowAlpha once your parser and your persisted format accept the
+// 8-digit form, or a document saved by a newer build degrades on an older one.
+
+import { parseHex, isTransparent } from "@sableui/react"
+
+const parsed = isTransparent(value) ? null : parseHex(value) // null = not a colour`
+    }
+  ]
+};
+export {
+  colorFieldMeta
+};

package/dist/components/color-field/color.js

@@ -0,0 +1,69 @@
+// src/components/color-field/color.ts
+var TRANSPARENT = "transparent";
+function isTransparent(value) {
+  return value.trim().toLowerCase() === TRANSPARENT;
+}
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+var byte = (n) => clamp(Math.round(n), 0, 255);
+function parseHex(input) {
+  const hex = input.trim().replace(/^#/, "").toLowerCase();
+  if (!/^[0-9a-f]+$/.test(hex)) return null;
+  const expand = (c) => Number.parseInt(c + c, 16);
+  if (hex.length === 3 || hex.length === 4) {
+    return {
+      rgb: { r: expand(hex[0]), g: expand(hex[1]), b: expand(hex[2]) },
+      a: hex.length === 4 ? expand(hex[3]) / 255 : 1
+    };
+  }
+  if (hex.length === 6 || hex.length === 8) {
+    const pair = (i) => Number.parseInt(hex.slice(i, i + 2), 16);
+    return {
+      rgb: { r: pair(0), g: pair(2), b: pair(4) },
+      a: hex.length === 8 ? pair(6) / 255 : 1
+    };
+  }
+  return null;
+}
+function formatHex(rgb, a = 1) {
+  const hex = (n) => byte(n).toString(16).padStart(2, "0");
+  const base = `#${hex(rgb.r)}${hex(rgb.g)}${hex(rgb.b)}`;
+  const alpha = clamp(a, 0, 1);
+  return alpha >= 1 ? base : `${base}${hex(alpha * 255)}`;
+}
+function rgbToHsv({ r, g, b }) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === rn) h = (gn - bn) / d % 6;
+    else if (max === gn) h = (bn - rn) / d + 2;
+    else h = (rn - gn) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max === 0 ? 0 : d / max, v: max };
+}
+function hsvToRgb({ h, s, v }) {
+  const hn = (h % 360 + 360) % 360;
+  const c = v * clamp(s, 0, 1);
+  const x = c * (1 - Math.abs(hn / 60 % 2 - 1));
+  const m = v - c;
+  const [r, g, b] = hn < 60 ? [c, x, 0] : hn < 120 ? [x, c, 0] : hn < 180 ? [0, c, x] : hn < 240 ? [0, x, c] : hn < 300 ? [x, 0, c] : [c, 0, x];
+  return { r: byte((r + m) * 255), g: byte((g + m) * 255), b: byte((b + m) * 255) };
+}
+function hueColor(h) {
+  return formatHex(hsvToRgb({ h, s: 1, v: 1 }));
+}
+export {
+  TRANSPARENT,
+  formatHex,
+  hsvToRgb,
+  hueColor,
+  isTransparent,
+  parseHex,
+  rgbToHsv
+};

package/dist/components/color-field/index.js

@@ -0,0 +1,15 @@
+// src/components/color-field/index.ts
+import { ColorField } from "./color-field.js";
+import { TRANSPARENT, formatHex, hsvToRgb, hueColor, isTransparent, parseHex, rgbToHsv } from "./color.js";
+import { colorFieldMeta } from "./color-field.meta.js";
+export {
+  ColorField,
+  TRANSPARENT,
+  colorFieldMeta,
+  formatHex,
+  hsvToRgb,
+  hueColor,
+  isTransparent,
+  parseHex,
+  rgbToHsv
+};