@nofinite/nui 1.1.2 → 2.0.2

package/dist/components/radiogroup/RadioGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.cjs","sources":["../../../src/components/radiogroup/RadioGroup.tsx"],"sourcesContent":["/**\r\n * RadioGroup.tsx\r\n * ----------------\r\n * Fully accessible WAI-ARIA radio group.\r\n * - Arrow key navigation\r\n * - Home/End keys\r\n * - Controlled & uncontrolled\r\n * - Disabled support\r\n */\r\n\r\nimport React, { useState, useCallback, useRef } from 'react';\r\nimport './RadioGroup.css';\r\n\r\nexport interface RadioOption {\r\n  label: React.ReactNode;\r\n  value: string;\r\n  disabled?: boolean;\r\n}\r\n\r\ninterface RadioGroupProps {\r\n  options: RadioOption[];\r\n  value?: string; // controlled\r\n  defaultValue?: string; // uncontrolled\r\n  onChange?: (value: string) => void;\r\n  name?: string; // form support\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function RadioGroup({\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  name,\r\n  disabled = false,\r\n  className = '',\r\n}: RadioGroupProps) {\r\n  const isControlled = value !== undefined;\r\n\r\n  const [internalValue, setInternalValue] = useState(defaultValue);\r\n  const selected = isControlled ? value : internalValue;\r\n\r\n  const itemRefs = useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n  const select = useCallback(\r\n    (val: string) => {\r\n      if (!isControlled) setInternalValue(val);\r\n      onChange?.(val);\r\n    },\r\n    [isControlled, onChange]\r\n  );\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\r\n    const enabledIndices = options\r\n      .map((o, i) => (!o.disabled ? i : null))\r\n      .filter((i) => i !== null) as number[];\r\n\r\n    const currentIndex = enabledIndices.indexOf(index);\r\n    if (currentIndex === -1) return;\r\n\r\n    let nextIndex = currentIndex;\r\n\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n      case 'ArrowRight':\r\n        nextIndex = (currentIndex + 1) % enabledIndices.length;\r\n        break;\r\n\r\n      case 'ArrowUp':\r\n      case 'ArrowLeft':\r\n        nextIndex =\r\n          (currentIndex - 1 + enabledIndices.length) % enabledIndices.length;\r\n        break;\r\n\r\n      case 'Home':\r\n        nextIndex = 0;\r\n        break;\r\n\r\n      case 'End':\r\n        nextIndex = enabledIndices.length - 1;\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    e.preventDefault();\r\n    const targetIndex = enabledIndices[nextIndex];\r\n    const target = itemRefs.current[targetIndex];\r\n    target?.focus();\r\n    select(options[targetIndex].value);\r\n  };\r\n\r\n  return (\r\n    <div className={`ui-radio-group ${className}`} role=\"radiogroup\">\r\n      {options.map((opt, i) => {\r\n        const isChecked = selected === opt.value;\r\n\r\n        return (\r\n          <label\r\n            key={opt.value}\r\n            className=\"ui-radio-item\"\r\n            aria-disabled={disabled || opt.disabled}\r\n          >\r\n            <input\r\n              ref={(el) => {\r\n                itemRefs.current[i] = el;\r\n              }}\r\n              type=\"radio\"\r\n              className=\"ui-radio-input\"\r\n              name={name}\r\n              value={opt.value}\r\n              disabled={disabled || opt.disabled}\r\n              checked={isChecked}\r\n              onChange={() => select(opt.value)}\r\n              onKeyDown={(e) => onKeyDown(e, i)}\r\n              data-state={isChecked ? 'checked' : 'unchecked'}\r\n            />\r\n\r\n            <span className=\"ui-radio-label\">{opt.label}</span>\r\n          </label>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["RadioGroup","options","value","defaultValue","onChange","name","disabled","className","isControlled","internalValue","setInternalValue","useState","selected","itemRefs","useRef","select","useCallback","val","onKeyDown","index","enabledIndices","o","i","currentIndex","nextIndex","targetIndex","jsx","opt","isChecked","jsxs","el","e"],"mappings":"wKA6BO,SAASA,EAAW,CACzB,QAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACd,EAAoB,CAClB,MAAMC,EAAeN,IAAU,OAEzB,CAACO,EAAeC,CAAgB,EAAIC,EAAAA,SAASR,CAAY,EACzDS,EAAWJ,EAAeN,EAAQO,EAElCI,EAAWC,EAAAA,OAAuC,EAAE,EAEpDC,EAASC,EAAAA,YACZC,GAAgB,CACVT,GAAcE,EAAiBO,CAAG,EACvCb,IAAWa,CAAG,CAChB,EACA,CAACT,EAAcJ,CAAQ,CAAA,EAGnBc,EAAY,CAAC,EAAwBC,IAAkB,CAC3D,MAAMC,EAAiBnB,EACpB,IAAI,CAACoB,EAAGC,IAAQD,EAAE,SAAe,KAAJC,CAAS,EACtC,OAAQ,GAAM,IAAM,IAAI,EAErBC,EAAeH,EAAe,QAAQD,CAAK,EACjD,GAAII,IAAiB,GAAI,OAEzB,IAAIC,EAAYD,EAEhB,OAAQ,EAAE,IAAA,CACR,IAAK,YACL,IAAK,aACHC,GAAaD,EAAe,GAAKH,EAAe,OAChD,MAEF,IAAK,UACL,IAAK,YACHI,GACGD,EAAe,EAAIH,EAAe,QAAUA,EAAe,OAC9D,MAEF,IAAK,OACHI,EAAY,EACZ,MAEF,IAAK,MACHA,EAAYJ,EAAe,OAAS,EACpC,MAEF,QACE,MAAA,CAGJ,EAAE,eAAA,EACF,MAAMK,EAAcL,EAAeI,CAAS,EAC7BX,EAAS,QAAQY,CAAW,GACnC,MAAA,EACRV,EAAOd,EAAQwB,CAAW,EAAE,KAAK,CACnC,EAEA,OACEC,EAAAA,IAAC,MAAA,CAAI,UAAW,kBAAkBnB,CAAS,GAAI,KAAK,aACjD,SAAAN,EAAQ,IAAI,CAAC0B,EAAKL,IAAM,CACvB,MAAMM,EAAYhB,IAAae,EAAI,MAEnC,OACEE,EAAAA,KAAC,QAAA,CAEC,UAAU,gBACV,gBAAevB,GAAYqB,EAAI,SAE/B,SAAA,CAAAD,EAAAA,IAAC,QAAA,CACC,IAAMI,GAAO,CACXjB,EAAS,QAAQS,CAAC,EAAIQ,CACxB,EACA,KAAK,QACL,UAAU,iBACV,KAAAzB,EACA,MAAOsB,EAAI,MACX,SAAUrB,GAAYqB,EAAI,SAC1B,QAASC,EACT,SAAU,IAAMb,EAAOY,EAAI,KAAK,EAChC,UAAYI,GAAMb,EAAUa,EAAGT,CAAC,EAChC,aAAYM,EAAY,UAAY,WAAA,CAAA,EAGtCF,EAAAA,IAAC,OAAA,CAAK,UAAU,iBAAkB,WAAI,KAAA,CAAM,CAAA,CAAA,EAnBvCC,EAAI,KAAA,CAsBf,CAAC,CAAA,CACH,CAEJ"}
+{"version":3,"file":"RadioGroup.cjs","sources":["../../../src/components/radiogroup/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext, forwardRef, useState, useCallback } from 'react';\nimport { cn } from '../../utils';\nimport './RadioGroup.css';\n\n/* ============================================================\n * Context\n * ============================================================ */\n\ninterface RadioGroupContextValue {\n  value?: string;\n  onChange: (value: string) => void;\n  name: string;\n  disabled: boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nfunction useRadioGroup() {\n  const ctx = useContext(RadioGroupContext);\n  if (!ctx) throw new Error('RadioGroup.Item must be used within a <RadioGroup>');\n  return ctx;\n}\n\n/* ============================================================\n * 1. RadioGroup Root\n * ============================================================ */\n\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'dir'> {\n  /** Controlled state value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Callback fired when a new radio item is selected */\n  onChange?: (value: string) => void;\n  /** The name attribute applied to all children to group them natively for forms */\n  name?: string;\n  /** Disables the entire radio group */\n  disabled?: boolean;\n  /** Determines the flex layout direction of the group */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * RadioGroup Component\n * * A WAI-ARIA compliant wrapper for a set of mutually exclusive radio buttons.\n * * Automatically manages the native `name` attribute to enable built-in browser keyboard navigation (arrow keys).\n */\nconst RadioGroupRoot = forwardRef<HTMLDivElement, RadioGroupProps>(({\n  value,\n  defaultValue,\n  onChange,\n  name,\n  disabled = false,\n  orientation = 'vertical',\n  className,\n  children,\n  ...props\n}, ref) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const currentValue = isControlled ? value : internalValue;\n\n  // Auto-generate a stable name so native arrow-key navigation works flawlessly!\n  const reactId = React.useId();\n  const groupName = name || `nui-radiogroup-${reactId}`;\n\n  const handleChange = useCallback((val: string) => {\n    if (!isControlled) setInternalValue(val);\n    onChange?.(val);\n  }, [isControlled, onChange]);\n\n  return (\n    <RadioGroupContext.Provider value={{ value: currentValue, onChange: handleChange, name: groupName, disabled }}>\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-orientation={orientation}\n        className={cn(\n          \"nui-radio-group\",\n          orientation === 'horizontal' && \"nui-radio-group--horizontal\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n});\nRadioGroupRoot.displayName = 'RadioGroup';\n\n/* ============================================================\n * 2. RadioGroup Item\n * ============================================================ */\n\nexport interface RadioItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'name' | 'onChange' | 'type'> {\n  /** The unique value of this specific radio option */\n  value: string;\n}\n\n/**\n * RadioGroup Item Component\n * * A styled native radio input. Must be rendered inside a `<RadioGroup>`.\n */\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioItemProps>(({\n  value,\n  disabled: itemDisabled,\n  className,\n  id,\n  ...props\n}, ref) => {\n  const context = useRadioGroup();\n  const isDisabled = context.disabled || itemDisabled;\n  const isChecked = context.value === value;\n\n  // We generate a fallback ID so standard <label htmlFor=\"...\"> clicks always work\n  const autoId = React.useId();\n  const inputId = id || `nui-radio-${autoId}`;\n\n  return (\n    <input\n      ref={ref}\n      id={inputId}\n      type=\"radio\"\n      name={context.name}\n      value={value}\n      checked={isChecked}\n      disabled={isDisabled}\n      aria-checked={isChecked}\n      onChange={(e) => context.onChange(e.target.value)}\n      className={cn(\"nui-radio-input\", className)}\n      {...props}\n    />\n  );\n});\nRadioGroupItem.displayName = 'RadioGroup.Item';\n\n/* ============================================================\n * Export\n * ============================================================ */\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioGroupItem,\n});"],"names":["RadioGroupContext","createContext","useRadioGroup","ctx","useContext","RadioGroupRoot","forwardRef","value","defaultValue","onChange","name","disabled","orientation","className","children","props","ref","isControlled","internalValue","setInternalValue","useState","currentValue","reactId","React","groupName","handleChange","useCallback","val","jsx","cn","RadioGroupItem","itemDisabled","id","context","isDisabled","isChecked","autoId","inputId","e","RadioGroup"],"mappings":"iNAiBMA,EAAoBC,EAAAA,cAA6C,IAAI,EAE3E,SAASC,GAAgB,CACvB,MAAMC,EAAMC,EAAAA,WAAWJ,CAAiB,EACxC,GAAI,CAACG,EAAK,MAAM,IAAI,MAAM,oDAAoD,EAC9E,OAAOA,CACT,CA0BA,MAAME,EAAiBC,EAAAA,WAA4C,CAAC,CAClE,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EAAW,GACX,YAAAC,EAAc,WACd,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAGC,IAAQ,CACT,MAAMC,EAAeV,IAAU,OACzB,CAACW,EAAeC,CAAgB,EAAIC,EAAAA,SAASZ,CAAY,EACzDa,EAAeJ,EAAeV,EAAQW,EAGtCI,EAAUC,EAAM,MAAA,EAChBC,EAAYd,GAAQ,kBAAkBY,CAAO,GAE7CG,EAAeC,cAAaC,GAAgB,CAC3CV,GAAcE,EAAiBQ,CAAG,EACvClB,IAAWkB,CAAG,CAChB,EAAG,CAACV,EAAcR,CAAQ,CAAC,EAE3B,OACEmB,EAAAA,IAAC5B,EAAkB,SAAlB,CAA2B,MAAO,CAAE,MAAOqB,EAAc,SAAUI,EAAc,KAAMD,EAAW,SAAAb,GACjG,SAAAiB,EAAAA,IAAC,MAAA,CACC,IAAAZ,EACA,KAAK,aACL,mBAAkBJ,EAClB,UAAWiB,EAAAA,GACT,kBACAjB,IAAgB,cAAgB,8BAChCC,CAAA,EAED,GAAGE,EAEH,SAAAD,CAAA,CAAA,EAEL,CAEJ,CAAC,EACDT,EAAe,YAAc,aAe7B,MAAMyB,EAAiBxB,EAAAA,WAA6C,CAAC,CACnE,MAAAC,EACA,SAAUwB,EACV,UAAAlB,EACA,GAAAmB,EACA,GAAGjB,CACL,EAAGC,IAAQ,CACT,MAAMiB,EAAU/B,EAAA,EACVgC,EAAaD,EAAQ,UAAYF,EACjCI,EAAYF,EAAQ,QAAU1B,EAG9B6B,EAASb,EAAM,MAAA,EACfc,EAAUL,GAAM,aAAaI,CAAM,GAEzC,OACER,EAAAA,IAAC,QAAA,CACC,IAAAZ,EACA,GAAIqB,EACJ,KAAK,QACL,KAAMJ,EAAQ,KACd,MAAA1B,EACA,QAAS4B,EACT,SAAUD,EACV,eAAcC,EACd,SAAWG,GAAML,EAAQ,SAASK,EAAE,OAAO,KAAK,EAChD,UAAWT,EAAAA,GAAG,kBAAmBhB,CAAS,EACzC,GAAGE,CAAA,CAAA,CAGV,CAAC,EACDe,EAAe,YAAc,kBAMtB,MAAMS,EAAa,OAAO,OAAOlC,EAAgB,CACtD,KAAMyB,CACR,CAAC"}

package/dist/components/radiogroup/RadioGroup.js

@@ -1,79 +1,74 @@
-import { jsx as i, jsxs as y } from "react/jsx-runtime";
-import { useState as A, useRef as D, useCallback as N } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import h, { forwardRef as R, useState as k, useCallback as w, createContext as y, useContext as V } from "react";
 /* empty css               */
-function V({
-  options: l,
-  value: d,
-  defaultValue: h,
-  onChange: o,
-  name: g,
-  disabled: u = !1,
-  className: k = ""
-}) {
-  const s = d !== void 0, [w, x] = A(h), p = s ? d : w, f = D([]), m = N(
-    (e) => {
-      s || x(e), o?.(e);
-    },
-    [s, o]
-  ), v = (e, t) => {
-    const a = l.map((c, I) => c.disabled ? null : I).filter((c) => c !== null), r = a.indexOf(t);
-    if (r === -1) return;
-    let n = r;
-    switch (e.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        n = (r + 1) % a.length;
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        n = (r - 1 + a.length) % a.length;
-        break;
-      case "Home":
-        n = 0;
-        break;
-      case "End":
-        n = a.length - 1;
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    const b = a[n];
-    f.current[b]?.focus(), m(l[b].value);
-  };
-  return /* @__PURE__ */ i("div", { className: `ui-radio-group ${k}`, role: "radiogroup", children: l.map((e, t) => {
-    const a = p === e.value;
-    return /* @__PURE__ */ y(
-      "label",
-      {
-        className: "ui-radio-item",
-        "aria-disabled": u || e.disabled,
-        children: [
-          /* @__PURE__ */ i(
-            "input",
-            {
-              ref: (r) => {
-                f.current[t] = r;
-              },
-              type: "radio",
-              className: "ui-radio-input",
-              name: g,
-              value: e.value,
-              disabled: u || e.disabled,
-              checked: a,
-              onChange: () => m(e.value),
-              onKeyDown: (r) => v(r, t),
-              "data-state": a ? "checked" : "unchecked"
-            }
-          ),
-          /* @__PURE__ */ i("span", { className: "ui-radio-label", children: e.label })
-        ]
-      },
-      e.value
-    );
-  }) });
+import { cn as g } from "../../utils/cn/cn.js";
+const I = y(null);
+function j() {
+  const o = V(I);
+  if (!o) throw new Error("RadioGroup.Item must be used within a <RadioGroup>");
+  return o;
 }
+const f = R(({
+  value: o,
+  defaultValue: i,
+  onChange: a,
+  name: d,
+  disabled: s = !1,
+  orientation: r = "vertical",
+  className: e,
+  children: u,
+  ...n
+}, c) => {
+  const t = o !== void 0, [l, G] = k(i), b = t ? o : l, x = h.useId(), v = d || `nui-radiogroup-${x}`, N = w((m) => {
+    t || G(m), a?.(m);
+  }, [t, a]);
+  return /* @__PURE__ */ p(I.Provider, { value: { value: b, onChange: N, name: v, disabled: s }, children: /* @__PURE__ */ p(
+    "div",
+    {
+      ref: c,
+      role: "radiogroup",
+      "aria-orientation": r,
+      className: g(
+        "nui-radio-group",
+        r === "horizontal" && "nui-radio-group--horizontal",
+        e
+      ),
+      ...n,
+      children: u
+    }
+  ) });
+});
+f.displayName = "RadioGroup";
+const C = R(({
+  value: o,
+  disabled: i,
+  className: a,
+  id: d,
+  ...s
+}, r) => {
+  const e = j(), u = e.disabled || i, n = e.value === o, c = h.useId(), t = d || `nui-radio-${c}`;
+  return /* @__PURE__ */ p(
+    "input",
+    {
+      ref: r,
+      id: t,
+      type: "radio",
+      name: e.name,
+      value: o,
+      checked: n,
+      disabled: u,
+      "aria-checked": n,
+      onChange: (l) => e.onChange(l.target.value),
+      className: g("nui-radio-input", a),
+      ...s
+    }
+  );
+});
+C.displayName = "RadioGroup.Item";
+const O = Object.assign(f, {
+  Item: C
+});
 export {
-  V as RadioGroup
+  O as RadioGroup
 };
 //# sourceMappingURL=RadioGroup.js.map

package/dist/components/radiogroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.tsx"],"sourcesContent":["/**\r\n * RadioGroup.tsx\r\n * ----------------\r\n * Fully accessible WAI-ARIA radio group.\r\n * - Arrow key navigation\r\n * - Home/End keys\r\n * - Controlled & uncontrolled\r\n * - Disabled support\r\n */\r\n\r\nimport React, { useState, useCallback, useRef } from 'react';\r\nimport './RadioGroup.css';\r\n\r\nexport interface RadioOption {\r\n  label: React.ReactNode;\r\n  value: string;\r\n  disabled?: boolean;\r\n}\r\n\r\ninterface RadioGroupProps {\r\n  options: RadioOption[];\r\n  value?: string; // controlled\r\n  defaultValue?: string; // uncontrolled\r\n  onChange?: (value: string) => void;\r\n  name?: string; // form support\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function RadioGroup({\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  name,\r\n  disabled = false,\r\n  className = '',\r\n}: RadioGroupProps) {\r\n  const isControlled = value !== undefined;\r\n\r\n  const [internalValue, setInternalValue] = useState(defaultValue);\r\n  const selected = isControlled ? value : internalValue;\r\n\r\n  const itemRefs = useRef<Array<HTMLInputElement | null>>([]);\r\n\r\n  const select = useCallback(\r\n    (val: string) => {\r\n      if (!isControlled) setInternalValue(val);\r\n      onChange?.(val);\r\n    },\r\n    [isControlled, onChange]\r\n  );\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\r\n    const enabledIndices = options\r\n      .map((o, i) => (!o.disabled ? i : null))\r\n      .filter((i) => i !== null) as number[];\r\n\r\n    const currentIndex = enabledIndices.indexOf(index);\r\n    if (currentIndex === -1) return;\r\n\r\n    let nextIndex = currentIndex;\r\n\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n      case 'ArrowRight':\r\n        nextIndex = (currentIndex + 1) % enabledIndices.length;\r\n        break;\r\n\r\n      case 'ArrowUp':\r\n      case 'ArrowLeft':\r\n        nextIndex =\r\n          (currentIndex - 1 + enabledIndices.length) % enabledIndices.length;\r\n        break;\r\n\r\n      case 'Home':\r\n        nextIndex = 0;\r\n        break;\r\n\r\n      case 'End':\r\n        nextIndex = enabledIndices.length - 1;\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    e.preventDefault();\r\n    const targetIndex = enabledIndices[nextIndex];\r\n    const target = itemRefs.current[targetIndex];\r\n    target?.focus();\r\n    select(options[targetIndex].value);\r\n  };\r\n\r\n  return (\r\n    <div className={`ui-radio-group ${className}`} role=\"radiogroup\">\r\n      {options.map((opt, i) => {\r\n        const isChecked = selected === opt.value;\r\n\r\n        return (\r\n          <label\r\n            key={opt.value}\r\n            className=\"ui-radio-item\"\r\n            aria-disabled={disabled || opt.disabled}\r\n          >\r\n            <input\r\n              ref={(el) => {\r\n                itemRefs.current[i] = el;\r\n              }}\r\n              type=\"radio\"\r\n              className=\"ui-radio-input\"\r\n              name={name}\r\n              value={opt.value}\r\n              disabled={disabled || opt.disabled}\r\n              checked={isChecked}\r\n              onChange={() => select(opt.value)}\r\n              onKeyDown={(e) => onKeyDown(e, i)}\r\n              data-state={isChecked ? 'checked' : 'unchecked'}\r\n            />\r\n\r\n            <span className=\"ui-radio-label\">{opt.label}</span>\r\n          </label>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["RadioGroup","options","value","defaultValue","onChange","name","disabled","className","isControlled","internalValue","setInternalValue","useState","selected","itemRefs","useRef","select","useCallback","val","onKeyDown","index","enabledIndices","o","i","currentIndex","nextIndex","targetIndex","jsx","opt","isChecked","jsxs","el","e"],"mappings":";;;AA6BO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AACd,GAAoB;AAClB,QAAMC,IAAeN,MAAU,QAEzB,CAACO,GAAeC,CAAgB,IAAIC,EAASR,CAAY,GACzDS,IAAWJ,IAAeN,IAAQO,GAElCI,IAAWC,EAAuC,EAAE,GAEpDC,IAASC;AAAA,IACb,CAACC,MAAgB;AACf,MAAKT,KAAcE,EAAiBO,CAAG,GACvCb,IAAWa,CAAG;AAAA,IAChB;AAAA,IACA,CAACT,GAAcJ,CAAQ;AAAA,EAAA,GAGnBc,IAAY,CAAC,GAAwBC,MAAkB;AAC3D,UAAMC,IAAiBnB,EACpB,IAAI,CAACoB,GAAGC,MAAQD,EAAE,WAAe,OAAJC,CAAS,EACtC,OAAO,CAACA,MAAMA,MAAM,IAAI,GAErBC,IAAeH,EAAe,QAAQD,CAAK;AACjD,QAAII,MAAiB,GAAI;AAEzB,QAAIC,IAAYD;AAEhB,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK;AAAA,MACL,KAAK;AACH,QAAAC,KAAaD,IAAe,KAAKH,EAAe;AAChD;AAAA,MAEF,KAAK;AAAA,MACL,KAAK;AACH,QAAAI,KACGD,IAAe,IAAIH,EAAe,UAAUA,EAAe;AAC9D;AAAA,MAEF,KAAK;AACH,QAAAI,IAAY;AACZ;AAAA,MAEF,KAAK;AACH,QAAAA,IAAYJ,EAAe,SAAS;AACpC;AAAA,MAEF;AACE;AAAA,IAAA;AAGJ,MAAE,eAAA;AACF,UAAMK,IAAcL,EAAeI,CAAS;AAE5C,IADeX,EAAS,QAAQY,CAAW,GACnC,MAAA,GACRV,EAAOd,EAAQwB,CAAW,EAAE,KAAK;AAAA,EACnC;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,kBAAkBnB,CAAS,IAAI,MAAK,cACjD,UAAAN,EAAQ,IAAI,CAAC0B,GAAKL,MAAM;AACvB,UAAMM,IAAYhB,MAAae,EAAI;AAEnC,WACE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,iBAAevB,KAAYqB,EAAI;AAAA,QAE/B,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK,CAACI,MAAO;AACX,gBAAAjB,EAAS,QAAQS,CAAC,IAAIQ;AAAA,cACxB;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,MAAAzB;AAAA,cACA,OAAOsB,EAAI;AAAA,cACX,UAAUrB,KAAYqB,EAAI;AAAA,cAC1B,SAASC;AAAA,cACT,UAAU,MAAMb,EAAOY,EAAI,KAAK;AAAA,cAChC,WAAW,CAACI,MAAMb,EAAUa,GAAGT,CAAC;AAAA,cAChC,cAAYM,IAAY,YAAY;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtC,gBAAAF,EAAC,QAAA,EAAK,WAAU,kBAAkB,YAAI,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAnBvCC,EAAI;AAAA,IAAA;AAAA,EAsBf,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext, forwardRef, useState, useCallback } from 'react';\nimport { cn } from '../../utils';\nimport './RadioGroup.css';\n\n/* ============================================================\n * Context\n * ============================================================ */\n\ninterface RadioGroupContextValue {\n  value?: string;\n  onChange: (value: string) => void;\n  name: string;\n  disabled: boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nfunction useRadioGroup() {\n  const ctx = useContext(RadioGroupContext);\n  if (!ctx) throw new Error('RadioGroup.Item must be used within a <RadioGroup>');\n  return ctx;\n}\n\n/* ============================================================\n * 1. RadioGroup Root\n * ============================================================ */\n\nexport interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'dir'> {\n  /** Controlled state value */\n  value?: string;\n  /** Uncontrolled default value */\n  defaultValue?: string;\n  /** Callback fired when a new radio item is selected */\n  onChange?: (value: string) => void;\n  /** The name attribute applied to all children to group them natively for forms */\n  name?: string;\n  /** Disables the entire radio group */\n  disabled?: boolean;\n  /** Determines the flex layout direction of the group */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * RadioGroup Component\n * * A WAI-ARIA compliant wrapper for a set of mutually exclusive radio buttons.\n * * Automatically manages the native `name` attribute to enable built-in browser keyboard navigation (arrow keys).\n */\nconst RadioGroupRoot = forwardRef<HTMLDivElement, RadioGroupProps>(({\n  value,\n  defaultValue,\n  onChange,\n  name,\n  disabled = false,\n  orientation = 'vertical',\n  className,\n  children,\n  ...props\n}, ref) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const currentValue = isControlled ? value : internalValue;\n\n  // Auto-generate a stable name so native arrow-key navigation works flawlessly!\n  const reactId = React.useId();\n  const groupName = name || `nui-radiogroup-${reactId}`;\n\n  const handleChange = useCallback((val: string) => {\n    if (!isControlled) setInternalValue(val);\n    onChange?.(val);\n  }, [isControlled, onChange]);\n\n  return (\n    <RadioGroupContext.Provider value={{ value: currentValue, onChange: handleChange, name: groupName, disabled }}>\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-orientation={orientation}\n        className={cn(\n          \"nui-radio-group\",\n          orientation === 'horizontal' && \"nui-radio-group--horizontal\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </RadioGroupContext.Provider>\n  );\n});\nRadioGroupRoot.displayName = 'RadioGroup';\n\n/* ============================================================\n * 2. RadioGroup Item\n * ============================================================ */\n\nexport interface RadioItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'name' | 'onChange' | 'type'> {\n  /** The unique value of this specific radio option */\n  value: string;\n}\n\n/**\n * RadioGroup Item Component\n * * A styled native radio input. Must be rendered inside a `<RadioGroup>`.\n */\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioItemProps>(({\n  value,\n  disabled: itemDisabled,\n  className,\n  id,\n  ...props\n}, ref) => {\n  const context = useRadioGroup();\n  const isDisabled = context.disabled || itemDisabled;\n  const isChecked = context.value === value;\n\n  // We generate a fallback ID so standard <label htmlFor=\"...\"> clicks always work\n  const autoId = React.useId();\n  const inputId = id || `nui-radio-${autoId}`;\n\n  return (\n    <input\n      ref={ref}\n      id={inputId}\n      type=\"radio\"\n      name={context.name}\n      value={value}\n      checked={isChecked}\n      disabled={isDisabled}\n      aria-checked={isChecked}\n      onChange={(e) => context.onChange(e.target.value)}\n      className={cn(\"nui-radio-input\", className)}\n      {...props}\n    />\n  );\n});\nRadioGroupItem.displayName = 'RadioGroup.Item';\n\n/* ============================================================\n * Export\n * ============================================================ */\n\nexport const RadioGroup = Object.assign(RadioGroupRoot, {\n  Item: RadioGroupItem,\n});"],"names":["RadioGroupContext","createContext","useRadioGroup","ctx","useContext","RadioGroupRoot","forwardRef","value","defaultValue","onChange","name","disabled","orientation","className","children","props","ref","isControlled","internalValue","setInternalValue","useState","currentValue","reactId","React","groupName","handleChange","useCallback","val","jsx","cn","RadioGroupItem","itemDisabled","id","context","isDisabled","isChecked","autoId","inputId","e","RadioGroup"],"mappings":";;;;AAiBA,MAAMA,IAAoBC,EAA6C,IAAI;AAE3E,SAASC,IAAgB;AACvB,QAAMC,IAAMC,EAAWJ,CAAiB;AACxC,MAAI,CAACG,EAAK,OAAM,IAAI,MAAM,oDAAoD;AAC9E,SAAOA;AACT;AA0BA,MAAME,IAAiBC,EAA4C,CAAC;AAAA,EAClE,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAGC,MAAQ;AACT,QAAMC,IAAeV,MAAU,QACzB,CAACW,GAAeC,CAAgB,IAAIC,EAASZ,CAAY,GACzDa,IAAeJ,IAAeV,IAAQW,GAGtCI,IAAUC,EAAM,MAAA,GAChBC,IAAYd,KAAQ,kBAAkBY,CAAO,IAE7CG,IAAeC,EAAY,CAACC,MAAgB;AAChD,IAAKV,KAAcE,EAAiBQ,CAAG,GACvClB,IAAWkB,CAAG;AAAA,EAChB,GAAG,CAACV,GAAcR,CAAQ,CAAC;AAE3B,SACE,gBAAAmB,EAAC5B,EAAkB,UAAlB,EAA2B,OAAO,EAAE,OAAOqB,GAAc,UAAUI,GAAc,MAAMD,GAAW,UAAAb,KACjG,UAAA,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,MAAK;AAAA,MACL,oBAAkBJ;AAAA,MAClB,WAAWiB;AAAA,QACT;AAAA,QACAjB,MAAgB,gBAAgB;AAAA,QAChCC;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ,CAAC;AACDT,EAAe,cAAc;AAe7B,MAAMyB,IAAiBxB,EAA6C,CAAC;AAAA,EACnE,OAAAC;AAAA,EACA,UAAUwB;AAAA,EACV,WAAAlB;AAAA,EACA,IAAAmB;AAAA,EACA,GAAGjB;AACL,GAAGC,MAAQ;AACT,QAAMiB,IAAU/B,EAAA,GACVgC,IAAaD,EAAQ,YAAYF,GACjCI,IAAYF,EAAQ,UAAU1B,GAG9B6B,IAASb,EAAM,MAAA,GACfc,IAAUL,KAAM,aAAaI,CAAM;AAEzC,SACE,gBAAAR;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,IAAIqB;AAAA,MACJ,MAAK;AAAA,MACL,MAAMJ,EAAQ;AAAA,MACd,OAAA1B;AAAA,MACA,SAAS4B;AAAA,MACT,UAAUD;AAAA,MACV,gBAAcC;AAAA,MACd,UAAU,CAACG,MAAML,EAAQ,SAASK,EAAE,OAAO,KAAK;AAAA,MAChD,WAAWT,EAAG,mBAAmBhB,CAAS;AAAA,MACzC,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDe,EAAe,cAAc;AAMtB,MAAMS,IAAa,OAAO,OAAOlC,GAAgB;AAAA,EACtD,MAAMyB;AACR,CAAC;"}

package/dist/components/rating/Rating.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react");;/* empty css             */function S({value:i,max:a=5,onChange:u,icon:d="☆",iconFilled:g="★",size:f="md",className:h=""}){const[m,y]=c.useState(0),t=i??m,[x,o]=c.useState(null),R=x??t,r=e=>{i===void 0&&y(e),u?.(e)},b=e=>{e.key==="ArrowRight"&&r(Math.min((t??0)+1,a)),e.key==="ArrowLeft"&&r(Math.max((t??0)-1,1))};return s.jsx("div",{className:`ui-rating ui-rating--${f} ${h}`,role:"radiogroup",tabIndex:0,onKeyDown:b,"aria-label":"Rating",children:Array.from({length:a},(e,M)=>{const n=M+1,l=n<=R;return s.jsx("span",{role:"radio","aria-checked":t===n,tabIndex:-1,className:`ui-rating-item ${l?"filled":""}`,onMouseEnter:()=>o(n),onMouseLeave:()=>o(null),onClick:()=>r(n),children:l?g:d},n)})})}exports.Rating=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react");;/* empty css             */const A=require("../../utils/cn/cn.cjs"),M=o.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:o.jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),q=o.jsx("svg",{width:"1em",height:"1em",viewBox:"0 0 24 24",fill:"currentColor",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:o.jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})});function N({value:v,defaultValue:x=0,max:a=5,onChange:p,icon:j=M,iconFilled:w=q,size:y="md",readOnly:n=!1,disabled:r=!1,allowHalf:m=!1,className:D,...L}){const u=v!==void 0,[S,C]=g.useState(x),s=u?v:S,[c,f]=g.useState(null),h=c!==null?c:s,k=g.useCallback(e=>{n||r||(u||C(e),p?.(e))},[n,r,u,p]),P=(e,i)=>{if(!(n||r))if(m){const t=e.currentTarget.getBoundingClientRect(),d=e.clientX-t.left<t.width/2;f(d?i-.5:i)}else f(i)},R=()=>{n||r||f(null)},V=e=>{if(n||r)return;const i=m?.5:1;let t=s;e.key==="ArrowRight"||e.key==="ArrowUp"?(t=Math.min(s+i,a),e.preventDefault()):e.key==="ArrowLeft"||e.key==="ArrowDown"?(t=Math.max(s-i,0),e.preventDefault()):e.key==="Home"?(t=0,e.preventDefault()):e.key==="End"&&(t=a,e.preventDefault()),t!==s&&k(t)};return o.jsx("div",{className:A.cn("nui-rating",`nui-rating--${y}`,n&&"nui-rating--readonly",r&&"nui-rating--disabled",D),role:"slider","aria-valuemin":0,"aria-valuemax":a,"aria-valuenow":s,"aria-disabled":r||void 0,"aria-readonly":n||void 0,tabIndex:n||r?-1:0,onKeyDown:V,onPointerLeave:R,...L,children:Array.from({length:a},(e,i)=>{const t=i+1;let l=0;return h>=t?l=100:h>t-1&&(l=(h-(t-1))*100),o.jsxs("span",{"data-testid":"star-item",className:"nui-rating-item",onPointerMove:d=>P(d,t),onClick:()=>k(c??t),children:[o.jsx("span",{className:"nui-rating-icon-empty",children:j}),o.jsx("span",{className:"nui-rating-icon-filled",style:{width:`${l}%`},children:w})]},t)})})}exports.Rating=N;
 //# sourceMappingURL=Rating.cjs.map

