@nofinite/nui 1.1.1 → 2.0.1

package/dist/components/resizable/Resizable.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.js","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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"}

package/dist/components/select/Select.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),l=require("react");;/* empty css             */const z=require("../../utils/restorefocus/restoreFocus.cjs"),G=require("../../utils/onclickoutside/onClickOutside.cjs"),J=require("../../utils/portal/portal.cjs");function L(s,h,g){const o=s.length;let d=h;for(let r=0;r<o;r++)if(d=(d+g+o)%o,!s[d].disabled)return d;return-1}function Q({options:s,value:h,defaultValue:g,onChange:o,placeholder:d="Select...",disabled:r=!1,name:C,id:O,className:T=""}){const I=h!==void 0,[$,K]=l.useState(g),b=I?h:$,S=s.find(e=>e.value===b)??null,[i,x]=l.useState(!1),[a,f]=l.useState(()=>s.findIndex(e=>!e.disabled)),v=l.useRef({buffer:"",lastTime:0}),p=l.useRef(null),m=l.useRef(null),P=l.useId(),R=O??P,y=`${R}-listbox`,E=`${R}-label`,V=l.useCallback(()=>{r||x(!0)},[r]),F=l.useCallback(()=>{x(!1),z.restoreFocus(p.current)},[]),M=l.useCallback(()=>{r||x(e=>!e)},[r]);l.useEffect(()=>{if(i)return G.onClickOutside(m,()=>x(!1))},[i]),l.useEffect(()=>{if(!i)return;const e=s.findIndex(n=>n.value===b&&!n.disabled),t=e>=0?e:s.findIndex(n=>!n.disabled);f(t>=0?t:-1),setTimeout(()=>{m.current?.focus()},0)},[i,s,b]);const N=l.useCallback(e=>{if(e<0||e>=s.length)return;const t=s[e];t.disabled||(I||K(t.value),o?.(t.value),x(!1),p.current?.focus())},[I,s,o]),U=e=>{r||["ArrowDown","ArrowUp"," ","Enter"].includes(e.key)&&(e.preventDefault(),V())},B=e=>{const t=e.key;if(t==="ArrowDown"){e.preventDefault();const n=L(s,a,1);n>=0&&f(n)}else if(t==="ArrowUp"){e.preventDefault();const n=L(s,a,-1);n>=0&&f(n)}else if(t==="Home"){e.preventDefault();const n=s.findIndex(u=>!u.disabled);n>=0&&f(n)}else if(t==="End"){e.preventDefault();const n=s.length-1-[...s].reverse().findIndex(u=>!u.disabled);n>=0&&f(n)}else if(t==="Enter"||t===" ")e.preventDefault(),a>=0&&N(a);else if(t==="Escape")e.preventDefault(),F();else if(t.length===1&&t.match(/\S/)){const n=Date.now();n-v.current.lastTime>700&&(v.current.buffer=""),v.current.buffer+=t.toLowerCase(),v.current.lastTime=n;const u=v.current.buffer,w=a>=0?a+1:0,A=s.length;for(let k=0;k<A;k++){const j=(w+k)%A,W=String(s[j].label).toLowerCase();if(!s[j].disabled&&W.startsWith(u)){f(j);break}}}},H=e=>{N(e)},[D,q]=l.useState(null);return l.useEffect(()=>{if(!i||!p.current){q(null);return}const e=p.current.getBoundingClientRect(),t=e.bottom+6,n=e.left;q({top:t,left:n})},[i]),c.jsxs("div",{className:`ui-select ${T}`,children:[C&&c.jsx("input",{type:"hidden",name:C,value:b??""}),c.jsxs("button",{ref:p,id:E,type:"button",className:"ui-select-trigger","aria-haspopup":"listbox","aria-expanded":i,"aria-controls":i?y:void 0,"aria-disabled":r||void 0,onClick:()=>M(),onKeyDown:U,disabled:r,children:[c.jsx("span",{children:S?c.jsx("span",{children:S.label}):c.jsx("span",{className:"ui-select-placeholder",children:d})}),c.jsx("span",{className:"ui-select-chevron","aria-hidden":!0,children:"▾"})]}),i&&D&&c.jsx(J.Portal,{children:c.jsx("div",{id:y,ref:m,className:"ui-select-listbox",role:"listbox","aria-labelledby":E,tabIndex:0,style:{top:D.top,left:D.left},onKeyDown:B,children:s.map((e,t)=>{const n=b===e.value,u=a===t;return c.jsx("div",{id:`${y}-option-${t}`,role:"option","aria-selected":n,"aria-disabled":e.disabled||void 0,className:"ui-select-option",tabIndex:-1,onMouseDown:w=>w.preventDefault(),onClick:()=>!e.disabled&&H(t),style:{outline:u?"2px solid var(--color-primary)":void 0},children:e.label},e.value)})})})]})}exports.Select=Q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react");;/* empty css             */const Q=require("../../utils/restorefocus/restoreFocus.cjs"),Z=require("../../utils/onclickoutside/onClickOutside.cjs"),S=require("../../utils/cn/cn.cjs"),_=require("../../utils/portal/portal.cjs");function B(s,I,D){const b=s.length;let h=I;for(let u=0;u<b;u++)if(h=(h+D+b)%b,!s[h].disabled)return h;return-1}const K=r.forwardRef(({options:s,value:I,defaultValue:D,onChange:b,placeholder:h="Select...",disabled:u=!1,error:V=!1,name:N,id:$,className:M,...P},x)=>{const R=I!==void 0,[W,z]=r.useState(D),p=R?I:W,T=s.find(e=>e.value===p)??null,[c,g]=r.useState(!1),[o,d]=r.useState(()=>s.findIndex(e=>!e.disabled)),m=r.useRef({buffer:"",lastTime:0}),v=r.useRef(null),k=r.useRef(null),C=r.useRef(null),F=r.useId(),q=$??F,E=`${q}-listbox`,A=`${q}-label`,H=r.useCallback(e=>{v.current=e,typeof x=="function"?x(e):x&&(x.current=e)},[x]),[L,U]=r.useState({top:-9999,left:-9999,width:0}),w=r.useCallback(()=>{if(!v.current||!k.current)return;const e=v.current.getBoundingClientRect(),t=k.current.getBoundingClientRect(),n=window.scrollY,l=window.scrollX;let a=e.bottom+n+4;const j=e.left+l,y=e.width,f=16;e.bottom+t.height+4>document.documentElement.clientHeight-f&&(a=e.top+n-t.height-4,a<f+n&&(a=f+n)),U({top:a,left:j,width:y})},[]);r.useLayoutEffect(()=>{if(c)return w(),window.addEventListener("resize",w),window.addEventListener("scroll",w,!0),()=>{window.removeEventListener("resize",w),window.removeEventListener("scroll",w,!0)}},[c,w]);const X=r.useCallback(()=>{g(!1),Q.restoreFocus(v.current)},[]);r.useEffect(()=>c?Z.onClickOutside([k,v],()=>g(!1)):void 0,[c]),r.useEffect(()=>{if(!c)return;const e=s.findIndex(l=>l.value===p&&!l.disabled),t=e>=0?e:s.findIndex(l=>!l.disabled);d(t>=0?t:-1);const n=setTimeout(()=>k.current?.focus(),10);return()=>clearTimeout(n)},[c,s,p]),r.useEffect(()=>{c&&C.current&&C.current.scrollIntoView({block:"nearest"})},[o,c]);const O=r.useCallback(e=>{if(e<0||e>=s.length)return;const t=s[e];t.disabled||(R||z(t.value),b?.(t.value),g(!1),v.current?.focus())},[R,s,b]),Y=e=>{u||["ArrowDown","ArrowUp"," ","Enter"].includes(e.key)&&(e.preventDefault(),g(!0))},G=e=>{const t=e.key;if(t==="ArrowDown"){e.preventDefault();const n=B(s,o,1);n>=0&&d(n)}else if(t==="ArrowUp"){e.preventDefault();const n=B(s,o,-1);n>=0&&d(n)}else if(t==="Home"){e.preventDefault();const n=s.findIndex(l=>!l.disabled);n>=0&&d(n)}else if(t==="End"){e.preventDefault();const n=s.length-1-[...s].reverse().findIndex(l=>!l.disabled);n>=0&&d(n)}else if(t==="Enter"||t===" ")e.preventDefault(),o>=0&&O(o);else if(t==="Escape")e.preventDefault(),X();else if(t.length===1&&t.match(/\S/)){const n=Date.now();n-m.current.lastTime>700&&(m.current.buffer=""),m.current.buffer+=t.toLowerCase(),m.current.lastTime=n;const l=m.current.buffer,a=o>=0?o+1:0,j=s.length;for(let y=0;y<j;y++){const f=(a+y)%j,J=String(s[f].label).toLowerCase();if(!s[f].disabled&&J.startsWith(l)){d(f);break}}}};return i.jsxs("div",{className:S.cn("nui-select-root",M),children:[N&&i.jsx("input",{type:"hidden",name:N,value:p??""}),i.jsxs("button",{ref:H,id:A,type:"button",className:S.cn("nui-select-trigger",V&&"error"),"aria-haspopup":"listbox","aria-expanded":c,"aria-controls":c?E:void 0,"aria-disabled":u||void 0,onClick:()=>!u&&g(e=>!e),onKeyDown:Y,disabled:u,...P,children:[i.jsx("span",{className:"nui-select-value",children:T?T.label:i.jsx("span",{className:"nui-select-placeholder",children:h})}),i.jsx("svg",{className:"nui-select-chevron",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:i.jsx("polyline",{points:"6 9 12 15 18 9"})})]}),c&&i.jsx(_.Portal,{children:i.jsx("div",{id:E,ref:k,className:"nui-select-listbox",role:"listbox","aria-labelledby":A,tabIndex:0,style:{top:L.top,left:L.left,width:L.width},onKeyDown:G,children:s.map((e,t)=>{const n=p===e.value,l=o===t;return i.jsxs("div",{ref:l?C:null,id:`${E}-option-${t}`,role:"option","aria-selected":n,"aria-disabled":e.disabled||void 0,className:S.cn("nui-select-option",l&&"active",n&&"selected",e.disabled&&"disabled"),tabIndex:-1,onMouseDown:a=>a.preventDefault(),onClick:()=>!e.disabled&&O(t),onMouseEnter:()=>!e.disabled&&d(t),children:[i.jsx("span",{className:"nui-select-option-label",children:e.label}),n&&i.jsx("svg",{className:"nui-select-check",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:i.jsx("polyline",{points:"20 6 9 17 4 12"})})]},e.value)})})})]})});K.displayName="Select";exports.Select=K;
 //# sourceMappingURL=Select.cjs.map

