@nofinite/nui 1.1.2 → 2.0.2

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -1,46 +1,66 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
 /* empty css                */
-function p({
-  items: a,
-  maxItems: t = 6,
-  // default collapse threshold
-  separator: b = "›",
-  className: m = ""
+import { cn as b } from "../../utils/cn/cn.js";
+function g({
+  items: e,
+  maxItems: o = 5,
+  separator: c = "›",
+  className: _,
+  ...h
 }) {
-  if (!a.length) return null;
-  let i = [...a];
-  if (a.length > t) {
-    const l = a.slice(0, 2), e = a.slice(-2);
-    i = [...l, "...", ...e];
+  if (!e.length) return null;
+  let i = e;
+  if (e.length > o) {
+    const a = e.slice(0, 1), n = e.slice(-2);
+    i = [...a, "ellipsis", ...n];
   }
-  return /* @__PURE__ */ r("nav", { className: `ui-breadcrumbs ${m}`, "aria-label": "Breadcrumb", children: /* @__PURE__ */ r("ol", { className: "ui-breadcrumbs-list", children: i.map((l, e) => {
-    const c = e === i.length - 1;
-    if (l === "...")
-      return /* @__PURE__ */ r("li", { className: "ui-breadcrumb-ellipsis", children: "…" }, `ellipsis-${e}`);
-    const { label: s, href: n, onClick: u } = l;
-    return /* @__PURE__ */ d("li", { className: "ui-breadcrumb-item", children: [
-      n || u ? /* @__PURE__ */ r(
-        "a",
-        {
-          href: n,
-          onClick: u,
-          className: "ui-breadcrumb-link",
-          "aria-current": c ? "page" : void 0,
-          children: s
-        }
-      ) : /* @__PURE__ */ r(
-        "span",
-        {
-          className: `ui-breadcrumb-link ${c ? "active" : ""}`,
-          "aria-current": c ? "page" : void 0,
-          children: s
-        }
-      ),
-      !c && /* @__PURE__ */ r("span", { className: "ui-breadcrumb-separator", children: b })
-    ] }, `crumb-${e}`);
-  }) }) });
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: b("nui-breadcrumbs", _),
+      ...h,
+      children: /* @__PURE__ */ r("ol", { className: "nui-breadcrumbs__list", children: i.map((a, n) => {
+        const s = n === i.length - 1, l = `crumb-${n}`;
+        if (a === "ellipsis")
+          return /* @__PURE__ */ m("li", { className: "nui-breadcrumbs__item", children: [
+            /* @__PURE__ */ r("span", { className: "nui-breadcrumbs__ellipsis", "aria-hidden": "true", children: "…" }),
+            /* @__PURE__ */ r("span", { className: "nui-breadcrumbs__separator", "aria-hidden": "true", children: c })
+          ] }, l);
+        const { label: u, href: t, onClick: d } = a;
+        return /* @__PURE__ */ m("li", { className: "nui-breadcrumbs__item", children: [
+          !!(t || d) && !s ? (
+            // Interactive Link
+            /* @__PURE__ */ r(
+              "a",
+              {
+                href: t,
+                onClick: d,
+                className: "nui-breadcrumbs__link",
+                children: u
+              }
+            )
+          ) : (
+            // Static Text (Current Page or non-linked breadcrumb)
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: b(
+                  "nui-breadcrumbs__link",
+                  s && "nui-breadcrumbs__link--current"
+                ),
+                "aria-current": s ? "page" : void 0,
+                children: u
+              }
+            )
+          ),
+          !s && /* @__PURE__ */ r("span", { className: "nui-breadcrumbs__separator", "aria-hidden": "true", children: c })
+        ] }, l);
+      }) })
+    }
+  );
 }
 export {
-  p as Breadcrumbs
+  g as Breadcrumbs
 };
 //# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["/**\r\n * Breadcrumbs.tsx — FINAL VERSION\r\n * --------------------------------\r\n * 100% matching your UI component architecture.\r\n *\r\n * Features:\r\n * - WAI-ARIA navigation\r\n * - Auto-collapse when too many items (optional)\r\n * - Custom separator support\r\n * - Keyboard accessible\r\n * - Ellipsis is non-interactive\r\n */\r\n\r\nimport React from 'react';\r\nimport './Breadcrumbs.css';\r\n\r\nexport interface Crumb {\r\n  label: React.ReactNode;\r\n  href?: string;\r\n  onClick?: () => void;\r\n}\r\n\r\nexport interface BreadcrumbsProps {\r\n  items: Crumb[];\r\n  maxItems?: number; // collapse long breadcrumbs\r\n  separator?: React.ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport function Breadcrumbs({\r\n  items,\r\n  maxItems = 6, // default collapse threshold\r\n  separator = '›',\r\n  className = '',\r\n}: BreadcrumbsProps) {\r\n  if (!items.length) return null;\r\n\r\n  let finalItems: (Crumb | '...')[] = [...items];\r\n\r\n  /* -------------------------------------------------------\r\n   * Collapse logic\r\n   * ------------------------------------------------------*/\r\n  if (items.length > maxItems) {\r\n    const start = items.slice(0, 2);\r\n    const end = items.slice(-2);\r\n    finalItems = [...start, '...', ...end];\r\n  }\r\n\r\n  return (\r\n    <nav className={`ui-breadcrumbs ${className}`} aria-label=\"Breadcrumb\">\r\n      <ol className=\"ui-breadcrumbs-list\">\r\n        {finalItems.map((item, index) => {\r\n          const isLast = index === finalItems.length - 1;\r\n\r\n          // ellipsis\r\n          if (item === '...') {\r\n            return (\r\n              <li key={`ellipsis-${index}`} className=\"ui-breadcrumb-ellipsis\">\r\n                …\r\n              </li>\r\n            );\r\n          }\r\n\r\n          const { label, href, onClick } = item;\r\n\r\n          return (\r\n            <li key={`crumb-${index}`} className=\"ui-breadcrumb-item\">\r\n              {href || onClick ? (\r\n                <a\r\n                  href={href}\r\n                  onClick={onClick}\r\n                  className=\"ui-breadcrumb-link\"\r\n                  aria-current={isLast ? 'page' : undefined}\r\n                >\r\n                  {label}\r\n                </a>\r\n              ) : (\r\n                <span\r\n                  className={`ui-breadcrumb-link ${isLast ? 'active' : ''}`}\r\n                  aria-current={isLast ? 'page' : undefined}\r\n                >\r\n                  {label}\r\n                </span>\r\n              )}\r\n\r\n              {!isLast && (\r\n                <span className=\"ui-breadcrumb-separator\">{separator}</span>\r\n              )}\r\n            </li>\r\n          );\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  );\r\n}\r\n"],"names":["Breadcrumbs","items","maxItems","separator","className","finalItems","start","end","jsx","item","index","isLast","label","href","onClick","jsxs"],"mappings":";;AA6BO,SAASA,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AACd,GAAqB;AACnB,MAAI,CAACH,EAAM,OAAQ,QAAO;AAE1B,MAAII,IAAgC,CAAC,GAAGJ,CAAK;AAK7C,MAAIA,EAAM,SAASC,GAAU;AAC3B,UAAMI,IAAQL,EAAM,MAAM,GAAG,CAAC,GACxBM,IAAMN,EAAM,MAAM,EAAE;AAC1B,IAAAI,IAAa,CAAC,GAAGC,GAAO,OAAO,GAAGC,CAAG;AAAA,EACvC;AAEA,2BACG,OAAA,EAAI,WAAW,kBAAkBH,CAAS,IAAI,cAAW,cACxD,UAAA,gBAAAI,EAAC,MAAA,EAAG,WAAU,uBACX,UAAAH,EAAW,IAAI,CAACI,GAAMC,MAAU;AAC/B,UAAMC,IAASD,MAAUL,EAAW,SAAS;AAG7C,QAAII,MAAS;AACX,+BACG,MAAA,EAA6B,WAAU,0BAAyB,UAAA,OAAxD,YAAYC,CAAK,EAE1B;AAIJ,UAAM,EAAE,OAAAE,GAAO,MAAAC,GAAM,SAAAC,EAAA,IAAYL;AAEjC,WACE,gBAAAM,EAAC,MAAA,EAA0B,WAAU,sBAClC,UAAA;AAAA,MAAAF,KAAQC,IACP,gBAAAN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAAK;AAAA,UACA,SAAAC;AAAA,UACA,WAAU;AAAA,UACV,gBAAcH,IAAS,SAAS;AAAA,UAE/B,UAAAC;AAAA,QAAA;AAAA,MAAA,IAGH,gBAAAJ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,sBAAsBG,IAAS,WAAW,EAAE;AAAA,UACvD,gBAAcA,IAAS,SAAS;AAAA,UAE/B,UAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAIJ,CAACD,KACA,gBAAAH,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAL,EAAA,CAAU;AAAA,IAAA,EAAA,GApBhD,SAASO,CAAK,EAsBvB;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Breadcrumbs.css';\n\nexport interface BreadcrumbItem {\n  label: React.ReactNode;\n  /** If provided, renders the item as an <a> tag */\n  href?: string;\n  /** Triggered when the breadcrumb is clicked */\n  onClick?: (e: React.MouseEvent) => void;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  /** The maximum number of items to display before truncating the middle path. Default: 5 */\n  maxItems?: number;\n  /** The visual separator between items. Default: '›' */\n  separator?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Breadcrumbs Component\n * * A navigation aid that helps users understand their current location within a website.\n * Implements strict WAI-ARIA navigation patterns.\n */\nexport function Breadcrumbs({\n  items,\n  maxItems = 5,\n  separator = '›',\n  className,\n  ...props\n}: BreadcrumbsProps) {\n  if (!items.length) return null;\n\n  // * Truncation Engine\n  // If the path length exceeds maxItems, we truncate the middle.\n  // We strictly preserve the root (index 0) and the immediate parent + current page (last 2).\n  let renderItems: (BreadcrumbItem | 'ellipsis')[] = items;\n\n  if (items.length > maxItems) {\n    const start = items.slice(0, 1); \n    const end = items.slice(-2);     \n    renderItems = [...start, 'ellipsis', ...end];\n  }\n\n  return (\n    <nav \n      aria-label=\"Breadcrumb\"\n      className={cn(\"nui-breadcrumbs\", className)} \n      {...props}\n    >\n      <ol className=\"nui-breadcrumbs__list\">\n        {renderItems.map((item, index) => {\n          const isLast = index === renderItems.length - 1;\n          const key = `crumb-${index}`;\n\n          // --- 1. Render Ellipsis ---\n          if (item === 'ellipsis') {\n            return (\n              <li key={key} className=\"nui-breadcrumbs__item\">\n                <span className=\"nui-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n                  …\n                </span>\n                <span className=\"nui-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {separator}\n                </span>\n              </li>\n            );\n          }\n\n          // --- 2. Render Item ---\n          const { label, href, onClick } = item;\n          // An item is only interactive if it has a destination/action AND is not the current page\n          const isInteractive = Boolean(href || onClick) && !isLast;\n          \n          return (\n            <li key={key} className=\"nui-breadcrumbs__item\">\n              {isInteractive ? (\n                // Interactive Link\n                <a\n                  href={href}\n                  onClick={onClick}\n                  className=\"nui-breadcrumbs__link\"\n                >\n                  {label}\n                </a>\n              ) : (\n                // Static Text (Current Page or non-linked breadcrumb)\n                <span \n                  className={cn(\n                    \"nui-breadcrumbs__link\", \n                    isLast && \"nui-breadcrumbs__link--current\"\n                  )}\n                  aria-current={isLast ? 'page' : undefined}\n                >\n                  {label}\n                </span>\n              )}\n\n              {/* Separator (except for last item) */}\n              {!isLast && (\n                <span className=\"nui-breadcrumbs__separator\" aria-hidden=\"true\">\n                  {separator}\n                </span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}"],"names":["Breadcrumbs","items","maxItems","separator","className","props","renderItems","start","end","jsx","cn","item","index","isLast","key","jsxs","label","href","onClick"],"mappings":";;;AA0BO,SAASA,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,MAAI,CAACJ,EAAM,OAAQ,QAAO;AAK1B,MAAIK,IAA+CL;AAEnD,MAAIA,EAAM,SAASC,GAAU;AAC3B,UAAMK,IAAQN,EAAM,MAAM,GAAG,CAAC,GACxBO,IAAMP,EAAM,MAAM,EAAE;AAC1B,IAAAK,IAAc,CAAC,GAAGC,GAAO,YAAY,GAAGC,CAAG;AAAA,EAC7C;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAWC,EAAG,mBAAmBN,CAAS;AAAA,MACzC,GAAGC;AAAA,MAEJ,UAAA,gBAAAI,EAAC,QAAG,WAAU,yBACX,YAAY,IAAI,CAACE,GAAMC,MAAU;AAChC,cAAMC,IAASD,MAAUN,EAAY,SAAS,GACxCQ,IAAM,SAASF,CAAK;AAG1B,YAAID,MAAS;AACX,iBACE,gBAAAI,EAAC,MAAA,EAAa,WAAU,yBACtB,UAAA;AAAA,YAAA,gBAAAN,EAAC,QAAA,EAAK,WAAU,6BAA4B,eAAY,QAAO,UAAA,KAE/D;AAAA,8BACC,QAAA,EAAK,WAAU,8BAA6B,eAAY,QACtD,UAAAN,EAAA,CACH;AAAA,UAAA,EAAA,GANOW,CAOT;AAKJ,cAAM,EAAE,OAAAE,GAAO,MAAAC,GAAM,SAAAC,EAAA,IAAYP;AAIjC,eACE,gBAAAI,EAAC,MAAA,EAAa,WAAU,yBACrB,UAAA;AAAA,UAJiB,GAAQE,KAAQC,MAAY,CAACL;AAAA;AAAA,YAM7C,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAAQ;AAAA,gBACA,SAAAC;AAAA,gBACA,WAAU;AAAA,gBAET,UAAAF;AAAA,cAAA;AAAA,YAAA;AAAA;AAAA;AAAA,YAIH,gBAAAP;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACAG,KAAU;AAAA,gBAAA;AAAA,gBAEZ,gBAAcA,IAAS,SAAS;AAAA,gBAE/B,UAAAG;AAAA,cAAA;AAAA,YAAA;AAAA;AAAA,UAKJ,CAACH,KACA,gBAAAJ,EAAC,QAAA,EAAK,WAAU,8BAA6B,eAAY,QACtD,UAAAN,EAAA,CACH;AAAA,QAAA,EAAA,GA3BKW,CA6BT;AAAA,MAEJ,CAAC,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/button/Button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");;/* empty css             */function o({variant:e="default",size:t="md",className:n="",...u}){const r=["ui-btn",e==="primary"&&"ui-btn--primary",t==="sm"&&"ui-btn--sm",t==="lg"&&"ui-btn--lg",n].filter(Boolean).join(" ");return i.jsx("button",{className:r,...u})}exports.Button=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react");;/* empty css             */const l=require("../../utils/slot/slot.cjs"),f=require("../../utils/cn/cn.cjs"),a=j.forwardRef(({className:o,variant:i="default",size:u="md",isLoading:t=!1,iconLeft:s,iconRight:n,asChild:r=!1,children:c,disabled:m,...b},d)=>{const x=m||t,p=r?l.Slot:"button";return e.jsxs(p,{ref:d,disabled:x,className:f.cn("nui-btn",`nui-btn--${i}`,`nui-btn--${u}`,o),...b,children:[t&&e.jsxs("svg",{className:"nui-btn__spinner",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),!t&&s&&e.jsx("span",{className:"nui-btn__icon -left",children:s}),e.jsx(l.Slottable,{children:r?c:e.jsx("span",{className:"nui-btn__content",children:c})}),!t&&n&&e.jsx("span",{className:"nui-btn__icon -right",children:n})]})});a.displayName="Button";exports.Button=a;
 //# sourceMappingURL=Button.cjs.map

