@nofinite/nui 1.1.2 → 2.0.1

package/dist/components/checkbox/Checkbox.js

@@ -1,46 +1,65 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import b, { useRef as C, useEffect as N } from "react";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { forwardRef as _, useRef as g, useEffect as u, useState as w } from "react";
 /* empty css             */
-function v({
-  checked: s,
-  defaultChecked: l,
-  indeterminate: e = !1,
-  onChange: u,
-  label: o,
-  disabled: r = !1,
-  name: h,
-  value: f,
-  className: k = ""
-}) {
-  const t = C(null), a = s !== void 0, [p, x] = b.useState(l ?? !1), c = a ? s : p;
-  N(() => {
-    t.current && (t.current.indeterminate = e);
-  }, [e]);
-  const d = () => {
-    if (r) return;
-    const i = !c;
-    a || x(i), u?.(i);
-  };
-  return /* @__PURE__ */ m("label", { className: `ui-checkbox-root ${k}`, children: [
-    /* @__PURE__ */ n(
-      "input",
+import { cn as v } from "../../utils/cn/cn.js";
+const y = _(
+  ({
+    checked: i,
+    defaultChecked: d,
+    indeterminate: n = !1,
+    onChange: k,
+    label: s,
+    disabled: t = !1,
+    className: f,
+    ...p
+  }, c) => {
+    const o = g(null);
+    u(() => {
+      typeof c == "function" ? c(o.current) : c && (c.current = o.current);
+    }, [c]);
+    const l = i !== void 0, [x, m] = w(d ?? !1), r = l ? i : x;
+    u(() => {
+      o.current && (o.current.indeterminate = n);
+    }, [n]);
+    const C = (b) => {
+      if (t) return;
+      const a = b.target.checked;
+      l || m(a), k?.(a);
+    };
+    return /* @__PURE__ */ h(
+      "label",
       {
-        ref: t,
-        type: "checkbox",
-        className: "ui-checkbox-input",
-        name: h,
-        value: f,
-        disabled: r,
-        checked: c,
-        onChange: d,
-        "data-state": e ? "indeterminate" : c ? "checked" : "unchecked"
+        className: v(
+          "nui-checkbox",
+          t && "nui-checkbox--disabled",
+          f
+        ),
+        children: [
+          /* @__PURE__ */ h("div", { className: "nui-checkbox__wrapper", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: o,
+                type: "checkbox",
+                className: "nui-checkbox__input",
+                disabled: t,
+                checked: r,
+                onChange: C,
+                "aria-checked": n ? "mixed" : r,
+                "data-state": n ? "indeterminate" : r ? "checked" : "unchecked",
+                ...p
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "nui-checkbox__indicator", "aria-hidden": "true", children: n ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }) : r ? /* @__PURE__ */ e("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" }) }) : null })
+          ] }),
+          s && /* @__PURE__ */ e("span", { className: "nui-checkbox__label", children: s })
+        ]
       }
