@nofinite/nui 1.1.2 → 2.0.2

package/dist/components/input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["/**\r\n * Input.tsx\r\n * ---------\r\n * Single-component fully accessible input field.\r\n * Includes:\r\n * - label\r\n * - description\r\n * - error message\r\n * - size variants\r\n * - required + disabled states\r\n * - WCAG-compliant focus handling\r\n */\r\n\r\nimport React from 'react';\r\nimport './Input.css';\r\n\r\nexport interface InputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement> {\r\n  /** Label for the input */\r\n  label?: string;\r\n\r\n  /** Helper text */\r\n  description?: string;\r\n\r\n  /** Error message */\r\n  error?: string;\r\n\r\n  /** Size variant (avoid HTML size conflict) */\r\n  inputSize?: 'sm' | 'md' | 'lg';\r\n\r\n  /** Custom wrapper class */\r\n  className?: string;\r\n}\r\n\r\nexport function Input({\r\n  label,\r\n  description,\r\n  error,\r\n  inputSize = 'md',\r\n  className = '',\r\n  id,\r\n  ...props\r\n}: InputProps) {\r\n  // Always call hook\r\n  const reactId = React.useId();\r\n\r\n  // Final ID (prop overrides auto)\r\n  const inputId = id ?? reactId;\r\n\r\n  const describedBy = error\r\n    ? `${inputId}-error`\r\n    : description\r\n    ? `${inputId}-description`\r\n    : undefined;\r\n\r\n  return (\r\n    <div className={`ui-input-wrapper ${className}`}>\r\n      {label && (\r\n        <label htmlFor={inputId} className=\"ui-input-label\">\r\n          {label}\r\n          {props.required && ' *'}\r\n        </label>\r\n      )}\r\n\r\n      <input\r\n        id={inputId}\r\n        className={[\r\n          'ui-input',\r\n          inputSize === 'sm' && 'ui-input--sm',\r\n          inputSize === 'lg' && 'ui-input--lg',\r\n          error && 'ui-input--error',\r\n        ]\r\n          .filter(Boolean)\r\n          .join(' ')}\r\n        aria-invalid={!!error}\r\n        aria-describedby={describedBy}\r\n        {...props}\r\n      />\r\n\r\n      {/* Description (only when not error) */}\r\n      {description && !error && (\r\n        <div id={`${inputId}-description`} className=\"ui-input-description\">\r\n          {description}\r\n        </div>\r\n      )}\r\n\r\n      {/* Error message */}\r\n      {error && (\r\n        <div id={`${inputId}-error`} className=\"ui-input-error\">\r\n          {error}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Input","label","description","error","inputSize","className","id","props","reactId","React","inputId","describedBy","jsxs","jsx"],"mappings":"mKAkCO,SAASA,EAAM,CACpB,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,KACZ,UAAAC,EAAY,GACZ,GAAAC,EACA,GAAGC,CACL,EAAe,CAEb,MAAMC,EAAUC,EAAM,MAAA,EAGhBC,EAAUJ,GAAME,EAEhBG,EAAcR,EAChB,GAAGO,CAAO,SACVR,EACA,GAAGQ,CAAO,eACV,OAEJ,OACEE,EAAAA,KAAC,MAAA,CAAI,UAAW,oBAAoBP,CAAS,GAC1C,SAAA,CAAAJ,GACCW,EAAAA,KAAC,QAAA,CAAM,QAASF,EAAS,UAAU,iBAChC,SAAA,CAAAT,EACAM,EAAM,UAAY,IAAA,EACrB,EAGFM,EAAAA,IAAC,QAAA,CACC,GAAIH,EACJ,UAAW,CACT,WACAN,IAAc,MAAQ,eACtBA,IAAc,MAAQ,eACtBD,GAAS,iBAAA,EAER,OAAO,OAAO,EACd,KAAK,GAAG,EACX,eAAc,CAAC,CAACA,EAChB,mBAAkBQ,EACjB,GAAGJ,CAAA,CAAA,EAILL,GAAe,CAACC,GACfU,EAAAA,IAAC,MAAA,CAAI,GAAI,GAAGH,CAAO,eAAgB,UAAU,uBAC1C,SAAAR,CAAA,CACH,EAIDC,SACE,MAAA,CAAI,GAAI,GAAGO,CAAO,SAAU,UAAU,iBACpC,SAAAP,CAAA,CACH,CAAA,EAEJ,CAEJ"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useId } from 'react';\nimport { cn } from '../../utils';\nimport './Input.css';\n\n/* -------------------------------------------------------------------------- */\n/* Props                                                                      */\n/* -------------------------------------------------------------------------- */\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** The text label associated with the input field. */\n  label?: React.ReactNode;\n  /** Auxiliary text displayed below the input to provide additional context. */\n  description?: React.ReactNode;\n  /** Error message. Replaces the description text and applies error styling when present. */\n  error?: React.ReactNode;\n  /** Size variant of the input field. Defaults to 'md'. */\n  inputSize?: 'sm' | 'md' | 'lg';\n  /** An icon element rendered on the left side (leading edge) inside the input. */\n  leftIcon?: React.ReactNode;\n  /** An icon element rendered on the right side (trailing edge) inside the input. */\n  rightIcon?: React.ReactNode;\n  /** Custom CSS class applied to the outermost wrapper element. */\n  wrapperClassName?: string;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Component                                                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Input Component\n * * A fundamental form element for capturing user data.\n * * Automatically generates stable IDs for strict WAI-ARIA compliance, \n * linking the input to its label, description, and error messages.\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      description,\n      error,\n      inputSize = 'md',\n      leftIcon,\n      rightIcon,\n      className,\n      wrapperClassName,\n      id,\n      required,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    // Stable ID generation for WAI-ARIA linkage\n    const reactId = useId();\n    const inputId = id ?? reactId;\n    const errorId = `${inputId}-error`;\n    const descriptionId = `${inputId}-description`;\n\n    // ARIA connections: Error takes precedence over description\n    const describedBy = error ? errorId : description ? descriptionId : undefined;\n\n    return (\n      <div className={cn(\"nui-input-wrapper\", wrapperClassName)}>\n        \n        {/* LABEL */}\n        {label && (\n          <label \n            htmlFor={inputId} \n            className={cn(\"nui-input__label\", disabled && \"nui-input__label--disabled\")}\n          >\n            {label}\n            {required && <span className=\"nui-input__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        {/* INPUT CONTAINER (For Icon Positioning) */}\n        <div className=\"nui-input__container\">\n          {leftIcon && <span className=\"nui-input__icon -left\">{leftIcon}</span>}\n          \n          <input\n            ref={ref}\n            id={inputId}\n            required={required}\n            disabled={disabled}\n            className={cn(\n              \"nui-input\",\n              `nui-input--${inputSize}`,\n              !!error && \"nui-input--error\",\n              !!leftIcon && \"nui-input--has-left\",\n              !!rightIcon && \"nui-input--has-right\",\n              className\n            )}\n            aria-invalid={!!error}\n            aria-describedby={describedBy}\n            {...props}\n          />\n\n          {rightIcon && <span className=\"nui-input__icon -right\">{rightIcon}</span>}\n        </div>\n\n        {/* DESCRIPTION */}\n        {description && !error && (\n          <div id={descriptionId} className=\"nui-input__description\">\n            {description}\n          </div>\n        )}\n\n        {/* ERROR MESSAGE */}\n        {error && (\n          <div id={errorId} className=\"nui-input__error\" aria-live=\"polite\">\n            {error}\n          </div>\n        )}\n        \n      </div>\n    );\n  }\n);\n\nInput.displayName = 'Input';"],"names":["Input","forwardRef","label","description","error","inputSize","leftIcon","rightIcon","className","wrapperClassName","id","required","disabled","props","ref","reactId","useId","inputId","errorId","descriptionId","describedBy","cn","jsxs","jsx"],"mappings":"4MAqCaA,EAAQC,EAAAA,WACnB,CACE,CACE,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,KACZ,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,iBAAAC,EACA,GAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IACG,CAEH,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAUP,GAAMK,EAChBG,EAAU,GAAGD,CAAO,SACpBE,EAAgB,GAAGF,CAAO,eAG1BG,EAAchB,EAAQc,EAAUf,EAAcgB,EAAgB,OAEpE,cACG,MAAA,CAAI,UAAWE,EAAAA,GAAG,oBAAqBZ,CAAgB,EAGrD,SAAA,CAAAP,GACCoB,EAAAA,KAAC,QAAA,CACC,QAASL,EACT,UAAWI,EAAAA,GAAG,mBAAoBT,GAAY,4BAA4B,EAEzE,SAAA,CAAAV,EACAS,GAAYY,EAAAA,IAAC,OAAA,CAAK,UAAU,sBAAsB,cAAY,OAAO,SAAA,IAAA,CAAE,CAAA,CAAA,CAAA,EAK5ED,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACZ,SAAA,CAAAhB,GAAYiB,EAAAA,IAAC,OAAA,CAAK,UAAU,wBAAyB,SAAAjB,EAAS,EAE/DiB,EAAAA,IAAC,QAAA,CACC,IAAAT,EACA,GAAIG,EACJ,SAAAN,EACA,SAAAC,EACA,UAAWS,EAAAA,GACT,YACA,cAAchB,CAAS,GACvB,CAAC,CAACD,GAAS,mBACX,CAAC,CAACE,GAAY,sBACd,CAAC,CAACC,GAAa,uBACfC,CAAA,EAEF,eAAc,CAAC,CAACJ,EAChB,mBAAkBgB,EACjB,GAAGP,CAAA,CAAA,EAGLN,GAAagB,EAAAA,IAAC,OAAA,CAAK,UAAU,yBAA0B,SAAAhB,CAAA,CAAU,CAAA,EACpE,EAGCJ,GAAe,CAACC,GACfmB,EAAAA,IAAC,OAAI,GAAIJ,EAAe,UAAU,yBAC/B,SAAAhB,CAAA,CACH,EAIDC,SACE,MAAA,CAAI,GAAIc,EAAS,UAAU,mBAAmB,YAAU,SACtD,SAAAd,CAAA,CACH,CAAA,EAGJ,CAEJ,CACF,EAEAJ,EAAM,YAAc"}

