@kopexa/color-picker 0.0.37 → 0.0.39

package/dist/chunk-CRQDZQE6.mjs

@@ -0,0 +1,30 @@
+"use client";
+
+// src/messages.ts
+import { defineMessages } from "@kopexa/i18n";
+var messages = defineMessages({
+  label: {
+    id: "color-picker.label",
+    defaultMessage: "Color",
+    description: "Generic label for a color field"
+  },
+  hexLabel: {
+    id: "color-picker.hex_label",
+    defaultMessage: "Hex",
+    description: "Label for the hex input inside the color picker popover"
+  },
+  pickColor: {
+    id: "color-picker.pick_color",
+    defaultMessage: "Pick a color",
+    description: "Prompt to pick a color"
+  },
+  clear: {
+    id: "color-picker.clear",
+    defaultMessage: "Clear",
+    description: "Button inside the color picker popover that resets the field to its unset state"
+  }
+});
+
+export {
+  messages
+};

package/dist/{chunk-GSZMYL3E.mjs → chunk-QFIB6TFB.mjs}

@@ -1,12 +1,12 @@
 "use client";
 import {
   messages
-} from "./chunk-JFALBXTO.mjs";
+} from "./chunk-CRQDZQE6.mjs";
 
 // src/color-picker-field.tsx
 import { useSafeIntl } from "@kopexa/i18n";
 import { cn } from "@kopexa/shared-utils";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Button as AriaButton,
   ColorArea,
@@ -38,35 +38,70 @@ var DEFAULT_PRESETS = [
   "#6366f1",
   "#a855f7"
 ];
+var UNSET_FALLBACK = "#ffffff";
+var safeParseColor = (hex) => {
+  try {
+    return parseColor(hex);
+  } catch {
+    return parseColor(UNSET_FALLBACK);
+  }
+};
 function ColorPickerField({
   value,
-  defaultValue = "#3b82f6",
+  defaultValue,
   onChange,
   presets = DEFAULT_PRESETS,
   hidePresets = false,
   hideHexInput = false,
   triggerClassName,
   triggerContent,
-  isDisabled = false
+  isDisabled = false,
+  allowClear = true
 }) {
   const intl = useSafeIntl();
   const t = {
-    hexLabel: intl.formatMessage(messages.hexLabel)
-  };
-  const safeParseColor = (hex) => {
-    try {
-      return parseColor(hex);
-    } catch {
-      return parseColor("#3b82f6");
-    }
+    hexLabel: intl.formatMessage(messages.hexLabel),
+    clear: intl.formatMessage(messages.clear)
   };
+  const initialHex = value != null ? value : defaultValue;
   const [color, setColor] = useState(
-    () => safeParseColor(value != null ? value : defaultValue)
+    () => safeParseColor(initialHex != null ? initialHex : UNSET_FALLBACK)
   );
+  const [hasColor, setHasColor] = useState(!!initialHex);
+  const [hexDraft, setHexDraft] = useState("");
+  useEffect(() => {
+    if (value === void 0) return;
+    if (value) {
+      setColor(safeParseColor(value));
+      setHasColor(true);
+    } else {
+      setColor(parseColor(UNSET_FALLBACK));
+      setHasColor(false);
+    }
+  }, [value]);
   const handleChange = (newColor) => {
     setColor(newColor);
+    setHasColor(true);
     onChange == null ? void 0 : onChange(newColor.toString("hex"));
   };
+  const handleClear = () => {
+    setColor(parseColor(UNSET_FALLBACK));
+    setHasColor(false);
+    setHexDraft("");
+    onChange == null ? void 0 : onChange("");
+  };
+  const commitHexDraft = () => {
+    const trimmed = hexDraft.trim();
+    if (!trimmed) return;
+    try {
+      const parsed = parseColor(
+        trimmed.startsWith("#") ? trimmed : `#${trimmed}`
+      );
+      handleChange(parsed);
+      setHexDraft("");
+    } catch {
+    }
+  };
   const hexValue = color.toString("hex");
   const triggerClasses = cn(
     "flex h-10 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm",
@@ -76,9 +111,12 @@ function ColorPickerField({
     triggerClassName
   );
   return /* @__PURE__ */ jsx(ColorPicker, { value: color, onChange: handleChange, children: /* @__PURE__ */ jsxs(DialogTrigger, { children: [
-    /* @__PURE__ */ jsx(AriaButton, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AriaButton, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : hasColor ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(ColorSwatch, { className: "size-5 rounded border" }),
       /* @__PURE__ */ jsx("span", { className: "font-mono", children: hexValue })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "size-5 rounded border border-dashed border-muted-foreground/40 bg-transparent" }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: "\u2014" })
     ] }) }),
     /* @__PURE__ */ jsx(
       Popover,
@@ -99,11 +137,38 @@ function ColorPickerField({
             ),
             /* @__PURE__ */ jsx(ColorSlider, { colorSpace: "hsb", channel: "hue", children: /* @__PURE__ */ jsx(SliderTrack, { className: "h-7 w-[192px] rounded-t-none rounded-b-md border border-t-0", children: /* @__PURE__ */ jsx(ColorThumb, { className: "top-1/2 size-5 rounded-full border-2 border-white shadow-md" }) }) })
           ] }),
