@fangxinyan/lumina 0.6.0 → 0.6.2

package/dist/chunk-ELNT3CFO.js

@@ -0,0 +1,64 @@
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './Spin-3GJNMSIH.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Spin/Spin.tsx
+var SIZE_PX = {
+  small: 14,
+  default: 20,
+  large: 32
+};
+var resolveSize = (size) => typeof size === "number" ? size : SIZE_PX[size];
+var Spin = React.forwardRef(({
+  size = "default",
+  tone = "accent",
+  tip,
+  label,
+  variant = "ring",
+  spinning = true,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const text = label ?? tip;
+  const px = resolveSize(size);
+  const indicatorClass = `spin ${variant} ${tone}`;
+  const rootClass = text ? `spin-wrap ${className}`.trim() : `${indicatorClass} ${className}`.trim();
+  const indicatorStyle = variant === "dots" ? { fontSize: px } : { width: px, height: px };
+  if (!spinning && !text) return null;
+  const renderIndicator = (extraProps = {}) => {
+    if (!spinning) return null;
+    const {
+      className: extraClassName,
+      style: extraStyle,
+      ...indicatorRest
+    } = extraProps;
+    const finalClassName = extraClassName ?? indicatorClass;
+    const finalStyle = { ...indicatorStyle, ...extraStyle };
+    if (variant === "dots") {
+      return /* @__PURE__ */ jsxs("span", { className: finalClassName, style: finalStyle, "aria-label": "Loading", ...indicatorRest, children: [
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {}),
+        /* @__PURE__ */ jsx("i", {})
+      ] });
+    }
+    return /* @__PURE__ */ jsx("span", { className: finalClassName, style: finalStyle, "aria-label": "Loading", ...indicatorRest });
+  };
+  if (!text) {
+    return renderIndicator({
+      ref,
+      className: rootClass,
+      style: { ...indicatorStyle, ...style },
+      ...rest
+    });
+  }
+  return /* @__PURE__ */ jsxs("span", { ref, className: rootClass, style, ...rest, children: [
+    renderIndicator(),
+    /* @__PURE__ */ jsx("span", { className: "spin-label", children: text })
+  ] });
+});
+Spin.displayName = "Spin";
+
+export { Spin };

package/dist/{chunk-ZN6VS6SO.js → chunk-EQEJTN3V.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-BSHHQOFY.js';
+import { Icon } from './chunk-OF3SGLZY.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
-import './Checkbox-SKJATVSN.css';
+import './Checkbox-U5EUDSYS.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -50,47 +50,5 @@ var Checkbox = React.forwardRef(({
   ] });
 });
 Checkbox.displayName = "Checkbox";
-var RadioGroupInner = ({
-  options,
-  value,
-  defaultValue,
-  onChange,
-  direction = "vertical",
-  className = "",
-  ...rest
-}, ref) => {
-  const [inner, setInner] = React.useState(defaultValue);
-  const isControlled = value !== void 0;
-  const current = isControlled ? value : inner;
-  const pick = (v) => {
-    if (!isControlled) setInner(v);
-    onChange?.(v);
-  };
-  return /* @__PURE__ */ jsx("div", { ref, className: `radio-group ${direction} ${className}`, ...rest, children: options.map((opt) => /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: `radio ${current === opt.value ? "checked" : ""} ${opt.disabled ? "disabled" : ""}`,
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": current === opt.value,
-            disabled: opt.disabled,
-            onClick: () => pick(opt.value),
-            className: "radio-dot"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "radio-label", children: opt.label })
-      ]
-    },
-    String(opt.value)
-  )) });
-};
-var RadioGroup = React.forwardRef(RadioGroupInner);
-RadioGroup.displayName = "RadioGroup";
 
-export { Checkbox, RadioGroup };
-//# sourceMappingURL=chunk-ZN6VS6SO.js.map
-//# sourceMappingURL=chunk-ZN6VS6SO.js.map
+export { Checkbox };

