@orion-ds/react 4.9.2 → 4.9.3

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/Table/Table.module.css

@@ -0,0 +1 @@
+._container_1xu4i_8{width:100%;overflow-x:auto;border-radius:var(--radius-control);border:1px solid var(--border-subtle);overflow:hidden}._borderless_1xu4i_17{border:none;border-radius:0}._table_1xu4i_23{width:100%;border-collapse:collapse;font-size:var(--font-size-16);color:var(--text-primary);background:var(--surface-base)}._caption_1xu4i_32{padding:var(--spacing-3);font-size:var(--font-size-12);color:var(--text-secondary);text-align:left;caption-side:top}._thead_1xu4i_44{border-bottom:1px solid var(--border-subtle)}._th_1xu4i_44{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-12);font-weight:var(--font-weight-medium);text-align:left;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}._th_1xu4i_44._alignCenter_1xu4i_59{text-align:center}._th_1xu4i_44._alignRight_1xu4i_63{text-align:right}._sortable_1xu4i_68{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast)}._sortable_1xu4i_68:hover{color:var(--text-primary)}._sortable_1xu4i_68:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:-2px}._sortIndicator_1xu4i_84{display:inline-flex;margin-left:var(--spacing-1);color:var(--text-tertiary);font-size:.75em}._sortIndicator_1xu4i_84._active_1xu4i_91{color:var(--interactive-primary)}._tr_1xu4i_103{border-bottom:1px solid var(--border-subtle);transition:background var(--transition-fast)}._tbody_1xu4i_99 ._tr_1xu4i_103:last-child{border-bottom:none}._td_1xu4i_113{padding:var(--spacing-3) var(--spacing-4);text-align:left}._td_1xu4i_113._alignCenter_1xu4i_59{text-align:center}._td_1xu4i_113._alignRight_1xu4i_63{text-align:right}._hoverable_1xu4i_131 ._tr_1xu4i_103:hover{background:var(--surface-subtle)}._clickable_1xu4i_136 ._tr_1xu4i_103{cursor:pointer}._clickable_1xu4i_136 ._tr_1xu4i_103:active{background:var(--surface-layer)}._striped_1xu4i_148 ._tr_1xu4i_103:nth-child(2n){background:var(--surface-subtle)}._striped_1xu4i_148._hoverable_1xu4i_131 ._tr_1xu4i_103:nth-child(2n):hover{background:var(--surface-layer)}._bordered_1xu4i_160{border:1px solid var(--border-subtle)}._bordered_1xu4i_160 ._th_1xu4i_44,._bordered_1xu4i_160 ._td_1xu4i_113{border-right:1px solid var(--border-subtle)}._bordered_1xu4i_160 ._th_1xu4i_44:last-child,._bordered_1xu4i_160 ._td_1xu4i_113:last-child{border-right:none}._sm_1xu4i_178 ._th_1xu4i_44{padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-10)}._sm_1xu4i_178 ._td_1xu4i_113{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-12)}._md_1xu4i_188 ._th_1xu4i_44{padding:var(--spacing-2) var(--spacing-4);font-size:var(--font-size-12)}._md_1xu4i_188 ._td_1xu4i_113{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-16)}._lg_1xu4i_198 ._th_1xu4i_44{padding:var(--spacing-3) var(--spacing-6);font-size:var(--font-size-12)}._lg_1xu4i_198 ._td_1xu4i_113{padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-16)}._empty_1xu4i_212{padding:var(--spacing-8) var(--spacing-4);text-align:center;color:var(--text-tertiary);font-size:var(--font-size-16)}

