@bigbinary/neeto-atoms 1.0.36 → 1.0.37

package/dist/{Callout-CTr3dhBe.js → Callout-ClNFeMbn.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Alert, AlertTitle, AlertDescription } from './primitives/Alert.js';
-import { c as cn } from './utils-DdHUxIdC.js';
-import { r as renderIcon } from './renderIcon-tlvMyboj.js';
+import { c as cn } from './utils-BJnb9o5c.js';
+import { r as renderIcon } from './renderIcon-C6twJSqH.js';
 import { c as createLucideIcon } from './createLucideIcon-C8ycilSN.js';
 import { T as TriangleAlert, I as Info } from './triangle-alert-PXnNWQy_.js';
 
@@ -36,30 +36,44 @@ const __iconNode = [
 const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode);
 
 const VARIANT_CONFIG = {
-    info: {
-        container: "border border-info-border bg-info text-info-foreground",
-        icon: Info,
-    },
-    warning: {
-        container: "border border-warning-border bg-warning text-warning-foreground",
-        icon: TriangleAlert,
-    },
-    danger: {
-        container: "border border-error-border bg-error text-error-foreground",
-        icon: CircleAlert,
-    },
-    success: {
-        container: "border border-success-border bg-success text-success-foreground",
-        icon: CircleCheckBig,
-    },
+  info: {
+    container: "border border-info-border bg-info text-info-foreground",
+    icon: Info
+  },
+  warning: {
+    container: "border border-warning-border bg-warning text-warning-foreground",
+    icon: TriangleAlert
+  },
+  danger: {
+    container: "border border-error-border bg-error text-error-foreground",
+    icon: CircleAlert
+  },
+  success: {
+    container: "border border-success-border bg-success text-success-foreground",
+    icon: CircleCheckBig
+  }
 };
 
-const Callout = forwardRef(({ variant = "info", icon, title, children, className, ...otherProps }, ref) => {
+const Callout = forwardRef(
+  ({ variant = "info", icon, title, children, className, ...otherProps }, ref) => {
     const config = VARIANT_CONFIG[variant];
     const resolvedIcon = icon ?? config.icon;
-    return (jsxs(Alert, { ref: ref, className: cn(config.container, className), ...otherProps, children: [renderIcon(resolvedIcon, "size-4 shrink-0"), title && jsx(AlertTitle, { className: "font-semibold", children: title }), children && (jsx(AlertDescription, { className: "text-current", children: children }))] }));
-});
+    return /* @__PURE__ */ jsxs(
+      Alert,
+      {
+        ref,
+        className: cn(config.container, className),
+        ...otherProps,
+        children: [
+          renderIcon(resolvedIcon, "size-4 shrink-0"),
+          title && /* @__PURE__ */ jsx(AlertTitle, { className: "font-semibold", children: title }),
+          children && /* @__PURE__ */ jsx(AlertDescription, { className: "text-current", children })
+        ]
+      }
+    );
+  }
+);
 Callout.displayName = "Callout";
 
 export { Callout as C };
-//# sourceMappingURL=Callout-CTr3dhBe.js.map
+//# sourceMappingURL=Callout-ClNFeMbn.js.map