package/dist/components/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["/**\r\n * Button Component\r\n * ----------------\r\n * - Fully accessible\r\n * - Supports variants and sizes\r\n * - Theme-driven styling (light/dark/custom)\r\n * - No external dependencies\r\n * - Compatible with tree-shaking\r\n */\r\n\r\nimport React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /**\r\n   * Visual appearance of the button.\r\n   * \"default\" = subtle background\r\n   * \"primary\" = strong emphasis (blue)\r\n   */\r\n  variant?: 'default' | 'primary';\r\n\r\n  /**\r\n   * Adjusts padding & font-size.\r\n   */\r\n  size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nexport function Button({\r\n  variant = 'default',\r\n  size = 'md',\r\n  className = '',\r\n  ...props\r\n}: ButtonProps) {\r\n  const classes = [\r\n    'ui-btn',\r\n    variant === 'primary' && 'ui-btn--primary',\r\n    size === 'sm' && 'ui-btn--sm',\r\n    size === 'lg' && 'ui-btn--lg',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return <button className={classes} {...props} />;\r\n}\r\n"],"names":["Button","variant","size","className","props","classes","jsx"],"mappings":"iJA4BO,SAASA,EAAO,CACrB,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,GAAGC,CACL,EAAgB,CACd,MAAMC,EAAU,CACd,SACAJ,IAAY,WAAa,kBACzBC,IAAS,MAAQ,aACjBA,IAAS,MAAQ,aACjBC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,OAAOG,EAAAA,IAAC,SAAA,CAAO,UAAWD,EAAU,GAAGD,EAAO,CAChD"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport React from 'react';\nimport { cn, Slot, Slottable } from '../../utils';\nimport './Button.css';\n\nexport type ButtonVariant = 'default' | 'primary' | 'outline' | 'ghost' | 'danger' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The visual style of the button. */\n  variant?: ButtonVariant;\n  /** The dimensional size of the button (controls padding and height). */\n  size?: ButtonSize;\n  /** Automatically disables the button and replaces the left icon with a loading spinner. */\n  isLoading?: boolean;\n  /** An element (usually an SVG or Icon component) placed before the text. */\n  iconLeft?: React.ReactNode;\n  /** An element (usually an SVG or Icon component) placed after the text. */\n  iconRight?: React.ReactNode;\n  /** * Polymorphic Prop: When true, the button will render as its immediate child element \n   * (e.g., a Next.js `<Link>` or an `<a>` tag) instead of a native `<button>`, \n   * while inheriting all button styles.\n   */\n  asChild?: boolean;\n}\n\n/**\n * Button Component\n * ----------------\n * The primary interactive element for user actions.\n * * Architecture Note: \n * - Automatically handles its disabled state when `isLoading` is true to prevent double-submissions.\n * - Supports polymorphism via the `asChild` prop for seamless router integration.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ \n    className, \n    variant = 'default', \n    size = 'md', \n    isLoading = false, \n    iconLeft,\n    iconRight,\n    asChild = false,\n    children, \n    disabled,\n    ...props \n  }, ref) => {\n    \n    // State Management: Loading strictly implies the button cannot be interacted with.\n    const isDisabled = disabled || isLoading;\n\n    // Polymorphic Node: Use our custom zero-dependency Slot if asChild is true.\n    const Comp = asChild ? Slot : \"button\";\n\n    return (\n      <Comp\n        ref={ref}\n        disabled={isDisabled}\n        className={cn(\n          \"nui-btn\",\n          `nui-btn--${variant}`,\n          `nui-btn--${size}`,\n          className\n        )}\n        {...props}\n      >\n        {/* Loading Spinner */}\n        {isLoading && (\n          <svg \n            className=\"nui-btn__spinner\" \n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\" // Hides the SVG from screen readers; 'disabled' attribute handles the state announcement\n          >\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n          </svg>\n        )}\n\n        {/* Icon Left: Hidden when loading to prevent UI layout shifts */}\n        {!isLoading && iconLeft && <span className=\"nui-btn__icon -left\">{iconLeft}</span>}\n        \n        {/* Slottable: Directs the Slot component to inject the provided children right here, \n            preserving the spinners and icons on the outside. */}\n        <Slottable>\n          {asChild ? children : <span className=\"nui-btn__content\">{children}</span>}\n        </Slottable>\n        \n        {/* Icon Right */}\n        {!isLoading && iconRight && <span className=\"nui-btn__icon -right\">{iconRight}</span>}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = \"Button\";"],"names":["Button","React","className","variant","size","isLoading","iconLeft","iconRight","asChild","children","disabled","props","ref","isDisabled","Comp","Slot","jsxs","cn","jsx","Slottable"],"mappings":"oPAmCaA,EAASC,EAAM,WAC1B,CAAC,CACC,UAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,SAAAC,EACA,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EACFC,IAAQ,CAGT,MAAMC,EAAaH,GAAYL,EAGzBS,EAAON,EAAUO,EAAAA,KAAO,SAE9B,OACEC,EAAAA,KAACF,EAAA,CACC,IAAAF,EACA,SAAUC,EACV,UAAWI,EAAAA,GACT,UACA,YAAYd,CAAO,GACnB,YAAYC,CAAI,GAChBF,CAAA,EAED,GAAGS,EAGH,SAAA,CAAAN,GACCW,EAAAA,KAAC,MAAA,CACC,UAAU,mBACV,QAAQ,YAAY,KAAK,OAAO,MAAM,6BACtC,cAAY,OAEZ,SAAA,CAAAE,EAAAA,IAAC,SAAA,CAAO,UAAU,aAAa,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,OAAO,eAAe,YAAY,IAAI,QAC3F,OAAA,CAAK,UAAU,aAAa,KAAK,eAAe,EAAE,iHAAA,CAAkH,CAAA,CAAA,CAAA,EAKxK,CAACb,GAAaC,SAAa,OAAA,CAAK,UAAU,sBAAuB,SAAAA,EAAS,EAI3EY,EAAAA,IAACC,EAAAA,WACE,SAAAX,EAAUC,QAAY,OAAA,CAAK,UAAU,mBAAoB,SAAAA,CAAA,CAAS,CAAA,CACrE,EAGC,CAACJ,GAAaE,SAAc,OAAA,CAAK,UAAU,uBAAwB,SAAAA,CAAA,CAAU,CAAA,CAAA,CAAA,CAGpF,CACF,EAEAP,EAAO,YAAc"}