package/dist/components/Table/Table.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_container_1xu4i_8",e="_borderless_1xu4i_17",_="_table_1xu4i_23",o="_caption_1xu4i_32",i="_thead_1xu4i_44",n="_th_1xu4i_44",r="_alignCenter_1xu4i_59",s="_alignRight_1xu4i_63",c="_sortable_1xu4i_68",a="_sortIndicator_1xu4i_84",l="_active_1xu4i_91",d="_tbody_1xu4i_99",b="_tr_1xu4i_103",u="_td_1xu4i_113",x="_hoverable_1xu4i_131",g="_clickable_1xu4i_136",h="_striped_1xu4i_148",m="_bordered_1xu4i_160",p="_sm_1xu4i_178",v="_md_1xu4i_188",y="_lg_1xu4i_198",k="_empty_1xu4i_212",C={container:t,borderless:e,table:_,caption:o,thead:i,th:n,alignCenter:r,alignRight:s,sortable:c,sortIndicator:a,active:l,tbody:d,tr:b,td:u,hoverable:x,clickable:g,striped:h,bordered:m,sm:p,md:v,lg:y,empty:k};exports.active=l;exports.alignCenter=r;exports.alignRight=s;exports.bordered=m;exports.borderless=e;exports.caption=o;exports.clickable=g;exports.container=t;exports.default=C;exports.empty=k;exports.hoverable=x;exports.lg=y;exports.md=v;exports.sm=p;exports.sortIndicator=a;exports.sortable=c;exports.striped=h;exports.table=_;exports.tbody=d;exports.td=u;exports.th=n;exports.thead=i;exports.tr=b;

package/dist/components/Table/Table.module.css.mjs