package/dist/{Callout-CTr3dhBe.js.map → Callout-ClNFeMbn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Callout-CTr3dhBe.js","sources":["../node_modules/lucide-react/dist/esm/icons/circle-alert.js","../node_modules/lucide-react/dist/esm/icons/circle-check-big.js","../src/components/Callout/constants.ts","../src/components/Callout/Callout.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.577.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n  [\"line\", { x1: \"12\", x2: \"12\", y1: \"8\", y2: \"12\", key: \"1pkeuh\" }],\n  [\"line\", { x1: \"12\", x2: \"12.01\", y1: \"16\", y2: \"16\", key: \"4dfq90\" }]\n];\nconst CircleAlert = createLucideIcon(\"circle-alert\", __iconNode);\n\nexport { __iconNode, CircleAlert as default };\n//# sourceMappingURL=circle-alert.js.map\n","/**\n * @license lucide-react v0.577.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M21.801 10A10 10 0 1 1 17 3.335\", key: \"yps3ct\" }],\n  [\"path\", { d: \"m9 11 3 3L22 4\", key: \"1pflzl\" }]\n];\nconst CircleCheckBig = createLucideIcon(\"circle-check-big\", __iconNode);\n\nexport { __iconNode, CircleCheckBig as default };\n//# sourceMappingURL=circle-check-big.js.map\n","import React from \"react\";\n\nimport {\n  InfoIcon,\n  AlertTriangleIcon,\n  AlertCircleIcon,\n  CheckCircleIcon,\n} from \"lucide-react\";\n\nimport type { CalloutVariant } from \"./Callout\";\n\nexport const VARIANT_CONFIG: Record<\n  CalloutVariant,\n  {\n    container: string;\n    icon: React.ComponentType<{ className?: string }>;\n  }\n> = {\n  info: {\n    container: \"border border-info-border bg-info text-info-foreground\",\n    icon: InfoIcon,\n  },\n  warning: {\n    container:\n      \"border border-warning-border bg-warning text-warning-foreground\",\n    icon: AlertTriangleIcon,\n  },\n  danger: {\n    container: \"border border-error-border bg-error text-error-foreground\",\n    icon: AlertCircleIcon,\n  },\n  success: {\n    container:\n      \"border border-success-border bg-success text-success-foreground\",\n    icon: CheckCircleIcon,\n  },\n};\n","import React, { forwardRef } from \"react\";\n\nimport {\n  Alert as PrimitiveAlert,\n  AlertTitle,\n  AlertDescription,\n} from \"src/primitives/Alert\";\nimport { cn } from \"src/shadcn/lib/utils\";\nimport { renderIcon, type IconProp } from \"src/lib/renderIcon\";\n\nimport { VARIANT_CONFIG } from \"./constants\";\n\nexport type CalloutVariant = \"info\" | \"warning\" | \"danger\" | \"success\";\n\ntype PrimitiveAlertProps = React.ComponentProps<typeof PrimitiveAlert>;\n\nexport interface CalloutProps extends Omit<PrimitiveAlertProps, \"variant\"> {\n  /** Visual style of the callout. */\n  variant?: CalloutVariant;\n  /** Custom icon. Defaults to a variant-specific icon. */\n  icon?: IconProp;\n  /** Optional title rendered as AlertTitle. */\n  title?: string;\n  /** Content rendered as AlertDescription. */\n  children?: React.ReactNode;\n}\n\nconst Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    { variant = \"info\", icon, title, children, className, ...otherProps },\n    ref\n  ) => {\n    const config = VARIANT_CONFIG[variant];\n    const resolvedIcon = icon ?? config.icon;\n\n    return (\n      <PrimitiveAlert\n        ref={ref}\n        className={cn(config.container, className)}\n        {...otherProps}\n      >\n        {renderIcon(resolvedIcon, \"size-4 shrink-0\")}\n        {title && <AlertTitle className=\"font-semibold\">{title}</AlertTitle>}\n        {children && (\n          <AlertDescription className=\"text-current\">\n            {children}\n          </AlertDescription>\n        )}\n      </PrimitiveAlert>\n    );\n  }\n);\n\nCallout.displayName = \"Callout\";\n\nexport { Callout };\n"],"names":["__iconNode","InfoIcon","AlertTriangleIcon","AlertCircleIcon","CheckCircleIcon","_jsxs","PrimitiveAlert","_jsx"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAMA,YAAU,GAAG;AACnB,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC5D,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AACpE,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE;AACvE,CAAC;AACD,MAAM,WAAW,GAAG,gBAAgB,CAAC,cAAc,EAAEA,YAAU,CAAC;;ACdhE;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAM,UAAU,GAAG;AACnB,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,iCAAiC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AACnE,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,gBAAgB,EAAE,GAAG,EAAE,QAAQ,EAAE;AACjD,CAAC;AACD,MAAM,cAAc,GAAG,gBAAgB,CAAC,kBAAkB,EAAE,UAAU,CAAC;;ACFhE,MAAM,cAAc,GAMvB;AACF,IAAA,IAAI,EAAE;AACJ,QAAA,SAAS,EAAE,wDAAwD;AACnE,QAAA,IAAI,EAAEC,IAAQ;AACf,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,SAAS,EACP,iEAAiE;AACnE,QAAA,IAAI,EAAEC,aAAiB;AACxB,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,SAAS,EAAE,2DAA2D;AACtE,QAAA,IAAI,EAAEC,WAAe;AACtB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,SAAS,EACP,iEAAiE;AACnE,QAAA,IAAI,EAAEC,cAAe;AACtB,KAAA;CACF;;ACTD,MAAM,OAAO,GAAG,UAAU,CACxB,CACE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,EACrE,GAAG,KACD;AACF,IAAA,MAAM,MAAM,GAAG,cAAc,CAAC,OAAO,CAAC;AACtC,IAAA,MAAM,YAAY,GAAG,IAAI,IAAI,MAAM,CAAC,IAAI;IAExC,QACEC,IAAA,CAACC,KAAc,EAAA,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,GACtC,UAAU,EAAA,QAAA,EAAA,CAEb,UAAU,CAAC,YAAY,EAAE,iBAAiB,CAAC,EAC3C,KAAK,IAAIC,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,KAAK,EAAA,CAAc,EACnE,QAAQ,KACPA,GAAA,CAAC,gBAAgB,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,QAAA,EACvC,QAAQ,EAAA,CACQ,CACpB,CAAA,EAAA,CACc;AAErB,CAAC;AAGH,OAAO,CAAC,WAAW,GAAG,SAAS;;;;","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Callout-ClNFeMbn.js","sources":["../node_modules/lucide-react/dist/esm/icons/circle-alert.js","../node_modules/lucide-react/dist/esm/icons/circle-check-big.js","../src/components/Callout/constants.ts","../src/components/Callout/Callout.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.577.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n  [\"line\", { x1: \"12\", x2: \"12\", y1: \"8\", y2: \"12\", key: \"1pkeuh\" }],\n  [\"line\", { x1: \"12\", x2: \"12.01\", y1: \"16\", y2: \"16\", key: \"4dfq90\" }]\n];\nconst CircleAlert = createLucideIcon(\"circle-alert\", __iconNode);\n\nexport { __iconNode, CircleAlert as default };\n//# sourceMappingURL=circle-alert.js.map\n","/**\n * @license lucide-react v0.577.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M21.801 10A10 10 0 1 1 17 3.335\", key: \"yps3ct\" }],\n  [\"path\", { d: \"m9 11 3 3L22 4\", key: \"1pflzl\" }]\n];\nconst CircleCheckBig = createLucideIcon(\"circle-check-big\", __iconNode);\n\nexport { __iconNode, CircleCheckBig as default };\n//# sourceMappingURL=circle-check-big.js.map\n","import React from \"react\";\n\nimport {\n  InfoIcon,\n  AlertTriangleIcon,\n  AlertCircleIcon,\n  CheckCircleIcon,\n} from \"lucide-react\";\n\nimport type { CalloutVariant } from \"./Callout\";\n\nexport const VARIANT_CONFIG: Record<\n  CalloutVariant,\n  {\n    container: string;\n    icon: React.ComponentType<{ className?: string }>;\n  }\n> = {\n  info: {\n    container: \"border border-info-border bg-info text-info-foreground\",\n    icon: InfoIcon,\n  },\n  warning: {\n    container:\n      \"border border-warning-border bg-warning text-warning-foreground\",\n    icon: AlertTriangleIcon,\n  },\n  danger: {\n    container: \"border border-error-border bg-error text-error-foreground\",\n    icon: AlertCircleIcon,\n  },\n  success: {\n    container:\n      \"border border-success-border bg-success text-success-foreground\",\n    icon: CheckCircleIcon,\n  },\n};\n","import React, { forwardRef } from \"react\";\n\nimport {\n  Alert as PrimitiveAlert,\n  AlertTitle,\n  AlertDescription,\n} from \"src/primitives/Alert\";\nimport { cn } from \"src/shadcn/lib/utils\";\nimport { renderIcon, type IconProp } from \"src/lib/renderIcon\";\n\nimport { VARIANT_CONFIG } from \"./constants\";\n\nexport type CalloutVariant = \"info\" | \"warning\" | \"danger\" | \"success\";\n\ntype PrimitiveAlertProps = React.ComponentProps<typeof PrimitiveAlert>;\n\nexport interface CalloutProps extends Omit<PrimitiveAlertProps, \"variant\"> {\n  /** Visual style of the callout. */\n  variant?: CalloutVariant;\n  /** Custom icon. Defaults to a variant-specific icon. */\n  icon?: IconProp;\n  /** Optional title rendered as AlertTitle. */\n  title?: string;\n  /** Content rendered as AlertDescription. */\n  children?: React.ReactNode;\n}\n\nconst Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    { variant = \"info\", icon, title, children, className, ...otherProps },\n    ref\n  ) => {\n    const config = VARIANT_CONFIG[variant];\n    const resolvedIcon = icon ?? config.icon;\n\n    return (\n      <PrimitiveAlert\n        ref={ref}\n        className={cn(config.container, className)}\n        {...otherProps}\n      >\n        {renderIcon(resolvedIcon, \"size-4 shrink-0\")}\n        {title && <AlertTitle className=\"font-semibold\">{title}</AlertTitle>}\n        {children && (\n          <AlertDescription className=\"text-current\">\n            {children}\n          </AlertDescription>\n        )}\n      </PrimitiveAlert>\n    );\n  }\n);\n\nCallout.displayName = \"Callout\";\n\nexport { Callout };\n"],"names":["__iconNode","InfoIcon","AlertTriangleIcon","AlertCircleIcon","CheckCircleIcon","PrimitiveAlert"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAMA,YAAU,GAAG;AACnB,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AAC5D,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AACpE,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE;AACvE,CAAC;AACD,MAAM,WAAW,GAAG,gBAAgB,CAAC,cAAc,EAAEA,YAAU,CAAC;;ACdhE;AACA;AACA;AACA;AACA;AACA;;;AAIA,MAAM,UAAU,GAAG;AACnB,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,iCAAiC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;AACnE,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,gBAAgB,EAAE,GAAG,EAAE,QAAQ,EAAE;AACjD,CAAC;AACD,MAAM,cAAc,GAAG,gBAAgB,CAAC,kBAAkB,EAAE,UAAU,CAAC;;ACFhE,MAAM,cAAA,GAMT;AAAA,EACF,IAAA,EAAM;AAAA,IACJ,SAAA,EAAW,wDAAA;AAAA,IACX,IAAA,EAAMC;AAAA,GACR;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAA,EACE,iEAAA;AAAA,IACF,IAAA,EAAMC;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,SAAA,EAAW,2DAAA;AAAA,IACX,IAAA,EAAMC;AAAA,GACR;AAAA,EACA,OAAA,EAAS;AAAA,IACP,SAAA,EACE,iEAAA;AAAA,IACF,IAAA,EAAMC;AAAA;AAEV,CAAA;;ACTA,MAAM,OAAA,GAAU,UAAA;AAAA,EACd,CACE,EAAE,OAAA,GAAU,MAAA,EAAQ,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,GAAG,UAAA,EAAW,EACpE,GAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAS,eAAe,OAAO,CAAA;AACrC,IAAA,MAAM,YAAA,GAAe,QAAQ,MAAA,CAAO,IAAA;AAEpC,IAAA,uBACE,IAAA;AAAA,MAACC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAAA,QACxC,GAAG,UAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,UAAA,CAAW,cAAc,iBAAiB,CAAA;AAAA,UAC1C,KAAA,oBAAS,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,iBAAiB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACtD,QAAA,oBACC,GAAA,CAAC,gBAAA,EAAA,EAAiB,SAAA,EAAU,gBACzB,QAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;","x_google_ignoreList":[0,1]}

package/dist/Checkbox-C_Rd2-8Z.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import { c as cn } from './utils-BJnb9o5c.js';
+import { Checkbox as Checkbox$1 } from './primitives/Checkbox.js';
+import { Field, FieldContent, FieldLabel, FieldDescription, FieldError } from './primitives/Field.js';
+
+const Checkbox = forwardRef(
+  ({
+    label,
+    error,
+    helpText,
+    required = false,
+    disabled = false,
+    className,
+    ...otherProps
+  }, ref) => {
+    const generatedId = useId();
+    const id = otherProps.id ?? generatedId;
+    const errorId = `error_${id}`;
+    const helpTextId = `helpText_${id}`;
+    const ariaDescribedBy = [error ? errorId : null, helpText ? helpTextId : null].filter(Boolean).join(" ") || void 0;
+    const hasField = !!(label || error || helpText);
+    if (!hasField) {
+      return /* @__PURE__ */ jsx(
+        Checkbox$1,
+        {
+          ref,
+          id,
+          disabled,
+          "aria-invalid": !!error || void 0,
+          "aria-required": required || void 0,
+          "aria-describedby": ariaDescribedBy,
+          className,
+          ...otherProps
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col gap-1", className),
+        "data-disabled": disabled || void 0,
+        "data-invalid": !!error || void 0,
+        children: [
+          /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox$1,
+              {
+                ref,
+                id,
+                disabled,
+                "aria-invalid": !!error || void 0,
+                "aria-required": required || void 0,
+                "aria-describedby": ariaDescribedBy,
+                ...otherProps
+              }
+            ),
+            /* @__PURE__ */ jsxs(FieldContent, { children: [
+              label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: id, children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+              ] }),
+              helpText && /* @__PURE__ */ jsx(FieldDescription, { id: helpTextId, children: helpText })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx(FieldError, { id: errorId, children: error })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox as C };
+//# sourceMappingURL=Checkbox-C_Rd2-8Z.js.map

package/dist/{Checkbox-zCxgcZiC.js.map → Checkbox-C_Rd2-8Z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-zCxgcZiC.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\n\nimport { cn } from \"src/shadcn/lib/utils\";\nimport { Checkbox as PrimitiveCheckbox } from \"src/primitives/Checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n} from \"src/primitives/Field\";\n\nexport interface CheckboxProps extends React.ComponentProps<\n  typeof PrimitiveCheckbox\n> {\n  /** Text displayed next to the checkbox. */\n  label?: string;\n  /** Error message displayed below the checkbox. */\n  error?: string;\n  /** Helper text displayed below the label. Accepts string or ReactNode. */\n  helpText?: React.ReactNode;\n  /** Shows a required indicator next to the label. */\n  required?: boolean;\n  /** Additional class name for the outermost wrapper. */\n  className?: string;\n}\n\nconst Checkbox = forwardRef<\n  React.ComponentRef<typeof PrimitiveCheckbox>,\n  CheckboxProps\n>(\n  (\n    {\n      label,\n      error,\n      helpText,\n      required = false,\n      disabled = false,\n      className,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const id = otherProps.id ?? generatedId;\n    const errorId = `error_${id}`;\n    const helpTextId = `helpText_${id}`;\n\n    const ariaDescribedBy =\n      [error ? errorId : null, helpText ? helpTextId : null]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const hasField = !!(label || error || helpText);\n\n    if (!hasField) {\n      return (\n        <PrimitiveCheckbox\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          aria-invalid={!!error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={ariaDescribedBy}\n          className={className}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <div\n        className={cn(\"flex flex-col gap-1\", className)}\n        data-disabled={disabled || undefined}\n        data-invalid={!!error || undefined}\n      >\n        <Field orientation=\"horizontal\">\n          <PrimitiveCheckbox\n            ref={ref}\n            id={id}\n            disabled={disabled}\n            aria-invalid={!!error || undefined}\n            aria-required={required || undefined}\n            aria-describedby={ariaDescribedBy}\n            {...otherProps}\n          />\n          <FieldContent>\n            {label && (\n              <FieldLabel htmlFor={id}>\n                {label}\n                {required && (\n                  <span aria-hidden=\"true\" className=\"text-destructive\">\n                    *\n                  </span>\n                )}\n              </FieldLabel>\n            )}\n            {helpText && (\n              <FieldDescription id={helpTextId}>{helpText}</FieldDescription>\n            )}\n          </FieldContent>\n        </Field>\n        {error && <FieldError id={errorId}>{error}</FieldError>}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"],"names":["_jsx","PrimitiveCheckbox","_jsxs"],"mappings":";;;;;;AA2BA,MAAM,QAAQ,GAAG,UAAU,CAIzB,CACE,EACE,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,GAAG,UAAU,EACd,EACD,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,KAAK,EAAE;AAC3B,IAAA,MAAM,EAAE,GAAG,UAAU,CAAC,EAAE,IAAI,WAAW;AACvC,IAAA,MAAM,OAAO,GAAG,CAAA,MAAA,EAAS,EAAE,EAAE;AAC7B,IAAA,MAAM,UAAU,GAAG,CAAA,SAAA,EAAY,EAAE,EAAE;IAEnC,MAAM,eAAe,GACnB,CAAC,KAAK,GAAG,OAAO,GAAG,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,IAAI;SAClD,MAAM,CAAC,OAAO;AACd,SAAA,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS;IAE3B,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC;IAE/C,IAAI,CAAC,QAAQ,EAAE;AACb,QAAA,QACEA,GAAA,CAACC,UAAiB,EAAA,EAChB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,CAAC,CAAC,KAAK,IAAI,SAAS,EAAA,eAAA,EACnB,QAAQ,IAAI,SAAS,EAAA,kBAAA,EAClB,eAAe,EACjC,SAAS,EAAE,SAAS,EAAA,GAChB,UAAU,EAAA,CACd;IAEN;IAEA,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAA,eAAA,EAChC,QAAQ,IAAI,SAAS,EAAA,cAAA,EACtB,CAAC,CAAC,KAAK,IAAI,SAAS,EAAA,QAAA,EAAA,CAElCA,IAAA,CAAC,KAAK,EAAA,EAAC,WAAW,EAAC,YAAY,EAAA,QAAA,EAAA,CAC7BF,IAACC,UAAiB,EAAA,EAChB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,CAAC,CAAC,KAAK,IAAI,SAAS,EAAA,eAAA,EACnB,QAAQ,IAAI,SAAS,EAAA,kBAAA,EAClB,eAAe,EAAA,GAC7B,UAAU,EAAA,CACd,EACFC,KAAC,YAAY,EAAA,EAAA,QAAA,EAAA,CACV,KAAK,KACJA,IAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,EAAE,EAAA,QAAA,EAAA,CACpB,KAAK,EACL,QAAQ,KACPF,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAAA,GAAA,EAAA,CAE9C,CACR,CAAA,EAAA,CACU,CACd,EACA,QAAQ,KACPA,GAAA,CAAC,gBAAgB,EAAA,EAAC,EAAE,EAAE,UAAU,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAoB,CAChE,CAAA,EAAA,CACY,CAAA,EAAA,CACT,EACP,KAAK,IAAIA,GAAA,CAAC,UAAU,EAAA,EAAC,EAAE,EAAE,OAAO,EAAA,QAAA,EAAG,KAAK,EAAA,CAAc,CAAA,EAAA,CACnD;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox-C_Rd2-8Z.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\n\nimport { cn } from \"src/shadcn/lib/utils\";\nimport { Checkbox as PrimitiveCheckbox } from \"src/primitives/Checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n} from \"src/primitives/Field\";\n\nexport interface CheckboxProps extends React.ComponentProps<\n  typeof PrimitiveCheckbox\n> {\n  /** Text displayed next to the checkbox. */\n  label?: string;\n  /** Error message displayed below the checkbox. */\n  error?: string;\n  /** Helper text displayed below the label. Accepts string or ReactNode. */\n  helpText?: React.ReactNode;\n  /** Shows a required indicator next to the label. */\n  required?: boolean;\n  /** Additional class name for the outermost wrapper. */\n  className?: string;\n}\n\nconst Checkbox = forwardRef<\n  React.ComponentRef<typeof PrimitiveCheckbox>,\n  CheckboxProps\n>(\n  (\n    {\n      label,\n      error,\n      helpText,\n      required = false,\n      disabled = false,\n      className,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const id = otherProps.id ?? generatedId;\n    const errorId = `error_${id}`;\n    const helpTextId = `helpText_${id}`;\n\n    const ariaDescribedBy =\n      [error ? errorId : null, helpText ? helpTextId : null]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const hasField = !!(label || error || helpText);\n\n    if (!hasField) {\n      return (\n        <PrimitiveCheckbox\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          aria-invalid={!!error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={ariaDescribedBy}\n          className={className}\n          {...otherProps}\n        />\n      );\n    }\n\n    return (\n      <div\n        className={cn(\"flex flex-col gap-1\", className)}\n        data-disabled={disabled || undefined}\n        data-invalid={!!error || undefined}\n      >\n        <Field orientation=\"horizontal\">\n          <PrimitiveCheckbox\n            ref={ref}\n            id={id}\n            disabled={disabled}\n            aria-invalid={!!error || undefined}\n            aria-required={required || undefined}\n            aria-describedby={ariaDescribedBy}\n            {...otherProps}\n          />\n          <FieldContent>\n            {label && (\n              <FieldLabel htmlFor={id}>\n                {label}\n                {required && (\n                  <span aria-hidden=\"true\" className=\"text-destructive\">\n                    *\n                  </span>\n                )}\n              </FieldLabel>\n            )}\n            {helpText && (\n              <FieldDescription id={helpTextId}>{helpText}</FieldDescription>\n            )}\n          </FieldContent>\n        </Field>\n        {error && <FieldError id={errorId}>{error}</FieldError>}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"],"names":["PrimitiveCheckbox"],"mappings":";;;;;;AA2BA,MAAM,QAAA,GAAW,UAAA;AAAA,EAIf,CACE;AAAA,IACE,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,IAAA,MAAM,EAAA,GAAK,WAAW,EAAA,IAAM,WAAA;AAC5B,IAAA,MAAM,OAAA,GAAU,SAAS,EAAE,CAAA,CAAA;AAC3B,IAAA,MAAM,UAAA,GAAa,YAAY,EAAE,CAAA,CAAA;AAEjC,IAAA,MAAM,eAAA,GACJ,CAAC,KAAA,GAAQ,OAAA,GAAU,MAAM,QAAA,GAAW,UAAA,GAAa,IAAI,CAAA,CAClD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAElB,IAAA,MAAM,QAAA,GAAW,CAAC,EAAE,KAAA,IAAS,KAAA,IAAS,QAAA,CAAA;AAEtC,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,uBACE,GAAA;AAAA,QAACA,UAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,QAAA;AAAA,UACA,cAAA,EAAc,CAAC,CAAC,KAAA,IAAS,MAAA;AAAA,UACzB,iBAAe,QAAA,IAAY,MAAA;AAAA,UAC3B,kBAAA,EAAkB,eAAA;AAAA,UAClB,SAAA;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,QAC9C,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,cAAA,EAAc,CAAC,CAAC,KAAA,IAAS,MAAA;AAAA,QAEzB,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAM,aAAY,YAAA,EACjB,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAACA,UAAA;AAAA,cAAA;AAAA,gBACC,GAAA;AAAA,gBACA,EAAA;AAAA,gBACA,QAAA;AAAA,gBACA,cAAA,EAAc,CAAC,CAAC,KAAA,IAAS,MAAA;AAAA,gBACzB,iBAAe,QAAA,IAAY,MAAA;AAAA,gBAC3B,kBAAA,EAAkB,eAAA;AAAA,gBACjB,GAAG;AAAA;AAAA,aACN;AAAA,iCACC,YAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,KAAA,oBACC,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,EAAA,EAClB,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,oBAAmB,QAAA,EAAA,GAAA,EAEtD;AAAA,eAAA,EAEJ,CAAA;AAAA,cAED,QAAA,oBACC,GAAA,CAAC,gBAAA,EAAA,EAAiB,EAAA,EAAI,YAAa,QAAA,EAAA,QAAA,EAAS;AAAA,aAAA,EAEhD;AAAA,WAAA,EACF,CAAA;AAAA,UACC,KAAA,oBAAS,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,SAAU,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KAC5C;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}

package/dist/ColorPicker-D7Y1gZNn.js

@@ -0,0 +1,437 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback, useSyncExternalStore, forwardRef, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HexAlphaColorPicker, HexColorPicker, HexColorInput } from 'react-colorful';
+import { Button } from './primitives/Button.js';
+import { Popover, PopoverTrigger, PopoverContent } from './primitives/Popover.js';
+import { c as cn } from './utils-BJnb9o5c.js';
+import { c as cva } from './index-Bo3AAQJp.js';
+import { C as ChevronDown } from './chevron-down-BNi0ntys.js';
+import { c as createLucideIcon } from './createLucideIcon-C8ycilSN.js';
+
+/**
+ * @license lucide-react v0.577.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  [
+    "path",
+    {
+      d: "m12 9-8.414 8.414A2 2 0 0 0 3 18.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 3.828 21h1.344a2 2 0 0 0 1.414-.586L15 12",
+      key: "1y3wsu"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "m18 9 .4.4a1 1 0 1 1-3 3l-3.8-3.8a1 1 0 1 1 3-3l.4.4 3.4-3.4a1 1 0 1 1 3 3z",
+      key: "110lr1"
+    }
+  ],
+  ["path", { d: "m2 22 .414-.414", key: "jhxm08" }]
+];
+const Pipette = createLucideIcon("pipette", __iconNode);
+
+const isSupported = typeof window !== "undefined" && "EyeDropper" in window;
+const useEyeDropper = () => {
+  const open = useCallback(async () => {
+    if (!window.EyeDropper) throw new Error("EyeDropper API not supported");
+    const dropper = new window.EyeDropper();
+    const result = await dropper.open();
+    return result.sRGBHex;
+  }, []);
+  return { isSupported, open };
+};
+
+const DEFAULT_PALETTE_COLORS = [
+  { hex: "#FFFFFF" },
+  { hex: "#D6D6D6" },
+  { hex: "#0A0E13" },
+  { hex: "#FECE1E" },
+  { hex: "#F32E48" },
+  { hex: "#02C39A" },
+  { hex: "#2A79C4" },
+  { hex: "#B3E5FC" },
+  { hex: "#C3C6F9" },
+  { hex: "#8064CE" },
+  { hex: "#FE861E" },
+  { hex: "#FF7DC9" },
+  { hex: "#028090" },
+  { hex: "#095482" }
+];
+const RECENTLY_USED_STORAGE_KEY = "recently-used-colors";
+const PICKER_HEIGHT = {
+  small: "100px",
+  medium: "120px",
+  large: "140px"
+};
+
+const getFromStorage = (key, fallback) => {
+  try {
+    const stored = localStorage.getItem(key);
+    return stored ? JSON.parse(stored) : fallback;
+  } catch {
+    return fallback;
+  }
+};
+const setToStorage = (key, value) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+};
+const createSyncedStore = (storageKey) => {
+  const listeners = /* @__PURE__ */ new Set();
+  const store2 = {
+    value: getFromStorage(storageKey, []),
+    getSnapshot: () => store2.value,
+    getServerSnapshot: () => [],
+    setValue: (newValue) => {
+      store2.value = newValue;
+      setToStorage(storageKey, newValue);
+      listeners.forEach((listener) => listener());
+    },
+    subscribe: (callback) => {
+      listeners.add(callback);
+      const storageEventHandler = (event) => {
+        if (event.key !== storageKey) return;
+        store2.value = getFromStorage(storageKey, []);
+        listeners.forEach((listener) => listener());
+      };
+      if (listeners.size === 1) {
+        window.addEventListener("storage", storageEventHandler);
+      }
+      return () => {
+        listeners.delete(callback);
+        if (listeners.size === 0) {
+          window.removeEventListener("storage", storageEventHandler);
+        }
+      };
+    }
+  };
+  return store2;
+};
+const store = createSyncedStore(RECENTLY_USED_STORAGE_KEY);
+const useRecentlyUsedColors = () => [
+  useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot
+  ),
+  store.setValue
+];
+
+const isValidHex = (hex) => /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(hex);
+const hexToRgb = (hex) => {
+  const raw = hex.replace(/^#/, "");
+  if (!/^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(raw)) {
+    return { r: 0, g: 0, b: 0, a: 1 };
+  }
+  let r, g, b, a = 255;
+  if (raw.length === 3 || raw.length === 4) {
+    r = parseInt(raw[0] + raw[0], 16);
+    g = parseInt(raw[1] + raw[1], 16);
+    b = parseInt(raw[2] + raw[2], 16);
+    if (raw.length === 4) a = parseInt(raw[3] + raw[3], 16);
+  } else {
+    r = parseInt(raw.slice(0, 2), 16);
+    g = parseInt(raw.slice(2, 4), 16);
+    b = parseInt(raw.slice(4, 6), 16);
+    if (raw.length === 8) a = parseInt(raw.slice(6, 8), 16);
+  }
+  return { r, g, b, a: Math.round(a / 255 * 100) / 100 };
+};
+const hexToHex8 = (hex) => {
+  const { r, g, b, a } = hexToRgb(hex);
+  const alpha = Math.round(a * 255);
+  return `#${[r, g, b, alpha].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+};
+const getColor = (colorValue, showTransparencyControl) => {
+  if (!isValidHex(colorValue)) {
+    return { hex: colorValue, rgb: { r: 0, g: 0, b: 0, a: 1 } };
+  }
+  const rgb = hexToRgb(colorValue);
+  if (rgb.a === 0) {
+    return { hex: colorValue, rgb };
+  }
+  const hex = showTransparencyControl ? hexToHex8(colorValue) : `#${colorValue.replace(/^#/, "").slice(0, 6)}`;
+  return { hex, rgb: hexToRgb(hex) };
+};
+
+const Palette = forwardRef(
+  ({
+    color,
+    colorList = DEFAULT_PALETTE_COLORS,
+    onChange,
+    className,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-row flex-wrap items-start justify-start gap-1",
+        className
+      ),
+      ...otherProps,
+      children: colorList.map((item) => {
+        const rgbValue = "rgb" in item && typeof item.rgb === "string" ? item.rgb : void 0;
+        const value = item.hex ?? rgbValue ?? "";
+        const isActive = !!color && !!value && color.toLowerCase() === value.toLowerCase();
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": "color-palette-item",
+            className: cn(
+              "size-6 rounded-[5px] border cursor-pointer overflow-hidden transition-colors",
+              isActive ? "border-muted-foreground" : "border-border hover:border-muted-foreground/50"
+            ),
+            onClick: () => onChange?.(value),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block size-full",
+                  isValidHex(value) ? "" : "bg-[repeating-conic-gradient(#ccc_0_25%,transparent_0_50%)] bg-[length:8px_8px]"
+                ),
+                style: isValidHex(value) ? { backgroundColor: value } : void 0
+              }
+            )
+          },
+          value
+        );
+      })
+    }
+  )
+);
+Palette.displayName = "ColorPicker.Palette";
+
+const targetVariants = cva(
+  "inline-flex items-center justify-between rounded-md border border-input bg-background transition-colors hover:border-muted-foreground focus-visible:outline-none focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-primary/15 cursor-pointer",
+  {
+    variants: {
+      size: {
+        small: "h-7 p-0.5 gap-2",
+        medium: "h-8 p-1 gap-2",
+        large: "h-10 p-1.5 gap-3"
+      }
+    },
+    defaultVariants: {
+      size: "large"
+    }
+  }
+);
+const Target = forwardRef(
+  ({ size = "large", showHexValue, color, colorValue, className, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-testid": "color-picker-target",
+      className: cn(targetVariants({ size }), className),
+      ...props,
+      children: [
+        showHexValue && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground min-w-[4.5rem] ps-1", children: color }),
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block size-5 rounded-md border border-border",
+              style: { backgroundColor: colorValue }
+            }
+          ),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" })
+        ] })
+      ]
+    }
+  )
+);
+Target.displayName = "ColorPicker.Target";
+
+const ColorPicker = forwardRef(
+  ({
+    color = "",
+    size = "large",
+    onChange,
+    dropdownProps,
+    showEyeDropper = true,
+    showHexValue = false,
+    showTransparencyControl = false,
+    showPicker = true,
+    showHexPicker = true,
+    colorPalette,
+    showRecentlyUsedColors = showPicker,
+    className
+  }, ref) => {
+    const { t } = useTranslation();
+    const [colorInternal, setColorInternal] = useState(color);
+    const [isColorSelected, setIsColorSelected] = useState(false);
+    const [open, setOpen] = useState(false);
+    const hexColorInputValue = useRef("");
+    const { isSupported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();
+    const [recentlyUsedColors, setRecentlyUsedColors] = useRecentlyUsedColors();
+    const PickerComponent = showTransparencyControl ? HexAlphaColorPicker : HexColorPicker;
+    const colorValue = color ?? colorInternal ?? "";
+    const onColorChange = (value) => {
+      setIsColorSelected(true);
+      if (onChange) {
+        onChange(getColor(value, showTransparencyControl));
+      } else {
+        setColorInternal(value);
+      }
+    };
+    const onColorInputChange = (hex) => {
+      hexColorInputValue.current = hex;
+      const expectedLength = showTransparencyControl ? 9 : 7;
+      if (hex.length !== expectedLength) return;
+      onColorChange(hex);
+      hexColorInputValue.current = "";
+    };
+    const onBlur = () => {
+      if (!hexColorInputValue.current) return;
+      onColorChange(hexColorInputValue.current);
+      hexColorInputValue.current = "";
+    };
+    const pickColor = async () => {
+      try {
+        const hex = await openEyeDropper();
+        onColorChange(hex);
+      } catch {
+      }
+    };
+    const onOpenChange = (nextOpen) => {
+      if (!nextOpen && showRecentlyUsedColors && isColorSelected) {
+        const newColor = getColor(colorValue, showTransparencyControl);
+        const filtered = recentlyUsedColors.filter(
+          ({ hex }) => hex !== newColor.hex
+        );
+        const updated = [newColor, ...filtered];
+        if (updated.length > 14) updated.pop();
+        setRecentlyUsedColors(updated);
+        setIsColorSelected(false);
+      }
+      setOpen(nextOpen);
+    };
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Target,
+        {
+          color,
+          colorValue,
+          showHexValue,
+          size
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          ref,
+          align: "start",
+          side: "bottom",
+          className: cn("w-auto p-3", className),
+          ...dropdownProps,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 w-56", children: [
+            showPicker && /* @__PURE__ */ jsxs(Fragment, { children: [
+              showHexPicker && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "neeto-color-picker-section",
+                  style: {
+                    ["--react-colorful-height"]: PICKER_HEIGHT[size] ?? "140px"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    PickerComponent,
+                    {
+                      color: colorValue,
+                      onChange: onColorChange,
+                      style: {
+                        width: "100%",
+                        height: PICKER_HEIGHT[size] ?? "140px"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                showEyeDropper && eyeDropperSupported && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
+                    onClick: pickColor,
+                    "aria-label": t(
+                      "neetoatoms.colorPicker.pickColor",
+                      "Pick color from screen"
+                    ),
+                    children: /* @__PURE__ */ jsx(Pipette, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex-1",
+                    "data-testid": "colorpicker-editable-input",
+                    children: /* @__PURE__ */ jsx(
+                      HexColorInput,
+                      {
+                        prefixed: true,
+                        alpha: !!showTransparencyControl,
+                        color: colorValue,
+                        "data-testid": "colorpicker-editable-input-textbox",
+                        onChange: onColorInputChange,
+                        onBlur,
+                        className: "h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-primary/15"
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-testid": "color-palette",
+                className: cn(showPicker && "border-t border-border pt-3"),
+                children: /* @__PURE__ */ jsx(
+                  Palette,
+                  {
+                    color,
+                    colorList: colorPalette,
+                    onChange: onColorChange
+                  }
+                )
+              }
+            ),
+            showRecentlyUsedColors && recentlyUsedColors.length > 0 && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "border-t border-border pt-3",
+                "data-testid": "color-palette-recently-used",
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: t("neetoatoms.colorPicker.recentlyUsed", "Recently used") }),
+                  /* @__PURE__ */ jsx(
+                    Palette,
+                    {
+                      colorList: recentlyUsedColors,
+                      onChange: onColorChange
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+export { ColorPicker as C };
+//# sourceMappingURL=ColorPicker-D7Y1gZNn.js.map