package/dist/chunk-F6RYCBQG.js

@@ -0,0 +1,25 @@
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './Badge-DPGLV3D3.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Badge/Badge.tsx
+var Badge = React.forwardRef(({
+  count,
+  max = 99,
+  dot,
+  tone = "danger",
+  children,
+  className = "",
+  ...rest
+}, ref) => {
+  const show = dot || typeof count === "number" && count > 0;
+  return /* @__PURE__ */ jsxs("span", { ref, className: `badge-wrap ${className}`, ...rest, children: [
+    children,
+    show && /* @__PURE__ */ jsx("span", { className: `badge ${tone} ${dot ? "dot" : ""}`, children: !dot && (count > max ? `${max}+` : count) })
+  ] });
+});
+Badge.displayName = "Badge";
+
+export { Badge };

package/dist/{chunk-S3OSBW7R.cjs → chunk-FBVVRTX2.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkDH4NYYJP_cjs = require('./chunk-DH4NYYJP.cjs');
+var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
 require('./tokens-BIIUTPKN.css');
 require('./shared-NJHRNLRH.css');
-require('./Checkbox-SKJATVSN.css');
+require('./Checkbox-U5EUDSYS.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -65,55 +65,12 @@ var Checkbox = React__namespace.forwardRef(({
         onClick: toggle,
         id,
         className: "checkbox-box",
-        children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(chunkDH4NYYJP_cjs.Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsxRuntime.jsx(chunkDH4NYYJP_cjs.Icon, { name: "check", size: 11 }) : null
+        children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "minus", size: 11 }) : value ? /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "check", size: 11 }) : null
       }
     ),
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "checkbox-label", children: label })
   ] });
 });
 Checkbox.displayName = "Checkbox";
-var RadioGroupInner = ({
-  options,
-  value,
-  defaultValue,
-  onChange,
-  direction = "vertical",
-  className = "",
-  ...rest
-}, ref) => {
-  const [inner, setInner] = React__namespace.useState(defaultValue);
-  const isControlled = value !== void 0;
-  const current = isControlled ? value : inner;
-  const pick = (v) => {
-    if (!isControlled) setInner(v);
-    onChange?.(v);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: `radio-group ${direction} ${className}`, ...rest, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: `radio ${current === opt.value ? "checked" : ""} ${opt.disabled ? "disabled" : ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": current === opt.value,
-            disabled: opt.disabled,
-            onClick: () => pick(opt.value),
-            className: "radio-dot"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "radio-label", children: opt.label })
-      ]
-    },
-    String(opt.value)
-  )) });
-};
-var RadioGroup = React__namespace.forwardRef(RadioGroupInner);
-RadioGroup.displayName = "RadioGroup";
 
 exports.Checkbox = Checkbox;
-exports.RadioGroup = RadioGroup;
-//# sourceMappingURL=chunk-S3OSBW7R.cjs.map
-//# sourceMappingURL=chunk-S3OSBW7R.cjs.map

package/dist/chunk-FFZ6OMZI.js

@@ -0,0 +1,110 @@
+import { Icon } from './chunk-OF3SGLZY.js';
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './Collapse-66U5YJFY.css';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CollapsePanel = ({ open, children }) => {
+  const innerRef = React.useRef(null);
+  const [h, setH] = React.useState(0);
+  const [animated, setAnimated] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    setH(el.scrollHeight);
+    const ro = new ResizeObserver(() => setH(el.scrollHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  React.useEffect(() => {
+    const id = requestAnimationFrame(() => setAnimated(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "collapse-body",
+      style: { maxHeight: open ? h : 0, transition: animated ? void 0 : "none" },
+      "aria-hidden": !open,
+      children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "collapse-body-inner", children })
+    }
+  );
+};
+var normalizeKeys = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+var Collapse = React.forwardRef(({
+  items,
+  accordion = false,
+  multiple = true,
+  collapsible = "header",
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  ghost = false,
+  size = "middle",
+  className = "",
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React.useState(() => normalizeKeys(defaultActiveKey));
+  const isControlled = activeKey !== void 0;
+  const keys = isControlled ? normalizeKeys(activeKey) : inner;
+  const singleOpen = accordion || !multiple;
+  const toggle = (k, itemDisabled) => {
+    if (collapsible === "disabled" || itemDisabled) return;
+    const next = keys.includes(k) ? keys.filter((x) => x !== k) : singleOpen ? [k] : [...keys, k];
+    if (!isControlled) setInner(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `collapse ${ghost ? "ghost" : ""} ${size} ${className}`,
+      ...rest,
+      children: items.map((it) => {
+        const open = keys.includes(it.key);
+        const isDisabled = it.disabled || collapsible === "disabled";
+        const headerClickable = collapsible === "header" && !isDisabled;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `collapse-item ${open ? "open" : ""} ${isDisabled ? "disabled" : ""} ${collapsible === "icon" ? "icon-only" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "collapse-head",
+                  disabled: isDisabled,
+                  onClick: () => headerClickable && toggle(it.key, it.disabled),
+                  "aria-expanded": open,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: it.label }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `collapse-chev${collapsible === "icon" ? " clickable" : ""}`,
+                        onClick: (e) => {
+                          if (collapsible === "icon" && !isDisabled) {
+                            e.stopPropagation();
+                            toggle(it.key, it.disabled);
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 16 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(CollapsePanel, { open, children: it.children })
+            ]
+          },
+          it.key
+        );
+      })
+    }
+  );
+});
+Collapse.displayName = "Collapse";
+
+export { Collapse };