package/dist/components/button/Button.js

@@ -1,21 +1,56 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import b from "react";
 /* empty css           */
-function a({
-  variant: n = "default",
-  size: t = "md",
-  className: o = "",
-  ...r
-}) {
-  const i = [
-    "ui-btn",
-    n === "primary" && "ui-btn--primary",
-    t === "sm" && "ui-btn--sm",
-    t === "lg" && "ui-btn--lg",
-    o
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ m("button", { className: i, ...r });
-}
+import { Slot as d, Slottable as f } from "../../utils/slot/slot.js";
+import { cn as h } from "../../utils/cn/cn.js";
+const N = b.forwardRef(
+  ({
+    className: o,
+    variant: c = "default",
+    size: i = "md",
+    isLoading: n = !1,
+    iconLeft: e,
+    iconRight: r,
+    asChild: s = !1,
+    children: a,
+    disabled: m,
+    ...p
+  }, u) => /* @__PURE__ */ l(
+    s ? d : "button",
+    {
+      ref: u,
+      disabled: m || n,
+      className: h(
+        "nui-btn",
+        `nui-btn--${c}`,
+        `nui-btn--${i}`,
+        o
+      ),
+      ...p,
+      children: [
+        n && /* @__PURE__ */ l(
+          "svg",
+          {
+            className: "nui-btn__spinner",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ t("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ t("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+            ]
+          }
+        ),
+        !n && e && /* @__PURE__ */ t("span", { className: "nui-btn__icon -left", children: e }),
+        /* @__PURE__ */ t(f, { children: s ? a : /* @__PURE__ */ t("span", { className: "nui-btn__content", children: a }) }),
+        !n && r && /* @__PURE__ */ t("span", { className: "nui-btn__icon -right", children: r })
+      ]
+    }
+  )
+);
+N.displayName = "Button";
 export {
-  a as Button
+  N as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["/**\r\n * Button Component\r\n * ----------------\r\n * - Fully accessible\r\n * - Supports variants and sizes\r\n * - Theme-driven styling (light/dark/custom)\r\n * - No external dependencies\r\n * - Compatible with tree-shaking\r\n */\r\n\r\nimport React from 'react';\r\nimport './Button.css';\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /**\r\n   * Visual appearance of the button.\r\n   * \"default\" = subtle background\r\n   * \"primary\" = strong emphasis (blue)\r\n   */\r\n  variant?: 'default' | 'primary';\r\n\r\n  /**\r\n   * Adjusts padding & font-size.\r\n   */\r\n  size?: 'sm' | 'md' | 'lg';\r\n}\r\n\r\nexport function Button({\r\n  variant = 'default',\r\n  size = 'md',\r\n  className = '',\r\n  ...props\r\n}: ButtonProps) {\r\n  const classes = [\r\n    'ui-btn',\r\n    variant === 'primary' && 'ui-btn--primary',\r\n    size === 'sm' && 'ui-btn--sm',\r\n    size === 'lg' && 'ui-btn--lg',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return <button className={classes} {...props} />;\r\n}\r\n"],"names":["Button","variant","size","className","props","classes","jsx"],"mappings":";;AA4BO,SAASA,EAAO;AAAA,EACrB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAgB;AACd,QAAMC,IAAU;AAAA,IACd;AAAA,IACAJ,MAAY,aAAa;AAAA,IACzBC,MAAS,QAAQ;AAAA,IACjBA,MAAS,QAAQ;AAAA,IACjBC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SAAO,gBAAAG,EAAC,UAAA,EAAO,WAAWD,GAAU,GAAGD,GAAO;AAChD;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport React from 'react';\nimport { cn, Slot, Slottable } from '../../utils';\nimport './Button.css';\n\nexport type ButtonVariant = 'default' | 'primary' | 'outline' | 'ghost' | 'danger' | 'link';\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The visual style of the button. */\n  variant?: ButtonVariant;\n  /** The dimensional size of the button (controls padding and height). */\n  size?: ButtonSize;\n  /** Automatically disables the button and replaces the left icon with a loading spinner. */\n  isLoading?: boolean;\n  /** An element (usually an SVG or Icon component) placed before the text. */\n  iconLeft?: React.ReactNode;\n  /** An element (usually an SVG or Icon component) placed after the text. */\n  iconRight?: React.ReactNode;\n  /** * Polymorphic Prop: When true, the button will render as its immediate child element \n   * (e.g., a Next.js `<Link>` or an `<a>` tag) instead of a native `<button>`, \n   * while inheriting all button styles.\n   */\n  asChild?: boolean;\n}\n\n/**\n * Button Component\n * ----------------\n * The primary interactive element for user actions.\n * * Architecture Note: \n * - Automatically handles its disabled state when `isLoading` is true to prevent double-submissions.\n * - Supports polymorphism via the `asChild` prop for seamless router integration.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ \n    className, \n    variant = 'default', \n    size = 'md', \n    isLoading = false, \n    iconLeft,\n    iconRight,\n    asChild = false,\n    children, \n    disabled,\n    ...props \n  }, ref) => {\n    \n    // State Management: Loading strictly implies the button cannot be interacted with.\n    const isDisabled = disabled || isLoading;\n\n    // Polymorphic Node: Use our custom zero-dependency Slot if asChild is true.\n    const Comp = asChild ? Slot : \"button\";\n\n    return (\n      <Comp\n        ref={ref}\n        disabled={isDisabled}\n        className={cn(\n          \"nui-btn\",\n          `nui-btn--${variant}`,\n          `nui-btn--${size}`,\n          className\n        )}\n        {...props}\n      >\n        {/* Loading Spinner */}\n        {isLoading && (\n          <svg \n            className=\"nui-btn__spinner\" \n            viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\" // Hides the SVG from screen readers; 'disabled' attribute handles the state announcement\n          >\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n          </svg>\n        )}\n\n        {/* Icon Left: Hidden when loading to prevent UI layout shifts */}\n        {!isLoading && iconLeft && <span className=\"nui-btn__icon -left\">{iconLeft}</span>}\n        \n        {/* Slottable: Directs the Slot component to inject the provided children right here, \n            preserving the spinners and icons on the outside. */}\n        <Slottable>\n          {asChild ? children : <span className=\"nui-btn__content\">{children}</span>}\n        </Slottable>\n        \n        {/* Icon Right */}\n        {!isLoading && iconRight && <span className=\"nui-btn__icon -right\">{iconRight}</span>}\n      </Comp>\n    );\n  }\n);\n\nButton.displayName = \"Button\";"],"names":["Button","React","className","variant","size","isLoading","iconLeft","iconRight","asChild","children","disabled","props","ref","jsxs","Slot","cn","jsx","Slottable"],"mappings":";;;;;AAmCO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CAAC;AAAA,IACC,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GACFC,MASC,gBAAAC;AAAA,IAHWL,IAAUM,IAAO;AAAA,IAG3B;AAAA,MACC,KAAAF;AAAA,MACA,UAReF,KAAYL;AAAA,MAS3B,WAAWU;AAAA,QACT;AAAA,QACA,YAAYZ,CAAO;AAAA,QACnB,YAAYC,CAAI;AAAA,QAChBF;AAAA,MAAA;AAAA,MAED,GAAGS;AAAA,MAGH,UAAA;AAAA,QAAAN,KACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YAAY,MAAK;AAAA,YAAO,OAAM;AAAA,YACtC,eAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAAG,EAAC,UAAA,EAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,gCAC3F,QAAA,EAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,kHAAA,CAAkH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKxK,CAACX,KAAaC,uBAAa,QAAA,EAAK,WAAU,uBAAuB,UAAAA,GAAS;AAAA,QAI3E,gBAAAU,EAACC,KACE,UAAAT,IAAUC,sBAAY,QAAA,EAAK,WAAU,oBAAoB,UAAAA,EAAA,CAAS,EAAA,CACrE;AAAA,QAGC,CAACJ,KAAaE,uBAAc,QAAA,EAAK,WAAU,wBAAwB,UAAAA,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAItF;AAEAP,EAAO,cAAc;"}