package/dist/components/rating/Rating.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.cjs","sources":["../../../src/components/rating/Rating.tsx"],"sourcesContent":["/**\r\n * Rating.tsx — FINAL VERSION\r\n * ---------------------------\r\n * Features:\r\n * - Click to select\r\n * - Hover preview\r\n * - Keyboard navigation\r\n * - Theme-aware\r\n * - Accessible\r\n */\r\n\r\nimport React, { useState } from 'react';\r\nimport './Rating.css';\r\n\r\nexport interface RatingProps {\r\n  /** Current value (1–max). If undefined → uncontrolled mode */\r\n  value?: number;\r\n\r\n  /** Max number of stars */\r\n  max?: number;\r\n\r\n  /** Change handler */\r\n  onChange?: (value: number) => void;\r\n\r\n  /** Custom icon */\r\n  icon?: React.ReactNode;\r\n\r\n  /** Custom filled icon */\r\n  iconFilled?: React.ReactNode;\r\n\r\n  /** Size */\r\n  size?: 'sm' | 'md' | 'lg';\r\n\r\n  /** Optional class */\r\n  className?: string;\r\n}\r\n\r\nexport function Rating({\r\n  value,\r\n  max = 5,\r\n  onChange,\r\n  icon = '☆',\r\n  iconFilled = '★',\r\n  size = 'md',\r\n  className = '',\r\n}: RatingProps) {\r\n  // uncontrolled internal value\r\n  const [internal, setInternal] = useState(0);\r\n  const current = value ?? internal;\r\n\r\n  const [hover, setHover] = useState<number | null>(null);\r\n\r\n  const finalValue = hover ?? current;\r\n\r\n  const handleSelect = (v: number) => {\r\n    if (value === undefined) setInternal(v);\r\n    onChange?.(v);\r\n  };\r\n\r\n  const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'ArrowRight') handleSelect(Math.min((current ?? 0) + 1, max));\r\n    if (e.key === 'ArrowLeft') handleSelect(Math.max((current ?? 0) - 1, 1));\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`ui-rating ui-rating--${size} ${className}`}\r\n      role=\"radiogroup\"\r\n      tabIndex={0}\r\n      onKeyDown={handleKey}\r\n      aria-label=\"Rating\"\r\n    >\r\n      {Array.from({ length: max }, (_, i) => {\r\n        const index = i + 1;\r\n        const filled = index <= finalValue;\r\n\r\n        return (\r\n          <span\r\n            key={index}\r\n            role=\"radio\"\r\n            aria-checked={current === index}\r\n            tabIndex={-1}\r\n            className={`ui-rating-item ${filled ? 'filled' : ''}`}\r\n            onMouseEnter={() => setHover(index)}\r\n            onMouseLeave={() => setHover(null)}\r\n            onClick={() => handleSelect(index)}\r\n          >\r\n            {filled ? iconFilled : icon}\r\n          </span>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Rating","value","max","onChange","icon","iconFilled","size","className","internal","setInternal","useState","current","hover","setHover","finalValue","handleSelect","v","handleKey","jsx","_","i","index","filled"],"mappings":"oKAqCO,SAASA,EAAO,CACrB,MAAAC,EACA,IAAAC,EAAM,EACN,SAAAC,EACA,KAAAC,EAAO,IACP,WAAAC,EAAa,IACb,KAAAC,EAAO,KACP,UAAAC,EAAY,EACd,EAAgB,CAEd,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,CAAC,EACpCC,EAAUV,GAASO,EAEnB,CAACI,EAAOC,CAAQ,EAAIH,EAAAA,SAAwB,IAAI,EAEhDI,EAAaF,GAASD,EAEtBI,EAAgBC,GAAc,CAC9Bf,IAAU,QAAWQ,EAAYO,CAAC,EACtCb,IAAWa,CAAC,CACd,EAEMC,EAAa,GAA2C,CACxD,EAAE,MAAQ,cAAcF,EAAa,KAAK,KAAKJ,GAAW,GAAK,EAAGT,CAAG,CAAC,EACtE,EAAE,MAAQ,aAAaa,EAAa,KAAK,KAAKJ,GAAW,GAAK,EAAG,CAAC,CAAC,CACzE,EAEA,OACEO,EAAAA,IAAC,MAAA,CACC,UAAW,wBAAwBZ,CAAI,IAAIC,CAAS,GACpD,KAAK,aACL,SAAU,EACV,UAAWU,EACX,aAAW,SAEV,SAAA,MAAM,KAAK,CAAE,OAAQf,GAAO,CAACiB,EAAGC,IAAM,CACrC,MAAMC,EAAQD,EAAI,EACZE,EAASD,GAASP,EAExB,OACEI,EAAAA,IAAC,OAAA,CAEC,KAAK,QACL,eAAcP,IAAYU,EAC1B,SAAU,GACV,UAAW,kBAAkBC,EAAS,SAAW,EAAE,GACnD,aAAc,IAAMT,EAASQ,CAAK,EAClC,aAAc,IAAMR,EAAS,IAAI,EACjC,QAAS,IAAME,EAAaM,CAAK,EAEhC,WAAShB,EAAaD,CAAA,EATlBiB,CAAA,CAYX,CAAC,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Rating.cjs","sources":["../../../src/components/rating/Rating.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback } from 'react';\nimport { cn } from '../../utils';\nimport './Rating.css';\n\n/* ============================================================\n * Default Icons (Crisp, scalable SVGs)\n * ============================================================ */\nconst DefaultStarEmpty = (\n  <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon>\n  </svg>\n);\n\nconst DefaultStarFilled = (\n  <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon>\n  </svg>\n);\n\n/* ============================================================\n * Types\n * ============================================================ */\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Controlled state value */\n  value?: number;\n  /** Uncontrolled initial value */\n  defaultValue?: number;\n  /** The maximum possible rating. Determines how many icons to render. Defaults to 5. */\n  max?: number;\n  /** Callback fired when a rating is selected */\n  onChange?: (value: number) => void;\n  /** Custom React node for the empty state */\n  icon?: React.ReactNode;\n  /** Custom React node for the filled state */\n  iconFilled?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Makes the rating strictly decorative */\n  readOnly?: boolean;\n  /** Disables interactions and applies a muted style */\n  disabled?: boolean;\n  /** Enables fractional half-step selections (e.g., 3.5 stars) */\n  allowHalf?: boolean; \n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Rating Component\n * * A WAI-ARIA compliant slider that allows users to provide a numerical rating.\n * * Architecture Note (Fractional Display):\n * The component supports infinitely precise fractional rendering (e.g., 4.7 stars). \n * It achieves this by overlaying an `absolute` filled icon on top of the empty icon \n * and using CSS `overflow: hidden` combined with an inline `width: X%` style to \"clip\" the SVG.\n */\nexport function Rating({\n  value,\n  defaultValue = 0,\n  max = 5,\n  onChange,\n  icon = DefaultStarEmpty,\n  iconFilled = DefaultStarFilled,\n  size = 'md',\n  readOnly = false,\n  disabled = false,\n  allowHalf = false,\n  className,\n  ...props\n}: RatingProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const current = isControlled ? value : internalValue;\n\n  const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n  // If hovering, temporarily show the hover value for visual feedback\n  const displayValue = hoverValue !== null ? hoverValue : current;\n\n  /* ----------------------------------------------------\n     Event Handlers\n  ---------------------------------------------------- */\n  const handleSelect = useCallback((v: number) => {\n    if (readOnly || disabled) return;\n    if (!isControlled) setInternalValue(v);\n    onChange?.(v);\n  }, [readOnly, disabled, isControlled, onChange]);\n\n  const handlePointerMove = (e: React.PointerEvent<HTMLSpanElement>, index: number) => {\n    if (readOnly || disabled) return;\n    \n    // Calculate if we are hovering over the left half or right half of the star\n    if (allowHalf) {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const isLeftHalf = x < rect.width / 2;\n      setHoverValue(isLeftHalf ? index - 0.5 : index);\n    } else {\n      setHoverValue(index);\n    }\n  };\n\n  const handlePointerLeave = () => {\n    if (readOnly || disabled) return;\n    setHoverValue(null);\n  };\n\n  const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (readOnly || disabled) return;\n\n    const step = allowHalf ? 0.5 : 1;\n    let nextValue = current;\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      nextValue = Math.min(current + step, max);\n      e.preventDefault();\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      nextValue = Math.max(current - step, 0);\n      e.preventDefault();\n    } else if (e.key === 'Home') {\n      nextValue = 0;\n      e.preventDefault();\n    } else if (e.key === 'End') {\n      nextValue = max;\n      e.preventDefault();\n    }\n\n    if (nextValue !== current) {\n      handleSelect(nextValue);\n    }\n  };\n\n  /* ----------------------------------------------------\n     Render Math\n  ---------------------------------------------------- */\n  return (\n    <div\n      className={cn(\n        \"nui-rating\",\n        `nui-rating--${size}`,\n        readOnly && \"nui-rating--readonly\",\n        disabled && \"nui-rating--disabled\",\n        className\n      )}\n      role=\"slider\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={current}\n      aria-disabled={disabled || undefined}\n      aria-readonly={readOnly || undefined}\n      tabIndex={readOnly || disabled ? -1 : 0}\n      onKeyDown={handleKey}\n      onPointerLeave={handlePointerLeave}\n      {...props}\n    >\n      {Array.from({ length: max }, (_, i) => {\n        const starIndex = i + 1;\n        \n        // Calculate exact fill percentage for fractional display (e.g., 4.7)\n        let fillPercent = 0;\n        if (displayValue >= starIndex) {\n          fillPercent = 100;\n        } else if (displayValue > starIndex - 1) {\n          fillPercent = (displayValue - (starIndex - 1)) * 100;\n        }\n\n        return (\n          <span\n            key={starIndex}\n            data-testid=\"star-item\"\n            className=\"nui-rating-item\"\n            onPointerMove={(e) => handlePointerMove(e, starIndex)}\n            onClick={() => handleSelect(hoverValue ?? starIndex)}\n          >\n            {/* 1. Base Empty Icon */}\n            <span className=\"nui-rating-icon-empty\">\n              {icon}\n            </span>\n            \n            {/* 2. Absolute Overlay Filled Icon (Clipped by width math) */}\n            <span \n              className=\"nui-rating-icon-filled\"\n              style={{ width: `${fillPercent}%` }}\n            >\n              {iconFilled}\n            </span>\n          </span>\n        );\n      })}\n    </div>\n  );\n}"],"names":["DefaultStarEmpty","jsx","DefaultStarFilled","Rating","value","defaultValue","max","onChange","icon","iconFilled","size","readOnly","disabled","allowHalf","className","props","isControlled","internalValue","setInternalValue","useState","current","hoverValue","setHoverValue","displayValue","handleSelect","useCallback","v","handlePointerMove","index","rect","isLeftHalf","handlePointerLeave","handleKey","step","nextValue","cn","_","starIndex","fillPercent","jsxs","e"],"mappings":"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"}

package/dist/components/rating/Rating.js

@@ -1,49 +1,88 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as c } from "react";
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { useState as k, useCallback as S } from "react";
 /* empty css           */
