@orion-ds/react 4.6.5 → 4.7.0

package/dist/index83 3.mjs

@@ -0,0 +1,249 @@
+const f = {
+  project: {
+    name: "Orion",
+    description: "AI-First Design System Primitives"
+  },
+  color: {
+    brand: {
+      orion: {
+        50: "#e8f0ff",
+        100: "#c7daff",
+        200: "#a3c2ff",
+        300: "#7ea9ff",
+        400: "#5990ff",
+        500: "#1B5BFF",
+        600: "#1850e6",
+        700: "#1544cc",
+        800: "#1139b3",
+        900: "#0d2d99",
+        950: "#071a5c"
+      },
+      deepblue: {
+        50: "#e6f2ff",
+        100: "#b3d9ff",
+        200: "#80bfff",
+        300: "#4da6ff",
+        400: "#1a8cff",
+        500: "#006FBA",
+        600: "#0062a6",
+        700: "#005592",
+        800: "#00487d",
+        900: "#003b69",
+        950: "#002540"
+      },
+      red: {
+        50: "#fdf2f2",
+        100: "#fde8e8",
+        200: "#fbd5d5",
+        300: "#f8b4b4",
+        400: "#f08282",
+        500: "#D7282F",
+        600: "#b91c22",
+        700: "#93151b",
+        800: "#7a151b",
+        900: "#661619",
+        950: "#3b090b"
+      },
+      orange: {
+        50: "#fef0eb",
+        100: "#fdd5c9",
+        200: "#fcb9a5",
+        300: "#fa9d80",
+        400: "#f87d52",
+        500: "#F15D22",
+        600: "#d9531f",
+        700: "#c0491b",
+        800: "#a63f17",
+        900: "#8c3513",
+        950: "#59220c"
+      },
+      ember: {
+        50: "#fef0eb",
+        100: "#fdd5c9",
+        200: "#fcb9a5",
+        300: "#fa9d80",
+        400: "#f87d52",
+        500: "#F15D22",
+        600: "#d9531f",
+        700: "#c0491b",
+        800: "#a63f17",
+        900: "#8c3513",
+        950: "#59220c"
+      },
+      lemon: {
+        50: "#F4FFE6",
+        100: "#E5FFCC",
+        200: "#CCFFAA",
+        300: "#A8FF77",
+        400: "#8DFF5C",
+        500: "#72FF43",
+        600: "#5CE629",
+        700: "#47B31A",
+        800: "#358C14",
+        900: "#266B0F",
+        950: "#1A4A0A"
+      }
+    },
+    neutral: {
+      0: "#ffffff",
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617",
+      1e3: "#000000"
+    },
+    neutralPure: {
+      0: "#ffffff",
+      50: "#fafafa",
+      100: "#f5f5f5",
+      200: "#e5e5e5",
+      300: "#d4d4d4",
+      400: "#a3a3a3",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717",
+      950: "#0a0a0a",
+      1e3: "#000000"
+    },
+    error: {
+      500: "#ef4444"
+    },
+    success: {
+      500: "#22c55e"
+    },
+    warning: {
+      500: "#eab308"
+    },
+    info: {
+      500: "#3b82f6"
+    }
+  },
+  typography: {
+    family: {
+      primary: "Libre Baskerville, system-ui, sans-serif",
+      secondary: "Inter, system-ui, sans-serif",
+      mono: "JetBrains Mono, monospace"
+    },
+    weight: {
+      regular: "400",
+      medium: "500",
+      bold: "700"
+    },
+    size: {
+      10: "10px",
+      11: "11px",
+      12: "12px",
+      13: "13px",
+      14: "14px",
+      16: "16px",
+      18: "18px",
+      20: "20px",
+      24: "24px",
+      32: "32px",
+      48: "48px",
+      64: "64px",
+      80: "80px",
+      96: "96px"
+    },
+    lineHeight: {
+      none: "1",
+      tight: "1.25",
+      snug: "1.375",
+      normal: "1.5",
+      relaxed: "1.625",
+      loose: "2"
+    }
+  },
+  spacing: {
+    0: "0px",
+    1: "4px",
+    2: "8px",
+    3: "12px",
+    4: "16px",
+    5: "20px",
+    6: "24px",
+    7: "28px",
+    8: "32px",
+    9: "36px",
+    10: "40px",
+    11: "44px",
+    12: "48px",
+    16: "64px",
+    20: "80px",
+    24: "96px",
+    32: "128px",
+    px: "1px",
+    "05": "2px"
+  },
+  radius: {
+    0: "0px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    "lg-2": "20px",
+    xl: "24px",
+    "2xl": "32px",
+    full: "9999px"
+  },
+  radiusScale: {
+    0: "0",
+    xs: "sm",
+    sm: "lg",
+    md: "xl",
+    lg: "2xl",
+    "lg-2": "3xl",
+    xl: "3xl",
+    "2xl": "3xl",
+    full: "3xl"
+  },
+  blur: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "24px"
+  },
+  zIndex: {
+    base: "0",
+    dropdown: "50",
+    sticky: "100",
+    overlay: "200",
+    modal: "300",
+    popover: "400",
+    tooltip: "500",
+    toast: "600"
+  },
+  transition: {
+    fast: "150ms ease",
+    normal: "300ms ease",
+    slow: "500ms ease"
+  },
+  icon: {
+    library: "lucide",
+    cdn: "https://unpkg.com/lucide@latest",
+    size: {
+      sm: "16px",
+      md: "20px",
+      lg: "24px",
+      xl: "32px"
+    },
+    stroke: "2"
+  }
+}, { color: e, typography: p, spacing: x, radius: a, blur: s, icon: l } = f;
+export {
+  s as blur,
+  e as color,
+  l as icon,
+  f as primitives,
+  a as radius,
+  x as spacing,
+  p as typography
+};

