@nofinite/nui 1.1.1 → 2.0.1

package/dist/components/slider/Slider.js

@@ -1,116 +1,119 @@
-import { jsx as g, jsxs as R } from "react/jsx-runtime";
-import { useState as p, useCallback as i, useRef as S, useEffect as $ } from "react";
+import { jsx as l, jsxs as P } from "react/jsx-runtime";
+import { useState as M, useRef as D, useCallback as w, useEffect as C } from "react";
 /* empty css           */
-function I({
-  min: n = 0,
-  max: s = 100,
-  step: c = 1,
-  value: k,
-  defaultValue: M,
-  onChange: m,
-  disabled: o = !1,
-  className: V = ""
+import { cn as I } from "../../utils/cn/cn.js";
+function B({
+  min: r = 0,
+  max: a = 100,
+  step: s = 1,
+  value: v,
+  defaultValue: b,
+  onChange: f,
+  disabled: c = !1,
+  className: N,
+  ...V
+  // <-- Capture the rest of the HTML attributes (like style, id, etc.)
 }) {
-  const h = k !== void 0, [X, y] = p(M ?? n), r = h ? k : X, a = i(
-    (t) => {
-      const e = Math.min(s, Math.max(n, t)), d = Math.round(e / c) * c;
-      h || y(d), m?.(d);
+  const u = v !== void 0, [R, x] = M(b ?? r), n = Math.min(a, Math.max(r, u ? v : R)), h = D(null), m = D(null), [k, g] = M(!1), i = w(
+    (e) => {
+      const t = Math.min(a, Math.max(r, e));
+      let o = r + Math.round((t - r) / s) * s;
+      o = Number(o.toFixed(5)), u || x(o), f?.(o);
     },
-    [h, s, n, c, m]
-  ), E = S(null), D = (r - n) / (s - n) * 100, w = i(
-    (t) => {
-      const e = E.current;
-      if (!e) return r;
-      const d = e.getBoundingClientRect(), N = (t - d.left) / d.width;
-      return n + N * (s - n);
+    [u, a, r, s, f]
+  ), d = w(
+    (e) => {
+      const t = h.current;
+      if (!t) return n;
+      const o = t.getBoundingClientRect(), A = Math.max(0, Math.min(e - o.left, o.width)) / o.width;
+      return r + A * (a - r);
     },
-    [n, s, r]
-  ), [v, L] = p(!1), f = i(
-    (t) => {
-      if (o) return;
-      L(!0);
-      const e = "touches" in t ? t.touches[0].clientX : t.clientX;
-      a(w(e));
-    },
-    [o, w, a]
-  ), u = i(
-    (t) => {
-      if (!v || o) return;
-      const e = t.touches?.[0]?.clientX ?? t.clientX;
-      a(w(e));
-    },
-    [v, o, w, a]
-  ), l = i(() => {
-    L(!1);
-  }, []);
-  $(() => {
-    if (v)
-      return window.addEventListener("mousemove", u), window.addEventListener("touchmove", u), window.addEventListener("mouseup", l), window.addEventListener("touchend", l), () => {
-        window.removeEventListener("mousemove", u), window.removeEventListener("touchmove", u), window.removeEventListener("mouseup", l), window.removeEventListener("touchend", l);
-      };
-  }, [v, u, l]);
-  const A = i(
-    (t) => {
-      if (o) return;
-      let e = r;
-      switch (t.key) {
+    [r, a, n]
+  ), E = (e) => "touches" in e ? e.touches[0].clientX : e.clientX, p = (e) => {
+    c || (m.current?.focus(), g(!0), i(d(E(e))));
+  };
+  C(() => {
+    if (!k || c) return;
+    const e = (o) => {
+      i(d(E(o)));
+    }, t = () => {
+      g(!1);
+    };
+    return window.addEventListener("mousemove", e), window.addEventListener("touchmove", e, { passive: !1 }), window.addEventListener("mouseup", t), window.addEventListener("touchend", t), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("touchmove", e), window.removeEventListener("mouseup", t), window.removeEventListener("touchend", t);
+    };
+  }, [k, c, d, i]);
+  const y = w(
+    (e) => {
+      if (c) return;
+      let t = n;
+      switch (e.key) {
         case "ArrowRight":
         case "ArrowUp":
-          e = r + c;
+          t = n + s;
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          e = r - c;
+          t = n - s;
           break;
         case "PageUp":
-          e = r + c * 10;
+          t = n + s * 10;
           break;
         case "PageDown":
-          e = r - c * 10;
+          t = n - s * 10;
           break;
         case "Home":
-          e = n;
+          t = r;
           break;
         case "End":
-          e = s;
+          t = a;
           break;
         default:
           return;
       }
-      t.preventDefault(), a(e);
+      e.preventDefault(), i(t);
     },
-    [o, r, c, n, s, a]
-  );
-  return /* @__PURE__ */ g("div", { className: `ui-slider ${o ? "disabled" : ""} ${V}`, children: /* @__PURE__ */ R(
+    [c, n, s, r, a, i]
+  ), L = (n - r) / (a - r) * 100;
+  return /* @__PURE__ */ l(
     "div",
     {
-      ref: E,
-      className: "ui-slider-track",
-      onMouseDown: f,
-      onTouchStart: f,
-      children: [
-        /* @__PURE__ */ g("div", { className: "ui-slider-fill", style: { width: `${D}%` } }),
-        /* @__PURE__ */ g(
+      className: I(
+        "nui-slider-root",
+        c && "nui-slider--disabled",
+        N
+      ),
+      onMouseDown: p,
+      onTouchStart: p,
+      ...V,
+      children: /* @__PURE__ */ l("div", { className: "nui-slider-track-container", children: /* @__PURE__ */ P("div", { ref: h, className: "nui-slider-track", children: [
+        /* @__PURE__ */ l(
           "div",
           {
-            className: "ui-slider-thumb",
+            className: "nui-slider-fill",
+            style: { width: `${L}%` }
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            ref: m,
+            className: "nui-slider-thumb",
             role: "slider",
-            tabIndex: o ? -1 : 0,
-            "aria-valuemin": n,
-            "aria-valuemax": s,
-            "aria-valuenow": r,
-            "aria-disabled": o || void 0,
-            onKeyDown: A,
-            onMouseDown: f,
-            onTouchStart: f,
-            style: { left: `${D}%` }
+            tabIndex: c ? -1 : 0,
+            "aria-valuemin": r,
+            "aria-valuemax": a,
+            "aria-valuenow": n,
+            "aria-disabled": c || void 0,
+            onKeyDown: y,
+            style: { left: `${L}%` }
           }
         )
-      ]
+      ] }) })
     }
-  ) });
+  );
 }
 export {
-  I as Slider
+  B as Slider
 };
 //# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["/**\r\n * Slider.tsx\r\n * -----------\r\n * Fully accessible single-thumb slider.\r\n * WAI-ARIA compliant, supports pointer, touch, keyboard.\r\n */\r\n\r\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\r\nimport './Slider.css';\r\n\r\ninterface SliderProps {\r\n  min?: number;\r\n  max?: number;\r\n  step?: number;\r\n  value?: number;\r\n  defaultValue?: number;\r\n  onChange?: (value: number) => void;\r\n  disabled?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport function Slider({\r\n  min = 0,\r\n  max = 100,\r\n  step = 1,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  disabled = false,\r\n  className = '',\r\n}: SliderProps) {\r\n  const isControlled = value !== undefined;\r\n\r\n  const [internalValue, setInternalValue] = useState(defaultValue ?? min);\r\n\r\n  const val = isControlled ? value : internalValue;\r\n\r\n  /** Safe setter */\r\n  const setVal = useCallback(\r\n    (v: number) => {\r\n      const clamped = Math.min(max, Math.max(min, v));\r\n      const stepped = Math.round(clamped / step) * step;\r\n\r\n      if (!isControlled) setInternalValue(stepped);\r\n      onChange?.(stepped);\r\n    },\r\n    [isControlled, max, min, step, onChange]\r\n  );\r\n\r\n  const trackRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  /** Calculate percentage for UI */\r\n  const percent = ((val - min) / (max - min)) * 100;\r\n\r\n  /** Pixel → value conversion (FIXED: wrapped in useCallback) */\r\n  const pixelToValue = useCallback(\r\n    (clientX: number) => {\r\n      const track = trackRef.current;\r\n      if (!track) return val;\r\n\r\n      const rect = track.getBoundingClientRect();\r\n      const x = clientX - rect.left;\r\n      const ratio = x / rect.width;\r\n      const rawValue = min + ratio * (max - min);\r\n      return rawValue;\r\n    },\r\n    [min, max, val]\r\n  );\r\n\r\n  /** Dragging state */\r\n  const [dragging, setDragging] = useState(false);\r\n\r\n  const startDrag = useCallback(\r\n    (e: React.MouseEvent | React.TouchEvent) => {\r\n      if (disabled) return;\r\n      setDragging(true);\r\n\r\n      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;\r\n\r\n      setVal(pixelToValue(clientX));\r\n    },\r\n    [disabled, pixelToValue, setVal]\r\n  );\r\n\r\n  const onMove = useCallback(\r\n    (e: MouseEvent | TouchEvent) => {\r\n      if (!dragging || disabled) return;\r\n\r\n      const clientX =\r\n        (e as TouchEvent).touches?.[0]?.clientX ?? (e as MouseEvent).clientX;\r\n\r\n      setVal(pixelToValue(clientX));\r\n    },\r\n    [dragging, disabled, pixelToValue, setVal]\r\n  );\r\n\r\n  const endDrag = useCallback(() => {\r\n    setDragging(false);\r\n  }, []);\r\n\r\n  /** Global listeners while dragging */\r\n  useEffect(() => {\r\n    if (!dragging) return;\r\n\r\n    window.addEventListener('mousemove', onMove);\r\n    window.addEventListener('touchmove', onMove);\r\n    window.addEventListener('mouseup', endDrag);\r\n    window.addEventListener('touchend', endDrag);\r\n\r\n    return () => {\r\n      window.removeEventListener('mousemove', onMove);\r\n      window.removeEventListener('touchmove', onMove);\r\n      window.removeEventListener('mouseup', endDrag);\r\n      window.removeEventListener('touchend', endDrag);\r\n    };\r\n  }, [dragging, onMove, endDrag]);\r\n\r\n  /** Keyboard handling */\r\n  const onKeyDown = useCallback(\r\n    (e: React.KeyboardEvent) => {\r\n      if (disabled) return;\r\n\r\n      let next = val;\r\n\r\n      switch (e.key) {\r\n        case 'ArrowRight':\r\n        case 'ArrowUp':\r\n          next = val + step;\r\n          break;\r\n        case 'ArrowLeft':\r\n        case 'ArrowDown':\r\n          next = val - step;\r\n          break;\r\n        case 'PageUp':\r\n          next = val + step * 10;\r\n          break;\r\n        case 'PageDown':\r\n          next = val - step * 10;\r\n          break;\r\n        case 'Home':\r\n          next = min;\r\n          break;\r\n        case 'End':\r\n          next = max;\r\n          break;\r\n        default:\r\n          return;\r\n      }\r\n\r\n      e.preventDefault();\r\n      setVal(next);\r\n    },\r\n    [disabled, val, step, min, max, setVal]\r\n  );\r\n\r\n  return (\r\n    <div className={`ui-slider ${disabled ? 'disabled' : ''} ${className}`}>\r\n      <div\r\n        ref={trackRef}\r\n        className=\"ui-slider-track\"\r\n        onMouseDown={startDrag}\r\n        onTouchStart={startDrag}\r\n      >\r\n        <div className=\"ui-slider-fill\" style={{ width: `${percent}%` }} />\r\n\r\n        <div\r\n          className=\"ui-slider-thumb\"\r\n          role=\"slider\"\r\n          tabIndex={disabled ? -1 : 0}\r\n          aria-valuemin={min}\r\n          aria-valuemax={max}\r\n          aria-valuenow={val}\r\n          aria-disabled={disabled || undefined}\r\n          onKeyDown={onKeyDown}\r\n          onMouseDown={startDrag}\r\n          onTouchStart={startDrag}\r\n          style={{ left: `${percent}%` }}\r\n        />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Slider","min","max","step","value","defaultValue","onChange","disabled","className","isControlled","internalValue","setInternalValue","useState","val","setVal","useCallback","v","clamped","stepped","trackRef","useRef","percent","pixelToValue","clientX","track","rect","ratio","dragging","setDragging","startDrag","e","onMove","endDrag","useEffect","onKeyDown","next","jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport { cn } from '../../utils';\nimport './Slider.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** The minimum allowed value. Defaults to 0. */\n  min?: number;\n  /** The maximum allowed value. Defaults to 100. */\n  max?: number;\n  /** The interval between valid values. Defaults to 1. */\n  step?: number;\n  /** The controlled value of the slider. */\n  value?: number;\n  /** The initial uncontrolled value of the slider. */\n  defaultValue?: number;\n  /** Callback fired when the value changes. */\n  onChange?: (value: number) => void;\n  /** Disables the slider and prevents interaction. */\n  disabled?: boolean;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Slider Component\n * * A WAI-ARIA compliant input that allows users to select a value from a given range.\n * * Automatically handles global window pointer events for smooth dragging outside the hit area.\n */\nexport function Slider({\n  min = 0,\n  max = 100,\n  step = 1,\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n  className,\n  ...props // <-- Capture the rest of the HTML attributes (like style, id, etc.)\n}: SliderProps) {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState(defaultValue ?? min);\n  \n  // Safely clamp the initial/current value to prevent out-of-bounds rendering\n  const rawVal = isControlled ? value : internalValue;\n  const val = Math.min(max, Math.max(min, rawVal as number));\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const thumbRef = useRef<HTMLDivElement | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n\n  /* ----------------------------------------------------\n     Value Management\n  ---------------------------------------------------- */\n  const setVal = useCallback(\n    (v: number) => {\n      const clamped = Math.min(max, Math.max(min, v));\n      // Ensures the stepped value correctly aligns with the minimum bound\n      let stepped = min + Math.round((clamped - min) / step) * step;\n      \n      // Fixes JavaScript floating point math errors (e.g., 0.3000000000004)\n      stepped = Number(stepped.toFixed(5));\n\n      if (!isControlled) setInternalValue(stepped);\n      onChange?.(stepped);\n    },\n    [isControlled, max, min, step, onChange]\n  );\n\n  const calculateValueFromPointer = useCallback(\n    (clientX: number) => {\n      const track = trackRef.current;\n      if (!track) return val;\n\n      const rect = track.getBoundingClientRect();\n      const x = Math.max(0, Math.min(clientX - rect.left, rect.width));\n      const ratio = x / rect.width;\n      \n      return min + ratio * (max - min);\n    },\n    [min, max, val]\n  );\n\n  /* ----------------------------------------------------\n     Drag State Management\n  ---------------------------------------------------- */\n  const getClientX = (e: MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent) => {\n    return 'touches' in e ? e.touches[0].clientX : (e as MouseEvent | React.MouseEvent).clientX;\n  };\n\n  const handlePointerDown = (e: React.MouseEvent | React.TouchEvent) => {\n    if (disabled) return;\n    \n    // Instantly focus the thumb so Arrow Keys work immediately!\n    thumbRef.current?.focus(); \n    \n    setIsDragging(true);\n    setVal(calculateValueFromPointer(getClientX(e)));\n  };\n\n  // Syncs global drag listeners without memory leaks\n  useEffect(() => {\n    if (!isDragging || disabled) return;\n\n    const handleMove = (e: MouseEvent | TouchEvent) => {\n      setVal(calculateValueFromPointer(getClientX(e)));\n    };\n\n    const handleUp = () => {\n      setIsDragging(false);\n    };\n\n    window.addEventListener('mousemove', handleMove);\n    window.addEventListener('touchmove', handleMove, { passive: false });\n    window.addEventListener('mouseup', handleUp);\n    window.addEventListener('touchend', handleUp);\n\n    return () => {\n      window.removeEventListener('mousemove', handleMove);\n      window.removeEventListener('touchmove', handleMove);\n      window.removeEventListener('mouseup', handleUp);\n      window.removeEventListener('touchend', handleUp);\n    };\n  }, [isDragging, disabled, calculateValueFromPointer, setVal]);\n\n  /* ----------------------------------------------------\n     Keyboard Navigation (WAI-ARIA)\n  ---------------------------------------------------- */\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      let next = val;\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          next = val + step;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          next = val - step;\n          break;\n        case 'PageUp':\n          next = val + step * 10;\n          break;\n        case 'PageDown':\n          next = val - step * 10;\n          break;\n        case 'Home':\n          next = min;\n          break;\n        case 'End':\n          next = max;\n          break;\n        default:\n          return; // Exit if it's not a recognized key\n      }\n\n      e.preventDefault(); // Prevent page scrolling ONLY when using valid arrow keys\n      setVal(next);\n    },\n    [disabled, val, step, min, max, setVal]\n  );\n\n  /* ----------------------------------------------------\n     Render\n  ---------------------------------------------------- */\n  const percent = ((val - min) / (max - min)) * 100;\n\n  return (\n    <div \n      className={cn(\n        \"nui-slider-root\", \n        disabled && \"nui-slider--disabled\",\n        className\n      )}\n      onMouseDown={handlePointerDown}\n      onTouchStart={handlePointerDown}\n      {...props} // <-- Spread the rest of the props (including style) to the root element\n    >\n      <div className=\"nui-slider-track-container\">\n        <div ref={trackRef} className=\"nui-slider-track\">\n          \n          <div \n            className=\"nui-slider-fill\" \n            style={{ width: `${percent}%` }} \n          />\n\n          <div\n            ref={thumbRef}\n            className=\"nui-slider-thumb\"\n            role=\"slider\"\n            tabIndex={disabled ? -1 : 0}\n            aria-valuemin={min}\n            aria-valuemax={max}\n            aria-valuenow={val}\n            aria-disabled={disabled || undefined}\n            onKeyDown={onKeyDown}\n            style={{ left: `${percent}%` }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}"],"names":["Slider","min","max","step","value","defaultValue","onChange","disabled","className","props","isControlled","internalValue","setInternalValue","useState","val","trackRef","useRef","thumbRef","isDragging","setIsDragging","setVal","useCallback","v","clamped","stepped","calculateValueFromPointer","clientX","track","rect","ratio","getClientX","handlePointerDown","useEffect","handleMove","e","handleUp","onKeyDown","next","percent","jsx","cn"],"mappings":"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"}

package/dist/components/spinner/Spinner.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css              */function s({size:i="md",className:n="",label:r="Loading"}){return e.jsx("div",{className:`ui-spinner ui-spinner--${i} ${n}`,role:"status","aria-label":r,children:e.jsx("div",{className:"ui-spinner-circle"})})}exports.Spinner=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react");;/* empty css              */const o=require("../../utils/cn/cn.cjs"),r=l.forwardRef(({size:s="md",variant:i="primary",className:a,label:n="Loading...",...c},t)=>e.jsxs("div",{ref:t,role:"status","aria-label":n,className:o.cn("nui-spinner",`nui-spinner--${s}`,`nui-spinner--${i}`,a),...c,children:[e.jsxs("svg",{className:"nui-spinner__svg",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","aria-hidden":"true",children:[e.jsx("circle",{className:"nui-spinner__track",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"3"}),e.jsx("path",{className:"nui-spinner__head",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),e.jsx("span",{className:"nui-spinner__sr-only",children:n})]}));r.displayName="Spinner";exports.Spinner=r;
 //# sourceMappingURL=Spinner.cjs.map

package/dist/components/spinner/Spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["/**\r\n * Spinner.tsx — FINAL VERSION\r\n * ----------------------------\r\n * Accessible, theme-aware loading indicator.\r\n */\r\n\r\nimport './Spinner.css';\r\n\r\nexport interface SpinnerProps {\r\n  size?: 'sm' | 'md' | 'lg';\r\n  className?: string;\r\n  label?: string; // screen reader text\r\n}\r\n\r\nexport function Spinner({\r\n  size = 'md',\r\n  className = '',\r\n  label = 'Loading',\r\n}: SpinnerProps) {\r\n  return (\r\n    <div\r\n      className={`ui-spinner ui-spinner--${size} ${className}`}\r\n      role=\"status\"\r\n      aria-label={label}\r\n    >\r\n      <div className=\"ui-spinner-circle\" />\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Spinner","size","className","label","jsx"],"mappings":"kJAcO,SAASA,EAAQ,CACtB,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACV,EAAiB,CACf,OACEC,EAAAA,IAAC,MAAA,CACC,UAAW,0BAA0BH,CAAI,IAAIC,CAAS,GACtD,KAAK,SACL,aAAYC,EAEZ,SAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,CAAA,CAAA,CAGzC"}
+{"version":3,"file":"Spinner.cjs","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Spinner.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The predefined size of the spinner. Defaults to 'md'. */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** The color theme variant. Defaults to 'primary'. */\n  variant?: 'primary' | 'muted' | 'inverse';\n  /** WAI-ARIA label read by screen readers. Defaults to 'Loading...'. */\n  label?: string;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Spinner Component\n * * A visual indicator for loading states.\n * * WAI-ARIA compliant: Uses role=\"status\" to announce the loading state politely\n * to screen readers without immediately interrupting the user.\n */\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({\n  size = 'md',\n  variant = 'primary',\n  className,\n  label = 'Loading...',\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      role=\"status\"\n      aria-label={label}\n      className={cn(\n        \"nui-spinner\",\n        `nui-spinner--${size}`,\n        `nui-spinner--${variant}`,\n        className\n      )}\n      {...props}\n    >\n      <svg\n        className=\"nui-spinner__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\" /* Hide SVG itself, relying on the aria-label and hidden text */\n      >\n        {/* The faint background track */}\n        <circle\n          className=\"nui-spinner__track\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n        />\n        {/* The solid moving head */}\n        <path\n          className=\"nui-spinner__head\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      \n      {/* Visually hidden text fallback for older screen readers */}\n      <span className=\"nui-spinner__sr-only\">{label}</span>\n    </div>\n  );\n});\n\nSpinner.displayName = 'Spinner';"],"names":["Spinner","forwardRef","size","variant","className","label","props","ref","jsxs","cn","jsx"],"mappings":"8MA2BaA,EAAUC,EAAAA,WAAyC,CAAC,CAC/D,KAAAC,EAAO,KACP,QAAAC,EAAU,UACV,UAAAC,EACA,MAAAC,EAAQ,aACR,GAAGC,CACL,EAAGC,IAECC,EAAAA,KAAC,MAAA,CACC,IAAAD,EACA,KAAK,SACL,aAAYF,EACZ,UAAWI,EAAAA,GACT,cACA,gBAAgBP,CAAI,GACpB,gBAAgBC,CAAO,GACvBC,CAAA,EAED,GAAGE,EAEJ,SAAA,CAAAE,EAAAA,KAAC,MAAA,CACC,UAAU,mBACV,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,cAAY,OAGZ,SAAA,CAAAE,EAAAA,IAAC,SAAA,CACC,UAAU,qBACV,GAAG,KACH,GAAG,KACH,EAAE,KACF,OAAO,eACP,YAAY,GAAA,CAAA,EAGdA,EAAAA,IAAC,OAAA,CACC,UAAU,oBACV,KAAK,eACL,EAAE,iHAAA,CAAA,CACJ,CAAA,CAAA,EAIFA,EAAAA,IAAC,OAAA,CAAK,UAAU,uBAAwB,SAAAL,CAAA,CAAM,CAAA,CAAA,CAAA,CAGnD,EAEDL,EAAQ,YAAc"}

package/dist/components/spinner/Spinner.js

@@ -1,21 +1,64 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
 /* empty css            */
-function l({
-  size: r = "md",
-  className: n = "",
-  label: e = "Loading"
-}) {
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: `ui-spinner ui-spinner--${r} ${n}`,
-      role: "status",
-      "aria-label": e,
-      children: /* @__PURE__ */ i("div", { className: "ui-spinner-circle" })
-    }
-  );
-}
+import { cn as t } from "../../utils/cn/cn.js";
+const c = p(({
+  size: e = "md",
+  variant: s = "primary",
+  className: a,
+  label: n = "Loading...",
+  ...o
+}, l) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: l,
+    role: "status",
+    "aria-label": n,
+    className: t(
+      "nui-spinner",
+      `nui-spinner--${e}`,
+      `nui-spinner--${s}`,
+      a
+    ),
+    ...o,
+    children: [
+      /* @__PURE__ */ i(
+        "svg",
+        {
+          className: "nui-spinner__svg",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                className: "nui-spinner__track",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "3"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: "nui-spinner__head",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: "nui-spinner__sr-only", children: n })
+    ]
+  }
+));
+c.displayName = "Spinner";
 export {
-  l as Spinner
+  c as Spinner
 };
 //# sourceMappingURL=Spinner.js.map