package/dist/components/card/Card.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");;/* empty css           */function a({children:r,className:d="",clickable:e=!1,hover:o=!1,onClick:n}){return i.jsx("div",{className:["ui-card",e?"ui-card--clickable":"",o?"ui-card--hover":"",d].join(" "),role:e?"button":void 0,tabIndex:e?0:void 0,onClick:e?n:void 0,onKeyDown:t=>{e&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),n?.())},children:r})}function u({children:r}){return i.jsx("div",{className:"ui-card-header",children:r})}function s({children:r}){return i.jsx("div",{className:"ui-card-body",children:r})}function c({children:r}){return i.jsx("div",{className:"ui-card-footer",children:r})}function v(){return i.jsx("div",{className:"ui-card-divider"})}const f=Object.assign(a,{Header:u,Body:s,Footer:c,Divider:v});exports.Card=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react");;/* empty css           */const i=require("../../utils/cn/cn.cjs"),c=o.forwardRef(({className:e,clickable:r=!1,hover:a=!1,onClick:n,onKeyDown:t,children:y,...l},N)=>s.jsx("div",{ref:N,className:i.cn("nui-card",r&&"nui-card--clickable",a&&"nui-card--hover",e),role:r?"button":void 0,tabIndex:r?0:void 0,onClick:r?n:void 0,onKeyDown:d=>{t&&t(d),r&&(d.key==="Enter"||d.key===" ")&&(d.preventDefault(),n?.(d))},...l,children:y}));c.displayName="Card";const u=o.forwardRef(({className:e,...r},a)=>s.jsx("div",{ref:a,className:i.cn("nui-card__header",e),...r}));u.displayName="Card.Header";const f=o.forwardRef(({className:e,...r},a)=>s.jsx("div",{ref:a,className:i.cn("nui-card__body",e),...r}));f.displayName="Card.Body";const v=o.forwardRef(({className:e,...r},a)=>s.jsx("div",{ref:a,className:i.cn("nui-card__footer",e),...r}));v.displayName="Card.Footer";const m=o.forwardRef(({className:e,...r},a)=>s.jsx("hr",{ref:a,className:i.cn("nui-card__divider",e),...r}));m.displayName="Card.Divider";const j=Object.assign(c,{Header:u,Body:f,Footer:v,Divider:m});exports.Card=j;
 //# sourceMappingURL=Card.cjs.map