package/dist/index83.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),g=require("lucide-react"),e=require("./index153.cjs"),m=f.forwardRef(({label:t,size:b="sm",helperText:l,error:a,className:j,id:N,disabled:d,required:r,checked:n,"aria-label":o,"aria-describedby":u,...v},x)=>{const w=f.useId(),c=N||`switch-${w}`,h=`${c}-error`,p=`${c}-helper`,i=[];a&&i.push(h),l&&!a&&i.push(p),u&&i.push(u);const y=i.length>0?i.join(" "):void 0;!(t||o)&&process.env.NODE_ENV==="development"&&console.warn("Switch: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users.");const S=[e.default.container,e.default[b],a&&e.default.error,d&&e.default.disabled,j].filter(Boolean).join(" ");return s.jsxs("div",{className:S,children:[s.jsx("input",{ref:x,type:"checkbox",role:"switch",id:c,className:e.default.input,disabled:d,required:r,checked:n,"aria-checked":n,"aria-required":r||void 0,"aria-invalid":a?"true":void 0,"aria-describedby":y,"aria-label":t?void 0:o,...v}),s.jsxs("label",{htmlFor:c,className:e.default.labelWrapper,children:[s.jsx("span",{className:e.default.track,"aria-hidden":"true",children:s.jsx("span",{className:e.default.thumb})}),t&&s.jsxs("span",{className:e.default.label,children:[t,r&&s.jsx("span",{className:e.default.required,"aria-hidden":"true",children:"*"})]})]}),l&&!a&&s.jsx("p",{id:p,className:e.default.helperText,children:l}),a&&s.jsxs("p",{id:h,className:e.default.errorMessage,role:"alert","aria-live":"assertive",children:[s.jsx(g.AlertCircle,{size:14,"aria-hidden":"true"}),s.jsx("span",{children:a})]})]})});m.displayName="Switch";exports.Switch=m;

package/dist/index83.mjs