package/dist/components/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["/**\r\n * Spinner.tsx — FINAL VERSION\r\n * ----------------------------\r\n * Accessible, theme-aware loading indicator.\r\n */\r\n\r\nimport './Spinner.css';\r\n\r\nexport interface SpinnerProps {\r\n  size?: 'sm' | 'md' | 'lg';\r\n  className?: string;\r\n  label?: string; // screen reader text\r\n}\r\n\r\nexport function Spinner({\r\n  size = 'md',\r\n  className = '',\r\n  label = 'Loading',\r\n}: SpinnerProps) {\r\n  return (\r\n    <div\r\n      className={`ui-spinner ui-spinner--${size} ${className}`}\r\n      role=\"status\"\r\n      aria-label={label}\r\n    >\r\n      <div className=\"ui-spinner-circle\" />\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Spinner","size","className","label","jsx"],"mappings":";;AAcO,SAASA,EAAQ;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AACV,GAAiB;AACf,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,0BAA0BH,CAAI,IAAIC,CAAS;AAAA,MACtD,MAAK;AAAA,MACL,cAAYC;AAAA,MAEZ,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAGzC;"}
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Spinner.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The predefined size of the spinner. Defaults to 'md'. */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /** The color theme variant. Defaults to 'primary'. */\n  variant?: 'primary' | 'muted' | 'inverse';\n  /** WAI-ARIA label read by screen readers. Defaults to 'Loading...'. */\n  label?: string;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Spinner Component\n * * A visual indicator for loading states.\n * * WAI-ARIA compliant: Uses role=\"status\" to announce the loading state politely\n * to screen readers without immediately interrupting the user.\n */\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(({\n  size = 'md',\n  variant = 'primary',\n  className,\n  label = 'Loading...',\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      role=\"status\"\n      aria-label={label}\n      className={cn(\n        \"nui-spinner\",\n        `nui-spinner--${size}`,\n        `nui-spinner--${variant}`,\n        className\n      )}\n      {...props}\n    >\n      <svg\n        className=\"nui-spinner__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\" /* Hide SVG itself, relying on the aria-label and hidden text */\n      >\n        {/* The faint background track */}\n        <circle\n          className=\"nui-spinner__track\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          strokeWidth=\"3\"\n        />\n        {/* The solid moving head */}\n        <path\n          className=\"nui-spinner__head\"\n          fill=\"currentColor\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n      \n      {/* Visually hidden text fallback for older screen readers */}\n      <span className=\"nui-spinner__sr-only\">{label}</span>\n    </div>\n  );\n});\n\nSpinner.displayName = 'Spinner';"],"names":["Spinner","forwardRef","size","variant","className","label","props","ref","jsxs","cn","jsx"],"mappings":";;;;AA2BO,MAAMA,IAAUC,EAAyC,CAAC;AAAA,EAC/D,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAAGC,MAEC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,MAAK;AAAA,IACL,cAAYF;AAAA,IACZ,WAAWI;AAAA,MACT;AAAA,MACA,gBAAgBP,CAAI;AAAA,MACpB,gBAAgBC,CAAO;AAAA,MACvBC;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,eAAY;AAAA,UAGZ,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,aAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAGd,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAIF,gBAAAA,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAL,EAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AAAA,CAGnD;AAEDL,EAAQ,cAAc;"}