-    ),
-    /* @__PURE__ */ n("span", { className: "ui-checkbox-check", "aria-hidden": "true", children: e ? "–" : c ? "✓" : "" }),
-    o && /* @__PURE__ */ n("span", { className: "ui-checkbox-label", children: o })
-  ] });
-}
+    );
+  }
+);
+y.displayName = "Checkbox";
 export {
-  v as Checkbox
+  y as Checkbox
 };
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\r\n * Checkbox.tsx\r\n * --------------\r\n * Fully accessible checkbox with 3 states:\r\n * - checked\r\n * - unchecked\r\n * - indeterminate (optional)\r\n */\r\n\r\nimport React, { useEffect, useRef } from 'react';\r\nimport './Checkbox.css';\r\n\r\ninterface CheckboxProps {\r\n  checked?: boolean; // controlled\r\n  defaultChecked?: boolean; // uncontrolled\r\n  indeterminate?: boolean; // optional\r\n  onChange?: (checked: boolean) => void;\r\n\r\n  label?: React.ReactNode;\r\n  disabled?: boolean;\r\n  name?: string;\r\n  value?: string;\r\n  className?: string;\r\n}\r\n\r\nexport function Checkbox({\r\n  checked,\r\n  defaultChecked,\r\n  indeterminate = false,\r\n  onChange,\r\n  label,\r\n  disabled = false,\r\n  name,\r\n  value,\r\n  className = '',\r\n}: CheckboxProps) {\r\n  const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n  const isControlled = checked !== undefined;\r\n  const [internal, setInternal] = React.useState(defaultChecked ?? false);\r\n\r\n  const currentChecked = isControlled ? checked : internal;\r\n\r\n  // Apply indeterminate visual state\r\n  useEffect(() => {\r\n    if (inputRef.current) {\r\n      inputRef.current.indeterminate = indeterminate;\r\n    }\r\n  }, [indeterminate]);\r\n\r\n  const toggle = () => {\r\n    if (disabled) return;\r\n    const newVal = !currentChecked;\r\n    if (!isControlled) setInternal(newVal);\r\n    onChange?.(newVal);\r\n  };\r\n\r\n  return (\r\n    <label className={`ui-checkbox-root ${className}`}>\r\n      <input\r\n        ref={inputRef}\r\n        type=\"checkbox\"\r\n        className=\"ui-checkbox-input\"\r\n        name={name}\r\n        value={value}\r\n        disabled={disabled}\r\n        checked={currentChecked}\r\n        onChange={toggle}\r\n        data-state={\r\n          indeterminate\r\n            ? 'indeterminate'\r\n            : currentChecked\r\n            ? 'checked'\r\n            : 'unchecked'\r\n        }\r\n      />\r\n\r\n      {/* Visual checkmark */}\r\n      <span className=\"ui-checkbox-check\" aria-hidden=\"true\">\r\n        {indeterminate ? '–' : currentChecked ? '✓' : ''}\r\n      </span>\r\n\r\n      {label && <span className=\"ui-checkbox-label\">{label}</span>}\r\n    </label>\r\n  );\r\n}\r\n"],"names":["Checkbox","checked","defaultChecked","indeterminate","onChange","label","disabled","name","value","className","inputRef","useRef","isControlled","internal","setInternal","React","currentChecked","useEffect","toggle","newVal","jsxs","jsx"],"mappings":";;;AAyBO,SAASA,EAAS;AAAA,EACvB,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAkB;AAChB,QAAMC,IAAWC,EAAgC,IAAI,GAE/CC,IAAeX,MAAY,QAC3B,CAACY,GAAUC,CAAW,IAAIC,EAAM,SAASb,KAAkB,EAAK,GAEhEc,IAAiBJ,IAAeX,IAAUY;AAGhD,EAAAI,EAAU,MAAM;AACd,IAAIP,EAAS,YACXA,EAAS,QAAQ,gBAAgBP;AAAA,EAErC,GAAG,CAACA,CAAa,CAAC;AAElB,QAAMe,IAAS,MAAM;AACnB,QAAIZ,EAAU;AACd,UAAMa,IAAS,CAACH;AAChB,IAAKJ,KAAcE,EAAYK,CAAM,GACrCf,IAAWe,CAAM;AAAA,EACnB;AAEA,SACE,gBAAAC,EAAC,SAAA,EAAM,WAAW,oBAAoBX,CAAS,IAC7C,UAAA;AAAA,IAAA,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKX;AAAA,QACL,MAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAAH;AAAA,QACA,OAAAC;AAAA,QACA,UAAAF;AAAA,QACA,SAASU;AAAA,QACT,UAAUE;AAAA,QACV,cACEf,IACI,kBACAa,IACA,YACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAKR,gBAAAK,EAAC,QAAA,EAAK,WAAU,qBAAoB,eAAY,QAC7C,UAAAlB,IAAgB,MAAMa,IAAiB,MAAM,GAAA,CAChD;AAAA,IAECX,KAAS,gBAAAgB,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAhB,EAAA,CAAM;AAAA,EAAA,GACvD;AAEJ;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef, useState, forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Checkbox.css';\n\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /** If provided, makes the checkbox a controlled component. */\n  checked?: boolean; \n  /** If provided, sets the initial state of an uncontrolled checkbox. */\n  defaultChecked?: boolean;\n  /** Sets the visual state to mixed/indeterminate. This is visually distinct from checked/unchecked. */\n  indeterminate?: boolean;\n  /** Callback fired when the state changes. */\n  onChange?: (checked: boolean) => void;\n  label?: React.ReactNode;\n}\n\n/**\n * Checkbox Component\n * * A control that allows the user to toggle between checked and not checked.\n * Architecture Note: This component seamlessly handles both controlled and uncontrolled \n * paradigms, and directly manipulates the DOM node to support the HTML5 'indeterminate' property.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      checked,\n      defaultChecked,\n      indeterminate = false,\n      onChange,\n      label,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // 1. Internal Ref to handle the indeterminate DOM property\n    // The 'indeterminate' state does not exist as an HTML attribute, it only exists\n    // as a property on the DOM node itself, so we must access it via ref.\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    useEffect(() => {\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLInputElement | null>).current = internalRef.current;\n      }\n    }, [ref]);\n\n    // 2. Controlled vs Uncontrolled Logic\n    const isControlled = checked !== undefined;\n    const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n    const currentChecked = isControlled ? checked : internalChecked;\n\n    // 3. Sync Indeterminate state to the actual DOM element\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      const newVal = e.target.checked;\n      \n      // Only update internal state if the component is uncontrolled\n      if (!isControlled) setInternalChecked(newVal);\n      \n      onChange?.(newVal);\n    };\n\n    return (\n      <label \n        className={cn(\n          \"nui-checkbox\", \n          disabled && \"nui-checkbox--disabled\", \n          className\n        )}\n      >\n        <div className=\"nui-checkbox__wrapper\">\n          {/* Hidden but accessible input */}\n          <input\n            ref={internalRef}\n            type=\"checkbox\"\n            className=\"nui-checkbox__input\"\n            disabled={disabled}\n            checked={currentChecked}\n            onChange={handleChange}\n            // aria-checked explicitly supports the 'mixed' state for screen readers\n            aria-checked={indeterminate ? 'mixed' : currentChecked}\n            data-state={\n              indeterminate ? 'indeterminate' : currentChecked ? 'checked' : 'unchecked'\n            }\n            {...props}\n          />\n          \n          {/* Visual Indicator (Overlays the input) */}\n          <span className=\"nui-checkbox__indicator\" aria-hidden=\"true\">\n            {indeterminate ? (\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n              </svg>\n            ) : currentChecked ? (\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            ) : null}\n          </span>\n        </div>\n\n        {/* Label */}\n        {label && <span className=\"nui-checkbox__label\">{label}</span>}\n      </label>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"names":["Checkbox","forwardRef","checked","defaultChecked","indeterminate","onChange","label","disabled","className","props","ref","internalRef","useRef","useEffect","isControlled","internalChecked","setInternalChecked","useState","currentChecked","handleChange","e","newVal","jsxs","cn","jsx"],"mappings":";;;;AAwBO,MAAMA,IAAWC;AAAA,EACtB,CACE;AAAA,IACE,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAcC,EAAyB,IAAI;AAGjD,IAAAC,EAAU,MAAM;AACd,MAAI,OAAOH,KAAQ,aACjBA,EAAIC,EAAY,OAAO,IACdD,MACRA,EAAwD,UAAUC,EAAY;AAAA,IAEnF,GAAG,CAACD,CAAG,CAAC;AAGR,UAAMI,IAAeZ,MAAY,QAC3B,CAACa,GAAiBC,CAAkB,IAAIC,EAASd,KAAkB,EAAK,GACxEe,IAAiBJ,IAAeZ,IAAUa;AAGhD,IAAAF,EAAU,MAAM;AACd,MAAIF,EAAY,YACdA,EAAY,QAAQ,gBAAgBP;AAAA,IAExC,GAAG,CAACA,CAAa,CAAC;AAElB,UAAMe,IAAe,CAACC,MAA2C;AAC/D,UAAIb,EAAU;AACd,YAAMc,IAASD,EAAE,OAAO;AAGxB,MAAKN,KAAcE,EAAmBK,CAAM,GAE5ChB,IAAWgB,CAAM;AAAA,IACnB;AAEA,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAhB,KAAY;AAAA,UACZC;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAc,EAAC,OAAA,EAAI,WAAU,yBAEb,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAKb;AAAA,gBACL,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,UAAAJ;AAAA,gBACA,SAASW;AAAA,gBACT,UAAUC;AAAA,gBAEV,gBAAcf,IAAgB,UAAUc;AAAA,gBACxC,cACEd,IAAgB,kBAAkBc,IAAiB,YAAY;AAAA,gBAEhE,GAAGT;AAAA,cAAA;AAAA,YAAA;AAAA,YAIN,gBAAAe,EAAC,QAAA,EAAK,WAAU,2BAA0B,eAAY,QACnD,UAAApB,IACC,gBAAAoB,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACrI,UAAA,gBAAAA,EAAC,QAAA,EAAK,IAAG,KAAI,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK,EAAA,CACvC,IACEN,IACF,gBAAAM,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACrI,UAAA,gBAAAA,EAAC,YAAA,EAAS,QAAO,iBAAA,CAAiB,EAAA,CACpC,IACE,KAAA,CACN;AAAA,UAAA,GACF;AAAA,UAGClB,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAlB,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7D;AACF;AAEAN,EAAS,cAAc;"}

package/dist/components/chip/Chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css           */function p({children:n,removable:c=!1,selected:r=!1,iconLeft:s,iconRight:a,size:o="md",onRemove:t,onSelect:l,className:u=""}){return e.jsxs("div",{className:["ui-chip",`ui-chip--${o}`,r?"selected":"",u].filter(Boolean).join(" "),role:"button",tabIndex:0,onClick:l,onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&l?.()},children:[s&&e.jsx("span",{className:"ui-chip-icon-left",children:s}),e.jsx("span",{className:"ui-chip-label",children:n}),a&&e.jsx("span",{className:"ui-chip-icon-right",children:a}),c&&e.jsx("button",{className:"ui-chip-remove","aria-label":"Remove",onClick:i=>{i.stopPropagation(),t?.()},children:"×"})]})}exports.Chip=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),f=require("react");;/* empty css           */const b=require("../../utils/cn/cn.cjs"),d=f.forwardRef(({children:p,removable:u=!1,selected:r=!1,iconLeft:t,iconRight:o,size:h="md",onRemove:x,onSelect:a,className:v,onClick:s,onKeyDown:c,...y},j)=>{const l=e=>{a?.(),e.type==="click"&&s&&s(e)},m=e=>{c&&c(e),(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),l(e))},n=!!(a||s);return i.jsxs("div",{ref:j,className:b.cn("nui-chip",`nui-chip--${h}`,r&&"nui-chip--selected",n&&"nui-chip--interactive",v),role:n?"button":"generic",tabIndex:n?0:void 0,"aria-pressed":n?r:void 0,onClick:n?l:void 0,onKeyDown:n?m:void 0,...y,children:[t&&i.jsx("span",{className:"nui-chip__icon -left",children:t}),i.jsx("span",{className:"nui-chip__label",children:p}),o&&i.jsx("span",{className:"nui-chip__icon -right",children:o}),u&&i.jsx("button",{type:"button",className:"nui-chip__remove","aria-label":"Remove",onClick:e=>{e.stopPropagation(),x?.()},onKeyDown:e=>e.stopPropagation(),children:i.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[i.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),i.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})});d.displayName="Chip";exports.Chip=d;
 //# sourceMappingURL=Chip.cjs.map

package/dist/components/chip/Chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["/**\r\n * Chip.tsx — FINAL VERSION\r\n * -------------------------\r\n * Features:\r\n * - Removable (optional)\r\n * - Selectable (optional)\r\n * - Sizes: sm, md\r\n * - Icons (left/right)\r\n * - Theme-aware\r\n */\r\n\r\nimport React from 'react';\r\nimport './Chip.css';\r\n\r\nexport interface ChipProps {\r\n  children: React.ReactNode;\r\n\r\n  /** Removable chip — shows close button */\r\n  removable?: boolean;\r\n\r\n  /** Selected chip state */\r\n  selected?: boolean;\r\n\r\n  /** Left icon element */\r\n  iconLeft?: React.ReactNode;\r\n\r\n  /** Right icon element */\r\n  iconRight?: React.ReactNode;\r\n\r\n  /** Chip size */\r\n  size?: 'sm' | 'md';\r\n\r\n  /** Remove handler */\r\n  onRemove?: () => void;\r\n\r\n  /** Select handler */\r\n  onSelect?: () => void;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function Chip({\r\n  children,\r\n  removable = false,\r\n  selected = false,\r\n  iconLeft,\r\n  iconRight,\r\n  size = 'md',\r\n  onRemove,\r\n  onSelect,\r\n  className = '',\r\n}: ChipProps) {\r\n  return (\r\n    <div\r\n      className={[\r\n        'ui-chip',\r\n        `ui-chip--${size}`,\r\n        selected ? 'selected' : '',\r\n        className,\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ')}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onClick={onSelect}\r\n      onKeyDown={(e) => {\r\n        if (e.key === 'Enter' || e.key === ' ') onSelect?.();\r\n      }}\r\n    >\r\n      {iconLeft && <span className=\"ui-chip-icon-left\">{iconLeft}</span>}\r\n\r\n      <span className=\"ui-chip-label\">{children}</span>\r\n\r\n      {iconRight && <span className=\"ui-chip-icon-right\">{iconRight}</span>}\r\n\r\n      {removable && (\r\n        <button\r\n          className=\"ui-chip-remove\"\r\n          aria-label=\"Remove\"\r\n          onClick={(e) => {\r\n            e.stopPropagation(); // prevent select\r\n            onRemove?.();\r\n          }}\r\n        >\r\n          ×\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Chip","children","removable","selected","iconLeft","iconRight","size","onRemove","onSelect","className","jsxs","e","jsx"],"mappings":"+IAyCO,SAASA,EAAK,CACnB,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAAc,CACZ,OACEC,EAAAA,KAAC,MAAA,CACC,UAAW,CACT,UACA,YAAYJ,CAAI,GAChBH,EAAW,WAAa,GACxBM,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,KAAK,SACL,SAAU,EACV,QAASD,EACT,UAAYG,GAAM,EACZA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,MAAKH,IAAA,CAC1C,EAEC,SAAA,CAAAJ,GAAYQ,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAqB,SAAAR,EAAS,EAE3DQ,EAAAA,IAAC,OAAA,CAAK,UAAU,gBAAiB,SAAAX,CAAA,CAAS,EAEzCI,GAAaO,EAAAA,IAAC,OAAA,CAAK,UAAU,qBAAsB,SAAAP,EAAU,EAE7DH,GACCU,EAAAA,IAAC,SAAA,CACC,UAAU,iBACV,aAAW,SACX,QAAUD,GAAM,CACdA,EAAE,gBAAA,EACFJ,IAAA,CACF,EACD,SAAA,GAAA,CAAA,CAED,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Chip.cjs","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Chip.css';\n\nexport type ChipSize = 'sm' | 'md';\n\nexport interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  children: React.ReactNode;\n  /** If true, renders a trailing 'X' button that triggers onRemove */\n  removable?: boolean;\n  /** Controls the visual and ARIA active state of the chip */\n  selected?: boolean;\n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n  size?: ChipSize;\n  /** Callback fired when the 'X' button is clicked */\n  onRemove?: () => void;\n  /** Callback fired when the main body of the chip is clicked or activated via keyboard */\n  onSelect?: () => void;\n}\n\n/**\n * Chip Component\n * * A compact element representing an input, attribute, or action.\n * Architecture Note: Dynamically switches between a static visual element and an \n * interactive button role depending on the presence of `onSelect` or `onClick`.\n */\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      children,\n      removable = false,\n      selected = false,\n      iconLeft,\n      iconRight,\n      size = 'md',\n      onRemove,\n      onSelect,\n      className,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    \n    // * Interaction Handling: \n    // We unify both the custom onSelect and the standard HTML onClick \n    // so consumers can use either without breaking the component's internal logic.\n    const handleSelect = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n      onSelect?.();\n      if (e.type === 'click' && onClick) {\n        onClick(e as React.MouseEvent<HTMLDivElement>);\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e);\n      \n      // Trigger select on Enter or Space for keyboard accessibility\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault(); // Prevent page scroll on Space\n        handleSelect(e);\n      }\n    };\n\n    const isInteractive = Boolean(onSelect || onClick);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'nui-chip',\n          `nui-chip--${size}`,\n          selected && 'nui-chip--selected',\n          isInteractive && 'nui-chip--interactive',\n          className\n        )}\n        // Assign button role only if it actually does something\n        role={isInteractive ? 'button' : 'generic'}\n        tabIndex={isInteractive ? 0 : undefined}\n        aria-pressed={isInteractive ? selected : undefined}\n        onClick={isInteractive ? handleSelect : undefined}\n        onKeyDown={isInteractive ? handleKeyDown : undefined}\n        {...props}\n      >\n        {iconLeft && <span className=\"nui-chip__icon -left\">{iconLeft}</span>}\n\n        <span className=\"nui-chip__label\">{children}</span>\n\n        {iconRight && <span className=\"nui-chip__icon -right\">{iconRight}</span>}\n\n        {removable && (\n          <button\n            type=\"button\"\n            className=\"nui-chip__remove\"\n            aria-label=\"Remove\"\n            onClick={(e) => {\n              // * Event Propagation: \n              // Stop click from bubbling up to the parent <div> and triggering `onSelect`\n              e.stopPropagation(); \n              onRemove?.();\n            }}\n            onKeyDown={(e) => e.stopPropagation()} \n          >\n            {/* Crisp X SVG */}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nChip.displayName = 'Chip';"],"names":["Chip","forwardRef","children","removable","selected","iconLeft","iconRight","size","onRemove","onSelect","className","onClick","onKeyDown","props","ref","handleSelect","handleKeyDown","isInteractive","jsxs","cn","jsx"],"mappings":"2MA2BaA,EAAOC,EAAAA,WAClB,CACE,CACE,SAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,GACX,SAAAC,EACA,UAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CAKH,MAAMC,EAAgB,GAA8E,CAClGN,IAAA,EACI,EAAE,OAAS,SAAWE,GACxBA,EAAQ,CAAqC,CAEjD,EAEMK,EAAiB,GAA2C,CAC5DJ,KAAqB,CAAC,GAGtB,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,eAAA,EACFG,EAAa,CAAC,EAElB,EAEME,EAAgB,GAAQR,GAAYE,GAE1C,OACEO,EAAAA,KAAC,MAAA,CACC,IAAAJ,EACA,UAAWK,EAAAA,GACT,WACA,aAAaZ,CAAI,GACjBH,GAAY,qBACZa,GAAiB,wBACjBP,CAAA,EAGF,KAAMO,EAAgB,SAAW,UACjC,SAAUA,EAAgB,EAAI,OAC9B,eAAcA,EAAgBb,EAAW,OACzC,QAASa,EAAgBF,EAAe,OACxC,UAAWE,EAAgBD,EAAgB,OAC1C,GAAGH,EAEH,SAAA,CAAAR,GAAYe,EAAAA,IAAC,OAAA,CAAK,UAAU,uBAAwB,SAAAf,EAAS,EAE9De,EAAAA,IAAC,OAAA,CAAK,UAAU,kBAAmB,SAAAlB,CAAA,CAAS,EAE3CI,GAAac,EAAAA,IAAC,OAAA,CAAK,UAAU,wBAAyB,SAAAd,EAAU,EAEhEH,GACCiB,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,mBACV,aAAW,SACX,QAAU,GAAM,CAGd,EAAE,gBAAA,EACFZ,IAAA,CACF,EACA,UAAY,GAAM,EAAE,gBAAA,EAGpB,gBAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,MAAM,cAAc,QAAQ,eAAe,QAAQ,cAAY,OAC3J,SAAA,CAAAY,EAAAA,IAAC,OAAA,CAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAA,CAAK,EACpCA,EAAAA,IAAC,QAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAA,CAAK,CAAA,CAAA,CACtC,CAAA,CAAA,CACF,CAAA,CAAA,CAIR,CACF,EAEApB,EAAK,YAAc"}