@@ -0,0 +1,80 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { forwardRef as j, useId as x } from "react";
+import { AlertCircle as A } from "lucide-react";
+import e from "./index153.mjs";
+const B = j(
+  ({
+    label: r,
+    size: N = "sm",
+    helperText: l,
+    error: s,
+    className: b,
+    id: f,
+    disabled: o,
+    required: d,
+    checked: t,
+    "aria-label": h,
+    "aria-describedby": p,
+    ...v
+  }, w) => {
+    const y = x(), c = f || `switch-${y}`, m = `${c}-error`, u = `${c}-helper`, i = [];
+    s && i.push(m), l && !s && i.push(u), p && i.push(p);
+    const I = i.length > 0 ? i.join(" ") : void 0;
+    !(r || h) && process.env.NODE_ENV === "development" && console.warn(
+      "Switch: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users."
+    );
+    const g = [
+      e.container,
+      e[N],
+      s && e.error,
+      o && e.disabled,
+      b
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ n("div", { className: g, children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          ref: w,
+          type: "checkbox",
+          role: "switch",
+          id: c,
+          className: e.input,
+          disabled: o,
+          required: d,
+          checked: t,
+          "aria-checked": t,
+          "aria-required": d || void 0,
+          "aria-invalid": s ? "true" : void 0,
+          "aria-describedby": I,
+          "aria-label": r ? void 0 : h,
+          ...v
+        }
+      ),
+      /* @__PURE__ */ n("label", { htmlFor: c, className: e.labelWrapper, children: [
+        /* @__PURE__ */ a("span", { className: e.track, "aria-hidden": "true", children: /* @__PURE__ */ a("span", { className: e.thumb }) }),
+        r && /* @__PURE__ */ n("span", { className: e.label, children: [
+          r,
+          d && /* @__PURE__ */ a("span", { className: e.required, "aria-hidden": "true", children: "*" })
+        ] })
+      ] }),
+      l && !s && /* @__PURE__ */ a("p", { id: u, className: e.helperText, children: l }),
+      s && /* @__PURE__ */ n(
+        "p",
+        {
+          id: m,
+          className: e.errorMessage,
+          role: "alert",
+          "aria-live": "assertive",
+          children: [
+            /* @__PURE__ */ a(A, { size: 14, "aria-hidden": "true" }),
+            /* @__PURE__ */ a("span", { children: s })
+          ]
+        }
+      )
+    ] });
+  }
+);
+B.displayName = "Switch";
+export {
+  B as Switch
+};

package/dist/index84.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("react"),t=require("./index181.cjs"),y=({columns:n,data:f,size:p="md",striped:x=!1,hoverable:N=!0,bordered:g=!1,borderless:v=!1,caption:h,emptyMessage:k="No data available",onRowClick:d,onSortChange:u,sortState:c,getRowKey:C=(b,o)=>o,className:S})=>{const[b,o]=j.useState(null),i=c||b,B=j.useCallback(e=>{if(!e.sortable)return;const s=e.key;let l="asc";i?.columnKey===s&&(i.direction==="asc"?l="desc":i.direction==="desc"&&(l=null)),c||o(l?{columnKey:s,direction:l}:null),u?.(s,l)},[i,c,u]),K=e=>{if(!e.sortable)return null;const s=i?.columnKey===e.key,l=s?i?.direction:null,r=[t.default.sortIndicator,s&&t.default.active].filter(Boolean).join(" ");return l==="asc"?a.jsx("span",{className:r,children:"▲"}):l==="desc"?a.jsx("span",{className:r,children:"▼"}):a.jsx("span",{className:r,children:"⇅"})},T=()=>a.jsx("thead",{className:t.default.thead,children:a.jsx("tr",{children:n.map(e=>{const s=[t.default.th,e.align&&t.default[`align${e.align.charAt(0).toUpperCase()}${e.align.slice(1)}`],e.sortable&&t.default.sortable].filter(Boolean).join(" "),l=e.sortable?()=>B(e):void 0;return a.jsxs("th",{className:s,style:{width:e.width},onClick:l,tabIndex:e.sortable?0:void 0,role:e.sortable?"button":void 0,"aria-sort":i?.columnKey===e.key?i.direction==="asc"?"ascending":"descending":void 0,...e.headerProps,children:[e.header,K(e)]},e.key)})})}),$=()=>f.length===0?a.jsx("tbody",{children:a.jsx("tr",{children:a.jsx("td",{colSpan:n.length,className:t.default.empty,children:k})})}):a.jsx("tbody",{className:t.default.tbody,children:f.map((e,s)=>{const l=C(e,s);return a.jsx("tr",{className:t.default.tr,onClick:d?()=>d(e,s):void 0,children:n.map(r=>{const A=[t.default.td,r.align&&t.default[`align${r.align.charAt(0).toUpperCase()}${r.align.slice(1)}`]].filter(Boolean).join(" "),P=r.cell?r.cell(e,s):e[r.key];return a.jsx("td",{className:A,...r.cellProps,children:P},r.key)})},l)})}),q=[t.default.container,t.default[p],x&&t.default.striped,N&&t.default.hoverable,d&&t.default.clickable,g&&t.default.bordered,v&&t.default.borderless,S].filter(Boolean).join(" ");return a.jsx("div",{className:q,children:a.jsxs("table",{className:t.default.table,children:[h&&a.jsx("caption",{className:t.default.caption,children:h}),T(),$()]})})};y.displayName="Table";exports.Table=y;