package/dist/components/stepper/Stepper.cjs

@@ -1,6 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css              */function u({steps:r,active:l,onChange:c,className:p=""}){const n=t=>typeof t=="string"?t:t.label;return e.jsx("nav",{className:`ui-stepper ${p}`,"aria-label":"Progress Steps",children:e.jsx("ol",{className:"ui-stepper-list",children:r.map((t,s)=>{const i=s===l,a=s<l;return e.jsxs("li",{className:`
-                ui-stepper-item 
-                ${i?"active":""} 
-                ${a?"completed":""}
-              `,children:[e.jsxs("button",{className:"ui-stepper-button","aria-current":i?"step":void 0,onClick:()=>c?.(s),children:[e.jsx("div",{className:"ui-stepper-circle",children:a?"✓":s+1}),e.jsx("span",{className:"ui-stepper-label",children:n(t)})]}),s!==r.length-1&&e.jsx("div",{className:"ui-stepper-line"})]},s)})})})}exports.Stepper=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react");;/* empty css              */const c=require("../../utils/cn/cn.cjs"),o=b.forwardRef(({steps:u,active:i,onChange:n,className:d,disableFuture:h=!1,...m},j)=>{const _=t=>typeof t=="string"?{label:t}:t;return e.jsx("nav",{ref:j,className:c.cn("nui-stepper-root",d),"aria-label":"Progress Steps",...m,children:e.jsx("ol",{className:"nui-stepper__list",children:u.map((t,s)=>{const r=_(t),l=s===i,a=s<i,p=h&&s>i;return e.jsx("li",{className:c.cn("nui-stepper__item",l&&"active",a&&"completed"),children:e.jsxs("button",{type:"button",className:"nui-stepper__button","aria-current":l?"step":void 0,disabled:p,onClick:()=>{!p&&n&&n(s)},children:[e.jsx("div",{className:"nui-stepper__circle",children:a?e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e.jsx("polyline",{points:"20 6 9 17 4 12"})}):e.jsx("span",{"aria-hidden":"true",children:s+1})}),e.jsxs("div",{className:"nui-stepper__content",children:[e.jsxs("span",{className:"nui-stepper__label",children:[e.jsxs("span",{className:"sr-only",children:["Step ",s+1,": "]}),r.label,r.optional&&e.jsx("span",{className:"nui-stepper__optional",children:"(Optional)"})]}),r.description&&e.jsx("span",{className:"nui-stepper__description",children:r.description})]})]})},s)})})})});o.displayName="Stepper";exports.Stepper=o;
 //# sourceMappingURL=Stepper.cjs.map

