@bigbinary/neeto-atoms 1.0.36 → 1.0.38

package/dist/cjs/{Callout-CVNpjTde.js → Callout-_XBx1JHL.js}

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var primitives_Alert = require('./primitives/Alert.js');
-var utils = require('./utils-CTr7wn5d.js');
-var renderIcon = require('./renderIcon-fLF3odqg.js');
+var utils = require('./utils-BhM0B89p.js');
+var renderIcon = require('./renderIcon-BRrpZu9a.js');
 var createLucideIcon = require('./createLucideIcon-D0tRgV6l.js');
 var triangleAlert = require('./triangle-alert-ZUMRpmzW.js');
 
@@ -38,30 +38,44 @@ const __iconNode = [
 const CircleCheckBig = createLucideIcon.createLucideIcon("circle-check-big", __iconNode);
 
 const VARIANT_CONFIG = {
-    info: {
-        container: "border border-info-border bg-info text-info-foreground",
-        icon: triangleAlert.Info,
-    },
-    warning: {
-        container: "border border-warning-border bg-warning text-warning-foreground",
-        icon: triangleAlert.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: triangleAlert.Info
+  },
+  warning: {
+    container: "border border-warning-border bg-warning text-warning-foreground",
+    icon: triangleAlert.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 = React.forwardRef(({ variant = "info", icon, title, children, className, ...otherProps }, ref) => {
+const Callout = React.forwardRef(
+  ({ variant = "info", icon, title, children, className, ...otherProps }, ref) => {
     const config = VARIANT_CONFIG[variant];
     const resolvedIcon = icon ?? config.icon;
-    return (jsxRuntime.jsxs(primitives_Alert.Alert, { ref: ref, className: utils.cn(config.container, className), ...otherProps, children: [renderIcon.renderIcon(resolvedIcon, "size-4 shrink-0"), title && jsxRuntime.jsx(primitives_Alert.AlertTitle, { className: "font-semibold", children: title }), children && (jsxRuntime.jsx(primitives_Alert.AlertDescription, { className: "text-current", children: children }))] }));
-});
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      primitives_Alert.Alert,
+      {
+        ref,
+        className: utils.cn(config.container, className),
+        ...otherProps,
+        children: [
+          renderIcon.renderIcon(resolvedIcon, "size-4 shrink-0"),
+          title && /* @__PURE__ */ jsxRuntime.jsx(primitives_Alert.AlertTitle, { className: "font-semibold", children: title }),
+          children && /* @__PURE__ */ jsxRuntime.jsx(primitives_Alert.AlertDescription, { className: "text-current", children })
+        ]
+      }
+    );
+  }
+);
 Callout.displayName = "Callout";
 
 exports.Callout = Callout;
-//# sourceMappingURL=Callout-CVNpjTde.js.map
+//# sourceMappingURL=Callout-_XBx1JHL.js.map

package/dist/cjs/Callout-_XBx1JHL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-_XBx1JHL.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","createLucideIcon","InfoIcon","AlertTriangleIcon","AlertCircleIcon","CheckCircleIcon","forwardRef","jsxs","PrimitiveAlert","cn","renderIcon","jsx","AlertTitle","AlertDescription"],"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,GAAGC,iCAAgB,CAAC,cAAc,EAAED,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,GAAGC,iCAAgB,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,GAAUC,gBAAA;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,uBACEC,eAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,QAAA,CAAG,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAAA,QACxC,GAAG,UAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAAC,qBAAA,CAAW,cAAc,iBAAiB,CAAA;AAAA,UAC1C,KAAA,oBAASC,cAAA,CAACC,2BAAA,EAAA,EAAW,SAAA,EAAU,iBAAiB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACtD,QAAA,oBACCD,cAAA,CAACE,iCAAA,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/cjs/Checkbox-CxqWOvFN.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils-BhM0B89p.js');
+var primitives_Checkbox = require('./primitives/Checkbox.js');
+var primitives_Field = require('./primitives/Field.js');
+
+const Checkbox = React.forwardRef(
+  ({
+    label,
+    error,
+    helpText,
+    required = false,
+    disabled = false,
+    className,
+    ...otherProps
+  }, ref) => {
+    const generatedId = React.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__ */ jsxRuntime.jsx(
+        primitives_Checkbox.Checkbox,
+        {
+          ref,
+          id,
+          disabled,
+          "aria-invalid": !!error || void 0,
+          "aria-required": required || void 0,
+          "aria-describedby": ariaDescribedBy,
+          className,
+          ...otherProps
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: utils.cn("flex flex-col gap-1", className),
+        "data-disabled": disabled || void 0,
+        "data-invalid": !!error || void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(primitives_Field.Field, { orientation: "horizontal", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              primitives_Checkbox.Checkbox,
+              {
+                ref,
+                id,
+                disabled,
+                "aria-invalid": !!error || void 0,
+                "aria-required": required || void 0,
+                "aria-describedby": ariaDescribedBy,
+                ...otherProps
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(primitives_Field.FieldContent, { children: [
+              label && /* @__PURE__ */ jsxRuntime.jsxs(primitives_Field.FieldLabel, { htmlFor: id, children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+              ] }),
+              helpText && /* @__PURE__ */ jsxRuntime.jsx(primitives_Field.FieldDescription, { id: helpTextId, children: helpText })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsxRuntime.jsx(primitives_Field.FieldError, { id: errorId, children: error })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox-CxqWOvFN.js.map

package/dist/cjs/Checkbox-CxqWOvFN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-CxqWOvFN.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":["forwardRef","useId","jsx","PrimitiveCheckbox","jsxs","cn","Field","FieldContent","FieldLabel","FieldDescription","FieldError"],"mappings":";;;;;;;;AA2BA,MAAM,QAAA,GAAWA,gBAAA;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,cAAcC,WAAA,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,uBACEC,cAAA;AAAA,QAACC,4BAAA;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,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,QAAA,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,0BAAAD,eAAA,CAACE,sBAAA,EAAA,EAAM,aAAY,YAAA,EACjB,QAAA,EAAA;AAAA,4BAAAJ,cAAA;AAAA,cAACC,4BAAA;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,4CACCI,6BAAA,EAAA,EACE,QAAA,EAAA;AAAA,cAAA,KAAA,oBACCH,eAAA,CAACI,2BAAA,EAAA,EAAW,OAAA,EAAS,EAAA,EAClB,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,4BACCN,cAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,oBAAmB,QAAA,EAAA,GAAA,EAEtD;AAAA,eAAA,EAEJ,CAAA;AAAA,cAED,QAAA,oBACCA,cAAA,CAACO,iCAAA,EAAA,EAAiB,EAAA,EAAI,YAAa,QAAA,EAAA,QAAA,EAAS;AAAA,aAAA,EAEhD;AAAA,WAAA,EACF,CAAA;AAAA,UACC,KAAA,oBAASP,cAAA,CAACQ,2BAAA,EAAA,EAAW,EAAA,EAAI,SAAU,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KAC5C;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}

package/dist/cjs/ColorPicker-Co1Gffsu.js

@@ -0,0 +1,439 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var reactColorful = require('react-colorful');
+var primitives_Button = require('./primitives/Button.js');
+var primitives_Popover = require('./primitives/Popover.js');
+var utils = require('./utils-BhM0B89p.js');
+var index = require('./index-vioSzJOw.js');
+var chevronDown = require('./chevron-down-CPsWSS51.js');
+var createLucideIcon = require('./createLucideIcon-D0tRgV6l.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.createLucideIcon("pipette", __iconNode);
+
+const isSupported = typeof window !== "undefined" && "EyeDropper" in window;
+const useEyeDropper = () => {
+  const open = React.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 = () => [
+  React.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 = React.forwardRef(
+  ({
+    color,
+    colorList = DEFAULT_PALETTE_COLORS,
+    onChange,
+    className,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.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__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": "color-palette-item",
+            className: utils.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__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: utils.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 = index.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 = React.forwardRef(
+  ({ size = "large", showHexValue, color, colorValue, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-testid": "color-picker-target",
+      className: utils.cn(targetVariants({ size }), className),
+      ...props,
+      children: [
+        showHexValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground min-w-[4.5rem] ps-1", children: color }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "block size-5 rounded-md border border-border",
+              style: { backgroundColor: colorValue }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(chevronDown.ChevronDown, { className: "size-4 text-muted-foreground" })
+        ] })
+      ]
+    }
+  )
+);
+Target.displayName = "ColorPicker.Target";
+
+const ColorPicker = React.forwardRef(
+  ({
+    color = "",
+    size = "large",
+    onChange,
+    dropdownProps,
+    showEyeDropper = true,
+    showHexValue = false,
+    showTransparencyControl = false,
+    showPicker = true,
+    showHexPicker = true,
+    colorPalette,
+    showRecentlyUsedColors = showPicker,
+    className
+  }, ref) => {
+    const { t } = reactI18next.useTranslation();
+    const [colorInternal, setColorInternal] = React.useState(color);
+    const [isColorSelected, setIsColorSelected] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const hexColorInputValue = React.useRef("");
+    const { isSupported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();
+    const [recentlyUsedColors, setRecentlyUsedColors] = useRecentlyUsedColors();
+    const PickerComponent = showTransparencyControl ? reactColorful.HexAlphaColorPicker : reactColorful.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__ */ jsxRuntime.jsxs(primitives_Popover.Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(primitives_Popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Target,
+        {
+          color,
+          colorValue,
+          showHexValue,
+          size
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        primitives_Popover.PopoverContent,
+        {
+          ref,
+          align: "start",
+          side: "bottom",
+          className: utils.cn("w-auto p-3", className),
+          ...dropdownProps,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 w-56", children: [
+            showPicker && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              showHexPicker && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-testid": "neeto-color-picker-section",
+                  style: {
+                    ["--react-colorful-height"]: PICKER_HEIGHT[size] ?? "140px"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    PickerComponent,
+                    {
+                      color: colorValue,
+                      onChange: onColorChange,
+                      style: {
+                        width: "100%",
+                        height: PICKER_HEIGHT[size] ?? "140px"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                showEyeDropper && eyeDropperSupported && /* @__PURE__ */ jsxRuntime.jsx(
+                  primitives_Button.Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
+                    onClick: pickColor,
+                    "aria-label": t(
+                      "neetoatoms.colorPicker.pickColor",
+                      "Pick color from screen"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Pipette, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "flex-1",
+                    "data-testid": "colorpicker-editable-input",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reactColorful.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "color-palette",
+                className: utils.cn(showPicker && "border-t border-border pt-3"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Palette,
+                  {
+                    color,
+                    colorList: colorPalette,
+                    onChange: onColorChange
+                  }
+                )
+              }
+            ),
+            showRecentlyUsedColors && recentlyUsedColors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "border-t border-border pt-3",
+                "data-testid": "color-palette-recently-used",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-muted-foreground mb-2", children: t("neetoatoms.colorPicker.recentlyUsed", "Recently used") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Palette,
+                    {
+                      colorList: recentlyUsedColors,
+                      onChange: onColorChange
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=ColorPicker-Co1Gffsu.js.map