@fangxinyan/lumina 0.5.1 → 0.6.1

package/dist/{chunk-UQB5OHMO.js → chunk-XRR3CYQL.js}

@@ -1,31 +1,34 @@
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './AppShell-RCALXUCZ.css';
+import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/AppShell/AppShell.tsx
-var WindowControls = ({
+var WindowControls = React.forwardRef(({
   platform = "mac",
   onMinimize,
   onMaximize,
   onClose,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const noDragStyle = { WebkitAppRegion: "no-drag" };
   if (platform === "windows") {
-    return /* @__PURE__ */ jsxs("div", { className: `win-controls windows ${className}`, style: noDragStyle, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: `win-controls windows ${className}`, style: noDragStyle, ...rest, children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn minimize", onClick: onMinimize, "aria-label": "Minimize", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M1 5h8", stroke: "currentColor", strokeWidth: "1" }) }) }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn maximize", onClick: onMaximize, "aria-label": "Maximize", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "8", height: "8", stroke: "currentColor", strokeWidth: "1" }) }) }),
       /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1" }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `win-controls mac ${className}`, style: noDragStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: `win-controls mac ${className}`, style: noDragStyle, ...rest, children: [
     /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn close", onClick: onClose, "aria-label": "Close" }),
     /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn minimize", onClick: onMinimize, "aria-label": "Minimize" }),
     /* @__PURE__ */ jsx("button", { type: "button", className: "win-btn maximize", onClick: onMaximize, "aria-label": "Maximize" })
   ] });