package/dist/components/stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["/**\r\n * Stepper.tsx — FINAL VERSION\r\n * ----------------------------\r\n * Features:\r\n * - Linear step navigation\r\n * - Clickable steps\r\n * - Keyboard navigation\r\n * - ARIA labels\r\n * - Full theme support\r\n * - Minimal, clean API\r\n */\r\n\r\nimport React from 'react';\r\nimport './Stepper.css';\r\n\r\nexport interface StepItem {\r\n  label: React.ReactNode;\r\n}\r\n\r\nexport interface StepperProps {\r\n  steps: (string | StepItem)[];\r\n  active: number; // 0-based active index\r\n  onChange?: (index: number) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function Stepper({\r\n  steps,\r\n  active,\r\n  onChange,\r\n  className = '',\r\n}: StepperProps) {\r\n  const getLabel = (s: string | StepItem) =>\r\n    typeof s === 'string' ? s : s.label;\r\n\r\n  return (\r\n    <nav className={`ui-stepper ${className}`} aria-label=\"Progress Steps\">\r\n      <ol className=\"ui-stepper-list\">\r\n        {steps.map((step, index) => {\r\n          const isActive = index === active;\r\n          const isCompleted = index < active;\r\n\r\n          return (\r\n            <li\r\n              key={index}\r\n              className={`\r\n                ui-stepper-item \r\n                ${isActive ? 'active' : ''} \r\n                ${isCompleted ? 'completed' : ''}\r\n              `}\r\n            >\r\n              <button\r\n                className=\"ui-stepper-button\"\r\n                aria-current={isActive ? 'step' : undefined}\r\n                onClick={() => onChange?.(index)}\r\n              >\r\n                <div className=\"ui-stepper-circle\">\r\n                  {isCompleted ? '✓' : index + 1}\r\n                </div>\r\n\r\n                <span className=\"ui-stepper-label\">{getLabel(step)}</span>\r\n              </button>\r\n\r\n              {/* Connector Line */}\r\n              {index !== steps.length - 1 && (\r\n                <div className=\"ui-stepper-line\" />\r\n              )}\r\n            </li>\r\n          );\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  );\r\n}\r\n"],"names":["Stepper","steps","active","onChange","className","getLabel","s","jsx","step","index","isActive","isCompleted","jsxs"],"mappings":"kJA0BO,SAASA,EAAQ,CACtB,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,EACd,EAAiB,CACf,MAAMC,EAAYC,GAChB,OAAOA,GAAM,SAAWA,EAAIA,EAAE,MAEhC,aACG,MAAA,CAAI,UAAW,cAAcF,CAAS,GAAI,aAAW,iBACpD,SAAAG,EAAAA,IAAC,KAAA,CAAG,UAAU,kBACX,SAAAN,EAAM,IAAI,CAACO,EAAMC,IAAU,CAC1B,MAAMC,EAAWD,IAAUP,EACrBS,EAAcF,EAAQP,EAE5B,OACEU,EAAAA,KAAC,KAAA,CAEC,UAAW;AAAA;AAAA,kBAEPF,EAAW,SAAW,EAAE;AAAA,kBACxBC,EAAc,YAAc,EAAE;AAAA,gBAGlC,SAAA,CAAAC,EAAAA,KAAC,SAAA,CACC,UAAU,oBACV,eAAcF,EAAW,OAAS,OAClC,QAAS,IAAMP,IAAWM,CAAK,EAE/B,SAAA,CAAAF,MAAC,OAAI,UAAU,oBACZ,SAAAI,EAAc,IAAMF,EAAQ,EAC/B,QAEC,OAAA,CAAK,UAAU,mBAAoB,SAAAJ,EAASG,CAAI,CAAA,CAAE,CAAA,CAAA,CAAA,EAIpDC,IAAUR,EAAM,OAAS,GACxBM,EAAAA,IAAC,MAAA,CAAI,UAAU,iBAAA,CAAkB,CAAA,CAAA,EArB9BE,CAAA,CAyBX,CAAC,EACH,EACF,CAEJ"}
+{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Stepper.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface StepItem {\n  /** The primary title of the step */\n  label: React.ReactNode;\n  /** Secondary descriptive text displayed below the label */\n  description?: React.ReactNode;\n  /** Marks the step with an \"(Optional)\" tag */\n  optional?: boolean;\n}\n\nexport interface StepperProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Array of steps. Can be simple strings or rich objects. */\n  steps: (string | StepItem)[];\n  /** The 0-based index of the currently active step. */\n  active: number;\n  /** Callback fired when a step is clicked. */\n  onChange?: (index: number) => void;\n  /** Prevents the user from clicking on steps that come after the currently active one. */\n  disableFuture?: boolean; \n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Stepper Component\n * * A visual indicator for multi-step workflows.\n * * Uses standard `<nav>` and `<ol>` HTML elements for strict WAI-ARIA compliance.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(({\n  steps,\n  active,\n  onChange,\n  className,\n  disableFuture = false,\n  ...props\n}, ref) => {\n  \n  // Helper to normalize string arrays into StepItem objects\n  const getStepData = (s: string | StepItem): StepItem => {\n    if (typeof s === 'string') return { label: s };\n    return s;\n  };\n\n  return (\n    <nav \n      ref={ref}\n      className={cn(\"nui-stepper-root\", className)} \n      aria-label=\"Progress Steps\"\n      {...props}\n    >\n      <ol className=\"nui-stepper__list\">\n        {steps.map((rawStep, index) => {\n          const step = getStepData(rawStep);\n          const isActive = index === active;\n          const isCompleted = index < active;\n          const isDisabled = disableFuture && index > active;\n\n          return (\n            <li\n              key={index}\n              className={cn(\n                \"nui-stepper__item\",\n                isActive && \"active\",\n                isCompleted && \"completed\"\n              )}\n            >\n              <button\n                type=\"button\"\n                className=\"nui-stepper__button\"\n                aria-current={isActive ? 'step' : undefined}\n                disabled={isDisabled}\n                onClick={() => {\n                  if (!isDisabled && onChange) onChange(index);\n                }}\n              >\n                {/* Circle Indicator */}\n                <div className=\"nui-stepper__circle\">\n                  {isCompleted ? (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n                      <polyline points=\"20 6 9 17 4 12\"></polyline>\n                    </svg>\n                  ) : (\n                    <span aria-hidden=\"true\">{index + 1}</span>\n                  )}\n                </div>\n\n                {/* Text Content */}\n                <div className=\"nui-stepper__content\">\n                  <span className=\"nui-stepper__label\">\n                    {/* Invisible text for screen readers so they announce \"Step 1: Shipping\" */}\n                    <span className=\"sr-only\">Step {index + 1}: </span>\n                    {step.label}\n                    {step.optional && (\n                      <span className=\"nui-stepper__optional\">(Optional)</span>\n                    )}\n                  </span>\n                  {step.description && (\n                    <span className=\"nui-stepper__description\">\n                      {step.description}\n                    </span>\n                  )}\n                </div>\n              </button>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n\nStepper.displayName = 'Stepper';"],"names":["Stepper","forwardRef","steps","active","onChange","className","disableFuture","props","ref","getStepData","s","jsx","cn","rawStep","index","step","isActive","isCompleted","isDisabled","jsxs"],"mappings":"8MAqCaA,EAAUC,EAAAA,WAAsC,CAAC,CAC5D,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,UAAAC,EACA,cAAAC,EAAgB,GAChB,GAAGC,CACL,EAAGC,IAAQ,CAGT,MAAMC,EAAeC,GACf,OAAOA,GAAM,SAAiB,CAAE,MAAOA,CAAA,EACpCA,EAGT,OACEC,EAAAA,IAAC,MAAA,CACC,IAAAH,EACA,UAAWI,EAAAA,GAAG,mBAAoBP,CAAS,EAC3C,aAAW,iBACV,GAAGE,EAEJ,SAAAI,EAAAA,IAAC,MAAG,UAAU,oBACX,WAAM,IAAI,CAACE,EAASC,IAAU,CAC7B,MAAMC,EAAON,EAAYI,CAAO,EAC1BG,EAAWF,IAAUX,EACrBc,EAAcH,EAAQX,EACtBe,EAAaZ,GAAiBQ,EAAQX,EAE5C,OACEQ,EAAAA,IAAC,KAAA,CAEC,UAAWC,EAAAA,GACT,oBACAI,GAAY,SACZC,GAAe,WAAA,EAGjB,SAAAE,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAU,sBACV,eAAcH,EAAW,OAAS,OAClC,SAAUE,EACV,QAAS,IAAM,CACT,CAACA,GAAcd,GAAUA,EAASU,CAAK,CAC7C,EAGA,SAAA,CAAAH,MAAC,OAAI,UAAU,sBACZ,SAAAM,EACCN,EAAAA,IAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QAAQ,cAAY,OACzJ,SAAAA,MAAC,YAAS,OAAO,gBAAA,CAAiB,CAAA,CACpC,QAEC,OAAA,CAAK,cAAY,OAAQ,SAAAG,EAAQ,EAAE,EAExC,EAGAK,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACb,SAAA,CAAAA,EAAAA,KAAC,OAAA,CAAK,UAAU,qBAEd,SAAA,CAAAA,EAAAA,KAAC,OAAA,CAAK,UAAU,UAAU,SAAA,CAAA,QAAML,EAAQ,EAAE,IAAA,EAAE,EAC3CC,EAAK,MACLA,EAAK,UACJJ,EAAAA,IAAC,OAAA,CAAK,UAAU,wBAAwB,SAAA,YAAA,CAAU,CAAA,EAEtD,EACCI,EAAK,aACJJ,EAAAA,IAAC,QAAK,UAAU,2BACb,WAAK,WAAA,CACR,CAAA,CAAA,CAEJ,CAAA,CAAA,CAAA,CACF,EA3CKG,CAAA,CA8CX,CAAC,CAAA,CACH,CAAA,CAAA,CAGN,CAAC,EAEDd,EAAQ,YAAc"}

package/dist/components/stepper/Stepper.js

@@ -1,43 +1,69 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 /* empty css            */
-function h({
-  steps: r,
-  active: l,
-  onChange: c,
-  className: n = ""
-}) {
-  const o = (s) => typeof s == "string" ? s : s.label;
-  return /* @__PURE__ */ t("nav", { className: `ui-stepper ${n}`, "aria-label": "Progress Steps", children: /* @__PURE__ */ t("ol", { className: "ui-stepper-list", children: r.map((s, e) => {
-    const i = e === l, a = e < l;
-    return /* @__PURE__ */ p(
-      "li",
-      {
-        className: `
-                ui-stepper-item 
-                ${i ? "active" : ""} 
-                ${a ? "completed" : ""}
-              `,
-        children: [
-          /* @__PURE__ */ p(
-            "button",
-            {
-              className: "ui-stepper-button",
-              "aria-current": i ? "step" : void 0,
-              onClick: () => c?.(e),
-              children: [
-                /* @__PURE__ */ t("div", { className: "ui-stepper-circle", children: a ? "✓" : e + 1 }),
-                /* @__PURE__ */ t("span", { className: "ui-stepper-label", children: o(s) })
-              ]
-            }
-          ),
-          e !== r.length - 1 && /* @__PURE__ */ t("div", { className: "ui-stepper-line" })
-        ]
-      },
-      e
-    );
-  }) }) });
-}
+import { cn as c } from "../../utils/cn/cn.js";
+const b = f(({
+  steps: d,
+  active: n,
+  onChange: p,
+  className: m,
+  disableFuture: u = !1,
+  ...h
+}, _) => {
+  const N = (t) => typeof t == "string" ? { label: t } : t;
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      ref: _,
+      className: c("nui-stepper-root", m),
+      "aria-label": "Progress Steps",
+      ...h,
+      children: /* @__PURE__ */ e("ol", { className: "nui-stepper__list", children: d.map((t, r) => {
+        const s = N(t), l = r === n, a = r < n, o = u && r > n;
+        return /* @__PURE__ */ e(
+          "li",
+          {
+            className: c(
+              "nui-stepper__item",
+              l && "active",
+              a && "completed"
+            ),
+            children: /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                className: "nui-stepper__button",
+                "aria-current": l ? "step" : void 0,
+                disabled: o,
+                onClick: () => {
+                  !o && p && p(r);
+                },
+                children: [
+                  /* @__PURE__ */ e("div", { className: "nui-stepper__circle", children: a ? /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ e("span", { "aria-hidden": "true", children: r + 1 }) }),
+                  /* @__PURE__ */ i("div", { className: "nui-stepper__content", children: [
+                    /* @__PURE__ */ i("span", { className: "nui-stepper__label", children: [
+                      /* @__PURE__ */ i("span", { className: "sr-only", children: [
+                        "Step ",
+                        r + 1,
+                        ": "
+                      ] }),
+                      s.label,
+                      s.optional && /* @__PURE__ */ e("span", { className: "nui-stepper__optional", children: "(Optional)" })
+                    ] }),
+                    s.description && /* @__PURE__ */ e("span", { className: "nui-stepper__description", children: s.description })
+                  ] })
+                ]
+              }
+            )
+          },
+          r
+        );
+      }) })
+    }
+  );
+});
+b.displayName = "Stepper";
 export {
-  h as Stepper
+  b as Stepper
 };
 //# sourceMappingURL=Stepper.js.map