package/dist/components/select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["/**\r\n * Select.tsx\r\n * ----------\r\n * Accessible single-select (listbox) component.\r\n *\r\n * Features:\r\n * - WAI-ARIA listbox pattern\r\n * - Keyboard navigation (ArrowUp/ArrowDown, Home, End, Enter, Space, Esc)\r\n * - Typeahead support\r\n * - Controlled + uncontrolled modes\r\n * - Portal rendering for the listbox\r\n * - Click outside to close\r\n * - Proper ARIA attributes and relationships\r\n * - Hidden input for form compatibility (optional name prop)\r\n *\r\n * Usage:\r\n *  <Select\r\n *    options={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]}\r\n *    value={value}                 // optional controlled value\r\n *    onChange={(v) => setValue(v)} // required if controlled\r\n *    placeholder=\"Select fruit\"\r\n *    name=\"fruit\"                  // optional, adds hidden input\r\n *  />\r\n */\r\n\r\nimport React, {\r\n  useState,\r\n  useRef,\r\n  useEffect,\r\n  useCallback,\r\n  KeyboardEvent,\r\n} from 'react';\r\nimport './Select.css';\r\nimport { Portal, onClickOutside, restoreFocus } from '../../utils/index';\r\n\r\ntype Option = {\r\n  value: string;\r\n  label: React.ReactNode;\r\n  disabled?: boolean;\r\n};\r\n\r\ninterface SelectProps {\r\n  options: Option[];\r\n  value?: string; // controlled value\r\n  defaultValue?: string; // uncontrolled initial\r\n  onChange?: (value: string) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  name?: string; // if provided, render hidden input for forms\r\n  id?: string;\r\n  className?: string;\r\n}\r\n\r\n/* Helper: find next enabled index given direction */\r\nfunction findNextEnabled(options: Option[], start: number, direction: 1 | -1) {\r\n  const len = options.length;\r\n  let i = start;\r\n  for (let step = 0; step < len; step++) {\r\n    i = (i + direction + len) % len;\r\n    if (!options[i].disabled) return i;\r\n  }\r\n  return -1;\r\n}\r\n\r\nexport function Select({\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  placeholder = 'Select...',\r\n  disabled = false,\r\n  name,\r\n  id,\r\n  className = '',\r\n}: SelectProps) {\r\n  // Controlled vs uncontrolled\r\n  const isControlled = value !== undefined;\r\n  const [internalValue, setInternalValue] = useState<string | undefined>(\r\n    defaultValue\r\n  );\r\n  const selectedValue = isControlled ? value : internalValue;\r\n\r\n  const selectedOption = options.find((o) => o.value === selectedValue) ?? null;\r\n\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(() =>\r\n    options.findIndex((o) => !o.disabled)\r\n  );\r\n\r\n  // Typeahead buffer\r\n  const typeaheadRef = useRef({ buffer: '', lastTime: 0 });\r\n\r\n  // Refs\r\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\r\n  const listRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  // Unique ids\r\n  const reactId = React.useId();\r\n  const baseId = id ?? reactId;\r\n  const listboxId = `${baseId}-listbox`;\r\n  const labelId = `${baseId}-label`;\r\n\r\n  // Open/close helpers\r\n  const openList = useCallback(() => {\r\n    if (disabled) return;\r\n    setOpen(true);\r\n  }, [disabled]);\r\n\r\n  const closeList = useCallback(() => {\r\n    setOpen(false);\r\n    // restore focus to trigger\r\n    restoreFocus(triggerRef.current);\r\n  }, []);\r\n\r\n  // Toggle\r\n  const toggleList = useCallback(() => {\r\n    if (disabled) return;\r\n    setOpen((s) => !s);\r\n  }, [disabled]);\r\n\r\n  // Click outside to close\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    return onClickOutside(listRef, () => setOpen(false));\r\n  }, [open]);\r\n\r\n  // Ensure that when opening, activeIndex is valid and focus moves to listbox\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    // set active to selected or first enabled\r\n    const selIndex = options.findIndex(\r\n      (o) => o.value === selectedValue && !o.disabled\r\n    );\r\n    const idx =\r\n      selIndex >= 0 ? selIndex : options.findIndex((o) => !o.disabled);\r\n    setActiveIndex(idx >= 0 ? idx : -1);\r\n\r\n    // focus the list container so keyboard events are captured\r\n    setTimeout(() => {\r\n      listRef.current?.focus();\r\n    }, 0);\r\n  }, [open, options, selectedValue]);\r\n\r\n  // Selection handler\r\n  const selectIndex = useCallback(\r\n    (i: number) => {\r\n      if (i < 0 || i >= options.length) return;\r\n      const opt = options[i];\r\n      if (opt.disabled) return;\r\n      if (!isControlled) setInternalValue(opt.value);\r\n      onChange?.(opt.value);\r\n      setOpen(false);\r\n      // restore focus\r\n      triggerRef.current?.focus();\r\n    },\r\n    [isControlled, options, onChange]\r\n  );\r\n\r\n  // Keyboard handling when trigger has focus\r\n  const onTriggerKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\r\n    if (disabled) return;\r\n    if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(e.key)) {\r\n      e.preventDefault();\r\n      openList();\r\n    }\r\n  };\r\n\r\n  // Keyboard handling when listbox has focus\r\n  const onListKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\r\n    const key = e.key;\r\n    if (key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      const next = findNextEnabled(options, activeIndex, 1);\r\n      if (next >= 0) setActiveIndex(next);\r\n    } else if (key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      const prev = findNextEnabled(options, activeIndex, -1);\r\n      if (prev >= 0) setActiveIndex(prev);\r\n    } else if (key === 'Home') {\r\n      e.preventDefault();\r\n      const first = options.findIndex((o) => !o.disabled);\r\n      if (first >= 0) setActiveIndex(first);\r\n    } else if (key === 'End') {\r\n      e.preventDefault();\r\n      const last =\r\n        options.length -\r\n        1 -\r\n        [...options].reverse().findIndex((o) => !o.disabled);\r\n      if (last >= 0) setActiveIndex(last);\r\n    } else if (key === 'Enter' || key === ' ') {\r\n      e.preventDefault();\r\n      if (activeIndex >= 0) selectIndex(activeIndex);\r\n    } else if (key === 'Escape') {\r\n      e.preventDefault();\r\n      closeList();\r\n    } else if (key.length === 1 && key.match(/\\S/)) {\r\n      // typeahead: accumulate buffer of characters\r\n      const now = Date.now();\r\n      if (now - typeaheadRef.current.lastTime > 700) {\r\n        typeaheadRef.current.buffer = '';\r\n      }\r\n      typeaheadRef.current.buffer += key.toLowerCase();\r\n      typeaheadRef.current.lastTime = now;\r\n\r\n      const buf = typeaheadRef.current.buffer;\r\n      const start = activeIndex >= 0 ? activeIndex + 1 : 0;\r\n      const len = options.length;\r\n      // search forward from next item, wrapping\r\n      for (let i = 0; i < len; i++) {\r\n        const idx = (start + i) % len;\r\n        const lab = String(options[idx].label).toLowerCase();\r\n        if (!options[idx].disabled && lab.startsWith(buf)) {\r\n          setActiveIndex(idx);\r\n          break;\r\n        }\r\n      }\r\n    }\r\n  };\r\n\r\n  // Click on option\r\n  const onOptionClick = (i: number) => {\r\n    selectIndex(i);\r\n  };\r\n\r\n  // compute listbox position based on trigger\r\n  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);\r\n  useEffect(() => {\r\n    if (!open || !triggerRef.current) {\r\n      setPos(null);\r\n      return;\r\n    }\r\n    const rect = triggerRef.current.getBoundingClientRect();\r\n    const top = rect.bottom + 6;\r\n    const left = rect.left;\r\n    setPos({ top, left });\r\n  }, [open]);\r\n\r\n  // render\r\n  return (\r\n    <div className={`ui-select ${className}`}>\r\n      {/* Hidden input for form compatibility */}\r\n      {name && <input type=\"hidden\" name={name} value={selectedValue ?? ''} />}\r\n\r\n      <button\r\n        ref={triggerRef}\r\n        id={labelId}\r\n        type=\"button\"\r\n        className=\"ui-select-trigger\"\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={open}\r\n        aria-controls={open ? listboxId : undefined}\r\n        aria-disabled={disabled || undefined}\r\n        onClick={() => toggleList()}\r\n        onKeyDown={onTriggerKeyDown}\r\n        disabled={disabled}\r\n      >\r\n        <span>\r\n          {selectedOption ? (\r\n            <span>{selectedOption.label}</span>\r\n          ) : (\r\n            <span className=\"ui-select-placeholder\">{placeholder}</span>\r\n          )}\r\n        </span>\r\n        <span className=\"ui-select-chevron\" aria-hidden>\r\n          ▾\r\n        </span>\r\n      </button>\r\n\r\n      {open && pos && (\r\n        <Portal>\r\n          <div\r\n            id={listboxId}\r\n            ref={listRef}\r\n            className=\"ui-select-listbox\"\r\n            role=\"listbox\"\r\n            aria-labelledby={labelId}\r\n            tabIndex={0}\r\n            style={{\r\n              top: pos.top,\r\n              left: pos.left,\r\n            }}\r\n            onKeyDown={onListKeyDown}\r\n          >\r\n            {options.map((opt, i) => {\r\n              const isSelected = selectedValue === opt.value;\r\n              const isActive = activeIndex === i;\r\n              return (\r\n                <div\r\n                  key={opt.value}\r\n                  id={`${listboxId}-option-${i}`}\r\n                  role=\"option\"\r\n                  aria-selected={isSelected}\r\n                  aria-disabled={opt.disabled || undefined}\r\n                  className=\"ui-select-option\"\r\n                  tabIndex={-1}\r\n                  onMouseDown={(e) => e.preventDefault()} /* prevent blur */\r\n                  onClick={() => !opt.disabled && onOptionClick(i)}\r\n                  // Visual focus when active (not moving DOM focus)\r\n                  style={{\r\n                    outline: isActive\r\n                      ? '2px solid var(--color-primary)'\r\n                      : undefined,\r\n                  }}\r\n                >\r\n                  {opt.label}\r\n                </div>\r\n              );\r\n            })}\r\n          </div>\r\n        </Portal>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["findNextEnabled","options","start","direction","len","i","step","Select","value","defaultValue","onChange","placeholder","disabled","name","id","className","isControlled","internalValue","setInternalValue","useState","selectedValue","selectedOption","o","open","setOpen","activeIndex","setActiveIndex","typeaheadRef","useRef","triggerRef","listRef","reactId","React","baseId","listboxId","labelId","openList","useCallback","closeList","restoreFocus","toggleList","s","useEffect","onClickOutside","selIndex","idx","selectIndex","opt","onTriggerKeyDown","onListKeyDown","key","next","prev","first","last","now","buf","lab","onOptionClick","pos","setPos","rect","top","left","jsxs","jsx","Portal","isSelected","isActive","e"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useLayoutEffect,\n  KeyboardEvent,\n  forwardRef,\n} from 'react';\nimport { Portal, onClickOutside, restoreFocus, cn } from '../../utils';\nimport './Select.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport type SelectOption = {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n};\n\nexport interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {\n  /** Array of available options */\n  options: SelectOption[];\n  /** Controlled state value */\n  value?: string; \n  /** Uncontrolled initial value */\n  defaultValue?: string; \n  /** Callback fired when an option is selected */\n  onChange?: (value: string) => void;\n  /** Text displayed when no option is selected */\n  placeholder?: string;\n  /** Name attribute applied to the hidden input for native form submission */\n  name?: string; \n  /** Applies error styling to the trigger button */\n  error?: boolean; \n}\n\n/* Helper: find next enabled index given direction */\nfunction findNextEnabled(options: SelectOption[], start: number, direction: 1 | -1) {\n  const len = options.length;\n  let i = start;\n  for (let step = 0; step < len; step++) {\n    i = (i + direction + len) % len;\n    if (!options[i].disabled) return i;\n  }\n  return -1;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * Select Component\n * * A highly accessible dropdown select menu.\n * * Automatically manages focus, keyboard typeahead navigation, and viewport collision detection.\n */\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  placeholder = 'Select...',\n  disabled = false,\n  error = false,\n  name,\n  id,\n  className,\n  ...props\n}, ref) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue);\n  const selectedValue = isControlled ? value : internalValue;\n  const selectedOption = options.find((o) => o.value === selectedValue) ?? null;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(() => options.findIndex((o) => !o.disabled));\n\n  // Used for WAI-ARIA keyboard typeahead navigation\n  const typeaheadRef = useRef({ buffer: '', lastTime: 0 });\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const activeOptionRef = useRef<HTMLDivElement | null>(null);\n\n  const reactId = React.useId();\n  const baseId = id ?? reactId;\n  const listboxId = `${baseId}-listbox`;\n  const labelId = `${baseId}-label`;\n\n  /* ----------------------------------------------------\n     Ref Merging\n  ---------------------------------------------------- */\n  const setTriggerRef = useCallback((node: HTMLButtonElement | null) => {\n    triggerRef.current = node;\n    if (typeof ref === 'function') ref(node);\n    else if (ref) ref.current = node;\n  }, [ref]);\n\n  /* ----------------------------------------------------\n     Smart Position & Width Sync\n  ---------------------------------------------------- */\n  const [coords, setCoords] = useState({ top: -9999, left: -9999, width: 0 });\n\n  const updatePosition = useCallback(() => {\n    if (!triggerRef.current || !listRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const listRect = listRef.current.getBoundingClientRect();\n    const scrollY = window.scrollY;\n    const scrollX = window.scrollX;\n\n    let top = triggerRect.bottom + scrollY + 4;\n    const left = triggerRect.left + scrollX;\n    const width = triggerRect.width; // Sync Portal width to trigger width\n\n    // Viewport Bottom Collision\n    const padding = 16;\n    if (triggerRect.bottom + listRect.height + 4 > document.documentElement.clientHeight - padding) {\n      top = triggerRect.top + scrollY - listRect.height - 4; // Flip above\n      if (top < padding + scrollY) top = padding + scrollY; // Hard top clamp\n    }\n\n    setCoords({ top, left, width });\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [open, updatePosition]);\n\n  /* ----------------------------------------------------\n     Focus & Scroll Management\n  ---------------------------------------------------- */\n  const closeList = useCallback(() => {\n    setOpen(false);\n    restoreFocus(triggerRef.current);\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const cleanup = onClickOutside([listRef, triggerRef], () => setOpen(false));\n    return cleanup;\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    // Set active index to the currently selected item, or the first available option\n    const selIndex = options.findIndex((o) => o.value === selectedValue && !o.disabled);\n    const idx = selIndex >= 0 ? selIndex : options.findIndex((o) => !o.disabled);\n    setActiveIndex(idx >= 0 ? idx : -1);\n\n    // Defer focus to ensure Portal is rendered\n    const timeoutId = setTimeout(() => listRef.current?.focus(), 10);\n    return () => clearTimeout(timeoutId);\n  }, [open, options, selectedValue]);\n\n  // Auto-scroll to active item when navigating via keyboard\n  useEffect(() => {\n    if (open && activeOptionRef.current) {\n      activeOptionRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [activeIndex, open]);\n\n  /* ----------------------------------------------------\n     Event Handlers\n  ---------------------------------------------------- */\n  const selectIndex = useCallback((i: number) => {\n    if (i < 0 || i >= options.length) return;\n    const opt = options[i];\n    if (opt.disabled) return;\n    if (!isControlled) setInternalValue(opt.value);\n    onChange?.(opt.value);\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, [isControlled, options, onChange]);\n\n  const onTriggerKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    if (['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(e.key)) {\n      e.preventDefault();\n      setOpen(true);\n    }\n  };\n\n  const onListKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    const key = e.key;\n    if (key === 'ArrowDown') {\n      e.preventDefault();\n      const next = findNextEnabled(options, activeIndex, 1);\n      if (next >= 0) setActiveIndex(next);\n    } else if (key === 'ArrowUp') {\n      e.preventDefault();\n      const prev = findNextEnabled(options, activeIndex, -1);\n      if (prev >= 0) setActiveIndex(prev);\n    } else if (key === 'Home') {\n      e.preventDefault();\n      const first = options.findIndex((o) => !o.disabled);\n      if (first >= 0) setActiveIndex(first);\n    } else if (key === 'End') {\n      e.preventDefault();\n      const last = options.length - 1 - [...options].reverse().findIndex((o) => !o.disabled);\n      if (last >= 0) setActiveIndex(last);\n    } else if (key === 'Enter' || key === ' ') {\n      e.preventDefault();\n      if (activeIndex >= 0) selectIndex(activeIndex);\n    } else if (key === 'Escape') {\n      e.preventDefault();\n      closeList();\n    } else if (key.length === 1 && key.match(/\\S/)) {\n      // Typeahead logic\n      const now = Date.now();\n      if (now - typeaheadRef.current.lastTime > 700) typeaheadRef.current.buffer = '';\n      typeaheadRef.current.buffer += key.toLowerCase();\n      typeaheadRef.current.lastTime = now;\n\n      const buf = typeaheadRef.current.buffer;\n      const start = activeIndex >= 0 ? activeIndex + 1 : 0;\n      const len = options.length;\n      for (let i = 0; i < len; i++) {\n        const idx = (start + i) % len;\n        const lab = String(options[idx].label).toLowerCase();\n        if (!options[idx].disabled && lab.startsWith(buf)) {\n          setActiveIndex(idx);\n          break;\n        }\n      }\n    }\n  };\n\n  /* ----------------------------------------------------\n     Render\n  ---------------------------------------------------- */\n  return (\n    <div className={cn(\"nui-select-root\", className)}>\n      {/* Hidden input for native form submission */}\n      {name && <input type=\"hidden\" name={name} value={selectedValue ?? ''} />}\n\n      <button\n        ref={setTriggerRef}\n        id={labelId}\n        type=\"button\"\n        className={cn(\"nui-select-trigger\", error && \"error\")}\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={open ? listboxId : undefined}\n        aria-disabled={disabled || undefined}\n        onClick={() => !disabled && setOpen((s) => !s)}\n        onKeyDown={onTriggerKeyDown}\n        disabled={disabled}\n        {...props}\n      >\n        <span className=\"nui-select-value\">\n          {selectedOption ? (\n            selectedOption.label\n          ) : (\n            <span className=\"nui-select-placeholder\">{placeholder}</span>\n          )}\n        </span>\n        <svg className=\"nui-select-chevron\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n          <polyline points=\"6 9 12 15 18 9\"></polyline>\n        </svg>\n      </button>\n\n      {open && (\n        <Portal>\n          <div\n            id={listboxId}\n            ref={listRef}\n            className=\"nui-select-listbox\"\n            role=\"listbox\"\n            aria-labelledby={labelId}\n            tabIndex={0}\n            style={{ top: coords.top, left: coords.left, width: coords.width }}\n            onKeyDown={onListKeyDown}\n          >\n            {options.map((opt, i) => {\n              const isSelected = selectedValue === opt.value;\n              const isActive = activeIndex === i;\n              return (\n                <div\n                  key={opt.value}\n                  ref={isActive ? activeOptionRef : null}\n                  id={`${listboxId}-option-${i}`}\n                  role=\"option\"\n                  aria-selected={isSelected}\n                  aria-disabled={opt.disabled || undefined}\n                  className={cn(\n                    \"nui-select-option\",\n                    isActive && \"active\",\n                    isSelected && \"selected\",\n                    opt.disabled && \"disabled\"\n                  )}\n                  tabIndex={-1}\n                  onMouseDown={(e) => e.preventDefault()} \n                  onClick={() => !opt.disabled && selectIndex(i)}\n                  onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                >\n                  <span className=\"nui-select-option-label\">{opt.label}</span>\n                  {isSelected && (\n                    <svg className=\"nui-select-check\" width=\"16\" height=\"16\" 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                </div>\n              );\n            })}\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n});\nSelect.displayName = 'Select';"],"names":["findNextEnabled","options","start","direction","len","i","step","Select","forwardRef","value","defaultValue","onChange","placeholder","disabled","error","name","id","className","props","ref","isControlled","internalValue","setInternalValue","useState","selectedValue","selectedOption","o","open","setOpen","activeIndex","setActiveIndex","typeaheadRef","useRef","triggerRef","listRef","activeOptionRef","reactId","React","baseId","listboxId","labelId","setTriggerRef","useCallback","node","coords","setCoords","updatePosition","triggerRect","listRect","scrollY","scrollX","top","left","width","padding","useLayoutEffect","closeList","restoreFocus","useEffect","onClickOutside","selIndex","idx","timeoutId","selectIndex","opt","onTriggerKeyDown","onListKeyDown","key","next","prev","first","last","now","buf","lab","cn","jsxs","s","jsx","Portal","isSelected","isActive","e"],"mappings":"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"}

