@fangxinyan/lumina 0.5.1 → 0.6.1

package/dist/{chunk-NS3C2ZSE.js → chunk-7PQJCLIR.js}

@@ -1,10 +1,11 @@
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Avatar-R5A4AFKZ.css';
+import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Avatar/Avatar.tsx
-var Avatar = ({
+var Avatar = React.forwardRef(({
   src,
   alt = "",
   initials,
@@ -14,7 +15,7 @@ var Avatar = ({
   className = "",
   style,
   ...rest
-}) => {
+}, ref) => {
   const sizeCls = typeof size === "string" && size !== "md" ? size : "";
   const shapeCls = shape === "square" ? "square" : "";
   const customStyle = typeof size === "number" ? { ["--size"]: `${size}px`, ...style } : style ?? {};
@@ -22,6 +23,7 @@ var Avatar = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref,
       className: `avatar ${sizeCls} ${shapeCls} ${className}`.trim().replace(/\s+/g, " "),
       style: customStyle,
       ...rest,
@@ -31,8 +33,7 @@ var Avatar = ({
       ]
     }
   );
-};
+});
+Avatar.displayName = "Avatar";
 
 export { Avatar };
-//# sourceMappingURL=chunk-NS3C2ZSE.js.map
-//# sourceMappingURL=chunk-NS3C2ZSE.js.map

package/dist/{chunk-FLPHVK45.js → chunk-D46EM4EN.js}

@@ -1,10 +1,11 @@
-import { Icon } from './chunk-X3JG3IR6.js';
+import { Icon } from './chunk-NJ6B22YJ.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Alert-JJ7GB3UU.css';
+import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var Alert = ({
+var Alert = React.forwardRef(({
   tone = "info",
   title,
   children,
@@ -13,14 +14,17 @@ var Alert = ({
   closable,
   onClose,
   action,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const iconName = icon ?? (tone === "success" ? "check2" : tone === "warning" || tone === "danger" ? "alert" : "info");
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref,
       className: `alert ${tone} ${title ? "" : "no-title"} ${showIcon ? "" : "no-icon"} ${className}`,
       role: "alert",
+      ...rest,
       children: [
         showIcon && /* @__PURE__ */ jsx("span", { className: "alert-ico", children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 14 }) }),
         /* @__PURE__ */ jsxs("div", { className: "alert-body", children: [
@@ -32,8 +36,7 @@ var Alert = ({
       ]
     }
   );
-};
+});
+Alert.displayName = "Alert";
 
 export { Alert };
-//# sourceMappingURL=chunk-FLPHVK45.js.map
-//# sourceMappingURL=chunk-FLPHVK45.js.map

package/dist/{chunk-5SJJI3HL.js → chunk-DOMYUGJY.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-JELHUUM5.js';
-import { Icon } from './chunk-X3JG3IR6.js';
+import { Button } from './chunk-YRZGXXWA.js';
+import { Icon } from './chunk-NJ6B22YJ.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './Modal-XSDMU4XJ.css';
@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var ANIM_MS = 280;
-var Modal = ({
+var Modal = React.forwardRef(({
   open,
   onClose,
   onCancel,
@@ -30,8 +30,11 @@ var Modal = ({
   destroyOnClose = false,
   afterOpenChange,
   zIndex,
-  className = ""
-}) => {
+  className = "",
+  style,
+  onClick,
+  ...rest
+}, ref) => {
   const [hasOpenedOnce, setHasOpenedOnce] = React.useState(open);
   React.useEffect(() => {
     if (open) setHasOpenedOnce(true);
@@ -86,12 +89,17 @@ var Modal = ({
         children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "modal-head", children: [
                 /* @__PURE__ */ jsxs("div", { className: "modal-titles", children: [
@@ -118,8 +126,7 @@ var Modal = ({
     ),
     document.body
   );
-};
+});
+Modal.displayName = "Modal";
 
 export { Modal };
-//# sourceMappingURL=chunk-5SJJI3HL.js.map
-//# sourceMappingURL=chunk-5SJJI3HL.js.map

package/dist/{chunk-GB5NAXBP.js → chunk-DPNDHNKK.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 './Input-33CAH4O6.css';
@@ -183,5 +183,3 @@ var Textarea = React.forwardRef(
 Textarea.displayName = "Textarea";
 
 export { Input, Textarea };
-//# sourceMappingURL=chunk-GB5NAXBP.js.map
-//# sourceMappingURL=chunk-GB5NAXBP.js.map

package/dist/{chunk-ANAQER3T.js → chunk-DUFRASGO.js}

@@ -120,5 +120,3 @@ function useFloating(opts) {
 }
 
 export { useFloating };
-//# sourceMappingURL=chunk-ANAQER3T.js.map
-//# sourceMappingURL=chunk-ANAQER3T.js.map

package/dist/{chunk-D26YHP2Y.cjs → chunk-EBNRZRWY.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkD3GZSL2B_cjs = require('./chunk-D3GZSL2B.cjs');
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunkFIO65XYG_cjs = require('./chunk-FIO65XYG.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Pagination-YIRYJUXP.css');
@@ -29,7 +29,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var DEFAULT_SIZE_OPTIONS = [10, 20, 50, 100];
-var Pagination = ({
+var Pagination = React__namespace.forwardRef(({
   total,
   pageSize = 10,
   page,
@@ -40,8 +40,9 @@ var Pagination = ({
   showSizeChanger = false,
   pageSizeOptions = DEFAULT_SIZE_OPTIONS,
   onShowSizeChange,
-  className = ""
-}) => {
+  className = "",
+  ...rest
+}, ref) => {
   const [inner, setInner] = React__namespace.useState(defaultPage);
   const isControlled = page !== void 0;
   const cur = isControlled ? page : inner;
@@ -79,7 +80,7 @@ var Pagination = ({
     if (pages > 1) add(pages);
     return out;
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `pagination ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `pagination ${className}`, ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pg-info", children: [
       "\u5171 ",
       total,
@@ -97,7 +98,7 @@ var Pagination = ({
           className: `pg ${cur === 1 ? "disabled" : ""}`,
           onClick: () => cur > 1 && go(cur - 1),
           "aria-label": "Previous",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "chevLeft", size: 12 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "chevLeft", size: 12 })
         }
       ),
       range().map(
@@ -119,11 +120,11 @@ var Pagination = ({
           className: `pg ${cur === pages ? "disabled" : ""}`,
           onClick: () => cur < pages && go(cur + 1),
           "aria-label": "Next",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "chevRight", size: 12 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "chevRight", size: 12 })
         }
       ),
       showSizeChanger && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pg-size-changer", children: /* @__PURE__ */ jsxRuntime.jsx(
-        chunkD3GZSL2B_cjs.Select,
+        chunkFIO65XYG_cjs.Select,
         {
           value: pageSize,
           size: "sm",
@@ -149,8 +150,7 @@ var Pagination = ({
       ] })
     ] })
   ] });
-};
+});
+Pagination.displayName = "Pagination";
 
 exports.Pagination = Pagination;
-//# sourceMappingURL=chunk-D26YHP2Y.cjs.map
-//# sourceMappingURL=chunk-D26YHP2Y.cjs.map

package/dist/{chunk-IHACXMOI.js → chunk-EC4WGEAJ.js}

@@ -144,7 +144,7 @@ function getStore(instance) {
   return instance[STORE_SYMBOL];
 }
 var FormCtx = React.createContext(null);
-var FormRoot = (props) => {
+var FormRootInner = (props, ref) => {
   const {
     form: externalForm,
     layout = "horizontal",
@@ -190,6 +190,7 @@ var FormRoot = (props) => {
   return /* @__PURE__ */ jsx(FormCtx.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
     "form",
     {
+      ref,
       className: `lumina-form layout-${layout} ${className}`,
       onSubmit: (e) => {
         e.preventDefault();
@@ -200,6 +201,8 @@ var FormRoot = (props) => {
     }
   ) });
 };
+var FormRoot = React.forwardRef(FormRootInner);
+FormRoot.displayName = "Form";
 var extractValue = (valuePropName, args) => {
   const first = args[0];
   if (first && typeof first === "object") {
@@ -303,5 +306,3 @@ Form.Item = FormItem;
 Form.useForm = useForm;
 
 export { Form, FormItem, useForm };
-//# sourceMappingURL=chunk-IHACXMOI.js.map
-//# sourceMappingURL=chunk-IHACXMOI.js.map

package/dist/{chunk-TAYFI4RG.cjs → chunk-EEMWQX3C.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkXUT2Z2L6_cjs = require('./chunk-XUT2Z2L6.cjs');
+var chunkGY3BSHHS_cjs = require('./chunk-GY3BSHHS.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Timeline-RHZAZKZ7.css');
@@ -96,7 +96,7 @@ var TimelineItem = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-label", children: item.label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "timeline-item-head", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkXUT2Z2L6_cjs.Spinner, { size: 14 })) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkGY3BSHHS_cjs.Spinner, { size: 14 })) }),
       !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-tail" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-content", children: item.children })
@@ -104,5 +104,3 @@ var TimelineItem = ({
 };
 
 exports.Timeline = Timeline;
-//# sourceMappingURL=chunk-TAYFI4RG.cjs.map
-//# sourceMappingURL=chunk-TAYFI4RG.cjs.map

package/dist/{chunk-D3GZSL2B.cjs → chunk-FIO65XYG.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkWKNVNN2K_cjs = require('./chunk-WKNVNN2K.cjs');
-var chunk3XIDJEYR_cjs = require('./chunk-3XIDJEYR.cjs');
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunkLZU33BX6_cjs = require('./chunk-LZU33BX6.cjs');
+var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Select-J3CCVFJ7.css');
@@ -37,7 +37,7 @@ var defaultFilter = (input, opt) => {
   const txt = opt.text ?? (typeof opt.label === "string" ? opt.label : String(opt.value));
   return txt.toLowerCase().includes(q);
 };
-function Select(props) {
+var SelectInner = (props, forwardedRef) => {
   const {
     options,
     placeholder = "\u8BF7\u9009\u62E9\u2026",
@@ -53,9 +53,17 @@ function Select(props) {
     defaultOpen,
     onOpenChange,
     className = "",
-    menuClassName = ""
+    menuClassName = "",
+    onKeyDown: onRootKeyDown,
+    multiple,
+    value: _value,
+    defaultValue: _defaultValue,
+    onChange: _selectionChange,
+    onClear: _onClear,
+    maxTagCount: _maxTagCount,
+    ...rest
   } = props;
-  const isMulti = props.multiple === true;
+  const isMulti = multiple === true;
   const [innerSingle, setInnerSingle] = React__namespace.useState(
     !isMulti ? props.defaultValue : void 0
   );
@@ -73,12 +81,20 @@ function Select(props) {
     onOpenChange?.(v);
     if (!v) setQuery("");
   };
-  const { triggerRef: ref, floatingRef: menuRef, floatingStyle } = chunk3XIDJEYR_cjs.useFloating({
+  const { triggerRef, floatingRef: menuRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
     open,
     placement: "bottom",
     matchTriggerWidth: true,
     panelHeight: 320
   });
+  const setTriggerRef = React__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef, triggerRef]
+  );
   const singleControlled = !isMulti && props.value !== void 0;
   const multiControlled = isMulti && props.value !== void 0;
   const singleValue = singleControlled ? props.value : innerSingle;
@@ -87,7 +103,7 @@ function Select(props) {
     if (!open) return;
     const h = (e) => {
       const t = e.target;
-      if (ref.current?.contains(t)) return;
+      if (triggerRef.current?.contains(t)) return;
       if (menuRef.current?.contains(t)) return;
       setOpen(false);
     };
@@ -187,7 +203,7 @@ function Select(props) {
       }
       return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-tags", children: [
         shown.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
-          chunkWKNVNN2K_cjs.Tag,
+          chunkLZU33BX6_cjs.Tag,
           {
             tone: "accent",
             removable: !disabled,
@@ -202,7 +218,7 @@ function Select(props) {
           },
           String(o.value)
         )),
-        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkWKNVNN2K_cjs.Tag, { tone: "neutral", children: [
+        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkLZU33BX6_cjs.Tag, { tone: "neutral", children: [
           "+",
           overflow
         ] })
@@ -211,7 +227,7 @@ function Select(props) {
     const current = allFlat.find((o) => o.value === singleValue);
     if (!current) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder });
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-value", children: [
-      current.icon && /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: current.icon, size: 14 }),
+      current.icon && /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: current.icon, size: 14 }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: current.label })
     ] });
   };
@@ -234,13 +250,13 @@ function Select(props) {
         onMouseEnter: () => setActiveIdx(idx),
         onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
         children: [
-          isMulti && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "check", size: 11, stroke: 3 }) }),
-          o.icon && /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: o.icon, size: 14 }),
+          isMulti && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "check", size: 11, stroke: 3 }) }),
+          o.icon && /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: o.icon, size: 14 }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "menu-item-body", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-item-label", children: o.label }),
             o.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-item-desc", children: o.description })
           ] }),
-          !isMulti && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tick", children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "check", size: 12, stroke: 3 }) })
+          !isMulti && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tick", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "check", size: 12, stroke: 3 }) })
         ]
       },
       String(o.value)
@@ -249,10 +265,14 @@ function Select(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      ref: setTriggerRef,
+      ...rest,
       className: `select ${size} ${isMulti ? "multi" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
-      onKeyDown,
-      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        onRootKeyDown?.(e);
+        onKeyDown(e);
+      },
+      tabIndex: disabled ? -1 : rest.tabIndex ?? 0,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -263,8 +283,8 @@ function Select(props) {
             onClick: () => !disabled && setOpen(!open),
             children: [
               renderTrigger(),
-              showClear && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-clear", role: "button", "aria-label": "Clear", onClick: clearAll, children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "x", size: 12 }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "chevDown", size: 14, className: "select-caret" })
+              showClear && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-clear", role: "button", "aria-label": "Clear", onClick: clearAll, children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "x", size: 12 }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "chevDown", size: 14, className: "select-caret" })
             ]
           }
         ),
@@ -279,7 +299,7 @@ function Select(props) {
               style: floatingStyle,
               children: [
                 searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-search", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "search", size: 13 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "search", size: 13 }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "input",
                     {
@@ -301,7 +321,7 @@ function Select(props) {
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner" }) }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
                 ] }) : filteredItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "search", size: 16 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "search", size: 16 }) }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
                 ] }) : filteredItems.map(
                   (it, gi) => isGroup(it) ? /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
@@ -317,8 +337,8 @@ function Select(props) {
       ]
     }
   );
-}
+};
+var Select = React__namespace.forwardRef(SelectInner);
+Select.displayName = "Select";
 
 exports.Select = Select;
-//# sourceMappingURL=chunk-D3GZSL2B.cjs.map
-//# sourceMappingURL=chunk-D3GZSL2B.cjs.map

package/dist/{chunk-P2AV5BD7.cjs → chunk-G2K6ETP4.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3XIDJEYR_cjs = require('./chunk-3XIDJEYR.cjs');
+var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Popover-DVGQGWX6.css');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var Popover = ({
+var Popover = React__namespace.forwardRef(({
   content,
   title,
   placement = "bottom",
@@ -40,8 +40,12 @@ var Popover = ({
   open,
   onOpenChange,
   children,
-  className = ""
-}) => {
+  className = "",
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
+}, ref) => {
   const [inner, setInner] = React__namespace.useState(defaultOpen);
   const isControlled = open !== void 0;
   const show = isControlled ? open : inner;
@@ -51,7 +55,7 @@ var Popover = ({
     floatingRef,
     floatingStyle,
     placement: resolved
-  } = chunk3XIDJEYR_cjs.useFloating({
+  } = chunkYB3IWIOJ_cjs.useFloating({
     open: show,
     placement,
     panelWidth,
@@ -62,6 +66,14 @@ var Popover = ({
     if (!isControlled) setInner(v);
     onOpenChange?.(v);
   }, [isControlled, onOpenChange]);
+  const setTriggerRef = React__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref, triggerRef]
+  );
   React__namespace.useEffect(() => {
     if (trigger !== "click" || !show) return;
     const h = (e) => {
@@ -94,10 +106,22 @@ var Popover = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        ref: triggerRef,
+        ref: setTriggerRef,
         className: `popover-anchor ${className}`,
         style: { display: "inline-flex", alignSelf: "flex-start" },
-        ...interact,
+        onClick: (e) => {
+          onClick?.(e);
+          if ("onClick" in interact) interact.onClick?.();
+        },
+        onMouseEnter: (e) => {
+          onMouseEnter?.(e);
+          if ("onMouseEnter" in interact) interact.onMouseEnter?.();
+        },
+        onMouseLeave: (e) => {
+          onMouseLeave?.(e);
+          if ("onMouseLeave" in interact) interact.onMouseLeave?.();
+        },
+        ...rest,
         children
       }
     ),
@@ -130,8 +154,7 @@ var Popover = ({
       document.body
     )
   ] });
-};
+});
+Popover.displayName = "Popover";
 
 exports.Popover = Popover;
-//# sourceMappingURL=chunk-P2AV5BD7.cjs.map
-//# sourceMappingURL=chunk-P2AV5BD7.cjs.map

package/dist/{chunk-WR3FML2W.cjs → chunk-G2XK57I7.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk3KQKEE5O_cjs = require('./chunk-3KQKEE5O.cjs');
+var chunk2MNAZRWE_cjs = require('./chunk-2MNAZRWE.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
 require('./Image-4MN34O6P.css');
@@ -31,7 +31,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
-var Image = ({
+var Image = React__namespace.forwardRef(({
   src,
   alt,
   width = 200,
@@ -39,8 +39,10 @@ var Image = ({
   preview = true,
   hover = true,
   placeholder,
-  className = ""
-}) => {
+  className = "",
+  style,
+  ...rest
+}, ref) => {
   const [loaded, setLoaded] = React__namespace.useState(false);
   const [err, setErr] = React__namespace.useState(false);
   const [open, setOpen] = React__namespace.useState(false);
@@ -49,15 +51,17 @@ var Image = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref,
         className: `n-image ${hover ? "hover" : ""} ${canPreview ? "clickable" : ""} ${className}`,
-        style: { width },
+        style: { width, ...style },
         onClick: () => canPreview && setOpen(true),
+        ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "n-image-frame", style: { width: "100%", height }, children: [
           !err && src && /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, onLoad: () => setLoaded(true), onError: () => setErr(true) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "image", size: 28 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `n-image-placeholder ${loaded && !err ? "loaded" : ""}`, children: placeholder ?? /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "image", size: 28 }) }),
           canPreview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-hint", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "eye", size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "eye", size: 14 }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u70B9\u51FB\u67E5\u770B" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "image-actions", onClick: (e) => e.stopPropagation(), children: [
@@ -68,10 +72,10 @@ var Image = ({
                   className: "ia-btn",
                   onClick: () => setOpen(true),
                   "aria-label": "\u9884\u89C8",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "eye", size: 13 })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "eye", size: 13 })
                 }
               ),
-              src && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsxRuntime.jsx(chunk3KQKEE5O_cjs.Icon, { name: "download", size: 13 }) })
+              src && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "ia-btn", href: src, download: true, "aria-label": "\u4E0B\u8F7D", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2MNAZRWE_cjs.Icon, { name: "download", size: 13 }) })
             ] })
           ] })
         ] })
@@ -82,26 +86,31 @@ var Image = ({
       document.body
     )
   ] });
-};
-var ImageGrid = ({
+});
+Image.displayName = "Image";
+var ImageGrid = React__namespace.forwardRef(({
   images,
   columns,
   itemHeight = 130,
-  className = ""
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+  className = "",
+  style,
+  ...rest
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
+    ref,
     className,
     style: {
       display: "grid",
       gap: 14,
-      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : "repeat(auto-fill, minmax(160px, 1fr))"
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : "repeat(auto-fill, minmax(160px, 1fr))",
+      ...style
     },
+    ...rest,
     children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx(Image, { src: img.src, alt: img.alt, width: "100%", height: itemHeight }, i))
   }
-);
+));
+ImageGrid.displayName = "ImageGrid";
 
 exports.Image = Image;
 exports.ImageGrid = ImageGrid;
-//# sourceMappingURL=chunk-WR3FML2W.cjs.map
-//# sourceMappingURL=chunk-WR3FML2W.cjs.map