package/dist/components/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["/**\r\n * Stepper.tsx — FINAL VERSION\r\n * ----------------------------\r\n * Features:\r\n * - Linear step navigation\r\n * - Clickable steps\r\n * - Keyboard navigation\r\n * - ARIA labels\r\n * - Full theme support\r\n * - Minimal, clean API\r\n */\r\n\r\nimport React from 'react';\r\nimport './Stepper.css';\r\n\r\nexport interface StepItem {\r\n  label: React.ReactNode;\r\n}\r\n\r\nexport interface StepperProps {\r\n  steps: (string | StepItem)[];\r\n  active: number; // 0-based active index\r\n  onChange?: (index: number) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function Stepper({\r\n  steps,\r\n  active,\r\n  onChange,\r\n  className = '',\r\n}: StepperProps) {\r\n  const getLabel = (s: string | StepItem) =>\r\n    typeof s === 'string' ? s : s.label;\r\n\r\n  return (\r\n    <nav className={`ui-stepper ${className}`} aria-label=\"Progress Steps\">\r\n      <ol className=\"ui-stepper-list\">\r\n        {steps.map((step, index) => {\r\n          const isActive = index === active;\r\n          const isCompleted = index < active;\r\n\r\n          return (\r\n            <li\r\n              key={index}\r\n              className={`\r\n                ui-stepper-item \r\n                ${isActive ? 'active' : ''} \r\n                ${isCompleted ? 'completed' : ''}\r\n              `}\r\n            >\r\n              <button\r\n                className=\"ui-stepper-button\"\r\n                aria-current={isActive ? 'step' : undefined}\r\n                onClick={() => onChange?.(index)}\r\n              >\r\n                <div className=\"ui-stepper-circle\">\r\n                  {isCompleted ? '✓' : index + 1}\r\n                </div>\r\n\r\n                <span className=\"ui-stepper-label\">{getLabel(step)}</span>\r\n              </button>\r\n\r\n              {/* Connector Line */}\r\n              {index !== steps.length - 1 && (\r\n                <div className=\"ui-stepper-line\" />\r\n              )}\r\n            </li>\r\n          );\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  );\r\n}\r\n"],"names":["Stepper","steps","active","onChange","className","getLabel","jsx","step","index","isActive","isCompleted","jsxs"],"mappings":";;AA0BO,SAASA,EAAQ;AAAA,EACtB,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAiB;AACf,QAAMC,IAAW,CAAC,MAChB,OAAO,KAAM,WAAW,IAAI,EAAE;AAEhC,2BACG,OAAA,EAAI,WAAW,cAAcD,CAAS,IAAI,cAAW,kBACpD,UAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,mBACX,UAAAL,EAAM,IAAI,CAACM,GAAMC,MAAU;AAC1B,UAAMC,IAAWD,MAAUN,GACrBQ,IAAcF,IAAQN;AAE5B,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW;AAAA;AAAA,kBAEPF,IAAW,WAAW,EAAE;AAAA,kBACxBC,IAAc,cAAc,EAAE;AAAA;AAAA,QAGlC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,gBAAcF,IAAW,SAAS;AAAA,cAClC,SAAS,MAAMN,IAAWK,CAAK;AAAA,cAE/B,UAAA;AAAA,gBAAA,gBAAAF,EAAC,SAAI,WAAU,qBACZ,UAAAI,IAAc,MAAMF,IAAQ,GAC/B;AAAA,kCAEC,QAAA,EAAK,WAAU,oBAAoB,UAAAH,EAASE,CAAI,EAAA,CAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIpDC,MAAUP,EAAM,SAAS,KACxB,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,MArB9BE;AAAA,IAAA;AAAA,EAyBX,CAAC,GACH,GACF;AAEJ;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Stepper.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface StepItem {\n  /** The primary title of the step */\n  label: React.ReactNode;\n  /** Secondary descriptive text displayed below the label */\n  description?: React.ReactNode;\n  /** Marks the step with an \"(Optional)\" tag */\n  optional?: boolean;\n}\n\nexport interface StepperProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Array of steps. Can be simple strings or rich objects. */\n  steps: (string | StepItem)[];\n  /** The 0-based index of the currently active step. */\n  active: number;\n  /** Callback fired when a step is clicked. */\n  onChange?: (index: number) => void;\n  /** Prevents the user from clicking on steps that come after the currently active one. */\n  disableFuture?: boolean; \n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Stepper Component\n * * A visual indicator for multi-step workflows.\n * * Uses standard `<nav>` and `<ol>` HTML elements for strict WAI-ARIA compliance.\n */\nexport const Stepper = forwardRef<HTMLElement, StepperProps>(({\n  steps,\n  active,\n  onChange,\n  className,\n  disableFuture = false,\n  ...props\n}, ref) => {\n  \n  // Helper to normalize string arrays into StepItem objects\n  const getStepData = (s: string | StepItem): StepItem => {\n    if (typeof s === 'string') return { label: s };\n    return s;\n  };\n\n  return (\n    <nav \n      ref={ref}\n      className={cn(\"nui-stepper-root\", className)} \n      aria-label=\"Progress Steps\"\n      {...props}\n    >\n      <ol className=\"nui-stepper__list\">\n        {steps.map((rawStep, index) => {\n          const step = getStepData(rawStep);\n          const isActive = index === active;\n          const isCompleted = index < active;\n          const isDisabled = disableFuture && index > active;\n\n          return (\n            <li\n              key={index}\n              className={cn(\n                \"nui-stepper__item\",\n                isActive && \"active\",\n                isCompleted && \"completed\"\n              )}\n            >\n              <button\n                type=\"button\"\n                className=\"nui-stepper__button\"\n                aria-current={isActive ? 'step' : undefined}\n                disabled={isDisabled}\n                onClick={() => {\n                  if (!isDisabled && onChange) onChange(index);\n                }}\n              >\n                {/* Circle Indicator */}\n                <div className=\"nui-stepper__circle\">\n                  {isCompleted ? (\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n                      <polyline points=\"20 6 9 17 4 12\"></polyline>\n                    </svg>\n                  ) : (\n                    <span aria-hidden=\"true\">{index + 1}</span>\n                  )}\n                </div>\n\n                {/* Text Content */}\n                <div className=\"nui-stepper__content\">\n                  <span className=\"nui-stepper__label\">\n                    {/* Invisible text for screen readers so they announce \"Step 1: Shipping\" */}\n                    <span className=\"sr-only\">Step {index + 1}: </span>\n                    {step.label}\n                    {step.optional && (\n                      <span className=\"nui-stepper__optional\">(Optional)</span>\n                    )}\n                  </span>\n                  {step.description && (\n                    <span className=\"nui-stepper__description\">\n                      {step.description}\n                    </span>\n                  )}\n                </div>\n              </button>\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n});\n\nStepper.displayName = 'Stepper';"],"names":["Stepper","forwardRef","steps","active","onChange","className","disableFuture","props","ref","getStepData","s","jsx","cn","rawStep","index","step","isActive","isCompleted","isDisabled","jsxs"],"mappings":";;;;AAqCO,MAAMA,IAAUC,EAAsC,CAAC;AAAA,EAC5D,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,GAAGC;AACL,GAAGC,MAAQ;AAGT,QAAMC,IAAc,CAACC,MACf,OAAOA,KAAM,WAAiB,EAAE,OAAOA,EAAA,IACpCA;AAGT,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAG,oBAAoBP,CAAS;AAAA,MAC3C,cAAW;AAAA,MACV,GAAGE;AAAA,MAEJ,UAAA,gBAAAI,EAAC,QAAG,WAAU,qBACX,YAAM,IAAI,CAACE,GAASC,MAAU;AAC7B,cAAMC,IAAON,EAAYI,CAAO,GAC1BG,IAAWF,MAAUX,GACrBc,IAAcH,IAAQX,GACtBe,IAAaZ,KAAiBQ,IAAQX;AAE5C,eACE,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAWC;AAAA,cACT;AAAA,cACAI,KAAY;AAAA,cACZC,KAAe;AAAA,YAAA;AAAA,YAGjB,UAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,gBAAcH,IAAW,SAAS;AAAA,gBAClC,UAAUE;AAAA,gBACV,SAAS,MAAM;AACb,kBAAI,CAACA,KAAcd,KAAUA,EAASU,CAAK;AAAA,gBAC7C;AAAA,gBAGA,UAAA;AAAA,kBAAA,gBAAAH,EAAC,SAAI,WAAU,uBACZ,UAAAM,IACC,gBAAAN,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACzJ,UAAA,gBAAAA,EAAC,cAAS,QAAO,iBAAA,CAAiB,EAAA,CACpC,sBAEC,QAAA,EAAK,eAAY,QAAQ,UAAAG,IAAQ,GAAE,GAExC;AAAA,kBAGA,gBAAAK,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,oBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,sBAEd,UAAA;AAAA,sBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,wBAAA;AAAA,wBAAML,IAAQ;AAAA,wBAAE;AAAA,sBAAA,GAAE;AAAA,sBAC3CC,EAAK;AAAA,sBACLA,EAAK,YACJ,gBAAAJ,EAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,aAAA,CAAU;AAAA,oBAAA,GAEtD;AAAA,oBACCI,EAAK,eACJ,gBAAAJ,EAAC,UAAK,WAAU,4BACb,YAAK,YAAA,CACR;AAAA,kBAAA,EAAA,CAEJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UA3CKG;AAAA,QAAA;AAAA,MA8CX,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAEDd,EAAQ,cAAc;"}

