@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-ALAG4ZUH.js

@@ -0,0 +1,72 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Avatar-YBU2YZTW.css';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var AVATAR_STATUS_LABELS = {
+  online: "\u5728\u7EBF",
+  busy: "\u5FD9\u788C",
+  away: "\u79BB\u5F00",
+  offline: "\u79BB\u7EBF"
+};
+var AvatarBase = React.forwardRef(({
+  src,
+  fallbackSrc,
+  alt = "",
+  initials,
+  size = "md",
+  shape = "circle",
+  status,
+  onImageError,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const [useFallback, setUseFallback] = React.useState(false);
+  const [imageFailed, setImageFailed] = React.useState(false);
+  React.useEffect(() => {
+    setUseFallback(false);
+    setImageFailed(false);
+  }, [fallbackSrc, src]);
+  const sizeCls = typeof size === "string" && size !== "md" ? size : "";
+  const shapeCls = shape === "square" ? "square" : "";
+  const customStyle = typeof size === "number" ? { ["--size"]: `${size}px`, ...style } : style ?? {};
+  const shown = initials ?? alt.slice(0, 2).toUpperCase();
+  const activeSrc = imageFailed ? void 0 : useFallback ? fallbackSrc : src;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `avatar ${sizeCls} ${shapeCls} ${className}`.trim().replace(/\s+/g, " "),
+      style: customStyle,
+      ...rest,
+      children: [
+        activeSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: activeSrc,
+            alt,
+            onError: (event) => {
+              if (!useFallback && fallbackSrc && fallbackSrc !== src) {
+                setUseFallback(true);
+                return;
+              }
+              setImageFailed(true);
+              onImageError?.(event);
+            }
+          }
+        ) : /* @__PURE__ */ jsx("span", { children: shown }),
+        status && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: `avatar-status ${status}`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "avatar-status-label", children: AVATAR_STATUS_LABELS[status] })
+        ] })
+      ]
+    }
+  );
+});
+AvatarBase.displayName = "Avatar";
+var Avatar = withComponentTheme(AvatarBase, "Avatar", "avatar");
+
+export { Avatar };

package/dist/chunk-ARUN2DMD.js

@@ -0,0 +1,39 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Badge-DBWJEV4C.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BadgeBase = React.forwardRef(({
+  count,
+  max = 99,
+  dot,
+  showZero = false,
+  statusLabel,
+  tone = "danger",
+  children,
+  className = "",
+  ...rest
+}, ref) => {
+  const safeMax = Number.isFinite(max) && max >= 0 ? max : 99;
+  const show = dot || typeof count === "number" && (count > 0 || showZero && count === 0);
+  const displayCount = typeof count === "number" ? count > safeMax ? `${safeMax}+` : count : void 0;
+  return /* @__PURE__ */ jsxs("span", { ref, className: `badge-wrap ${className}`, ...rest, children: [
+    children,
+    show && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `badge ${tone} ${dot ? "dot" : ""}`,
+        role: "status",
+        "aria-live": "polite",
+        "aria-label": statusLabel ?? (dot ? "\u6709\u65B0\u901A\u77E5" : String(displayCount)),
+        children: !dot && displayCount
+      }
+    )
+  ] });
+});
+BadgeBase.displayName = "Badge";
+var Badge = withComponentTheme(BadgeBase, "Badge", "badge");
+
+export { Badge };

package/dist/chunk-AUO2YYHB.js