package/dist/components/card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["/**\r\n * Card.tsx\r\n * ----------\r\n * Theme-aware, flexible Card component.\r\n * Supports header/body/footer & clickable states.\r\n */\r\n\r\nimport React from 'react';\r\nimport './Card.css';\r\n\r\ninterface CardProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  clickable?: boolean;\r\n  hover?: boolean;\r\n  onClick?: () => void;\r\n}\r\n\r\nfunction CardRoot({\r\n  children,\r\n  className = '',\r\n  clickable = false,\r\n  hover = false,\r\n  onClick,\r\n}: CardProps) {\r\n  return (\r\n    <div\r\n      className={[\r\n        'ui-card',\r\n        clickable ? 'ui-card--clickable' : '',\r\n        hover ? 'ui-card--hover' : '',\r\n        className,\r\n      ].join(' ')}\r\n      role={clickable ? 'button' : undefined}\r\n      tabIndex={clickable ? 0 : undefined}\r\n      onClick={clickable ? onClick : undefined}\r\n      onKeyDown={(e) => {\r\n        if (!clickable) return;\r\n        if (e.key === 'Enter' || e.key === ' ') {\r\n          e.preventDefault();\r\n          onClick?.();\r\n        }\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction Header({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"ui-card-header\">{children}</div>;\r\n}\r\n\r\nfunction Body({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"ui-card-body\">{children}</div>;\r\n}\r\n\r\nfunction Footer({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"ui-card-footer\">{children}</div>;\r\n}\r\n\r\nfunction Divider() {\r\n  return <div className=\"ui-card-divider\" />;\r\n}\r\n\r\nexport const Card = Object.assign(CardRoot, {\r\n  Header,\r\n  Body,\r\n  Footer,\r\n  Divider,\r\n});\r\n"],"names":["CardRoot","children","className","clickable","hover","onClick","jsx","e","Header","Body","Footer","Divider","Card"],"mappings":"+IAkBA,SAASA,EAAS,CAChB,SAAAC,EACA,UAAAC,EAAY,GACZ,UAAAC,EAAY,GACZ,MAAAC,EAAQ,GACR,QAAAC,CACF,EAAc,CACZ,OACEC,EAAAA,IAAC,MAAA,CACC,UAAW,CACT,UACAH,EAAY,qBAAuB,GACnCC,EAAQ,iBAAmB,GAC3BF,CAAA,EACA,KAAK,GAAG,EACV,KAAMC,EAAY,SAAW,OAC7B,SAAUA,EAAY,EAAI,OAC1B,QAASA,EAAYE,EAAU,OAC/B,UAAYE,GAAM,CACXJ,IACDI,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,eAAA,EACFF,IAAA,EAEJ,EAEC,SAAAJ,CAAA,CAAA,CAGP,CAEA,SAASO,EAAO,CAAE,SAAAP,GAA2C,CAC3D,OAAOK,EAAAA,IAAC,MAAA,CAAI,UAAU,iBAAkB,SAAAL,CAAA,CAAS,CACnD,CAEA,SAASQ,EAAK,CAAE,SAAAR,GAA2C,CACzD,OAAOK,EAAAA,IAAC,MAAA,CAAI,UAAU,eAAgB,SAAAL,CAAA,CAAS,CACjD,CAEA,SAASS,EAAO,CAAE,SAAAT,GAA2C,CAC3D,OAAOK,EAAAA,IAAC,MAAA,CAAI,UAAU,iBAAkB,SAAAL,CAAA,CAAS,CACnD,CAEA,SAASU,GAAU,CACjB,OAAOL,EAAAA,IAAC,MAAA,CAAI,UAAU,iBAAA,CAAkB,CAC1C,CAEO,MAAMM,EAAO,OAAO,OAAOZ,EAAU,CAC1C,OAAAQ,EACA,KAAAC,EACA,OAAAC,EACA,QAAAC,CACF,CAAC"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Card.css';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** If true, makes the card interactive via mouse and keyboard (Enter/Space) */\n  clickable?: boolean;\n  /** If true, adds a shadow elevation effect on hover */\n  hover?: boolean;\n}\n\n/**\n * CardRoot\n * * The main container for the Card component.\n * Architecture Note: We manage the 'clickable' state here to ensure the container\n * receives the correct ARIA roles and keyboard event listeners, transforming a standard\n * <div> into an accessible interactive element when needed.\n */\nconst CardRoot = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, clickable = false, hover = false, onClick, onKeyDown, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'nui-card',\n          clickable && 'nui-card--clickable',\n          hover && 'nui-card--hover',\n          className\n        )}\n        // Assign button role if clickable for screen readers\n        role={clickable ? 'button' : undefined}\n        // Make focusable if clickable\n        tabIndex={clickable ? 0 : undefined}\n        onClick={clickable ? onClick : undefined}\n        onKeyDown={(e) => {\n          // Preserve any user-provided onKeyDown logic\n          if (onKeyDown) onKeyDown(e);\n          \n          if (!clickable) return;\n          \n          // Trigger click on Enter or Space for keyboard users\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            // * Type Casting Note: React types expect a MouseEvent for onClick.\n            // Since we are synthesizing a click from a KeyboardEvent, we must cast it\n            // through 'unknown' to satisfy TypeScript's strict event typing.\n            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nCardRoot.displayName = 'Card';\n\nconst Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"nui-card__header\", className)} {...props} />\n  )\n);\nHeader.displayName = 'Card.Header';\n\nconst Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"nui-card__body\", className)} {...props} />\n  )\n);\nBody.displayName = 'Card.Body';\n\nconst Footer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"nui-card__footer\", className)} {...props} />\n  )\n);\nFooter.displayName = 'Card.Footer';\n\nconst Divider = React.forwardRef<HTMLHRElement, React.HTMLAttributes<HTMLHRElement>>(\n  ({ className, ...props }, ref) => (\n    <hr ref={ref} className={cn(\"nui-card__divider\", className)} {...props} />\n  )\n);\nDivider.displayName = 'Card.Divider';\n\n/**\n * Compound Component Architecture\n * Exposes sub-components via dot notation (e.g., <Card.Header>) for a cleaner API.\n */\nexport const Card = Object.assign(CardRoot, {\n  Header,\n  Body,\n  Footer,\n  Divider,\n});"],"names":["CardRoot","React","className","clickable","hover","onClick","onKeyDown","children","props","ref","jsx","cn","e","Header","Body","Footer","Divider","Card"],"mappings":"2MAkBMA,EAAWC,EAAM,WACrB,CAAC,CAAE,UAAAC,EAAW,UAAAC,EAAY,GAAO,MAAAC,EAAQ,GAAO,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAEtFC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GACT,WACAR,GAAa,sBACbC,GAAS,kBACTF,CAAA,EAGF,KAAMC,EAAY,SAAW,OAE7B,SAAUA,EAAY,EAAI,OAC1B,QAASA,EAAYE,EAAU,OAC/B,UAAYO,GAAM,CAEZN,KAAqBM,CAAC,EAErBT,IAGDS,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,eAAA,EAIFP,IAAUO,CAAgD,EAE9D,EACC,GAAGJ,EAEH,SAAAD,CAAA,CAAA,CAIT,EACAP,EAAS,YAAc,OAEvB,MAAMa,EAASZ,EAAM,WACnB,CAAC,CAAE,UAAAC,EAAW,GAAGM,CAAA,EAASC,IACxBC,EAAAA,IAAC,MAAA,CAAI,IAAAD,EAAU,UAAWE,EAAAA,GAAG,mBAAoBT,CAAS,EAAI,GAAGM,CAAA,CAAO,CAE5E,EACAK,EAAO,YAAc,cAErB,MAAMC,EAAOb,EAAM,WACjB,CAAC,CAAE,UAAAC,EAAW,GAAGM,CAAA,EAASC,IACxBC,EAAAA,IAAC,MAAA,CAAI,IAAAD,EAAU,UAAWE,EAAAA,GAAG,iBAAkBT,CAAS,EAAI,GAAGM,CAAA,CAAO,CAE1E,EACAM,EAAK,YAAc,YAEnB,MAAMC,EAASd,EAAM,WACnB,CAAC,CAAE,UAAAC,EAAW,GAAGM,CAAA,EAASC,IACxBC,EAAAA,IAAC,MAAA,CAAI,IAAAD,EAAU,UAAWE,EAAAA,GAAG,mBAAoBT,CAAS,EAAI,GAAGM,CAAA,CAAO,CAE5E,EACAO,EAAO,YAAc,cAErB,MAAMC,EAAUf,EAAM,WACpB,CAAC,CAAE,UAAAC,EAAW,GAAGM,CAAA,EAASC,IACxBC,EAAAA,IAAC,KAAA,CAAG,IAAAD,EAAU,UAAWE,EAAAA,GAAG,oBAAqBT,CAAS,EAAI,GAAGM,CAAA,CAAO,CAE5E,EACAQ,EAAQ,YAAc,eAMf,MAAMC,EAAO,OAAO,OAAOjB,EAAU,CAC1C,OAAAa,EACA,KAAAC,EACA,OAAAC,EACA,QAAAC,CACF,CAAC"}

