@nofinite/nui 1.1.1 → 2.0.1

package/README.md

@@ -1,48 +1,61 @@
-<div align="center">
-
-# NUI
-
-**A robust, accessible, and lightweight React component library designed for modern web applications.**
-
-[![npm](https://img.shields.io/npm/v/@nofinite/nui?style=flat-square&color=3b82f6)](https://www.npmjs.com/package/@nofinite/nui)
-[![License](https://img.shields.io/npm/l/@nofinite/nui?style=flat-square&color=3b82f6)](LICENSE)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@nofinite/nui?style=flat-square&color=3b82f6)](https://bundlephobia.com/package/@nofinite/nui)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Yes-3b82f6?style=flat-square)](https://www.typescriptlang.org/)
-
-</div>
-
----
-
-## Overview
-
-NUI provides a set of accessible, production-ready components to help you build modern web applications faster. It handles the complex details—like focus management and accessibility—so you can focus on building your product.
-
-* **Accessible:** WAI-ARIA compliant out of the box.
-* **Type-Safe:** Built with TypeScript for a great developer experience.
-* **Lightweight:** Modular design with zero heavy dependencies.
-
----
-
-## Installation
-
-```bash
-# pnpm
-pnpm add @nofinite/nui
-
-# npm
-npm install @nofinite/nui
-
-# yarn
-yarn add @nofinite/nui
-```
-
-## Documentation
-
-For full setup guides, component examples, and API references, [read documentation](https://opensource.nofinite.com/docs/nui).
-
-## License
-
-This project is licensed under the
-[Apache License, Version 2.0](./LICENSE).
-
-Feel free to use, modify, and share this project in your applications, products, and services. Attribution is welcome and appreciated, but never required.
+<div align="center">
+
+# NUI
+
+**A robust, accessible, and lightweight React component library designed for modern web applications.**
+
+<p align="center">
+  <a href="https://www.typescriptlang.org/">
+    <img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-Strict-3178C6?style=for-the-badge&logo=typescript&logoColor=white">
+  </a>
+
+  <a href="https://opensource.nofinite.com/docs/nui">
+    <img alt="Documentation" src="https://img.shields.io/badge/Docs-OpenSource-%23000133?style=for-the-badge&labelColor=slategray">
+  </a>
+
+  <a href="./LICENSE">
+    <img alt="License" src="https://img.shields.io/badge/License-Apache%202.0-%23000133?style=for-the-badge&labelColor=slategray">
+  </a>
+
+  <a href="https://www.npmjs.com/package/@nofinite/nui">
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/%40nofinite%2Fnui?style=for-the-badge&logo=npm&logoColor=white&labelColor=slategray&color=%23000133">
+  </a>
+</p>
+
+</div>
+
+---
+
+## Overview
+
+NUI provides a set of accessible, production-ready components to help you build modern web applications faster. It handles the complex details—like focus management and accessibility—so you can focus on building your product.
+
+* **Accessible:** WAI-ARIA compliant out of the box.
+* **Type-Safe:** Built with TypeScript for a great developer experience.
+* **Lightweight:** Modular design with zero heavy dependencies.
+
+---
+
+## Installation
+
+```bash
+# pnpm
+pnpm add @nofinite/nui
+
+# npm
+npm install @nofinite/nui
+
+# yarn
+yarn add @nofinite/nui
+```
+
+## Documentation
+
+For full setup guides, component examples, and API references, [read documentation](https://opensource.nofinite.com/docs/nui).
+
+## License
+
+This project is licensed under the
+[Apache License, Version 2.0](./LICENSE).
+
+Feel free to use, modify, and share this project in your applications, products, and services. Attribution is welcome and appreciated, but never required.

package/dist/components/accordion/Accordion.cjs

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react");;/* empty css                */const p=require("../../utils/cn/cn.cjs");function _({items:r,defaultOpenId:i,multiple:s=!1,className:a=""}){const[d,t]=h.useState(i?[i]:[]),c=n=>d.includes(n),l=n=>{t(o=>s?c(n)?o.filter(u=>u!==n):[...o,n]:c(n)?[]:[n])};return e.jsx("div",{className:p.cn("nui-accordion",a),children:r.map(n=>{const o=c(n.id);return e.jsxs("div",{className:"nui-accordion__item","data-state":o?"open":"closed",children:[e.jsxs("button",{className:"nui-accordion__header","aria-expanded":o,"aria-controls":`panel-${n.id}`,id:`accordion-${n.id}`,onClick:()=>l(n.id),children:[e.jsx("span",{className:"nui-accordion__title",children:n.title}),e.jsx("svg",{className:"nui-accordion__icon",width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e.jsx("path",{d:"m6 9 6 6 6-6"})})]}),e.jsx("div",{id:`panel-${n.id}`,role:"region","aria-labelledby":`accordion-${n.id}`,className:"nui-accordion__panel",children:e.jsx("div",{className:"nui-accordion__content",children:n.content})})]},n.id)})})}exports.Accordion=_;
 //# sourceMappingURL=Accordion.cjs.map

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

@@ -1 +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"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from 'react';\nimport { cn } from '../../utils';\nimport './Accordion.css';\n\nexport interface AccordionItem {\n  id: string;\n  title: string;\n  content: React.ReactNode;\n}\n\ninterface AccordionProps {\n  items: AccordionItem[];\n  /** ID of the item that should be open by default */\n  defaultOpenId?: string;\n  /** If true, allows multiple accordion panels to remain open simultaneously */\n  multiple?: boolean;\n  className?: string;\n}\n\n/**\n * Accordion Component\n * * A progressively disclosed content container.\n * Implements the WAI-ARIA Accordion pattern for screen reader and keyboard accessibility.\n */\nexport function Accordion({\n  items,\n  defaultOpenId,\n  multiple = false,\n  className = '',\n}: AccordionProps) {\n  // Initialize state. We use an array even for single-select to maintain a consistent state signature.\n  const [openIds, setOpenIds] = useState<string[]>(\n    defaultOpenId ? [defaultOpenId] : []\n  );\n\n  const isOpen = (id: string) => openIds.includes(id);\n\n  const toggle = (id: string) => {\n    setOpenIds((prev) => {\n      if (multiple) {\n        // Toggle the specific ID in/out of the array for multiple mode\n        return isOpen(id) ? prev.filter((x) => x !== id) : [...prev, id];\n      } else {\n        // Replace the array entirely for single mode\n        return isOpen(id) ? [] : [id];\n      }\n    });\n  };\n\n  return (\n    <div className={cn(\"nui-accordion\", className)}>\n      {items.map((item) => {\n        const open = isOpen(item.id);\n\n        return (\n          <div \n            key={item.id} \n            className=\"nui-accordion__item\"\n            // Expose state to the DOM for CSS attribute selectors (e.g., [data-state=\"open\"])\n            // This enables CSS-only animations and styling without JS overhead.\n            data-state={open ? 'open' : 'closed'}\n          >\n            {/* HEADER\n              Native <button> is used to ensure out-of-the-box keyboard support.\n              Browsers natively translate 'Enter' and 'Space' keydowns on buttons to 'click' events,\n              making custom keyboard listeners redundant.\n            */}\n            <button\n              className=\"nui-accordion__header\"\n              aria-expanded={open}\n              aria-controls={`panel-${item.id}`}\n              id={`accordion-${item.id}`}\n              onClick={() => toggle(item.id)}\n            >\n              <span className=\"nui-accordion__title\">{item.title}</span>\n              {/* Chevron Icon: aria-hidden=\"true\" prevents screen readers from announcing it */}\n              <svg \n                className=\"nui-accordion__icon\" \n                width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" \n                fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m6 9 6 6 6-6\"/>\n              </svg>\n            </button>\n\n            {/* PANEL\n              Rendered conditionally via CSS (not JS) to allow for enter/exit CSS grid animations.\n              aria-labelledby binds the panel context directly to the triggering button.\n            */}\n            <div\n              id={`panel-${item.id}`}\n              role=\"region\"\n              aria-labelledby={`accordion-${item.id}`}\n              className=\"nui-accordion__panel\"\n            >\n              <div className=\"nui-accordion__content\">\n                {item.content}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}"],"names":["Accordion","items","defaultOpenId","multiple","className","openIds","setOpenIds","useState","isOpen","id","toggle","prev","x","jsx","cn","item","open","jsxs"],"mappings":"gNA0BO,SAASA,EAAU,CACxB,MAAAC,EACA,cAAAC,EACA,SAAAC,EAAW,GACX,UAAAC,EAAY,EACd,EAAmB,CAEjB,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,EAEKK,EAAOC,CAAE,EAAIE,EAAK,OAAQC,GAAMA,IAAMH,CAAE,EAAI,CAAC,GAAGE,EAAMF,CAAE,EAGxDD,EAAOC,CAAE,EAAI,CAAA,EAAK,CAACA,CAAE,CAE/B,CACH,EAEA,OACEI,MAAC,MAAA,CAAI,UAAWC,EAAAA,GAAG,gBAAiBV,CAAS,EAC1C,SAAAH,EAAM,IAAKc,GAAS,CACnB,MAAMC,EAAOR,EAAOO,EAAK,EAAE,EAE3B,OACEE,EAAAA,KAAC,MAAA,CAEC,UAAU,sBAGV,aAAYD,EAAO,OAAS,SAO5B,SAAA,CAAAC,EAAAA,KAAC,SAAA,CACC,UAAU,wBACV,gBAAeD,EACf,gBAAe,SAASD,EAAK,EAAE,GAC/B,GAAI,aAAaA,EAAK,EAAE,GACxB,QAAS,IAAML,EAAOK,EAAK,EAAE,EAE7B,SAAA,CAAAF,EAAAA,IAAC,OAAA,CAAK,UAAU,uBAAwB,SAAAE,EAAK,MAAM,EAEnDF,EAAAA,IAAC,MAAA,CACC,UAAU,sBACV,MAAM,KAAK,OAAO,KAAK,QAAQ,YAC/B,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QACvF,cAAY,OAEZ,SAAAA,EAAAA,IAAC,OAAA,CAAK,EAAE,cAAA,CAAc,CAAA,CAAA,CACxB,CAAA,CAAA,EAOFA,EAAAA,IAAC,MAAA,CACC,GAAI,SAASE,EAAK,EAAE,GACpB,KAAK,SACL,kBAAiB,aAAaA,EAAK,EAAE,GACrC,UAAU,uBAEV,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,yBACZ,WAAK,OAAA,CACR,CAAA,CAAA,CACF,CAAA,EA3CKE,EAAK,EAAA,CA8ChB,CAAC,CAAA,CACH,CAEJ"}

package/dist/components/accordion/Accordion.js

@@ -1,51 +1,72 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useState as f } from "react";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useState as h } from "react";
 /* empty css              */
-function v({
-  items: l,
-  defaultOpenId: i,
-  multiple: s = !1,
-  className: t = ""
+import { cn as _ } from "../../utils/cn/cn.js";
+function k({
+  items: a,
+  defaultOpenId: r,
+  multiple: d = !1,
+  className: s = ""
 }) {
-  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]);
+  const [t, l] = h(
+    r ? [r] : []
+  ), e = (n) => t.includes(n), u = (n) => {
+    l((i) => d ? e(n) ? i.filter((p) => p !== n) : [...i, n] : e(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);
+  return /* @__PURE__ */ o("div", { className: _("nui-accordion", s), children: a.map((n) => {
+    const i = e(n.id);
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        className: "nui-accordion__item",
+        "data-state": i ? "open" : "closed",
+        children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              className: "nui-accordion__header",
+              "aria-expanded": i,
+              "aria-controls": `panel-${n.id}`,
+              id: `accordion-${n.id}`,
+              onClick: () => u(n.id),
+              children: [
+                /* @__PURE__ */ o("span", { className: "nui-accordion__title", children: n.title }),
+                /* @__PURE__ */ o(
+                  "svg",
+                  {
+                    className: "nui-accordion__icon",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ o("path", { d: "m6 9 6 6 6-6" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              id: `panel-${n.id}`,
+              role: "region",
+              "aria-labelledby": `accordion-${n.id}`,
+              className: "nui-accordion__panel",
+              children: /* @__PURE__ */ o("div", { className: "nui-accordion__content", children: n.content })
+            }
+          )
+        ]
+      },
+      n.id
+    );
   }) });
 }
 export {
-  v as Accordion
+  k as Accordion
 };
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from 'react';\nimport { cn } from '../../utils';\nimport './Accordion.css';\n\nexport interface AccordionItem {\n  id: string;\n  title: string;\n  content: React.ReactNode;\n}\n\ninterface AccordionProps {\n  items: AccordionItem[];\n  /** ID of the item that should be open by default */\n  defaultOpenId?: string;\n  /** If true, allows multiple accordion panels to remain open simultaneously */\n  multiple?: boolean;\n  className?: string;\n}\n\n/**\n * Accordion Component\n * * A progressively disclosed content container.\n * Implements the WAI-ARIA Accordion pattern for screen reader and keyboard accessibility.\n */\nexport function Accordion({\n  items,\n  defaultOpenId,\n  multiple = false,\n  className = '',\n}: AccordionProps) {\n  // Initialize state. We use an array even for single-select to maintain a consistent state signature.\n  const [openIds, setOpenIds] = useState<string[]>(\n    defaultOpenId ? [defaultOpenId] : []\n  );\n\n  const isOpen = (id: string) => openIds.includes(id);\n\n  const toggle = (id: string) => {\n    setOpenIds((prev) => {\n      if (multiple) {\n        // Toggle the specific ID in/out of the array for multiple mode\n        return isOpen(id) ? prev.filter((x) => x !== id) : [...prev, id];\n      } else {\n        // Replace the array entirely for single mode\n        return isOpen(id) ? [] : [id];\n      }\n    });\n  };\n\n  return (\n    <div className={cn(\"nui-accordion\", className)}>\n      {items.map((item) => {\n        const open = isOpen(item.id);\n\n        return (\n          <div \n            key={item.id} \n            className=\"nui-accordion__item\"\n            // Expose state to the DOM for CSS attribute selectors (e.g., [data-state=\"open\"])\n            // This enables CSS-only animations and styling without JS overhead.\n            data-state={open ? 'open' : 'closed'}\n          >\n            {/* HEADER\n              Native <button> is used to ensure out-of-the-box keyboard support.\n              Browsers natively translate 'Enter' and 'Space' keydowns on buttons to 'click' events,\n              making custom keyboard listeners redundant.\n            */}\n            <button\n              className=\"nui-accordion__header\"\n              aria-expanded={open}\n              aria-controls={`panel-${item.id}`}\n              id={`accordion-${item.id}`}\n              onClick={() => toggle(item.id)}\n            >\n              <span className=\"nui-accordion__title\">{item.title}</span>\n              {/* Chevron Icon: aria-hidden=\"true\" prevents screen readers from announcing it */}\n              <svg \n                className=\"nui-accordion__icon\" \n                width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" \n                fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m6 9 6 6 6-6\"/>\n              </svg>\n            </button>\n\n            {/* PANEL\n              Rendered conditionally via CSS (not JS) to allow for enter/exit CSS grid animations.\n              aria-labelledby binds the panel context directly to the triggering button.\n            */}\n            <div\n              id={`panel-${item.id}`}\n              role=\"region\"\n              aria-labelledby={`accordion-${item.id}`}\n              className=\"nui-accordion__panel\"\n            >\n              <div className=\"nui-accordion__content\">\n                {item.content}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}"],"names":["Accordion","items","defaultOpenId","multiple","className","openIds","setOpenIds","useState","isOpen","id","toggle","prev","x","jsx","cn","item","open","jsxs"],"mappings":";;;;AA0BO,SAASA,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AACd,GAAmB;AAEjB,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,IAEKK,EAAOC,CAAE,IAAIE,EAAK,OAAO,CAACC,MAAMA,MAAMH,CAAE,IAAI,CAAC,GAAGE,GAAMF,CAAE,IAGxDD,EAAOC,CAAE,IAAI,CAAA,IAAK,CAACA,CAAE,CAE/B;AAAA,EACH;AAEA,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAG,iBAAiBV,CAAS,GAC1C,UAAAH,EAAM,IAAI,CAACc,MAAS;AACnB,UAAMC,IAAOR,EAAOO,EAAK,EAAE;AAE3B,WACE,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAGV,cAAYD,IAAO,SAAS;AAAA,QAO5B,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,iBAAeD;AAAA,cACf,iBAAe,SAASD,EAAK,EAAE;AAAA,cAC/B,IAAI,aAAaA,EAAK,EAAE;AAAA,cACxB,SAAS,MAAML,EAAOK,EAAK,EAAE;AAAA,cAE7B,UAAA;AAAA,gBAAA,gBAAAF,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAE,EAAK,OAAM;AAAA,gBAEnD,gBAAAF;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAM;AAAA,oBAAK,QAAO;AAAA,oBAAK,SAAQ;AAAA,oBAC/B,MAAK;AAAA,oBAAO,QAAO;AAAA,oBAAe,aAAY;AAAA,oBAAI,eAAc;AAAA,oBAAQ,gBAAe;AAAA,oBACvF,eAAY;AAAA,oBAEZ,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,eAAA,CAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACxB;AAAA,YAAA;AAAA,UAAA;AAAA,UAOF,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,SAASE,EAAK,EAAE;AAAA,cACpB,MAAK;AAAA,cACL,mBAAiB,aAAaA,EAAK,EAAE;AAAA,cACrC,WAAU;AAAA,cAEV,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,0BACZ,YAAK,QAAA,CACR;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MA3CKE,EAAK;AAAA,IAAA;AAAA,EA8ChB,CAAC,EAAA,CACH;AAEJ;"}

package/dist/components/alert/Alert.cjs

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css            */const c=require("../../utils/cn/cn.cjs");function u({variant:r="info",title:n,children:t,closable:s=!1,onClose:i,className:l,...o}){const a=r==="error"||r==="warning"?"alert":"status";return e.jsxs("div",{className:c.cn("nui-alert",l),"data-variant":r,role:a,...o,children:[e.jsxs("div",{className:"nui-alert__content",children:[n&&e.jsx("div",{className:"nui-alert__title",children:n}),e.jsx("div",{className:"nui-alert__description",children:t})]}),s&&e.jsx("button",{type:"button",className:"nui-alert__close","aria-label":"Close alert",onClick:i,children:e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]})}exports.Alert=u;
 //# sourceMappingURL=Alert.cjs.map

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

@@ -1 +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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Alert.css';\n\ntype AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * We Omit 'title' from the standard HTML attributes because the native HTML 'title' \n * expects a string (for native tooltips). We override it here to accept ReactNode, \n * allowing for rich text, icons, or custom JSX inside the alert's title area.\n */\ninterface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: AlertVariant;\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  /** Determines if the close icon button is rendered */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. \n   * Note: The component is controlled; it does not unmount itself. \n   */\n  onClose?: () => void;\n  className?: string;\n}\n\n/**\n * Alert Component\n * * Used to communicate important messages to the user.\n */\nexport function Alert({\n  variant = 'info',\n  title,\n  children,\n  closable = false,\n  onClose,\n  className,\n  ...props\n}: AlertProps) {\n  // * Accessibility routing: \n  // 'error' and 'warning' are high-priority interruptions, mapped to role=\"alert\".\n  // 'info' and 'success' are low-priority updates, mapped to role=\"status\" \n  // so screen readers don't aggressively interrupt the user.\n  const role = variant === 'error' || variant === 'warning' ? 'alert' : 'status';\n\n  return (\n    <div \n      className={cn(\"nui-alert\", className)} \n      data-variant={variant}\n      role={role}\n      {...props}\n    >\n      <div className=\"nui-alert__content\">\n        {title && <div className=\"nui-alert__title\">{title}</div>}\n        <div className=\"nui-alert__description\">{children}</div>\n      </div>\n\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"nui-alert__close\"\n          aria-label=\"Close alert\"\n          onClick={onClose}\n        >\n          {/* SVG Close Icon: aria-hidden is not needed because the button has an aria-label */}\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      )}\n    </div>\n  );\n}"],"names":["Alert","variant","title","children","closable","onClose","className","props","role","jsxs","cn","jsx"],"mappings":"yLA4BO,SAASA,EAAM,CACpB,QAAAC,EAAU,OACV,MAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAe,CAKb,MAAMC,EAAOP,IAAY,SAAWA,IAAY,UAAY,QAAU,SAEtE,OACEQ,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GAAG,YAAaJ,CAAS,EACpC,eAAcL,EACd,KAAAO,EACC,GAAGD,EAEJ,SAAA,CAAAE,EAAAA,KAAC,MAAA,CAAI,UAAU,qBACZ,SAAA,CAAAP,GAASS,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAoB,SAAAT,EAAM,EACnDS,EAAAA,IAAC,MAAA,CAAI,UAAU,yBAA0B,SAAAR,CAAA,CAAS,CAAA,EACpD,EAECC,GACCO,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,UAAU,mBACV,aAAW,cACX,QAASN,EAGT,gBAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QACrI,SAAA,CAAAM,EAAAA,IAAC,OAAA,CAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAA,CAAK,EACpCA,EAAAA,IAAC,QAAK,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAA,CAAK,CAAA,CAAA,CACtC,CAAA,CAAA,CACF,CAAA,CAAA,CAIR"}

package/dist/components/alert/Alert.js

@@ -1,32 +1,46 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 /* empty css          */
-function d({
-  type: e = "info",
-  title: r,
+import { cn as d } from "../../utils/cn/cn.js";
+function x({
+  variant: r = "info",
+  title: n,
   children: t,
-  closable: i = !1,
-  onClose: s,
-  className: n = ""
+  closable: l = !1,
+  onClose: o,
+  className: s,
+  ...a
 }) {
-  const o = e === "error" || e === "warning" ? "alert" : "status";
-  return /* @__PURE__ */ l("div", { className: `ui-alert ui-alert--${e} ${n}`, role: o, children: [
-    /* @__PURE__ */ l("div", { className: "ui-alert-content", children: [
-      r && /* @__PURE__ */ a("div", { className: "ui-alert-title", children: r }),
-      t
-    ] }),
-    i && /* @__PURE__ */ a(
-      "button",
-      {
-        type: "button",
-        className: "ui-alert-close",
-        "aria-label": "Close alert",
-        onClick: s,
-        children: "×"
-      }
-    )
-  ] });
+  const c = r === "error" || r === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: d("nui-alert", s),
+      "data-variant": r,
+      role: c,
+      ...a,
+      children: [
+        /* @__PURE__ */ i("div", { className: "nui-alert__content", children: [
+          n && /* @__PURE__ */ e("div", { className: "nui-alert__title", children: n }),
+          /* @__PURE__ */ e("div", { className: "nui-alert__description", children: t })
+        ] }),
+        l && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "nui-alert__close",
+            "aria-label": "Close alert",
+            onClick: o,
+            children: /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  d as Alert
+  x as Alert
 };
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","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":";;AA8BO,SAASA,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AAIb,QAAMC,IAAON,MAAS,WAAWA,MAAS,YAAY,UAAU;AAEhE,SACE,gBAAAO,EAAC,SAAI,WAAW,sBAAsBP,CAAI,IAAIK,CAAS,IAAI,MAAAC,GACzD,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,MAAAN,KAAS,gBAAAO,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAP,GAAM;AAAA,MAChDC;AAAA,IAAA,GACH;AAAA,IAECC,KACC,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAW;AAAA,QACX,SAASJ;AAAA,QACV,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GAEJ;AAEJ;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils';\nimport './Alert.css';\n\ntype AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * We Omit 'title' from the standard HTML attributes because the native HTML 'title' \n * expects a string (for native tooltips). We override it here to accept ReactNode, \n * allowing for rich text, icons, or custom JSX inside the alert's title area.\n */\ninterface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: AlertVariant;\n  title?: React.ReactNode;\n  children?: React.ReactNode;\n  /** Determines if the close icon button is rendered */\n  closable?: boolean;\n  /** Callback fired when the close button is clicked. \n   * Note: The component is controlled; it does not unmount itself. \n   */\n  onClose?: () => void;\n  className?: string;\n}\n\n/**\n * Alert Component\n * * Used to communicate important messages to the user.\n */\nexport function Alert({\n  variant = 'info',\n  title,\n  children,\n  closable = false,\n  onClose,\n  className,\n  ...props\n}: AlertProps) {\n  // * Accessibility routing: \n  // 'error' and 'warning' are high-priority interruptions, mapped to role=\"alert\".\n  // 'info' and 'success' are low-priority updates, mapped to role=\"status\" \n  // so screen readers don't aggressively interrupt the user.\n  const role = variant === 'error' || variant === 'warning' ? 'alert' : 'status';\n\n  return (\n    <div \n      className={cn(\"nui-alert\", className)} \n      data-variant={variant}\n      role={role}\n      {...props}\n    >\n      <div className=\"nui-alert__content\">\n        {title && <div className=\"nui-alert__title\">{title}</div>}\n        <div className=\"nui-alert__description\">{children}</div>\n      </div>\n\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"nui-alert__close\"\n          aria-label=\"Close alert\"\n          onClick={onClose}\n        >\n          {/* SVG Close Icon: aria-hidden is not needed because the button has an aria-label */}\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n          </svg>\n        </button>\n      )}\n    </div>\n  );\n}"],"names":["Alert","variant","title","children","closable","onClose","className","props","role","jsxs","cn","jsx"],"mappings":";;;AA4BO,SAASA,EAAM;AAAA,EACpB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AAKb,QAAMC,IAAOP,MAAY,WAAWA,MAAY,YAAY,UAAU;AAEtE,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,aAAaJ,CAAS;AAAA,MACpC,gBAAcL;AAAA,MACd,MAAAO;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,sBACZ,UAAA;AAAA,UAAAP,KAAS,gBAAAS,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAT,GAAM;AAAA,UACnD,gBAAAS,EAAC,OAAA,EAAI,WAAU,0BAA0B,UAAAR,EAAA,CAAS;AAAA,QAAA,GACpD;AAAA,QAECC,KACC,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAW;AAAA,YACX,SAASN;AAAA,YAGT,4BAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SACrI,UAAA;AAAA,cAAA,gBAAAM,EAAC,QAAA,EAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,cACpC,gBAAAA,EAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,YAAA,EAAA,CACtC;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/avatar/Avatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),f=require("react");;/* empty css             */function h(e){if(!e)return"";const r=e.trim().split(" ");return r.length===1?r[0].charAt(0).toUpperCase():(r[0][0]+r[1][0]).toUpperCase()}function x({src:e,alt:r,name:i,size:l="md",shape:u="circle",status:t,loading:s=!1,className:c="",fallbackIcon:n}){const[p,v]=f.useState(!1),o=h(i),d=["ui-avatar",`ui-avatar--${l}`,`ui-avatar--${u}`,s&&"ui-avatar-loading",c].filter(Boolean).join(" "),j=e&&!p&&!s;return a.jsxs("div",{className:d,"aria-label":r||i,children:[j?a.jsx("img",{src:e,alt:r||i||"avatar",onError:()=>v(!0)}):o?a.jsx("span",{children:o}):n?a.jsx("span",{children:n}):a.jsx("span",{children:"?"}),t&&a.jsx("span",{className:["ui-avatar-status",t&&`ui-avatar-status--${t}`].filter(Boolean).join(" "),"aria-label":t})]})}exports.Avatar=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),p=require("react");;/* empty css             */const j=require("../../utils/cn/cn.cjs");function x(e){if(!e)return"";const r=e.trim().split(/\s+/);return r.length===0?"":r.length===1?r[0].substring(0,2).toUpperCase():(r[0][0]+r[r.length-1][0]).toUpperCase()}function f({src:e,alt:r,name:t,size:n="md",shape:o="circle",status:s,fallbackIcon:c,loading:i,className:l,...u}){const[d,h]=p.useState(!1),v=x(t),g=e&&!d&&!i;return a.jsxs("div",{className:j.cn("nui-avatar",i&&"nui-avatar--loading",l),"data-size":n,"data-shape":o,role:"img","aria-label":r||t||"Avatar",...u,children:[g?a.jsx("img",{src:e,alt:r||t,className:"nui-avatar__image",onError:()=>h(!0)}):a.jsx("div",{className:"nui-avatar__fallback","aria-hidden":"true",children:!i&&(v||c||a.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[a.jsx("path",{d:"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"}),a.jsx("circle",{cx:"12",cy:"7",r:"4"})]}))}),s&&a.jsx("span",{className:"nui-avatar__status","data-status":s,role:"status","aria-label":s})]})}exports.Avatar=f;
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["/**\r\n * Avatar.tsx\r\n * Enterprise-grade Avatar component.\r\n */\r\nimport React, { useState } from 'react';\r\nimport './Avatar.css';\r\n\r\ntype AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\r\ntype AvatarShape = 'circle' | 'rounded' | 'square';\r\ntype Status = 'online' | 'offline' | 'busy' | undefined;\r\n\r\ninterface AvatarProps {\r\n  src?: string;\r\n  alt?: string;\r\n  name?: string; // For initials fallback\r\n  size?: AvatarSize;\r\n  shape?: AvatarShape;\r\n  status?: Status;\r\n  loading?: boolean; // skeleton\r\n  className?: string;\r\n  fallbackIcon?: React.ReactNode;\r\n}\r\n\r\nfunction getInitials(name?: string): string {\r\n  if (!name) return '';\r\n  const parts = name.trim().split(' ');\r\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();\r\n  return (parts[0][0] + parts[1][0]).toUpperCase();\r\n}\r\n\r\nexport function Avatar({\r\n  src,\r\n  alt,\r\n  name,\r\n  size = 'md',\r\n  shape = 'circle',\r\n  status,\r\n  loading = false,\r\n  className = '',\r\n  fallbackIcon,\r\n}: AvatarProps) {\r\n  const [errored, setErrored] = useState(false);\r\n  const initials = getInitials(name);\r\n\r\n  const classes = [\r\n    'ui-avatar',\r\n    `ui-avatar--${size}`,\r\n    `ui-avatar--${shape}`,\r\n    loading && 'ui-avatar-loading',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const showImage = src && !errored && !loading;\r\n\r\n  return (\r\n    <div className={classes} aria-label={alt || name}>\r\n      {showImage ? (\r\n        <img\r\n          src={src}\r\n          alt={alt || name || 'avatar'}\r\n          onError={() => setErrored(true)}\r\n        />\r\n      ) : initials ? (\r\n        <span>{initials}</span>\r\n      ) : fallbackIcon ? (\r\n        <span>{fallbackIcon}</span>\r\n      ) : (\r\n        <span>?</span>\r\n      )}\r\n\r\n      {status && (\r\n        <span\r\n          className={[\r\n            'ui-avatar-status',\r\n            status && `ui-avatar-status--${status}`,\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          aria-label={status}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["getInitials","name","parts","Avatar","src","alt","size","shape","status","loading","className","fallbackIcon","errored","setErrored","useState","initials","classes","showImage","jsx"],"mappings":"oKAuBA,SAASA,EAAYC,EAAuB,CAC1C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAQD,EAAK,KAAA,EAAO,MAAM,GAAG,EACnC,OAAIC,EAAM,SAAW,EAAUA,EAAM,CAAC,EAAE,OAAO,CAAC,EAAE,YAAA,GAC1CA,EAAM,CAAC,EAAE,CAAC,EAAIA,EAAM,CAAC,EAAE,CAAC,GAAG,YAAA,CACrC,CAEO,SAASC,EAAO,CACrB,IAAAC,EACA,IAAAC,EACA,KAAAJ,EACA,KAAAK,EAAO,KACP,MAAAC,EAAQ,SACR,OAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,aAAAC,CACF,EAAgB,CACd,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EACtCC,EAAWf,EAAYC,CAAI,EAE3Be,EAAU,CACd,YACA,cAAcV,CAAI,GAClB,cAAcC,CAAK,GACnBE,GAAW,oBACXC,CAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,EAELO,EAAYb,GAAO,CAACQ,GAAW,CAACH,EAEtC,cACG,MAAA,CAAI,UAAWO,EAAS,aAAYX,GAAOJ,EACzC,SAAA,CAAAgB,EACCC,EAAAA,IAAC,MAAA,CACC,IAAAd,EACA,IAAKC,GAAOJ,GAAQ,SACpB,QAAS,IAAMY,EAAW,EAAI,CAAA,CAAA,EAE9BE,EACFG,EAAAA,IAAC,OAAA,CAAM,SAAAH,CAAA,CAAS,EACdJ,EACFO,EAAAA,IAAC,OAAA,CAAM,SAAAP,CAAA,CAAa,EAEpBO,EAAAA,IAAC,QAAK,SAAA,IAAC,EAGRV,GACCU,EAAAA,IAAC,OAAA,CACC,UAAW,CACT,mBACAV,GAAU,qBAAqBA,CAAM,EAAA,EAEpC,OAAO,OAAO,EACd,KAAK,GAAG,EACX,aAAYA,CAAA,CAAA,CACd,EAEJ,CAEJ"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState } from 'react';\nimport { cn } from '../../utils';\nimport './Avatar.css';\n\nexport type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'rounded' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  name?: string;\n  size?: AvatarSize;\n  shape?: AvatarShape;\n  status?: AvatarStatus;\n  fallbackIcon?: React.ReactNode; \n  loading?: boolean;              \n  className?: string;\n}\n\n/**\n * Utility to extract initials from a name string.\n * Handles single words and multi-word names appropriately.\n */\nfunction getInitials(name?: string): string {\n  if (!name) return '';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 0) return '';\n  if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\n/**\n * Avatar Component\n * * A visual representation of a user or entity.\n * Implements a strict fallback sequence: Image -> Initials -> Fallback Icon -> Default Icon.\n */\nexport function Avatar({\n  src,\n  alt,\n  name,\n  size = 'md',\n  shape = 'circle',\n  status,\n  fallbackIcon,  \n  loading,       \n  className,\n  ...props       \n}: AvatarProps) {\n  // * Native error handling: We track if the image fails to load via the native onError event\n  // to seamlessly trigger the fallback UI without needing complex fetch checks.\n  const [hasError, setHasError] = useState(false);\n  const initials = getInitials(name);\n  \n  // If loading is true, we force the fallback/skeleton state by hiding the image\n  const showImage = src && !hasError && !loading;\n\n  return (\n    <div\n      className={cn(\n        \"nui-avatar\", \n        loading && \"nui-avatar--loading\", \n        className\n      )}\n      data-size={size}\n      data-shape={shape}\n      role=\"img\"\n      aria-label={alt || name || \"Avatar\"}\n      {...props} \n    >\n      {showImage ? (\n        <img\n          src={src}\n          alt={alt || name}\n          className=\"nui-avatar__image\"\n          onError={() => setHasError(true)}\n        />\n      ) : (\n        <div className=\"nui-avatar__fallback\" aria-hidden=\"true\">\n          {/* Fallback Waterfall Logic */}\n          {!loading && (initials || fallbackIcon || (\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n            </svg>\n          ))}\n        </div>\n      )}\n\n      {status && (\n        <span \n          className=\"nui-avatar__status\" \n          data-status={status} \n          role=\"status\"\n          aria-label={status}\n        />\n      )}\n    </div>\n  );\n}"],"names":["getInitials","name","parts","Avatar","src","alt","size","shape","status","fallbackIcon","loading","className","props","hasError","setHasError","useState","initials","showImage","jsxs","cn","jsx"],"mappings":"6MA0BA,SAASA,EAAYC,EAAuB,CAC1C,GAAI,CAACA,EAAM,MAAO,GAClB,MAAMC,EAAQD,EAAK,KAAA,EAAO,MAAM,KAAK,EACrC,OAAIC,EAAM,SAAW,EAAU,GAC3BA,EAAM,SAAW,EAAUA,EAAM,CAAC,EAAE,UAAU,EAAG,CAAC,EAAE,YAAA,GAChDA,EAAM,CAAC,EAAE,CAAC,EAAIA,EAAMA,EAAM,OAAS,CAAC,EAAE,CAAC,GAAG,YAAA,CACpD,CAOO,SAASC,EAAO,CACrB,IAAAC,EACA,IAAAC,EACA,KAAAJ,EACA,KAAAK,EAAO,KACP,MAAAC,EAAQ,SACR,OAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,GAAGC,CACL,EAAgB,CAGd,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAS,EAAK,EACxCC,EAAWhB,EAAYC,CAAI,EAG3BgB,EAAYb,GAAO,CAACS,GAAY,CAACH,EAEvC,OACEQ,EAAAA,KAAC,MAAA,CACC,UAAWC,EAAAA,GACT,aACAT,GAAW,sBACXC,CAAA,EAEF,YAAWL,EACX,aAAYC,EACZ,KAAK,MACL,aAAYF,GAAOJ,GAAQ,SAC1B,GAAGW,EAEH,SAAA,CAAAK,EACCG,EAAAA,IAAC,MAAA,CACC,IAAAhB,EACA,IAAKC,GAAOJ,EACZ,UAAU,oBACV,QAAS,IAAMa,EAAY,EAAI,CAAA,CAAA,EAGjCM,EAAAA,IAAC,MAAA,CAAI,UAAU,uBAAuB,cAAY,OAE/C,SAAA,CAACV,IAAYM,GAAYP,GACxBS,EAAAA,KAAC,MAAA,CAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,OAAO,eAAe,YAAY,IAAI,cAAc,QAAQ,eAAe,QACrI,SAAA,CAAAE,EAAAA,IAAC,OAAA,CAAK,EAAE,2CAAA,CAA4C,QACnD,SAAA,CAAO,GAAG,KAAK,GAAG,IAAI,EAAE,GAAA,CAAI,CAAA,CAAA,CAC/B,EAAA,CAEJ,EAGDZ,GACCY,EAAAA,IAAC,OAAA,CACC,UAAU,qBACV,cAAaZ,EACb,KAAK,SACL,aAAYA,CAAA,CAAA,CACd,CAAA,CAAA,CAIR"}

package/dist/components/avatar/Avatar.js

@@ -1,51 +1,65 @@
-import { jsxs as v, jsx as t } from "react/jsx-runtime";
-import { useState as d } from "react";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useState as f } from "react";
 /* empty css           */
-function h(r) {
-  if (!r) return "";
-  const a = r.trim().split(" ");
-  return a.length === 1 ? a[0].charAt(0).toUpperCase() : (a[0][0] + a[1][0]).toUpperCase();
+import { cn as g } from "../../utils/cn/cn.js";
+function _(a) {
+  if (!a) return "";
+  const r = a.trim().split(/\s+/);
+  return r.length === 0 ? "" : r.length === 1 ? r[0].substring(0, 2).toUpperCase() : (r[0][0] + r[r.length - 1][0]).toUpperCase();
 }
-function w({
-  src: r,
-  alt: a,
-  name: i,
-  size: l = "md",
-  shape: c = "circle",
-  status: e,
-  loading: s = !1,
-  className: p = "",
-  fallbackIcon: o
+function j({
+  src: a,
+  alt: r,
+  name: e,
+  size: o = "md",
+  shape: l = "circle",
+  status: i,
+  fallbackIcon: c,
+  loading: s,
+  className: u,
+  ...d
 }) {
-  const [u, f] = d(!1), n = h(i), m = [
-    "ui-avatar",
-    `ui-avatar--${l}`,
-    `ui-avatar--${c}`,
-    s && "ui-avatar-loading",
-    p
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ v("div", { className: m, "aria-label": a || i, children: [
-    r && !u && !s ? /* @__PURE__ */ t(
-      "img",
-      {
-        src: r,
-        alt: a || i || "avatar",
-        onError: () => f(!0)
-      }
-    ) : n ? /* @__PURE__ */ t("span", { children: n }) : o ? /* @__PURE__ */ t("span", { children: o }) : /* @__PURE__ */ t("span", { children: "?" }),
-    e && /* @__PURE__ */ t(
-      "span",
-      {
-        className: [
-          "ui-avatar-status",
-          e && `ui-avatar-status--${e}`
-        ].filter(Boolean).join(" "),
-        "aria-label": e
-      }
-    )
-  ] });
+  const [h, p] = f(!1), m = _(e), v = a && !h && !s;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: g(
+        "nui-avatar",
+        s && "nui-avatar--loading",
+        u
+      ),
+      "data-size": o,
+      "data-shape": l,
+      role: "img",
+      "aria-label": r || e || "Avatar",
+      ...d,
+      children: [
+        v ? /* @__PURE__ */ t(
+          "img",
+          {
+            src: a,
+            alt: r || e,
+            className: "nui-avatar__image",
+            onError: () => p(!0)
+          }
+        ) : /* @__PURE__ */ t("div", { className: "nui-avatar__fallback", "aria-hidden": "true", children: !s && (m || c || /* @__PURE__ */ n("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ t("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+          /* @__PURE__ */ t("circle", { cx: "12", cy: "7", r: "4" })
+        ] })) }),
+        i && /* @__PURE__ */ t(
+          "span",
+          {
+            className: "nui-avatar__status",
+            "data-status": i,
+            role: "status",
+            "aria-label": i
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  w as Avatar
+  j as Avatar
 };
 //# sourceMappingURL=Avatar.js.map