@@ -0,0 +1,49 @@
+const t = "_container_1xu4i_8", _ = "_borderless_1xu4i_17", e = "_table_1xu4i_23", o = "_caption_1xu4i_32", i = "_thead_1xu4i_44", n = "_th_1xu4i_44", s = "_alignCenter_1xu4i_59", c = "_alignRight_1xu4i_63", r = "_sortable_1xu4i_68", a = "_sortIndicator_1xu4i_84", l = "_active_1xu4i_91", d = "_tbody_1xu4i_99", u = "_tr_1xu4i_103", x = "_td_1xu4i_113", b = "_hoverable_1xu4i_131", g = "_clickable_1xu4i_136", h = "_striped_1xu4i_148", p = "_bordered_1xu4i_160", m = "_sm_1xu4i_178", y = "_md_1xu4i_188", v = "_lg_1xu4i_198", k = "_empty_1xu4i_212", C = {
+  container: t,
+  borderless: _,
+  table: e,
+  caption: o,
+  thead: i,
+  th: n,
+  alignCenter: s,
+  alignRight: c,
+  sortable: r,
+  sortIndicator: a,
+  active: l,
+  tbody: d,
+  tr: u,
+  td: x,
+  hoverable: b,
+  clickable: g,
+  striped: h,
+  bordered: p,
+  sm: m,
+  md: y,
+  lg: v,
+  empty: k
+};
+export {
+  l as active,
+  s as alignCenter,
+  c as alignRight,
+  p as bordered,
+  _ as borderless,
+  o as caption,
+  g as clickable,
+  t as container,
+  C as default,
+  k as empty,
+  b as hoverable,
+  v as lg,
+  y as md,
+  m as sm,
+  a as sortIndicator,
+  r as sortable,
+  h as striped,
+  e as table,
+  d as tbody,
+  x as td,
+  n as th,
+  i as thead,
+  u as tr
+};

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,142 @@
+import { ReactNode, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+
+/**
+ * Table sizes
+ */
+export type TableSize = "sm" | "md" | "lg";
+/**
+ * Sort direction
+ */
+export type SortDirection = "asc" | "desc" | null;
+/**
+ * Column definition
+ */
+export interface TableColumn<T = Record<string, unknown>> {
+    /**
+     * Column unique key (used as accessor for data)
+     */
+    key: string;
+    /**
+     * Column header label
+     */
+    header: ReactNode;
+    /**
+     * Custom cell renderer
+     * @param row - Row data
+     * @param rowIndex - Row index
+     * @returns Rendered cell content
+     */
+    cell?: (row: T, rowIndex: number) => ReactNode;
+    /**
+     * Column width (CSS value)
+     */
+    width?: string;
+    /**
+     * Enable sorting for this column
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Align cell content
+     * @default 'left'
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Additional props for header cell
+     */
+    headerProps?: ThHTMLAttributes<HTMLTableCellElement>;
+    /**
+     * Additional props for data cells
+     */
+    cellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+}
+/**
+ * Table component props
+ *
+ * @example
+ * ```tsx
+ * const columns: TableColumn<User>[] = [
+ *   { key: 'name', header: 'Name', sortable: true },
+ *   { key: 'email', header: 'Email' },
+ *   {
+ *     key: 'status',
+ *     header: 'Status',
+ *     cell: (user) => <Badge>{user.status}</Badge>
+ *   }
+ * ];
+ *
+ * <Table
+ *   columns={columns}
+ *   data={users}
+ *   onRowClick={(user) => console.log(user)}
+ * />
+ * ```
+ */
+export interface TableProps<T = Record<string, unknown>> {
+    /**
+     * Column definitions
+     */
+    columns: TableColumn<T>[];
+    /**
+     * Table data
+     */
+    data: T[];
+    /**
+     * Table size
+     * @default 'md'
+     */
+    size?: TableSize;
+    /**
+     * Striped rows
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Hoverable rows
+     * @default true
+     */
+    hoverable?: boolean;
+    /**
+     * Show borders
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Remove container border (for integration inside Cards)
+     * @default false
+     */
+    borderless?: boolean;
+    /**
+     * Table caption
+     */
+    caption?: ReactNode;
+    /**
+     * Empty state message
+     */
+    emptyMessage?: ReactNode;
+    /**
+     * Row click handler
+     */
+    onRowClick?: (row: T, rowIndex: number) => void;
+    /**
+     * Sort change handler
+     */
+    onSortChange?: (columnKey: string, direction: SortDirection) => void;
+    /**
+     * Current sort state (for controlled sorting)
+     */
+    sortState?: {
+        columnKey: string;
+        direction: SortDirection;
+    };
+    /**
+     * Row key extractor (for React keys)
+     * @default (row, index) => index
+     */
+    getRowKey?: (row: T, index: number) => string | number;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+//# sourceMappingURL=Table.types.d.ts.map

package/dist/components/Table/Table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACtD;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAE/C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;IAErD;;OAEG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;CACpD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACrD;;OAEG;IACH,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1B;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IAEV;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAErE;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,aAAa,CAAC;KAC1B,CAAC;IAEF;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Table/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Table Component - Tabular data display.
+ *
+ * @example
+ * ```tsx
+ * import { Table } from '@orion-ds/react';
+ *
+ * <Table
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'email', header: 'Email' },
+ *     { key: 'role', header: 'Role' },
+ *   ]}
+ *   data={[
+ *     { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+ *     { name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+ *   ]}
+ * />
+ * ```
+ */
+export { Table } from './Table';
+export type { TableProps, TableColumn, TableSize, SortDirection, } from './Table.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,GACd,MAAM,eAAe,CAAC"}

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.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TabsProps } from './Tabs.types';
+
+export declare const Tabs: React.FC<TabsProps>;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6JpC,CAAC"}

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/Tabs/Tabs.module.css

@@ -0,0 +1 @@
+._container_1wkqq_8{display:flex;flex-direction:column;width:100%}._tabList_1wkqq_15{display:flex;gap:var(--spacing-1);border-bottom:1px solid var(--border-subtle);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}._tabList_1wkqq_15::-webkit-scrollbar{display:none}._fullWidth_1wkqq_31 ._tabList_1wkqq_15{width:100%}._tab_1wkqq_15{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);white-space:nowrap;font-family:var(--font-secondary);font-size:var(--font-size-16);font-weight:var(--font-weight-medium);color:var(--text-secondary);line-height:var(--line-height-tight);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);outline:none}._tab_1wkqq_15:hover:not(:disabled){color:var(--text-primary);background:var(--interactive-ghost-hover)}._tab_1wkqq_15:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:-2px;border-radius:var(--radius-sm)}._tab_1wkqq_15:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}._fullWidth_1wkqq_31 ._tab_1wkqq_15{flex:1;justify-content:center}._active_1wkqq_89{color:var(--text-brand);border-bottom-color:var(--interactive-primary)}._active_1wkqq_89:hover{color:var(--text-brand)}._icon_1wkqq_99{width:20px;height:20px;flex-shrink:0}._badge_1wkqq_106{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--spacing-1);font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--text-inverse);background:var(--text-tertiary);border-radius:var(--radius-full);line-height:1}._active_1wkqq_89 ._badge_1wkqq_106{background:var(--interactive-primary)}._panel_1wkqq_126{padding:var(--spacing-4) 0;animation:_fadeIn_1wkqq_1 .2s ease}@keyframes _fadeIn_1wkqq_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){._panel_1wkqq_126{animation:none}}._noPanelPadding_1wkqq_150 ._panel_1wkqq_126{padding:0}