-          !hideHexInput && /* @__PURE__ */ jsxs(ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
+          !hideHexInput && (hasColor ? /* @__PURE__ */ jsxs(ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ jsx(Label, { className: "text-sm", children: t.hexLabel }),
             /* @__PURE__ */ jsx(Input, { className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
-          ] }),
-          !hidePresets && presets.length > 0 && /* @__PURE__ */ jsx(ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ jsx(ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ jsx(ColorSwatch, { className: "size-8 rounded border" }) }, preset)) })
+          ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx(Label, { className: "text-sm text-muted-foreground/60", children: t.hexLabel }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: hexDraft,
+                onChange: (e) => setHexDraft(e.target.value),
+                onBlur: commitHexDraft,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitHexDraft();
+                  }
+                },
+                placeholder: "#FFFFFF",
+                className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              }
+            )
+          ] })),
+          !hidePresets && presets.length > 0 && /* @__PURE__ */ jsx(ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ jsx(ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ jsx(ColorSwatch, { className: "size-8 rounded border" }) }, preset)) }),
+          allowClear && hasColor && /* @__PURE__ */ jsx(
+            AriaButton,
+            {
+              onPress: handleClear,
+              className: "w-[192px] rounded-md px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: t.clear
+            }
+          )
         ] })
       }
     )

package/dist/color-picker-field.d.mts

@@ -3,11 +3,13 @@ import { ReactNode } from 'react';
 
 interface ColorPickerFieldProps {
     /**
-     * The current color value (hex string like "#ff0000")
+     * The current color value (hex string like "#ff0000").
+     * If falsy, the trigger shows an "unset" state instead of a color.
      */
     value?: string;
     /**
-     * The default color value for uncontrolled usage
+     * The default color value for uncontrolled usage.
+     * If not provided, the field starts in an "unset" state.
      */
     defaultValue?: string;
     /**
@@ -44,11 +46,18 @@ interface ColorPickerFieldProps {
      * Whether the field is disabled
      */
     isDisabled?: boolean;
+    /**
+     * Whether to show a "Clear" button in the popover that resets the field
+     * to its unset state. The button is only rendered when a color is actually
+     * set. Click emits `onChange("")`.
+     * @default true
+     */
+    allowClear?: boolean;
 }
 /**
  * A high-level color picker field.
  * Uses react-aria-components directly to ensure proper context handling.
  */
-declare function ColorPickerField({ value, defaultValue, onChange, presets, hidePresets, hideHexInput, triggerClassName, triggerContent, isDisabled, }: ColorPickerFieldProps): react_jsx_runtime.JSX.Element;
+declare function ColorPickerField({ value, defaultValue, onChange, presets, hidePresets, hideHexInput, triggerClassName, triggerContent, isDisabled, allowClear, }: ColorPickerFieldProps): react_jsx_runtime.JSX.Element;
 
 export { ColorPickerField, type ColorPickerFieldProps };

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