-};
-var TitleBar = ({
+});
+WindowControls.displayName = "WindowControls";
+var TitleBar = React.forwardRef(({
   title,
   platform = "mac",
   onMinimize,
@@ -34,27 +37,30 @@ var TitleBar = ({
   center,
   actions,
   draggable = true,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const dragStyle = draggable ? { WebkitAppRegion: "drag" } : void 0;
   const noDragStyle = { WebkitAppRegion: "no-drag" };
-  return /* @__PURE__ */ jsxs("div", { className: `titlebar ${platform} ${className}`, style: dragStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: `titlebar ${platform} ${className}`, style: dragStyle, ...rest, children: [
     platform === "mac" && /* @__PURE__ */ jsx(WindowControls, { platform: "mac", onMinimize, onMaximize, onClose }),
     /* @__PURE__ */ jsx("div", { className: "titlebar-title", children: title }),
     center && /* @__PURE__ */ jsx("div", { className: "titlebar-center", style: noDragStyle, children: center }),
     actions && /* @__PURE__ */ jsx("div", { className: "titlebar-actions", style: noDragStyle, children: actions }),
     platform === "windows" && /* @__PURE__ */ jsx(WindowControls, { platform: "windows", onMinimize, onMaximize, onClose })
   ] });
-};
-var Sidebar = ({
+});
+TitleBar.displayName = "TitleBar";
+var Sidebar = React.forwardRef(({
   items,
   activeKey,
   onSelect,
   collapsed,
   header,
   footer,
-  className = ""
-}) => /* @__PURE__ */ jsxs("aside", { className: `sidebar ${collapsed ? "collapsed" : ""} ${className}`, children: [
+  className = "",
+  ...rest
+}, ref) => /* @__PURE__ */ jsxs("aside", { ref, className: `sidebar ${collapsed ? "collapsed" : ""} ${className}`, ...rest, children: [
   header && /* @__PURE__ */ jsx("div", { className: "sidebar-header", children: header }),
   /* @__PURE__ */ jsx("nav", { className: "sidebar-nav", children: items.map((it) => /* @__PURE__ */ jsxs(
     "button",
@@ -71,15 +77,15 @@ var Sidebar = ({
     it.key
   )) }),
   footer && /* @__PURE__ */ jsx("div", { className: "sidebar-footer", children: footer })
-] });
-var AppShell = ({ sidebar, titleBar, children, className = "" }) => /* @__PURE__ */ jsxs("div", { className: `app-shell ${className}`, children: [
+] }));
+Sidebar.displayName = "Sidebar";
+var AppShell = React.forwardRef(({ sidebar, titleBar, children, className = "", ...rest }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: `app-shell ${className}`, ...rest, children: [
   titleBar,
   /* @__PURE__ */ jsxs("div", { className: "app-shell-body", children: [
     sidebar,
     /* @__PURE__ */ jsx("main", { className: "app-shell-main", children })
   ] })
-] });
+] }));
+AppShell.displayName = "AppShell";
 
 export { AppShell, Sidebar, TitleBar, WindowControls };
-//# sourceMappingURL=chunk-UQB5OHMO.js.map
-//# sourceMappingURL=chunk-UQB5OHMO.js.map

package/dist/{chunk-V6466VMN.cjs → chunk-Y3ZSG3SJ.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkD26YHP2Y_cjs = require('./chunk-D26YHP2Y.cjs');
-var chunkUUY7EDVJ_cjs = require('./chunk-UUY7EDVJ.cjs');
-var chunk3XIDJEYR_cjs = require('./chunk-3XIDJEYR.cjs');
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunkEBNRZRWY_cjs = require('./chunk-EBNRZRWY.cjs');
+var chunkN57NXCNC_cjs = require('./chunk-N57NXCNC.cjs');
+var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Table-2LPTOUIR.css');
@@ -31,7 +31,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function Table({
+var TableInner = ({
   columns,
   data,
   rowKey,
@@ -50,8 +50,10 @@ function Table({
   scroll,
   onRowClick,
   empty = "\u6682\u65E0\u6570\u636E",
-  className = ""
-}) {
+  className = "",
+  style,
+  ...rest
+}, ref) => {
   const keyOf = React__namespace.useCallback(
     (row, i) => {
       if (typeof rowKey === "function") return rowKey(row);
@@ -233,139 +235,148 @@ function Table({
     wrapClass += " scroll-x";
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${wrapClass} ${className}`, style: wrapStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "table",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        className: `table ${v} ${hoverable ? "hoverable" : ""} ${scroll?.y != null ? "sticky-head" : ""}`,
-        style: innerTableStyle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-            showExpandCol && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "row-expand", style: { width: 40 } }),
-            showSelCol && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "row-check", style: { width: 44 }, children: selectionType === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkUUY7EDVJ_cjs.Checkbox,
-              {
-                checked: allSelectedOnPage,
-                indeterminate: someSelectedOnPage,
-                onChange: toggleAll
-              }
-            ) }),
-            columns.map((c) => {
-              const sorted = sortKey === c.key;
-              const hasFilters = !!c.filters?.length;
-              const filterActive = !!activeFilters[c.key]?.length;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                "th",
-                {
-                  className: `${c.sortable ? "sortable" : ""} ${sorted ? "sorted" : ""} ${hasFilters ? "filterable" : ""}`,
-                  style: { width: c.width, textAlign: c.align ?? "left" },
-                  onClick: () => c.sortable && onSort?.(c.key),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "th-label", children: c.title }),
-                    c.sortable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sort-ind", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      chunk3KQKEE5O_cjs.Icon,
-                      {
-                        name: sorted ? sortDir === "asc" ? "chevUp" : "chevDown" : "chevDown",
-                        size: 10
-                      }
-                    ) }),
-                    hasFilters && /* @__PURE__ */ jsxRuntime.jsx(
-                      ColumnFilterButton,
-                      {
-                        column: c,
-                        activeValues: activeFilters[c.key] ?? [],
-                        onApply: (values) => setColumnFilter(c, values),
-                        active: filterActive
-                      }
-                    )
-                  ]
-                },
-                c.key
-              );
-            })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rowsToRender.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColCount, className: "table-empty", children: empty }) }) : rowsToRender.map((row, i) => {
-            const k = keyOf(row, i);
-            const isSel = selectedKeys.includes(k);
-            const selProps = rowSelection?.getCheckboxProps?.(row);
-            const canExpand = hasExpandable && (expandable?.rowExpandable?.(row) ?? true);
-            const isExpanded = canExpand && expandedKeys.includes(k);
-            return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "tr",
-                {
-                  className: `${onRowClick ? "clickable" : ""} ${isSel ? "selected" : ""}`,
-                  onClick: onRowClick ? () => onRowClick(row, i) : void 0,
-                  children: [
-                    showExpandCol && /* @__PURE__ */ jsxRuntime.jsx(
-                      "td",
-                      {
-                        className: "row-expand",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          if (canExpand) toggleExpand(row, k);
-                        },
-                        children: canExpand && /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
+        ref,
+        className: `${wrapClass} ${className}`,
+        style: { ...wrapStyle, ...style },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "table",
+          {
+            className: `table ${v} ${hoverable ? "hoverable" : ""} ${scroll?.y != null ? "sticky-head" : ""}`,
+            style: innerTableStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+                showExpandCol && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "row-expand", style: { width: 40 } }),
+                showSelCol && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "row-check", style: { width: 44 }, children: selectionType === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkN57NXCNC_cjs.Checkbox,
+                  {
+                    checked: allSelectedOnPage,
+                    indeterminate: someSelectedOnPage,
+                    onChange: toggleAll
+                  }
+                ) }),
+                columns.map((c) => {
+                  const sorted = sortKey === c.key;
+                  const hasFilters = !!c.filters?.length;
+                  const filterActive = !!activeFilters[c.key]?.length;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "th",
+                    {
+                      className: `${c.sortable ? "sortable" : ""} ${sorted ? "sorted" : ""} ${hasFilters ? "filterable" : ""}`,
+                      style: { width: c.width, textAlign: c.align ?? "left" },
+                      onClick: () => c.sortable && onSort?.(c.key),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "th-label", children: c.title }),
+                        c.sortable && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sort-ind", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          chunk2MNAZRWE_cjs.Icon,
+                          {
+                            name: sorted ? sortDir === "asc" ? "chevUp" : "chevDown" : "chevDown",
+                            size: 10
+                          }
+                        ) }),
+                        hasFilters && /* @__PURE__ */ jsxRuntime.jsx(
+                          ColumnFilterButton,
+                          {
+                            column: c,
+                            activeValues: activeFilters[c.key] ?? [],
+                            onApply: (values) => setColumnFilter(c, values),
+                            active: filterActive
+                          }
+                        )
+                      ]
+                    },
+                    c.key
+                  );
+                })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rowsToRender.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColCount, className: "table-empty", children: empty }) }) : rowsToRender.map((row, i) => {
+                const k = keyOf(row, i);
+                const isSel = selectedKeys.includes(k);
+                const selProps = rowSelection?.getCheckboxProps?.(row);
+                const canExpand = hasExpandable && (expandable?.rowExpandable?.(row) ?? true);
+                const isExpanded = canExpand && expandedKeys.includes(k);
+                return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "tr",
+                    {
+                      className: `${onRowClick ? "clickable" : ""} ${isSel ? "selected" : ""}`,
+                      onClick: onRowClick ? () => onRowClick(row, i) : void 0,
+                      children: [
+                        showExpandCol && /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
                           {
-                            type: "button",
-                            className: `expand-btn ${isExpanded ? "open" : ""}`,
-                            "aria-expanded": isExpanded,
-                            "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                            className: "row-expand",
                             onClick: (e) => {
                               e.stopPropagation();
-                              toggleExpand(row, k);
+                              if (canExpand) toggleExpand(row, k);
                             },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "chevRight", size: 12 })
+                            children: canExpand && /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                className: `expand-btn ${isExpanded ? "open" : ""}`,
+                                "aria-expanded": isExpanded,
+                                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  toggleExpand(row, k);
+                                },
+                                children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "chevRight", size: 12 })
+                              }
+                            )
                           }
-                        )
-                      }
-                    ),
-                    showSelCol && /* @__PURE__ */ jsxRuntime.jsx(
-                      "td",
-                      {
-                        className: "row-check",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          toggleRow(row, k);
-                        },
-                        children: selectionType === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
-                          "button",
+                        ),
+                        showSelCol && /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
                           {
-                            type: "button",
-                            role: "radio",
-                            "aria-checked": isSel,
-                            disabled: selProps?.disabled,
-                            className: `radio-dot ${isSel ? "checked" : ""}`,
+                            className: "row-check",
                             onClick: (e) => {
                               e.stopPropagation();
                               toggleRow(row, k);
-                            }
-                          }
-                        ) : /* @__PURE__ */ jsxRuntime.jsx(
-                          chunkUUY7EDVJ_cjs.Checkbox,
-                          {
-                            checked: isSel,
-                            disabled: selProps?.disabled,
-                            onChange: () => toggleRow(row, k)
+                            },
+                            children: selectionType === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                role: "radio",
+                                "aria-checked": isSel,
+                                disabled: selProps?.disabled,
+                                className: `radio-dot ${isSel ? "checked" : ""}`,
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  toggleRow(row, k);
+                                }
+                              }
+                            ) : /* @__PURE__ */ jsxRuntime.jsx(
+                              chunkN57NXCNC_cjs.Checkbox,
+                              {
+                                checked: isSel,
+                                disabled: selProps?.disabled,
+                                onChange: () => toggleRow(row, k)
+                              }
+                            )
                           }
-                        )
-                      }
-                    ),
-                    columns.map((c) => {
-                      const val = c.dataIndex ? row[c.dataIndex] : void 0;
-                      return /* @__PURE__ */ jsxRuntime.jsx("td", { style: { textAlign: c.align ?? "left" }, children: c.render ? c.render(val, row, i) : val }, c.key);
-                    })
-                  ]
-                }
-              ),
-              isExpanded && expandable?.expandedRowRender && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "expanded-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColCount, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "expanded-panel", children: expandable.expandedRowRender(row, i) }) }) })
-            ] }, k);
-          }) })
-        ]
+                        ),
+                        columns.map((c) => {
+                          const val = c.dataIndex ? row[c.dataIndex] : void 0;
+                          return /* @__PURE__ */ jsxRuntime.jsx("td", { style: { textAlign: c.align ?? "left" }, children: c.render ? c.render(val, row, i) : val }, c.key);
+                        })
+                      ]
+                    }
+                  ),
+                  isExpanded && expandable?.expandedRowRender && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "expanded-row", children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColCount, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "expanded-panel", children: expandable.expandedRowRender(row, i) }) }) })
+                ] }, k);
+              }) })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     pagEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-pagination", children: /* @__PURE__ */ jsxRuntime.jsx(
-      chunkD26YHP2Y_cjs.Pagination,
+      chunkEBNRZRWY_cjs.Pagination,
       {
         total: totalCount,
         pageSize: curPageSize,
@@ -374,7 +385,9 @@ function Table({
       }
     ) })
   ] });
-}
+};
+var Table = React__namespace.forwardRef(TableInner);
+Table.displayName = "Table";
 function ColumnFilterButton({
   column,
   activeValues,
@@ -384,7 +397,7 @@ function ColumnFilterButton({
   const [open, setOpen] = React__namespace.useState(false);
   const [draft, setDraft] = React__namespace.useState(activeValues);
   const panelRef = React__namespace.useRef(null);
-  const { triggerRef, floatingStyle } = chunk3XIDJEYR_cjs.useFloating({
+  const { triggerRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
     open,
     placement: "bottom",
     panelWidth: 200,
@@ -418,7 +431,7 @@ function ColumnFilterButton({
           e.stopPropagation();
           setOpen((o) => !o);
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "filter", size: 10 })
+        children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "filter", size: 10 })
       }
     ),
     open && typeof document !== "undefined" && reactDom.createPortal(
@@ -432,7 +445,7 @@ function ColumnFilterButton({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "table-filter-options", children: (column.filters ?? []).map((f) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "table-filter-item", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                chunkUUY7EDVJ_cjs.Checkbox,
+                chunkN57NXCNC_cjs.Checkbox,
                 {
                   checked: draft.includes(f.value),
                   onChange: () => toggle(f.value)
@@ -495,5 +508,3 @@ function TablePro({
 
 exports.Table = Table;
 exports.TablePro = TablePro;
-//# sourceMappingURL=chunk-V6466VMN.cjs.map
-//# sourceMappingURL=chunk-V6466VMN.cjs.map

package/dist/{chunk-GT45MQAK.cjs → chunk-Y47YTYQ3.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkU7TAQLPN_cjs = require('./chunk-U7TAQLPN.cjs');
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunk62GU4OHH_cjs = require('./chunk-62GU4OHH.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Modal-XSDMU4XJ.css');
@@ -33,7 +33,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 var ANIM_MS = 280;
-var Modal = ({
+var Modal = React__namespace.forwardRef(({
   open,
   onClose,
   onCancel,
@@ -55,8 +55,11 @@ var Modal = ({
   destroyOnClose = false,
   afterOpenChange,
   zIndex,
-  className = ""
-}) => {
+  className = "",
+  style,
+  onClick,
+  ...rest
+}, ref) => {
   const [hasOpenedOnce, setHasOpenedOnce] = React__namespace.useState(open);
   React__namespace.useEffect(() => {
     if (open) setHasOpenedOnce(true);
@@ -88,9 +91,9 @@ var Modal = ({
   if (!open && destroyOnClose) return null;
   const overlayStyle = zIndex != null ? { zIndex } : void 0;
   const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(chunkU7TAQLPN_cjs.Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk62GU4OHH_cjs.Button, { variant: "ghost", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkU7TAQLPN_cjs.Button,
+      chunk62GU4OHH_cjs.Button,
       {
         variant: "primary",
         loading: confirmLoading,
@@ -111,12 +114,17 @@ var Modal = ({
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            ref,
             className: "modal",
-            style: { width },
-            onClick: (e) => e.stopPropagation(),
+            style: { width, ...style },
+            onClick: (e) => {
+              onClick?.(e);
+              e.stopPropagation();
+            },
             role: "dialog",
             "aria-modal": true,
             "aria-hidden": !open,
+            ...rest,
             children: [
               (title || description || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-head", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modal-titles", children: [
@@ -130,7 +138,7 @@ var Modal = ({
                     className: "modal-close",
                     onClick: handleCancel,
                     "aria-label": "Close",
-                    children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "x", size: 16 })
+                    children: closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "x", size: 16 })
                   }
                 )
               ] }),
@@ -143,8 +151,7 @@ var Modal = ({
     ),
     document.body
   );
-};
+});
+Modal.displayName = "Modal";
 
 exports.Modal = Modal;
-//# sourceMappingURL=chunk-GT45MQAK.cjs.map
-//# sourceMappingURL=chunk-GT45MQAK.cjs.map

package/dist/{chunk-3XIDJEYR.cjs → chunk-YB3IWIOJ.cjs}

@@ -142,5 +142,3 @@ function useFloating(opts) {
 }
 
 exports.useFloating = useFloating;
-//# sourceMappingURL=chunk-3XIDJEYR.cjs.map
-//# sourceMappingURL=chunk-3XIDJEYR.cjs.map

package/dist/{chunk-7YQWG7HR.cjs → chunk-YLIQ37KY.cjs}

@@ -3,43 +3,74 @@
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./StatusBar-CDS2GPSI.css');
+var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 // src/components/StatusBar/StatusBar.tsx
-var StatusBarItem = ({
+var StatusBarItem = React__namespace.forwardRef(({
   icon,
   tone = "default",
   onClick,
   className = "",
   children,
   ...rest
-}) => {
+}, ref) => {
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "statusbar-item-icon", children: icon }),
     children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "statusbar-item-label", children })
   ] });
   const cls = `statusbar-item tone-${tone} ${onClick ? "clickable" : ""} ${className}`;
   if (onClick) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cls, onClick, children: content });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cls,
+        onClick,
+        children: content
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, ...rest, children: content });
-};
-var StatusBar = ({
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls, ...rest, children: content });
+});
+StatusBarItem.displayName = "StatusBarItem";
+var StatusBarBase = React__namespace.forwardRef(({
   left,
   center,
   right,
   className = "",
   children,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `statusbar ${className}`, role: "status", ...rest, children: [
+}, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `statusbar ${className}`, role: "status", ...rest, children: [
   left != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "statusbar-section left", children: left }),
   center != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "statusbar-section center", children: center }),
   children,
   right != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "statusbar-section right", children: right })
-] });
+] }));
+StatusBarBase.displayName = "StatusBar";
+var StatusBar = StatusBarBase;
 StatusBar.Item = StatusBarItem;
 
 exports.StatusBar = StatusBar;
 exports.StatusBarItem = StatusBarItem;
-//# sourceMappingURL=chunk-7YQWG7HR.cjs.map
-//# sourceMappingURL=chunk-7YQWG7HR.cjs.map

package/dist/{chunk-JELHUUM5.js → chunk-YRZGXXWA.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-X3JG3IR6.js';
+import { Icon } from './chunk-NJ6B22YJ.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Button-SDQD25AG.css';
@@ -62,5 +62,3 @@ var IconButton = React.forwardRef(
 IconButton.displayName = "IconButton";
 
 export { Button, IconButton };
-//# sourceMappingURL=chunk-JELHUUM5.js.map
-//# sourceMappingURL=chunk-JELHUUM5.js.map