@orion-ds/react 4.8.0 → 4.9.1

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/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.mjs

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

package/dist/components/DatePicker/DatePicker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),d=require("date-fns"),O=require("lucide-react"),l=require("./DatePicker.module.css.cjs"),h=require("../Calendar/Calendar.cjs"),R=require("../Popover/Popover.cjs"),F=require("../Button/Button.cjs"),x=e=>{const{mode:a="single",min:S,max:b,disabledDates:v,placeholder:m="Pick a date",presets:i,format:c="PPP",disabled:C=!1,triggerClassName:P,className:N}=e,[k,o]=r.useState(!1),f=r.useMemo(()=>a==="single"&&e.mode!=="range"?e.selected?d.format(e.selected,c):null:a==="range"&&e.mode==="range"&&e.selected?.from?e.selected.to?`${d.format(e.selected.from,c)} - ${d.format(e.selected.to,c)}`:d.format(e.selected.from,c):null,[a,e,c]),g=r.useCallback(n=>{if(a==="single"&&e.mode!=="range"){const s=e.onSelect;s?.(n),o(!1)}else if(a==="range"&&e.mode==="range"){const s=e.onSelect,u=n;s?.(u),u?.from&&u?.to&&o(!1)}},[a,e]),q=r.useCallback(n=>{if(a==="single"&&e.mode!=="range"){const s=e.onSelect;s?.(n.value)}else if(a==="range"&&e.mode==="range"){const s=e.onSelect;s?.(n.value)}o(!1)},[a,e]),y=[l.default.trigger,P].filter(Boolean).join(" "),B=[l.default.wrapper,N].filter(Boolean).join(" "),j={min:S,max:b,disabled:v},D=t.jsxs("div",{className:l.default.popoverContent,children:[i&&i.length>0&&t.jsx("div",{className:l.default.presets,children:i.map(n=>t.jsx("button",{type:"button",className:l.default.presetButton,onClick:()=>q(n),children:n.label},n.label))}),a==="single"?t.jsx(h.Calendar,{mode:"single",selected:e.mode!=="range"?e.selected:void 0,onSelect:g,...j}):t.jsx(h.Calendar,{mode:"range",selected:e.mode==="range"?e.selected:void 0,onSelect:g,...j})]}),w=t.jsx(F.Button,{variant:"secondary",className:y,disabled:C,"aria-label":m,icon:t.jsx(O.Calendar,{size:16,className:l.default.triggerIcon}),children:f?t.jsx("span",{children:f}):t.jsx("span",{className:l.default.placeholder,children:m})});return t.jsx("div",{className:B,children:t.jsx(R.Popover,{trigger:w,content:D,placement:"bottom-start",open:k,onOpenChange:o,showArrow:!1,offset:4,className:l.default.popover})})};x.displayName="DatePicker";exports.DatePicker=x;

package/dist/components/DatePicker/DatePicker.mjs