package/dist/index84.mjs

@@ -0,0 +1,101 @@
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import { useState as T, useCallback as U } from "react";
+import t from "./index181.mjs";
+const u = ({
+  columns: n,
+  data: h,
+  size: N = "md",
+  striped: g = !1,
+  hoverable: v = !0,
+  bordered: k = !1,
+  borderless: C = !1,
+  caption: b,
+  emptyMessage: j = "No data available",
+  onRowClick: c,
+  onSortChange: p,
+  sortState: d,
+  getRowKey: S = (f, o) => o,
+  className: B
+}) => {
+  const [f, o] = T(null), l = d || f, K = U(
+    (e) => {
+      if (!e.sortable) return;
+      const a = e.key;
+      let s = "asc";
+      l?.columnKey === a && (l.direction === "asc" ? s = "desc" : l.direction === "desc" && (s = null)), d || o(
+        s ? { columnKey: a, direction: s } : null
+      ), p?.(a, s);
+    },
+    [l, d, p]
+  ), m = (e) => {
+    if (!e.sortable) return null;
+    const a = l?.columnKey === e.key, s = a ? l?.direction : null, i = [t.sortIndicator, a && t.active].filter(Boolean).join(" ");
+    return s === "asc" ? /* @__PURE__ */ r("span", { className: i, children: "▲" }) : s === "desc" ? /* @__PURE__ */ r("span", { className: i, children: "▼" }) : /* @__PURE__ */ r("span", { className: i, children: "⇅" });
+  }, $ = () => /* @__PURE__ */ r("thead", { className: t.thead, children: /* @__PURE__ */ r("tr", { children: n.map((e) => {
+    const a = [
+      t.th,
+      e.align && t[`align${e.align.charAt(0).toUpperCase()}${e.align.slice(1)}`],
+      e.sortable && t.sortable
+    ].filter(Boolean).join(" "), s = e.sortable ? () => K(e) : void 0;
+    return /* @__PURE__ */ y(
+      "th",
+      {
+        className: a,
+        style: { width: e.width },
+        onClick: s,
+        tabIndex: e.sortable ? 0 : void 0,
+        role: e.sortable ? "button" : void 0,
+        "aria-sort": l?.columnKey === e.key ? l.direction === "asc" ? "ascending" : "descending" : void 0,
+        ...e.headerProps,
+        children: [
+          e.header,
+          m(e)
+        ]
+      },
+      e.key
+    );
+  }) }) }), A = () => h.length === 0 ? /* @__PURE__ */ r("tbody", { children: /* @__PURE__ */ r("tr", { children: /* @__PURE__ */ r("td", { colSpan: n.length, className: t.empty, children: j }) }) }) : /* @__PURE__ */ r("tbody", { className: t.tbody, children: h.map((e, a) => {
+    const s = S(e, a);
+    return /* @__PURE__ */ r(
+      "tr",
+      {
+        className: t.tr,
+        onClick: c ? () => c(e, a) : void 0,
+        children: n.map((i) => {
+          const I = [
+            t.td,
+            i.align && t[`align${i.align.charAt(0).toUpperCase()}${i.align.slice(1)}`]
+          ].filter(Boolean).join(" "), P = i.cell ? i.cell(e, a) : e[i.key];
+          return /* @__PURE__ */ r(
+            "td",
+            {
+              className: I,
+              ...i.cellProps,
+              children: P
+            },
+            i.key
+          );
+        })
+      },
+      s
+    );
+  }) }), x = [
+    t.container,
+    t[N],
+    g && t.striped,
+    v && t.hoverable,
+    c && t.clickable,
+    k && t.bordered,
+    C && t.borderless,
+    B
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { className: x, children: /* @__PURE__ */ y("table", { className: t.table, children: [
+    b && /* @__PURE__ */ r("caption", { className: t.caption, children: b }),
+    $(),
+    A()
+  ] }) });
+};
+u.displayName = "Table";
+export {
+  u as Table
+};