@@ -3,11 +3,13 @@ import { ReactNode } from 'react';
 
 interface ColorPickerFieldProps {
     /**
-     * The current color value (hex string like "#ff0000")
+     * The current color value (hex string like "#ff0000").
+     * If falsy, the trigger shows an "unset" state instead of a color.
      */
     value?: string;
     /**
-     * The default color value for uncontrolled usage
+     * The default color value for uncontrolled usage.
+     * If not provided, the field starts in an "unset" state.
      */
     defaultValue?: string;
     /**
@@ -44,11 +46,18 @@ interface ColorPickerFieldProps {
      * Whether the field is disabled
      */
     isDisabled?: boolean;
+    /**
+     * Whether to show a "Clear" button in the popover that resets the field
+     * to its unset state. The button is only rendered when a color is actually
+     * set. Click emits `onChange("")`.
+     * @default true
+     */
+    allowClear?: boolean;
 }
 /**
  * A high-level color picker field.
  * Uses react-aria-components directly to ensure proper context handling.
  */
-declare function ColorPickerField({ value, defaultValue, onChange, presets, hidePresets, hideHexInput, triggerClassName, triggerContent, isDisabled, }: ColorPickerFieldProps): react_jsx_runtime.JSX.Element;
+declare function ColorPickerField({ value, defaultValue, onChange, presets, hidePresets, hideHexInput, triggerClassName, triggerContent, isDisabled, allowClear, }: ColorPickerFieldProps): react_jsx_runtime.JSX.Element;
 
 export { ColorPickerField, type ColorPickerFieldProps };

package/dist/color-picker-field.js

@@ -35,15 +35,23 @@ var import_i18n = require("@kopexa/i18n");
 var messages = (0, import_i18n.defineMessages)({
   label: {
     id: "color-picker.label",
-    defaultMessage: "Color"
+    defaultMessage: "Color",
+    description: "Generic label for a color field"
   },
   hexLabel: {
     id: "color-picker.hex_label",
-    defaultMessage: "Hex"
+    defaultMessage: "Hex",
+    description: "Label for the hex input inside the color picker popover"
   },
   pickColor: {
     id: "color-picker.pick_color",
-    defaultMessage: "Pick a color"
+    defaultMessage: "Pick a color",
+    description: "Prompt to pick a color"
+  },
+  clear: {
+    id: "color-picker.clear",
+    defaultMessage: "Clear",
+    description: "Button inside the color picker popover that resets the field to its unset state"
   }
 });
 
@@ -61,35 +69,70 @@ var DEFAULT_PRESETS = [
   "#6366f1",
   "#a855f7"
 ];
+var UNSET_FALLBACK = "#ffffff";
+var safeParseColor = (hex) => {
+  try {
+    return (0, import_react_aria_components.parseColor)(hex);
+  } catch {
+    return (0, import_react_aria_components.parseColor)(UNSET_FALLBACK);
+  }
+};
 function ColorPickerField({
   value,
-  defaultValue = "#3b82f6",
+  defaultValue,
   onChange,
   presets = DEFAULT_PRESETS,
   hidePresets = false,
   hideHexInput = false,
   triggerClassName,
   triggerContent,
-  isDisabled = false
+  isDisabled = false,
+  allowClear = true
 }) {
   const intl = (0, import_i18n2.useSafeIntl)();
   const t = {
-    hexLabel: intl.formatMessage(messages.hexLabel)
-  };
-  const safeParseColor = (hex) => {
-    try {
-      return (0, import_react_aria_components.parseColor)(hex);
-    } catch {
-      return (0, import_react_aria_components.parseColor)("#3b82f6");
-    }
+    hexLabel: intl.formatMessage(messages.hexLabel),
+    clear: intl.formatMessage(messages.clear)
   };
+  const initialHex = value != null ? value : defaultValue;
   const [color, setColor] = (0, import_react.useState)(
-    () => safeParseColor(value != null ? value : defaultValue)
+    () => safeParseColor(initialHex != null ? initialHex : UNSET_FALLBACK)
   );
+  const [hasColor, setHasColor] = (0, import_react.useState)(!!initialHex);
+  const [hexDraft, setHexDraft] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (value === void 0) return;
+    if (value) {
+      setColor(safeParseColor(value));
+      setHasColor(true);
+    } else {
+      setColor((0, import_react_aria_components.parseColor)(UNSET_FALLBACK));
+      setHasColor(false);
+    }
+  }, [value]);
   const handleChange = (newColor) => {
     setColor(newColor);
+    setHasColor(true);
     onChange == null ? void 0 : onChange(newColor.toString("hex"));
   };