package/dist/components/input/Input.js

@@ -1,41 +1,66 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import m from "react";
+import { jsxs as u, jsx as n } from "react/jsx-runtime";
+import { forwardRef as y, useId as I } from "react";
 /* empty css          */
-function N({
-  label: d,
-  description: t,
-  error: i,
-  inputSize: u = "md",
-  className: r = "",
-  id: c,
-  ...s
-}) {
-  const l = m.useId(), n = c ?? l, p = i ? `${n}-error` : t ? `${n}-description` : void 0;
-  return /* @__PURE__ */ a("div", { className: `ui-input-wrapper ${r}`, children: [
-    d && /* @__PURE__ */ a("label", { htmlFor: n, className: "ui-input-label", children: [
-      d,
-      s.required && " *"
-    ] }),
-    /* @__PURE__ */ e(
-      "input",
-      {
-        id: n,
-        className: [
-          "ui-input",
-          u === "sm" && "ui-input--sm",
-          u === "lg" && "ui-input--lg",
-          i && "ui-input--error"
-        ].filter(Boolean).join(" "),
-        "aria-invalid": !!i,
-        "aria-describedby": p,
-        ...s
-      }
-    ),
-    t && !i && /* @__PURE__ */ e("div", { id: `${n}-description`, className: "ui-input-description", children: t }),
-    i && /* @__PURE__ */ e("div", { id: `${n}-error`, className: "ui-input-error", children: i })
-  ] });
-}
+import { cn as d } from "../../utils/cn/cn.js";
+const $ = y(
+  ({
+    label: p,
+    description: s,
+    error: i,
+    inputSize: o = "md",
+    leftIcon: t,
+    rightIcon: e,
+    className: _,
+    wrapperClassName: h,
+    id: N,
+    required: r,
+    disabled: c,
+    ...v
+  }, b) => {
+    const f = I(), a = N ?? f, l = `${a}-error`, m = `${a}-description`, x = i ? l : s ? m : void 0;
+    return /* @__PURE__ */ u("div", { className: d("nui-input-wrapper", h), children: [
+      p && /* @__PURE__ */ u(
+        "label",
+        {
+          htmlFor: a,
+          className: d("nui-input__label", c && "nui-input__label--disabled"),
+          children: [
+            p,
+            r && /* @__PURE__ */ n("span", { className: "nui-input__required", "aria-hidden": "true", children: " *" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ u("div", { className: "nui-input__container", children: [
+        t && /* @__PURE__ */ n("span", { className: "nui-input__icon -left", children: t }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: b,
+            id: a,
+            required: r,
+            disabled: c,
+            className: d(
+              "nui-input",
+              `nui-input--${o}`,
+              !!i && "nui-input--error",
+              !!t && "nui-input--has-left",
+              !!e && "nui-input--has-right",
+              _
+            ),
+            "aria-invalid": !!i,
+            "aria-describedby": x,
+            ...v
+          }
+        ),
+        e && /* @__PURE__ */ n("span", { className: "nui-input__icon -right", children: e })
+      ] }),
+      s && !i && /* @__PURE__ */ n("div", { id: m, className: "nui-input__description", children: s }),
+      i && /* @__PURE__ */ n("div", { id: l, className: "nui-input__error", "aria-live": "polite", children: i })
+    ] });
+  }
+);
+$.displayName = "Input";
 export {
-  N as Input
+  $ as Input
 };
 //# sourceMappingURL=Input.js.map

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["/**\r\n * Input.tsx\r\n * ---------\r\n * Single-component fully accessible input field.\r\n * Includes:\r\n * - label\r\n * - description\r\n * - error message\r\n * - size variants\r\n * - required + disabled states\r\n * - WCAG-compliant focus handling\r\n */\r\n\r\nimport React from 'react';\r\nimport './Input.css';\r\n\r\nexport interface InputProps\r\n  extends React.InputHTMLAttributes<HTMLInputElement> {\r\n  /** Label for the input */\r\n  label?: string;\r\n\r\n  /** Helper text */\r\n  description?: string;\r\n\r\n  /** Error message */\r\n  error?: string;\r\n\r\n  /** Size variant (avoid HTML size conflict) */\r\n  inputSize?: 'sm' | 'md' | 'lg';\r\n\r\n  /** Custom wrapper class */\r\n  className?: string;\r\n}\r\n\r\nexport function Input({\r\n  label,\r\n  description,\r\n  error,\r\n  inputSize = 'md',\r\n  className = '',\r\n  id,\r\n  ...props\r\n}: InputProps) {\r\n  // Always call hook\r\n  const reactId = React.useId();\r\n\r\n  // Final ID (prop overrides auto)\r\n  const inputId = id ?? reactId;\r\n\r\n  const describedBy = error\r\n    ? `${inputId}-error`\r\n    : description\r\n    ? `${inputId}-description`\r\n    : undefined;\r\n\r\n  return (\r\n    <div className={`ui-input-wrapper ${className}`}>\r\n      {label && (\r\n        <label htmlFor={inputId} className=\"ui-input-label\">\r\n          {label}\r\n          {props.required && ' *'}\r\n        </label>\r\n      )}\r\n\r\n      <input\r\n        id={inputId}\r\n        className={[\r\n          'ui-input',\r\n          inputSize === 'sm' && 'ui-input--sm',\r\n          inputSize === 'lg' && 'ui-input--lg',\r\n          error && 'ui-input--error',\r\n        ]\r\n          .filter(Boolean)\r\n          .join(' ')}\r\n        aria-invalid={!!error}\r\n        aria-describedby={describedBy}\r\n        {...props}\r\n      />\r\n\r\n      {/* Description (only when not error) */}\r\n      {description && !error && (\r\n        <div id={`${inputId}-description`} className=\"ui-input-description\">\r\n          {description}\r\n        </div>\r\n      )}\r\n\r\n      {/* Error message */}\r\n      {error && (\r\n        <div id={`${inputId}-error`} className=\"ui-input-error\">\r\n          {error}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Input","label","description","error","inputSize","className","id","props","reactId","React","inputId","describedBy","jsxs","jsx"],"mappings":";;;AAkCO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,IAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AAEb,QAAMC,IAAUC,EAAM,MAAA,GAGhBC,IAAUJ,KAAME,GAEhBG,IAAcR,IAChB,GAAGO,CAAO,WACVR,IACA,GAAGQ,CAAO,iBACV;AAEJ,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAW,oBAAoBP,CAAS,IAC1C,UAAA;AAAA,IAAAJ,KACC,gBAAAW,EAAC,SAAA,EAAM,SAASF,GAAS,WAAU,kBAChC,UAAA;AAAA,MAAAT;AAAA,MACAM,EAAM,YAAY;AAAA,IAAA,GACrB;AAAA,IAGF,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIH;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACAN,MAAc,QAAQ;AAAA,UACtBA,MAAc,QAAQ;AAAA,UACtBD,KAAS;AAAA,QAAA,EAER,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,gBAAc,CAAC,CAACA;AAAA,QAChB,oBAAkBQ;AAAA,QACjB,GAAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAILL,KAAe,CAACC,KACf,gBAAAU,EAAC,OAAA,EAAI,IAAI,GAAGH,CAAO,gBAAgB,WAAU,wBAC1C,UAAAR,EAAA,CACH;AAAA,IAIDC,uBACE,OAAA,EAAI,IAAI,GAAGO,CAAO,UAAU,WAAU,kBACpC,UAAAP,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { forwardRef, useId } from 'react';\nimport { cn } from '../../utils';\nimport './Input.css';\n\n/* -------------------------------------------------------------------------- */\n/* Props                                                                      */\n/* -------------------------------------------------------------------------- */\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** The text label associated with the input field. */\n  label?: React.ReactNode;\n  /** Auxiliary text displayed below the input to provide additional context. */\n  description?: React.ReactNode;\n  /** Error message. Replaces the description text and applies error styling when present. */\n  error?: React.ReactNode;\n  /** Size variant of the input field. Defaults to 'md'. */\n  inputSize?: 'sm' | 'md' | 'lg';\n  /** An icon element rendered on the left side (leading edge) inside the input. */\n  leftIcon?: React.ReactNode;\n  /** An icon element rendered on the right side (trailing edge) inside the input. */\n  rightIcon?: React.ReactNode;\n  /** Custom CSS class applied to the outermost wrapper element. */\n  wrapperClassName?: string;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Component                                                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Input Component\n * * A fundamental form element for capturing user data.\n * * Automatically generates stable IDs for strict WAI-ARIA compliance, \n * linking the input to its label, description, and error messages.\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      description,\n      error,\n      inputSize = 'md',\n      leftIcon,\n      rightIcon,\n      className,\n      wrapperClassName,\n      id,\n      required,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    // Stable ID generation for WAI-ARIA linkage\n    const reactId = useId();\n    const inputId = id ?? reactId;\n    const errorId = `${inputId}-error`;\n    const descriptionId = `${inputId}-description`;\n\n    // ARIA connections: Error takes precedence over description\n    const describedBy = error ? errorId : description ? descriptionId : undefined;\n\n    return (\n      <div className={cn(\"nui-input-wrapper\", wrapperClassName)}>\n        \n        {/* LABEL */}\n        {label && (\n          <label \n            htmlFor={inputId} \n            className={cn(\"nui-input__label\", disabled && \"nui-input__label--disabled\")}\n          >\n            {label}\n            {required && <span className=\"nui-input__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        {/* INPUT CONTAINER (For Icon Positioning) */}\n        <div className=\"nui-input__container\">\n          {leftIcon && <span className=\"nui-input__icon -left\">{leftIcon}</span>}\n          \n          <input\n            ref={ref}\n            id={inputId}\n            required={required}\n            disabled={disabled}\n            className={cn(\n              \"nui-input\",\n              `nui-input--${inputSize}`,\n              !!error && \"nui-input--error\",\n              !!leftIcon && \"nui-input--has-left\",\n              !!rightIcon && \"nui-input--has-right\",\n              className\n            )}\n            aria-invalid={!!error}\n            aria-describedby={describedBy}\n            {...props}\n          />\n\n          {rightIcon && <span className=\"nui-input__icon -right\">{rightIcon}</span>}\n        </div>\n\n        {/* DESCRIPTION */}\n        {description && !error && (\n          <div id={descriptionId} className=\"nui-input__description\">\n            {description}\n          </div>\n        )}\n\n        {/* ERROR MESSAGE */}\n        {error && (\n          <div id={errorId} className=\"nui-input__error\" aria-live=\"polite\">\n            {error}\n          </div>\n        )}\n        \n      </div>\n    );\n  }\n);\n\nInput.displayName = 'Input';"],"names":["Input","forwardRef","label","description","error","inputSize","leftIcon","rightIcon","className","wrapperClassName","id","required","disabled","props","ref","reactId","useId","inputId","errorId","descriptionId","describedBy","cn","jsxs","jsx"],"mappings":";;;;AAqCO,MAAMA,IAAQC;AAAA,EACnB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAEH,UAAMC,IAAUC,EAAA,GACVC,IAAUP,KAAMK,GAChBG,IAAU,GAAGD,CAAO,UACpBE,IAAgB,GAAGF,CAAO,gBAG1BG,IAAchB,IAAQc,IAAUf,IAAcgB,IAAgB;AAEpE,6BACG,OAAA,EAAI,WAAWE,EAAG,qBAAqBZ,CAAgB,GAGrD,UAAA;AAAA,MAAAP,KACC,gBAAAoB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASL;AAAA,UACT,WAAWI,EAAG,oBAAoBT,KAAY,4BAA4B;AAAA,UAEzE,UAAA;AAAA,YAAAV;AAAA,YACAS,KAAY,gBAAAY,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAAO,UAAA,KAAA,CAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAK5E,gBAAAD,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,QAAAhB,KAAY,gBAAAiB,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAjB,GAAS;AAAA,QAE/D,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAT;AAAA,YACA,IAAIG;AAAA,YACJ,UAAAN;AAAA,YACA,UAAAC;AAAA,YACA,WAAWS;AAAA,cACT;AAAA,cACA,cAAchB,CAAS;AAAA,cACvB,CAAC,CAACD,KAAS;AAAA,cACX,CAAC,CAACE,KAAY;AAAA,cACd,CAAC,CAACC,KAAa;AAAA,cACfC;AAAA,YAAA;AAAA,YAEF,gBAAc,CAAC,CAACJ;AAAA,YAChB,oBAAkBgB;AAAA,YACjB,GAAGP;AAAA,UAAA;AAAA,QAAA;AAAA,QAGLN,KAAa,gBAAAgB,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAhB,EAAA,CAAU;AAAA,MAAA,GACpE;AAAA,MAGCJ,KAAe,CAACC,KACf,gBAAAmB,EAAC,SAAI,IAAIJ,GAAe,WAAU,0BAC/B,UAAAhB,EAAA,CACH;AAAA,MAIDC,uBACE,OAAA,EAAI,IAAIc,GAAS,WAAU,oBAAmB,aAAU,UACtD,UAAAd,EAAA,CACH;AAAA,IAAA,GAGJ;AAAA,EAEJ;AACF;AAEAJ,EAAM,cAAc;"}

package/dist/components/layout/Container.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o={sm:"640px",md:"768px",lg:"1024px",xl:"1280px",full:"100%"};function s({size:t="lg",style:e,children:i,...n}){return r.jsx("div",{style:{width:"100%",maxWidth:o[t],margin:"0 auto",padding:"0 16px",...e},...n,children:i})}exports.Container=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("react");;/* empty css             */const c=require("../../utils/cn/cn.cjs"),e=s.forwardRef(({size:r="lg",className:n,children:t,...i},a)=>o.jsx("div",{ref:a,className:c.cn("nui-container",n),"data-size":r,...i,children:t}));e.displayName="Container";exports.Container=e;
 //# sourceMappingURL=Container.cjs.map

package/dist/components/layout/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../src/components/layout/Container.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ninterface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst sizes: Record<Required<ContainerProps>['size'], string> = {\r\n  sm: '640px',\r\n  md: '768px',\r\n  lg: '1024px',\r\n  xl: '1280px',\r\n  full: '100%',\r\n};\r\n\r\nexport function Container({\r\n  size = 'lg',\r\n  style,\r\n  children,\r\n  ...rest\r\n}: ContainerProps) {\r\n  return (\r\n    <div\r\n      style={{\r\n        width: '100%',\r\n        maxWidth: sizes[size],\r\n        margin: '0 auto',\r\n        padding: '0 16px',\r\n        ...style,\r\n      }}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["sizes","Container","size","style","children","rest","jsx"],"mappings":"qHAOMA,EAA0D,CAC9D,GAAI,QACJ,GAAI,QACJ,GAAI,SACJ,GAAI,SACJ,KAAM,MACR,EAEO,SAASC,EAAU,CACxB,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAmB,CACjB,OACEC,EAAAA,IAAC,MAAA,CACC,MAAO,CACL,MAAO,OACP,SAAUN,EAAME,CAAI,EACpB,OAAQ,SACR,QAAS,SACT,GAAGC,CAAA,EAEJ,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGP"}
+{"version":3,"file":"Container.cjs","sources":["../../../src/components/layout/Container.tsx"],"sourcesContent":["/* src/components/layout/Container.tsx */\nimport React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Layout.css';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The maximum width bounds for the container. Defaults to 'lg'. */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\n/**\n * Container Component\n * * A structural primitive used to constrain content width to the current breakpoint.\n * * Centers content horizontally and provides standard gutter padding.\n */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(({\n  size = 'lg',\n  className,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"nui-container\", className)}\n      data-size={size}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nContainer.displayName = 'Container';"],"names":["Container","forwardRef","size","className","children","props","ref","jsx","cn"],"mappings":"6MAeaA,EAAYC,EAAAA,WAA2C,CAAC,CACnE,KAAAC,EAAO,KACP,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAGC,IAECC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,gBAAiBL,CAAS,EACxC,YAAWD,EACV,GAAGG,EAEH,SAAAD,CAAA,CAAA,CAGN,EAEDJ,EAAU,YAAc"}

package/dist/components/layout/Container.js

@@ -1,33 +1,24 @@
-import { jsx as p } from "react/jsx-runtime";
-const o = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  full: "100%"
-};
-function d({
-  size: t = "lg",
-  style: i,
-  children: x,
-  ...n
-}) {
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      style: {
-        width: "100%",
-        maxWidth: o[t],
-        margin: "0 auto",
-        padding: "0 16px",
-        ...i
-      },
-      ...n,
-      children: x
-    }
-  );
-}
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+/* empty css           */
+import { cn as m } from "../../utils/cn/cn.js";
+const p = e(({
+  size: r = "lg",
+  className: o,
+  children: i,
+  ...t
+}, a) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    className: m("nui-container", o),
+    "data-size": r,
+    ...t,
+    children: i
+  }
+));
+p.displayName = "Container";
 export {
-  d as Container
+  p as Container
 };
 //# sourceMappingURL=Container.js.map