package/dist/index85.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),t=require("./index171.cjs"),g=({tabs:i,defaultTab:T,activeTab:f,onChange:m,fullWidth:x=!1,noPanelPadding:v=!1,className:j})=>{const b=f!==void 0,[k,y]=r.useState(T||i[0]?.id||""),u=r.useRef(new Map),d=b?f:k,C=e=>{b||y(e),m?.(e)},o=r.useCallback(()=>i.filter(e=>!e.disabled),[i]),c=r.useCallback(e=>{const a=o();if(a.length===0)return;const l=(e%a.length+a.length)%a.length,n=a[l];if(!n)return;u.current.get(n.id)?.focus()},[o]),w=r.useCallback((e,a)=>{const l=o(),n=l.findIndex(p=>p.id===a);switch(e.key){case"ArrowLeft":e.preventDefault(),c(n-1);break;case"ArrowRight":e.preventDefault(),c(n+1);break;case"Home":e.preventDefault(),c(0);break;case"End":e.preventDefault(),c(l.length-1);break}},[o,c]),h=i.find(e=>e.id===d),D=[t.default.container,x&&t.default.fullWidth,v&&t.default.noPanelPadding,j].filter(Boolean).join(" ");return s.jsxs("div",{className:D,children:[s.jsx("div",{className:t.default.tabList,role:"tablist",children:i.map(e=>{const a=e.id===d,l=[t.default.tab,a&&t.default.active].filter(Boolean).join(" ");return s.jsxs("button",{ref:n=>{n?u.current.set(e.id,n):u.current.delete(e.id)},type:"button",role:"tab","aria-selected":a,"aria-controls":`panel-${e.id}`,id:`tab-${e.id}`,className:l,onClick:()=>C(e.id),onKeyDown:n=>w(n,e.id),disabled:e.disabled,tabIndex:a?0:-1,children:[e.icon&&s.jsx("span",{className:t.default.icon,children:e.icon}),s.jsx("span",{children:e.label}),e.badge!==void 0&&s.jsx("span",{className:t.default.badge,children:e.badge})]},e.id)})}),h&&s.jsx("div",{className:t.default.panel,role:"tabpanel",id:`panel-${d}`,"aria-labelledby":`tab-${d}`,children:h.content},d)]})};g.displayName="Tabs";exports.Tabs=g;

package/dist/index85.mjs