package/dist/components/switch/Switch.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react");;/* empty css             */function I({checked:a,defaultChecked:x,onChange:o,disabled:e=!1,label:l,id:m,name:f,value:p,className:y=""}){const s=a!==void 0,[j,d]=c.useState(x??!1),t=s?a:j,i=c.useRef(null),S=c.useId(),h=m??S;c.useEffect(()=>{const n=i.current;if(!n)return;const v=u=>{if(!e&&(u.key===" "||u.key==="Spacebar")){u.preventDefault();const w=!t;s||d(w),o?.(w)}};return n.addEventListener("keydown",v),()=>{n.removeEventListener("keydown",v)}},[t,e,s,o]);const b=()=>{if(e)return;const n=!t;s||d(n),o?.(n),i.current&&i.current.focus()},k=p??(t?"on":"off");return r.jsxs("label",{className:`ui-switch-root ${y}`,htmlFor:h,"aria-disabled":e||void 0,children:[f&&r.jsx("input",{type:"hidden",name:f,value:t?k:""}),r.jsx("button",{id:h,ref:i,type:"button",role:"switch","aria-checked":t,"aria-disabled":e||void 0,className:"ui-switch-control","data-state":t?"on":"off",onClick:b,tabIndex:e?-1:0,children:r.jsx("span",{className:"ui-switch-thumb","aria-hidden":"true"})}),l&&r.jsx("span",{className:"ui-switch-label",children:l})]})}exports.Switch=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react");;/* empty css             */const u=require("../../utils/cn/cn.cjs"),y=o.forwardRef(({checked:h,defaultChecked:_,onChange:k,disabled:c=!1,label:r,description:i,id:p,name:d,value:x,size:l="md",className:j,wrapperClassName:v,...w},b)=>{const C=o.useId(),s=p??`nui-switch-${C}`,m=`${s}-description`,f=h!==void 0,[N,S]=o.useState(_??!1),n=f?h:N,a=()=>{if(c)return;const e=!n;f||S(e),k?.(e)},I=e=>{(e.key===" "||e.key==="Enter")&&(e.preventDefault(),a()),w.onKeyDown?.(e)},g=e=>{c||(e.preventDefault(),a(),document.getElementById(s)?.focus())},D=x??(n?"on":"off");return t.jsxs("div",{className:u.cn("nui-switch-wrapper",c&&"nui-switch-wrapper--disabled",v),children:[d&&t.jsx("input",{type:"hidden",name:d,value:n?D:""}),t.jsx("button",{ref:b,id:s,type:"button",role:"switch","aria-checked":n,"aria-disabled":c,"aria-describedby":i?m:void 0,className:u.cn("nui-switch",`nui-switch--${l}`,n&&"nui-switch--checked",j),onClick:a,onKeyDown:I,disabled:c,...w,children:t.jsx("span",{className:u.cn("nui-switch__thumb",`nui-switch__thumb--${l}`,n&&"nui-switch__thumb--checked"),"aria-hidden":"true"})}),(r||i)&&t.jsxs("div",{className:"nui-switch__text-container",children:[r&&t.jsx("label",{htmlFor:s,className:"nui-switch__label",onClick:g,children:r}),i&&t.jsx("div",{id:m,className:"nui-switch__description",children:i})]})]})});y.displayName="Switch";exports.Switch=y;
 //# sourceMappingURL=Switch.cjs.map