package/dist/components/card/Card.js

@@ -1,50 +1,53 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
+import i from "react";
 /* empty css         */
-function a({
-  children: r,
-  className: n = "",
-  clickable: e = !1,
-  hover: t = !1,
-  onClick: d
-}) {
-  return /* @__PURE__ */ i(
+import { cn as s } from "../../utils/cn/cn.js";
+const f = i.forwardRef(
+  ({ className: a, clickable: r = !1, hover: d = !1, onClick: t, onKeyDown: n, children: u, ...y }, N) => /* @__PURE__ */ o(
     "div",
     {
-      className: [
-        "ui-card",
-        e ? "ui-card--clickable" : "",
-        t ? "ui-card--hover" : "",
-        n
-      ].join(" "),
-      role: e ? "button" : void 0,
-      tabIndex: e ? 0 : void 0,
-      onClick: e ? d : void 0,
-      onKeyDown: (o) => {
-        e && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), d?.());
+      ref: N,
+      className: s(
+        "nui-card",
+        r && "nui-card--clickable",
+        d && "nui-card--hover",
+        a
+      ),
+      role: r ? "button" : void 0,
+      tabIndex: r ? 0 : void 0,
+      onClick: r ? t : void 0,
+      onKeyDown: (e) => {
+        n && n(e), r && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t?.(e));
       },
-      children: r
+      ...y,
+      children: u
     }
-  );
-}
-function u({ children: r }) {
-  return /* @__PURE__ */ i("div", { className: "ui-card-header", children: r });
-}
-function s({ children: r }) {
-  return /* @__PURE__ */ i("div", { className: "ui-card-body", children: r });
-}
-function c({ children: r }) {
-  return /* @__PURE__ */ i("div", { className: "ui-card-footer", children: r });
-}
-function f() {
-  return /* @__PURE__ */ i("div", { className: "ui-card-divider" });
-}
-const y = Object.assign(a, {
-  Header: u,
-  Body: s,
-  Footer: c,
-  Divider: f
+  )
+);
+f.displayName = "Card";
+const m = i.forwardRef(
+  ({ className: a, ...r }, d) => /* @__PURE__ */ o("div", { ref: d, className: s("nui-card__header", a), ...r })
+);
+m.displayName = "Card.Header";
+const c = i.forwardRef(
+  ({ className: a, ...r }, d) => /* @__PURE__ */ o("div", { ref: d, className: s("nui-card__body", a), ...r })
+);
+c.displayName = "Card.Body";
+const v = i.forwardRef(
+  ({ className: a, ...r }, d) => /* @__PURE__ */ o("div", { ref: d, className: s("nui-card__footer", a), ...r })
+);
+v.displayName = "Card.Footer";
+const p = i.forwardRef(
+  ({ className: a, ...r }, d) => /* @__PURE__ */ o("hr", { ref: d, className: s("nui-card__divider", a), ...r })
+);
+p.displayName = "Card.Divider";
+const w = Object.assign(f, {
+  Header: m,
+  Body: c,
+  Footer: v,
+  Divider: p
 });
 export {
-  y as Card
+  w as Card
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["/**\r\n * Card.tsx\r\n * ----------\r\n * Theme-aware, flexible Card component.\r\n * Supports header/body/footer & clickable states.\r\n */\r\n\r\nimport React from 'react';\r\nimport './Card.css';\r\n\r\ninterface CardProps {\r\n  children: React.ReactNode;\r\n  className?: string;\r\n  clickable?: boolean;\r\n  hover?: boolean;\r\n  onClick?: () => void;\r\n}\r\n\r\nfunction CardRoot({\r\n  children,\r\n  className = '',\r\n  clickable = false,\r\n  hover = false,\r\n  onClick,\r\n}: CardProps) {\r\n  return (\r\n    <div\r\n      className={[\r\n        'ui-card',\r\n        clickable ? 'ui-card--clickable' : '',\r\n        hover ? 'ui-card--hover' : '',\r\n        className,\r\n      ].join(' ')}\r\n      role={clickable ? 'button' : undefined}\r\n      tabIndex={clickable ? 0 : undefined}\r\n      onClick={clickable ? onClick : undefined}\r\n      onKeyDown={(e) => {\r\n        if (!clickable) return;\r\n        if (e.key === 'Enter' || e.key === ' ') {\r\n          e.preventDefault();\r\n          onClick?.();\r\n        }\r\n      }}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction Header({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"ui-card-header\">{children}</div>;\r\n}\r\n\r\nfunction Body({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"ui-card-body\">{children}</div>;\r\n}\r\n\r\nfunction Footer({ children }: { children: React.ReactNode }) {\r\n  return <div className=\"ui-card-footer\">{children}</div>;\r\n}\r\n\r\nfunction Divider() {\r\n  return <div className=\"ui-card-divider\" />;\r\n}\r\n\r\nexport const Card = Object.assign(CardRoot, {\r\n  Header,\r\n  Body,\r\n  Footer,\r\n  Divider,\r\n});\r\n"],"names":["CardRoot","children","className","clickable","hover","onClick","jsx","e","Header","Body","Footer","Divider","Card"],"mappings":";;AAkBA,SAASA,EAAS;AAAA,EAChB,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,SAAAC;AACF,GAAc;AACZ,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAH,IAAY,uBAAuB;AAAA,QACnCC,IAAQ,mBAAmB;AAAA,QAC3BF;AAAA,MAAA,EACA,KAAK,GAAG;AAAA,MACV,MAAMC,IAAY,WAAW;AAAA,MAC7B,UAAUA,IAAY,IAAI;AAAA,MAC1B,SAASA,IAAYE,IAAU;AAAA,MAC/B,WAAW,CAACE,MAAM;AAChB,QAAKJ,MACDI,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFF,IAAA;AAAA,MAEJ;AAAA,MAEC,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASO,EAAO,EAAE,UAAAP,KAA2C;AAC3D,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAL,EAAA,CAAS;AACnD;AAEA,SAASQ,EAAK,EAAE,UAAAR,KAA2C;AACzD,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAU,gBAAgB,UAAAL,EAAA,CAAS;AACjD;AAEA,SAASS,EAAO,EAAE,UAAAT,KAA2C;AAC3D,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAL,EAAA,CAAS;AACnD;AAEA,SAASU,IAAU;AACjB,SAAO,gBAAAL,EAAC,OAAA,EAAI,WAAU,kBAAA,CAAkB;AAC1C;AAEO,MAAMM,IAAO,OAAO,OAAOZ,GAAU;AAAA,EAC1C,QAAAQ;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,CAAC;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Card.css';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** If true, makes the card interactive via mouse and keyboard (Enter/Space) */\n  clickable?: boolean;\n  /** If true, adds a shadow elevation effect on hover */\n  hover?: boolean;\n}\n\n/**\n * CardRoot\n * * The main container for the Card component.\n * Architecture Note: We manage the 'clickable' state here to ensure the container\n * receives the correct ARIA roles and keyboard event listeners, transforming a standard\n * <div> into an accessible interactive element when needed.\n */\nconst CardRoot = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, clickable = false, hover = false, onClick, onKeyDown, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'nui-card',\n          clickable && 'nui-card--clickable',\n          hover && 'nui-card--hover',\n          className\n        )}\n        // Assign button role if clickable for screen readers\n        role={clickable ? 'button' : undefined}\n        // Make focusable if clickable\n        tabIndex={clickable ? 0 : undefined}\n        onClick={clickable ? onClick : undefined}\n        onKeyDown={(e) => {\n          // Preserve any user-provided onKeyDown logic\n          if (onKeyDown) onKeyDown(e);\n          \n          if (!clickable) return;\n          \n          // Trigger click on Enter or Space for keyboard users\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            // * Type Casting Note: React types expect a MouseEvent for onClick.\n            // Since we are synthesizing a click from a KeyboardEvent, we must cast it\n            // through 'unknown' to satisfy TypeScript's strict event typing.\n            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nCardRoot.displayName = 'Card';\n\nconst Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"nui-card__header\", className)} {...props} />\n  )\n);\nHeader.displayName = 'Card.Header';\n\nconst Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"nui-card__body\", className)} {...props} />\n  )\n);\nBody.displayName = 'Card.Body';\n\nconst Footer = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"nui-card__footer\", className)} {...props} />\n  )\n);\nFooter.displayName = 'Card.Footer';\n\nconst Divider = React.forwardRef<HTMLHRElement, React.HTMLAttributes<HTMLHRElement>>(\n  ({ className, ...props }, ref) => (\n    <hr ref={ref} className={cn(\"nui-card__divider\", className)} {...props} />\n  )\n);\nDivider.displayName = 'Card.Divider';\n\n/**\n * Compound Component Architecture\n * Exposes sub-components via dot notation (e.g., <Card.Header>) for a cleaner API.\n */\nexport const Card = Object.assign(CardRoot, {\n  Header,\n  Body,\n  Footer,\n  Divider,\n});"],"names":["CardRoot","React","className","clickable","hover","onClick","onKeyDown","children","props","ref","jsx","cn","Header","Body","Footer","Divider","Card"],"mappings":";;;;AAkBA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,WAAAC,IAAY,IAAO,OAAAC,IAAQ,IAAO,SAAAC,GAAS,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAEtF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAR,KAAa;AAAA,QACbC,KAAS;AAAA,QACTF;AAAA,MAAA;AAAA,MAGF,MAAMC,IAAY,WAAW;AAAA,MAE7B,UAAUA,IAAY,IAAI;AAAA,MAC1B,SAASA,IAAYE,IAAU;AAAA,MAC/B,WAAW,CAAC,MAAM;AAIhB,QAFIC,OAAqB,CAAC,GAErBH,MAGD,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GAIFE,IAAU,CAAgD;AAAA,MAE9D;AAAA,MACC,GAAGG;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAIT;AACAP,EAAS,cAAc;AAEvB,MAAMY,IAASX,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,GAAGM,EAAA,GAASC,MACxB,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,WAAWE,EAAG,oBAAoBT,CAAS,GAAI,GAAGM,EAAA,CAAO;AAE5E;AACAI,EAAO,cAAc;AAErB,MAAMC,IAAOZ,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,GAAGM,EAAA,GAASC,MACxB,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,WAAWE,EAAG,kBAAkBT,CAAS,GAAI,GAAGM,EAAA,CAAO;AAE1E;AACAK,EAAK,cAAc;AAEnB,MAAMC,IAASb,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,GAAGM,EAAA,GAASC,MACxB,gBAAAC,EAAC,OAAA,EAAI,KAAAD,GAAU,WAAWE,EAAG,oBAAoBT,CAAS,GAAI,GAAGM,EAAA,CAAO;AAE5E;AACAM,EAAO,cAAc;AAErB,MAAMC,IAAUd,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,GAAGM,EAAA,GAASC,MACxB,gBAAAC,EAAC,MAAA,EAAG,KAAAD,GAAU,WAAWE,EAAG,qBAAqBT,CAAS,GAAI,GAAGM,EAAA,CAAO;AAE5E;AACAO,EAAQ,cAAc;AAMf,MAAMC,IAAO,OAAO,OAAOhB,GAAU;AAAA,EAC1C,QAAAY;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,CAAC;"}

