@d4gger/design-system 2.7.0

package/dist/components/colorPicker/ColorPicker.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.cts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CAgQd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorPicker/ColorPicker.d.mts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { colorPickerPropDefs } from './colorPicker.props.js';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    presetColors?: readonly string[];
+    placeholder?: string;
+    label?: string;
+};
+type ColorPickerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'defaultValue' | 'onChange' | 'value'> & ColorPickerOwnProps;
+declare const ColorPicker: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "defaultValue"> & GetPropDefTypes<{
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    presetColors?: readonly string[];
+    placeholder?: string;
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ColorPicker };
+export type { ColorPickerProps };
+//# sourceMappingURL=ColorPicker.d.mts.map

package/dist/components/colorPicker/ColorPicker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.mts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CAgQd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorPicker/ColorPicker.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { colorPickerPropDefs } from './colorPicker.props.js';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    presetColors?: readonly string[];
+    placeholder?: string;
+    label?: string;
+};
+type ColorPickerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'defaultValue' | 'onChange' | 'value'> & ColorPickerOwnProps;
+declare const ColorPicker: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value" | "defaultValue"> & GetPropDefTypes<{
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    presetColors?: readonly string[];
+    placeholder?: string;
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ColorPicker };
+export type { ColorPickerProps };
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/colorPicker/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AA4DpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,GACC,mBAAmB,CAAA;AAgCrB,QAAA,MAAM,WAAW;;;;;;;;;;;YA5CP,MAAM;mBACC,MAAM;oBACL,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;mBACxB,SAAS,MAAM,EAAE;kBAClB,MAAM;YACZ,MAAM;2CAgQd,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/colorPicker/ColorPicker.js

