@orion-ds/react 4.8.0 → 4.9.1

package/dist/components/Table/Table.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 "./Table.module.css.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/components/Tabs/Tabs.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),t=require("./Tabs.module.css.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/components/Tabs/Tabs.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 "./Tabs.module.css.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/components/Textarea/Textarea.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("./Textarea.module.css.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/components/Textarea/Textarea.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 "./Textarea.module.css.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
+};

package/dist/components/ThemeController/ThemeController.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../contexts/ThemeContext.cjs"),S=require("../../hooks/useTheme.cjs"),h=require("../Switch/Switch.cjs"),l=require("../Button/Button.cjs"),d=require("../Card/Card.cjs"),i=require("../Badge/Badge.cjs"),z=require("../Radio/Radio.cjs"),T=require("../Alert/Alert.cjs"),n={orion:{accent:"#1B5BFF",radius:"12px",description:"Blue accent • 12px radius"},red:{accent:"#D7282F",radius:"9999px",description:"Red accent • Pill buttons"},deepblue:{accent:"#006FBA",radius:"12px",description:"Deep Blue accent • 12px radius"},orange:{accent:"#F15D22",radius:"9999px",description:"Red-Orange accent • Pill buttons"},ember:{accent:"#F15D22",radius:"12px",description:"Orange accent • Black buttons • 12px radius"},lemon:{accent:"#72FF43",radius:"9999px",description:"Lime green accent • Highly rounded"}},v=({showBrandSelector:o=!0,showThemeToggle:p=!0,showSummary:y=!0,compact:m=!1,className:x,style:u,onThemeChange:j,onBrandChange:f})=>{const k=S.useTheme();let g=null;try{g=b.useThemeContext()}catch{}const{theme:t,brand:a,setTheme:B,setBrand:C}=g??k,s=r=>{B(r),j?.(r)},c=r=>{C(r),f?.(r)};return m?e.jsxs("div",{className:x,style:{display:"flex",gap:"var(--spacing-3)",alignItems:"center",flexWrap:"wrap"},children:[p&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"var(--spacing-2)"},children:[e.jsx("span",{style:{fontSize:"20px"},children:"☀️"}),e.jsx(h.Switch,{checked:t==="dark",onChange:r=>s(r.target.checked?"dark":"light")}),e.jsx("span",{style:{fontSize:"20px"},children:"🌙"})]}),o&&e.jsx("div",{style:{display:"flex",gap:"var(--spacing-2)"},children:Object.keys(n).map(r=>e.jsx(l.Button,{variant:a===r?"primary":"secondary",size:"sm",onClick:()=>c(r),children:r.charAt(0).toUpperCase()+r.slice(1)},r))})]}):e.jsxs(d.Card,{variant:"elevated",className:x,style:{background:"var(--interactive-primary)",color:"var(--interactive-primary-text)",...u},children:[e.jsx(d.Card.Header,{children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"var(--spacing-2)"},children:[e.jsx("span",{style:{fontSize:"24px"},children:"🎨"}),e.jsxs("div",{children:[e.jsx("h3",{style:{margin:0,color:"var(--interactive-primary-text)"},children:"Theme & Brand Settings"}),e.jsx("p",{style:{margin:0,fontSize:"var(--text-sm)",opacity:.9,color:"var(--interactive-primary-text)"},children:"Customize the appearance in real-time"})]})]})}),e.jsx(d.Card.Body,{style:{background:"var(--surface-base)",color:"var(--text-primary)"},children:e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-6)"},children:[p&&e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"var(--spacing-3)"},children:[e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-bold)",color:"var(--text-primary)",marginBottom:"var(--spacing-1)"},children:"Color Mode"}),e.jsx("p",{style:{fontSize:"var(--text-sm)",color:"var(--text-secondary)",margin:0},children:"Switch between light and dark themes"})]}),e.jsx(i.Badge,{variant:t==="light"?"warning":"primary",size:"lg",children:t==="light"?"☀️ Light":"🌙 Dark"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"var(--spacing-3)",padding:"var(--spacing-4)",background:"var(--surface-subtle)",borderRadius:"var(--radius-control)",border:"2px solid var(--border-subtle)"},children:[e.jsx("span",{style:{fontSize:"32px"},children:"☀️"}),e.jsx(h.Switch,{checked:t==="dark",onChange:r=>s(r.target.checked?"dark":"light"),size:"lg"}),e.jsx("span",{style:{fontSize:"32px"},children:"🌙"}),e.jsxs("div",{style:{marginLeft:"auto",display:"flex",gap:"var(--spacing-2)"},children:[e.jsx(l.Button,{variant:t==="light"?"primary":"ghost",size:"sm",onClick:()=>s("light"),children:"Light"}),e.jsx(l.Button,{variant:t==="dark"?"primary":"ghost",size:"sm",onClick:()=>s("dark"),children:"Dark"})]})]})]}),o&&e.jsxs("div",{children:[e.jsxs("div",{style:{marginBottom:"var(--spacing-3)"},children:[e.jsx("label",{style:{display:"block",fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-bold)",color:"var(--text-primary)",marginBottom:"var(--spacing-1)"},children:"Brand Identity"}),e.jsx("p",{style:{fontSize:"var(--text-sm)",color:"var(--text-secondary)",margin:0},children:"Select a brand to see different accent colors and styling"})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"var(--spacing-3)"},children:Object.keys(n).map(r=>e.jsxs("div",{onClick:()=>c(r),style:{padding:"var(--spacing-4)",background:a===r?"var(--interactive-primary)":"var(--surface-subtle)",color:a===r?"white":"var(--text-primary)",borderRadius:"var(--radius-control)",border:`2px solid ${a===r?"var(--interactive-primary)":"var(--border-subtle)"}`,cursor:"pointer",transition:"all 150ms ease"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"var(--spacing-2)"},children:[e.jsx(z.Radio,{name:"brand",value:r,checked:a===r,onChange:()=>c(r),label:r.charAt(0).toUpperCase()+r.slice(1),size:"lg"}),a===r&&e.jsx(i.Badge,{variant:"success",children:"Active"})]}),e.jsx("p",{style:{fontSize:"var(--text-sm)",margin:0,opacity:.8},children:n[r].description})]},r))})]}),y&&e.jsx(T.Alert,{variant:"info",title:"Current Settings",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-2)",flexWrap:"wrap"},children:[e.jsxs(i.Badge,{variant:"primary",children:["Theme: ",t]}),e.jsxs(i.Badge,{variant:"secondary",children:["Brand: ",a]}),e.jsxs(i.Badge,{variant:"secondary",children:["Accent: ",n[a].accent]}),e.jsxs(i.Badge,{variant:"secondary",children:["Radius:"," ",n[a].radius==="9999px"?"9999px (pills)":n[a].radius]})]})})]})})]})};v.displayName="ThemeController";exports.ThemeController=v;