+  const handleClear = () => {
+    setColor((0, import_react_aria_components.parseColor)(UNSET_FALLBACK));
+    setHasColor(false);
+    setHexDraft("");
+    onChange == null ? void 0 : onChange("");
+  };
+  const commitHexDraft = () => {
+    const trimmed = hexDraft.trim();
+    if (!trimmed) return;
+    try {
+      const parsed = (0, import_react_aria_components.parseColor)(
+        trimmed.startsWith("#") ? trimmed : `#${trimmed}`
+      );
+      handleChange(parsed);
+      setHexDraft("");
+    } catch {
+    }
+  };
   const hexValue = color.toString("hex");
   const triggerClasses = (0, import_shared_utils.cn)(
     "flex h-10 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm",
@@ -99,9 +142,12 @@ function ColorPickerField({
     triggerClassName
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorPicker, { value: color, onChange: handleChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.DialogTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Button, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Button, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : hasColor ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatch, { className: "size-5 rounded border" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: hexValue })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "size-5 rounded border border-dashed border-muted-foreground/40 bg-transparent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono text-muted-foreground", children: "\u2014" })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_aria_components.Popover,
@@ -122,11 +168,38 @@ function ColorPickerField({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSlider, { colorSpace: "hsb", channel: "hue", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.SliderTrack, { className: "h-7 w-[192px] rounded-t-none rounded-b-md border border-t-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorThumb, { className: "top-1/2 size-5 rounded-full border-2 border-white shadow-md" }) }) })
           ] }),
-          !hideHexInput && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
+          !hideHexInput && (hasColor ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Label, { className: "text-sm", children: t.hexLabel }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Input, { className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
-          ] }),
-          !hidePresets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatch, { className: "size-8 rounded border" }) }, preset)) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.Label, { className: "text-sm text-muted-foreground/60", children: t.hexLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "input",
+              {
+                type: "text",
+                value: hexDraft,
+                onChange: (e) => setHexDraft(e.target.value),
+                onBlur: commitHexDraft,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitHexDraft();
+                  }
+                },
+                placeholder: "#FFFFFF",
+                className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              }
+            )
+          ] })),
+          !hidePresets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.ColorSwatch, { className: "size-8 rounded border" }) }, preset)) }),
+          allowClear && hasColor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_aria_components.Button,
+            {
+              onPress: handleClear,
+              className: "w-[192px] rounded-md px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: t.clear
+            }
+          )
         ] })
       }
     )

package/dist/color-picker-field.mjs

@@ -2,8 +2,8 @@
 "use client";
 import {
   ColorPickerField
-} from "./chunk-GSZMYL3E.mjs";
-import "./chunk-JFALBXTO.mjs";
+} from "./chunk-QFIB6TFB.mjs";
+import "./chunk-CRQDZQE6.mjs";
 export {
   ColorPickerField
 };

package/dist/index.js

@@ -169,15 +169,23 @@ var import_i18n = require("@kopexa/i18n");
 var messages = (0, import_i18n.defineMessages)({
   label: {
     id: "color-picker.label",
-    defaultMessage: "Color"
+    defaultMessage: "Color",
+    description: "Generic label for a color field"
   },
   hexLabel: {
     id: "color-picker.hex_label",
-    defaultMessage: "Hex"
+    defaultMessage: "Hex",
+    description: "Label for the hex input inside the color picker popover"
   },
   pickColor: {
     id: "color-picker.pick_color",
-    defaultMessage: "Pick a color"
+    defaultMessage: "Pick a color",
+    description: "Prompt to pick a color"
+  },
+  clear: {
+    id: "color-picker.clear",
+    defaultMessage: "Clear",
+    description: "Button inside the color picker popover that resets the field to its unset state"
   }
 });
 
@@ -195,35 +203,70 @@ var DEFAULT_PRESETS = [
   "#6366f1",
   "#a855f7"
 ];