package/dist/components/Tabs/Tabs.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_container_1wkqq_8",n="_tabList_1wkqq_15",a="_fullWidth_1wkqq_31",e="_tab_1wkqq_15",_="_active_1wkqq_89",i="_icon_1wkqq_99",o="_badge_1wkqq_106",c="_panel_1wkqq_126",l="_noPanelPadding_1wkqq_150",d={container:t,tabList:n,fullWidth:a,tab:e,active:_,icon:i,badge:o,panel:c,noPanelPadding:l};exports.active=_;exports.badge=o;exports.container=t;exports.default=d;exports.fullWidth=a;exports.icon=i;exports.noPanelPadding=l;exports.panel=c;exports.tab=e;exports.tabList=n;

package/dist/components/Tabs/Tabs.module.css.mjs

@@ -0,0 +1,23 @@
+const n = "_container_1wkqq_8", t = "_tabList_1wkqq_15", _ = "_fullWidth_1wkqq_31", a = "_tab_1wkqq_15", o = "_active_1wkqq_89", c = "_icon_1wkqq_99", e = "_badge_1wkqq_106", i = "_panel_1wkqq_126", q = "_noPanelPadding_1wkqq_150", s = {
+  container: n,
+  tabList: t,
+  fullWidth: _,
+  tab: a,
+  active: o,
+  icon: c,
+  badge: e,
+  panel: i,
+  noPanelPadding: q
+};
+export {
+  o as active,
+  e as badge,
+  n as container,
+  s as default,
+  _ as fullWidth,
+  c as icon,
+  q as noPanelPadding,
+  i as panel,
+  a as tab,
+  t as tabList
+};

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+
+/**
+ * Tab item
+ */
+export interface TabItem {
+    /**
+     * Unique tab identifier
+     */
+    id: string;
+    /**
+     * Tab label
+     */
+    label: string;
+    /**
+     * Tab content
+     */
+    content: ReactNode;
+    /**
+     * Optional icon
+     */
+    icon?: ReactNode;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Badge/count indicator
+     */
+    badge?: string | number;
+}
+/**
+ * Tabs component props
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   tabs={[
+ *     { id: 'tab1', label: 'Profile', content: <Profile /> },
+ *     { id: 'tab2', label: 'Settings', content: <Settings /> }
+ *   ]}
+ * />
+ * ```
+ */
+export interface TabsProps {
+    /**
+     * Array of tabs
+     */
+    tabs: TabItem[];
+    /**
+     * Default active tab ID
+     */
+    defaultTab?: string;
+    /**
+     * Controlled active tab ID
+     */
+    activeTab?: string;
+    /**
+     * Callback when tab changes
+     */
+    onChange?: (tabId: string) => void;
+    /**
+     * Full width tabs
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Remove top and bottom padding from the tab panel.
+     * Useful when Tabs is inside a Card, Modal, or other padded container.
+     * @default false
+     */
+    noPanelPadding?: boolean;
+}
+//# sourceMappingURL=Tabs.types.d.ts.map

package/dist/components/Tabs/Tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAC;IAEhB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Tabs Component - Content section switching.
+ *
+ * @example
+ * ```tsx
+ * import { Tabs } from '@orion-ds/react';
+ *
+ * <Tabs
+ *   items={[
+ *     { id: 'overview', label: 'Overview', content: <OverviewPanel /> },
+ *     { id: 'settings', label: 'Settings', content: <SettingsPanel /> },
+ *     { id: 'users', label: 'Users', content: <UsersPanel /> },
+ *   ]}
+ *   defaultTab="overview"
+ * />
+ * ```
+ */
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

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.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextareaProps } from './Textarea.types';
+
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,eAAO,MAAM,QAAQ,2FA0LpB,CAAC"}