package/dist/components/checkbox/Checkbox.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["/**\r\n * Checkbox.tsx\r\n * --------------\r\n * Fully accessible checkbox with 3 states:\r\n * - checked\r\n * - unchecked\r\n * - indeterminate (optional)\r\n */\r\n\r\nimport React, { useEffect, useRef } from 'react';\r\nimport './Checkbox.css';\r\n\r\ninterface CheckboxProps {\r\n  checked?: boolean; // controlled\r\n  defaultChecked?: boolean; // uncontrolled\r\n  indeterminate?: boolean; // optional\r\n  onChange?: (checked: boolean) => void;\r\n\r\n  label?: React.ReactNode;\r\n  disabled?: boolean;\r\n  name?: string;\r\n  value?: string;\r\n  className?: string;\r\n}\r\n\r\nexport function Checkbox({\r\n  checked,\r\n  defaultChecked,\r\n  indeterminate = false,\r\n  onChange,\r\n  label,\r\n  disabled = false,\r\n  name,\r\n  value,\r\n  className = '',\r\n}: CheckboxProps) {\r\n  const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n  const isControlled = checked !== undefined;\r\n  const [internal, setInternal] = React.useState(defaultChecked ?? false);\r\n\r\n  const currentChecked = isControlled ? checked : internal;\r\n\r\n  // Apply indeterminate visual state\r\n  useEffect(() => {\r\n    if (inputRef.current) {\r\n      inputRef.current.indeterminate = indeterminate;\r\n    }\r\n  }, [indeterminate]);\r\n\r\n  const toggle = () => {\r\n    if (disabled) return;\r\n    const newVal = !currentChecked;\r\n    if (!isControlled) setInternal(newVal);\r\n    onChange?.(newVal);\r\n  };\r\n\r\n  return (\r\n    <label className={`ui-checkbox-root ${className}`}>\r\n      <input\r\n        ref={inputRef}\r\n        type=\"checkbox\"\r\n        className=\"ui-checkbox-input\"\r\n        name={name}\r\n        value={value}\r\n        disabled={disabled}\r\n        checked={currentChecked}\r\n        onChange={toggle}\r\n        data-state={\r\n          indeterminate\r\n            ? 'indeterminate'\r\n            : currentChecked\r\n            ? 'checked'\r\n            : 'unchecked'\r\n        }\r\n      />\r\n\r\n      {/* Visual checkmark */}\r\n      <span className=\"ui-checkbox-check\" aria-hidden=\"true\">\r\n        {indeterminate ? '–' : currentChecked ? '✓' : ''}\r\n      </span>\r\n\r\n      {label && <span className=\"ui-checkbox-label\">{label}</span>}\r\n    </label>\r\n  );\r\n}\r\n"],"names":["Checkbox","checked","defaultChecked","indeterminate","onChange","label","disabled","name","value","className","inputRef","useRef","isControlled","internal","setInternal","React","currentChecked","useEffect","toggle","newVal","jsxs","jsx"],"mappings":"sKAyBO,SAASA,EAAS,CACvB,QAAAC,EACA,eAAAC,EACA,cAAAC,EAAgB,GAChB,SAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,EACd,EAAkB,CAChB,MAAMC,EAAWC,EAAAA,OAAgC,IAAI,EAE/CC,EAAeX,IAAY,OAC3B,CAACY,EAAUC,CAAW,EAAIC,EAAM,SAASb,GAAkB,EAAK,EAEhEc,EAAiBJ,EAAeX,EAAUY,EAGhDI,EAAAA,UAAU,IAAM,CACVP,EAAS,UACXA,EAAS,QAAQ,cAAgBP,EAErC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMe,EAAS,IAAM,CACnB,GAAIZ,EAAU,OACd,MAAMa,EAAS,CAACH,EACXJ,GAAcE,EAAYK,CAAM,EACrCf,IAAWe,CAAM,CACnB,EAEA,OACEC,EAAAA,KAAC,QAAA,CAAM,UAAW,oBAAoBX,CAAS,GAC7C,SAAA,CAAAY,EAAAA,IAAC,QAAA,CACC,IAAKX,EACL,KAAK,WACL,UAAU,oBACV,KAAAH,EACA,MAAAC,EACA,SAAAF,EACA,QAASU,EACT,SAAUE,EACV,aACEf,EACI,gBACAa,EACA,UACA,WAAA,CAAA,EAKRK,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAoB,cAAY,OAC7C,SAAAlB,EAAgB,IAAMa,EAAiB,IAAM,EAAA,CAChD,EAECX,GAASgB,EAAAA,IAAC,OAAA,CAAK,UAAU,oBAAqB,SAAAhB,CAAA,CAAM,CAAA,EACvD,CAEJ"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useRef, useState, forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Checkbox.css';\n\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /** If provided, makes the checkbox a controlled component. */\n  checked?: boolean; \n  /** If provided, sets the initial state of an uncontrolled checkbox. */\n  defaultChecked?: boolean;\n  /** Sets the visual state to mixed/indeterminate. This is visually distinct from checked/unchecked. */\n  indeterminate?: boolean;\n  /** Callback fired when the state changes. */\n  onChange?: (checked: boolean) => void;\n  label?: React.ReactNode;\n}\n\n/**\n * Checkbox Component\n * * A control that allows the user to toggle between checked and not checked.\n * Architecture Note: This component seamlessly handles both controlled and uncontrolled \n * paradigms, and directly manipulates the DOM node to support the HTML5 'indeterminate' property.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      checked,\n      defaultChecked,\n      indeterminate = false,\n      onChange,\n      label,\n      disabled = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    // 1. Internal Ref to handle the indeterminate DOM property\n    // The 'indeterminate' state does not exist as an HTML attribute, it only exists\n    // as a property on the DOM node itself, so we must access it via ref.\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    useEffect(() => {\n      if (typeof ref === 'function') {\n        ref(internalRef.current);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLInputElement | null>).current = internalRef.current;\n      }\n    }, [ref]);\n\n    // 2. Controlled vs Uncontrolled Logic\n    const isControlled = checked !== undefined;\n    const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n    const currentChecked = isControlled ? checked : internalChecked;\n\n    // 3. Sync Indeterminate state to the actual DOM element\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      const newVal = e.target.checked;\n      \n      // Only update internal state if the component is uncontrolled\n      if (!isControlled) setInternalChecked(newVal);\n      \n      onChange?.(newVal);\n    };\n\n    return (\n      <label \n        className={cn(\n          \"nui-checkbox\", \n          disabled && \"nui-checkbox--disabled\", \n          className\n        )}\n      >\n        <div className=\"nui-checkbox__wrapper\">\n          {/* Hidden but accessible input */}\n          <input\n            ref={internalRef}\n            type=\"checkbox\"\n            className=\"nui-checkbox__input\"\n            disabled={disabled}\n            checked={currentChecked}\n            onChange={handleChange}\n            // aria-checked explicitly supports the 'mixed' state for screen readers\n            aria-checked={indeterminate ? 'mixed' : currentChecked}\n            data-state={\n              indeterminate ? 'indeterminate' : currentChecked ? 'checked' : 'unchecked'\n            }\n            {...props}\n          />\n          \n          {/* Visual Indicator (Overlays the input) */}\n          <span className=\"nui-checkbox__indicator\" aria-hidden=\"true\">\n            {indeterminate ? (\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n              </svg>\n            ) : currentChecked ? (\n              <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"4\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <polyline points=\"20 6 9 17 4 12\"></polyline>\n              </svg>\n            ) : null}\n          </span>\n        </div>\n\n        {/* Label */}\n        {label && <span className=\"nui-checkbox__label\">{label}</span>}\n      </label>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"names":["Checkbox","forwardRef","checked","defaultChecked","indeterminate","onChange","label","disabled","className","props","ref","internalRef","useRef","useEffect","isControlled","internalChecked","setInternalChecked","useState","currentChecked","handleChange","e","newVal","jsxs","cn","jsx"],"mappings":"+MAwBaA,EAAWC,EAAAA,WACtB,CACE,CACE,QAAAC,EACA,eAAAC,EACA,cAAAC,EAAgB,GAChB,SAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CAIH,MAAMC,EAAcC,EAAAA,OAAyB,IAAI,EAGjDC,EAAAA,UAAU,IAAM,CACV,OAAOH,GAAQ,WACjBA,EAAIC,EAAY,OAAO,EACdD,IACRA,EAAwD,QAAUC,EAAY,QAEnF,EAAG,CAACD,CAAG,CAAC,EAGR,MAAMI,EAAeZ,IAAY,OAC3B,CAACa,EAAiBC,CAAkB,EAAIC,EAAAA,SAASd,GAAkB,EAAK,EACxEe,EAAiBJ,EAAeZ,EAAUa,EAGhDF,EAAAA,UAAU,IAAM,CACVF,EAAY,UACdA,EAAY,QAAQ,cAAgBP,EAExC,EAAG,CAACA,CAAa,CAAC,EAElB,MAAMe,EAAgBC,GAA2C,CAC/D,GAAIb,EAAU,OACd,MAAMc,EAASD,EAAE,OAAO,QAGnBN,GAAcE,EAAmBK,CAAM,EAE5ChB,IAAWgB,CAAM,CACnB,EAEA,OACEC,EAAAA,KAAC,QAAA,CACC,UAAWC,EAAAA,GACT,eACAhB,GAAY,yBACZC,CAAA,EAGF,SAAA,CAAAc,EAAAA,KAAC,MAAA,CAAI,UAAU,wBAEb,SAAA,CAAAE,EAAAA,IAAC,QAAA,CACC,IAAKb,EACL,KAAK,WACL,UAAU,sBACV,SAAAJ,EACA,QAASW,EACT,SAAUC,EAEV,eAAcf,EAAgB,QAAUc,EACxC,aACEd,EAAgB,gBAAkBc,EAAiB,UAAY,YAEhE,GAAGT,CAAA,CAAA,EAINe,EAAAA,IAAC,OAAA,CAAK,UAAU,0BAA0B,cAAY,OACnD,SAAApB,EACCoB,EAAAA,IAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QACrI,SAAAA,MAAC,OAAA,CAAK,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,IAAA,CAAK,CAAA,CACvC,EACEN,EACFM,EAAAA,IAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QACrI,SAAAA,EAAAA,IAAC,WAAA,CAAS,OAAO,gBAAA,CAAiB,CAAA,CACpC,EACE,IAAA,CACN,CAAA,EACF,EAGClB,GAASkB,EAAAA,IAAC,OAAA,CAAK,UAAU,sBAAuB,SAAAlB,CAAA,CAAM,CAAA,CAAA,CAAA,CAG7D,CACF,EAEAN,EAAS,YAAc"}