+var UNSET_FALLBACK = "#ffffff";
+var safeParseColor = (hex) => {
+  try {
+    return (0, import_react_aria_components2.parseColor)(hex);
+  } catch {
+    return (0, import_react_aria_components2.parseColor)(UNSET_FALLBACK);
+  }
+};
 function ColorPickerField({
   value,
-  defaultValue = "#3b82f6",
+  defaultValue,
   onChange,
   presets = DEFAULT_PRESETS,
   hidePresets = false,
   hideHexInput = false,
   triggerClassName,
   triggerContent,
-  isDisabled = false
+  isDisabled = false,
+  allowClear = true
 }) {
   const intl = (0, import_i18n2.useSafeIntl)();
   const t = {
-    hexLabel: intl.formatMessage(messages.hexLabel)
-  };
-  const safeParseColor = (hex) => {
-    try {
-      return (0, import_react_aria_components2.parseColor)(hex);
-    } catch {
-      return (0, import_react_aria_components2.parseColor)("#3b82f6");
-    }
+    hexLabel: intl.formatMessage(messages.hexLabel),
+    clear: intl.formatMessage(messages.clear)
   };
+  const initialHex = value != null ? value : defaultValue;
   const [color, setColor] = (0, import_react.useState)(
-    () => safeParseColor(value != null ? value : defaultValue)
+    () => safeParseColor(initialHex != null ? initialHex : UNSET_FALLBACK)
   );
+  const [hasColor, setHasColor] = (0, import_react.useState)(!!initialHex);
+  const [hexDraft, setHexDraft] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (value === void 0) return;
+    if (value) {
+      setColor(safeParseColor(value));
+      setHasColor(true);
+    } else {
+      setColor((0, import_react_aria_components2.parseColor)(UNSET_FALLBACK));
+      setHasColor(false);
+    }
+  }, [value]);
   const handleChange = (newColor) => {
     setColor(newColor);
+    setHasColor(true);
     onChange == null ? void 0 : onChange(newColor.toString("hex"));
   };