@@ -0,0 +1,248 @@
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { useComponentThemeRootRef, ComponentThemeBoundary, InternalComponentThemePart, mergeComponentRootStyleWithInstanceStyle } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './AutoComplete-PNCYHU2T.css';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_FILTER = (input, option) => {
+  if (!input) return true;
+  const hay = `${option.value} ${typeof option.label === "string" ? option.label : ""}`.toLowerCase();
+  return hay.includes(input.toLowerCase());
+};
+var AutoComplete = React.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onChange,
+    onSelect,
+    onSearch,
+    options,
+    placeholder,
+    disabled,
+    allowClear,
+    filterOption = true,
+    notFoundContent = "\u6682\u65E0\u5339\u914D\u7ED3\u679C",
+    size = "md",
+    autoFocus,
+    className = "",
+    dropdownClassName = "",
+    matchTriggerWidth = true,
+    id,
+    name,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    style,
+    theme,
+    ...rest
+  }, ref) => {
+    const [inner, setInner] = React.useState(typeof defaultValue === "string" ? defaultValue : "");
+    const isControlled = value !== void 0;
+    const text = isControlled ? typeof value === "string" ? value : "" : inner;
+    const [innerOpen, setInnerOpen] = React.useState(false);
+    const open = innerOpen && !disabled;
+    const [active, setActive] = React.useState(0);
+    const portalContainer = usePortalContainer();
+    const listboxId = React.useId();
+    const filtered = React.useMemo(() => {
+      const nonEmptyOptions = options.filter((option) => option.value !== "");
+      if (filterOption === false) return nonEmptyOptions;
+      const fn = typeof filterOption === "function" ? filterOption : DEFAULT_FILTER;
+      return nonEmptyOptions.filter((o) => fn(text, o));
+    }, [options, text, filterOption]);
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = useFloating({
+      open,
+      placement: "bottom",
+      matchTriggerWidth,
+      panelHeight: Math.min(filtered.length * 36 + 12, 280)
+    });
+    const [themeRootElement, themeRootRef] = useComponentThemeRootRef(
+      triggerRef,
+      { component: "AutoComplete", theme }
+    );
+    useOverlayLayer({
+      open: open && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setInnerOpen(false)
+    });
+    React.useEffect(() => {
+      if (disabled) setInnerOpen(false);
+    }, [disabled]);
+    React.useEffect(() => {
+      const firstEnabled = filtered.findIndex((option) => !option.disabled);
+      setActive(firstEnabled >= 0 ? firstEnabled : 0);
+    }, [filtered.length, open]);
+    React.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (!triggerRef.current?.contains(e.target) && !panelRef.current?.contains(e.target)) {
+          setInnerOpen(false);
+        }
+      };
+      window.addEventListener("mousedown", onDown);
+      return () => window.removeEventListener("mousedown", onDown);
+    }, [open, triggerRef]);
+    const commit = (next, option) => {
+      if (disabled) return;
+      if (!isControlled) setInner(next);
+      onChange?.(next, option);
+    };
+    const handleInput = (v) => {
+      if (disabled) return;
+      commit(v);
+      onSearch?.(v);
+      setInnerOpen(true);
+    };
+    const pick = (o) => {
+      if (disabled || o.disabled) return;
+      commit(o.value, o);
+      onSelect?.(o.value, o);
+      setInnerOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!open) {
+          setInnerOpen(true);
+          return;
+        }
+        setActive((a) => {
+          if (filtered.length === 0) return 0;
+          for (let n = 1; n <= filtered.length; n++) {
+            const i = (a + n) % filtered.length;
+            if (!filtered[i].disabled) return i;
+          }
+          return a;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((a) => {
+          if (filtered.length === 0) return 0;
+          for (let n = 1; n <= filtered.length; n++) {
+            const i = (a - n + filtered.length) % filtered.length;
+            if (!filtered[i].disabled) return i;
+          }
+          return a;
+        });
+      } else if (e.key === "Enter") {
+        if (open && filtered[active]) {
+          e.preventDefault();
+          pick(filtered[active]);
+        }
+      } else if (e.key === "Escape") {
+        if (open) {
+          e.preventDefault();
+          setInnerOpen(false);
+        }
+      } else if (e.key === "Tab") {
+        setInnerOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      ComponentThemeBoundary,
+      {
+        component: "AutoComplete",
+        cssPrefix: ["auto-complete", "input"],
+        theme,
+        rootElement: themeRootElement,
+        children: (themeState) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: themeRootRef,
+            className: `autocomplete ${className}`,
+            ...themeState.rootDataAttributes,
+            style: mergeComponentRootStyleWithInstanceStyle(themeState.rootStyle, style),
+            children: [
+              /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref,
+                  ...rest,
+                  id,
+                  name,
+                  size,
+                  value: text,
+                  placeholder,
+                  disabled,
+                  allowClear,
+                  autoFocus,
+                  style,
+                  onValueChange: handleInput,
+                  onFocus: (event) => {
+                    onFocus?.(event);
+                    if (!disabled) setInnerOpen(true);
+                  },
+                  onBlur: (event) => {
+                    onBlur?.(event);
+                    const ownerDocument = event.currentTarget.ownerDocument;
+                    requestAnimationFrame(() => {
+                      const activeElement = ownerDocument.activeElement;
+                      if (!triggerRef.current?.contains(activeElement) && !panelRef.current?.contains(activeElement)) {
+                        setInnerOpen(false);
+                      }
+                    });
+                  },
+                  onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (!event.defaultPrevented) onKey(event);
+                  },
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": open,
+                  "aria-controls": open ? listboxId : void 0,
+                  "aria-activedescendant": open && filtered[active] ? `${listboxId}-option-${active}` : void 0
+                }
+              ) }),
+              open && portalContainer ? createPortal(
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: panelRef,
+                    id: listboxId,
+                    role: "listbox",
+                    className: `autocomplete-panel ${dropdownClassName}`,
+                    ...themeState.portalDataAttributes,
+                    style: {
+                      ...floatingStyle,
+                      ...themeState.portalStyle,
+                      ...themeState.styles.popup
+                    },
+                    onMouseDown: (e) => e.preventDefault(),
+                    children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "autocomplete-empty", style: themeState.styles.empty, children: notFoundContent }) : filtered.map((o, i) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        id: `${listboxId}-option-${i}`,
+                        type: "button",
+                        role: "option",
+                        "aria-selected": i === active,
+                        disabled: o.disabled,
+                        className: `autocomplete-item ${i === active ? "active" : ""}`,
+                        style: themeState.styles.option,
+                        onMouseEnter: () => setActive(i),
+                        onClick: () => pick(o),
+                        children: o.label ?? o.value
+                      },
+                      o.value
+                    ))
+                  }
+                ),
+                portalContainer
+              ) : null
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+AutoComplete.displayName = "AutoComplete";
+
+export { AutoComplete };