package/dist/{chunk-MXIWTYNC.js → chunk-FJNWUELL.js}

@@ -1,5 +1,5 @@
-import { useFloating } from './chunk-ANAQER3T.js';
-import { Input } from './chunk-ZZXNHPF3.js';
+import { useFloating } from './chunk-DUFRASGO.js';
+import { Input } from './chunk-XTIN5545.js';
 import './tokens-BIIUTPKN.css';
 import './shared-NJHRNLRH.css';
 import './AutoComplete-P5KZMZO5.css';
@@ -158,7 +158,7 @@ var AutoComplete = React.forwardRef(
           disabled,
           allowClear,
           autoFocus,
-          onChange: handleInput,
+          onValueChange: handleInput,
           onFocus: (event) => {
             onFocus?.(event);
             if (!disabled) setOpen(true);
@@ -176,5 +176,3 @@ var AutoComplete = React.forwardRef(
 AutoComplete.displayName = "AutoComplete";
 
 export { AutoComplete };
-//# sourceMappingURL=chunk-MXIWTYNC.js.map
-//# sourceMappingURL=chunk-MXIWTYNC.js.map

package/dist/chunk-GENABQYA.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+require('./tokens-BIIUTPKN.css');
+require('./shared-NJHRNLRH.css');
+require('./Empty-DC2LPORC.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/Empty/Empty.tsx
+var Empty = React__namespace.forwardRef(({
+  title = "\u6682\u65E0\u5185\u5BB9",
+  description,
+  icon,
+  action,
+  size = "md",
+  variant = "default",
+  className = "",
+  ...rest
+}, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `empty ${size} ${variant} ${className}`, ...rest, children: [
+  icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-ico", children: icon }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-title", children: title }),
+  description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-desc", children: description }),
+  action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-action", children: action })
+] }));
+Empty.displayName = "Empty";
+
+exports.Empty = Empty;

package/dist/chunk-GMN74OEY.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+require('./tokens-BIIUTPKN.css');
+require('./shared-NJHRNLRH.css');
+require('./Card-6RMVIHWX.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/Card/Card.tsx
+var Card = React__namespace.forwardRef(
+  ({
+    variant = "raised",
+    padding = "md",
+    hoverable,
+    title,
+    description,
+    actions,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const cls = [
+      "card",
+      variant,
+      padding !== "md" && `pad-${padding}`,
+      hoverable && "hoverable",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls, ...rest, children: [
+      (title || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-head", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "card-titles", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-title", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-desc", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-actions", children: actions })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "card-body", children })
+    ] });
+  }
+);
+Card.displayName = "Card";
+
+exports.Card = Card;

