@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/CommandBar/CommandBar.mjs

@@ -0,0 +1,193 @@
+import { jsx as a, jsxs as n, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as z, useState as E, useRef as C, useMemo as v, useEffect as y, useCallback as A } from "react";
+import { Search as q, Command as F } from "lucide-react";
+import s from "./CommandBar.module.css.mjs";
+const G = z(
+  ({
+    open: u,
+    onOpenChange: o,
+    commands: p,
+    recentCommands: i,
+    onSelect: L,
+    placeholder: $ = "Type a command or search...",
+    emptyMessage: I = "No results found.",
+    footer: k,
+    className: K,
+    ...M
+  }, R) => {
+    const [r, w] = E(""), [c, d] = E(0), g = C(null), x = C(null), D = v(() => {
+      if (!r) return p;
+      const e = r.toLowerCase();
+      return p.filter((t) => {
+        const l = t.label.toLowerCase().includes(e), m = t.description?.toLowerCase().includes(e), b = t.keywords?.some(
+          (T) => T.toLowerCase().includes(e)
+        );
+        return l || m || b;
+      });
+    }, [p, r]), f = v(() => {
+      const e = [], t = [];
+      return D.forEach((l) => {
+        if (l.category) {
+          const m = e.find((b) => b.title === l.category);
+          m ? m.commands.push(l) : e.push({ title: l.category, commands: [l] });
+        } else
+          t.push(l);
+      }), t.length > 0 && e.unshift({ title: "", commands: t }), e;
+    }, [D]), h = v(() => {
+      const e = [];
+      return i && i.length > 0 && !r && e.push(...i), f.forEach((t) => {
+        e.push(...t.commands);
+      }), e;
+    }, [f, i, r]);
+    y(() => {
+      u && (w(""), d(0), setTimeout(() => g.current?.focus(), 0));
+    }, [u]);
+    const B = A(
+      (e) => {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), d((t) => Math.min(t + 1, h.length - 1));
+            break;
+          case "ArrowUp":
+            e.preventDefault(), d((t) => Math.max(t - 1, 0));
+            break;
+          case "Enter": {
+            e.preventDefault();
+            const t = h[c];
+            t && !t.disabled && N(t);
+            break;
+          }
+          case "Escape":
+            e.preventDefault(), o(!1);
+            break;
+        }
+      },
+      [h, c, o]
+    ), N = (e) => {
+      L?.(e), e.onSelect(), o(!1);
+    };
+    if (y(() => {
+      const e = x.current;
+      if (!e) return;
+      const t = e.querySelector(`[data-index="${c}"]`);
+      t && t.scrollIntoView({ block: "nearest" });
+    }, [c]), y(() => {
+      const e = (t) => {
+        (t.metaKey || t.ctrlKey) && t.key === "k" && (t.preventDefault(), o(!u));
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [u, o]), !u) return null;
+    const H = [s.commandBar, K].filter(Boolean).join(" ");
+    let S = 0;
+    return /* @__PURE__ */ a("div", { className: s.overlay, onClick: () => o(!1), children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: R,
+        className: H,
+        onClick: (e) => e.stopPropagation(),
+        onKeyDown: B,
+        ...M,
+        children: [
+          /* @__PURE__ */ n("div", { className: s.inputWrapper, children: [
+            /* @__PURE__ */ a(q, { size: 18, className: s.searchIcon }),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: g,
+                type: "text",
+                className: s.input,
+                placeholder: $,
+                value: r,
+                onChange: (e) => {
+                  w(e.target.value), d(0);
+                },
+                autoComplete: "off",
+                autoCorrect: "off",
+                spellCheck: !1
+              }
+            ),
+            /* @__PURE__ */ a("kbd", { className: s.shortcutHint, children: "ESC" })
+          ] }),
+          /* @__PURE__ */ a("div", { ref: x, className: s.results, children: h.length === 0 ? /* @__PURE__ */ a("div", { className: s.empty, children: I }) : /* @__PURE__ */ n(j, { children: [
+            i && i.length > 0 && !r && /* @__PURE__ */ n("div", { className: s.group, children: [
+              /* @__PURE__ */ a("div", { className: s.groupTitle, children: "Recent" }),
+              i.map((e) => {
+                const t = S++;
+                return /* @__PURE__ */ n(
+                  "button",
+                  {
+                    type: "button",
+                    "data-index": t,
+                    className: `${s.item} ${t === c ? s.itemSelected : ""} ${e.disabled ? s.itemDisabled : ""}`,
+                    onClick: () => !e.disabled && N(e),
+                    onMouseEnter: () => d(t),
+                    children: [
+                      e.icon && /* @__PURE__ */ a("span", { className: s.itemIcon, children: e.icon }),
+                      /* @__PURE__ */ n("span", { className: s.itemContent, children: [
+                        /* @__PURE__ */ a("span", { className: s.itemLabel, children: e.label }),
+                        e.description && /* @__PURE__ */ a("span", { className: s.itemDescription, children: e.description })
+                      ] }),
+                      e.shortcut && /* @__PURE__ */ a("kbd", { className: s.itemShortcut, children: e.shortcut })
+                    ]
+                  },
+                  `recent-${e.id}`
+                );
+              })
+            ] }),
+            f.map((e) => /* @__PURE__ */ n(
+              "div",
+              {
+                className: s.group,
+                children: [
+                  e.title && /* @__PURE__ */ a("div", { className: s.groupTitle, children: e.title }),
+                  e.commands.map((t) => {
+                    const l = S++;
+                    return /* @__PURE__ */ n(
+                      "button",
+                      {
+                        type: "button",
+                        "data-index": l,
+                        className: `${s.item} ${l === c ? s.itemSelected : ""} ${t.disabled ? s.itemDisabled : ""}`,
+                        onClick: () => !t.disabled && N(t),
+                        onMouseEnter: () => d(l),
+                        children: [
+                          t.icon && /* @__PURE__ */ a("span", { className: s.itemIcon, children: t.icon }),
+                          /* @__PURE__ */ n("span", { className: s.itemContent, children: [
+                            /* @__PURE__ */ a("span", { className: s.itemLabel, children: t.label }),
+                            t.description && /* @__PURE__ */ a("span", { className: s.itemDescription, children: t.description })
+                          ] }),
+                          t.shortcut && /* @__PURE__ */ a("kbd", { className: s.itemShortcut, children: t.shortcut })
+                        ]
+                      },
+                      t.id
+                    );
+                  })
+                ]
+              },
+              e.title || "ungrouped"
+            ))
+          ] }) }),
+          k ? /* @__PURE__ */ a("div", { className: s.footer, children: k }) : /* @__PURE__ */ n("div", { className: s.footer, children: [
+            /* @__PURE__ */ n("span", { className: s.footerHint, children: [
+              /* @__PURE__ */ a(F, { size: 12 }),
+              " ",
+              /* @__PURE__ */ a("span", { children: "K to toggle" })
+            ] }),
+            /* @__PURE__ */ n("span", { className: s.footerHint, children: [
+              /* @__PURE__ */ a("span", { children: "↑↓" }),
+              " to navigate"
+            ] }),
+            /* @__PURE__ */ n("span", { className: s.footerHint, children: [
+              /* @__PURE__ */ a("span", { children: "↵" }),
+              " to select"
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+G.displayName = "CommandBar";
+export {
+  G as CommandBar
+};

package/dist/components/CommandBar/CommandBar.module.css

@@ -0,0 +1 @@
+._overlay_1qwde_8{position:fixed;inset:0;background:var(--surface-overlay);display:flex;align-items:flex-start;justify-content:center;padding-top:20vh;z-index:var(--z-modal);animation:_fadeIn_1qwde_1 .15s ease-out}@keyframes _fadeIn_1qwde_1{0%{opacity:0}to{opacity:1}}._commandBar_1qwde_29{width:100%;max-width:560px;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-container);box-shadow:var(--shadow-xl);overflow:hidden;animation:_slideIn_1qwde_1 .15s ease-out}@keyframes _slideIn_1qwde_1{0%{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}._inputWrapper_1qwde_55{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--border-subtle)}._searchIcon_1qwde_63{color:var(--text-tertiary);flex-shrink:0}._input_1qwde_55{flex:1;font-family:var(--font-secondary);font-size:var(--font-size-16);color:var(--text-primary);background:none;border:none;outline:none}._input_1qwde_55::placeholder{color:var(--text-tertiary)}._shortcutHint_1qwde_82{font-family:var(--font-mono);font-size:var(--font-size-11);color:var(--text-tertiary);background:var(--surface-subtle);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}._results_1qwde_96{max-height:400px;overflow-y:auto;padding:var(--spacing-2)}._empty_1qwde_102{padding:var(--spacing-8);text-align:center;font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-tertiary)}._group_1qwde_114{margin-bottom:var(--spacing-2)}._group_1qwde_114:last-child{margin-bottom:0}._groupTitle_1qwde_122{font-family:var(--font-secondary);font-size:var(--font-size-11);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:var(--spacing-2) var(--spacing-2)}._item_1qwde_136{display:flex;align-items:center;gap:var(--spacing-3);width:100%;padding:var(--spacing-2-5) var(--spacing-3);font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-primary);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background-color var(--mode-hover-duration)}._item_1qwde_136:hover,._itemSelected_1qwde_154{background:var(--surface-subtle)}._itemDisabled_1qwde_158{opacity:.5;cursor:not-allowed}._itemIcon_1qwde_163{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text-secondary);flex-shrink:0}._itemSelected_1qwde_154 ._itemIcon_1qwde_163{color:var(--interactive-primary)}._itemContent_1qwde_177{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}._itemLabel_1qwde_185{font-weight:var(--font-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._itemDescription_1qwde_192{font-size:var(--font-size-12);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._itemShortcut_1qwde_200{font-family:var(--font-mono);font-size:var(--font-size-11);color:var(--text-tertiary);background:var(--surface-subtle);padding:var(--spacing-0-5) var(--spacing-1-5);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);flex-shrink:0}._footer_1qwde_215{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2-5) var(--spacing-4);border-top:1px solid var(--border-subtle);background:var(--surface-subtle)}._footerHint_1qwde_224{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-secondary);font-size:var(--font-size-11);color:var(--text-tertiary)}._footerHint_1qwde_224 span{font-family:var(--font-mono)}@media(max-width:640px){._overlay_1qwde_8{padding-top:var(--spacing-4);padding-left:var(--spacing-4);padding-right:var(--spacing-4)}._commandBar_1qwde_29{max-width:100%}._results_1qwde_96{max-height:60vh}}

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_overlay_1qwde_8",e="_commandBar_1qwde_29",o="_inputWrapper_1qwde_55",i="_searchIcon_1qwde_63",n="_input_1qwde_55",_="_shortcutHint_1qwde_82",r="_results_1qwde_96",c="_empty_1qwde_102",s="_group_1qwde_114",m="_groupTitle_1qwde_122",d="_item_1qwde_136",u="_itemSelected_1qwde_154",p="_itemDisabled_1qwde_158",a="_itemIcon_1qwde_163",l="_itemContent_1qwde_177",q="_itemLabel_1qwde_185",w="_itemDescription_1qwde_192",h="_itemShortcut_1qwde_200",b="_footer_1qwde_215",f="_footerHint_1qwde_224",g={overlay:t,commandBar:e,inputWrapper:o,searchIcon:i,input:n,shortcutHint:_,results:r,empty:c,group:s,groupTitle:m,item:d,itemSelected:u,itemDisabled:p,itemIcon:a,itemContent:l,itemLabel:q,itemDescription:w,itemShortcut:h,footer:b,footerHint:f};exports.commandBar=e;exports.default=g;exports.empty=c;exports.footer=b;exports.footerHint=f;exports.group=s;exports.groupTitle=m;exports.input=n;exports.inputWrapper=o;exports.item=d;exports.itemContent=l;exports.itemDescription=w;exports.itemDisabled=p;exports.itemIcon=a;exports.itemLabel=q;exports.itemSelected=u;exports.itemShortcut=h;exports.overlay=t;exports.results=r;exports.searchIcon=i;exports.shortcutHint=_;

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

@@ -0,0 +1,45 @@
+const t = "_overlay_1qwde_8", e = "_commandBar_1qwde_29", o = "_inputWrapper_1qwde_55", _ = "_searchIcon_1qwde_63", n = "_input_1qwde_55", i = "_shortcutHint_1qwde_82", c = "_results_1qwde_96", s = "_empty_1qwde_102", r = "_group_1qwde_114", m = "_groupTitle_1qwde_122", d = "_item_1qwde_136", p = "_itemSelected_1qwde_154", a = "_itemDisabled_1qwde_158", u = "_itemIcon_1qwde_163", l = "_itemContent_1qwde_177", q = "_itemLabel_1qwde_185", w = "_itemDescription_1qwde_192", h = "_itemShortcut_1qwde_200", f = "_footer_1qwde_215", y = "_footerHint_1qwde_224", b = {
+  overlay: t,
+  commandBar: e,
+  inputWrapper: o,
+  searchIcon: _,
+  input: n,
+  shortcutHint: i,
+  results: c,
+  empty: s,
+  group: r,
+  groupTitle: m,
+  item: d,
+  itemSelected: p,
+  itemDisabled: a,
+  itemIcon: u,
+  itemContent: l,
+  itemLabel: q,
+  itemDescription: w,
+  itemShortcut: h,
+  footer: f,
+  footerHint: y
+};
+export {
+  e as commandBar,
+  b as default,
+  s as empty,
+  f as footer,
+  y as footerHint,
+  r as group,
+  m as groupTitle,
+  n as input,
+  o as inputWrapper,
+  d as item,
+  l as itemContent,
+  w as itemDescription,
+  a as itemDisabled,
+  u as itemIcon,
+  q as itemLabel,
+  p as itemSelected,
+  h as itemShortcut,
+  t as overlay,
+  c as results,
+  _ as searchIcon,
+  i as shortcutHint
+};

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

@@ -0,0 +1,108 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Command item for the palette
+ */
+export interface CommandItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Optional description
+     */
+    description?: string;
+    /**
+     * Icon element
+     */
+    icon?: ReactNode;
+    /**
+     * Keyboard shortcut display (e.g., "⌘K", "Ctrl+P")
+     */
+    shortcut?: string;
+    /**
+     * Category/group this command belongs to
+     */
+    category?: string;
+    /**
+     * Action callback
+     */
+    onSelect: () => void;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Keywords for search matching
+     */
+    keywords?: string[];
+}
+/**
+ * Command group for categorization
+ */
+export interface CommandGroup {
+    /**
+     * Group title
+     */
+    title: string;
+    /**
+     * Commands in this group
+     */
+    commands: CommandItem[];
+}
+/**
+ * CommandBar section props
+ *
+ * @example
+ * ```tsx
+ * <CommandBar
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   commands={[
+ *     { id: 'home', label: 'Go to Home', icon: <Home />, onSelect: () => navigate('/') },
+ *     { id: 'settings', label: 'Settings', icon: <Settings />, shortcut: '⌘,', onSelect: () => navigate('/settings') }
+ *   ]}
+ * />
+ * ```
+ */
+export interface CommandBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /**
+     * Whether the command bar is open
+     */
+    open: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Flat list of commands (will be grouped by category if specified)
+     */
+    commands: CommandItem[];
+    /**
+     * Recent commands to show at the top
+     */
+    recentCommands?: CommandItem[];
+    /**
+     * Callback when a command is selected
+     */
+    onSelect?: (command: CommandItem) => void;
+    /**
+     * Placeholder text for search input
+     * @default "Type a command or search..."
+     */
+    placeholder?: string;
+    /**
+     * Empty state message when no results
+     * @default "No results found."
+     */
+    emptyMessage?: string;
+    /**
+     * Custom footer content
+     */
+    footer?: ReactNode;
+}
+//# sourceMappingURL=CommandBar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandBar.types.d.ts","sourceRoot":"","sources":["../../../src/components/CommandBar/CommandBar.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,WAAW,EAAE,CAAC;CACzB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,QAAQ,EAAE,WAAW,EAAE,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAE/B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { CommandBar } from './CommandBar';
+export type { CommandBarProps, CommandItem, CommandGroup, } from './CommandBar.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommandBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,WAAW,EACX,YAAY,GACb,MAAM,oBAAoB,CAAC"}

package/dist/components/DataTable/DataTable.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),f=require("react"),b=require("lucide-react"),e=require("./DataTable.module.css.cjs"),q=f.forwardRef(({left:n,right:i,children:u,className:x,...k},r)=>a.jsxs("div",{ref:r,className:`${e.default.toolbar} ${x||""}`,...k,children:[n&&a.jsx("div",{className:e.default.toolbarLeft,children:n}),u,i&&a.jsx("div",{className:e.default.toolbarRight,children:i})]}));q.displayName="DataTable.Toolbar";const I=f.forwardRef(({pagination:n,onChange:i,className:u,...x},k)=>{const{page:r,pageSize:h,total:N,pageSizeOptions:T=[10,25,50,100]}=n,m=Math.ceil(N/h),M=(r-1)*h+1,y=Math.min(r*h,N),v=o=>{o>=1&&o<=m&&i({page:o,pageSize:h})},g=o=>{i({page:1,pageSize:Number(o.target.value)})};return a.jsxs("div",{ref:k,className:`${e.default.pagination} ${u||""}`,...x,children:[a.jsxs("div",{className:e.default.paginationInfo,children:[a.jsxs("span",{className:e.default.paginationText,children:[M,"-",y," of ",N]}),a.jsx("select",{className:e.default.pageSizeSelect,value:h,onChange:g,children:T.map(o=>a.jsxs("option",{value:o,children:[o," / page"]},o))})]}),a.jsxs("div",{className:e.default.paginationControls,children:[a.jsx("button",{type:"button",className:e.default.paginationButton,onClick:()=>v(r-1),disabled:r<=1,"aria-label":"Previous page",children:a.jsx(b.ChevronLeft,{size:16})}),a.jsxs("span",{className:e.default.paginationPages,children:[r," / ",m]}),a.jsx("button",{type:"button",className:e.default.paginationButton,onClick:()=>v(r+1),disabled:r>=m,"aria-label":"Next page",children:a.jsx(b.ChevronRight,{size:16})})]})]})});I.displayName="DataTable.Pagination";const R=f.forwardRef(({state:n,className:i,...u},x)=>a.jsxs("div",{ref:x,className:`${e.default.emptyState} ${i||""}`,...u,children:[n.icon&&a.jsx("div",{className:e.default.emptyIcon,children:n.icon}),a.jsx("h3",{className:e.default.emptyTitle,children:n.title}),n.description&&a.jsx("p",{className:e.default.emptyDescription,children:n.description}),n.action&&a.jsx("div",{className:e.default.emptyAction,children:n.action})]}));R.displayName="DataTable.EmptyState";function oe({columns:n,data:i,rowKey:u="id",searchable:x=!1,searchPlaceholder:k="Search...",searchValue:r,onSearchChange:h,pagination:N,onPaginationChange:T,selectable:m=!1,selectedKeys:M,onSelectionChange:y,bulkActions:v,rowActions:g,sort:o,onSortChange:S,emptyState:B,loading:E=!1,striped:K=!1,hoverable:W=!0,compact:w=!1,stickyHeader:H=!1,maxHeight:U,onRowClick:_,toolbar:z,className:F,...G},J){const[Q,X]=f.useState(""),[Y,O]=f.useState([]),[Z,ee]=f.useState(),[P,V]=f.useState(null),$=r??Q,d=M??Y,p=o??Z,A=f.useCallback((t,s)=>typeof u=="function"?u(t,s):t[u]??s,[u]),ae=t=>{const s=t.target.value;h?h(s):X(s)},te=t=>{if(!t.sortable)return;let s;p?.key===t.key?p.direction==="asc"?s={key:t.key,direction:"desc"}:s=void 0:s={key:t.key,direction:"asc"},S?S(s):ee(s)},se=()=>{const t=i.map((c,j)=>A(c,j)),s=d.length===i.length?[]:t;y?y(s):O(s)},le=t=>{const s=d.includes(t)?d.filter(c=>c!==t):[...d,t];y?y(s):O(s)},D=f.useMemo(()=>{let t=[...i];if(!h&&$){const s=$.toLowerCase();t=t.filter(c=>Object.values(c).some(j=>String(j).toLowerCase().includes(s)))}return!S&&p&&t.sort((s,c)=>{const j=s[p.key],l=c[p.key],L=String(j).localeCompare(String(l));return p.direction==="asc"?L:-L}),t},[i,$,p,h,S]),ne=[e.default.dataTable,w&&e.default.compact,F].filter(Boolean).join(" "),ie=[e.default.table,K&&e.default.striped,W&&e.default.hoverable,H&&e.default.stickyHeader].filter(Boolean).join(" "),ce=i.length>0&&d.length===i.length,de=d.length>0&&d.length<i.length,re={icon:a.jsx(b.Inbox,{size:48}),title:"No data",description:"There are no items to display."};return a.jsxs("div",{ref:J,className:ne,...G,children:[(x||z||m&&d.length>0)&&a.jsxs("div",{className:e.default.toolbar,children:[a.jsxs("div",{className:e.default.toolbarLeft,children:[m&&d.length>0&&v&&a.jsxs("div",{className:e.default.bulkActions,children:[a.jsxs("span",{className:e.default.selectedCount,children:[d.length," selected"]}),v.map(t=>a.jsxs("button",{type:"button",className:`${e.default.bulkAction} ${t.variant==="danger"?e.default.bulkActionDanger:""}`,onClick:()=>t.onClick(d),children:[t.icon,a.jsx("span",{children:t.label})]},t.key))]}),z]}),a.jsx("div",{className:e.default.toolbarRight,children:x&&a.jsxs("div",{className:e.default.searchWrapper,children:[a.jsx(b.Search,{size:16,className:e.default.searchIcon}),a.jsx("input",{type:"text",className:e.default.searchInput,placeholder:k,value:$,onChange:ae})]})})]}),a.jsx("div",{className:e.default.tableContainer,style:{maxHeight:U},children:E?a.jsx("div",{className:e.default.loadingOverlay,children:a.jsx("div",{className:e.default.spinner})}):D.length===0?a.jsx(R,{state:B||re}):a.jsxs("table",{className:ie,children:[a.jsx("thead",{className:e.default.thead,children:a.jsxs("tr",{children:[m&&a.jsx("th",{className:`${e.default.th} ${e.default.checkboxCell}`,children:a.jsx("input",{type:"checkbox",className:e.default.checkbox,checked:ce,ref:t=>{t&&(t.indeterminate=de)},onChange:se,"aria-label":"Select all rows"})}),n.map(t=>a.jsx("th",{className:`${e.default.th} ${t.sortable?e.default.sortable:""} ${t.sticky?e.default[`sticky-${t.sticky}`]:""} ${t.hideOnMobile?e.default.hideOnMobile:""}`,style:{width:t.width,minWidth:t.minWidth,textAlign:t.align},onClick:()=>te(t),children:a.jsxs("span",{className:e.default.thContent,children:[t.header,t.sortable&&a.jsx("span",{className:e.default.sortIcon,children:p?.key===t.key?p.direction==="asc"?a.jsx(b.ChevronUp,{size:14}):a.jsx(b.ChevronDown,{size:14}):a.jsx(b.ChevronUp,{size:14,className:e.default.sortIconInactive})})]})},t.key)),g&&g.length>0&&a.jsx("th",{className:`${e.default.th} ${e.default.actionsCell}`,children:a.jsx("span",{className:"sr-only",children:"Actions"})})]})}),a.jsx("tbody",{className:e.default.tbody,children:D.map((t,s)=>{const c=A(t,s),j=d.includes(c);return a.jsxs("tr",{className:`${e.default.tr} ${j?e.default.trSelected:""}`,onClick:l=>{l.target.closest(`.${e.default.checkbox}`)||l.target.closest(`.${e.default.actionMenu}`)||_?.(t,s)},children:[m&&a.jsx("td",{className:`${e.default.td} ${e.default.checkboxCell}`,children:a.jsx("input",{type:"checkbox",className:e.default.checkbox,checked:j,onChange:()=>le(c),"aria-label":`Select row ${s+1}`})}),n.map(l=>a.jsx("td",{className:`${e.default.td} ${l.sticky?e.default[`sticky-${l.sticky}`]:""} ${l.hideOnMobile?e.default.hideOnMobile:""}`,style:{textAlign:l.align},children:l.render?l.render(t[l.key],t,s):String(t[l.key]??"")},l.key)),g&&g.length>0&&a.jsx("td",{className:`${e.default.td} ${e.default.actionsCell}`,children:a.jsxs("div",{className:e.default.actionMenu,children:[a.jsx("button",{type:"button",className:e.default.actionMenuTrigger,onClick:()=>V(P===c?null:c),"aria-label":"Row actions",children:a.jsx(b.MoreHorizontal,{size:16})}),P===c&&a.jsx("div",{className:e.default.actionMenuDropdown,children:g.filter(l=>!l.show||l.show(t)).map(l=>a.jsxs("button",{type:"button",className:`${e.default.actionMenuItem} ${l.variant==="danger"?e.default.actionMenuItemDanger:""}`,onClick:()=>{l.onClick(t),V(null)},children:[l.icon,a.jsx("span",{children:l.label})]},l.key))})]})})]},c)})})]})}),N&&D.length>0&&a.jsx(I,{pagination:N,onChange:T||(()=>{})})]})}const C=f.forwardRef(oe);C.Toolbar=q;C.Pagination=I;C.EmptyState=R;exports.DataTable=C;

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,8 @@
+import { DataTableProps } from './DataTable.types';
+
+declare function DataTableInner<T extends Record<string, unknown>>({ columns, data, rowKey, searchable, searchPlaceholder, searchValue: controlledSearchValue, onSearchChange, pagination, onPaginationChange, selectable, selectedKeys: controlledSelectedKeys, onSelectionChange, bulkActions, rowActions, sort: controlledSort, onSortChange, emptyState, loading, striped, hoverable, compact, stickyHeader, maxHeight, onRowClick, toolbar, className, ...rest }: DataTableProps<T>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T extends Record<string, unknown>>(props: DataTableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof DataTableInner>;
+export {};
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EACV,cAAc,EAMf,MAAM,mBAAmB,CAAC;AAmH3B,iBAAS,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvD,EACE,OAAO,EACP,IAAI,EACJ,MAAwB,EACxB,UAAkB,EAClB,iBAA+B,EAC/B,WAAW,EAAE,qBAAqB,EAClC,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,UAAkB,EAClB,YAAY,EAAE,sBAAsB,EACpC,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,UAAU,EACV,OAAe,EACf,OAAe,EACf,SAAgB,EAChB,OAAe,EACf,YAAoB,EACpB,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,CAAC,EACpB,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,2CAqVxC;AAGD,eAAO,MAAM,SAAS,EAAiC,CACrD,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAEjC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACpE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC"}