@@ -0,0 +1,272 @@
+"use client";
+import * as React from "react";
+import classNames from "classnames";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { HexAlphaColorPicker } from "react-colorful";
+import { Pipette } from "lucide-react";
+import { extractProps } from "../../_internal/helpers/extractProps.js";
+import { Icon } from "../icon/Icon.js";
+import { Input } from "../input/Input.js";
+import { Popover } from "../popover/Popover.js";
+import { colorPickerPropDefs } from "./colorPicker.props.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const DEFAULT_PRESET_COLORS = [
+  "#E0A82E",
+  "#E8BF6A",
+  "#8E9BB0",
+  "#CD7F32",
+  "#4CAF82",
+  "#EF4444",
+  "#8B641F",
+  "#D8D2C5",
+  "#332A1C",
+  "#3F3423",
+  "#0B0804",
+  "#F0EDE8"
+];
+const HEX_COLOR_PATTERN = /^#?(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+function normalizeHexColor(value) {
+  const trimmedValue = value.trim();
+  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {
+    return null;
+  }
+  const hexBody = trimmedValue.replace(/^#/, "");
+  const expandedHex = hexBody.length === 3 ? hexBody.split("").map((character) => `${character}${character}`).join("") : hexBody;
+  return `#${expandedHex.toUpperCase()}`;
+}
+function sanitizeHexInput(value) {
+  const uppercaseValue = value.toUpperCase().replace(/[^#0-9A-F]/g, "");
+  const hasHash = uppercaseValue.startsWith("#");
+  const hexBody = uppercaseValue.replace(/#/g, "");
+  return hasHash ? `#${hexBody.slice(0, 8)}` : hexBody.slice(0, 8);
+}
+function toNormalizedColor(value) {
+  if (!value) {
+    return void 0;
+  }
+  return normalizeHexColor(value) ?? void 0;
+}
+function getSwatchStyle(color) {
+  return {
+    ["--dsx-color-picker-swatch"]: color ?? "transparent"
+  };
+}
+function useControllableColorState({
+  value: valueProp,
+  defaultValue,
+  onValueChange
+}) {
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => toNormalizedColor(defaultValue));
+  const value = isControlled ? toNormalizedColor(valueProp) : uncontrolledValue;
+  const setValue = React.useCallback(
+    (nextValue) => {
+      const normalizedValue = normalizeHexColor(nextValue);
+      if (!normalizedValue) {
+        return false;
+      }
+      if (!isControlled) {
+        setUncontrolledValue(normalizedValue);
+      }
+      onValueChange?.(normalizedValue);
+      return true;
+    },
+    [isControlled, onValueChange]
+  );
+  return [value, setValue];
+}
+const ColorPicker = React.forwardRef((props, forwardedRef) => {
+  const {
+    asChild,
+    className,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    presetColors = DEFAULT_PRESET_COLORS,
+    placeholder = "Select color",
+    label = "Color",
+    disabled = false,
+    size = "md",
+    type = "button",
+    children,
+    ...triggerProps
+  } = extractProps(props, colorPickerPropDefs);
+  const [open, setOpen] = React.useState(false);
+  const [supportsEyedropper] = React.useState(() => typeof window !== "undefined" && "EyeDropper" in window);
+  const [value, setValue] = useControllableColorState({
+    value: valueProp,
+    defaultValue,
+    onValueChange
+  });
+  const [draftValue, setDraftValue] = React.useState(value ?? "");
+  const TriggerComp = asChild ? Slot : "button";
+  const normalizedPresetColors = React.useMemo(() => {
+    const uniqueColors = /* @__PURE__ */ new Set();
+    for (const presetColor of presetColors) {
+      const normalizedColor = normalizeHexColor(presetColor);
+      if (normalizedColor) {
+        uniqueColors.add(normalizedColor);
+      }
+    }
+    return [...uniqueColors];
+  }, [presetColors]);
+  React.useEffect(() => {
+    if (!open) {
+      setDraftValue(value ?? "");
+    }
+  }, [open, value]);
+  const inputInvalid = draftValue.length > 0 && normalizeHexColor(draftValue) === null;
+  const commitDraftValue = React.useCallback(() => {
+    const normalizedValue = normalizeHexColor(draftValue);
+    if (!normalizedValue) {
+      setDraftValue(value ?? "");
+      return false;
+    }
+    const didUpdate = setValue(normalizedValue);
+    if (didUpdate) {
+      setDraftValue(normalizedValue);
+    }
+    return didUpdate;
+  }, [draftValue, setValue, value]);
+  const handlePresetSelect = React.useCallback(
+    (nextColor) => {
+      setValue(nextColor);
+      setDraftValue(nextColor);
+      setOpen(false);
+    },
+    [setValue]
+  );
+  const handleInputChange = React.useCallback((event) => {
+    setDraftValue(sanitizeHexInput(event.target.value));
+  }, []);
+  const handleInputBlur = React.useCallback(() => {
+    commitDraftValue();
+  }, [commitDraftValue]);
+  const handleEyedropper = React.useCallback(async () => {
+    if (!supportsEyedropper) return;
+    try {
+      const dropper = new window.EyeDropper();
+      const result = await dropper.open();
+      const normalized = normalizeHexColor(result.sRGBHex);
+      if (normalized) {
+        setDraftValue(normalized);
+        setValue(normalized);
+      }
+    } catch {
+    }
+  }, [supportsEyedropper, setValue]);
+  const handleInputKeyDown = React.useCallback(
+    (event) => {
+      if (event.key !== "Enter") {
+        return;
+      }
+      event.preventDefault();
+      if (commitDraftValue()) {
+        setOpen(false);
+      }
+    },
+    [commitDraftValue]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      TriggerComp,
+      {
+        ...triggerProps,
+        ref: forwardedRef,
+        type: asChild ? void 0 : type,
+        disabled,
+        className: classNames("dsx-color-picker__trigger", className),
+        "data-has-value": value ? "true" : "false",
+        "data-size": size,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "dsx-color-picker__trigger-swatch",
+              "aria-hidden": "true",
+              "data-empty": value ? void 0 : "true",
+              style: getSwatchStyle(value)
+            }
+          ),
+          asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "dsx-color-picker__trigger-copy", children: [
+              /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__trigger-label", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__trigger-value", children: value ?? placeholder })
+            ] }),
+            /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "sm", className: "dsx-color-picker__trigger-icon" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Popover.Content, { className: "dsx-color-picker__content", align: "start", showArrow: false, children: [
+      /* @__PURE__ */ jsx("div", { className: "dsx-color-picker__picker", children: /* @__PURE__ */ jsx(
+        HexAlphaColorPicker,
+        {
+          color: draftValue || "#000000FF",
+          onChange: (hex) => {
+            const normalized = normalizeHexColor(hex);
+            if (normalized) {
+              setDraftValue(normalized);
+              setValue(normalized);
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "dsx-color-picker__field-row", children: [
+        /* @__PURE__ */ jsxs("label", { className: "dsx-color-picker__field", children: [
+          /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__field-label", children: "Hex" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "aria-label": "Hex color",
+              autoComplete: "off",
+              density: "md",
+              invalid: inputInvalid,
+              inputMode: "text",
+              maxLength: 9,
+              placeholder: "#E0A82EFF",
+              spellCheck: false,
+              value: draftValue,
+              onBlur: handleInputBlur,
+              onChange: handleInputChange,
+              onKeyDown: handleInputKeyDown
+            }
+          )
+        ] }),
+        supportsEyedropper && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "dsx-color-picker__eyedropper",
+            "aria-label": "Pick color from screen",
+            onClick: handleEyedropper,
+            children: /* @__PURE__ */ jsx(Pipette, { size: 14 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "dsx-color-picker__swatches", "aria-label": "Preset colors", role: "list", children: normalizedPresetColors.map((presetColor) => {
+        const isSelected = value === presetColor;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "dsx-color-picker__swatch",
+            onClick: () => handlePresetSelect(presetColor),
+            title: presetColor,
+            "aria-label": `Select ${presetColor}`,
+            "aria-pressed": isSelected,
+            "data-selected": isSelected ? "true" : void 0,
+            style: getSwatchStyle(presetColor),
+            children: isSelected ? /* @__PURE__ */ jsx("span", { className: "dsx-color-picker__swatch-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: "sm" }) }) : null
+          },
+          presetColor
+        );
+      }) })
+    ] })
+  ] });
+});
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/colorPicker/ColorPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/colorPicker/ColorPicker.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\nimport { HexAlphaColorPicker } from 'react-colorful'\nimport { Pipette } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { colorPickerPropDefs } from './colorPicker.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst DEFAULT_PRESET_COLORS = [\n  '#E0A82E',\n  '#E8BF6A',\n  '#8E9BB0',\n  '#CD7F32',\n  '#4CAF82',\n  '#EF4444',\n  '#8B641F',\n  '#D8D2C5',\n  '#332A1C',\n  '#3F3423',\n  '#0B0804',\n  '#F0EDE8',\n] as const\n\nconst HEX_COLOR_PATTERN = /^#?(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/\n\nfunction normalizeHexColor(value: string) {\n  const trimmedValue = value.trim()\n\n  if (!HEX_COLOR_PATTERN.test(trimmedValue)) {\n    return null\n  }\n\n  const hexBody = trimmedValue.replace(/^#/, '')\n  const expandedHex =\n    hexBody.length === 3\n      ? hexBody\n          .split('')\n          .map((character) => `${character}${character}`)\n          .join('')\n      : hexBody\n\n  return `#${expandedHex.toUpperCase()}`\n}\n\nfunction sanitizeHexInput(value: string) {\n  const uppercaseValue = value.toUpperCase().replace(/[^#0-9A-F]/g, '')\n  const hasHash = uppercaseValue.startsWith('#')\n  const hexBody = uppercaseValue.replace(/#/g, '')\n\n  return hasHash ? `#${hexBody.slice(0, 8)}` : hexBody.slice(0, 8)\n}\n\nfunction toNormalizedColor(value?: string) {\n  if (!value) {\n    return undefined\n  }\n\n  return normalizeHexColor(value) ?? undefined\n}\n\nfunction getSwatchStyle(color?: string) {\n  return {\n    ['--dsx-color-picker-swatch' as const]: color ?? 'transparent',\n  } as React.CSSProperties\n}\n\ntype ColorPickerOwnProps = GetPropDefTypes<typeof colorPickerPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  presetColors?: readonly string[]\n  placeholder?: string\n  label?: string\n}\n\ntype ColorPickerProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'defaultValue' | 'onChange' | 'value'\n> &\n  ColorPickerOwnProps\n\nfunction useControllableColorState({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n}: Pick<ColorPickerProps, 'value' | 'defaultValue' | 'onValueChange'>) {\n  const isControlled = valueProp !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() => toNormalizedColor(defaultValue))\n  const value = isControlled ? toNormalizedColor(valueProp) : uncontrolledValue\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      const normalizedValue = normalizeHexColor(nextValue)\n\n      if (!normalizedValue) {\n        return false\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(normalizedValue)\n      }\n\n      onValueChange?.(normalizedValue)\n      return true\n    },\n    [isControlled, onValueChange],\n  )\n\n  return [value, setValue] as const\n}\n\nconst ColorPicker = React.forwardRef<HTMLButtonElement, ColorPickerProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    presetColors = DEFAULT_PRESET_COLORS,\n    placeholder = 'Select color',\n    label = 'Color',\n    disabled = false,\n    size = 'md',\n    type = 'button',\n    children,\n    ...triggerProps\n  } = extractProps(props, colorPickerPropDefs)\n  const [open, setOpen] = React.useState(false)\n  const [supportsEyedropper] = React.useState(() => typeof window !== 'undefined' && 'EyeDropper' in window)\n  const [value, setValue] = useControllableColorState({\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n  })\n  const [draftValue, setDraftValue] = React.useState(value ?? '')\n  const TriggerComp = asChild ? Slot : 'button'\n\n  const normalizedPresetColors = React.useMemo(() => {\n    const uniqueColors = new Set<string>()\n\n    for (const presetColor of presetColors) {\n      const normalizedColor = normalizeHexColor(presetColor)\n\n      if (normalizedColor) {\n        uniqueColors.add(normalizedColor)\n      }\n    }\n\n    return [...uniqueColors]\n  }, [presetColors])\n\n  React.useEffect(() => {\n    if (!open) {\n      setDraftValue(value ?? '')\n    }\n  }, [open, value])\n\n  const inputInvalid = draftValue.length > 0 && normalizeHexColor(draftValue) === null\n\n  const commitDraftValue = React.useCallback(() => {\n    const normalizedValue = normalizeHexColor(draftValue)\n\n    if (!normalizedValue) {\n      setDraftValue(value ?? '')\n      return false\n    }\n\n    const didUpdate = setValue(normalizedValue)\n\n    if (didUpdate) {\n      setDraftValue(normalizedValue)\n    }\n\n    return didUpdate\n  }, [draftValue, setValue, value])\n\n  const handlePresetSelect = React.useCallback(\n    (nextColor: string) => {\n      setValue(nextColor)\n      setDraftValue(nextColor)\n      setOpen(false)\n    },\n    [setValue],\n  )\n\n  const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    setDraftValue(sanitizeHexInput(event.target.value))\n  }, [])\n\n  const handleInputBlur = React.useCallback(() => {\n    commitDraftValue()\n  }, [commitDraftValue])\n\n  const handleEyedropper = React.useCallback(async () => {\n    if (!supportsEyedropper) return\n    try {\n      // @ts-expect-error \u2014 EyeDropper not yet in TS lib\n      const dropper = new window.EyeDropper()\n      const result = await dropper.open()\n      const normalized = normalizeHexColor(result.sRGBHex)\n      if (normalized) {\n        setDraftValue(normalized)\n        setValue(normalized)\n      }\n    } catch {\n      // user cancelled\n    }\n  }, [supportsEyedropper, setValue])\n\n  const handleInputKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key !== 'Enter') {\n        return\n      }\n\n      event.preventDefault()\n\n      if (commitDraftValue()) {\n        setOpen(false)\n      }\n    },\n    [commitDraftValue],\n  )\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <Popover.Trigger asChild>\n        <TriggerComp\n          {...triggerProps}\n          ref={forwardedRef}\n          type={asChild ? undefined : type}\n          disabled={disabled}\n          className={classNames('dsx-color-picker__trigger', className)}\n          data-has-value={value ? 'true' : 'false'}\n          data-size={size}\n        >\n          <span\n            className=\"dsx-color-picker__trigger-swatch\"\n            aria-hidden=\"true\"\n            data-empty={value ? undefined : 'true'}\n            style={getSwatchStyle(value)}\n          />\n          {asChild ? (\n            <Slottable>{children}</Slottable>\n          ) : (\n            <>\n              <span className=\"dsx-color-picker__trigger-copy\">\n                <span className=\"dsx-color-picker__trigger-label\">{label}</span>\n                <span className=\"dsx-color-picker__trigger-value\">{value ?? placeholder}</span>\n              </span>\n              <Icon name=\"chevron-down\" size=\"sm\" className=\"dsx-color-picker__trigger-icon\" />\n            </>\n          )}\n        </TriggerComp>\n      </Popover.Trigger>\n\n      <Popover.Content className=\"dsx-color-picker__content\" align=\"start\" showArrow={false}>\n        <div className=\"dsx-color-picker__picker\">\n          <HexAlphaColorPicker\n            color={draftValue || '#000000FF'}\n            onChange={(hex) => {\n              const normalized = normalizeHexColor(hex)\n              if (normalized) {\n                setDraftValue(normalized)\n                setValue(normalized)\n              }\n            }}\n          />\n        </div>\n\n        <div className=\"dsx-color-picker__field-row\">\n          <label className=\"dsx-color-picker__field\">\n            <span className=\"dsx-color-picker__field-label\">Hex</span>\n            <Input\n              aria-label=\"Hex color\"\n              autoComplete=\"off\"\n              density=\"md\"\n              invalid={inputInvalid}\n              inputMode=\"text\"\n              maxLength={9}\n              placeholder=\"#E0A82EFF\"\n              spellCheck={false}\n              value={draftValue}\n              onBlur={handleInputBlur}\n              onChange={handleInputChange}\n              onKeyDown={handleInputKeyDown}\n            />\n          </label>\n          {supportsEyedropper && (\n            <button\n              type=\"button\"\n              className=\"dsx-color-picker__eyedropper\"\n              aria-label=\"Pick color from screen\"\n              onClick={handleEyedropper}\n            >\n              <Pipette size={14} />\n            </button>\n          )}\n        </div>\n\n        <div className=\"dsx-color-picker__swatches\" aria-label=\"Preset colors\" role=\"list\">\n          {normalizedPresetColors.map((presetColor) => {\n            const isSelected = value === presetColor\n\n            return (\n              <button\n                key={presetColor}\n                type=\"button\"\n                className=\"dsx-color-picker__swatch\"\n                onClick={() => handlePresetSelect(presetColor)}\n                title={presetColor}\n                aria-label={`Select ${presetColor}`}\n                aria-pressed={isSelected}\n                data-selected={isSelected ? 'true' : undefined}\n                style={getSwatchStyle(presetColor)}\n              >\n                {isSelected ? (\n                  <span className=\"dsx-color-picker__swatch-indicator\" aria-hidden=\"true\">\n                    <Icon name=\"check\" size=\"sm\" />\n                  </span>\n                ) : null}\n              </button>\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n})\nColorPicker.displayName = 'ColorPicker'\n\nexport { ColorPicker }\nexport type { ColorPickerProps }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/colorPicker/colorPicker.props.cjs