-function A({
-  value: o,
-  max: i = 5,
-  onChange: d,
-  icon: u = "☆",
-  iconFilled: f = "★",
-  size: m = "md",
-  className: h = ""
+import { cn as B } from "../../utils/cn/cn.js";
+const I = /* @__PURE__ */ o("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ o("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), R = /* @__PURE__ */ o("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ o("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) });
+function $({
+  value: m,
+  defaultValue: w = 0,
+  max: a = 5,
+  onChange: p,
+  icon: y = I,
+  iconFilled: D = R,
+  size: L = "md",
+  readOnly: n = !1,
+  disabled: r = !1,
+  allowHalf: v = !1,
+  className: x,
+  ...C
 }) {
-  const [g, p] = c(0), t = o ?? g, [x, a] = c(null), y = x ?? t, r = (e) => {
-    o === void 0 && p(e), d?.(e);
-  }, k = (e) => {
-    e.key === "ArrowRight" && r(Math.min((t ?? 0) + 1, i)), e.key === "ArrowLeft" && r(Math.max((t ?? 0) - 1, 1));
+  const u = m !== void 0, [V, A] = k(w), l = u ? m : V, [c, f] = k(null), h = c !== null ? c : l, g = S((e) => {
+    n || r || (u || A(e), p?.(e));
+  }, [n, r, u, p]), P = (e, i) => {
+    if (!(n || r))
+      if (v) {
+        const t = e.currentTarget.getBoundingClientRect(), d = e.clientX - t.left < t.width / 2;
+        f(d ? i - 0.5 : i);
+      } else
+        f(i);
+  }, j = () => {
+    n || r || f(null);
+  }, M = (e) => {
+    if (n || r) return;
+    const i = v ? 0.5 : 1;
+    let t = l;
+    e.key === "ArrowRight" || e.key === "ArrowUp" ? (t = Math.min(l + i, a), e.preventDefault()) : e.key === "ArrowLeft" || e.key === "ArrowDown" ? (t = Math.max(l - i, 0), e.preventDefault()) : e.key === "Home" ? (t = 0, e.preventDefault()) : e.key === "End" && (t = a, e.preventDefault()), t !== l && g(t);
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `ui-rating ui-rating--${m} ${h}`,
-      role: "radiogroup",
-      tabIndex: 0,
-      onKeyDown: k,
-      "aria-label": "Rating",
-      children: Array.from({ length: i }, (e, M) => {
-        const n = M + 1, l = n <= y;
-        return /* @__PURE__ */ s(
+      className: B(
+        "nui-rating",
+        `nui-rating--${L}`,
+        n && "nui-rating--readonly",
+        r && "nui-rating--disabled",
+        x
+      ),
+      role: "slider",
+      "aria-valuemin": 0,
+      "aria-valuemax": a,
+      "aria-valuenow": l,
+      "aria-disabled": r || void 0,
+      "aria-readonly": n || void 0,
+      tabIndex: n || r ? -1 : 0,
+      onKeyDown: M,
+      onPointerLeave: j,
+      ...C,
+      children: Array.from({ length: a }, (e, i) => {
+        const t = i + 1;
+        let s = 0;
+        return h >= t ? s = 100 : h > t - 1 && (s = (h - (t - 1)) * 100), /* @__PURE__ */ N(
           "span",
           {
-            role: "radio",
-            "aria-checked": t === n,
-            tabIndex: -1,
-            className: `ui-rating-item ${l ? "filled" : ""}`,
-            onMouseEnter: () => a(n),
-            onMouseLeave: () => a(null),
-            onClick: () => r(n),
-            children: l ? f : u
+            "data-testid": "star-item",
+            className: "nui-rating-item",
+            onPointerMove: (d) => P(d, t),
+            onClick: () => g(c ?? t),
+            children: [
+              /* @__PURE__ */ o("span", { className: "nui-rating-icon-empty", children: y }),
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "nui-rating-icon-filled",
+                  style: { width: `${s}%` },
+                  children: D
+                }
+              )
+            ]
           },
-          n
+          t
         );
       })
     }
   );
 }
 export {
-  A as Rating
+  $ as Rating
 };
 //# sourceMappingURL=Rating.js.map

package/dist/components/rating/Rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.js","sources":["../../../src/components/rating/Rating.tsx"],"sourcesContent":["/**\r\n * Rating.tsx — FINAL VERSION\r\n * ---------------------------\r\n * Features:\r\n * - Click to select\r\n * - Hover preview\r\n * - Keyboard navigation\r\n * - Theme-aware\r\n * - Accessible\r\n */\r\n\r\nimport React, { useState } from 'react';\r\nimport './Rating.css';\r\n\r\nexport interface RatingProps {\r\n  /** Current value (1–max). If undefined → uncontrolled mode */\r\n  value?: number;\r\n\r\n  /** Max number of stars */\r\n  max?: number;\r\n\r\n  /** Change handler */\r\n  onChange?: (value: number) => void;\r\n\r\n  /** Custom icon */\r\n  icon?: React.ReactNode;\r\n\r\n  /** Custom filled icon */\r\n  iconFilled?: React.ReactNode;\r\n\r\n  /** Size */\r\n  size?: 'sm' | 'md' | 'lg';\r\n\r\n  /** Optional class */\r\n  className?: string;\r\n}\r\n\r\nexport function Rating({\r\n  value,\r\n  max = 5,\r\n  onChange,\r\n  icon = '☆',\r\n  iconFilled = '★',\r\n  size = 'md',\r\n  className = '',\r\n}: RatingProps) {\r\n  // uncontrolled internal value\r\n  const [internal, setInternal] = useState(0);\r\n  const current = value ?? internal;\r\n\r\n  const [hover, setHover] = useState<number | null>(null);\r\n\r\n  const finalValue = hover ?? current;\r\n\r\n  const handleSelect = (v: number) => {\r\n    if (value === undefined) setInternal(v);\r\n    onChange?.(v);\r\n  };\r\n\r\n  const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'ArrowRight') handleSelect(Math.min((current ?? 0) + 1, max));\r\n    if (e.key === 'ArrowLeft') handleSelect(Math.max((current ?? 0) - 1, 1));\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`ui-rating ui-rating--${size} ${className}`}\r\n      role=\"radiogroup\"\r\n      tabIndex={0}\r\n      onKeyDown={handleKey}\r\n      aria-label=\"Rating\"\r\n    >\r\n      {Array.from({ length: max }, (_, i) => {\r\n        const index = i + 1;\r\n        const filled = index <= finalValue;\r\n\r\n        return (\r\n          <span\r\n            key={index}\r\n            role=\"radio\"\r\n            aria-checked={current === index}\r\n            tabIndex={-1}\r\n            className={`ui-rating-item ${filled ? 'filled' : ''}`}\r\n            onMouseEnter={() => setHover(index)}\r\n            onMouseLeave={() => setHover(null)}\r\n            onClick={() => handleSelect(index)}\r\n          >\r\n            {filled ? iconFilled : icon}\r\n          </span>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Rating","value","max","onChange","icon","iconFilled","size","className","internal","setInternal","useState","current","hover","setHover","finalValue","handleSelect","v","handleKey","jsx","_","i","index","filled"],"mappings":";;;AAqCO,SAASA,EAAO;AAAA,EACrB,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AACd,GAAgB;AAEd,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,CAAC,GACpCC,IAAUV,KAASO,GAEnB,CAACI,GAAOC,CAAQ,IAAIH,EAAwB,IAAI,GAEhDI,IAAaF,KAASD,GAEtBI,IAAe,CAACC,MAAc;AAClC,IAAIf,MAAU,UAAWQ,EAAYO,CAAC,GACtCb,IAAWa,CAAC;AAAA,EACd,GAEMC,IAAY,CAAC,MAA2C;AAC5D,IAAI,EAAE,QAAQ,gBAAcF,EAAa,KAAK,KAAKJ,KAAW,KAAK,GAAGT,CAAG,CAAC,GACtE,EAAE,QAAQ,eAAaa,EAAa,KAAK,KAAKJ,KAAW,KAAK,GAAG,CAAC,CAAC;AAAA,EACzE;AAEA,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,wBAAwBZ,CAAI,IAAIC,CAAS;AAAA,MACpD,MAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAWU;AAAA,MACX,cAAW;AAAA,MAEV,UAAA,MAAM,KAAK,EAAE,QAAQf,KAAO,CAACiB,GAAGC,MAAM;AACrC,cAAMC,IAAQD,IAAI,GACZE,IAASD,KAASP;AAExB,eACE,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,gBAAcP,MAAYU;AAAA,YAC1B,UAAU;AAAA,YACV,WAAW,kBAAkBC,IAAS,WAAW,EAAE;AAAA,YACnD,cAAc,MAAMT,EAASQ,CAAK;AAAA,YAClC,cAAc,MAAMR,EAAS,IAAI;AAAA,YACjC,SAAS,MAAME,EAAaM,CAAK;AAAA,YAEhC,cAAShB,IAAaD;AAAA,UAAA;AAAA,UATlBiB;AAAA,QAAA;AAAA,MAYX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Rating.js","sources":["../../../src/components/rating/Rating.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback } from 'react';\nimport { cn } from '../../utils';\nimport './Rating.css';\n\n/* ============================================================\n * Default Icons (Crisp, scalable SVGs)\n * ============================================================ */\nconst DefaultStarEmpty = (\n  <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon>\n  </svg>\n);\n\nconst DefaultStarFilled = (\n  <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"></polygon>\n  </svg>\n);\n\n/* ============================================================\n * Types\n * ============================================================ */\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Controlled state value */\n  value?: number;\n  /** Uncontrolled initial value */\n  defaultValue?: number;\n  /** The maximum possible rating. Determines how many icons to render. Defaults to 5. */\n  max?: number;\n  /** Callback fired when a rating is selected */\n  onChange?: (value: number) => void;\n  /** Custom React node for the empty state */\n  icon?: React.ReactNode;\n  /** Custom React node for the filled state */\n  iconFilled?: React.ReactNode;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Makes the rating strictly decorative */\n  readOnly?: boolean;\n  /** Disables interactions and applies a muted style */\n  disabled?: boolean;\n  /** Enables fractional half-step selections (e.g., 3.5 stars) */\n  allowHalf?: boolean; \n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Rating Component\n * * A WAI-ARIA compliant slider that allows users to provide a numerical rating.\n * * Architecture Note (Fractional Display):\n * The component supports infinitely precise fractional rendering (e.g., 4.7 stars). \n * It achieves this by overlaying an `absolute` filled icon on top of the empty icon \n * and using CSS `overflow: hidden` combined with an inline `width: X%` style to \"clip\" the SVG.\n */\nexport function Rating({\n  value,\n  defaultValue = 0,\n  max = 5,\n  onChange,\n  icon = DefaultStarEmpty,\n  iconFilled = DefaultStarFilled,\n  size = 'md',\n  readOnly = false,\n  disabled = false,\n  allowHalf = false,\n  className,\n  ...props\n}: RatingProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const current = isControlled ? value : internalValue;\n\n  const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n  // If hovering, temporarily show the hover value for visual feedback\n  const displayValue = hoverValue !== null ? hoverValue : current;\n\n  /* ----------------------------------------------------\n     Event Handlers\n  ---------------------------------------------------- */\n  const handleSelect = useCallback((v: number) => {\n    if (readOnly || disabled) return;\n    if (!isControlled) setInternalValue(v);\n    onChange?.(v);\n  }, [readOnly, disabled, isControlled, onChange]);\n\n  const handlePointerMove = (e: React.PointerEvent<HTMLSpanElement>, index: number) => {\n    if (readOnly || disabled) return;\n    \n    // Calculate if we are hovering over the left half or right half of the star\n    if (allowHalf) {\n      const rect = e.currentTarget.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const isLeftHalf = x < rect.width / 2;\n      setHoverValue(isLeftHalf ? index - 0.5 : index);\n    } else {\n      setHoverValue(index);\n    }\n  };\n\n  const handlePointerLeave = () => {\n    if (readOnly || disabled) return;\n    setHoverValue(null);\n  };\n\n  const handleKey = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (readOnly || disabled) return;\n\n    const step = allowHalf ? 0.5 : 1;\n    let nextValue = current;\n\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      nextValue = Math.min(current + step, max);\n      e.preventDefault();\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      nextValue = Math.max(current - step, 0);\n      e.preventDefault();\n    } else if (e.key === 'Home') {\n      nextValue = 0;\n      e.preventDefault();\n    } else if (e.key === 'End') {\n      nextValue = max;\n      e.preventDefault();\n    }\n\n    if (nextValue !== current) {\n      handleSelect(nextValue);\n    }\n  };\n\n  /* ----------------------------------------------------\n     Render Math\n  ---------------------------------------------------- */\n  return (\n    <div\n      className={cn(\n        \"nui-rating\",\n        `nui-rating--${size}`,\n        readOnly && \"nui-rating--readonly\",\n        disabled && \"nui-rating--disabled\",\n        className\n      )}\n      role=\"slider\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={current}\n      aria-disabled={disabled || undefined}\n      aria-readonly={readOnly || undefined}\n      tabIndex={readOnly || disabled ? -1 : 0}\n      onKeyDown={handleKey}\n      onPointerLeave={handlePointerLeave}\n      {...props}\n    >\n      {Array.from({ length: max }, (_, i) => {\n        const starIndex = i + 1;\n        \n        // Calculate exact fill percentage for fractional display (e.g., 4.7)\n        let fillPercent = 0;\n        if (displayValue >= starIndex) {\n          fillPercent = 100;\n        } else if (displayValue > starIndex - 1) {\n          fillPercent = (displayValue - (starIndex - 1)) * 100;\n        }\n\n        return (\n          <span\n            key={starIndex}\n            data-testid=\"star-item\"\n            className=\"nui-rating-item\"\n            onPointerMove={(e) => handlePointerMove(e, starIndex)}\n            onClick={() => handleSelect(hoverValue ?? starIndex)}\n          >\n            {/* 1. Base Empty Icon */}\n            <span className=\"nui-rating-icon-empty\">\n              {icon}\n            </span>\n            \n            {/* 2. Absolute Overlay Filled Icon (Clipped by width math) */}\n            <span \n              className=\"nui-rating-icon-filled\"\n              style={{ width: `${fillPercent}%` }}\n            >\n              {iconFilled}\n            </span>\n          </span>\n        );\n      })}\n    </div>\n  );\n}"],"names":["DefaultStarEmpty","jsx","DefaultStarFilled","Rating","value","defaultValue","max","onChange","icon","iconFilled","size","readOnly","disabled","allowHalf","className","props","isControlled","internalValue","setInternalValue","useState","current","hoverValue","setHoverValue","displayValue","handleSelect","useCallback","v","handlePointerMove","index","rect","isLeftHalf","handlePointerLeave","handleKey","step","nextValue","cn","_","starIndex","fillPercent","jsxs","e"],"mappings":"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"}

package/dist/components/resizable/Resizable.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),u=require("react");;/* empty css                */const P=require("../../utils/cn/cn.cjs"),k=u.createContext(null);function F(){const i=u.useContext(k);if(!i)throw new Error("Resizable components must be used within <Resizable>");return i}const D=u.forwardRef(({direction:i="horizontal",onLayout:d,className:x,children:y,...f},m)=>{const o=u.useRef(null),z=u.useRef([]),g=u.useCallback((e,s)=>{const l=o.current;if(!l)return!1;const a=Array.from(l.querySelectorAll("[data-resizable-panel]")),c=Array.from(l.querySelectorAll("[data-resizable-handle]")),t=a[e],r=a[e+1];if(!t||!r)return!1;const n=z.current,S=parseFloat(t.dataset.minSize||"0"),w=parseFloat(t.dataset.maxSize||"100"),A=parseFloat(r.dataset.minSize||"0"),R=parseFloat(r.dataset.maxSize||"100"),h=Math.min(w-n[e],n[e+1]-A),p=Math.max(S-n[e],n[e+1]-R),v=Math.max(p,Math.min(h,s));return v!==0?(n[e]+=v,n[e+1]-=v,t.style.flexGrow=n[e].toString(),r.style.flexGrow=n[e+1].toString(),c[e]?.setAttribute("aria-valuenow",n[e].toFixed(0)),!0):!1},[]),M=u.useCallback((e,s)=>{s.preventDefault(),e.focus();const l=o.current;if(!l)return;const a=Array.from(l.querySelectorAll("[data-resizable-handle]")),c=a.indexOf(e);if(c===-1)return;const t=i==="horizontal",r=t?l.clientWidth:l.clientHeight,n=a.reduce((h,p)=>h+(t?p.offsetWidth:p.offsetHeight),0),S=r-n;let w=t?s.clientX:s.clientY;const A=h=>{const p=t?h.clientX:h.clientY,C=(p-w)/S*100;g(c,C),w=p},R=()=>{document.removeEventListener("pointermove",A),document.removeEventListener("pointerup",R),document.body.style.cursor="",document.body.style.userSelect="",e.removeAttribute("data-dragging"),d&&d([...z.current])};document.addEventListener("pointermove",A),document.addEventListener("pointerup",R),document.body.style.cursor=t?"col-resize":"row-resize",document.body.style.userSelect="none",e.setAttribute("data-dragging","true")},[i,d,g]),q=u.useCallback((e,s)=>{const l=o.current;if(!l)return;const c=Array.from(l.querySelectorAll("[data-resizable-handle]")).indexOf(e);if(c===-1)return;let t=0;const r=s.shiftKey?10:2;i==="horizontal"?(s.key==="ArrowRight"&&(t=r),s.key==="ArrowLeft"&&(t=-r)):(s.key==="ArrowDown"&&(t=r),s.key==="ArrowUp"&&(t=-r)),s.key==="Home"&&(t=-100),s.key==="End"&&(t=100),t!==0&&(g(c,t),d&&d([...z.current]))},[i,d,g]);return u.useLayoutEffect(()=>{const e=o.current;if(!e)return;const s=Array.from(e.querySelectorAll("[data-resizable-panel]")),l=Array.from(e.querySelectorAll("[data-resizable-handle]"));if(z.current.length!==s.length){const a=s.map(r=>parseFloat(r.dataset.defaultSize||"0")),c=a.reduce((r,n)=>r+n,0),t=a.filter(r=>r===0).length;if(t>0){const r=Math.max(0,100-c)/t;for(let n=0;n<a.length;n++)a[n]===0&&(a[n]=r)}z.current=a}s.forEach((a,c)=>{a.style.flexGrow=z.current[c].toString(),a.style.flexBasis="0px"}),l.forEach((a,c)=>{a.setAttribute("aria-valuenow",z.current[c].toFixed(0))})},[y]),b.jsx(k.Provider,{value:{direction:i,startDrag:M,keyboardResize:q},children:b.jsx("div",{ref:e=>{o.current=e,typeof m=="function"?m(e):m&&(m.current=e)},"data-direction":i,className:P.cn("nui-resizable-group",x),...f,children:y})})});D.displayName="Resizable";const j=u.forwardRef(({defaultSize:i,minSize:d=0,maxSize:x=100,className:y,children:f,...m},o)=>b.jsx("div",{ref:o,"data-resizable-panel":!0,"data-default-size":i,"data-min-size":d,"data-max-size":x,className:P.cn("nui-resizable-panel",y),...m,children:f}));j.displayName="Resizable.Panel";const H=u.forwardRef(({withIcon:i=!1,className:d,...x},y)=>{const f=F(),m=o=>{["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(o.key)&&(o.preventDefault(),f.keyboardResize(o.currentTarget,o))};return b.jsx("div",{ref:y,"data-resizable-handle":!0,role:"separator","aria-orientation":f.direction,tabIndex:0,onPointerDown:o=>f.startDrag(o.currentTarget,o),onKeyDown:m,className:P.cn("nui-resizable-handle",d),...x,children:i&&b.jsx("div",{className:"nui-resizable-handle-icon","aria-hidden":"true",children:b.jsx("svg",{width:"15",height:"15",viewBox:"0 0 15 15",fill:"none",stroke:"currentColor",children:f.direction==="horizontal"?b.jsx("path",{d:"M5.5 4.5V10.5M9.5 4.5V10.5",strokeLinecap:"round"}):b.jsx("path",{d:"M4.5 5.5H10.5M4.5 9.5H10.5",strokeLinecap:"round"})})})})});H.displayName="Resizable.Handle";const N=Object.assign(D,{Panel:j,Handle:H});exports.Resizable=N;
+//# sourceMappingURL=Resizable.cjs.map

package/dist/components/resizable/Resizable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.cjs","sources":["../../../src/components/resizable/Resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { createContext, useContext, useRef, useCallback, useLayoutEffect, forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Resizable.css';\n\n/* ============================================================\n * Context\n * ============================================================ */\n\ninterface ResizableContextValue {\n  direction: 'horizontal' | 'vertical';\n  startDrag: (handleElement: HTMLElement, e: React.PointerEvent) => void;\n  keyboardResize: (handleElement: HTMLElement, e: React.KeyboardEvent) => void;\n}\n\nconst ResizableContext = createContext<ResizableContextValue | null>(null);\n\nfunction useResizable() {\n  const ctx = useContext(ResizableContext);\n  if (!ctx) throw new Error('Resizable components must be used within <Resizable>');\n  return ctx;\n}\n\n/* ============================================================\n * 1. Resizable Group (Root)\n * ============================================================ */\n\nexport interface ResizableProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The flex layout direction. Defaults to 'horizontal'. */\n  direction?: 'horizontal' | 'vertical';\n  /** Callback fired when the user completes a resize action, providing an array of panel sizes (percentages) */\n  onLayout?: (sizes: number[]) => void;\n}\n\n/**\n * Resizable Component (Root)\n * * A Compound Component wrapper that manages the complex math and event delegation \n * required to dynamically resize panels via pointer or keyboard.\n */\nconst ResizableRoot = forwardRef<HTMLDivElement, ResizableProps>(({\n  direction = 'horizontal',\n  onLayout,\n  className,\n  children,\n  ...props\n}, ref) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  \n  // We store current sizes in a ref rather than state to avoid constant React re-renders during dragging (60fps performance!)\n  const currentSizes = useRef<number[]>([]);\n\n  /* ----------------------------------------------------\n     Core Math Engine\n  ---------------------------------------------------- */\n  const resizePanels = useCallback((handleIndex: number, deltaPct: number) => {\n    const container = containerRef.current;\n    if (!container) return false;\n\n    const panels = Array.from(container.querySelectorAll('[data-resizable-panel]')) as HTMLElement[];\n    const handles = Array.from(container.querySelectorAll('[data-resizable-handle]')) as HTMLElement[];\n\n    const panelA = panels[handleIndex];\n    const panelB = panels[handleIndex + 1];\n    if (!panelA || !panelB) return false;\n\n    const startSizes = currentSizes.current;\n    \n    // Read constraints from DOM attributes\n    const minA = parseFloat(panelA.dataset.minSize || '0');\n    const maxA = parseFloat(panelA.dataset.maxSize || '100');\n    const minB = parseFloat(panelB.dataset.minSize || '0');\n    const maxB = parseFloat(panelB.dataset.maxSize || '100');\n\n    // Calculate maximum allowable movement based on panel constraints\n    const maxDeltaRight = Math.min(maxA - startSizes[handleIndex], startSizes[handleIndex + 1] - minB);\n    const maxDeltaLeft = Math.max(minA - startSizes[handleIndex], startSizes[handleIndex + 1] - maxB);\n\n    // Clamp the requested delta to the allowed range\n    const allowedDelta = Math.max(maxDeltaLeft, Math.min(maxDeltaRight, deltaPct));\n\n    if (allowedDelta !== 0) {\n      startSizes[handleIndex] += allowedDelta;\n      startSizes[handleIndex + 1] -= allowedDelta;\n\n      // Apply sizes directly to DOM for performance\n      panelA.style.flexGrow = startSizes[handleIndex].toString();\n      panelB.style.flexGrow = startSizes[handleIndex + 1].toString();\n      \n      // Update WAI-ARIA states\n      handles[handleIndex]?.setAttribute('aria-valuenow', startSizes[handleIndex].toFixed(0));\n      return true;\n    }\n    return false;\n  }, []);\n\n  /* ----------------------------------------------------\n     Pointer Event Listeners\n  ---------------------------------------------------- */\n  const startDrag = useCallback((handleElement: HTMLElement, e: React.PointerEvent) => {\n    e.preventDefault();\n    \n    // Because preventDefault() stops the browser from naturally focusing the element,\n    // we MUST manually force focus so the user's arrow keys start working immediately!\n    handleElement.focus(); \n    \n    const container = containerRef.current;\n    if (!container) return;\n\n    const handles = Array.from(container.querySelectorAll('[data-resizable-handle]')) as HTMLElement[];\n    const handleIndex = handles.indexOf(handleElement);\n    if (handleIndex === -1) return;\n\n    const isHorizontal = direction === 'horizontal';\n    const availablePx = isHorizontal ? container.clientWidth : container.clientHeight;\n    \n    // We must subtract the size of the handles themselves so the math calculates percentage of *free* space\n    const totalHandlePx = handles.reduce((acc, h) => acc + (isHorizontal ? h.offsetWidth : h.offsetHeight), 0);\n    const flexAvailable = availablePx - totalHandlePx;\n\n    let lastPos = isHorizontal ? e.clientX : e.clientY;\n\n    const handlePointerMove = (moveEvent: PointerEvent) => {\n      const currentPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;\n      const deltaPx = currentPos - lastPos;\n      \n      // Convert physical pixel delta to a percentage of the flex container\n      const deltaPct = (deltaPx / flexAvailable) * 100;\n\n      resizePanels(handleIndex, deltaPct);\n      lastPos = currentPos;\n    };\n\n    const handlePointerUp = () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n      document.removeEventListener('pointerup', handlePointerUp);\n      \n      // Restore default cursor interactions\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      handleElement.removeAttribute('data-dragging');\n      \n      if (onLayout) onLayout([...currentSizes.current]);\n    };\n\n    // Attach listeners to document so drag continues even if mouse leaves the handle hitbox\n    document.addEventListener('pointermove', handlePointerMove);\n    document.addEventListener('pointerup', handlePointerUp);\n    \n    document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';\n    document.body.style.userSelect = 'none';\n    handleElement.setAttribute('data-dragging', 'true');\n  }, [direction, onLayout, resizePanels]);\n\n  /* ----------------------------------------------------\n     Keyboard Navigation Engine (WAI-ARIA)\n  ---------------------------------------------------- */\n  const keyboardResize = useCallback((handleElement: HTMLElement, e: React.KeyboardEvent) => {\n    const container = containerRef.current;\n    if (!container) return;\n    \n    const handles = Array.from(container.querySelectorAll('[data-resizable-handle]')) as HTMLElement[];\n    const handleIndex = handles.indexOf(handleElement);\n    if (handleIndex === -1) return;\n\n    let deltaPct = 0;\n    const step = e.shiftKey ? 10 : 2; // Modern UX: Shift + Arrow jumps by 10%\n\n    // 1. Directional locking\n    if (direction === 'horizontal') {\n      if (e.key === 'ArrowRight') deltaPct = step;\n      if (e.key === 'ArrowLeft') deltaPct = -step;\n    } else {\n      if (e.key === 'ArrowDown') deltaPct = step;\n      if (e.key === 'ArrowUp') deltaPct = -step;\n    }\n\n    // 2. Absolute limits (Home/End)\n    if (e.key === 'Home') deltaPct = -100; // Will be mathematically clamped by resizePanels\n    if (e.key === 'End') deltaPct = 100;\n\n    if (deltaPct !== 0) {\n      resizePanels(handleIndex, deltaPct);\n      if (onLayout) onLayout([...currentSizes.current]);\n    }\n  }, [direction, onLayout, resizePanels]);\n\n  /* ----------------------------------------------------\n     Initialization\n  ---------------------------------------------------- */\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const panels = Array.from(container.querySelectorAll('[data-resizable-panel]')) as HTMLElement[];\n    const handles = Array.from(container.querySelectorAll('[data-resizable-handle]')) as HTMLElement[];\n\n    // Only initialize if we haven't already (or if the number of panels changes)\n    if (currentSizes.current.length !== panels.length) {\n      const initial = panels.map(p => parseFloat(p.dataset.defaultSize || '0'));\n      const total = initial.reduce((a, b) => a + b, 0);\n      const unassignedCount = initial.filter(s => s === 0).length;\n\n      // Distribute remaining space evenly among panels without a defaultSize\n      if (unassignedCount > 0) {\n        const share = Math.max(0, 100 - total) / unassignedCount;\n        for (let i = 0; i < initial.length; i++) {\n          if (initial[i] === 0) initial[i] = share;\n        }\n      }\n      currentSizes.current = initial;\n    }\n\n    // Apply initialized sizes\n    panels.forEach((p, i) => {\n      p.style.flexGrow = currentSizes.current[i].toString();\n      p.style.flexBasis = '0px'; \n    });\n\n    handles.forEach((h, i) => {\n      h.setAttribute('aria-valuenow', currentSizes.current[i].toFixed(0));\n    });\n  }, [children]);\n\n  return (\n    <ResizableContext.Provider value={{ direction, startDrag, keyboardResize }}>\n      <div\n        ref={(el) => {\n          containerRef.current = el;\n          if (typeof ref === 'function') ref(el);\n          else if (ref) ref.current = el;\n        }}\n        data-direction={direction}\n        className={cn(\"nui-resizable-group\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </ResizableContext.Provider>\n  );\n});\nResizableRoot.displayName = 'Resizable';\n\n/* ============================================================\n * 2. Resizable Panel\n * ============================================================ */\n\nexport interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The initial size of the panel as a percentage of the available space (0-100) */\n  defaultSize?: number; \n  /** The absolute minimum size the panel can shrink to */\n  minSize?: number;     \n  /** The absolute maximum size the panel can grow to */\n  maxSize?: number;     \n}\n\nconst ResizablePanel = forwardRef<HTMLDivElement, ResizablePanelProps>(({\n  defaultSize,\n  minSize = 0,\n  maxSize = 100,\n  className,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      data-resizable-panel\n      data-default-size={defaultSize}\n      data-min-size={minSize}\n      data-max-size={maxSize}\n      className={cn(\"nui-resizable-panel\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\nResizablePanel.displayName = 'Resizable.Panel';\n\n/* ============================================================\n * 3. Resizable Handle\n * ============================================================ */\n\nexport interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Renders a visual grip icon in the center of the handle */\n  withIcon?: boolean; \n}\n\nconst ResizableHandle = forwardRef<HTMLDivElement, ResizableHandleProps>(({\n  withIcon = false,\n  className,\n  ...props\n}, ref) => {\n  const ctx = useResizable();\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // Intercept standard split-view control keys\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {\n      e.preventDefault();\n      ctx.keyboardResize(e.currentTarget, e); // Pass the full event for e.shiftKey\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-resizable-handle\n      role=\"separator\"\n      aria-orientation={ctx.direction}\n      tabIndex={0}\n      onPointerDown={(e) => ctx.startDrag(e.currentTarget, e)}\n      onKeyDown={handleKeyDown}\n      className={cn(\"nui-resizable-handle\", className)}\n      {...props}\n    >\n      {withIcon && (\n        <div className=\"nui-resizable-handle-icon\" aria-hidden=\"true\">\n          <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" stroke=\"currentColor\">\n            {ctx.direction === 'horizontal' ? (\n              <path d=\"M5.5 4.5V10.5M9.5 4.5V10.5\" strokeLinecap=\"round\" />\n            ) : (\n              <path d=\"M4.5 5.5H10.5M4.5 9.5H10.5\" strokeLinecap=\"round\" />\n            )}\n          </svg>\n        </div>\n      )}\n    </div>\n  );\n});\nResizableHandle.displayName = 'Resizable.Handle';\n\n/* ============================================================\n * Export\n * ============================================================ */\n\nexport const Resizable = Object.assign(ResizableRoot, {\n  Panel: ResizablePanel,\n  Handle: ResizableHandle,\n});"],"names":["ResizableContext","createContext","useResizable","ctx","useContext","ResizableRoot","forwardRef","direction","onLayout","className","children","props","ref","containerRef","useRef","currentSizes","resizePanels","useCallback","handleIndex","deltaPct","container","panels","handles","panelA","panelB","startSizes","minA","maxA","minB","maxB","maxDeltaRight","maxDeltaLeft","allowedDelta","startDrag","handleElement","e","isHorizontal","availablePx","totalHandlePx","acc","h","flexAvailable","lastPos","handlePointerMove","moveEvent","currentPos","handlePointerUp","keyboardResize","step","useLayoutEffect","initial","p","total","a","b","unassignedCount","s","share","i","jsx","el","cn","ResizablePanel","defaultSize","minSize","maxSize","ResizableHandle","withIcon","handleKeyDown","Resizable"],"mappings":"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"}