@nofinite/nui 1.1.2 → 2.0.0

package/dist/components/treeview/TreeView.js

@@ -1,98 +1,128 @@
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { useState as w } from "react";
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import T, { forwardRef as D, useState as L, useRef as $, useCallback as g } from "react";
 /* empty css             */
-function b({
-  data: p,
-  selectedId: A,
+import { cn as u } from "../../utils/cn/cn.js";
+const P = D(({
+  data: k,
+  selectedId: x,
+  defaultExpandedIds: A = [],
   onSelect: h,
-  className: N = ""
-}) {
-  const [d, g] = w(/* @__PURE__ */ new Set()), [y, o] = w(null), f = (i) => {
-    g((e) => {
-      const r = new Set(e);
-      return r.has(i) ? r.delete(i) : r.add(i), r;
+  className: E,
+  ...N
+}, y) => {
+  const [f, I] = L(new Set(A)), p = $(null), v = `nui-tree-${T.useId().replace(/:/g, "")}`, c = g((t, r) => {
+    r?.stopPropagation(), I((o) => {
+      const e = new Set(o);
+      return e.has(t) ? e.delete(t) : e.add(t), e;
     });
-  }, u = (i, e = []) => (i.forEach((r) => {
-    e.push(r);
-    const t = d.has(r.id);
-    r.children && r.children.length > 0 && t && u(r.children, e);
-  }), e), x = (i, e, r) => {
-    const t = i.key;
-    if (t === "Enter" || t === " ") {
-      i.preventDefault(), h && h(e.id);
-      return;
-    }
-    if (t === "ArrowLeft") {
-      i.preventDefault();
-      const s = e.children && e.children.length > 0, n = d.has(e.id);
-      if (s && n) {
-        f(e.id);
-        return;
-      }
-      r && o(r.id);
-      return;
-    }
-    if (t === "ArrowRight") {
-      i.preventDefault();
-      const s = e.children && e.children.length > 0, n = d.has(e.id);
-      if (s && !n) {
-        f(e.id);
-        return;
-      }
-      if (s && n) {
-        const c = Array.isArray(e.children) && e.children.length > 0 ? e.children[0] : void 0;
-        c && o(c.id);
+  }, []), C = g(
+    (t, r, o) => {
+      ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " ", "Enter"].includes(t.key) && t.preventDefault(), t.stopPropagation();
+      const e = t.currentTarget, d = f.has(r.id), s = !!r.children?.length, i = p.current ? Array.from(
+        p.current.querySelectorAll('[role="treeitem"]:not([aria-disabled="true"])')
+      ) : [], l = i.indexOf(e);
+      switch (t.key) {
+        case "Enter":
+        case " ":
+          if (r.disabled) return;
+          s && c(r.id), h?.(r.id, r);
+          break;
+        case "ArrowRight":
+          s && !d ? c(r.id) : s && d && i[l + 1]?.focus();
+          break;
+        case "ArrowLeft":
+          s && d ? c(r.id) : o && i.find((R) => R.id.endsWith(`-${o.id}`))?.focus();
+          break;
+        case "ArrowDown":
+          i[l + 1]?.focus();
+          break;
+        case "ArrowUp":
+          i[l - 1]?.focus();
+          break;
+        case "Home":
+          i[0]?.focus();
+          break;
+        case "End":
+          i[i.length - 1]?.focus();
+          break;
       }
-      return;
-    }
-    if (t === "ArrowUp" || t === "ArrowDown") {
-      i.preventDefault();
-      const s = u(p), n = s.findIndex((C) => C.id === e.id);
-      if (n === -1) return;
-      const c = t === "ArrowUp" ? n - 1 : n + 1, l = s[c];
-      l && o(l.id);
-    }
-  }, v = (i, e, r) => {
-    const t = d.has(i.id), s = i.id === A, n = i.id === y, c = Array.isArray(i.children) && i.children.length > 0;
-    return /* @__PURE__ */ m("div", { children: [
-      /* @__PURE__ */ m(
-        "div",
-        {
-          role: "treeitem",
-          "aria-expanded": c ? t : void 0,
-          tabIndex: n ? 0 : -1,
-          className: [
-            "ui-tree-node",
-            s ? "selected" : "",
-            n ? "active" : ""
-          ].filter(Boolean).join(" "),
-          style: { paddingLeft: r * 16 },
-          onClick: () => {
-            h && h(i.id), o(i.id), Array.isArray(i.children) && i.children.length > 0 && f(i.id);
+    },
+    [f, c, h]
+  ), b = (t, r = 1, o) => /* @__PURE__ */ a(
+    "ul",
+    {
+      role: r === 1 ? "tree" : "group",
+      className: u("nui-tree", r > 1 && "nui-tree--nested"),
+      ref: r === 1 ? p : void 0,
+      children: t.map((e, d) => {
+        const s = f.has(e.id), m = x === e.id, i = !!e.children?.length, l = r === 1 && d === 0;
+        return /* @__PURE__ */ w(
+          "li",
+          {
+            id: `${v}-${e.id}`,
+            role: "treeitem",
+            "aria-expanded": i ? s : void 0,
+            "aria-selected": m,
+            "aria-disabled": e.disabled,
+            tabIndex: l ? 0 : -1,
+            className: u(
+              "nui-tree-item",
+              m && "nui-tree-item--selected",
+              e.disabled && "nui-tree-item--disabled"
+            ),
+            onKeyDown: (n) => C(n, e, o),
+            onClick: (n) => {
+              n.stopPropagation(), !e.disabled && (n.currentTarget.focus(), i && c(e.id), h?.(e.id, e));
+            },
+            children: [
+              /* @__PURE__ */ w(
+                "div",
+                {
+                  className: "nui-tree-item-content",
+                  style: { paddingLeft: `${(r - 1) * 16}px` },
+                  children: [
+                    /* @__PURE__ */ a(
+                      "span",
+                      {
+                        className: u("nui-tree-chevron", !i && "nui-tree-chevron--hidden"),
+                        onClick: (n) => {
+                          i && c(e.id, n);
+                        },
+                        children: /* @__PURE__ */ a(
+                          "svg",
+                          {
+                            width: "14",
+                            height: "14",
+                            viewBox: "0 0 24 24",
+                            fill: "none",
+                            stroke: "currentColor",
+                            strokeWidth: "2.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            className: u("nui-tree-chevron-icon", s && "nui-tree-chevron-icon--open"),
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ a("polyline", { points: "9 18 15 12 9 6" })
+                          }
+                        )
+                      }
+                    ),
+                    e.icon && /* @__PURE__ */ a("span", { className: "nui-tree-icon", "aria-hidden": "true", children: e.icon }),
+                    /* @__PURE__ */ a("span", { className: "nui-tree-label", children: e.label })
+                  ]
+                }
+              ),
+              i && s && e.children && b(e.children, r + 1, e)
+            ]
           },
-          onKeyDown: (l) => x(l, i, e),
-          children: [
-            c ? /* @__PURE__ */ a(
-              "span",
-              {
-                className: `ui-tree-arrow ${t ? "open" : ""}`,
-                onClick: (l) => {
-                  l.stopPropagation(), f(i.id);
-                },
-                children: "▶"
-              }
-            ) : /* @__PURE__ */ a("span", { className: "ui-tree-arrow empty", children: "•" }),
-            i.icon && /* @__PURE__ */ a("span", { className: "ui-tree-icon", children: i.icon }),
-            /* @__PURE__ */ a("span", { className: "ui-tree-label", children: i.label })
-          ]
-        }
-      ),
-      c && t && i.children && /* @__PURE__ */ a("div", { role: "group", children: i.children.map((l) => v(l, i, r + 1)) })
-    ] }, i.id);
-  };
-  return /* @__PURE__ */ a("div", { className: `ui-treeview ${N}`, role: "tree", children: p.map((i) => v(i, void 0, 0)) });
-}
+          e.id
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ a("div", { ref: y, className: u("nui-tree-wrapper", E), ...N, children: b(k) });
+});
+P.displayName = "TreeView";
 export {
-  b as TreeView
+  P as TreeView
 };
 //# sourceMappingURL=TreeView.js.map

package/dist/components/treeview/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","sources":["../../../src/components/treeview/TreeView.tsx"],"sourcesContent":["/**\r\n * TreeView.tsx — FINAL VERSION\r\n * ----------------------------\r\n * Features:\r\n * - Expand/collapse\r\n * - Recursive rendering\r\n * - Arrow key navigation\r\n * - Enter/Space to select\r\n * - ARIA TreeView roles\r\n * - Value controlled OR internal state\r\n */\r\n\r\nimport React, { useState } from 'react';\r\nimport './TreeView.css';\r\n\r\nexport interface TreeNode {\r\n  id: string;\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  children?: TreeNode[];\r\n}\r\n\r\ninterface TreeViewProps {\r\n  data: TreeNode[];\r\n  selectedId?: string;\r\n  onSelect?: (id: string) => void;\r\n  className?: string;\r\n}\r\n\r\nexport function TreeView({\r\n  data,\r\n  selectedId,\r\n  onSelect,\r\n  className = '',\r\n}: TreeViewProps) {\r\n  const [openNodes, setOpenNodes] = useState<Set<string>>(new Set());\r\n  const [activeNode, setActiveNode] = useState<string | null>(null);\r\n\r\n  const toggleNode = (id: string) => {\r\n    setOpenNodes((prev) => {\r\n      const next = new Set(prev);\r\n      if (next.has(id)) next.delete(id);\r\n      else next.add(id);\r\n      return next;\r\n    });\r\n  };\r\n\r\n  const flatten = (nodes: TreeNode[], acc: TreeNode[] = []): TreeNode[] => {\r\n    nodes.forEach((node) => {\r\n      acc.push(node);\r\n\r\n      const isOpen = openNodes.has(node.id);\r\n      if (node.children && node.children.length > 0 && isOpen) {\r\n        flatten(node.children, acc);\r\n      }\r\n    });\r\n    return acc;\r\n  };\r\n\r\n  const handleKeyDown = (\r\n    e: React.KeyboardEvent,\r\n    node: TreeNode,\r\n    parent: TreeNode | undefined\r\n  ) => {\r\n    const key = e.key;\r\n\r\n    // Select\r\n    if (key === 'Enter' || key === ' ') {\r\n      e.preventDefault();\r\n      if (onSelect) onSelect(node.id);\r\n      return;\r\n    }\r\n\r\n    // Collapse or go to parent\r\n    if (key === 'ArrowLeft') {\r\n      e.preventDefault();\r\n\r\n      const hasChildren = node.children && node.children.length > 0;\r\n      const isOpen = openNodes.has(node.id);\r\n\r\n      if (hasChildren && isOpen) {\r\n        toggleNode(node.id);\r\n        return;\r\n      }\r\n\r\n      if (parent) {\r\n        setActiveNode(parent.id);\r\n      }\r\n      return;\r\n    }\r\n\r\n    // Expand or go to first child\r\n    if (key === 'ArrowRight') {\r\n      e.preventDefault();\r\n\r\n      const hasChildren = node.children && node.children.length > 0;\r\n      const isOpen = openNodes.has(node.id);\r\n\r\n      if (hasChildren && !isOpen) {\r\n        toggleNode(node.id);\r\n        return;\r\n      }\r\n\r\n      if (hasChildren && isOpen) {\r\n        const firstChild =\r\n          Array.isArray(node.children) && node.children.length > 0\r\n            ? node.children[0]\r\n            : undefined;\r\n\r\n        if (firstChild) {\r\n          setActiveNode(firstChild.id);\r\n        }\r\n      }\r\n      return;\r\n    }\r\n\r\n    // Up/Down navigation\r\n    if (key === 'ArrowUp' || key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      const flat = flatten(data);\r\n      const index = flat.findIndex((n) => n.id === node.id);\r\n\r\n      if (index === -1) return;\r\n\r\n      const nextIndex = key === 'ArrowUp' ? index - 1 : index + 1;\r\n      const nextNode = flat[nextIndex];\r\n\r\n      if (nextNode) {\r\n        setActiveNode(nextNode.id);\r\n      }\r\n    }\r\n  };\r\n\r\n  const renderNode = (\r\n    node: TreeNode,\r\n    parent: TreeNode | undefined,\r\n    depth: number\r\n  ) => {\r\n    const isOpen = openNodes.has(node.id);\r\n    const isSelected = node.id === selectedId;\r\n    const isActive = node.id === activeNode;\r\n    const hasChildren =\r\n      Array.isArray(node.children) && node.children.length > 0;\r\n\r\n    return (\r\n      <div key={node.id}>\r\n        <div\r\n          role=\"treeitem\"\r\n          aria-expanded={hasChildren ? isOpen : undefined}\r\n          tabIndex={isActive ? 0 : -1}\r\n          className={[\r\n            'ui-tree-node',\r\n            isSelected ? 'selected' : '',\r\n            isActive ? 'active' : '',\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          style={{ paddingLeft: depth * 16 }}\r\n          onClick={() => {\r\n            if (onSelect) onSelect(node.id);\r\n            setActiveNode(node.id);\r\n\r\n            const hasChildren =\r\n              Array.isArray(node.children) && node.children.length > 0;\r\n\r\n            // Clicking node should expand/collapse just like arrow\r\n            if (hasChildren) {\r\n              toggleNode(node.id);\r\n            }\r\n          }}\r\n          onKeyDown={(e) => handleKeyDown(e, node, parent)}\r\n        >\r\n          {/* Arrow */}\r\n          {hasChildren ? (\r\n            <span\r\n              className={`ui-tree-arrow ${isOpen ? 'open' : ''}`}\r\n              onClick={(e) => {\r\n                e.stopPropagation();\r\n                toggleNode(node.id);\r\n              }}\r\n            >\r\n              ▶\r\n            </span>\r\n          ) : (\r\n            <span className=\"ui-tree-arrow empty\">•</span>\r\n          )}\r\n\r\n          {/* Icon */}\r\n          {node.icon && <span className=\"ui-tree-icon\">{node.icon}</span>}\r\n\r\n          <span className=\"ui-tree-label\">{node.label}</span>\r\n        </div>\r\n\r\n        {/* Children */}\r\n        {hasChildren && isOpen && node.children && (\r\n          <div role=\"group\">\r\n            {node.children.map((child) => renderNode(child, node, depth + 1))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <div className={`ui-treeview ${className}`} role=\"tree\">\r\n      {data.map((node) => renderNode(node, undefined, 0))}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["TreeView","data","selectedId","onSelect","className","openNodes","setOpenNodes","useState","activeNode","setActiveNode","toggleNode","id","prev","next","flatten","nodes","acc","node","isOpen","handleKeyDown","e","parent","key","hasChildren","firstChild","flat","index","n","nextIndex","nextNode","renderNode","depth","isSelected","isActive","jsxs","jsx","child"],"mappings":"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"}
+{"version":3,"file":"TreeView.js","sources":["../../../src/components/treeview/TreeView.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback, useRef, forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './TreeView.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface TreeNode {\n  /** Unique identifier for the node */\n  id: string;\n  /** Text or element to display */\n  label: React.ReactNode;\n  /** Optional icon to display next to the label */\n  icon?: React.ReactNode;\n  /** Nested children nodes */\n  children?: TreeNode[];\n  /** Prevents interaction and applies muted styles */\n  disabled?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** The hierarchical data structure to render */\n  data: TreeNode[];\n  /** The ID of the currently selected node (Controlled) */\n  selectedId?: string;\n  /** Array of node IDs to expand by default on initial render */\n  defaultExpandedIds?: string[];\n  /** Callback fired when a node is selected */\n  onSelect?: (id: string, node: TreeNode) => void;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * TreeView Component\n * * A hierarchical list display with nested collapsible folders.\n * * Fully WAI-ARIA compliant with a smart roving tabindex for keyboard navigation.\n */\nexport const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(({\n  data,\n  selectedId,\n  defaultExpandedIds = [],\n  onSelect,\n  className,\n  ...props\n}, ref) => {\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(defaultExpandedIds));\n  const treeRef = useRef<HTMLUListElement>(null);\n  \n  // Generate a unique prefix so multiple TreeViews on the same page never clash IDs\n  const baseId = React.useId();\n  // Strip the colons that React adds to make it strictly valid for query selectors\n  const treeIdPrefix = `nui-tree-${baseId.replace(/:/g, '')}`;\n\n  const toggleExpand = useCallback((id: string, e?: React.MouseEvent) => {\n    e?.stopPropagation();\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  }, []);\n\n  /* ----------------------------------------------------\n     Keyboard Navigation (WAI-ARIA Standard)\n  ---------------------------------------------------- */\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent, node: TreeNode, parentNode?: TreeNode) => {\n      // 1. Instantly kill all default browser scrolling for arrow keys\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', ' ', 'Enter'].includes(e.key)) {\n        e.preventDefault();\n      }\n      \n      // 2. Stop parent folders from stealing the keypress\n      e.stopPropagation();\n\n      const target = e.currentTarget as HTMLLIElement;\n      const isExpanded = expandedIds.has(node.id);\n      const hasChildren = !!node.children?.length;\n\n      // Get all currently visible nodes in the exact DOM order\n      const getVisibleNodes = () => {\n        if (!treeRef.current) return [];\n        return Array.from(\n          treeRef.current.querySelectorAll('[role=\"treeitem\"]:not([aria-disabled=\"true\"])')\n        ) as HTMLLIElement[];\n      };\n\n      const nodes = getVisibleNodes();\n      const currentIndex = nodes.indexOf(target);\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          if (node.disabled) return;\n          // Modern UX: Enter/Space should expand/collapse folders\n          if (hasChildren) toggleExpand(node.id);\n          onSelect?.(node.id, node);\n          break;\n\n        case 'ArrowRight':\n          if (hasChildren && !isExpanded) {\n            // Closed folder -> Open it\n            toggleExpand(node.id);\n          } else if (hasChildren && isExpanded) {\n            // Open folder -> The very next visible node in the DOM is ALWAYS its first child!\n            nodes[currentIndex + 1]?.focus();\n          }\n          break;\n\n        case 'ArrowLeft':\n          if (hasChildren && isExpanded) {\n            // Open folder -> Close it\n            toggleExpand(node.id);\n          } else if (parentNode) {\n            // Closed folder or File -> Safely find parent by checking the end of the ID\n            const parentEl = nodes.find(n => n.id.endsWith(`-${parentNode.id}`));\n            parentEl?.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          nodes[currentIndex + 1]?.focus();\n          break;\n\n        case 'ArrowUp':\n          nodes[currentIndex - 1]?.focus();\n          break;\n\n        case 'Home':\n          nodes[0]?.focus();\n          break;\n\n        case 'End':\n          nodes[nodes.length - 1]?.focus();\n          break;\n      }\n    },\n    [expandedIds, toggleExpand, onSelect]\n  );\n\n  /* ----------------------------------------------------\n     Recursive Render Function\n  ---------------------------------------------------- */\n  const renderTree = (nodes: TreeNode[], level = 1, parentNode?: TreeNode) => {\n    return (\n      <ul\n        role={level === 1 ? 'tree' : 'group'}\n        className={cn(\"nui-tree\", level > 1 && \"nui-tree--nested\")}\n        ref={level === 1 ? treeRef : undefined}\n      >\n        {nodes.map((node, index) => {\n          const isExpanded = expandedIds.has(node.id);\n          const isSelected = selectedId === node.id;\n          const hasChildren = !!node.children?.length;\n          \n          // Only the first item in the entire tree is tabbable by default (Roving Tabindex)\n          const isTabbable = level === 1 && index === 0;\n\n          return (\n            <li\n              key={node.id}\n              id={`${treeIdPrefix}-${node.id}`} \n              role=\"treeitem\"\n              aria-expanded={hasChildren ? isExpanded : undefined}\n              aria-selected={isSelected}\n              aria-disabled={node.disabled}\n              tabIndex={isTabbable ? 0 : -1}\n              className={cn(\n                \"nui-tree-item\",\n                isSelected && \"nui-tree-item--selected\",\n                node.disabled && \"nui-tree-item--disabled\"\n              )}\n              onKeyDown={(e) => handleKeyDown(e, node, parentNode)} \n              onClick={(e) => {\n                e.stopPropagation();\n                if (node.disabled) return;\n                \n                (e.currentTarget as HTMLElement).focus();\n                \n                if (hasChildren) {\n                  toggleExpand(node.id);\n                }\n                onSelect?.(node.id, node);\n              }}\n            >\n              <div \n                className=\"nui-tree-item-content\"\n                style={{ paddingLeft: `${(level - 1) * 16}px` }}\n              >\n                <span \n                  className={cn(\"nui-tree-chevron\", !hasChildren && \"nui-tree-chevron--hidden\")}\n                  onClick={(e) => {\n                    if (hasChildren) toggleExpand(node.id, e);\n                  }}\n                >\n                  <svg \n                    width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n                    className={cn(\"nui-tree-chevron-icon\", isExpanded && \"nui-tree-chevron-icon--open\")}\n                    aria-hidden=\"true\"\n                  >\n                    <polyline points=\"9 18 15 12 9 6\"></polyline>\n                  </svg>\n                </span>\n\n                {node.icon && (\n                  <span className=\"nui-tree-icon\" aria-hidden=\"true\">{node.icon}</span>\n                )}\n\n                <span className=\"nui-tree-label\">{node.label}</span>\n              </div>\n\n              {hasChildren && isExpanded && node.children && (\n                renderTree(node.children, level + 1, node) // Pass 'node' as the parent for the next level\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    );\n  };\n\n  return (\n    <div ref={ref} className={cn(\"nui-tree-wrapper\", className)} {...props}>\n      {renderTree(data)}\n    </div>\n  );\n});\n\nTreeView.displayName = 'TreeView';"],"names":["TreeView","forwardRef","data","selectedId","defaultExpandedIds","onSelect","className","props","ref","expandedIds","setExpandedIds","useState","treeRef","useRef","treeIdPrefix","React","toggleExpand","useCallback","id","e","prev","next","handleKeyDown","node","parentNode","target","isExpanded","hasChildren","nodes","currentIndex","n","renderTree","level","jsx","cn","index","isSelected","isTabbable","jsxs"],"mappings":"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"}

package/dist/components/virtuallist/VirtualList.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react");;/* empty css                  */function L({items:o,height:a,itemHeight:e=36,renderItem:d,className:v=""}){const s=n.useRef(null),[f,x]=n.useState(0),c=n.useCallback(()=>{s.current&&x(s.current.scrollTop)},[]),i=o.length,p=Math.ceil(a/e)+2,r=Math.max(0,Math.floor(f/e)-1),m=Math.min(i-1,r+p),y=r*e,h=o.slice(r,m+1);return n.useLayoutEffect(()=>{const t=s.current;if(t)return t.addEventListener("scroll",c,{passive:!0}),()=>t.removeEventListener("scroll",c)},[c]),l.jsxs("div",{ref:s,className:`ui-virtual-list ${v}`,style:{height:a},children:[l.jsx("div",{className:"ui-virtual-spacer",style:{height:i*e}}),l.jsx("div",{className:"ui-virtual-items",style:{transform:`translateY(${y}px)`},children:h.map((t,j)=>{const u=r+j;return l.jsx("div",{className:"ui-virtual-row",style:{height:e},children:d(t,u)},u)})})]})}exports.VirtualList=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("react");;/* empty css                  */const w=require("../../utils/cn/cn.cjs");function L({items:c,height:i,itemHeight:s=40,overscan:o=3,keyExtractor:u,renderItem:h,className:m,onScroll:d,...v},e){const[f,y]=l.useState(0),j=l.useRef(null),I=l.useCallback(t=>{j.current=t,typeof e=="function"?e(t):e&&(e.current=t)},[e]),R=l.useCallback(t=>{y(t.currentTarget.scrollTop),d?.(t)},[d]),p=c.length,b=p*s,r=Math.max(0,Math.floor(f/s)-o),M=Math.min(p-1,Math.floor((f+i)/s)+o),N=c.slice(r,M+1),S=r*s;return n.jsxs("div",{ref:I,className:w.cn("nui-virtual-list",m),style:{height:`${i}px`},onScroll:R,role:"list",...v,children:[n.jsx("div",{className:"nui-virtual-spacer",style:{height:`${b}px`}}),n.jsx("div",{className:"nui-virtual-window",style:{transform:`translateY(${S}px)`},children:N.map((t,T)=>{const a=r+T,q=u?u(t,a):a;return n.jsx("div",{role:"listitem",className:"nui-virtual-row",style:{height:`${s}px`},children:h(t,a)},q)})})]})}const x=l.forwardRef(L);x.displayName="VirtualList";exports.VirtualList=x;
 //# sourceMappingURL=VirtualList.cjs.map

package/dist/components/virtuallist/VirtualList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.cjs","sources":["../../../src/components/virtuallist/VirtualList.tsx"],"sourcesContent":["import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';\r\nimport './VirtualList.css';\r\n\r\nexport interface VirtualListProps<T> {\r\n  items: T[];\r\n  /** Height of the viewport container */\r\n  height: number;\r\n  /** Fixed height for each row */\r\n  itemHeight?: number; // default: 36px\r\n  /** Renderer function */\r\n  renderItem: (item: T, index: number) => React.ReactNode;\r\n  /** Optional class */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Virtualized List (Fixed Row Height)\r\n * -----------------------------------\r\n * • Ultra-fast\r\n * • Handles 10k+ rows easily\r\n * • Smooth scroll\r\n * • Zero dependencies\r\n * • Precision scrolling\r\n */\r\nexport function VirtualList<T>({\r\n  items,\r\n  height,\r\n  itemHeight = 36,\r\n  renderItem,\r\n  className = '',\r\n}: VirtualListProps<T>) {\r\n  const containerRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  // visible window\r\n  const [scrollTop, setScrollTop] = useState(0);\r\n\r\n  const onScroll = useCallback(() => {\r\n    if (containerRef.current) {\r\n      setScrollTop(containerRef.current.scrollTop);\r\n    }\r\n  }, []);\r\n\r\n  // compute visible range\r\n  const total = items.length;\r\n  const viewCount = Math.ceil(height / itemHeight) + 2; // overscan\r\n  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - 1);\r\n  const endIndex = Math.min(total - 1, startIndex + viewCount);\r\n\r\n  // positioning\r\n  const offsetTop = startIndex * itemHeight;\r\n  const visibleItems = items.slice(startIndex, endIndex + 1);\r\n\r\n  // ensure scroll events update immediately\r\n  useLayoutEffect(() => {\r\n    const el = containerRef.current;\r\n    if (!el) return;\r\n\r\n    el.addEventListener('scroll', onScroll, { passive: true });\r\n    return () => el.removeEventListener('scroll', onScroll);\r\n  }, [onScroll]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`ui-virtual-list ${className}`}\r\n      style={{ height }}\r\n    >\r\n      <div\r\n        className=\"ui-virtual-spacer\"\r\n        style={{ height: total * itemHeight }}\r\n      />\r\n\r\n      <div\r\n        className=\"ui-virtual-items\"\r\n        style={{ transform: `translateY(${offsetTop}px)` }}\r\n      >\r\n        {visibleItems.map((item, i) => {\r\n          const index = startIndex + i;\r\n          return (\r\n            <div\r\n              key={index}\r\n              className=\"ui-virtual-row\"\r\n              style={{ height: itemHeight }}\r\n            >\r\n              {renderItem(item, index)}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["VirtualList","items","height","itemHeight","renderItem","className","containerRef","useRef","scrollTop","setScrollTop","useState","onScroll","useCallback","total","viewCount","startIndex","endIndex","offsetTop","visibleItems","useLayoutEffect","el","jsxs","jsx","item","i","index"],"mappings":"yKAwBO,SAASA,EAAe,CAC7B,MAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,GACb,WAAAC,EACA,UAAAC,EAAY,EACd,EAAwB,CACtB,MAAMC,EAAeC,EAAAA,OAA8B,IAAI,EAGjD,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,CAAC,EAEtCC,EAAWC,EAAAA,YAAY,IAAM,CAC7BN,EAAa,SACfG,EAAaH,EAAa,QAAQ,SAAS,CAE/C,EAAG,CAAA,CAAE,EAGCO,EAAQZ,EAAM,OACda,EAAY,KAAK,KAAKZ,EAASC,CAAU,EAAI,EAC7CY,EAAa,KAAK,IAAI,EAAG,KAAK,MAAMP,EAAYL,CAAU,EAAI,CAAC,EAC/Da,EAAW,KAAK,IAAIH,EAAQ,EAAGE,EAAaD,CAAS,EAGrDG,EAAYF,EAAaZ,EACzBe,EAAejB,EAAM,MAAMc,EAAYC,EAAW,CAAC,EAGzDG,OAAAA,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAAKd,EAAa,QACxB,GAAKc,EAEL,OAAAA,EAAG,iBAAiB,SAAUT,EAAU,CAAE,QAAS,GAAM,EAClD,IAAMS,EAAG,oBAAoB,SAAUT,CAAQ,CACxD,EAAG,CAACA,CAAQ,CAAC,EAGXU,EAAAA,KAAC,MAAA,CACC,IAAKf,EACL,UAAW,mBAAmBD,CAAS,GACvC,MAAO,CAAE,OAAAH,CAAA,EAET,SAAA,CAAAoB,EAAAA,IAAC,MAAA,CACC,UAAU,oBACV,MAAO,CAAE,OAAQT,EAAQV,CAAA,CAAW,CAAA,EAGtCmB,EAAAA,IAAC,MAAA,CACC,UAAU,mBACV,MAAO,CAAE,UAAW,cAAcL,CAAS,KAAA,EAE1C,SAAAC,EAAa,IAAI,CAACK,EAAMC,IAAM,CAC7B,MAAMC,EAAQV,EAAaS,EAC3B,OACEF,EAAAA,IAAC,MAAA,CAEC,UAAU,iBACV,MAAO,CAAE,OAAQnB,CAAA,EAEhB,SAAAC,EAAWmB,EAAME,CAAK,CAAA,EAJlBA,CAAA,CAOX,CAAC,CAAA,CAAA,CACH,CAAA,CAAA,CAGN"}
+{"version":3,"file":"VirtualList.cjs","sources":["../../../src/components/virtuallist/VirtualList.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useRef, useState, useCallback, UIEvent, forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './VirtualList.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface VirtualListProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Array of data items to render */\n  items: T[];\n  /** Height of the scrollable viewport in pixels */\n  height: number;\n  /** Fixed height for each row in pixels. Defaults to 40. */\n  itemHeight?: number;\n  /** Extra rows to render above and below the viewport to prevent white flashes during fast scrolling */\n  overscan?: number;\n  /** Extracts a unique React key for each item. Crucial for stable rendering during sorts/filters! */\n  keyExtractor?: (item: T, index: number) => string | number;\n  /** The render function for the row */\n  renderItem: (item: T, index: number) => React.ReactNode;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * VirtualList Component\n * * High-performance scrolling for massive datasets.\n * * Uses GPU-accelerated transforms and strict mathematical windowing to only render visible DOM nodes.\n */\nfunction VirtualListInner<T>(\n  {\n    items,\n    height,\n    itemHeight = 40,\n    overscan = 3,\n    keyExtractor,\n    renderItem,\n    className,\n    onScroll,\n    ...props\n  }: VirtualListProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  // Internal ref for scroll tracking, merged with forwarded ref\n  const internalRef = useRef<HTMLDivElement>(null);\n  const setRefs = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  /* ----------------------------------------------------\n     Scroll Handling (React Synthetic Event)\n  ---------------------------------------------------- */\n  const handleScroll = useCallback(\n    (e: UIEvent<HTMLDivElement>) => {\n      // React's Synthetic events are perfectly batched in React 18+\n      setScrollTop(e.currentTarget.scrollTop);\n      // Preserve any consumer-provided onScroll handlers\n      onScroll?.(e);\n    },\n    [onScroll]\n  );\n\n  /* ----------------------------------------------------\n     Virtualization Math\n  ---------------------------------------------------- */\n  const totalItems = items.length;\n  const totalHeight = totalItems * itemHeight;\n\n  // Calculate exactly which indices are currently visible in the viewport\n  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n  const endIndex = Math.min(\n    totalItems - 1,\n    Math.floor((scrollTop + height) / itemHeight) + overscan\n  );\n\n  const visibleItems = items.slice(startIndex, endIndex + 1);\n\n  // Calculate the exact pixel offset to push the visible window down\n  const offsetY = startIndex * itemHeight;\n\n  /* ----------------------------------------------------\n     Render\n  ---------------------------------------------------- */\n  return (\n    <div\n      ref={setRefs}\n      className={cn(\"nui-virtual-list\", className)}\n      style={{ height: `${height}px` }}\n      onScroll={handleScroll}\n      role=\"list\"\n      {...props}\n    >\n      {/* 1. The Spacer: Forces the container to be the exact scrollable height of 10k+ rows */}\n      <div\n        className=\"nui-virtual-spacer\"\n        style={{ height: `${totalHeight}px` }}\n      />\n\n      {/* 2. The Window: Hardware accelerated sliding container */}\n      <div\n        className=\"nui-virtual-window\"\n        style={{ transform: `translateY(${offsetY}px)` }}\n      >\n        {visibleItems.map((item, i) => {\n          const actualIndex = startIndex + i;\n          // Safely fall back to index if no keyExtractor is provided\n          const itemKey = keyExtractor ? keyExtractor(item, actualIndex) : actualIndex;\n\n          return (\n            <div\n              key={itemKey}\n              role=\"listitem\"\n              className=\"nui-virtual-row\"\n              style={{ height: `${itemHeight}px` }}\n            >\n              {renderItem(item, actualIndex)}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n// Type assertion required to allow forwardRef to support generics <T>\nexport const VirtualList = forwardRef(VirtualListInner) as <T>(\n  props: VirtualListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => React.ReactElement;\n\n(VirtualList as React.FC).displayName = 'VirtualList';"],"names":["VirtualListInner","items","height","itemHeight","overscan","keyExtractor","renderItem","className","onScroll","props","ref","scrollTop","setScrollTop","useState","internalRef","useRef","setRefs","useCallback","node","handleScroll","e","totalItems","totalHeight","startIndex","endIndex","visibleItems","offsetY","jsxs","cn","jsx","item","i","actualIndex","itemKey","VirtualList","forwardRef"],"mappings":"kNAkCA,SAASA,EACP,CACE,MAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,GACb,SAAAC,EAAW,EACX,aAAAC,EACA,WAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAAS,CAAC,EAGtCC,EAAcC,EAAAA,OAAuB,IAAI,EACzCC,EAAUC,EAAAA,YACbC,GAAgC,CAC/BJ,EAAY,QAAUI,EAClB,OAAOR,GAAQ,WACjBA,EAAIQ,CAAI,EACCR,IACTA,EAAI,QAAUQ,EAElB,EACA,CAACR,CAAG,CAAA,EAMAS,EAAeF,EAAAA,YAClBG,GAA+B,CAE9BR,EAAaQ,EAAE,cAAc,SAAS,EAEtCZ,IAAWY,CAAC,CACd,EACA,CAACZ,CAAQ,CAAA,EAMLa,EAAapB,EAAM,OACnBqB,EAAcD,EAAalB,EAG3BoB,EAAa,KAAK,IAAI,EAAG,KAAK,MAAMZ,EAAYR,CAAU,EAAIC,CAAQ,EACtEoB,EAAW,KAAK,IACpBH,EAAa,EACb,KAAK,OAAOV,EAAYT,GAAUC,CAAU,EAAIC,CAAA,EAG5CqB,EAAexB,EAAM,MAAMsB,EAAYC,EAAW,CAAC,EAGnDE,EAAUH,EAAapB,EAK7B,OACEwB,EAAAA,KAAC,MAAA,CACC,IAAKX,EACL,UAAWY,EAAAA,GAAG,mBAAoBrB,CAAS,EAC3C,MAAO,CAAE,OAAQ,GAAGL,CAAM,IAAA,EAC1B,SAAUiB,EACV,KAAK,OACJ,GAAGV,EAGJ,SAAA,CAAAoB,EAAAA,IAAC,MAAA,CACC,UAAU,qBACV,MAAO,CAAE,OAAQ,GAAGP,CAAW,IAAA,CAAK,CAAA,EAItCO,EAAAA,IAAC,MAAA,CACC,UAAU,qBACV,MAAO,CAAE,UAAW,cAAcH,CAAO,KAAA,EAExC,SAAAD,EAAa,IAAI,CAACK,EAAMC,IAAM,CAC7B,MAAMC,EAAcT,EAAaQ,EAE3BE,EAAU5B,EAAeA,EAAayB,EAAME,CAAW,EAAIA,EAEjE,OACEH,EAAAA,IAAC,MAAA,CAEC,KAAK,WACL,UAAU,kBACV,MAAO,CAAE,OAAQ,GAAG1B,CAAU,IAAA,EAE7B,SAAAG,EAAWwB,EAAME,CAAW,CAAA,EALxBC,CAAA,CAQX,CAAC,CAAA,CAAA,CACH,CAAA,CAAA,CAGN,CAGO,MAAMC,EAAcC,EAAAA,WAAWnC,CAAgB,EAIrDkC,EAAyB,YAAc"}

package/dist/components/virtuallist/VirtualList.js

@@ -1,49 +1,65 @@
-import { jsxs as L, jsx as n } from "react/jsx-runtime";
-import { useRef as M, useState as N, useCallback as T, useLayoutEffect as E } from "react";
+import { jsxs as S, jsx as o } from "react/jsx-runtime";
+import { forwardRef as V, useState as b, useRef as j, useCallback as m } from "react";
 /* empty css                */
-function j({
-  items: o,
-  height: c,
-  itemHeight: t = 36,
-  renderItem: u,
-  className: f = ""
-}) {
-  const e = M(null), [v, d] = N(0), l = T(() => {
-    e.current && d(e.current.scrollTop);
-  }, []), a = o.length, p = Math.ceil(c / t) + 2, r = Math.max(0, Math.floor(v / t) - 1), m = Math.min(a - 1, r + p), x = r * t, h = o.slice(r, m + 1);
-  return E(() => {
-    const s = e.current;
-    if (s)
-      return s.addEventListener("scroll", l, { passive: !0 }), () => s.removeEventListener("scroll", l);
-  }, [l]), /* @__PURE__ */ L(
+import { cn as Y } from "../../utils/cn/cn.js";
+function g({
+  items: a,
+  height: e,
+  itemHeight: s = 40,
+  overscan: i = 3,
+  keyExtractor: c,
+  renderItem: d,
+  className: h,
+  onScroll: u,
+  ...x
+}, l) {
+  const [p, v] = b(0), y = j(null), I = m(
+    (t) => {
+      y.current = t, typeof l == "function" ? l(t) : l && (l.current = t);
+    },
+    [l]
+  ), N = m(
+    (t) => {
+      v(t.currentTarget.scrollTop), u?.(t);
+    },
+    [u]
+  ), f = a.length, w = f * s, n = Math.max(0, Math.floor(p / s) - i), M = Math.min(
+    f - 1,
+    Math.floor((p + e) / s) + i
+  ), R = a.slice(n, M + 1), T = n * s;
+  return /* @__PURE__ */ S(
     "div",
     {
-      ref: e,
-      className: `ui-virtual-list ${f}`,
-      style: { height: c },
+      ref: I,
+      className: Y("nui-virtual-list", h),
+      style: { height: `${e}px` },
+      onScroll: N,
+      role: "list",
+      ...x,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: "ui-virtual-spacer",
-            style: { height: a * t }
+            className: "nui-virtual-spacer",
+            style: { height: `${w}px` }
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: "ui-virtual-items",
-            style: { transform: `translateY(${x}px)` },
-            children: h.map((s, y) => {
-              const i = r + y;
-              return /* @__PURE__ */ n(
+            className: "nui-virtual-window",
+            style: { transform: `translateY(${T}px)` },
+            children: R.map((t, $) => {
+              const r = n + $, L = c ? c(t, r) : r;
+              return /* @__PURE__ */ o(
                 "div",
                 {
-                  className: "ui-virtual-row",
-                  style: { height: t },
-                  children: u(s, i)
+                  role: "listitem",
+                  className: "nui-virtual-row",
+                  style: { height: `${s}px` },
+                  children: d(t, r)
                 },
-                i
+                L
               );
             })
           }
@@ -52,7 +68,9 @@ function j({
     }
   );
 }
+const C = V(g);
+C.displayName = "VirtualList";
 export {
-  j as VirtualList
+  C as VirtualList
 };
 //# sourceMappingURL=VirtualList.js.map

package/dist/components/virtuallist/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","sources":["../../../src/components/virtuallist/VirtualList.tsx"],"sourcesContent":["import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';\r\nimport './VirtualList.css';\r\n\r\nexport interface VirtualListProps<T> {\r\n  items: T[];\r\n  /** Height of the viewport container */\r\n  height: number;\r\n  /** Fixed height for each row */\r\n  itemHeight?: number; // default: 36px\r\n  /** Renderer function */\r\n  renderItem: (item: T, index: number) => React.ReactNode;\r\n  /** Optional class */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Virtualized List (Fixed Row Height)\r\n * -----------------------------------\r\n * • Ultra-fast\r\n * • Handles 10k+ rows easily\r\n * • Smooth scroll\r\n * • Zero dependencies\r\n * • Precision scrolling\r\n */\r\nexport function VirtualList<T>({\r\n  items,\r\n  height,\r\n  itemHeight = 36,\r\n  renderItem,\r\n  className = '',\r\n}: VirtualListProps<T>) {\r\n  const containerRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  // visible window\r\n  const [scrollTop, setScrollTop] = useState(0);\r\n\r\n  const onScroll = useCallback(() => {\r\n    if (containerRef.current) {\r\n      setScrollTop(containerRef.current.scrollTop);\r\n    }\r\n  }, []);\r\n\r\n  // compute visible range\r\n  const total = items.length;\r\n  const viewCount = Math.ceil(height / itemHeight) + 2; // overscan\r\n  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - 1);\r\n  const endIndex = Math.min(total - 1, startIndex + viewCount);\r\n\r\n  // positioning\r\n  const offsetTop = startIndex * itemHeight;\r\n  const visibleItems = items.slice(startIndex, endIndex + 1);\r\n\r\n  // ensure scroll events update immediately\r\n  useLayoutEffect(() => {\r\n    const el = containerRef.current;\r\n    if (!el) return;\r\n\r\n    el.addEventListener('scroll', onScroll, { passive: true });\r\n    return () => el.removeEventListener('scroll', onScroll);\r\n  }, [onScroll]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={`ui-virtual-list ${className}`}\r\n      style={{ height }}\r\n    >\r\n      <div\r\n        className=\"ui-virtual-spacer\"\r\n        style={{ height: total * itemHeight }}\r\n      />\r\n\r\n      <div\r\n        className=\"ui-virtual-items\"\r\n        style={{ transform: `translateY(${offsetTop}px)` }}\r\n      >\r\n        {visibleItems.map((item, i) => {\r\n          const index = startIndex + i;\r\n          return (\r\n            <div\r\n              key={index}\r\n              className=\"ui-virtual-row\"\r\n              style={{ height: itemHeight }}\r\n            >\r\n              {renderItem(item, index)}\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["VirtualList","items","height","itemHeight","renderItem","className","containerRef","useRef","scrollTop","setScrollTop","useState","onScroll","useCallback","total","viewCount","startIndex","endIndex","offsetTop","visibleItems","useLayoutEffect","el","jsxs","jsx","item","i","index"],"mappings":";;;AAwBO,SAASA,EAAe;AAAA,EAC7B,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAwB;AACtB,QAAMC,IAAeC,EAA8B,IAAI,GAGjD,CAACC,GAAWC,CAAY,IAAIC,EAAS,CAAC,GAEtCC,IAAWC,EAAY,MAAM;AACjC,IAAIN,EAAa,WACfG,EAAaH,EAAa,QAAQ,SAAS;AAAA,EAE/C,GAAG,CAAA,CAAE,GAGCO,IAAQZ,EAAM,QACda,IAAY,KAAK,KAAKZ,IAASC,CAAU,IAAI,GAC7CY,IAAa,KAAK,IAAI,GAAG,KAAK,MAAMP,IAAYL,CAAU,IAAI,CAAC,GAC/Da,IAAW,KAAK,IAAIH,IAAQ,GAAGE,IAAaD,CAAS,GAGrDG,IAAYF,IAAaZ,GACzBe,IAAejB,EAAM,MAAMc,GAAYC,IAAW,CAAC;AAGzD,SAAAG,EAAgB,MAAM;AACpB,UAAMC,IAAKd,EAAa;AACxB,QAAKc;AAEL,aAAAA,EAAG,iBAAiB,UAAUT,GAAU,EAAE,SAAS,IAAM,GAClD,MAAMS,EAAG,oBAAoB,UAAUT,CAAQ;AAAA,EACxD,GAAG,CAACA,CAAQ,CAAC,GAGX,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKf;AAAA,MACL,WAAW,mBAAmBD,CAAS;AAAA,MACvC,OAAO,EAAE,QAAAH,EAAA;AAAA,MAET,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,QAAQT,IAAQV,EAAA;AAAA,UAAW;AAAA,QAAA;AAAA,QAGtC,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,WAAW,cAAcL,CAAS,MAAA;AAAA,YAE1C,UAAAC,EAAa,IAAI,CAACK,GAAMC,MAAM;AAC7B,oBAAMC,IAAQV,IAAaS;AAC3B,qBACE,gBAAAF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,WAAU;AAAA,kBACV,OAAO,EAAE,QAAQnB,EAAA;AAAA,kBAEhB,UAAAC,EAAWmB,GAAME,CAAK;AAAA,gBAAA;AAAA,gBAJlBA;AAAA,cAAA;AAAA,YAOX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"VirtualList.js","sources":["../../../src/components/virtuallist/VirtualList.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useRef, useState, useCallback, UIEvent, forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './VirtualList.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface VirtualListProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Array of data items to render */\n  items: T[];\n  /** Height of the scrollable viewport in pixels */\n  height: number;\n  /** Fixed height for each row in pixels. Defaults to 40. */\n  itemHeight?: number;\n  /** Extra rows to render above and below the viewport to prevent white flashes during fast scrolling */\n  overscan?: number;\n  /** Extracts a unique React key for each item. Crucial for stable rendering during sorts/filters! */\n  keyExtractor?: (item: T, index: number) => string | number;\n  /** The render function for the row */\n  renderItem: (item: T, index: number) => React.ReactNode;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * VirtualList Component\n * * High-performance scrolling for massive datasets.\n * * Uses GPU-accelerated transforms and strict mathematical windowing to only render visible DOM nodes.\n */\nfunction VirtualListInner<T>(\n  {\n    items,\n    height,\n    itemHeight = 40,\n    overscan = 3,\n    keyExtractor,\n    renderItem,\n    className,\n    onScroll,\n    ...props\n  }: VirtualListProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const [scrollTop, setScrollTop] = useState(0);\n\n  // Internal ref for scroll tracking, merged with forwarded ref\n  const internalRef = useRef<HTMLDivElement>(null);\n  const setRefs = useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  /* ----------------------------------------------------\n     Scroll Handling (React Synthetic Event)\n  ---------------------------------------------------- */\n  const handleScroll = useCallback(\n    (e: UIEvent<HTMLDivElement>) => {\n      // React's Synthetic events are perfectly batched in React 18+\n      setScrollTop(e.currentTarget.scrollTop);\n      // Preserve any consumer-provided onScroll handlers\n      onScroll?.(e);\n    },\n    [onScroll]\n  );\n\n  /* ----------------------------------------------------\n     Virtualization Math\n  ---------------------------------------------------- */\n  const totalItems = items.length;\n  const totalHeight = totalItems * itemHeight;\n\n  // Calculate exactly which indices are currently visible in the viewport\n  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n  const endIndex = Math.min(\n    totalItems - 1,\n    Math.floor((scrollTop + height) / itemHeight) + overscan\n  );\n\n  const visibleItems = items.slice(startIndex, endIndex + 1);\n\n  // Calculate the exact pixel offset to push the visible window down\n  const offsetY = startIndex * itemHeight;\n\n  /* ----------------------------------------------------\n     Render\n  ---------------------------------------------------- */\n  return (\n    <div\n      ref={setRefs}\n      className={cn(\"nui-virtual-list\", className)}\n      style={{ height: `${height}px` }}\n      onScroll={handleScroll}\n      role=\"list\"\n      {...props}\n    >\n      {/* 1. The Spacer: Forces the container to be the exact scrollable height of 10k+ rows */}\n      <div\n        className=\"nui-virtual-spacer\"\n        style={{ height: `${totalHeight}px` }}\n      />\n\n      {/* 2. The Window: Hardware accelerated sliding container */}\n      <div\n        className=\"nui-virtual-window\"\n        style={{ transform: `translateY(${offsetY}px)` }}\n      >\n        {visibleItems.map((item, i) => {\n          const actualIndex = startIndex + i;\n          // Safely fall back to index if no keyExtractor is provided\n          const itemKey = keyExtractor ? keyExtractor(item, actualIndex) : actualIndex;\n\n          return (\n            <div\n              key={itemKey}\n              role=\"listitem\"\n              className=\"nui-virtual-row\"\n              style={{ height: `${itemHeight}px` }}\n            >\n              {renderItem(item, actualIndex)}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n// Type assertion required to allow forwardRef to support generics <T>\nexport const VirtualList = forwardRef(VirtualListInner) as <T>(\n  props: VirtualListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => React.ReactElement;\n\n(VirtualList as React.FC).displayName = 'VirtualList';"],"names":["VirtualListInner","items","height","itemHeight","overscan","keyExtractor","renderItem","className","onScroll","props","ref","scrollTop","setScrollTop","useState","internalRef","useRef","setRefs","useCallback","node","handleScroll","e","totalItems","totalHeight","startIndex","endIndex","visibleItems","offsetY","jsxs","cn","jsx","item","i","actualIndex","itemKey","VirtualList","forwardRef"],"mappings":";;;;AAkCA,SAASA,EACP;AAAA,EACE,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,CAAC,GAGtCC,IAAcC,EAAuB,IAAI,GACzCC,IAAUC;AAAA,IACd,CAACC,MAAgC;AAC/B,MAAAJ,EAAY,UAAUI,GAClB,OAAOR,KAAQ,aACjBA,EAAIQ,CAAI,IACCR,MACTA,EAAI,UAAUQ;AAAA,IAElB;AAAA,IACA,CAACR,CAAG;AAAA,EAAA,GAMAS,IAAeF;AAAA,IACnB,CAACG,MAA+B;AAE9B,MAAAR,EAAaQ,EAAE,cAAc,SAAS,GAEtCZ,IAAWY,CAAC;AAAA,IACd;AAAA,IACA,CAACZ,CAAQ;AAAA,EAAA,GAMLa,IAAapB,EAAM,QACnBqB,IAAcD,IAAalB,GAG3BoB,IAAa,KAAK,IAAI,GAAG,KAAK,MAAMZ,IAAYR,CAAU,IAAIC,CAAQ,GACtEoB,IAAW,KAAK;AAAA,IACpBH,IAAa;AAAA,IACb,KAAK,OAAOV,IAAYT,KAAUC,CAAU,IAAIC;AAAA,EAAA,GAG5CqB,IAAexB,EAAM,MAAMsB,GAAYC,IAAW,CAAC,GAGnDE,IAAUH,IAAapB;AAK7B,SACE,gBAAAwB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKX;AAAA,MACL,WAAWY,EAAG,oBAAoBrB,CAAS;AAAA,MAC3C,OAAO,EAAE,QAAQ,GAAGL,CAAM,KAAA;AAAA,MAC1B,UAAUiB;AAAA,MACV,MAAK;AAAA,MACJ,GAAGV;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,QAAQ,GAAGP,CAAW,KAAA;AAAA,UAAK;AAAA,QAAA;AAAA,QAItC,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,WAAW,cAAcH,CAAO,MAAA;AAAA,YAExC,UAAAD,EAAa,IAAI,CAACK,GAAMC,MAAM;AAC7B,oBAAMC,IAAcT,IAAaQ,GAE3BE,IAAU5B,IAAeA,EAAayB,GAAME,CAAW,IAAIA;AAEjE,qBACE,gBAAAH;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,OAAO,EAAE,QAAQ,GAAG1B,CAAU,KAAA;AAAA,kBAE7B,UAAAG,EAAWwB,GAAME,CAAW;AAAA,gBAAA;AAAA,gBALxBC;AAAA,cAAA;AAAA,YAQX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,MAAMC,IAAcC,EAAWnC,CAAgB;AAIrDkC,EAAyB,cAAc;"}

package/dist/dist/components/accordion/Accordion.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("react");;/* empty css                */function x({items:s,defaultOpenId:i,multiple:d=!1,className:l=""}){const[t,u]=p.useState(i?[i]:[]),c=e=>t.includes(e),a=e=>{u(n=>d?c(e)?n.filter(r=>r!==e):[...n,e]:c(e)?[]:[e])};return o.jsx("div",{className:`ui-accordion ${l}`,children:s.map(e=>{const n=c(e.id);return o.jsxs("div",{className:"ui-accordion-item",children:[o.jsxs("button",{className:"ui-accordion-header","aria-expanded":n,"aria-controls":`panel-${e.id}`,id:`accordion-${e.id}`,onClick:()=>a(e.id),onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),a(e.id))},children:[e.title,o.jsx("span",{children:n?"–":"+"})]}),o.jsx("div",{id:`panel-${e.id}`,role:"region","aria-labelledby":`accordion-${e.id}`,className:`ui-accordion-panel ${n?"ui-accordion-panel--open":""}`,children:n&&o.jsx("div",{style:{padding:"8px 0",color:"var(--color-text)"},children:e.content})})]},e.id)})})}exports.Accordion=x;
+//# sourceMappingURL=Accordion.cjs.map

package/dist/dist/components/accordion/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["/**\r\n * Accordion.tsx\r\n * ---------------\r\n * Fully accessible WAI-ARIA accordion.\r\n * Single-component API.\r\n */\r\n\r\nimport React, { useState } from 'react';\r\n\r\nimport './Accordion.css';\r\n\r\nexport interface AccordionItem {\r\n  id: string;\r\n  title: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface AccordionProps {\r\n  /** List of accordion sections */\r\n  items: AccordionItem[];\r\n\r\n  /** Default opened item ID (optional) */\r\n  defaultOpenId?: string;\r\n\r\n  /** Allow multiple open panels? Default: false */\r\n  multiple?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function Accordion({\r\n  items,\r\n  defaultOpenId,\r\n  multiple = false,\r\n  className = '',\r\n}: AccordionProps) {\r\n  const [openIds, setOpenIds] = useState<string[]>(\r\n    defaultOpenId ? [defaultOpenId] : []\r\n  );\r\n\r\n  const isOpen = (id: string) => openIds.includes(id);\r\n\r\n  const toggle = (id: string) => {\r\n    setOpenIds((prev) => {\r\n      if (multiple) {\r\n        return isOpen(id) ? prev.filter((x) => x !== id) : [...prev, id];\r\n      } else {\r\n        return isOpen(id) ? [] : [id];\r\n      }\r\n    });\r\n  };\r\n\r\n  return (\r\n    <div className={`ui-accordion ${className}`}>\r\n      {items.map((item) => {\r\n        const open = isOpen(item.id);\r\n\r\n        return (\r\n          <div key={item.id} className=\"ui-accordion-item\">\r\n            {/* HEADER BUTTON */}\r\n            <button\r\n              className=\"ui-accordion-header\"\r\n              aria-expanded={open}\r\n              aria-controls={`panel-${item.id}`}\r\n              id={`accordion-${item.id}`}\r\n              onClick={() => toggle(item.id)}\r\n              onKeyDown={(e) => {\r\n                if (e.key === 'Enter' || e.key === ' ') {\r\n                  e.preventDefault();\r\n                  toggle(item.id);\r\n                }\r\n              }}\r\n            >\r\n              {item.title}\r\n              <span>{open ? '–' : '+'}</span>\r\n            </button>\r\n\r\n            {/* PANEL */}\r\n            <div\r\n              id={`panel-${item.id}`}\r\n              role=\"region\"\r\n              aria-labelledby={`accordion-${item.id}`}\r\n              className={`ui-accordion-panel ${\r\n                open ? 'ui-accordion-panel--open' : ''\r\n              }`}\r\n            >\r\n              {open && (\r\n                <div style={{ padding: '8px 0', color: 'var(--color-text)' }}>\r\n                  {item.content}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Accordion","items","defaultOpenId","multiple","className","openIds","setOpenIds","useState","isOpen","id","toggle","prev","x","jsx","item","open","jsxs","e"],"mappings":"uKA8BO,SAASA,EAAU,CACxB,MAAAC,EACA,cAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACd,EAAmB,CACjB,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAC5BL,EAAgB,CAACA,CAAa,EAAI,CAAA,CAAC,EAG/BM,EAAUC,GAAeJ,EAAQ,SAASI,CAAE,EAE5CC,EAAUD,GAAe,CAC7BH,EAAYK,GACNR,EACKK,EAAOC,CAAE,EAAIE,EAAK,OAAQC,GAAMA,IAAMH,CAAE,EAAI,CAAC,GAAGE,EAAMF,CAAE,EAExDD,EAAOC,CAAE,EAAI,CAAA,EAAK,CAACA,CAAE,CAE/B,CACH,EAEA,OACEI,MAAC,OAAI,UAAW,gBAAgBT,CAAS,GACtC,SAAAH,EAAM,IAAKa,GAAS,CACnB,MAAMC,EAAOP,EAAOM,EAAK,EAAE,EAE3B,OACEE,EAAAA,KAAC,MAAA,CAAkB,UAAU,oBAE3B,SAAA,CAAAA,EAAAA,KAAC,SAAA,CACC,UAAU,sBACV,gBAAeD,EACf,gBAAe,SAASD,EAAK,EAAE,GAC/B,GAAI,aAAaA,EAAK,EAAE,GACxB,QAAS,IAAMJ,EAAOI,EAAK,EAAE,EAC7B,UAAYG,GAAM,EACZA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,eAAA,EACFP,EAAOI,EAAK,EAAE,EAElB,EAEC,SAAA,CAAAA,EAAK,MACND,EAAAA,IAAC,OAAA,CAAM,SAAAE,EAAO,IAAM,GAAA,CAAI,CAAA,CAAA,CAAA,EAI1BF,EAAAA,IAAC,MAAA,CACC,GAAI,SAASC,EAAK,EAAE,GACpB,KAAK,SACL,kBAAiB,aAAaA,EAAK,EAAE,GACrC,UAAW,sBACTC,EAAO,2BAA6B,EACtC,GAEC,SAAAA,GACCF,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,QAAS,MAAO,mBAAA,EACpC,SAAAC,EAAK,OAAA,CACR,CAAA,CAAA,CAEJ,CAAA,EAjCQA,EAAK,EAkCf,CAEJ,CAAC,CAAA,CACH,CAEJ"}

package/dist/dist/components/accordion/Accordion.js

@@ -0,0 +1,51 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useState as f } from "react";
+/* empty css              */
+function v({
+  items: l,
+  defaultOpenId: i,
+  multiple: s = !1,
+  className: t = ""
+}) {
+  const [p, u] = f(
+    i ? [i] : []
+  ), c = (n) => p.includes(n), a = (n) => {
+    u((o) => s ? c(n) ? o.filter((r) => r !== n) : [...o, n] : c(n) ? [] : [n]);
+  };
+  return /* @__PURE__ */ e("div", { className: `ui-accordion ${t}`, children: l.map((n) => {
+    const o = c(n.id);
+    return /* @__PURE__ */ d("div", { className: "ui-accordion-item", children: [
+      /* @__PURE__ */ d(
+        "button",
+        {
+          className: "ui-accordion-header",
+          "aria-expanded": o,
+          "aria-controls": `panel-${n.id}`,
+          id: `accordion-${n.id}`,
+          onClick: () => a(n.id),
+          onKeyDown: (r) => {
+            (r.key === "Enter" || r.key === " ") && (r.preventDefault(), a(n.id));
+          },
+          children: [
+            n.title,
+            /* @__PURE__ */ e("span", { children: o ? "–" : "+" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          id: `panel-${n.id}`,
+          role: "region",
+          "aria-labelledby": `accordion-${n.id}`,
+          className: `ui-accordion-panel ${o ? "ui-accordion-panel--open" : ""}`,
+          children: o && /* @__PURE__ */ e("div", { style: { padding: "8px 0", color: "var(--color-text)" }, children: n.content })
+        }
+      )
+    ] }, n.id);
+  }) });
+}
+export {
+  v as Accordion
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/dist/components/accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["/**\r\n * Accordion.tsx\r\n * ---------------\r\n * Fully accessible WAI-ARIA accordion.\r\n * Single-component API.\r\n */\r\n\r\nimport React, { useState } from 'react';\r\n\r\nimport './Accordion.css';\r\n\r\nexport interface AccordionItem {\r\n  id: string;\r\n  title: string;\r\n  content: React.ReactNode;\r\n}\r\n\r\ninterface AccordionProps {\r\n  /** List of accordion sections */\r\n  items: AccordionItem[];\r\n\r\n  /** Default opened item ID (optional) */\r\n  defaultOpenId?: string;\r\n\r\n  /** Allow multiple open panels? Default: false */\r\n  multiple?: boolean;\r\n\r\n  className?: string;\r\n}\r\n\r\nexport function Accordion({\r\n  items,\r\n  defaultOpenId,\r\n  multiple = false,\r\n  className = '',\r\n}: AccordionProps) {\r\n  const [openIds, setOpenIds] = useState<string[]>(\r\n    defaultOpenId ? [defaultOpenId] : []\r\n  );\r\n\r\n  const isOpen = (id: string) => openIds.includes(id);\r\n\r\n  const toggle = (id: string) => {\r\n    setOpenIds((prev) => {\r\n      if (multiple) {\r\n        return isOpen(id) ? prev.filter((x) => x !== id) : [...prev, id];\r\n      } else {\r\n        return isOpen(id) ? [] : [id];\r\n      }\r\n    });\r\n  };\r\n\r\n  return (\r\n    <div className={`ui-accordion ${className}`}>\r\n      {items.map((item) => {\r\n        const open = isOpen(item.id);\r\n\r\n        return (\r\n          <div key={item.id} className=\"ui-accordion-item\">\r\n            {/* HEADER BUTTON */}\r\n            <button\r\n              className=\"ui-accordion-header\"\r\n              aria-expanded={open}\r\n              aria-controls={`panel-${item.id}`}\r\n              id={`accordion-${item.id}`}\r\n              onClick={() => toggle(item.id)}\r\n              onKeyDown={(e) => {\r\n                if (e.key === 'Enter' || e.key === ' ') {\r\n                  e.preventDefault();\r\n                  toggle(item.id);\r\n                }\r\n              }}\r\n            >\r\n              {item.title}\r\n              <span>{open ? '–' : '+'}</span>\r\n            </button>\r\n\r\n            {/* PANEL */}\r\n            <div\r\n              id={`panel-${item.id}`}\r\n              role=\"region\"\r\n              aria-labelledby={`accordion-${item.id}`}\r\n              className={`ui-accordion-panel ${\r\n                open ? 'ui-accordion-panel--open' : ''\r\n              }`}\r\n            >\r\n              {open && (\r\n                <div style={{ padding: '8px 0', color: 'var(--color-text)' }}>\r\n                  {item.content}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Accordion","items","defaultOpenId","multiple","className","openIds","setOpenIds","useState","isOpen","id","toggle","prev","x","jsx","item","open","jsxs","e"],"mappings":";;;AA8BO,SAASA,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AACd,GAAmB;AACjB,QAAM,CAACC,GAASC,CAAU,IAAIC;AAAA,IAC5BL,IAAgB,CAACA,CAAa,IAAI,CAAA;AAAA,EAAC,GAG/BM,IAAS,CAACC,MAAeJ,EAAQ,SAASI,CAAE,GAE5CC,IAAS,CAACD,MAAe;AAC7B,IAAAH,EAAW,CAACK,MACNR,IACKK,EAAOC,CAAE,IAAIE,EAAK,OAAO,CAACC,MAAMA,MAAMH,CAAE,IAAI,CAAC,GAAGE,GAAMF,CAAE,IAExDD,EAAOC,CAAE,IAAI,CAAA,IAAK,CAACA,CAAE,CAE/B;AAAA,EACH;AAEA,SACE,gBAAAI,EAAC,SAAI,WAAW,gBAAgBT,CAAS,IACtC,UAAAH,EAAM,IAAI,CAACa,MAAS;AACnB,UAAMC,IAAOP,EAAOM,EAAK,EAAE;AAE3B,WACE,gBAAAE,EAAC,OAAA,EAAkB,WAAU,qBAE3B,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,iBAAeD;AAAA,UACf,iBAAe,SAASD,EAAK,EAAE;AAAA,UAC/B,IAAI,aAAaA,EAAK,EAAE;AAAA,UACxB,SAAS,MAAMJ,EAAOI,EAAK,EAAE;AAAA,UAC7B,WAAW,CAACG,MAAM;AAChB,aAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFP,EAAOI,EAAK,EAAE;AAAA,UAElB;AAAA,UAEC,UAAA;AAAA,YAAAA,EAAK;AAAA,YACN,gBAAAD,EAAC,QAAA,EAAM,UAAAE,IAAO,MAAM,IAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAI1B,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,SAASC,EAAK,EAAE;AAAA,UACpB,MAAK;AAAA,UACL,mBAAiB,aAAaA,EAAK,EAAE;AAAA,UACrC,WAAW,sBACTC,IAAO,6BAA6B,EACtC;AAAA,UAEC,UAAAA,KACC,gBAAAF,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,SAAS,OAAO,oBAAA,GACpC,UAAAC,EAAK,QAAA,CACR;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ,EAAA,GAjCQA,EAAK,EAkCf;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/dist/components/alert/Alert.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css            */function c({type:r="info",title:l,children:t,closable:s=!1,onClose:a,className:i=""}){const n=r==="error"||r==="warning"?"alert":"status";return e.jsxs("div",{className:`ui-alert ui-alert--${r} ${i}`,role:n,children:[e.jsxs("div",{className:"ui-alert-content",children:[l&&e.jsx("div",{className:"ui-alert-title",children:l}),t]}),s&&e.jsx("button",{type:"button",className:"ui-alert-close","aria-label":"Close alert",onClick:a,children:"×"})]})}exports.Alert=c;
+//# sourceMappingURL=Alert.cjs.map

package/dist/dist/components/alert/Alert.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert.tsx\r\n * ----------\r\n * WCAG-compliant alert component.\r\n *\r\n * - Uses correct roles:\r\n *    type=\"error\"/\"warning\" → role=\"alert\" (urgent)\r\n *    type=\"info\"/\"success\" → role=\"status\" (non-urgent)\r\n *\r\n * - Supports:\r\n *   - title\r\n *   - closable\r\n *   - variants\r\n *   - icons (optional)\r\n */\r\n\r\nimport React from 'react';\r\nimport './Alert.css';\r\n\r\ntype AlertType = 'info' | 'success' | 'warning' | 'error';\r\n\r\ninterface AlertProps {\r\n  type?: AlertType;\r\n  title?: string;\r\n  children?: React.ReactNode;\r\n  closable?: boolean;\r\n  onClose?: () => void;\r\n  className?: string;\r\n}\r\n\r\nexport function Alert({\r\n  type = 'info',\r\n  title,\r\n  children,\r\n  closable = false,\r\n  onClose,\r\n  className = '',\r\n}: AlertProps) {\r\n  // WCAG rule:\r\n  // - errors & warnings = role=\"alert\"\r\n  // - info & success = role=\"status\"\r\n  const role = type === 'error' || type === 'warning' ? 'alert' : 'status';\r\n\r\n  return (\r\n    <div className={`ui-alert ui-alert--${type} ${className}`} role={role}>\r\n      <div className=\"ui-alert-content\">\r\n        {title && <div className=\"ui-alert-title\">{title}</div>}\r\n        {children}\r\n      </div>\r\n\r\n      {closable && (\r\n        <button\r\n          type=\"button\"\r\n          className=\"ui-alert-close\"\r\n          aria-label=\"Close alert\"\r\n          onClick={onClose}\r\n        >\r\n          ×\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Alert","type","title","children","closable","onClose","className","role","jsxs","jsx"],"mappings":"gJA8BO,SAASA,EAAM,CACpB,KAAAC,EAAO,OACP,MAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,UAAAC,EAAY,EACd,EAAe,CAIb,MAAMC,EAAON,IAAS,SAAWA,IAAS,UAAY,QAAU,SAEhE,OACEO,OAAC,OAAI,UAAW,sBAAsBP,CAAI,IAAIK,CAAS,GAAI,KAAAC,EACzD,SAAA,CAAAC,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACZ,SAAA,CAAAN,GAASO,EAAAA,IAAC,MAAA,CAAI,UAAU,iBAAkB,SAAAP,EAAM,EAChDC,CAAA,EACH,EAECC,GACCK,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,iBACV,aAAW,cACX,QAASJ,EACV,SAAA,GAAA,CAAA,CAED,EAEJ,CAEJ"}