@@ -0,0 +1,97 @@
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { useState as I, useRef as j, useCallback as b } from "react";
+import t from "./index171.mjs";
+const A = ({
+  tabs: i,
+  defaultTab: g,
+  activeTab: f,
+  onChange: T,
+  fullWidth: v = !1,
+  noPanelPadding: x = !1,
+  className: y
+}) => {
+  const p = f !== void 0, [k, w] = I(
+    g || i[0]?.id || ""
+  ), d = j(/* @__PURE__ */ new Map()), l = p ? f : k, D = (e) => {
+    p || w(e), T?.(e);
+  }, o = b(() => i.filter((e) => !e.disabled), [i]), r = b(
+    (e) => {
+      const n = o();
+      if (n.length === 0) return;
+      const s = (e % n.length + n.length) % n.length, a = n[s];
+      if (!a) return;
+      d.current.get(a.id)?.focus();
+    },
+    [o]
+  ), N = b(
+    (e, n) => {
+      const s = o(), a = s.findIndex(
+        (h) => h.id === n
+      );
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault(), r(a - 1);
+          break;
+        case "ArrowRight":
+          e.preventDefault(), r(a + 1);
+          break;
+        case "Home":
+          e.preventDefault(), r(0);
+          break;
+        case "End":
+          e.preventDefault(), r(s.length - 1);
+          break;
+      }
+    },
+    [o, r]
+  ), u = i.find((e) => e.id === l), C = [
+    t.container,
+    v && t.fullWidth,
+    x && t.noPanelPadding,
+    y
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ m("div", { className: C, children: [
+    /* @__PURE__ */ c("div", { className: t.tabList, role: "tablist", children: i.map((e) => {
+      const n = e.id === l, s = [t.tab, n && t.active].filter(Boolean).join(" ");
+      return /* @__PURE__ */ m(
+        "button",
+        {
+          ref: (a) => {
+            a ? d.current.set(e.id, a) : d.current.delete(e.id);
+          },
+          type: "button",
+          role: "tab",
+          "aria-selected": n,
+          "aria-controls": `panel-${e.id}`,
+          id: `tab-${e.id}`,
+          className: s,
+          onClick: () => D(e.id),
+          onKeyDown: (a) => N(a, e.id),
+          disabled: e.disabled,
+          tabIndex: n ? 0 : -1,
+          children: [
+            e.icon && /* @__PURE__ */ c("span", { className: t.icon, children: e.icon }),
+            /* @__PURE__ */ c("span", { children: e.label }),
+            e.badge !== void 0 && /* @__PURE__ */ c("span", { className: t.badge, children: e.badge })
+          ]
+        },
+        e.id
+      );
+    }) }),
+    u && /* @__PURE__ */ c(
+      "div",
+      {
+        className: t.panel,
+        role: "tabpanel",
+        id: `panel-${l}`,
+        "aria-labelledby": `tab-${l}`,
+        children: u.content
+      },
+      l
+    )
+  ] });
+};
+A.displayName = "Tabs";
+export {
+  A as Tabs
+};

package/dist/index86.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("react"),_=require("lucide-react"),e=require("./index161.cjs"),$=c.forwardRef(({label:o,helperText:d,error:t,size:T="md",resize:p="vertical",showCounter:u=!1,maxLength:r,className:q,id:A,value:s,defaultValue:f,onChange:m,disabled:j,required:h,optional:g=!1,"aria-label":x,"aria-describedby":N,...B},E)=>{const R=c.useId(),n=A||`textarea-${R}`,b=`${n}-error`,v=`${n}-helper`,C=`${n}-counter`,[S,I]=c.useState(()=>s!==void 0?String(s).length:f!==void 0?String(f).length:0);c.useEffect(()=>{s!==void 0&&I(String(s).length)},[s]);const w=c.useCallback(l=>{I(l.target.value.length),m?.(l)},[m]),i=[];t&&i.push(b),d&&!t&&i.push(v),u&&r&&i.push(C),N&&i.push(N);const M=i.length>0?i.join(" "):void 0;!(o||x)&&process.env.NODE_ENV==="development"&&console.warn("Textarea: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users.");const y=(()=>{if(!r)return"normal";const l=S/r*100;return l>=100?"error":l>=90?"warning":"normal"})(),F=[e.default.counter,y==="warning"&&e.default.counterWarning,y==="error"&&e.default.counterError].filter(Boolean).join(" "),O=[e.default.container,e.default[T],e.default[`resize${p.charAt(0).toUpperCase()}${p.slice(1)}`],t&&e.default.error,j&&e.default.disabled,q].filter(Boolean).join(" "),P=u||d&&!t;return a.jsxs("div",{className:O,children:[o&&a.jsxs("label",{htmlFor:n,className:e.default.label,children:[a.jsx("span",{className:e.default.labelText,children:o}),g&&a.jsx("span",{className:e.default.optional,"aria-hidden":"true",children:"(optional)"}),h&&!g&&a.jsx("span",{className:e.default.required,"aria-hidden":"true",children:"*"})]}),a.jsx("textarea",{ref:E,id:n,className:e.default.textarea,value:s,defaultValue:f,maxLength:r,onChange:w,disabled:j,required:h,"aria-required":h||void 0,"aria-invalid":t?"true":"false","aria-describedby":M,"aria-label":o?void 0:x,...B}),P&&a.jsxs("div",{className:e.default.footer,children:[d&&!t&&a.jsx("p",{id:v,className:e.default.helperText,children:d}),u&&r&&a.jsxs("span",{id:C,className:F,"aria-live":"polite","aria-atomic":"true",children:[S,"/",r]})]}),t&&a.jsxs("p",{id:b,className:e.default.errorMessage,role:"alert","aria-live":"assertive",children:[a.jsx(_.AlertCircle,{size:14,"aria-hidden":"true"}),a.jsx("span",{children:t})]})]})});$.displayName="Textarea";exports.Textarea=$;