@@ -0,0 +1,104 @@
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import { useState as O, useMemo as z, useCallback as h } from "react";
+import { format as c } from "date-fns";
+import { Calendar as A } from "lucide-react";
+import a from "./DatePicker.module.css.mjs";
+import { Calendar as S } from "../Calendar/Calendar.mjs";
+import { Popover as F } from "../Popover/Popover.mjs";
+import { Button as I } from "../Button/Button.mjs";
+const M = (e) => {
+  const {
+    mode: t = "single",
+    min: v,
+    max: C,
+    disabledDates: N,
+    placeholder: m = "Pick a date",
+    presets: i,
+    format: r = "PPP",
+    disabled: b = !1,
+    triggerClassName: P,
+    className: k
+  } = e, [x, s] = O(!1), f = z(() => t === "single" && e.mode !== "range" ? e.selected ? c(e.selected, r) : null : t === "range" && e.mode === "range" && e.selected?.from ? e.selected.to ? `${c(e.selected.from, r)} - ${c(e.selected.to, r)}` : c(e.selected.from, r) : null, [t, e, r]), g = h(
+    (l) => {
+      if (t === "single" && e.mode !== "range") {
+        const o = e.onSelect;
+        o?.(l), s(!1);
+      } else if (t === "range" && e.mode === "range") {
+        const o = e.onSelect, d = l;
+        o?.(d), d?.from && d?.to && s(!1);
+      }
+    },
+    [t, e]
+  ), y = h(
+    (l) => {
+      if (t === "single" && e.mode !== "range") {
+        const o = e.onSelect;
+        o?.(l.value);
+      } else if (t === "range" && e.mode === "range") {
+        const o = e.onSelect;
+        o?.(l.value);
+      }
+      s(!1);
+    },
+    [t, e]
+  ), j = [a.trigger, P].filter(Boolean).join(" "), w = [a.wrapper, k].filter(Boolean).join(" "), u = {
+    min: v,
+    max: C,
+    disabled: N
+  }, B = /* @__PURE__ */ $("div", { className: a.popoverContent, children: [
+    i && i.length > 0 && /* @__PURE__ */ n("div", { className: a.presets, children: i.map((l) => /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: a.presetButton,
+        onClick: () => y(l),
+        children: l.label
+      },
+      l.label
+    )) }),
+    t === "single" ? /* @__PURE__ */ n(
+      S,
+      {
+        mode: "single",
+        selected: e.mode !== "range" ? e.selected : void 0,
+        onSelect: g,
+        ...u
+      }
+    ) : /* @__PURE__ */ n(
+      S,
+      {
+        mode: "range",
+        selected: e.mode === "range" ? e.selected : void 0,
+        onSelect: g,
+        ...u
+      }
+    )
+  ] }), D = /* @__PURE__ */ n(
+    I,
+    {
+      variant: "secondary",
+      className: j,
+      disabled: b,
+      "aria-label": m,
+      icon: /* @__PURE__ */ n(A, { size: 16, className: a.triggerIcon }),
+      children: f ? /* @__PURE__ */ n("span", { children: f }) : /* @__PURE__ */ n("span", { className: a.placeholder, children: m })
+    }
+  );
+  return /* @__PURE__ */ n("div", { className: w, children: /* @__PURE__ */ n(
+    F,
+    {
+      trigger: D,
+      content: B,
+      placement: "bottom-start",
+      open: x,
+      onOpenChange: s,
+      showArrow: !1,
+      offset: 4,
+      className: a.popover
+    }
+  ) });
+};
+M.displayName = "DatePicker";
+export {
+  M as DatePicker
+};

package/dist/components/DetailPanel/DetailPanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),a=require("react"),P=require("lucide-react"),e=require("./DetailPanel.module.css.cjs"),u=a.forwardRef(({open:t,onClose:s,title:f,description:m,subtitle:d,children:v,size:h="md",position:y="right",headerActions:j,footer:n,overlay:N=!0,closeOnOverlayClick:x=!0,closeOnEscape:r=!0,loading:b=!1,className:p,...w},D)=>{const c=a.useRef(null),o=m??d;if(a.useEffect(()=>{d&&process.env.NODE_ENV==="development"&&console.warn('[DetailPanel] The "subtitle" prop is deprecated. Use "description" instead. subtitle will be removed in v3.0.')},[d]),a.useEffect(()=>{if(!t||!r)return;const i=k=>{k.key==="Escape"&&s()};return document.addEventListener("keydown",i),()=>document.removeEventListener("keydown",i)},[t,r,s]),a.useEffect(()=>{if(t){const i=document.body.style.overflow;return document.body.style.overflow="hidden",setTimeout(()=>{c.current?.focus()},0),()=>{document.body.style.overflow=i}}},[t]),!t)return null;const E=()=>{x&&s()},g=[e.default.panel,e.default[`size-${h}`],e.default[`position-${y}`],p].filter(Boolean).join(" ");return l.jsxs("div",{className:e.default.container,children:[N&&l.jsx("div",{className:e.default.overlay,onClick:E,"aria-hidden":"true"}),l.jsxs("div",{ref:D||c,className:g,role:"dialog","aria-modal":"true","aria-labelledby":"detail-panel-title",tabIndex:-1,...w,children:[l.jsxs("div",{className:e.default.header,children:[l.jsxs("div",{className:e.default.headerContent,children:[l.jsx("h2",{id:"detail-panel-title",className:e.default.title,children:f}),o&&l.jsx("p",{className:e.default.subtitle,children:o})]}),l.jsxs("div",{className:e.default.headerActions,children:[j,l.jsx("button",{type:"button",className:e.default.closeButton,onClick:s,"aria-label":"Close panel",children:l.jsx(P.X,{size:20})})]})]}),l.jsx("div",{className:e.default.body,children:b?l.jsx("div",{className:e.default.loading,children:l.jsx("div",{className:e.default.spinner})}):v}),n&&l.jsx("div",{className:e.default.footer,children:n})]})]})});u.displayName="DetailPanel";exports.DetailPanel=u;