@@ -0,0 +1,34 @@
+"use strict";
+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 colorPicker_props_exports = {};
+__export(colorPicker_props_exports, {
+  colorPickerPropDefs: () => colorPickerPropDefs
+});
+module.exports = __toCommonJS(colorPicker_props_exports);
+var import_asChild = require("../../_internal/props/asChild.prop");
+const colorPickerSizes = ["sm", "md", "lg"];
+const colorPickerPropDefs = {
+  ...import_asChild.asChildPropDef,
+  size: {
+    type: "enum",
+    values: colorPickerSizes,
+    default: "md"
+  }
+};
+//# sourceMappingURL=colorPicker.props.cjs.map

package/dist/components/colorPicker/colorPicker.props.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/colorPicker/colorPicker.props.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst colorPickerSizes = ['sm', 'md', 'lg'] as const\n\nconst colorPickerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: colorPickerSizes,\n    default: 'md',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof colorPickerSizes)[number]>\n}\n\nexport { colorPickerPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,mBAAmB,CAAC,MAAM,MAAM,IAAI;AAE1C,MAAM,sBAAsB;AAAA,EAC1B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/components/colorPicker/colorPicker.props.d.cts

@@ -0,0 +1,13 @@
+declare const colorPickerPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { colorPickerPropDefs };
+//# sourceMappingURL=colorPicker.props.d.cts.map

package/dist/components/colorPicker/colorPicker.props.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPicker.props.d.cts","sourceRoot":"","sources":["../../../src/components/colorPicker/colorPicker.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,mBAAmB;;;;;;;;;;CAUxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/colorPicker/colorPicker.props.d.mts

@@ -0,0 +1,13 @@
+declare const colorPickerPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { colorPickerPropDefs };
+//# sourceMappingURL=colorPicker.props.d.mts.map

package/dist/components/colorPicker/colorPicker.props.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPicker.props.d.mts","sourceRoot":"","sources":["../../../src/components/colorPicker/colorPicker.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,mBAAmB;;;;;;;;;;CAUxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/colorPicker/colorPicker.props.d.ts

@@ -0,0 +1,13 @@
+declare const colorPickerPropDefs: {
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { colorPickerPropDefs };
+//# sourceMappingURL=colorPicker.props.d.ts.map

package/dist/components/colorPicker/colorPicker.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPicker.props.d.ts","sourceRoot":"","sources":["../../../src/components/colorPicker/colorPicker.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,mBAAmB;;;;;;;;;;CAUxB,CAAA;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/colorPicker/colorPicker.props.js

@@ -0,0 +1,14 @@
+import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
+const colorPickerSizes = ["sm", "md", "lg"];
+const colorPickerPropDefs = {
+  ...asChildPropDef,
+  size: {
+    type: "enum",
+    values: colorPickerSizes,
+    default: "md"
+  }
+};
+export {
+  colorPickerPropDefs
+};
+//# sourceMappingURL=colorPicker.props.js.map

package/dist/components/colorPicker/colorPicker.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/colorPicker/colorPicker.props.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst colorPickerSizes = ['sm', 'md', 'lg'] as const\n\nconst colorPickerPropDefs = {\n  ...asChildPropDef,\n  size: {\n    type: 'enum',\n    values: colorPickerSizes,\n    default: 'md',\n  },\n} satisfies {\n  asChild: PropDef\n  size: PropDef<(typeof colorPickerSizes)[number]>\n}\n\nexport { colorPickerPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,mBAAmB,CAAC,MAAM,MAAM,IAAI;AAE1C,MAAM,sBAAsB;AAAA,EAC1B,GAAG;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/components/colorSwatch/ColorSwatch.cjs

@@ -0,0 +1,77 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ColorSwatch_exports = {};
+__export(ColorSwatch_exports, {
+  ColorSwatch: () => ColorSwatch
+});
+module.exports = __toCommonJS(ColorSwatch_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_lucide_react = require("lucide-react");
+var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_colorSwatch = require("./colorSwatch.props");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ColorSwatch = React.forwardRef(
+  ({ color, checked = false, onClick, children, ...props }, forwardedRef) => {
+    const size = props.size ?? "md";
+    const { asChild, className, ...swatchProps } = (0, import_extractProps.extractProps)(props, import_colorSwatch.colorSwatchPropDefs);
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const handleClick = React.useCallback(
+      (_e) => {
+        onClick?.(color);
+      },
+      [color, onClick]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Comp,
+      {
+        ...swatchProps,
+        ref: forwardedRef,
+        className: (0, import_classnames.default)("dsx-color-swatch", className),
+        "data-checked": checked || void 0,
+        "data-size": size,
+        style: {
+          backgroundColor: color,
+          ...swatchProps.style
+        },
+        onClick: handleClick,
+        "aria-label": `Color swatch: ${color}${checked ? ", selected" : ""}`,
+        "aria-pressed": checked,
+        ...!asChild ? { type: "button" } : {},
+        children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          checked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "dsx-color-swatch__check", size: 12, strokeWidth: 3 }),
+          children
+        ] })
+      }
+    );
+  }
+);
+ColorSwatch.displayName = "ColorSwatch";
+//# sourceMappingURL=ColorSwatch.cjs.map