package/dist/index86.mjs

@@ -0,0 +1,118 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { forwardRef as O, useId as P, useState as R, useEffect as U, useCallback as W } from "react";
+import { AlertCircle as _ } from "lucide-react";
+import e from "./index161.mjs";
+const q = O(
+  ({
+    label: l,
+    helperText: d,
+    error: r,
+    size: x = "md",
+    resize: f = "vertical",
+    showCounter: p = !1,
+    maxLength: s,
+    className: A,
+    id: B,
+    value: t,
+    defaultValue: u,
+    onChange: m,
+    disabled: N,
+    required: h,
+    optional: g = !1,
+    "aria-label": b,
+    "aria-describedby": v,
+    ...E
+  }, w) => {
+    const F = P(), n = B || `textarea-${F}`, C = `${n}-error`, I = `${n}-helper`, S = `${n}-counter`, [$, j] = R(() => t !== void 0 ? String(t).length : u !== void 0 ? String(u).length : 0);
+    U(() => {
+      t !== void 0 && j(String(t).length);
+    }, [t]);
+    const M = W(
+      (o) => {
+        j(o.target.value.length), m?.(o);
+      },
+      [m]
+    ), i = [];
+    r && i.push(C), d && !r && i.push(I), p && s && i.push(S), v && i.push(v);
+    const T = i.length > 0 ? i.join(" ") : void 0;
+    !(l || b) && process.env.NODE_ENV === "development" && console.warn(
+      "Textarea: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users."
+    );
+    const y = (() => {
+      if (!s) return "normal";
+      const o = $ / s * 100;
+      return o >= 100 ? "error" : o >= 90 ? "warning" : "normal";
+    })(), k = [
+      e.counter,
+      y === "warning" && e.counterWarning,
+      y === "error" && e.counterError
+    ].filter(Boolean).join(" "), z = [
+      e.container,
+      e[x],
+      e[`resize${f.charAt(0).toUpperCase()}${f.slice(1)}`],
+      r && e.error,
+      N && e.disabled,
+      A
+    ].filter(Boolean).join(" "), D = p || d && !r;
+    return /* @__PURE__ */ c("div", { className: z, children: [
+      l && /* @__PURE__ */ c("label", { htmlFor: n, className: e.label, children: [
+        /* @__PURE__ */ a("span", { className: e.labelText, children: l }),
+        g && /* @__PURE__ */ a("span", { className: e.optional, "aria-hidden": "true", children: "(optional)" }),
+        h && !g && /* @__PURE__ */ a("span", { className: e.required, "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ a(
+        "textarea",
+        {
+          ref: w,
+          id: n,
+          className: e.textarea,
+          value: t,
+          defaultValue: u,
+          maxLength: s,
+          onChange: M,
+          disabled: N,
+          required: h,
+          "aria-required": h || void 0,
+          "aria-invalid": r ? "true" : "false",
+          "aria-describedby": T,
+          "aria-label": l ? void 0 : b,
+          ...E
+        }
+      ),
+      D && /* @__PURE__ */ c("div", { className: e.footer, children: [
+        d && !r && /* @__PURE__ */ a("p", { id: I, className: e.helperText, children: d }),
+        p && s && /* @__PURE__ */ c(
+          "span",
+          {
+            id: S,
+            className: k,
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: [
+              $,
+              "/",
+              s
+            ]
+          }
+        )
+      ] }),
+      r && /* @__PURE__ */ c(
+        "p",
+        {
+          id: C,
+          className: e.errorMessage,
+          role: "alert",
+          "aria-live": "assertive",
+          children: [
+            /* @__PURE__ */ a(_, { size: 14, "aria-hidden": "true" }),
+            /* @__PURE__ */ a("span", { children: r })
+          ]
+        }
+      )
+    ] });
+  }
+);
+q.displayName = "Textarea";
+export {
+  q as Textarea
+};