package/dist/components/layout/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../src/components/layout/Container.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ninterface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst sizes: Record<Required<ContainerProps>['size'], string> = {\r\n  sm: '640px',\r\n  md: '768px',\r\n  lg: '1024px',\r\n  xl: '1280px',\r\n  full: '100%',\r\n};\r\n\r\nexport function Container({\r\n  size = 'lg',\r\n  style,\r\n  children,\r\n  ...rest\r\n}: ContainerProps) {\r\n  return (\r\n    <div\r\n      style={{\r\n        width: '100%',\r\n        maxWidth: sizes[size],\r\n        margin: '0 auto',\r\n        padding: '0 16px',\r\n        ...style,\r\n      }}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["sizes","Container","size","style","children","rest","jsx"],"mappings":";AAOA,MAAMA,IAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,SAASC,EAAU;AAAA,EACxB,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,OAAO;AAAA,QACP,UAAUN,EAAME,CAAI;AAAA,QACpB,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,GAAGC;AAAA,MAAA;AAAA,MAEJ,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Container.js","sources":["../../../src/components/layout/Container.tsx"],"sourcesContent":["/* src/components/layout/Container.tsx */\nimport React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Layout.css';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The maximum width bounds for the container. Defaults to 'lg'. */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\n/**\n * Container Component\n * * A structural primitive used to constrain content width to the current breakpoint.\n * * Centers content horizontally and provides standard gutter padding.\n */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(({\n  size = 'lg',\n  className,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"nui-container\", className)}\n      data-size={size}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nContainer.displayName = 'Container';"],"names":["Container","forwardRef","size","className","children","props","ref","jsx","cn"],"mappings":";;;;AAeO,MAAMA,IAAYC,EAA2C,CAAC;AAAA,EACnE,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAGC,MAEC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iBAAiBL,CAAS;AAAA,IACxC,aAAWD;AAAA,IACV,GAAGG;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,CAGN;AAEDJ,EAAU,cAAc;"}

package/dist/components/layout/Flex.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");function u({direction:t="row",align:n="stretch",justify:e="start",wrap:r="nowrap",gap:s=0,style:o,children:l,...a}){const c={display:"flex",flexDirection:t,alignItems:n,justifyContent:e==="between"?"space-between":e==="around"?"space-around":e==="evenly"?"space-evenly":e,flexWrap:r,gap:s,...o};return i.jsx("div",{style:c,...a,children:l})}exports.Flex=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),i=require("react");;/* empty css             */const y=require("../../utils/cn/cn.cjs"),a=i.forwardRef(({direction:e="row",align:t="stretch",justify:s="start",wrap:d="nowrap",gap:r=0,className:l,style:u,children:f,...x},m)=>c.jsx("div",{ref:m,className:y.cn("nui-flex",l),"data-direction":e,"data-align":t,"data-justify":s,"data-wrap":d,style:{"--nui-flex-gap":typeof r=="number"?`${r}px`:r,...u},...x,children:f}));a.displayName="Flex";const n=i.forwardRef((e,t)=>c.jsx(a,{ref:t,direction:"column",...e}));n.displayName="Stack";const o=i.forwardRef((e,t)=>c.jsx(a,{ref:t,direction:"row",align:"center",...e}));o.displayName="HStack";exports.Flex=a;exports.HStack=o;exports.Stack=n;
 //# sourceMappingURL=Flex.cjs.map

package/dist/components/layout/Flex.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.cjs","sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\r\n\r\ntype Align = 'start' | 'center' | 'end' | 'stretch';\r\n\r\ninterface FlexProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  direction?: 'row' | 'column';\r\n  align?: Align;\r\n  justify?: Justify;\r\n  wrap?: 'wrap' | 'nowrap';\r\n  gap?: number | string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport function Flex({\r\n  direction = 'row',\r\n  align = 'stretch',\r\n  justify = 'start',\r\n  wrap = 'nowrap',\r\n  gap = 0,\r\n  style,\r\n  children,\r\n  ...rest\r\n}: FlexProps) {\r\n  const justifyContent =\r\n    justify === 'between'\r\n      ? 'space-between'\r\n      : justify === 'around'\r\n      ? 'space-around'\r\n      : justify === 'evenly'\r\n      ? 'space-evenly'\r\n      : justify;\r\n\r\n  const styles: React.CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: direction,\r\n    alignItems: align,\r\n    justifyContent,\r\n    flexWrap: wrap,\r\n    gap,\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div style={styles} {...rest}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Flex","direction","align","justify","wrap","gap","style","children","rest","styles"],"mappings":"qHAeO,SAASA,EAAK,CACnB,UAAAC,EAAY,MACZ,MAAAC,EAAQ,UACR,QAAAC,EAAU,QACV,KAAAC,EAAO,SACP,IAAAC,EAAM,EACN,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAc,CAUZ,MAAMC,EAA8B,CAClC,QAAS,OACT,cAAeR,EACf,WAAYC,EACZ,eAZAC,IAAY,UACR,gBACAA,IAAY,SACZ,eACAA,IAAY,SACZ,eACAA,EAOJ,SAAUC,EACV,IAAAC,EACA,GAAGC,CAAA,EAGL,aACG,MAAA,CAAI,MAAOG,EAAS,GAAGD,EACrB,SAAAD,EACH,CAEJ"}
+{"version":3,"file":"Flex.cjs","sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["/* src/components/layout/Flex.tsx */\nimport React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Layout.css';\n\nexport interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Defines the flex-direction. Defaults to 'row'. */\n  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  /** Defines the align-items cross-axis behavior. Defaults to 'stretch'. */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** Defines the justify-content main-axis behavior. Defaults to 'start'. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Defines the flex-wrap behavior. Defaults to 'nowrap'. */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** The gap between flex items. Accepts numbers (px) or valid CSS strings. Defaults to 0. */\n  gap?: number | string;\n}\n\n/**\n * Flex Component\n * * A highly configurable Flexbox container.\n * * Uses data-attributes for standard flex properties and inline CSS variables \n * to securely pass dynamic values (like gap) to the stylesheet without recalculating classes.\n */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(({\n  direction = 'row',\n  align = 'stretch',\n  justify = 'start',\n  wrap = 'nowrap',\n  gap = 0,\n  className,\n  style,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"nui-flex\", className)}\n      data-direction={direction}\n      data-align={align}\n      data-justify={justify}\n      data-wrap={wrap}\n      style={{\n        // We only use an inline style for the exact dynamic gap value\n        '--nui-flex-gap': typeof gap === 'number' ? `${gap}px` : gap,\n        ...style,\n      } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nFlex.displayName = 'Flex';\n\n/* -----------------------------------------------------------------\n * Syntactic Sugar Layouts\n * ----------------------------------------------------------------- */\n\n/**\n * Stack Component\n * * Syntactic sugar for a vertical Flex container.\n */\nexport const Stack = forwardRef<HTMLDivElement, Omit<FlexProps, 'direction'>>((props, ref) => (\n  <Flex ref={ref} direction=\"column\" {...props} />\n));\nStack.displayName = 'Stack';\n\n/**\n * HStack Component\n * * Syntactic sugar for a horizontal Flex container with vertically centered items.\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<FlexProps, 'direction'>>((props, ref) => (\n  <Flex ref={ref} direction=\"row\" align=\"center\" {...props} />\n));\nHStack.displayName = 'HStack';"],"names":["Flex","forwardRef","direction","align","justify","wrap","gap","className","style","children","props","ref","jsx","cn","Stack","HStack"],"mappings":"6MAwBaA,EAAOC,EAAAA,WAAsC,CAAC,CACzD,UAAAC,EAAY,MACZ,MAAAC,EAAQ,UACR,QAAAC,EAAU,QACV,KAAAC,EAAO,SACP,IAAAC,EAAM,EACN,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAGC,IAECC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,WAAYN,CAAS,EACnC,iBAAgBL,EAChB,aAAYC,EACZ,eAAcC,EACd,YAAWC,EACX,MAAO,CAEL,iBAAkB,OAAOC,GAAQ,SAAW,GAAGA,CAAG,KAAOA,EACzD,GAAGE,CAAA,EAEJ,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGN,EAEDT,EAAK,YAAc,OAUZ,MAAMc,EAAQb,EAAAA,WAAyD,CAACS,EAAOC,IACpFC,EAAAA,IAACZ,EAAA,CAAK,IAAAW,EAAU,UAAU,SAAU,GAAGD,CAAA,CAAO,CAC/C,EACDI,EAAM,YAAc,QAMb,MAAMC,EAASd,EAAAA,WAAyD,CAACS,EAAOC,IACrFC,EAAAA,IAACZ,EAAA,CAAK,IAAAW,EAAU,UAAU,MAAM,MAAM,SAAU,GAAGD,EAAO,CAC3D,EACDK,EAAO,YAAc"}

package/dist/components/layout/Flex.js

@@ -1,26 +1,43 @@
-import { jsx as p } from "react/jsx-runtime";
-function d({
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+/* empty css           */
+import { cn as f } from "../../utils/cn/cn.js";
+const i = o(({
   direction: t = "row",
-  align: n = "stretch",
-  justify: e = "start",
-  wrap: o = "nowrap",
+  align: a = "stretch",
+  justify: n = "start",
+  wrap: c = "nowrap",
   gap: r = 0,
+  className: m,
   style: s,
-  children: a,
+  children: d,
   ...l
-}) {
-  const c = {
-    display: "flex",
-    flexDirection: t,
-    alignItems: n,
-    justifyContent: e === "between" ? "space-between" : e === "around" ? "space-around" : e === "evenly" ? "space-evenly" : e,
-    flexWrap: o,
-    gap: r,
-    ...s
-  };
-  return /* @__PURE__ */ p("div", { style: c, ...l, children: a });
-}
+}, p) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: p,
+    className: f("nui-flex", m),
+    "data-direction": t,
+    "data-align": a,
+    "data-justify": n,
+    "data-wrap": c,
+    style: {
+      // We only use an inline style for the exact dynamic gap value
+      "--nui-flex-gap": typeof r == "number" ? `${r}px` : r,
+      ...s
+    },
+    ...l,
+    children: d
+  }
+));
+i.displayName = "Flex";
+const x = o((t, a) => /* @__PURE__ */ e(i, { ref: a, direction: "column", ...t }));
+x.displayName = "Stack";
+const u = o((t, a) => /* @__PURE__ */ e(i, { ref: a, direction: "row", align: "center", ...t }));
+u.displayName = "HStack";
 export {
-  d as Flex
+  i as Flex,
+  u as HStack,
+  x as Stack
 };
 //# sourceMappingURL=Flex.js.map

package/dist/components/layout/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\r\n\r\ntype Align = 'start' | 'center' | 'end' | 'stretch';\r\n\r\ninterface FlexProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  direction?: 'row' | 'column';\r\n  align?: Align;\r\n  justify?: Justify;\r\n  wrap?: 'wrap' | 'nowrap';\r\n  gap?: number | string;\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport function Flex({\r\n  direction = 'row',\r\n  align = 'stretch',\r\n  justify = 'start',\r\n  wrap = 'nowrap',\r\n  gap = 0,\r\n  style,\r\n  children,\r\n  ...rest\r\n}: FlexProps) {\r\n  const justifyContent =\r\n    justify === 'between'\r\n      ? 'space-between'\r\n      : justify === 'around'\r\n      ? 'space-around'\r\n      : justify === 'evenly'\r\n      ? 'space-evenly'\r\n      : justify;\r\n\r\n  const styles: React.CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: direction,\r\n    alignItems: align,\r\n    justifyContent,\r\n    flexWrap: wrap,\r\n    gap,\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div style={styles} {...rest}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Flex","direction","align","justify","wrap","gap","style","children","rest","styles"],"mappings":";AAeO,SAASA,EAAK;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,KAAAC,IAAM;AAAA,EACN,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AAUZ,QAAMC,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,eAAeR;AAAA,IACf,YAAYC;AAAA,IACZ,gBAZAC,MAAY,YACR,kBACAA,MAAY,WACZ,iBACAA,MAAY,WACZ,iBACAA;AAAA,IAOJ,UAAUC;AAAA,IACV,KAAAC;AAAA,IACA,GAAGC;AAAA,EAAA;AAGL,2BACG,OAAA,EAAI,OAAOG,GAAS,GAAGD,GACrB,UAAAD,GACH;AAEJ;"}
+{"version":3,"file":"Flex.js","sources":["../../../src/components/layout/Flex.tsx"],"sourcesContent":["/* src/components/layout/Flex.tsx */\nimport React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Layout.css';\n\nexport interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Defines the flex-direction. Defaults to 'row'. */\n  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  /** Defines the align-items cross-axis behavior. Defaults to 'stretch'. */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** Defines the justify-content main-axis behavior. Defaults to 'start'. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Defines the flex-wrap behavior. Defaults to 'nowrap'. */\n  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';\n  /** The gap between flex items. Accepts numbers (px) or valid CSS strings. Defaults to 0. */\n  gap?: number | string;\n}\n\n/**\n * Flex Component\n * * A highly configurable Flexbox container.\n * * Uses data-attributes for standard flex properties and inline CSS variables \n * to securely pass dynamic values (like gap) to the stylesheet without recalculating classes.\n */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(({\n  direction = 'row',\n  align = 'stretch',\n  justify = 'start',\n  wrap = 'nowrap',\n  gap = 0,\n  className,\n  style,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"nui-flex\", className)}\n      data-direction={direction}\n      data-align={align}\n      data-justify={justify}\n      data-wrap={wrap}\n      style={{\n        // We only use an inline style for the exact dynamic gap value\n        '--nui-flex-gap': typeof gap === 'number' ? `${gap}px` : gap,\n        ...style,\n      } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nFlex.displayName = 'Flex';\n\n/* -----------------------------------------------------------------\n * Syntactic Sugar Layouts\n * ----------------------------------------------------------------- */\n\n/**\n * Stack Component\n * * Syntactic sugar for a vertical Flex container.\n */\nexport const Stack = forwardRef<HTMLDivElement, Omit<FlexProps, 'direction'>>((props, ref) => (\n  <Flex ref={ref} direction=\"column\" {...props} />\n));\nStack.displayName = 'Stack';\n\n/**\n * HStack Component\n * * Syntactic sugar for a horizontal Flex container with vertically centered items.\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<FlexProps, 'direction'>>((props, ref) => (\n  <Flex ref={ref} direction=\"row\" align=\"center\" {...props} />\n));\nHStack.displayName = 'HStack';"],"names":["Flex","forwardRef","direction","align","justify","wrap","gap","className","style","children","props","ref","jsx","cn","Stack","HStack"],"mappings":";;;;AAwBO,MAAMA,IAAOC,EAAsC,CAAC;AAAA,EACzD,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,KAAAC,IAAM;AAAA,EACN,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAGC,MAEC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,YAAYN,CAAS;AAAA,IACnC,kBAAgBL;AAAA,IAChB,cAAYC;AAAA,IACZ,gBAAcC;AAAA,IACd,aAAWC;AAAA,IACX,OAAO;AAAA;AAAA,MAEL,kBAAkB,OAAOC,KAAQ,WAAW,GAAGA,CAAG,OAAOA;AAAA,MACzD,GAAGE;AAAA,IAAA;AAAA,IAEJ,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,CAGN;AAEDT,EAAK,cAAc;AAUZ,MAAMc,IAAQb,EAAyD,CAACS,GAAOC,MACpF,gBAAAC,EAACZ,GAAA,EAAK,KAAAW,GAAU,WAAU,UAAU,GAAGD,EAAA,CAAO,CAC/C;AACDI,EAAM,cAAc;AAMb,MAAMC,IAASd,EAAyD,CAACS,GAAOC,MACrF,gBAAAC,EAACZ,GAAA,EAAK,KAAAW,GAAU,WAAU,OAAM,OAAM,UAAU,GAAGD,GAAO,CAC3D;AACDK,EAAO,cAAc;"}

package/dist/components/layout/Grid.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime");function p({columns:e="auto-fit",gap:t=16,minColWidth:r="200px",style:i,children:n,...s}){const a=typeof e=="number"?`repeat(${e}, 1fr)`:`repeat(${e}, minmax(${r}, 1fr))`,o={display:"grid",gap:t,gridTemplateColumns:a,...i};return d.jsx("div",{style:o,...s,children:n})}exports.Grid=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("react");;/* empty css             */const f=require("../../utils/cn/cn.cjs"),r=c.forwardRef(({columns:e="auto-fit",gap:i=16,minColWidth:t="250px",className:d,style:n,children:u,...o},s)=>a.jsx("div",{ref:s,className:f.cn("nui-grid",d),"data-cols":typeof e=="number"?"fixed":e,style:{"--nui-grid-gap":typeof i=="number"?`${i}px`:i,"--nui-grid-min-width":t,"--nui-grid-cols-fixed":typeof e=="number"?e:void 0,...n},...o,children:u}));r.displayName="Grid";exports.Grid=r;
 //# sourceMappingURL=Grid.cjs.map

package/dist/components/layout/Grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ninterface GridProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  columns?: number | string; // number = fixed count; \"auto-fit\" = responsive\r\n  gap?: number | string;\r\n  minColWidth?: string; // used when columns = \"auto-fit\"\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport function Grid({\r\n  columns = 'auto-fit',\r\n  gap = 16,\r\n  minColWidth = '200px',\r\n  style,\r\n  children,\r\n  ...rest\r\n}: GridProps) {\r\n  const template =\r\n    typeof columns === 'number'\r\n      ? `repeat(${columns}, 1fr)`\r\n      : `repeat(${columns}, minmax(${minColWidth}, 1fr))`;\r\n\r\n  const styles: React.CSSProperties = {\r\n    display: 'grid',\r\n    gap,\r\n    gridTemplateColumns: template,\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div style={styles} {...rest}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Grid","columns","gap","minColWidth","style","children","rest","template","styles"],"mappings":"qHASO,SAASA,EAAK,CACnB,QAAAC,EAAU,WACV,IAAAC,EAAM,GACN,YAAAC,EAAc,QACd,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAc,CACZ,MAAMC,EACJ,OAAON,GAAY,SACf,UAAUA,CAAO,SACjB,UAAUA,CAAO,YAAYE,CAAW,UAExCK,EAA8B,CAClC,QAAS,OACT,IAAAN,EACA,oBAAqBK,EACrB,GAAGH,CAAA,EAGL,aACG,MAAA,CAAI,MAAOI,EAAS,GAAGF,EACrB,SAAAD,EACH,CAEJ"}
+{"version":3,"file":"Grid.cjs","sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["/* src/components/layout/Grid.tsx */\nimport React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Layout.css';\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of fixed columns, or responsive auto algorithms. Defaults to 'auto-fit'. */\n  columns?: number | 'auto-fit' | 'auto-fill';\n  /** The gap between grid items. Accepts numbers (px) or valid CSS strings. Defaults to 16. */\n  gap?: number | string;\n  /** The minimum width a column can shrink to before wrapping. Used with auto-fit/fill. Defaults to '250px'. */\n  minColWidth?: string;\n}\n\n/**\n * Grid Component\n * * A responsive CSS Grid container.\n * * Passes complex grid math to CSS via targeted variables for high performance.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(({\n  columns = 'auto-fit',\n  gap = 16,\n  minColWidth = '250px',\n  className,\n  style,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"nui-grid\", className)}\n      data-cols={typeof columns === 'number' ? 'fixed' : columns}\n      style={{\n        '--nui-grid-gap': typeof gap === 'number' ? `${gap}px` : gap,\n        '--nui-grid-min-width': minColWidth,\n        '--nui-grid-cols-fixed': typeof columns === 'number' ? columns : undefined,\n        ...style,\n      } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nGrid.displayName = 'Grid';"],"names":["Grid","forwardRef","columns","gap","minColWidth","className","style","children","props","ref","jsx","cn"],"mappings":"6MAmBaA,EAAOC,EAAAA,WAAsC,CAAC,CACzD,QAAAC,EAAU,WACV,IAAAC,EAAM,GACN,YAAAC,EAAc,QACd,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAGC,IAECC,EAAAA,IAAC,MAAA,CACC,IAAAD,EACA,UAAWE,EAAAA,GAAG,WAAYN,CAAS,EACnC,YAAW,OAAOH,GAAY,SAAW,QAAUA,EACnD,MAAO,CACL,iBAAkB,OAAOC,GAAQ,SAAW,GAAGA,CAAG,KAAOA,EACzD,uBAAwBC,EACxB,wBAAyB,OAAOF,GAAY,SAAWA,EAAU,OACjE,GAAGI,CAAA,EAEJ,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGN,EAEDP,EAAK,YAAc"}

package/dist/components/layout/Grid.js

@@ -1,21 +1,33 @@
-import { jsx as m } from "react/jsx-runtime";
-function s({
-  columns: t = "auto-fit",
-  gap: e = 16,
-  minColWidth: r = "200px",
-  style: i,
-  children: p,
-  ...a
-}) {
-  const o = typeof t == "number" ? `repeat(${t}, 1fr)` : `repeat(${t}, minmax(${r}, 1fr))`, f = {
-    display: "grid",
-    gap: e,
-    gridTemplateColumns: o,
-    ...i
-  };
-  return /* @__PURE__ */ m("div", { style: f, ...a, children: p });
-}
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+/* empty css           */
+import { cn as a } from "../../utils/cn/cn.js";
+const u = n(({
+  columns: i = "auto-fit",
+  gap: r = 16,
+  minColWidth: t = "250px",
+  className: d,
+  style: e,
+  children: o,
+  ...f
+}, m) => /* @__PURE__ */ p(
+  "div",
+  {
+    ref: m,
+    className: a("nui-grid", d),
+    "data-cols": typeof i == "number" ? "fixed" : i,
+    style: {
+      "--nui-grid-gap": typeof r == "number" ? `${r}px` : r,
+      "--nui-grid-min-width": t,
+      "--nui-grid-cols-fixed": typeof i == "number" ? i : void 0,
+      ...e
+    },
+    ...f,
+    children: o
+  }
+));
+u.displayName = "Grid";
 export {
-  s as Grid
+  u as Grid
 };
 //# sourceMappingURL=Grid.js.map

package/dist/components/layout/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["import React from 'react';\r\n\r\ninterface GridProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  columns?: number | string; // number = fixed count; \"auto-fit\" = responsive\r\n  gap?: number | string;\r\n  minColWidth?: string; // used when columns = \"auto-fit\"\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport function Grid({\r\n  columns = 'auto-fit',\r\n  gap = 16,\r\n  minColWidth = '200px',\r\n  style,\r\n  children,\r\n  ...rest\r\n}: GridProps) {\r\n  const template =\r\n    typeof columns === 'number'\r\n      ? `repeat(${columns}, 1fr)`\r\n      : `repeat(${columns}, minmax(${minColWidth}, 1fr))`;\r\n\r\n  const styles: React.CSSProperties = {\r\n    display: 'grid',\r\n    gap,\r\n    gridTemplateColumns: template,\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div style={styles} {...rest}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Grid","columns","gap","minColWidth","style","children","rest","template","styles"],"mappings":";AASO,SAASA,EAAK;AAAA,EACnB,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AACZ,QAAMC,IACJ,OAAON,KAAY,WACf,UAAUA,CAAO,WACjB,UAAUA,CAAO,YAAYE,CAAW,WAExCK,IAA8B;AAAA,IAClC,SAAS;AAAA,IACT,KAAAN;AAAA,IACA,qBAAqBK;AAAA,IACrB,GAAGH;AAAA,EAAA;AAGL,2BACG,OAAA,EAAI,OAAOI,GAAS,GAAGF,GACrB,UAAAD,GACH;AAEJ;"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/layout/Grid.tsx"],"sourcesContent":["/* src/components/layout/Grid.tsx */\nimport React, { forwardRef } from 'react';\nimport { cn } from '../../utils';\nimport './Layout.css';\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of fixed columns, or responsive auto algorithms. Defaults to 'auto-fit'. */\n  columns?: number | 'auto-fit' | 'auto-fill';\n  /** The gap between grid items. Accepts numbers (px) or valid CSS strings. Defaults to 16. */\n  gap?: number | string;\n  /** The minimum width a column can shrink to before wrapping. Used with auto-fit/fill. Defaults to '250px'. */\n  minColWidth?: string;\n}\n\n/**\n * Grid Component\n * * A responsive CSS Grid container.\n * * Passes complex grid math to CSS via targeted variables for high performance.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(({\n  columns = 'auto-fit',\n  gap = 16,\n  minColWidth = '250px',\n  className,\n  style,\n  children,\n  ...props\n}, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"nui-grid\", className)}\n      data-cols={typeof columns === 'number' ? 'fixed' : columns}\n      style={{\n        '--nui-grid-gap': typeof gap === 'number' ? `${gap}px` : gap,\n        '--nui-grid-min-width': minColWidth,\n        '--nui-grid-cols-fixed': typeof columns === 'number' ? columns : undefined,\n        ...style,\n      } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nGrid.displayName = 'Grid';"],"names":["Grid","forwardRef","columns","gap","minColWidth","className","style","children","props","ref","jsx","cn"],"mappings":";;;;AAmBO,MAAMA,IAAOC,EAAsC,CAAC;AAAA,EACzD,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAGC,MAEC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,YAAYN,CAAS;AAAA,IACnC,aAAW,OAAOH,KAAY,WAAW,UAAUA;AAAA,IACnD,OAAO;AAAA,MACL,kBAAkB,OAAOC,KAAQ,WAAW,GAAGA,CAAG,OAAOA;AAAA,MACzD,wBAAwBC;AAAA,MACxB,yBAAyB,OAAOF,KAAY,WAAWA,IAAU;AAAA,MACjE,GAAGI;AAAA,IAAA;AAAA,IAEJ,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,CAGN;AAEDP,EAAK,cAAc;"}

package/dist/components/link/Link.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),k=require("react");;/* empty css           */const d=require("../../utils/slot/slot.cjs"),m=require("../../utils/cn/cn.cjs"),e=k.forwardRef(({className:n,variant:r="default",underline:t="hover",isExternal:i=!1,asChild:o=!1,children:s,...l},a)=>{const u=i?{target:"_blank",rel:"noopener noreferrer"}:{},c=o?d.Slot:"a";return f.jsx(c,{ref:a,className:m.cn("nui-link",`nui-link--${r}`,`nui-link--underline-${t}`,n),...u,...l,children:s})});e.displayName="Link";exports.Link=e;
+//# sourceMappingURL=Link.cjs.map

package/dist/components/link/Link.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.cjs","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { cn, Slot } from '../../utils';\nimport './Link.css';\n\nexport type LinkVariant = 'default' | 'primary' | 'muted' | 'danger';\nexport type LinkUnderline = 'none' | 'hover' | 'always';\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  variant?: LinkVariant;\n  underline?: LinkUnderline;\n  /** Automatically applies `target=\"_blank\"` and `rel=\"noopener noreferrer\"` for external routing security. */\n  isExternal?: boolean;\n  /** * Polymorphic Prop: When true, delegates rendering to its child.\n   * Crucial for integrating with framework routers like Next.js `<Link>` or React Router.\n   */\n  asChild?: boolean;\n}\n\n/**\n * Link Component\n * --------------\n * Typographical navigation element designed to blend seamlessly into paragraphs, lists, and breadcrumbs.\n * Architecture Note: For functional Call-to-Action links that require button-like padding and backgrounds, \n * use the `<Button asChild>` component instead.\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ \n    className, \n    variant = 'default', \n    underline = 'hover',\n    isExternal = false,\n    asChild = false,\n    children, \n    ...props \n  }, ref) => {\n    \n    // Auto-apply security attributes for external navigation to prevent tabnabbing attacks\n    const externalProps = isExternal ? {\n      target: \"_blank\",\n      rel: \"noopener noreferrer\"\n    } : {};\n\n    // Determine the root node. If asChild is true, use our zero-dependency Slot to merge props onto the child.\n    const Comp = asChild ? Slot : \"a\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"nui-link\",\n          `nui-link--${variant}`,\n          `nui-link--underline-${underline}`,\n          className\n        )}\n        {...externalProps}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nLink.displayName = \"Link\";"],"names":["Link","React","className","variant","underline","isExternal","asChild","children","props","ref","externalProps","Comp","Slot","jsx","cn"],"mappings":"kPAyBaA,EAAOC,EAAM,WACxB,CAAC,CACC,UAAAC,EACA,QAAAC,EAAU,UACV,UAAAC,EAAY,QACZ,WAAAC,EAAa,GACb,QAAAC,EAAU,GACV,SAAAC,EACA,GAAGC,CAAA,EACFC,IAAQ,CAGT,MAAMC,EAAgBL,EAAa,CACjC,OAAQ,SACR,IAAK,qBAAA,EACH,CAAA,EAGEM,EAAOL,EAAUM,EAAAA,KAAO,IAE9B,OACEC,EAAAA,IAACF,EAAA,CACC,IAAAF,EACA,UAAWK,EAAAA,GACT,WACA,aAAaX,CAAO,GACpB,uBAAuBC,CAAS,GAChCF,CAAA,EAED,GAAGQ,EACH,GAAGF,EAEH,SAAAD,CAAA,CAAA,CAGP,CACF,EAEAP,EAAK,YAAc"}

package/dist/components/link/Link.js

@@ -0,0 +1,41 @@
+import { jsx as p } from "react/jsx-runtime";
+import f from "react";
+/* empty css         */
+import { Slot as s } from "../../utils/slot/slot.js";
+import { cn as c } from "../../utils/cn/cn.js";
+const k = f.forwardRef(
+  ({
+    className: r,
+    variant: o = "default",
+    underline: e = "hover",
+    isExternal: n = !1,
+    asChild: t = !1,
+    children: i,
+    ...a
+  }, l) => {
+    const m = n ? {
+      target: "_blank",
+      rel: "noopener noreferrer"
+    } : {};
+    return /* @__PURE__ */ p(
+      t ? s : "a",
+      {
+        ref: l,
+        className: c(
+          "nui-link",
+          `nui-link--${o}`,
+          `nui-link--underline-${e}`,
+          r
+        ),
+        ...m,
+        ...a,
+        children: i
+      }
+    );
+  }
+);
+k.displayName = "Link";
+export {
+  k as Link
+};
+//# sourceMappingURL=Link.js.map

package/dist/components/link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { cn, Slot } from '../../utils';\nimport './Link.css';\n\nexport type LinkVariant = 'default' | 'primary' | 'muted' | 'danger';\nexport type LinkUnderline = 'none' | 'hover' | 'always';\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  variant?: LinkVariant;\n  underline?: LinkUnderline;\n  /** Automatically applies `target=\"_blank\"` and `rel=\"noopener noreferrer\"` for external routing security. */\n  isExternal?: boolean;\n  /** * Polymorphic Prop: When true, delegates rendering to its child.\n   * Crucial for integrating with framework routers like Next.js `<Link>` or React Router.\n   */\n  asChild?: boolean;\n}\n\n/**\n * Link Component\n * --------------\n * Typographical navigation element designed to blend seamlessly into paragraphs, lists, and breadcrumbs.\n * Architecture Note: For functional Call-to-Action links that require button-like padding and backgrounds, \n * use the `<Button asChild>` component instead.\n */\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ \n    className, \n    variant = 'default', \n    underline = 'hover',\n    isExternal = false,\n    asChild = false,\n    children, \n    ...props \n  }, ref) => {\n    \n    // Auto-apply security attributes for external navigation to prevent tabnabbing attacks\n    const externalProps = isExternal ? {\n      target: \"_blank\",\n      rel: \"noopener noreferrer\"\n    } : {};\n\n    // Determine the root node. If asChild is true, use our zero-dependency Slot to merge props onto the child.\n    const Comp = asChild ? Slot : \"a\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"nui-link\",\n          `nui-link--${variant}`,\n          `nui-link--underline-${underline}`,\n          className\n        )}\n        {...externalProps}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  }\n);\n\nLink.displayName = \"Link\";"],"names":["Link","React","className","variant","underline","isExternal","asChild","children","props","ref","externalProps","jsx","Slot","cn"],"mappings":";;;;;AAyBO,MAAMA,IAAOC,EAAM;AAAA,EACxB,CAAC;AAAA,IACC,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,YAAAC,IAAa;AAAA,IACb,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GACFC,MAAQ;AAGT,UAAMC,IAAgBL,IAAa;AAAA,MACjC,QAAQ;AAAA,MACR,KAAK;AAAA,IAAA,IACH,CAAA;AAKJ,WACE,gBAAAM;AAAA,MAHWL,IAAUM,IAAO;AAAA,MAG3B;AAAA,QACC,KAAAH;AAAA,QACA,WAAWI;AAAA,UACT;AAAA,UACA,aAAaV,CAAO;AAAA,UACpB,uBAAuBC,CAAS;AAAA,UAChCF;AAAA,QAAA;AAAA,QAED,GAAGQ;AAAA,QACH,GAAGF;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAP,EAAK,cAAc;"}

package/dist/components/megamenu/MegaMenu.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("react");;/* empty css               */function l({label:c,items:m}){const[r,u]=s.useState(!1),t=s.useRef(null),a=s.useRef(null);return s.useEffect(()=>{if(!r)return;const e=i=>{t.current&&!t.current.contains(i.target)&&a.current&&!a.current.contains(i.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[r]),n.jsxs("div",{className:"ui-megamenu",children:[n.jsxs("button",{ref:a,className:"ui-megamenu-trigger","aria-expanded":r,onClick:()=>u(e=>!e),children:[c," ▾"]}),n.jsx("div",{ref:t,className:`ui-megamenu-panel ${r?"ui-megamenu-panel--open":""}`,role:"menu",children:n.jsx("div",{className:"ui-megamenu-grid",children:m.map(e=>n.jsxs("a",{href:e.href,className:"ui-megamenu-item",children:[n.jsx("span",{className:"ui-megamenu-item-title",children:e.title}),e.description&&n.jsx("span",{className:"ui-megamenu-item-desc",children:e.description})]},e.href))})})]})}exports.MegaMenu=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react");;/* empty css               */const f=require("../../utils/cn/cn.cjs"),M=t.createContext(null);function p(){const r=t.useContext(M);if(!r)throw new Error("MegaMenu components must be used within <MegaMenu>");return r}const v=t.forwardRef(({className:r,children:d,...l},s)=>{const[e,u]=t.useState(!1),i=t.useRef(null),c=t.useRef(null),o=`nui-megamenu-content-${t.useId()}`;return t.useEffect(()=>{if(!e)return;const n=g=>{c.current&&!c.current.contains(g.target)&&i.current&&!i.current.contains(g.target)&&u(!1)};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[e]),t.useEffect(()=>{if(!e)return;const n=g=>{g.key==="Escape"&&(u(!1),i.current?.focus())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[e]),a.jsx(M.Provider,{value:{isOpen:e,setIsOpen:u,triggerRef:i,contentId:o},children:a.jsx("div",{ref:n=>{c.current=n,typeof s=="function"?s(n):s&&(s.current=n)},className:f.cn("nui-megamenu",r),...l,children:d})})});v.displayName="MegaMenu";const h=t.forwardRef(({className:r,children:d,onClick:l,...s},e)=>{const{isOpen:u,setIsOpen:i,triggerRef:c,contentId:m}=p();return a.jsxs("button",{ref:o=>{c&&(c.current=o),typeof e=="function"?e(o):e&&(e.current=o)},type:"button",className:f.cn("nui-megamenu__trigger",u&&"active",r),"aria-expanded":u,"aria-controls":m,onClick:o=>{i(n=>!n),l?.(o)},...s,children:[d,a.jsx("svg",{className:"nui-megamenu__chevron",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:a.jsx("polyline",{points:"6 9 12 15 18 9"})})]})});h.displayName="MegaMenu.Trigger";const w=t.forwardRef(({className:r,children:d,...l},s)=>{const{isOpen:e,contentId:u}=p();return e?a.jsx("div",{ref:s,id:u,role:"menu",className:f.cn("nui-megamenu__content",r),...l,children:d}):null});w.displayName="MegaMenu.Content";const x=Object.assign(v,{Trigger:h,Content:w});exports.MegaMenu=x;
 //# sourceMappingURL=MegaMenu.cjs.map