+  const handleClear = () => {
+    setColor((0, import_react_aria_components2.parseColor)(UNSET_FALLBACK));
+    setHasColor(false);
+    setHexDraft("");
+    onChange == null ? void 0 : onChange("");
+  };
+  const commitHexDraft = () => {
+    const trimmed = hexDraft.trim();
+    if (!trimmed) return;
+    try {
+      const parsed = (0, import_react_aria_components2.parseColor)(
+        trimmed.startsWith("#") ? trimmed : `#${trimmed}`
+      );
+      handleChange(parsed);
+      setHexDraft("");
+    } catch {
+    }
+  };
   const hexValue = color.toString("hex");
   const triggerClasses = (0, import_shared_utils2.cn)(
     "flex h-10 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm",
@@ -233,9 +276,12 @@ function ColorPickerField({
     triggerClassName
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorPicker, { value: color, onChange: handleChange, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components2.DialogTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Button, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Button, { className: triggerClasses, isDisabled, children: triggerContent != null ? triggerContent : hasColor ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatch, { className: "size-5 rounded border" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono", children: hexValue })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "size-5 rounded border border-dashed border-muted-foreground/40 bg-transparent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-mono text-muted-foreground", children: "\u2014" })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_aria_components2.Popover,
@@ -256,11 +302,38 @@ function ColorPickerField({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSlider, { colorSpace: "hsb", channel: "hue", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.SliderTrack, { className: "h-7 w-[192px] rounded-t-none rounded-b-md border border-t-0", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorThumb, { className: "top-1/2 size-5 rounded-full border-2 border-white shadow-md" }) }) })
           ] }),
-          !hideHexInput && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components2.ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
+          !hideHexInput && (hasColor ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components2.ColorField, { colorSpace: "hsb", className: "flex flex-col gap-1", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Label, { className: "text-sm", children: t.hexLabel }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Input, { className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" })
-          ] }),
-          !hidePresets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatch, { className: "size-8 rounded border" }) }, preset)) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.Label, { className: "text-sm text-muted-foreground/60", children: t.hexLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                type: "text",
+                value: hexDraft,
+                onChange: (e) => setHexDraft(e.target.value),
+                onBlur: commitHexDraft,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitHexDraft();
+                  }
+                },
+                placeholder: "#FFFFFF",
+                className: "h-9 w-[192px] rounded-md border border-input bg-background px-3 font-mono text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              }
+            )
+          ] })),
+          !hidePresets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatchPicker, { className: "grid w-[192px] grid-cols-5 gap-1", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatchPickerItem, { color: preset, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components2.ColorSwatch, { className: "size-8 rounded border" }) }, preset)) }),
+          allowClear && hasColor && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_react_aria_components2.Button,
+            {
+              onPress: handleClear,
+              className: "w-[192px] rounded-md px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: t.clear
+            }
+          )
         ] })
       }
     )

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   ColorPickerField
-} from "./chunk-GSZMYL3E.mjs";
+} from "./chunk-QFIB6TFB.mjs";
 import {
   ColorArea,
   ColorField,
@@ -16,7 +16,7 @@ import {
   SliderOutput,
   SliderTrack
 } from "./chunk-EA7FR3KG.mjs";
-import "./chunk-JFALBXTO.mjs";
+import "./chunk-CRQDZQE6.mjs";
 export {
   ColorArea,
   ColorField,

package/dist/messages.d.mts

@@ -2,14 +2,22 @@ declare const messages: {
     label: {
         id: string;
         defaultMessage: string;
+        description: string;
     };
     hexLabel: {
         id: string;
         defaultMessage: string;
+        description: string;
     };
     pickColor: {
         id: string;
         defaultMessage: string;
+        description: string;
+    };
+    clear: {
+        id: string;
+        defaultMessage: string;
+        description: string;
     };
 };
 

package/dist/messages.d.ts

@@ -2,14 +2,22 @@ declare const messages: {
     label: {
         id: string;
         defaultMessage: string;
+        description: string;
     };
     hexLabel: {
         id: string;
         defaultMessage: string;
+        description: string;
     };
     pickColor: {
         id: string;
         defaultMessage: string;
+        description: string;
+    };
+    clear: {
+        id: string;
+        defaultMessage: string;
+        description: string;
     };
 };
 

package/dist/messages.js

@@ -28,15 +28,23 @@ var import_i18n = require("@kopexa/i18n");
 var messages = (0, import_i18n.defineMessages)({
   label: {
     id: "color-picker.label",
-    defaultMessage: "Color"
+    defaultMessage: "Color",
+    description: "Generic label for a color field"
   },
   hexLabel: {
     id: "color-picker.hex_label",
-    defaultMessage: "Hex"
+    defaultMessage: "Hex",
+    description: "Label for the hex input inside the color picker popover"
   },
   pickColor: {
     id: "color-picker.pick_color",
-    defaultMessage: "Pick a color"
+    defaultMessage: "Pick a color",
+    description: "Prompt to pick a color"
+  },
+  clear: {
+    id: "color-picker.clear",
+    defaultMessage: "Clear",
+    description: "Button inside the color picker popover that resets the field to its unset state"
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/messages.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   messages
-} from "./chunk-JFALBXTO.mjs";
+} from "./chunk-CRQDZQE6.mjs";
 export {
   messages
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/color-picker",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "Color picker components for selecting and managing colors.",
   "keywords": [
     "color-picker",
@@ -29,12 +29,12 @@
   "peerDependencies": {
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "17.28.0"
+    "@kopexa/theme": "17.29.1"
   },
   "dependencies": {
     "react-aria-components": "^1.7.1",
-    "@kopexa/i18n": "17.13.8",
-    "@kopexa/shared-utils": "17.0.78"
+    "@kopexa/i18n": "17.14.0",
+    "@kopexa/shared-utils": "17.0.80"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",

package/dist/chunk-JFALBXTO.mjs

@@ -1,22 +0,0 @@
-"use client";
-
-// src/messages.ts
-import { defineMessages } from "@kopexa/i18n";
-var messages = defineMessages({
-  label: {
-    id: "color-picker.label",
-    defaultMessage: "Color"
-  },
-  hexLabel: {
-    id: "color-picker.hex_label",
-    defaultMessage: "Hex"
-  },
-  pickColor: {
-    id: "color-picker.pick_color",
-    defaultMessage: "Pick a color"
-  }
-});
-
-export {
-  messages
-};