package/dist/components/chip/Chip.js

@@ -1,51 +1,71 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { forwardRef as _ } from "react";
 /* empty css         */
-function d({
-  children: s,
-  removable: o = !1,
-  selected: c = !1,
-  iconLeft: a,
-  iconRight: l,
-  size: r = "md",
-  onRemove: p,
-  onSelect: n,
-  className: t = ""
-}) {
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: [
-        "ui-chip",
-        `ui-chip--${r}`,
-        c ? "selected" : "",
-        t
-      ].filter(Boolean).join(" "),
-      role: "button",
-      tabIndex: 0,
-      onClick: n,
-      onKeyDown: (i) => {
-        (i.key === "Enter" || i.key === " ") && n?.();
-      },
-      children: [
-        a && /* @__PURE__ */ e("span", { className: "ui-chip-icon-left", children: a }),
-        /* @__PURE__ */ e("span", { className: "ui-chip-label", children: s }),
-        l && /* @__PURE__ */ e("span", { className: "ui-chip-icon-right", children: l }),
-        o && /* @__PURE__ */ e(
-          "button",
-          {
-            className: "ui-chip-remove",
-            "aria-label": "Remove",
-            onClick: (i) => {
-              i.stopPropagation(), p?.();
-            },
-            children: "×"
-          }
-        )
-      ]
-    }
-  );
-}
+import { cn as k } from "../../utils/cn/cn.js";
+const b = _(
+  ({
+    children: d,
+    removable: h = !1,
+    selected: r = !1,
+    iconLeft: t,
+    iconRight: a,
+    size: u = "md",
+    onRemove: m,
+    onSelect: s,
+    className: f,
+    onClick: o,
+    onKeyDown: c,
+    ...v
+  }, y) => {
+    const l = (i) => {
+      s?.(), i.type === "click" && o && o(i);
+    }, x = (i) => {
+      c && c(i), (i.key === "Enter" || i.key === " ") && (i.preventDefault(), l(i));
+    }, e = !!(s || o);
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: y,
+        className: k(
+          "nui-chip",
+          `nui-chip--${u}`,
+          r && "nui-chip--selected",
+          e && "nui-chip--interactive",
+          f
+        ),
+        role: e ? "button" : "generic",
+        tabIndex: e ? 0 : void 0,
+        "aria-pressed": e ? r : void 0,
+        onClick: e ? l : void 0,
+        onKeyDown: e ? x : void 0,
+        ...v,
+        children: [
+          t && /* @__PURE__ */ n("span", { className: "nui-chip__icon -left", children: t }),
+          /* @__PURE__ */ n("span", { className: "nui-chip__label", children: d }),
+          a && /* @__PURE__ */ n("span", { className: "nui-chip__icon -right", children: a }),
+          h && /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: "nui-chip__remove",
+              "aria-label": "Remove",
+              onClick: (i) => {
+                i.stopPropagation(), m?.();
+              },
+              onKeyDown: (i) => i.stopPropagation(),
+              children: /* @__PURE__ */ p("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ n("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ n("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+b.displayName = "Chip";
 export {
-  d as Chip
+  b as Chip
 };
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["/**\r\n * Chip.tsx — FINAL VERSION\r\n * -------------------------\r\n * Features:\r\n * - Removable (optional)\r\n * - Selectable (optional)\r\n * - Sizes: sm, md\r\n * - Icons (left/right)\r\n * - Theme-aware\r\n */\r\n\r\nimport React from 'react';\r\nimport './Chip.css';\r\n\r\nexport interface ChipProps {\r\n  children: React.ReactNode;\r\n\r\n  /** Removable chip — shows close button */\r\n  removable?: boolean;\r\n\r\n  /** Selected chip state */\r\n  selected?: boolean;\r\n\r\n  /** Left icon element */\r\n  iconLeft?: React.ReactNode;\r\n\r\n  /** Right icon element */\r\n  iconRight?: React.ReactNode;\r\n\r\n  /** Chip size */\r\n  size?: 'sm' | 'md';\r\n\r\n  /** Remove handler */\r\n  onRemove?: () => void;\r\n\r\n  /** Select handler */\r\n  onSelect?: () => void;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function Chip({\r\n  children,\r\n  removable = false,\r\n  selected = false,\r\n  iconLeft,\r\n  iconRight,\r\n  size = 'md',\r\n  onRemove,\r\n  onSelect,\r\n  className = '',\r\n}: ChipProps) {\r\n  return (\r\n    <div\r\n      className={[\r\n        'ui-chip',\r\n        `ui-chip--${size}`,\r\n        selected ? 'selected' : '',\r\n        className,\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ')}\r\n      role=\"button\"\r\n      tabIndex={0}\r\n      onClick={onSelect}\r\n      onKeyDown={(e) => {\r\n        if (e.key === 'Enter' || e.key === ' ') onSelect?.();\r\n      }}\r\n    >\r\n      {iconLeft && <span className=\"ui-chip-icon-left\">{iconLeft}</span>}\r\n\r\n      <span className=\"ui-chip-label\">{children}</span>\r\n\r\n      {iconRight && <span className=\"ui-chip-icon-right\">{iconRight}</span>}\r\n\r\n      {removable && (\r\n        <button\r\n          className=\"ui-chip-remove\"\r\n          aria-label=\"Remove\"\r\n          onClick={(e) => {\r\n            e.stopPropagation(); // prevent select\r\n            onRemove?.();\r\n          }}\r\n        >\r\n          ×\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Chip","children","removable","selected","iconLeft","iconRight","size","onRemove","onSelect","className","jsxs","e","jsx"],"mappings":";;AAyCO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAc;AACZ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAYJ,CAAI;AAAA,QAChBH,IAAW,aAAa;AAAA,QACxBM;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAASD;AAAA,MACT,WAAW,CAACG,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,QAAKH,IAAA;AAAA,MAC1C;AAAA,MAEC,UAAA;AAAA,QAAAJ,KAAY,gBAAAQ,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAR,GAAS;AAAA,QAE3D,gBAAAQ,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAX,EAAA,CAAS;AAAA,QAEzCI,KAAa,gBAAAO,EAAC,QAAA,EAAK,WAAU,sBAAsB,UAAAP,GAAU;AAAA,QAE7DH,KACC,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YACX,SAAS,CAACD,MAAM;AACd,cAAAA,EAAE,gBAAA,GACFJ,IAAA;AAAA,YACF;AAAA,YACD,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Chip.css';\n\nexport type ChipSize = 'sm' | 'md';\n\nexport interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  children: React.ReactNode;\n  /** If true, renders a trailing 'X' button that triggers onRemove */\n  removable?: boolean;\n  /** Controls the visual and ARIA active state of the chip */\n  selected?: boolean;\n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n  size?: ChipSize;\n  /** Callback fired when the 'X' button is clicked */\n  onRemove?: () => void;\n  /** Callback fired when the main body of the chip is clicked or activated via keyboard */\n  onSelect?: () => void;\n}\n\n/**\n * Chip Component\n * * A compact element representing an input, attribute, or action.\n * Architecture Note: Dynamically switches between a static visual element and an \n * interactive button role depending on the presence of `onSelect` or `onClick`.\n */\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      children,\n      removable = false,\n      selected = false,\n      iconLeft,\n      iconRight,\n      size = 'md',\n      onRemove,\n      onSelect,\n      className,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    \n    // * Interaction Handling: \n    // We unify both the custom onSelect and the standard HTML onClick \n    // so consumers can use either without breaking the component's internal logic.\n    const handleSelect = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n      onSelect?.();\n      if (e.type === 'click' && onClick) {\n        onClick(e as React.MouseEvent<HTMLDivElement>);\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (onKeyDown) onKeyDown(e);\n      \n      // Trigger select on Enter or Space for keyboard accessibility\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault(); // Prevent page scroll on Space\n        handleSelect(e);\n      }\n    };\n\n    const isInteractive = Boolean(onSelect || onClick);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'nui-chip',\n          `nui-chip--${size}`,\n          selected && 'nui-chip--selected',\n          isInteractive && 'nui-chip--interactive',\n          className\n        )}\n        // Assign button role only if it actually does something\n        role={isInteractive ? 'button' : 'generic'}\n        tabIndex={isInteractive ? 0 : undefined}\n        aria-pressed={isInteractive ? selected : undefined}\n        onClick={isInteractive ? handleSelect : undefined}\n        onKeyDown={isInteractive ? handleKeyDown : undefined}\n        {...props}\n      >\n        {iconLeft && <span className=\"nui-chip__icon -left\">{iconLeft}</span>}\n\n        <span className=\"nui-chip__label\">{children}</span>\n\n        {iconRight && <span className=\"nui-chip__icon -right\">{iconRight}</span>}\n\n        {removable && (\n          <button\n            type=\"button\"\n            className=\"nui-chip__remove\"\n            aria-label=\"Remove\"\n            onClick={(e) => {\n              // * Event Propagation: \n              // Stop click from bubbling up to the parent <div> and triggering `onSelect`\n              e.stopPropagation(); \n              onRemove?.();\n            }}\n            onKeyDown={(e) => e.stopPropagation()} \n          >\n            {/* Crisp X SVG */}\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nChip.displayName = 'Chip';"],"names":["Chip","forwardRef","children","removable","selected","iconLeft","iconRight","size","onRemove","onSelect","className","onClick","onKeyDown","props","ref","handleSelect","e","handleKeyDown","isInteractive","jsxs","cn","jsx"],"mappings":";;;;AA2BO,MAAMA,IAAOC;AAAA,EAClB,CACE;AAAA,IACE,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAKH,UAAMC,IAAe,CAACC,MAA8E;AAClG,MAAAP,IAAA,GACIO,EAAE,SAAS,WAAWL,KACxBA,EAAQK,CAAqC;AAAA,IAEjD,GAEMC,IAAgB,CAACD,MAA2C;AAChE,MAAIJ,OAAqBI,CAAC,IAGtBA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFD,EAAaC,CAAC;AAAA,IAElB,GAEME,IAAgB,GAAQT,KAAYE;AAE1C,WACE,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAL;AAAA,QACA,WAAWM;AAAA,UACT;AAAA,UACA,aAAab,CAAI;AAAA,UACjBH,KAAY;AAAA,UACZc,KAAiB;AAAA,UACjBR;AAAA,QAAA;AAAA,QAGF,MAAMQ,IAAgB,WAAW;AAAA,QACjC,UAAUA,IAAgB,IAAI;AAAA,QAC9B,gBAAcA,IAAgBd,IAAW;AAAA,QACzC,SAASc,IAAgBH,IAAe;AAAA,QACxC,WAAWG,IAAgBD,IAAgB;AAAA,QAC1C,GAAGJ;AAAA,QAEH,UAAA;AAAA,UAAAR,KAAY,gBAAAgB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAhB,GAAS;AAAA,UAE9D,gBAAAgB,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAAnB,EAAA,CAAS;AAAA,UAE3CI,KAAa,gBAAAe,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAf,GAAU;AAAA,UAEhEH,KACC,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS,CAACL,MAAM;AAGd,gBAAAA,EAAE,gBAAA,GACFR,IAAA;AAAA,cACF;AAAA,cACA,WAAW,CAACQ,MAAMA,EAAE,gBAAA;AAAA,cAGpB,4BAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QAC3J,UAAA;AAAA,gBAAA,gBAAAK,EAAC,QAAA,EAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,gBACpC,gBAAAA,EAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,cAAA,EAAA,CACtC;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEArB,EAAK,cAAc;"}

package/dist/components/combobox/Combobox.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react");;/* empty css               */const O=require("../../utils/generateid/generateId.cjs"),$=require("../../utils/onclickoutside/onClickOutside.cjs");function B({options:n,value:c,defaultValue:k,onChange:C,placeholder:S="Select...",disabled:r=!1,className:q="",emptyMessage:R="No results found",filter:j,leftIcon:f,rightIcon:m,renderOption:w,renderOptionIcon:N}){const x=c!==void 0,[d,u]=s.useState(()=>x&&c?n.find(o=>o.value===c)?.label??"":k?n.find(o=>o.value===k)?.label??"":""),[t,D]=s.useState(!1),[h,v]=s.useState(-1),g=s.useRef(null),y=s.useRef(O.generateId("combobox-list")).current,b=n.filter(e=>j?j(d,e):e.label.toLowerCase().includes(d.toLowerCase())),L=s.useCallback(e=>{C?.(e)},[C]),i=s.useCallback(()=>{r||D(!0)},[r]),l=s.useCallback(()=>{D(!1),v(-1)},[]);s.useEffect(()=>{if(t)return $.onClickOutside(g,l)},[t,l]),s.useEffect(()=>{if(x&&c!==void 0){const e=n.find(o=>o.value===c);u(e?.label||"")}},[x,c,n]);const E=e=>{if(!r)switch(e.key){case"ArrowDown":e.preventDefault(),t||i(),v(o=>Math.min(b.length-1,o+1));break;case"ArrowUp":e.preventDefault(),t||i(),v(o=>Math.max(0,o-1));break;case"Enter":if(t&&h>=0){const o=b[h];u(o.label),L(o.value),l()}break;case"Escape":t&&(e.preventDefault(),l());break}},M=e=>{u(e.label),L(e.value),l()};return a.jsxs("div",{ref:g,className:`ui-combobox ${q}`,children:[a.jsxs("div",{className:"ui-combobox-input-wrapper",children:[f&&a.jsx("span",{className:"ui-combobox-left-icon",children:f}),a.jsx("input",{className:["ui-combobox-input",f&&"has-left-icon",m&&"has-right-icon"].filter(Boolean).join(" "),role:"combobox","aria-expanded":t,"aria-controls":y,placeholder:S,disabled:r,value:d,onFocus:i,onClick:i,onChange:e=>{u(e.target.value),t||i()},onKeyDown:E}),m&&a.jsx("span",{className:"ui-combobox-right-icon",children:m})]}),t&&a.jsx("div",{id:y,role:"listbox",className:"ui-combobox-listbox",children:b.length===0?a.jsx("div",{className:"ui-combobox-empty",children:R}):b.map((e,o)=>{const p=o===h;return a.jsxs("div",{role:"option","aria-selected":p,className:`ui-combobox-option ${p?"active":""}`,onMouseDown:A=>A.preventDefault(),onClick:()=>M(e),children:[N&&a.jsx("span",{className:"ui-combobox-option-icon",children:N(e)}),w?w(e,p):e.label]},e.value)})})]})}exports.Combobox=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react");;/* empty css               */const L=require("../../utils/cn/cn.cjs"),R=t.forwardRef(({options:a,value:c,defaultValue:d,onChange:$,placeholder:q="Select...",disabled:m=!1,className:A,emptyMessage:M="No results found",filter:N,leftIcon:C,rightIcon:w,renderOption:y,renderOptionIcon:D,...F},l)=>{const u=c!==void 0,f=`${t.useId()}-listbox`,[x,v]=t.useState(()=>u&&c?a.find(e=>e.value===c)?.label??"":d?a.find(e=>e.value===d)?.label??"":""),[n,E]=t.useState(!1),[i,_]=t.useState(-1),k=t.useRef(null),I=t.useCallback(e=>{k.current=e,typeof l=="function"?l(e):l&&(l.current=e)},[l]),b=a.filter(e=>N?N(x,e):e.label.toLowerCase().includes(x.toLowerCase())),r=t.useCallback(()=>{m||E(!0)},[m]),p=t.useCallback(()=>{E(!1),_(-1)},[]),j=t.useCallback(()=>{const e=u?c:d,o=a.find(h=>h.value===e);v(o?.label||"")},[u,c,d,a]);t.useEffect(()=>{if(!n)return;const e=o=>{k.current&&!k.current.contains(o.target)&&(p(),j())};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}},[n,p,j]),t.useEffect(()=>{if(u&&c!==void 0){const e=a.find(o=>o.value===c);v(e?.label||"")}},[u,c,a]);const K=e=>{if(!m)switch(e.key){case"ArrowDown":e.preventDefault(),n||r(),_(o=>Math.min(b.length-1,o+1));break;case"ArrowUp":e.preventDefault(),n||r(),_(o=>Math.max(0,o-1));break;case"Enter":n&&i>=0&&b[i]?(e.preventDefault(),S(b[i])):n||r();break;case"Escape":n&&(e.preventDefault(),p(),j());break}},S=e=>{v(e.label),$?.(e.value),p()};return s.jsxs("div",{ref:I,className:L.cn("nui-combobox",A),...F,children:[s.jsxs("div",{className:"nui-combobox__wrapper",children:[C&&s.jsx("span",{className:"nui-combobox__icon -left",children:C}),s.jsx("input",{className:L.cn("nui-combobox__input",!!C&&"nui-combobox__input--has-left",!!w&&"nui-combobox__input--has-right"),role:"combobox","aria-expanded":n,"aria-controls":f,"aria-autocomplete":"list","aria-activedescendant":n&&i>=0?`${f}-option-${i}`:void 0,placeholder:q,disabled:m,value:x,onFocus:r,onClick:r,onChange:e=>{v(e.target.value),n||r(),_(-1)},onKeyDown:K}),w&&s.jsx("span",{className:"nui-combobox__icon -right",children:w})]}),n&&s.jsx("div",{id:f,role:"listbox",className:"nui-combobox__listbox",children:b.length===0?s.jsx("div",{className:"nui-combobox__empty",children:M}):b.map((e,o)=>{const h=o===i,g=e.label===x;return s.jsxs("div",{id:`${f}-option-${o}`,role:"option","aria-selected":g,className:L.cn("nui-combobox__option",h&&"nui-combobox__option--active",g&&"nui-combobox__option--selected"),onMouseDown:O=>O.preventDefault(),onClick:()=>S(e),children:[D&&s.jsx("span",{className:"nui-combobox__option-icon",children:D(e)}),y?y(e,h):e.label]},e.value)})})]})});R.displayName="Combobox";exports.Combobox=R;
 //# sourceMappingURL=Combobox.cjs.map

package/dist/components/combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["/**\r\n * Combobox.tsx\r\n * Fully WCAG-compliant Combobox integrated with your existing utilities.\r\n */\r\n\r\n/**\r\n * Combobox.tsx\r\n * Now includes:\r\n *  - leftIcon (input)\r\n *  - rightIcon (input)\r\n *  - renderOptionIcon (listbox)\r\n */\r\n/**\r\n * Combobox.tsx\r\n * Fully WCAG-Compliant Combobox with:\r\n * - Icons (input + option)\r\n * - Value→Label mapping fixed\r\n * - Keyboard navigation\r\n * - Click outside to close\r\n * - Controlled/uncontrolled\r\n */\r\n\r\nimport React, {\r\n  useState,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  KeyboardEvent,\r\n} from 'react';\r\n\r\nimport './Combobox.css';\r\n\r\n// USING YOUR EXISTING UTILS\r\nimport { onClickOutside, generateId } from '../../utils/index';\r\n\r\nexport interface ComboboxOption {\r\n  label: string;\r\n  value: string;\r\n  icon?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxProps {\r\n  options: ComboboxOption[];\r\n\r\n  value?: string;\r\n  defaultValue?: string;\r\n  onChange?: (value: string) => void;\r\n\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  emptyMessage?: string;\r\n\r\n  filter?: (input: string, option: ComboboxOption) => boolean;\r\n\r\n  leftIcon?: React.ReactNode;\r\n  rightIcon?: React.ReactNode;\r\n\r\n  renderOption?: (option: ComboboxOption, active: boolean) => React.ReactNode;\r\n  renderOptionIcon?: (option: ComboboxOption) => React.ReactNode;\r\n}\r\n\r\nexport function Combobox({\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  placeholder = 'Select...',\r\n  disabled = false,\r\n  className = '',\r\n  emptyMessage = 'No results found',\r\n  filter,\r\n  leftIcon,\r\n  rightIcon,\r\n  renderOption,\r\n  renderOptionIcon,\r\n}: ComboboxProps) {\r\n  const isControlled = value !== undefined;\r\n\r\n  /**\r\n   * displayLabel = what the user SEEES in input\r\n   * value = actual selected value (sent to parent)\r\n   */\r\n  const [displayLabel, setDisplayLabel] = useState<string>(() => {\r\n    if (isControlled && value) {\r\n      const match = options.find((o) => o.value === value);\r\n      return match?.label ?? '';\r\n    }\r\n    if (defaultValue) {\r\n      const match = options.find((o) => o.value === defaultValue);\r\n      return match?.label ?? '';\r\n    }\r\n    return '';\r\n  });\r\n\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\r\n  const listboxId = useRef(generateId('combobox-list')).current;\r\n\r\n  /** Filtered options */\r\n  const filtered = options.filter((opt) =>\r\n    filter\r\n      ? filter(displayLabel, opt)\r\n      : opt.label.toLowerCase().includes(displayLabel.toLowerCase())\r\n  );\r\n\r\n  /** Set parent value */\r\n  const setValue = useCallback(\r\n    (val: string) => {\r\n      onChange?.(val);\r\n    },\r\n    [onChange]\r\n  );\r\n\r\n  const openList = useCallback(() => {\r\n    if (!disabled) setOpen(true);\r\n  }, [disabled]);\r\n\r\n  const closeList = useCallback(() => {\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n  }, []);\r\n\r\n  /** Click outside to close */\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    return onClickOutside(wrapperRef, closeList);\r\n  }, [open, closeList]);\r\n\r\n  /** Sync controlled (value → label) */\r\n  useEffect(() => {\r\n    if (isControlled && value !== undefined) {\r\n      const found = options.find((o) => o.value === value);\r\n      setDisplayLabel(found?.label || '');\r\n    }\r\n  }, [isControlled, value, options]);\r\n\r\n  /** Keyboard behavior */\r\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\r\n    if (disabled) return;\r\n\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n        e.preventDefault();\r\n        if (!open) openList();\r\n        setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));\r\n        break;\r\n\r\n      case 'ArrowUp':\r\n        e.preventDefault();\r\n        if (!open) openList();\r\n        setActiveIndex((i) => Math.max(0, i - 1));\r\n        break;\r\n\r\n      case 'Enter':\r\n        if (open && activeIndex >= 0) {\r\n          const opt = filtered[activeIndex];\r\n          setDisplayLabel(opt.label);\r\n          setValue(opt.value);\r\n          closeList();\r\n        }\r\n        break;\r\n\r\n      case 'Escape':\r\n        if (open) {\r\n          e.preventDefault();\r\n          closeList();\r\n        }\r\n        break;\r\n\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  /** Option click */\r\n  const onOptionClick = (opt: ComboboxOption) => {\r\n    setDisplayLabel(opt.label);\r\n    setValue(opt.value);\r\n    closeList();\r\n  };\r\n\r\n  return (\r\n    <div ref={wrapperRef} className={`ui-combobox ${className}`}>\r\n      {/* Input + Icons */}\r\n      <div className=\"ui-combobox-input-wrapper\">\r\n        {leftIcon && <span className=\"ui-combobox-left-icon\">{leftIcon}</span>}\r\n\r\n        <input\r\n          className={[\r\n            'ui-combobox-input',\r\n            leftIcon && 'has-left-icon',\r\n            rightIcon && 'has-right-icon',\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          role=\"combobox\"\r\n          aria-expanded={open}\r\n          aria-controls={listboxId}\r\n          placeholder={placeholder}\r\n          disabled={disabled}\r\n          value={displayLabel}\r\n          onFocus={openList}\r\n          onClick={openList}\r\n          onChange={(e) => {\r\n            setDisplayLabel(e.target.value);\r\n            if (!open) openList();\r\n          }}\r\n          onKeyDown={onKeyDown}\r\n        />\r\n\r\n        {rightIcon && (\r\n          <span className=\"ui-combobox-right-icon\">{rightIcon}</span>\r\n        )}\r\n      </div>\r\n\r\n      {open && (\r\n        <div id={listboxId} role=\"listbox\" className=\"ui-combobox-listbox\">\r\n          {filtered.length === 0 ? (\r\n            <div className=\"ui-combobox-empty\">{emptyMessage}</div>\r\n          ) : (\r\n            filtered.map((opt, index) => {\r\n              const active = index === activeIndex;\r\n\r\n              return (\r\n                <div\r\n                  key={opt.value}\r\n                  role=\"option\"\r\n                  aria-selected={active}\r\n                  className={`ui-combobox-option ${active ? 'active' : ''}`}\r\n                  onMouseDown={(e) => e.preventDefault()}\r\n                  onClick={() => onOptionClick(opt)}\r\n                >\r\n                  {/* Option icon (if provided through renderOptionIcon) */}\r\n                  {renderOptionIcon && (\r\n                    <span className=\"ui-combobox-option-icon\">\r\n                      {renderOptionIcon(opt)}\r\n                    </span>\r\n                  )}\r\n\r\n                  {renderOption ? renderOption(opt, active) : opt.label}\r\n                </div>\r\n              );\r\n            })\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Combobox","options","value","defaultValue","onChange","placeholder","disabled","className","emptyMessage","filter","leftIcon","rightIcon","renderOption","renderOptionIcon","isControlled","displayLabel","setDisplayLabel","useState","open","setOpen","activeIndex","setActiveIndex","wrapperRef","useRef","listboxId","generateId","filtered","opt","setValue","useCallback","val","openList","closeList","useEffect","onClickOutside","found","onKeyDown","i","onOptionClick","jsxs","jsx","index","active","e"],"mappings":"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"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  KeyboardEvent,\n  useId,\n  forwardRef,\n} from 'react';\nimport { cn } from '../../utils';\nimport './Combobox.css';\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n  icon?: React.ReactNode;\n}\n\nexport interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  options: ComboboxOption[];\n  /** Controlled value of the combobox */\n  value?: string;\n  /** Initial uncontrolled value */\n  defaultValue?: string;\n  /** Callback fired when an option is selected */\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Message displayed when filtering returns zero results */\n  emptyMessage?: string;\n  /** Custom filter function. Defaults to simple substring matching on the label. */\n  filter?: (input: string, option: ComboboxOption) => boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  /** Custom renderer for the entire option row */\n  renderOption?: (option: ComboboxOption, active: boolean) => React.ReactNode;\n  /** Custom renderer strictly for the option's icon */\n  renderOptionIcon?: (option: ComboboxOption) => React.ReactNode;\n}\n\n/**\n * Combobox Component\n * * A text input that provides a dropdown list of options to help users enter data.\n * Architecture Note: Implements the WAI-ARIA Combobox pattern, supporting full keyboard \n * navigation (Arrow keys, Enter, Escape) and click-outside dismissal.\n */\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      defaultValue,\n      onChange,\n      placeholder = 'Select...',\n      disabled = false,\n      className,\n      emptyMessage = 'No results found',\n      filter,\n      leftIcon,\n      rightIcon,\n      renderOption,\n      renderOptionIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const isControlled = value !== undefined;\n    const baseId = useId();\n    const listboxId = `${baseId}-listbox`;\n\n    // * State Management\n    // displayLabel tracks what the user is currently typing OR the label of the selected option.\n    const [displayLabel, setDisplayLabel] = useState<string>(() => {\n      if (isControlled && value) return options.find((o) => o.value === value)?.label ?? '';\n      if (defaultValue) return options.find((o) => o.value === defaultValue)?.label ?? '';\n      return '';\n    });\n    \n    const [open, setOpen] = useState(false);\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n    // Merge forwarded ref with our internal wrapper ref\n    const setRefs = useCallback(\n      (node: HTMLDivElement) => {\n        wrapperRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [ref]\n    );\n\n    // Filter Options based on current input\n    const filtered = options.filter((opt) =>\n      filter\n        ? filter(displayLabel, opt)\n        : opt.label.toLowerCase().includes(displayLabel.toLowerCase())\n    );\n\n    const openList = useCallback(() => {\n      if (!disabled) setOpen(true);\n    }, [disabled]);\n\n    const closeList = useCallback(() => {\n      setOpen(false);\n      setActiveIndex(-1);\n    }, []);\n\n    // * UX Architecture: Revert Label\n    // If a user types \"App\", sees \"Apple\", but clicks away without selecting it,\n    // we must revert the input field back to whatever value was previously confirmed,\n    // rather than leaving \"App\" dangling in the input.\n    const revertLabel = useCallback(() => {\n      const currentValue = isControlled ? value : defaultValue;\n      const match = options.find((o) => o.value === currentValue);\n      setDisplayLabel(match?.label || '');\n    }, [isControlled, value, defaultValue, options]);\n\n    // Click outside to close\n    useEffect(() => {\n      if (!open) return;\n      const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n        if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n          closeList();\n          revertLabel();\n        }\n      };\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n      };\n    }, [open, closeList, revertLabel]);\n\n    // Sync controlled value changes from parent\n    useEffect(() => {\n      if (isControlled && value !== undefined) {\n        const found = options.find((o) => o.value === value);\n        setDisplayLabel(found?.label || '');\n      }\n    }, [isControlled, value, options]);\n\n    // Keyboard Navigation\n    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!open) openList();\n          setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          if (!open) openList();\n          setActiveIndex((i) => Math.max(0, i - 1));\n          break;\n        case 'Enter':\n          if (open && activeIndex >= 0 && filtered[activeIndex]) {\n            e.preventDefault();\n            handleSelect(filtered[activeIndex]);\n          } else if (!open) {\n            openList();\n          }\n          break;\n        case 'Escape':\n          if (open) {\n            e.preventDefault();\n            closeList();\n            revertLabel();\n          }\n          break;\n      }\n    };\n\n    // Selection Handler\n    const handleSelect = (opt: ComboboxOption) => {\n      setDisplayLabel(opt.label);\n      onChange?.(opt.value);\n      closeList();\n    };\n\n    return (\n      <div ref={setRefs} className={cn('nui-combobox', className)} {...props}>\n        {/* INPUT WRAPPER */}\n        <div className=\"nui-combobox__wrapper\">\n          {leftIcon && <span className=\"nui-combobox__icon -left\">{leftIcon}</span>}\n\n          <input\n            className={cn(\n              'nui-combobox__input',\n              !!leftIcon && 'nui-combobox__input--has-left',\n              !!rightIcon && 'nui-combobox__input--has-right'\n            )}\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={\n              open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\n            }\n            placeholder={placeholder}\n            disabled={disabled}\n            value={displayLabel}\n            onFocus={openList}\n            onClick={openList}\n            onChange={(e) => {\n              setDisplayLabel(e.target.value);\n              if (!open) openList();\n              setActiveIndex(-1); // Reset highlight when typing\n            }}\n            onKeyDown={onKeyDown}\n          />\n\n          {rightIcon && <span className=\"nui-combobox__icon -right\">{rightIcon}</span>}\n        </div>\n\n        {/* DROPDOWN LISTBOX */}\n        {open && (\n          <div id={listboxId} role=\"listbox\" className=\"nui-combobox__listbox\">\n            {filtered.length === 0 ? (\n              <div className=\"nui-combobox__empty\">{emptyMessage}</div>\n            ) : (\n              filtered.map((opt, index) => {\n                const isActive = index === activeIndex;\n                const isSelected = opt.label === displayLabel; \n\n                return (\n                  <div\n                    key={opt.value}\n                    id={`${listboxId}-option-${index}`}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    className={cn(\n                      'nui-combobox__option',\n                      isActive && 'nui-combobox__option--active',\n                      isSelected && 'nui-combobox__option--selected'\n                    )}\n                    // Prevent input blur when clicking an option\n                    onMouseDown={(e) => e.preventDefault()} \n                    onClick={() => handleSelect(opt)}\n                  >\n                    {renderOptionIcon && (\n                      <span className=\"nui-combobox__option-icon\">\n                        {renderOptionIcon(opt)}\n                      </span>\n                    )}\n\n                    {renderOption ? renderOption(opt, isActive) : opt.label}\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';"],"names":["Combobox","forwardRef","options","value","defaultValue","onChange","placeholder","disabled","className","emptyMessage","filter","leftIcon","rightIcon","renderOption","renderOptionIcon","props","ref","isControlled","listboxId","useId","displayLabel","setDisplayLabel","useState","o","open","setOpen","activeIndex","setActiveIndex","wrapperRef","useRef","setRefs","useCallback","node","filtered","opt","openList","closeList","revertLabel","currentValue","match","useEffect","handleClickOutside","event","found","onKeyDown","i","handleSelect","jsxs","cn","jsx","index","isActive","isSelected","e"],"mappings":"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"}