package/dist/{chunk-AXRABZLY.cjs → chunk-GNEZD7KE.cjs}

@@ -188,5 +188,3 @@ var ContextMenu = React__namespace.forwardRef(({
 ContextMenu.displayName = "ContextMenu";
 
 exports.ContextMenu = ContextMenu;
-//# sourceMappingURL=chunk-AXRABZLY.cjs.map
-//# sourceMappingURL=chunk-AXRABZLY.cjs.map

package/dist/chunk-GNEZQMKH.js

@@ -0,0 +1,218 @@
+import { useFloating } from './chunk-DUFRASGO.js';
+import { Input } from './chunk-XTIN5545.js';
+import { Icon } from './chunk-OF3SGLZY.js';
+import './tokens-BIIUTPKN.css';
+import './shared-NJHRNLRH.css';
+import './Cascader-C2DFSMKJ.css';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var collectPaths = (options, prefix = []) => options.flatMap((option) => {
+  const next = [...prefix, option];
+  if (option.children?.length) return collectPaths(option.children, next);
+  return [next];
+});
+var defaultSearchFilter = (inputValue, path) => {
+  const q = inputValue.trim().toLowerCase();
+  if (!q) return true;
+  return path.map((option) => String(option.label ?? option.value)).join(" / ").toLowerCase().includes(q);
+};
+var Cascader = React.forwardRef(({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "\u8BF7\u9009\u62E9",
+  disabled,
+  allowClear,
+  onClear,
+  changeOnSelect,
+  showSearch,
+  popupClassName = "",
+  dropdownClassName = "",
+  className = "",
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React.useState(defaultValue);
+  const isControlled = value !== void 0;
+  const cur = isControlled ? value : inner;
+  const [open, setOpen] = React.useState(false);
+  const [path, setPath] = React.useState(cur);
+  const [query, setQuery] = React.useState("");
+  const panelRef = React.useRef(null);
+  const searchRef = React.useRef(null);
+  const searchConfig = typeof showSearch === "object" ? showSearch : {};
+  const searchable = !!showSearch;
+  const { triggerRef, floatingStyle } = useFloating({
+    open,
+    placement: "bottom",
+    panelWidth: 520,
+    panelHeight: 260
+  });
+  const setTriggerRef = React.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref, triggerRef]
+  );
+  React.useEffect(() => {
+    const h = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t)) return;
+      if (panelRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, []);
+  React.useEffect(() => {
+    if (open) setPath(cur);
+    if (!open) setQuery("");
+  }, [open, cur]);
+  React.useEffect(() => {
+    if (!open || !searchable) return;
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, [open, searchable]);
+  const columns = [options];
+  let cursor = options;
+  for (const v of path) {
+    const match = cursor.find((o) => o.value === v);
+    if (match && match.children) {
+      cursor = match.children;
+      columns.push(cursor);
+    } else break;
+  }
+  const selectedOptionsForPath = (nextPath) => {
+    const selected = [];
+    let list2 = options;
+    for (const item of nextPath) {
+      const match = list2.find((option) => option.value === item);
+      if (!match) break;
+      selected.push(match);
+      list2 = match.children ?? [];
+    }
+    return selected;
+  };
+  const commit = (nextPath, closeAfterSelect) => {
+    if (!isControlled) setInner(nextPath);
+    onChange?.(nextPath, selectedOptionsForPath(nextPath));
+    if (closeAfterSelect) setOpen(false);
+  };
+  const pick = (depth, val, hasChildren) => {
+    const np = [...path.slice(0, depth), val];
+    setPath(np);
+    if (!hasChildren || changeOnSelect) commit(np, !hasChildren);
+  };
+  const clear = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    setPath([]);
+    if (!isControlled) setInner([]);
+    onChange?.([], []);
+    onClear?.();
+  };
+  const labels = [];
+  let list = options;
+  for (const v of cur) {
+    const m = list.find((o) => o.value === v);
+    if (!m) break;
+    labels.push(m.label);
+    if (!m.children) break;
+    list = m.children;
+  }
+  const allPaths = React.useMemo(() => collectPaths(options), [options]);
+  const matchedPaths = React.useMemo(() => {
+    if (!query.trim()) return [];
+    const filter = searchConfig.filter ?? defaultSearchFilter;
+    const result = allPaths.filter((itemPath) => filter(query, itemPath));
+    const limit = searchConfig.limit === false ? result.length : searchConfig.limit ?? 50;
+    return result.slice(0, limit);
+  }, [allPaths, query, searchConfig.filter, searchConfig.limit]);
+  const panelClassName = [
+    "cascader-panel",
+    searchable && "with-search",
+    popupClassName,
+    dropdownClassName
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: setTriggerRef, className: `cascader ${open ? "open" : ""} ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `cascader-trigger ${labels.length === 0 ? "placeholder" : ""}`,
+        disabled,
+        onClick: () => !disabled && setOpen((o) => !o),
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: labels.length ? labels.map((l, i) => /* @__PURE__ */ jsxs("span", { children: [
+            i > 0 && " / ",
+            l
+          ] }, i)) : placeholder }),
+          !!allowClear && labels.length > 0 && !disabled && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "cascader-clear",
+              role: "button",
+              "aria-label": "Clear",
+              onClick: clear,
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { position: "absolute", right: 12, color: "var(--fg-subtle)" }, children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 14 }) })
+        ]
+      }
+    ),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsxs("div", { ref: panelRef, className: panelClassName, style: floatingStyle, children: [
+        searchable && /* @__PURE__ */ jsx("div", { className: "cascader-search", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: searchRef,
+            size: "sm",
+            leadingIcon: "search",
+            value: query,
+            onValueChange: setQuery,
+            placeholder: "\u641C\u7D22..."
+          }
+        ) }),
+        searchable && query.trim() ? /* @__PURE__ */ jsx("div", { className: "cascader-search-list", children: matchedPaths.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cascader-empty", children: "\u6682\u65E0\u5339\u914D\u9879" }) : matchedPaths.map((itemPath) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "cascader-search-item",
+            onClick: () => commit(itemPath.map((item) => item.value), true),
+            children: searchConfig.render ? searchConfig.render(query, itemPath) : itemPath.map((item) => item.label).map((label, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsx("span", { className: "cascader-path-sep", children: "/" }),
+              /* @__PURE__ */ jsx("span", { children: label })
+            ] }, index))
+          },
+          itemPath.map((item) => item.value).join("__")
+        )) }) : /* @__PURE__ */ jsx("div", { className: "cascader-columns", children: columns.map((col, depth) => /* @__PURE__ */ jsx("div", { className: "cascader-col", children: col.map((o) => {
+          const isActive = path[depth] === o.value;
+          const hasChildren = !!(o.children && o.children.length);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `cascader-item ${isActive ? "active" : ""}`,
+              disabled: o.disabled,
+              onClick: () => pick(depth, o.value, hasChildren),
+              children: [
+                o.icon && /* @__PURE__ */ jsx(Icon, { name: o.icon, size: 13 }),
+                /* @__PURE__ */ jsx("span", { children: o.label }),
+                hasChildren && /* @__PURE__ */ jsx("span", { className: "chev", children: /* @__PURE__ */ jsx(Icon, { name: "chevRight", size: 12 }) })
+              ]
+            },
+            o.value
+          );
+        }) }, depth)) })
+      ] }),
+      document.body
+    )
+  ] });
+});
+Cascader.displayName = "Cascader";
+
+export { Cascader };