@orion-ds/react 4.2.13 → 4.3.1

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;

package/dist/components/DetailPanel/DetailPanel.mjs

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

package/dist/components/Divider/Divider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("react"),e=require("./Divider.module.css.cjs"),l=c.forwardRef(({orientation:s="horizontal",variant:t="solid",spacing:d="md",label:r,className:o,...n},u)=>{const i=[e.default.divider,e.default[s],e.default[t],e.default[`spacing-${d}`],r&&e.default.withLabel,o].filter(Boolean).join(" ");return r&&s==="horizontal"?a.jsxs("div",{className:i,role:"separator","aria-orientation":s,children:[a.jsx("span",{className:e.default.line}),a.jsx("span",{className:e.default.label,children:r}),a.jsx("span",{className:e.default.line})]}):a.jsx("hr",{ref:u,className:i,role:"separator","aria-orientation":s,...n})});l.displayName="Divider";exports.Divider=l;

package/dist/components/Divider/Divider.mjs

@@ -0,0 +1,48 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import a from "./Divider.module.css.mjs";
+const p = d(
+  ({
+    orientation: r = "horizontal",
+    variant: o = "solid",
+    spacing: l = "md",
+    label: e,
+    className: m,
+    ...n
+  }, t) => {
+    const i = [
+      a.divider,
+      a[r],
+      a[o],
+      a[`spacing-${l}`],
+      e && a.withLabel,
+      m
+    ].filter(Boolean).join(" ");
+    return e && r === "horizontal" ? /* @__PURE__ */ c(
+      "div",
+      {
+        className: i,
+        role: "separator",
+        "aria-orientation": r,
+        children: [
+          /* @__PURE__ */ s("span", { className: a.line }),
+          /* @__PURE__ */ s("span", { className: a.label, children: e }),
+          /* @__PURE__ */ s("span", { className: a.line })
+        ]
+      }
+    ) : /* @__PURE__ */ s(
+      "hr",
+      {
+        ref: t,
+        className: i,
+        role: "separator",
+        "aria-orientation": r,
+        ...n
+      }
+    );
+  }
+);
+p.displayName = "Divider";
+export {
+  p as Divider
+};

package/dist/components/Drawer/Drawer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),g=require("react-dom"),a=require("./Drawer.module.css.cjs"),u=s.forwardRef(({children:e,className:r,...o},d)=>t.jsx("div",{ref:d,className:`${a.default.header} ${r||""}`,...o,children:e}));u.displayName="Drawer.Header";const f=s.forwardRef(({children:e,className:r,...o},d)=>t.jsx("div",{ref:d,className:`${a.default.body} ${r||""}`,...o,children:e}));f.displayName="Drawer.Body";const w=s.forwardRef(({children:e,className:r,...o},d)=>t.jsx("div",{ref:d,className:`${a.default.footer} ${r||""}`,...o,children:e}));w.displayName="Drawer.Footer";const m=s.forwardRef(({open:e,onClose:r,placement:o="right",size:d="md",closeOnBackdrop:n=!0,closeOnEscape:c=!0,showCloseButton:y=!0,children:v,className:b,...h},j)=>{const l=s.useCallback(i=>{c&&i.key==="Escape"&&r()},[c,r]),k=s.useCallback(()=>{n&&r()},[n,r]);if(s.useEffect(()=>{if(e){const i=document.body.style.overflow;return document.body.style.overflow="hidden",document.addEventListener("keydown",l),()=>{document.body.style.overflow=i,document.removeEventListener("keydown",l)}}},[e,l]),!e)return null;const x=[a.default.overlay,e&&a.default.overlayVisible].filter(Boolean).join(" "),D=[a.default.drawer,a.default[o],a.default[`size-${d}`],e&&a.default.drawerVisible,b].filter(Boolean).join(" "),N=t.jsxs("div",{className:x,children:[t.jsx("div",{className:a.default.backdrop,onClick:k,"aria-hidden":"true"}),t.jsxs("div",{ref:j,className:D,role:"dialog","aria-modal":"true",...h,children:[y&&t.jsx("button",{type:"button",className:a.default.closeButton,onClick:r,"aria-label":"Close drawer",children:t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M15 5L5 15M5 5L15 15",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),v]})]});return g.createPortal(N,document.body)});m.displayName="Drawer";const p=Object.assign(m,{Header:u,Body:f,Footer:w});exports.Drawer=p;