package/dist/components/select/Select.js

@@ -1,156 +1,156 @@
-import { jsxs as V, jsx as i } from "react/jsx-runtime";
-import X, { useState as x, useRef as A, useCallback as h, useEffect as E } from "react";
+import { jsxs as A, jsx as i } from "react/jsx-runtime";
+import ee, { forwardRef as te, useState as D, useRef as E, useCallback as L, useLayoutEffect as ne, useEffect as j } from "react";
 /* empty css           */
-import { restoreFocus as Y } from "../../utils/restorefocus/restoreFocus.js";
-import { onClickOutside as Z } from "../../utils/onclickoutside/onClickOutside.js";
-import { Portal as _ } from "../../utils/portal/portal.js";
-function j(l, m, I) {
-  const o = l.length;
-  let f = m;
-  for (let r = 0; r < o; r++)
-    if (f = (f + I + o) % o, !l[f].disabled) return f;
+import { restoreFocus as re } from "../../utils/restorefocus/restoreFocus.js";
+import { onClickOutside as le } from "../../utils/onclickoutside/onClickOutside.js";
+import { cn as B } from "../../utils/cn/cn.js";
+import { Portal as se } from "../../utils/portal/portal.js";
+function z(r, k, R) {
+  const f = r.length;
+  let b = k;
+  for (let a = 0; a < f; a++)
+    if (b = (b + R + f) % f, !r[b].disabled) return b;
   return -1;
 }
-function ie({
-  options: l,
-  value: m,
-  defaultValue: I,
-  onChange: o,
-  placeholder: f = "Select...",
-  disabled: r = !1,
-  name: L,
-  id: P,
-  className: U = ""
-}) {
-  const D = m !== void 0, [B, F] = x(
-    I
-  ), d = D ? m : B, R = l.find((e) => e.value === d) ?? null, [s, b] = x(!1), [c, u] = x(
-    () => l.findIndex((e) => !e.disabled)
-  ), v = A({ buffer: "", lastTime: 0 }), p = A(null), g = A(null), H = X.useId(), S = P ?? H, w = `${S}-listbox`, T = `${S}-label`, M = h(() => {
-    r || b(!0);
-  }, [r]), W = h(() => {
-    b(!1), Y(p.current);
-  }, []), q = h(() => {
-    r || b((e) => !e);
-  }, [r]);
-  E(() => {
+const ie = te(({
+  options: r,
+  value: k,
+  defaultValue: R,
+  onChange: f,
+  placeholder: b = "Select...",
+  disabled: a = !1,
+  error: H = !1,
+  name: K,
+  id: M,
+  className: P,
+  ...U
+}, m) => {
+  const C = k !== void 0, [X, Y] = D(R), w = C ? k : X, O = r.find((e) => e.value === w) ?? null, [s, p] = D(!1), [o, d] = D(() => r.findIndex((e) => !e.disabled)), g = E({ buffer: "", lastTime: 0 }), h = E(null), x = E(null), N = E(null), F = ee.useId(), V = M ?? F, S = `${V}-listbox`, $ = `${V}-label`, q = L((e) => {
+    h.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
+  }, [m]), [T, G] = D({ top: -9999, left: -9999, width: 0 }), v = L(() => {
+    if (!h.current || !x.current) return;
+    const e = h.current.getBoundingClientRect(), t = x.current.getBoundingClientRect(), n = window.scrollY, l = window.scrollX;
+    let c = e.bottom + n + 4;
+    const y = e.left + l, I = e.width, u = 16;
+    e.bottom + t.height + 4 > document.documentElement.clientHeight - u && (c = e.top + n - t.height - 4, c < u + n && (c = u + n)), G({ top: c, left: y, width: I });
+  }, []);
+  ne(() => {
     if (s)
-      return Z(g, () => b(!1));
-  }, [s]), E(() => {
+      return v(), window.addEventListener("resize", v), window.addEventListener("scroll", v, !0), () => {
+        window.removeEventListener("resize", v), window.removeEventListener("scroll", v, !0);
+      };
+  }, [s, v]);
+  const J = L(() => {
+    p(!1), re(h.current);
+  }, []);
+  j(() => s ? le([x, h], () => p(!1)) : void 0, [s]), j(() => {
     if (!s) return;
-    const e = l.findIndex(
-      (n) => n.value === d && !n.disabled
-    ), t = e >= 0 ? e : l.findIndex((n) => !n.disabled);
-    u(t >= 0 ? t : -1), setTimeout(() => {
-      g.current?.focus();
-    }, 0);
-  }, [s, l, d]);
-  const $ = h(
-    (e) => {
-      if (e < 0 || e >= l.length) return;
-      const t = l[e];
-      t.disabled || (D || F(t.value), o?.(t.value), b(!1), p.current?.focus());
-    },
-    [D, l, o]
-  ), z = (e) => {
-    r || ["ArrowDown", "ArrowUp", " ", "Enter"].includes(e.key) && (e.preventDefault(), M());
-  }, G = (e) => {
+    const e = r.findIndex((l) => l.value === w && !l.disabled), t = e >= 0 ? e : r.findIndex((l) => !l.disabled);
+    d(t >= 0 ? t : -1);
+    const n = setTimeout(() => x.current?.focus(), 10);
+    return () => clearTimeout(n);
+  }, [s, r, w]), j(() => {
+    s && N.current && N.current.scrollIntoView({ block: "nearest" });
+  }, [o, s]);
+  const W = L((e) => {
+    if (e < 0 || e >= r.length) return;
+    const t = r[e];
+    t.disabled || (C || Y(t.value), f?.(t.value), p(!1), h.current?.focus());
+  }, [C, r, f]), Q = (e) => {
+    a || ["ArrowDown", "ArrowUp", " ", "Enter"].includes(e.key) && (e.preventDefault(), p(!0));
+  }, Z = (e) => {
     const t = e.key;
     if (t === "ArrowDown") {
       e.preventDefault();
-      const n = j(l, c, 1);
-      n >= 0 && u(n);
+      const n = z(r, o, 1);
+      n >= 0 && d(n);
     } else if (t === "ArrowUp") {
       e.preventDefault();
-      const n = j(l, c, -1);
-      n >= 0 && u(n);
+      const n = z(r, o, -1);
+      n >= 0 && d(n);
     } else if (t === "Home") {
       e.preventDefault();
-      const n = l.findIndex((a) => !a.disabled);
-      n >= 0 && u(n);
+      const n = r.findIndex((l) => !l.disabled);
+      n >= 0 && d(n);
     } else if (t === "End") {
       e.preventDefault();
-      const n = l.length - 1 - [...l].reverse().findIndex((a) => !a.disabled);
-      n >= 0 && u(n);
+      const n = r.length - 1 - [...r].reverse().findIndex((l) => !l.disabled);
+      n >= 0 && d(n);
     } else if (t === "Enter" || t === " ")
-      e.preventDefault(), c >= 0 && $(c);
+      e.preventDefault(), o >= 0 && W(o);
     else if (t === "Escape")
-      e.preventDefault(), W();
+      e.preventDefault(), J();
     else if (t.length === 1 && t.match(/\S/)) {
       const n = Date.now();
-      n - v.current.lastTime > 700 && (v.current.buffer = ""), v.current.buffer += t.toLowerCase(), v.current.lastTime = n;
-      const a = v.current.buffer, k = c >= 0 ? c + 1 : 0, O = l.length;
-      for (let C = 0; C < O; C++) {
-        const N = (k + C) % O, Q = String(l[N].label).toLowerCase();
-        if (!l[N].disabled && Q.startsWith(a)) {
-          u(N);
+      n - g.current.lastTime > 700 && (g.current.buffer = ""), g.current.buffer += t.toLowerCase(), g.current.lastTime = n;
+      const l = g.current.buffer, c = o >= 0 ? o + 1 : 0, y = r.length;
+      for (let I = 0; I < y; I++) {
+        const u = (c + I) % y, _ = String(r[u].label).toLowerCase();
+        if (!r[u].disabled && _.startsWith(l)) {
+          d(u);
           break;
         }
       }
     }
-  }, J = (e) => {
-    $(e);
-  }, [y, K] = x(null);
-  return E(() => {
-    if (!s || !p.current) {
-      K(null);
-      return;
-    }
-    const e = p.current.getBoundingClientRect(), t = e.bottom + 6, n = e.left;
-    K({ top: t, left: n });
-  }, [s]), /* @__PURE__ */ V("div", { className: `ui-select ${U}`, children: [
-    L && /* @__PURE__ */ i("input", { type: "hidden", name: L, value: d ?? "" }),
-    /* @__PURE__ */ V(
+  };
+  return /* @__PURE__ */ A("div", { className: B("nui-select-root", P), children: [
+    K && /* @__PURE__ */ i("input", { type: "hidden", name: K, value: w ?? "" }),
+    /* @__PURE__ */ A(
       "button",
       {
-        ref: p,
-        id: T,
+        ref: q,
+        id: $,
         type: "button",
-        className: "ui-select-trigger",
+        className: B("nui-select-trigger", H && "error"),
         "aria-haspopup": "listbox",
         "aria-expanded": s,
-        "aria-controls": s ? w : void 0,
-        "aria-disabled": r || void 0,
-        onClick: () => q(),
-        onKeyDown: z,
-        disabled: r,
+        "aria-controls": s ? S : void 0,
+        "aria-disabled": a || void 0,
+        onClick: () => !a && p((e) => !e),
+        onKeyDown: Q,
+        disabled: a,
+        ...U,
         children: [
-          /* @__PURE__ */ i("span", { children: R ? /* @__PURE__ */ i("span", { children: R.label }) : /* @__PURE__ */ i("span", { className: "ui-select-placeholder", children: f }) }),
-          /* @__PURE__ */ i("span", { className: "ui-select-chevron", "aria-hidden": !0, children: "▾" })
+          /* @__PURE__ */ i("span", { className: "nui-select-value", children: O ? O.label : /* @__PURE__ */ i("span", { className: "nui-select-placeholder", children: b }) }),
+          /* @__PURE__ */ i("svg", { className: "nui-select-chevron", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ i("polyline", { points: "6 9 12 15 18 9" }) })
         ]
       }
     ),
-    s && y && /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(
+    s && /* @__PURE__ */ i(se, { children: /* @__PURE__ */ i(
       "div",
       {
-        id: w,
-        ref: g,
-        className: "ui-select-listbox",
+        id: S,
+        ref: x,
+        className: "nui-select-listbox",
         role: "listbox",
-        "aria-labelledby": T,
+        "aria-labelledby": $,
         tabIndex: 0,
-        style: {
-          top: y.top,
-          left: y.left
-        },
-        onKeyDown: G,
-        children: l.map((e, t) => {
-          const n = d === e.value, a = c === t;
-          return /* @__PURE__ */ i(
+        style: { top: T.top, left: T.left, width: T.width },
+        onKeyDown: Z,
+        children: r.map((e, t) => {
+          const n = w === e.value, l = o === t;
+          return /* @__PURE__ */ A(
             "div",
             {
-              id: `${w}-option-${t}`,
+              ref: l ? N : null,
+              id: `${S}-option-${t}`,
               role: "option",
               "aria-selected": n,
               "aria-disabled": e.disabled || void 0,
-              className: "ui-select-option",
+              className: B(
+                "nui-select-option",
+                l && "active",
+                n && "selected",
+                e.disabled && "disabled"
+              ),
               tabIndex: -1,
-              onMouseDown: (k) => k.preventDefault(),
-              onClick: () => !e.disabled && J(t),
-              style: {
-                outline: a ? "2px solid var(--color-primary)" : void 0
-              },
-              children: e.label
+              onMouseDown: (c) => c.preventDefault(),
+              onClick: () => !e.disabled && W(t),
+              onMouseEnter: () => !e.disabled && d(t),
+              children: [
+                /* @__PURE__ */ i("span", { className: "nui-select-option-label", children: e.label }),
+                n && /* @__PURE__ */ i("svg", { className: "nui-select-check", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ i("polyline", { points: "20 6 9 17 4 12" }) })
+              ]
             },
             e.value
           );
@@ -158,7 +158,8 @@ function ie({
       }
     ) })
   ] });
-}
+});
+ie.displayName = "Select";
 export {
   ie as Select
 };