package/dist/{chunk-6MEOLYNQ.js → chunk-AURYNA6G.js}

@@ -1,11 +1,11 @@
-import './tokens-RYJ3DFTU.css';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Empty-CZTRZMZQ.css';
+import './Empty-U5CBLCAL.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/Empty/Empty.tsx
-var Empty = React.forwardRef(({
+var EmptyBase = React.forwardRef(({
   title = "\u6682\u65E0\u5185\u5BB9",
   description,
   icon,
@@ -20,6 +20,7 @@ var Empty = React.forwardRef(({
   description && /* @__PURE__ */ jsx("div", { className: "empty-desc", children: description }),
   action && /* @__PURE__ */ jsx("div", { className: "empty-action", children: action })
 ] }));
-Empty.displayName = "Empty";
+EmptyBase.displayName = "Empty";
+var Empty = withComponentTheme(EmptyBase, "Empty", "empty");
 
 export { Empty };

package/dist/chunk-BIPOXOHP.cjs

@@ -0,0 +1,287 @@
+'use strict';
+
+var chunkSTQDKMS5_cjs = require('./chunk-STQDKMS5.cjs');
+var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./CommandPalette-GHTX7AAA.css');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+var DEFAULT_FILTER = (item, q) => {
+  if (!q) return true;
+  const hay = [item.label, ...item.keywords ?? []].join(" ").toLowerCase();
+  const needle = q.toLowerCase();
+  let i = 0;
+  for (const ch of hay) {
+    if (ch === needle[i]) i++;
+    if (i === needle.length) return true;
+  }
+  return i === needle.length;
+};
+var findFirstEnabledIndex = (items) => items.findIndex((item) => !item.disabled);
+var CommandPaletteBase = React__namespace.forwardRef(({
+  open,
+  onOpenChange,
+  items,
+  placeholder = "\u641C\u7D22\u547D\u4EE4\u2026",
+  filter = DEFAULT_FILTER,
+  emptyText = "\u6682\u65E0\u5339\u914D\u7ED3\u679C",
+  resetOnOpen = true,
+  footer,
+  overlayClassName = "",
+  className = "",
+  onMouseDown,
+  onKeyDown,
+  style,
+  ...rest
+}, ref) => {
+  const portalContainer = chunkEE5KXDRK_cjs.usePortalContainer();
+  const portalTheme = chunkNRJXZPZR_cjs.useComponentPortalTheme("CommandPalette");
+  const [query, setQuery] = React__namespace.useState("");
+  const [active, setActive] = React__namespace.useState(-1);
+  const inputRef = React__namespace.useRef(null);
+  const listRef = React__namespace.useRef(null);
+  const panelRef = React__namespace.useRef(null);
+  const wasOpenRef = React__namespace.useRef(false);
+  const listId = React__namespace.useId();
+  const overlayZIndex = chunkHSDMJUB6_cjs.useOverlayZIndex(open);
+  const filtered = React__namespace.useMemo(() => items.filter((it) => filter(it, query)), [items, query, filter]);
+  const grouped = React__namespace.useMemo(() => {
+    const order = [];
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((it, filteredIndex) => {
+      const g = it.group ?? "";
+      if (!map.has(g)) {
+        map.set(g, []);
+        order.push(g);
+      }
+      map.get(g).push({ item: it, filteredIndex });
+    });
+    return order.map((g) => ({ group: g, items: map.get(g) }));
+  }, [filtered]);
+  const close = React__namespace.useCallback(() => onOpenChange?.(false), [onOpenChange]);
+  chunkHSDMJUB6_cjs.useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: panelRef,
+    zIndex: overlayZIndex,
+    onEscape: close,
+    trapFocus: true,
+    autoFocus: true,
+    restoreFocus: true,
+    lockScroll: true,
+    initialFocusRef: inputRef
+  });
+  const setPanelRef = React__namespace.useCallback((node) => {
+    panelRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  React__namespace.useEffect(() => {
+    if (!open) {
+      wasOpenRef.current = false;
+      return;
+    }
+    if (wasOpenRef.current) return;
+    wasOpenRef.current = true;
+    if (resetOnOpen) setQuery("");
+    setActive(findFirstEnabledIndex(resetOnOpen ? items : filtered));
+  }, [filtered, items, open, resetOnOpen]);
+  React__namespace.useEffect(() => {
+    setActive((current) => {
+      if (filtered.length === 0) return -1;
+      if (current >= 0 && current < filtered.length && !filtered[current].disabled) return current;
+      return findFirstEnabledIndex(filtered);
+    });
+  }, [filtered]);
+  React__namespace.useEffect(() => {
+    const el = listRef.current?.querySelector(`[data-cmd-idx="${active}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active, filtered]);
+  const pick = (it) => {
+    if (it.disabled) return;
+    it.onSelect?.();
+    close();
+  };
+  const handlePanelKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => {
+        if (filtered.length === 0) return -1;
+        for (let n = 1; n <= filtered.length; n++) {
+          const i = (a + n) % filtered.length;
+          if (!filtered[i].disabled) return i;
+        }
+        return a;
+      });
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => {
+        if (filtered.length === 0) return -1;
+        for (let n = 1; n <= filtered.length; n++) {
+          const i = (a - n + filtered.length) % filtered.length;
+          if (!filtered[i].disabled) return i;
+        }
+        return a;
+      });
+    }
+    if (e.key === "Enter") {
+      const it = filtered[active];
+      if (it) {
+        e.preventDefault();
+        pick(it);
+      }
+    }
+    if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      const candidates = filtered.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);
+      const next = e.key === "Home" ? candidates[0] : candidates[candidates.length - 1];
+      if (next) setActive(next.index);
+    }
+  };
+  if (!portalContainer || !open) return null;
+  return ReactDOM__default.default.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(chunkHSDMJUB6_cjs.OverlayZIndexProvider, { zIndex: overlayZIndex, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ["cmdp-overlay", overlayClassName].filter(Boolean).join(" "),
+        ...portalTheme.dataAttributes,
+        style: { ...portalTheme.style, ...portalTheme.styles.overlay, zIndex: overlayZIndex },
+        onMouseDown: close,
+        role: "presentation",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: setPanelRef,
+            className: ["cmdp-panel", className].filter(Boolean).join(" "),
+            onMouseDown: (e) => {
+              onMouseDown?.(e);
+              e.stopPropagation();
+            },
+            role: "dialog",
+            "aria-modal": true,
+            "aria-label": "\u547D\u4EE4\u9762\u677F",
+            tabIndex: -1,
+            onKeyDown: handlePanelKeyDown,
+            ...portalTheme.dataAttributes,
+            ...rest,
+            style: { ...portalTheme.style, ...portalTheme.styles.popup, ...style },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cmdp-search", children: /* @__PURE__ */ jsxRuntime.jsx(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunkSTQDKMS5_cjs.Input,
+                {
+                  ref: inputRef,
+                  size: "lg",
+                  leadingIcon: "search",
+                  placeholder,
+                  value: query,
+                  onValueChange: (v) => setQuery(v),
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": open,
+                  "aria-controls": listId,
+                  "aria-activedescendant": active >= 0 ? `${listId}-option-${active}` : void 0,
+                  suffix: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-kbd", children: "esc" })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, id: listId, className: "cmdp-list", role: "listbox", "aria-label": "\u547D\u4EE4", children: grouped.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cmdp-empty", children: emptyText }) : grouped.map(({ group, items: gItems }, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "cmdp-group",
+                  role: "group",
+                  "aria-labelledby": group ? `${listId}-group-${groupIndex}` : void 0,
+                  children: [
+                    group && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${listId}-group-${groupIndex}`, className: "cmdp-group-head", children: group }),
+                    gItems.map(({ item: it, filteredIndex: i }) => {
+                      const isActive = i === active;
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "option",
+                          id: `${listId}-option-${i}`,
+                          "aria-selected": isActive,
+                          tabIndex: -1,
+                          "data-cmd-idx": i,
+                          disabled: it.disabled,
+                          className: `cmdp-item ${isActive ? "active" : ""}`,
+                          onMouseEnter: () => setActive(i),
+                          onClick: () => pick(it),
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-icon", children: it.icon }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cmdp-labels", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-label", children: it.label }),
+                              it.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-desc", children: it.description })
+                            ] }),
+                            it.shortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-shortcut", children: it.shortcut })
+                          ]
+                        },
+                        it.key
+                      );
+                    })
+                  ]
+                },
+                group || "_"
+              )) }),
+              footer === null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cmdp-footer", children: footer ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-kbd", children: "\u2191" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-kbd", children: "\u2193" }),
+                  " \u5207\u6362"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-kbd", children: "\u23CE" }),
+                  " \u6267\u884C"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cmdp-kbd", children: "esc" }),
+                  " \u5173\u95ED"
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ) }),
+    portalContainer
+  );
+});
+CommandPaletteBase.displayName = "CommandPalette";
+var CommandPalette = chunkNRJXZPZR_cjs.withComponentTheme(
+  CommandPaletteBase,
+  "CommandPalette",
+  ["command-palette", "input"],
+  { portalOnly: true }
+);
+
+exports.CommandPalette = CommandPalette;