package/dist/components/colorSwatch/ColorSwatch.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/colorSwatch/ColorSwatch.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { Check } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { colorSwatchPropDefs } from './colorSwatch.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ColorSwatchOwnProps = GetPropDefTypes<typeof colorSwatchPropDefs>\n\ntype ColorSwatchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & ColorSwatchOwnProps & {\n  color: string\n  checked?: boolean\n  onClick?: (color: string) => void\n}\n\nconst ColorSwatch = React.forwardRef<HTMLButtonElement, ColorSwatchProps>(\n  ({ color, checked = false, onClick, children, ...props }, forwardedRef) => {\n    const size = (props as { size?: string }).size ?? 'md'\n    const { asChild, className, ...swatchProps } = extractProps(props, colorSwatchPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    const handleClick = React.useCallback(\n      (_e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(color)\n      },\n      [color, onClick],\n    )\n\n    return (\n      <Comp\n        {...swatchProps}\n        ref={forwardedRef}\n        className={classNames('dsx-color-swatch', className)}\n        data-checked={checked || undefined}\n        data-size={size}\n        style={{\n          backgroundColor: color,\n          ...swatchProps.style,\n        }}\n        onClick={handleClick}\n        aria-label={`Color swatch: ${color}${checked ? ', selected' : ''}`}\n        aria-pressed={checked}\n        {...(!asChild ? { type: 'button' } : {})}\n      >\n        {asChild ? children : (\n          <>\n            {checked && <Check className=\"dsx-color-swatch__check\" size={12} strokeWidth={3} />}\n            {children}\n          </>\n        )}\n      </Comp>\n    )\n  },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\nexport type { ColorSwatchProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,0BAAsB;AAEtB,0BAA6B;AAC7B,yBAAoC;AA0C1B;AA9BV,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,OAAO,UAAU,OAAO,SAAS,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACzE,UAAM,OAAQ,MAA4B,QAAQ;AAClD,UAAM,EAAE,SAAS,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,sCAAmB;AACtF,UAAM,OAAO,UAAU,yBAAO;AAE9B,UAAM,cAAc,MAAM;AAAA,MACxB,CAAC,OAA4C;AAC3C,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,CAAC,OAAO,OAAO;AAAA,IACjB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,oBAAoB,SAAS;AAAA,QACnD,gBAAc,WAAW;AAAA,QACzB,aAAW;AAAA,QACX,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,GAAG,YAAY;AAAA,QACjB;AAAA,QACA,SAAS;AAAA,QACT,cAAY,iBAAiB,KAAK,GAAG,UAAU,eAAe,EAAE;AAAA,QAChE,gBAAc;AAAA,QACb,GAAI,CAAC,UAAU,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,QAErC,oBAAU,WACT,4EACG;AAAA,qBAAW,4CAAC,6BAAM,WAAU,2BAA0B,MAAM,IAAI,aAAa,GAAG;AAAA,UAChF;AAAA,WACH;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;",
+  "names": ["classNames"]
+}

package/dist/components/colorSwatch/ColorSwatch.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { colorSwatchPropDefs } from './colorSwatch.props.cjs';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.cjs';
+type ColorSwatchOwnProps = GetPropDefTypes<typeof colorSwatchPropDefs>;
+type ColorSwatchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & ColorSwatchOwnProps & {
+    color: string;
+    checked?: boolean;
+    onClick?: (color: string) => void;
+};
+declare const ColorSwatch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & GetPropDefTypes<{
+    size: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        className: string;
+        default: "md";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+}> & {
+    color: string;
+    checked?: boolean;
+    onClick?: (color: string) => void;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { ColorSwatch };
+export type { ColorSwatchProps };
+//# sourceMappingURL=ColorSwatch.d.cts.map

package/dist/components/colorSwatch/ColorSwatch.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.cts","sourceRoot":"","sources":["../../../src/components/colorSwatch/ColorSwatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAEzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AAEtE,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC,GAAG,mBAAmB,GAAG;IAC7G,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,WAAW;;;;;;;;;;;;WALR,MAAM;cACH,OAAO;cACP,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;2CAyClC,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,CAAA"}