@hxdhxd/harmony-flow-ui 0.1.1 → 0.1.2

package/dist/index.js

@@ -331,7 +331,7 @@ function Modal({ open, title, children, onClose, footer }) {
     /* @__PURE__ */ jsx9("div", { className: "hf-modal-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs7("div", { ref: dialogRef, className: "hf-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [
       /* @__PURE__ */ jsxs7("header", { className: "hf-modal__header", children: [
         /* @__PURE__ */ jsx9("h2", { id: titleId, children: title }),
-        /* @__PURE__ */ jsx9(Button, { variant: "quiet", size: "sm", onClick: onClose, "aria-label": "\u5173\u95ED\u5F39\u7A97", children: "\xD7" })
+        /* @__PURE__ */ jsx9(Button, { variant: "quiet", size: "sm", iconOnly: true, leadingIcon: /* @__PURE__ */ jsx9(Icon, { name: "close", size: 16 }), onClick: onClose, "aria-label": "\u5173\u95ED\u5F39\u7A97" })
       ] }),
       /* @__PURE__ */ jsx9("div", { className: "hf-modal__body", children }),
       footer && /* @__PURE__ */ jsx9("footer", { className: "hf-modal__footer", children: footer })
@@ -407,7 +407,10 @@ function Accordion({ items, value, defaultValue = [], onChange, multiple = false
     return /* @__PURE__ */ jsxs10("section", { className: open ? "is-open" : "", children: [
       /* @__PURE__ */ jsx12("h3", { children: /* @__PURE__ */ jsxs10("button", { type: "button", "aria-expanded": open, disabled: item.disabled, onClick: () => toggle(item.key), children: [
         /* @__PURE__ */ jsx12("span", { children: item.title }),
-        /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: "\u2304" })
+        /* @__PURE__ */ jsxs10("span", { className: "hf-accordion__toggle", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx12("i", {}),
+          /* @__PURE__ */ jsx12("i", {})
+        ] })
       ] }) }),
       open && /* @__PURE__ */ jsx12("div", { className: "hf-accordion__panel", children: item.content })
     ] }, item.key);
@@ -456,7 +459,7 @@ function ColorPicker({ value, onChange, label, presets = ["#0a7cff", "#19a989",
     /* @__PURE__ */ jsxs12("button", { type: "button", className: "hf-color-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen(!open), children: [
       /* @__PURE__ */ jsx15("span", { style: { background: value } }),
       /* @__PURE__ */ jsx15("code", { children: value.toUpperCase() }),
-      /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u2304" })
+      /* @__PURE__ */ jsx15(Icon, { className: "hf-picker-trigger__chevron", name: "chevron-down", size: 16 })
     ] }),
     open && /* @__PURE__ */ jsxs12("div", { className: "hf-color-picker__panel", children: [
       /* @__PURE__ */ jsx15("input", { type: "color", "aria-label": "\u9009\u62E9\u989C\u8272", value, onChange: (event) => onChange(event.target.value) }),
@@ -607,7 +610,7 @@ function ChatComposer({ value, onChange, onSend, attachments = [], onRemoveAttac
       item.icon,
       /* @__PURE__ */ jsx17("strong", { children: item.name }),
       item.size && /* @__PURE__ */ jsx17("small", { children: item.size }),
-      onRemoveAttachment && /* @__PURE__ */ jsx17("button", { type: "button", "aria-label": `\u79FB\u9664\u9644\u4EF6 ${item.name}`, onClick: () => onRemoveAttachment(item.id), children: "\xD7" })
+      onRemoveAttachment && /* @__PURE__ */ jsx17("button", { type: "button", "aria-label": `\u79FB\u9664\u9644\u4EF6 ${item.name}`, onClick: () => onRemoveAttachment(item.id), children: /* @__PURE__ */ jsx17(Icon, { name: "close", size: 14 }) })
     ] }, item.id)) }),
     /* @__PURE__ */ jsx17("textarea", { "aria-label": "\u6D88\u606F\u5185\u5BB9", value, maxLength, disabled, placeholder, onChange: (event) => onChange(event.target.value), onKeyDown: keyDown }),
     /* @__PURE__ */ jsxs14("footer", { children: [
@@ -787,7 +790,7 @@ function CodeBlock({ code, language = "text", filename, wrap, showLineNumbers =
 function VoiceInput({ state = "idle", duration = "00:00", level = 0.45, disabled, onStart, onStop, onCancel, error }) {
   const active = state === "listening";
   return /* @__PURE__ */ jsxs15("div", { className: `hf-voice-input is-${state}`, role: "status", "aria-label": active ? "\u6B63\u5728\u5F55\u97F3" : state === "processing" ? "\u6B63\u5728\u8BC6\u522B\u8BED\u97F3" : "\u8BED\u97F3\u8F93\u5165", children: [
-    /* @__PURE__ */ jsx18("button", { type: "button", className: "hf-voice-input__main", disabled: disabled || state === "processing", onClick: active ? onStop : onStart, children: state === "processing" ? /* @__PURE__ */ jsx18("span", { className: "hf-spinner" }) : active ? "\u25A0" : "\u25CF" }),
+    /* @__PURE__ */ jsx18("button", { type: "button", className: "hf-voice-input__main", "aria-label": active ? "\u505C\u6B62\u5F55\u97F3" : state === "processing" ? "\u6B63\u5728\u8BC6\u522B\u8BED\u97F3" : "\u5F00\u59CB\u8BED\u97F3\u8F93\u5165", disabled: disabled || state === "processing", onClick: active ? onStop : onStart, children: state === "processing" ? /* @__PURE__ */ jsx18("span", { className: "hf-spinner" }) : /* @__PURE__ */ jsx18("span", { className: active ? "hf-voice-input__stop-icon" : "hf-voice-input__record-icon" }) }),
     /* @__PURE__ */ jsxs15("div", { children: [
       /* @__PURE__ */ jsx18("div", { className: "hf-voice-input__wave", "aria-hidden": "true", children: Array.from({ length: 18 }, (_, index) => /* @__PURE__ */ jsx18("i", { style: { height: `${Math.max(12, index * 17 % 75 * level + 12)}%` } }, index)) }),
       /* @__PURE__ */ jsx18("span", { children: active ? duration : state === "processing" ? "\u6B63\u5728\u8F6C\u6362\u6587\u5B57\u2026" : error ?? "\u70B9\u51FB\u5F00\u59CB\u8BED\u97F3\u8F93\u5165" })
@@ -806,7 +809,7 @@ function ModelSelector({ models, value, onChange, label = "\u9009\u62E9\u6A21\u5
         /* @__PURE__ */ jsx18("strong", { children: selected?.name ?? label }),
         selected?.description && /* @__PURE__ */ jsx18("small", { children: selected.description })
       ] }),
-      /* @__PURE__ */ jsx18("i", { "aria-hidden": "true", children: "\u2304" })
+      /* @__PURE__ */ jsx18(Icon, { className: "hf-model-selector__chevron", name: "chevron-down", size: 16 })
     ] }),
     open && /* @__PURE__ */ jsx18("div", { className: "hf-model-selector__menu", role: "listbox", "aria-label": label, children: models.map((model) => /* @__PURE__ */ jsxs15("button", { type: "button", role: "option", "aria-selected": model.id === value, disabled: model.disabled, onClick: () => {
       onChange(model.id);
@@ -1123,7 +1126,7 @@ function MemberPicker({ members, value, onChange, label = "\u6DFB\u52A0\u6210\u5
       return item && /* @__PURE__ */ jsxs17("span", { children: [
         /* @__PURE__ */ jsx20(Avatar, { name: item.name, src: item.avatar, size: "sm" }),
         item.name,
-        /* @__PURE__ */ jsx20("button", { type: "button", disabled, "aria-label": `\u79FB\u9664 ${item.name}`, onClick: () => onChange(value.filter((key) => key !== id)), children: "\xD7" })
+        /* @__PURE__ */ jsx20("button", { type: "button", disabled, "aria-label": `\u79FB\u9664 ${item.name}`, onClick: () => onChange(value.filter((key) => key !== id)), children: /* @__PURE__ */ jsx20(Icon, { name: "close", size: 14 }) })
       ] }, id);
     }) }),
     /* @__PURE__ */ jsx20("input", { "aria-label": label, value: query, disabled, placeholder: label, onChange: (event) => setQuery(event.target.value) }),
@@ -1157,27 +1160,115 @@ function SharePanel({ scope, onScopeChange, members, onCopyLink, linkCopied, foo
     ] }, item)) }),
     members && /* @__PURE__ */ jsx20("div", { className: "hf-share-panel__members", children: members }),
     /* @__PURE__ */ jsxs17("footer", { children: [
-      /* @__PURE__ */ jsx20("button", { type: "button", onClick: onCopyLink, children: linkCopied ? "\u94FE\u63A5\u5DF2\u590D\u5236" : "\u590D\u5236\u94FE\u63A5" }),
+      /* @__PURE__ */ jsx20(Button, { type: "button", size: "sm", variant: "secondary", onClick: onCopyLink, children: linkCopied ? "\u94FE\u63A5\u5DF2\u590D\u5236" : "\u590D\u5236\u94FE\u63A5" }),
       footer
     ] })
   ] });
 }
 
-// src/components/Scheduling.tsx
+// src/forms/Select.tsx
+import { forwardRef as forwardRef5, useEffect as useEffect4, useId as useId4, useRef as useRef4, useState as useState10 } from "react";
 import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+var Select = forwardRef5(function Select2({ id, label, hint, error, options, placeholder, className = "", value, defaultValue, onChange, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, forwardedRef) {
+  const generatedId = useId4();
+  const inputId = id ?? generatedId;
+  const triggerId = `${inputId}-trigger`;
+  const listboxId = `${inputId}-listbox`;
+  const descriptionId = `${inputId}-description`;
+  const [open, setOpen] = useState10(false);
+  const rootRef = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
+  const nativeRef = useRef4(null);
+  const [innerValue, setInnerValue] = useState10(() => String(defaultValue ?? (placeholder ? "" : options.find((option) => !option.disabled)?.value ?? "")));
+  const selectedValue = value === void 0 ? innerValue : String(value);
+  const selectedOption = options.find((option) => option.value === selectedValue);
+  const enabledIndices = options.map((option, index) => option.disabled ? -1 : index).filter((index) => index >= 0);
+  const selectedIndex = options.findIndex((option) => option.value === selectedValue);
+  const [activeIndex, setActiveIndex] = useState10(selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1);
+  const assignRef = (node) => {
+    nativeRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const handleNativeChange = (event) => {
+    if (value === void 0) setInnerValue(event.currentTarget.value);
+    onChange?.(event);
+  };
+  const choose = (nextValue) => {
+    const native = nativeRef.current;
+    if (!native) return;
+    Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set?.call(native, nextValue);
+    native.dispatchEvent(new Event("change", { bubbles: true }));
+    if (value === void 0) setInnerValue(nextValue);
+    setOpen(false);
+    window.requestAnimationFrame(() => document.getElementById(triggerId)?.focus());
+  };
+  useEffect4(() => {
+    if (selectedIndex >= 0) setActiveIndex(selectedIndex);
+  }, [selectedIndex]);
+  const move = (direction) => {
+    if (!enabledIndices.length) return;
+    const current = enabledIndices.indexOf(activeIndex);
+    const next = current < 0 ? 0 : (current + direction + enabledIndices.length) % enabledIndices.length;
+    setActiveIndex(enabledIndices[next]);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      move(event.key === "ArrowDown" ? 1 : -1);
+    } else if ((event.key === "Enter" || event.key === " ") && open) {
+      event.preventDefault();
+      const option = options[activeIndex];
+      if (option && !option.disabled) choose(option.value);
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+    } else if (event.key === "Home" && open && enabledIndices.length) {
+      event.preventDefault();
+      setActiveIndex(enabledIndices[0]);
+    } else if (event.key === "End" && open && enabledIndices.length) {
+      event.preventDefault();
+      setActiveIndex(enabledIndices[enabledIndices.length - 1]);
+    } else if (event.key === "Tab") setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs18("div", { className: `hf-field ${className}`.trim(), ref: rootRef, children: [
+    label && /* @__PURE__ */ jsx21("label", { className: "hf-field__label", htmlFor: triggerId, children: label }),
+    /* @__PURE__ */ jsxs18("div", { className: `hf-select-shell ${open ? "hf-select-shell--open" : ""} ${error ? "hf-select-shell--error" : ""}`, children: [
+      /* @__PURE__ */ jsxs18("select", { ref: assignRef, id: inputId, className: "hf-select-native", tabIndex: -1, "aria-hidden": "true", value: selectedValue, disabled, onChange: handleNativeChange, ...props, children: [
+        placeholder && /* @__PURE__ */ jsx21("option", { value: "", disabled: true, children: placeholder }),
+        options.map((option) => /* @__PURE__ */ jsx21("option", { value: option.value, disabled: option.disabled, children: typeof option.label === "string" ? option.label : option.value }, option.value))
+      ] }),
+      /* @__PURE__ */ jsxs18("button", { id: triggerId, type: "button", className: "hf-select", disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : void 0, "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0, "aria-invalid": Boolean(error), "aria-describedby": hint || error ? descriptionId : void 0, onClick: () => {
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1);
+        setOpen((current) => !current);
+      }, onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ jsx21("span", { className: !selectedOption ? "hf-select__placeholder" : "", children: selectedOption?.label ?? placeholder ?? "\u8BF7\u9009\u62E9" }),
+        /* @__PURE__ */ jsx21("svg", { className: "hf-select__chevron", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: open ? "m4.5 9.75 3.5-3.5 3.5 3.5" : "m4.5 6.25 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ] }),
+      open && /* @__PURE__ */ jsx21("div", { id: listboxId, className: "hf-select-menu", role: "listbox", "aria-labelledby": triggerId, children: options.map((option, index) => /* @__PURE__ */ jsxs18("button", { id: `${listboxId}-option-${index}`, type: "button", role: "option", "aria-selected": option.value === selectedValue, disabled: option.disabled, className: index === activeIndex ? "is-active" : "", onPointerMove: () => !option.disabled && setActiveIndex(index), onClick: () => choose(option.value), children: [
+        /* @__PURE__ */ jsx21("span", { children: option.label }),
+        option.value === selectedValue && /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: "m3.5 8 3 3 6-6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ] }, option.value)) })
+    ] }),
+    (error || hint) && /* @__PURE__ */ jsx21("span", { id: descriptionId, className: `hf-field__hint ${error ? "hf-field__hint--error" : ""}`, children: error ?? hint })
+  ] });
+});
+
+// src/components/Scheduling.tsx
+import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function EventCard({
   event,
   onClick
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "button",
     {
       type: "button",
       className: "hf-event-card",
       onClick: () => onClick?.(event.id),
       children: [
-        /* @__PURE__ */ jsx21("strong", { children: event.title }),
-        /* @__PURE__ */ jsxs18("time", { children: [
+        /* @__PURE__ */ jsx22("strong", { children: event.title }),
+        /* @__PURE__ */ jsxs19("time", { children: [
           event.start,
           "\u2013",
           event.end
@@ -1191,43 +1282,44 @@ function Scheduler({
   events,
   onEventClick
 }) {
-  return /* @__PURE__ */ jsx21("div", { className: "hf-scheduler", children: days.map((day2) => /* @__PURE__ */ jsxs18("section", { children: [
-    /* @__PURE__ */ jsx21("strong", { children: day2 }),
-    events.filter((e) => e.start.startsWith(day2)).map((e) => /* @__PURE__ */ jsx21(EventCard, { event: e, onClick: onEventClick }, e.id))
+  return /* @__PURE__ */ jsx22("div", { className: "hf-scheduler", children: days.map((day2) => /* @__PURE__ */ jsxs19("section", { children: [
+    /* @__PURE__ */ jsx22("strong", { children: day2 }),
+    events.filter((e) => e.start.startsWith(day2)).map((e) => /* @__PURE__ */ jsx22(EventCard, { event: e, onClick: onEventClick }, e.id))
   ] }, day2)) });
 }
 function ResourceCalendar({
   resources,
   events
 }) {
-  return /* @__PURE__ */ jsx21("div", { className: "hf-resource-calendar", children: resources.map((r) => /* @__PURE__ */ jsxs18("section", { children: [
-    /* @__PURE__ */ jsx21("strong", { children: r.name }),
-    events.filter((e) => e.resourceId === r.id).map((e) => /* @__PURE__ */ jsx21(EventCard, { event: e }, e.id))
+  return /* @__PURE__ */ jsx22("div", { className: "hf-resource-calendar", children: resources.map((r) => /* @__PURE__ */ jsxs19("section", { children: [
+    /* @__PURE__ */ jsx22("strong", { children: r.name }),
+    events.filter((e) => e.resourceId === r.id).map((e) => /* @__PURE__ */ jsx22(EventCard, { event: e }, e.id))
   ] }, r.id)) });
 }
 function RecurrenceEditor({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "hf-recurrence", children: [
-    /* @__PURE__ */ jsxs18(
-      "select",
+  return /* @__PURE__ */ jsxs19("div", { className: "hf-recurrence", children: [
+    /* @__PURE__ */ jsx22(
+      Select,
       {
+        className: "hf-recurrence__select",
         "aria-label": "\u91CD\u590D\u9891\u7387",
         value: value.frequency,
+        options: [
+          { value: "none", label: "\u4E0D\u91CD\u590D" },
+          { value: "daily", label: "\u6BCF\u5929" },
+          { value: "weekly", label: "\u6BCF\u5468" },
+          { value: "monthly", label: "\u6BCF\u6708" }
+        ],
         onChange: (e) => onChange({
           ...value,
           frequency: e.target.value
-        }),
-        children: [
-          /* @__PURE__ */ jsx21("option", { value: "none", children: "\u4E0D\u91CD\u590D" }),
-          /* @__PURE__ */ jsx21("option", { value: "daily", children: "\u6BCF\u5929" }),
-          /* @__PURE__ */ jsx21("option", { value: "weekly", children: "\u6BCF\u5468" }),
-          /* @__PURE__ */ jsx21("option", { value: "monthly", children: "\u6BCF\u6708" })
-        ]
+        })
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       "input",
       {
         "aria-label": "\u91CD\u590D\u95F4\u9694",
@@ -1244,19 +1336,17 @@ function TimezoneSelect({
   value,
   onChange
 }) {
-  return /* @__PURE__ */ jsx21(
-    "select",
+  return /* @__PURE__ */ jsx22(
+    Select,
     {
       "aria-label": "\u65F6\u533A",
       className: "hf-timezone",
       value,
-      onChange: (e) => onChange(e.target.value),
-      children: options.map((o) => /* @__PURE__ */ jsxs18("option", { value: o.value, children: [
-        o.label,
-        " (",
-        o.offset,
-        ")"
-      ] }, o.value))
+      options: options.map((option) => ({
+        value: option.value,
+        label: `${option.label} (${option.offset})`
+      })),
+      onChange: (e) => onChange(e.target.value)
     }
   );
 }
@@ -1265,24 +1355,24 @@ function AvailabilityGrid({
   slots,
   value
 }) {
-  return /* @__PURE__ */ jsx21("div", { className: "hf-availability", children: /* @__PURE__ */ jsxs18("table", { children: [
-    /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsxs18("tr", { children: [
-      /* @__PURE__ */ jsx21("th", { children: "\u6210\u5458" }),
-      slots.map((s) => /* @__PURE__ */ jsx21("th", { children: s }, s))
+  return /* @__PURE__ */ jsx22("div", { className: "hf-availability", children: /* @__PURE__ */ jsxs19("table", { children: [
+    /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs19("tr", { children: [
+      /* @__PURE__ */ jsx22("th", { children: "\u6210\u5458" }),
+      slots.map((s) => /* @__PURE__ */ jsx22("th", { children: s }, s))
     ] }) }),
-    /* @__PURE__ */ jsx21("tbody", { children: people.map((p) => /* @__PURE__ */ jsxs18("tr", { children: [
-      /* @__PURE__ */ jsx21("th", { children: p.name }),
-      slots.map((s) => /* @__PURE__ */ jsx21("td", { children: /* @__PURE__ */ jsx21("i", { className: `is-${value[p.id]?.[s] ?? "unavailable"}` }) }, s))
+    /* @__PURE__ */ jsx22("tbody", { children: people.map((p) => /* @__PURE__ */ jsxs19("tr", { children: [
+      /* @__PURE__ */ jsx22("th", { children: p.name }),
+      slots.map((s) => /* @__PURE__ */ jsx22("td", { children: /* @__PURE__ */ jsx22("i", { className: `is-${value[p.id]?.[s] ?? "unavailable"}` }) }, s))
     ] }, p.id)) })
   ] }) });
 }
 
 // src/foundations/Typography.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Typography({ as, variant = "body", muted, truncate, className = "", ...props }) {
   const defaults = { display: "h1", h1: "h1", h2: "h2", h3: "h3", code: "code" };
   const Tag2 = as ?? defaults[variant] ?? "p";
-  return /* @__PURE__ */ jsx22(Tag2, { className: `hf-typography hf-typography--${variant}${muted ? " is-muted" : ""}${truncate ? " is-truncated" : ""} ${className}`, ...props });
+  return /* @__PURE__ */ jsx23(Tag2, { className: `hf-typography hf-typography--${variant}${muted ? " is-muted" : ""}${truncate ? " is-truncated" : ""} ${className}`, ...props });
 }
 
 // src/navigation/types.ts
@@ -1291,85 +1381,85 @@ function activateNavigationItem(item, onItemSelect) {
 }
 
 // src/navigation/FloatingNav.tsx
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function FloatingNav({ brand, items, action, activeKey, onItemSelect, className = "", ...props }) {
-  return /* @__PURE__ */ jsxs19("nav", { className: `hf-floating-nav ${className}`.trim(), "aria-label": "\u4E3B\u5BFC\u822A", ...props, children: [
-    /* @__PURE__ */ jsx23("div", { className: "hf-floating-nav__brand", children: brand }),
-    /* @__PURE__ */ jsx23("div", { className: "hf-floating-nav__items", children: items.map((item) => /* @__PURE__ */ jsx23("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => activateNavigationItem(item, onItemSelect), children: item.label }, item.key)) }),
-    action && /* @__PURE__ */ jsx23("div", { className: "hf-floating-nav__action", children: action })
+  return /* @__PURE__ */ jsxs20("nav", { className: `hf-floating-nav ${className}`.trim(), "aria-label": "\u4E3B\u5BFC\u822A", ...props, children: [
+    /* @__PURE__ */ jsx24("div", { className: "hf-floating-nav__brand", children: brand }),
+    /* @__PURE__ */ jsx24("div", { className: "hf-floating-nav__items", children: items.map((item) => /* @__PURE__ */ jsx24("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => activateNavigationItem(item, onItemSelect), children: item.label }, item.key)) }),
+    action && /* @__PURE__ */ jsx24("div", { className: "hf-floating-nav__action", children: action })
   ] });
 }
 
 // src/navigation/Sidebar.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function Sidebar({ brand, items, activeKey, collapsed, defaultCollapsed = false, onCollapsedChange, onItemSelect, appearance = "flush", className = "", ...props }) {
-  const [internalCollapsed, setInternalCollapsed] = useState10(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = useState11(defaultCollapsed);
   const isCollapsed = collapsed ?? internalCollapsed;
   const toggle = () => {
     const next = !isCollapsed;
     if (collapsed === void 0) setInternalCollapsed(next);
     onCollapsedChange?.(next);
   };
-  return /* @__PURE__ */ jsxs20("aside", { className: `hf-sidebar hf-sidebar--${appearance} ${isCollapsed ? "hf-sidebar--collapsed" : ""} ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsxs20("div", { className: "hf-sidebar__top", children: [
-      brand && /* @__PURE__ */ jsx24("div", { className: "hf-sidebar__brand", children: brand }),
-      /* @__PURE__ */ jsx24("button", { type: "button", onClick: toggle, "aria-label": isCollapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F", "aria-expanded": !isCollapsed, children: "\u2039" })
+  return /* @__PURE__ */ jsxs21("aside", { className: `hf-sidebar hf-sidebar--${appearance} ${isCollapsed ? "hf-sidebar--collapsed" : ""} ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs21("div", { className: "hf-sidebar__top", children: [
+      brand && /* @__PURE__ */ jsx25("div", { className: "hf-sidebar__brand", children: brand }),
+      /* @__PURE__ */ jsx25("button", { className: "hf-sidebar__collapse", type: "button", onClick: toggle, "aria-label": isCollapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F", "aria-expanded": !isCollapsed, children: /* @__PURE__ */ jsx25(Icon, { name: "arrow-right", size: 17 }) })
     ] }),
-    /* @__PURE__ */ jsx24("nav", { "aria-label": "\u4FA7\u8FB9\u5BFC\u822A", children: items.map((item) => /* @__PURE__ */ jsxs20("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, title: isCollapsed ? item.label : void 0, onClick: () => activateNavigationItem(item, onItemSelect), children: [
-      /* @__PURE__ */ jsx24("span", { className: "hf-sidebar__icon", children: item.icon ?? item.label.slice(0, 1) }),
-      /* @__PURE__ */ jsx24("span", { className: "hf-sidebar__label", children: item.label })
+    /* @__PURE__ */ jsx25("nav", { "aria-label": "\u4FA7\u8FB9\u5BFC\u822A", children: items.map((item) => /* @__PURE__ */ jsxs21("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, title: isCollapsed ? item.label : void 0, onClick: () => activateNavigationItem(item, onItemSelect), children: [
+      /* @__PURE__ */ jsx25("span", { className: "hf-sidebar__icon", children: item.icon ?? item.label.slice(0, 1) }),
+      /* @__PURE__ */ jsx25("span", { className: "hf-sidebar__label", children: item.label })
     ] }, item.key)) })
   ] });
 }
 
 // src/navigation/Breadcrumb.tsx
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function Breadcrumb({ items, separator = "/", onItemSelect, className = "", ...props }) {
-  return /* @__PURE__ */ jsx25("nav", { className: `hf-breadcrumb ${className}`.trim(), "aria-label": "\u9762\u5305\u5C51", ...props, children: /* @__PURE__ */ jsx25("ol", { children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx26("nav", { className: `hf-breadcrumb ${className}`.trim(), "aria-label": "\u9762\u5305\u5C51", ...props, children: /* @__PURE__ */ jsx26("ol", { children: items.map((item, index) => {
     const current = index === items.length - 1;
-    return /* @__PURE__ */ jsxs21("li", { children: [
-      current ? /* @__PURE__ */ jsx25("span", { "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx25("a", { href: item.href ?? "#", onClick: () => activateNavigationItem(item, onItemSelect), children: item.label }),
-      !current && /* @__PURE__ */ jsx25("i", { "aria-hidden": "true", children: separator })
+    return /* @__PURE__ */ jsxs22("li", { children: [
+      current ? /* @__PURE__ */ jsx26("span", { "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx26("a", { href: item.href ?? "#", onClick: () => activateNavigationItem(item, onItemSelect), children: item.label }),
+      !current && /* @__PURE__ */ jsx26("i", { "aria-hidden": "true", children: separator })
     ] }, item.key);
   }) }) });
 }
 
 // src/navigation/Menu.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function DropdownMenu({ label, items, activeKey, onItemSelect, className = "", ...props }) {
-  const [open, setOpen] = useState11(false);
+  const [open, setOpen] = useState12(false);
   const ref = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
-  return /* @__PURE__ */ jsxs22("div", { ref, className: `hf-menu ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsxs22("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((value) => !value), children: [
-      label,
-      /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: "\u2304" })
+  return /* @__PURE__ */ jsxs23("div", { ref, className: `hf-menu ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs23("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((value) => !value), children: [
+      /* @__PURE__ */ jsx27("span", { children: label }),
+      /* @__PURE__ */ jsx27(Icon, { className: "hf-menu__chevron", name: "chevron-down", size: 16 })
     ] }),
-    open && /* @__PURE__ */ jsx26("div", { className: "hf-menu__panel", role: "menu", children: items.map((item) => /* @__PURE__ */ jsx26("a", { role: "menuitem", href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => {
+    open && /* @__PURE__ */ jsx27("div", { className: "hf-menu__panel", role: "menu", children: items.map((item) => /* @__PURE__ */ jsx27("a", { role: "menuitem", href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => {
       activateNavigationItem(item, onItemSelect);
       setOpen(false);
     }, children: item.label }, item.key)) })
   ] });
 }
 function MegaMenu({ label, items, onItemSelect, className = "", ...props }) {
-  const [open, setOpen] = useState11(false);
+  const [open, setOpen] = useState12(false);
   const ref = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
-  return /* @__PURE__ */ jsxs22("div", { ref, className: `hf-menu hf-mega-menu ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsxs22("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((value) => !value), children: [
-      label,
-      /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: "\u2304" })
+  return /* @__PURE__ */ jsxs23("div", { ref, className: `hf-menu hf-mega-menu ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs23("button", { type: "button", "aria-expanded": open, "aria-haspopup": "menu", onClick: () => setOpen((value) => !value), children: [
+      /* @__PURE__ */ jsx27("span", { children: label }),
+      /* @__PURE__ */ jsx27(Icon, { className: "hf-menu__chevron", name: "chevron-down", size: 16 })
     ] }),
-    open && /* @__PURE__ */ jsx26("div", { className: "hf-mega-menu__panel", role: "menu", children: items.map((group) => /* @__PURE__ */ jsxs22("section", { children: [
-      /* @__PURE__ */ jsx26("h3", { children: group.label }),
-      group.children?.map((item) => /* @__PURE__ */ jsxs22("a", { role: "menuitem", href: item.href ?? "#", onClick: () => {
+    open && /* @__PURE__ */ jsx27("div", { className: "hf-mega-menu__panel", role: "menu", children: items.map((group) => /* @__PURE__ */ jsxs23("section", { children: [
+      /* @__PURE__ */ jsx27("h3", { children: group.label }),
+      group.children?.map((item) => /* @__PURE__ */ jsxs23("a", { role: "menuitem", href: item.href ?? "#", onClick: () => {
         activateNavigationItem(item, onItemSelect);
         setOpen(false);
       }, children: [
-        /* @__PURE__ */ jsx26("span", { children: item.icon }),
-        /* @__PURE__ */ jsxs22("span", { children: [
-          /* @__PURE__ */ jsx26("strong", { children: item.label }),
-          item.description && /* @__PURE__ */ jsx26("small", { children: item.description })
+        /* @__PURE__ */ jsx27("span", { children: item.icon }),
+        /* @__PURE__ */ jsxs23("span", { children: [
+          /* @__PURE__ */ jsx27("strong", { children: item.label }),
+          item.description && /* @__PURE__ */ jsx27("small", { children: item.description })
         ] })
       ] }, item.key))
     ] }, group.key)) })
@@ -1377,49 +1467,49 @@ function MegaMenu({ label, items, onItemSelect, className = "", ...props }) {
 }
 
 // src/navigation/MobileNavigation.tsx
-import { useId as useId4, useState as useState12 } from "react";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useId as useId5, useState as useState13 } from "react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function MobileNavigation({ brand, items, mode = "drawer", activeKey, open, onOpenChange, onItemSelect, className = "", ...props }) {
-  const [internalOpen, setInternalOpen] = useState12(false);
+  const [internalOpen, setInternalOpen] = useState13(false);
   const isOpen = open ?? internalOpen;
-  const panelId = useId4();
+  const panelId = useId5();
   const setOpen = (next) => {
     if (open === void 0) setInternalOpen(next);
     onOpenChange?.(next);
   };
   const panelRef = useDismissibleLayer(isOpen, () => setOpen(false), true);
-  return /* @__PURE__ */ jsxs23("div", { className: `hf-mobile-nav ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsxs23("div", { className: "hf-mobile-nav__bar", children: [
-      /* @__PURE__ */ jsx27("div", { children: brand }),
-      /* @__PURE__ */ jsxs23("button", { type: "button", "aria-label": "\u6253\u5F00\u5BFC\u822A", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => setOpen(true), children: [
-        /* @__PURE__ */ jsx27("i", {}),
-        /* @__PURE__ */ jsx27("i", {}),
-        /* @__PURE__ */ jsx27("i", {})
+  return /* @__PURE__ */ jsxs24("div", { className: `hf-mobile-nav ${className}`.trim(), ...props, children: [
+    /* @__PURE__ */ jsxs24("div", { className: "hf-mobile-nav__bar", children: [
+      /* @__PURE__ */ jsx28("div", { children: brand }),
+      /* @__PURE__ */ jsxs24("button", { type: "button", "aria-label": "\u6253\u5F00\u5BFC\u822A", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => setOpen(true), children: [
+        /* @__PURE__ */ jsx28("i", {}),
+        /* @__PURE__ */ jsx28("i", {}),
+        /* @__PURE__ */ jsx28("i", {})
       ] })
     ] }),
-    isOpen && /* @__PURE__ */ jsx27("div", { className: `hf-mobile-nav__backdrop hf-mobile-nav__backdrop--${mode}`, onMouseDown: (event) => event.target === event.currentTarget && setOpen(false), children: /* @__PURE__ */ jsxs23("nav", { ref: panelRef, id: panelId, className: "hf-mobile-nav__panel", "aria-label": "\u79FB\u52A8\u5BFC\u822A", tabIndex: -1, children: [
-      /* @__PURE__ */ jsxs23("header", { children: [
-        /* @__PURE__ */ jsx27("div", { children: brand }),
-        /* @__PURE__ */ jsx27("button", { type: "button", "aria-label": "\u5173\u95ED\u5BFC\u822A", onClick: () => setOpen(false), children: "\xD7" })
+    isOpen && /* @__PURE__ */ jsx28("div", { className: `hf-mobile-nav__backdrop hf-mobile-nav__backdrop--${mode}`, onMouseDown: (event) => event.target === event.currentTarget && setOpen(false), children: /* @__PURE__ */ jsxs24("nav", { ref: panelRef, id: panelId, className: "hf-mobile-nav__panel", "aria-label": "\u79FB\u52A8\u5BFC\u822A", tabIndex: -1, children: [
+      /* @__PURE__ */ jsxs24("header", { children: [
+        /* @__PURE__ */ jsx28("div", { children: brand }),
+        /* @__PURE__ */ jsx28("button", { type: "button", "aria-label": "\u5173\u95ED\u5BFC\u822A", onClick: () => setOpen(false), children: /* @__PURE__ */ jsx28(Icon, { name: "close", size: 18 }) })
       ] }),
-      /* @__PURE__ */ jsx27("div", { className: "hf-mobile-nav__links", children: items.map((item, index) => /* @__PURE__ */ jsxs23("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, style: { "--hf-nav-index": index }, onClick: () => {
+      /* @__PURE__ */ jsx28("div", { className: "hf-mobile-nav__links", children: items.map((item, index) => /* @__PURE__ */ jsxs24("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, style: { "--hf-nav-index": index }, onClick: () => {
         activateNavigationItem(item, onItemSelect);
         setOpen(false);
       }, children: [
-        /* @__PURE__ */ jsx27("span", { children: item.label }),
-        item.description && /* @__PURE__ */ jsx27("small", { children: item.description })
+        /* @__PURE__ */ jsx28("span", { children: item.label }),
+        item.description && /* @__PURE__ */ jsx28("small", { children: item.description })
       ] }, item.key)) })
     ] }) })
   ] });
 }
 
 // src/navigation/Scrollspy.tsx
-import { useEffect as useEffect4, useState as useState13 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useState as useState14 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Scrollspy({ items, activeKey, onItemSelect, rootMargin = "-20% 0px -65%", className = "", ...props }) {
-  const [observedKey, setObservedKey] = useState13(items[0]?.key);
+  const [observedKey, setObservedKey] = useState14(items[0]?.key);
   const currentKey = activeKey ?? observedKey;
-  useEffect4(() => {
+  useEffect5(() => {
     if (activeKey || !("IntersectionObserver" in window)) return;
     const observer = new IntersectionObserver((entries) => {
       const visible = entries.find((entry) => entry.isIntersecting);
@@ -1431,15 +1521,15 @@ function Scrollspy({ items, activeKey, onItemSelect, rootMargin = "-20% 0px -65%
     });
     return () => observer.disconnect();
   }, [activeKey, items, rootMargin]);
-  return /* @__PURE__ */ jsx28("nav", { className: `hf-scrollspy ${className}`.trim(), "aria-label": "\u9875\u5185\u5BFC\u822A", ...props, children: items.map((item) => /* @__PURE__ */ jsx28("a", { href: item.href ?? `#${item.key}`, "aria-current": currentKey === item.key ? "location" : void 0, onClick: () => onItemSelect?.(item), children: item.label }, item.key)) });
+  return /* @__PURE__ */ jsx29("nav", { className: `hf-scrollspy ${className}`.trim(), "aria-label": "\u9875\u5185\u5BFC\u822A", ...props, children: items.map((item) => /* @__PURE__ */ jsx29("a", { href: item.href ?? `#${item.key}`, "aria-current": currentKey === item.key ? "location" : void 0, onClick: () => onItemSelect?.(item), children: item.label }, item.key)) });
 }
 
 // src/navigation/ShrinkNav.tsx
-import { useEffect as useEffect5, useState as useState14 } from "react";
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState15 } from "react";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 function ShrinkNav({ brand, items, threshold = 48, action, activeKey, onItemSelect, className = "", ...props }) {
-  const [compact, setCompact] = useState14(false);
-  useEffect5(() => {
+  const [compact, setCompact] = useState15(false);
+  useEffect6(() => {
     let frame = 0;
     const update = () => {
       cancelAnimationFrame(frame);
@@ -1452,18 +1542,18 @@ function ShrinkNav({ brand, items, threshold = 48, action, activeKey, onItemSele
       window.removeEventListener("scroll", update);
     };
   }, [threshold]);
-  return /* @__PURE__ */ jsxs24("nav", { className: `hf-shrink-nav ${compact ? "hf-shrink-nav--compact" : ""} ${className}`.trim(), "aria-label": "\u6EDA\u52A8\u5BFC\u822A", ...props, children: [
-    /* @__PURE__ */ jsx29("div", { className: "hf-shrink-nav__brand", children: brand }),
-    /* @__PURE__ */ jsx29("div", { className: "hf-shrink-nav__items", children: items.map((item) => /* @__PURE__ */ jsx29("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => onItemSelect?.(item), children: item.label }, item.key)) }),
+  return /* @__PURE__ */ jsxs25("nav", { className: `hf-shrink-nav ${compact ? "hf-shrink-nav--compact" : ""} ${className}`.trim(), "aria-label": "\u6EDA\u52A8\u5BFC\u822A", ...props, children: [
+    /* @__PURE__ */ jsx30("div", { className: "hf-shrink-nav__brand", children: brand }),
+    /* @__PURE__ */ jsx30("div", { className: "hf-shrink-nav__items", children: items.map((item) => /* @__PURE__ */ jsx30("a", { href: item.href ?? "#", "aria-current": activeKey === item.key ? "page" : void 0, onClick: () => onItemSelect?.(item), children: item.label }, item.key)) }),
     action
   ] });
 }
 
 // src/navigation/Tabs.tsx
-import { useId as useId5 } from "react";
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useId as useId6 } from "react";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 function Tabs({ items, value, onChange, variant = "line", label = "\u5185\u5BB9\u6807\u7B7E" }) {
-  const id = useId5();
+  const id = useId6();
   const active = items.find((item) => item.key === value) ?? items[0];
   const onKeyDown = (event) => {
     if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
@@ -1474,43 +1564,43 @@ function Tabs({ items, value, onChange, variant = "line", label = "\u5185\u5BB9\
     const next = enabled[(current + offset + enabled.length) % enabled.length];
     if (next) onChange(next.key);
   };
-  return /* @__PURE__ */ jsxs25("div", { className: `hf-tabs hf-tabs--${variant}`, children: [
-    /* @__PURE__ */ jsx30("div", { role: "tablist", "aria-label": label, onKeyDown, children: items.map((item) => /* @__PURE__ */ jsxs25("button", { type: "button", role: "tab", id: `${id}-${item.key}`, "aria-controls": `${id}-${item.key}-panel`, "aria-selected": item.key === value, tabIndex: item.key === value ? 0 : -1, disabled: item.disabled, onClick: () => onChange(item.key), children: [
+  return /* @__PURE__ */ jsxs26("div", { className: `hf-tabs hf-tabs--${variant}`, children: [
+    /* @__PURE__ */ jsx31("div", { role: "tablist", "aria-label": label, onKeyDown, children: items.map((item) => /* @__PURE__ */ jsxs26("button", { type: "button", role: "tab", id: `${id}-${item.key}`, "aria-controls": `${id}-${item.key}-panel`, "aria-selected": item.key === value, tabIndex: item.key === value ? 0 : -1, disabled: item.disabled, onClick: () => onChange(item.key), children: [
       item.icon,
-      /* @__PURE__ */ jsx30("span", { children: item.label }),
-      item.badge && /* @__PURE__ */ jsx30("small", { children: item.badge })
+      /* @__PURE__ */ jsx31("span", { children: item.label }),
+      item.badge && /* @__PURE__ */ jsx31("small", { children: item.badge })
     ] }, item.key)) }),
-    active && /* @__PURE__ */ jsx30("div", { role: "tabpanel", id: `${id}-${active.key}-panel`, "aria-labelledby": `${id}-${active.key}`, tabIndex: 0, children: active.content })
+    active && /* @__PURE__ */ jsx31("div", { role: "tabpanel", id: `${id}-${active.key}-panel`, "aria-labelledby": `${id}-${active.key}`, tabIndex: 0, children: active.content })
   ] });
 }
 
 // src/navigation/Steps.tsx
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function Steps({ items, current, onChange, orientation = "horizontal" }) {
   const currentIndex = Math.max(0, items.findIndex((item) => item.key === current));
-  return /* @__PURE__ */ jsx31("ol", { className: `hf-steps hf-steps--${orientation}`, children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx32("ol", { className: `hf-steps hf-steps--${orientation}`, children: items.map((item, index) => {
     const state = index < currentIndex ? "complete" : index === currentIndex ? "current" : "upcoming";
-    return /* @__PURE__ */ jsx31("li", { className: `is-${state}`, "aria-current": state === "current" ? "step" : void 0, children: /* @__PURE__ */ jsxs26("button", { type: "button", disabled: item.disabled || !onChange, onClick: () => onChange?.(item.key), children: [
-      /* @__PURE__ */ jsx31("span", { children: state === "complete" ? "\u2713" : index + 1 }),
-      /* @__PURE__ */ jsxs26("span", { children: [
-        /* @__PURE__ */ jsx31("strong", { children: item.title }),
-        item.optional && /* @__PURE__ */ jsx31("small", { children: "\u53EF\u9009" }),
-        item.description && /* @__PURE__ */ jsx31("small", { children: item.description })
+    return /* @__PURE__ */ jsx32("li", { className: `is-${state}`, "aria-current": state === "current" ? "step" : void 0, children: /* @__PURE__ */ jsxs27("button", { type: "button", disabled: item.disabled || !onChange, onClick: () => onChange?.(item.key), children: [
+      /* @__PURE__ */ jsx32("span", { children: state === "complete" ? "\u2713" : index + 1 }),
+      /* @__PURE__ */ jsxs27("span", { children: [
+        /* @__PURE__ */ jsx32("strong", { children: item.title }),
+        item.optional && /* @__PURE__ */ jsx32("small", { children: "\u53EF\u9009" }),
+        item.description && /* @__PURE__ */ jsx32("small", { children: item.description })
       ] })
     ] }) }, item.key);
   }) });
 }
 
 // src/navigation/CommandPalette.tsx
-import { useEffect as useEffect6, useMemo as useMemo4, useState as useState15 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo4, useState as useState16 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "\u8F93\u5165\u547D\u4EE4\u6216\u641C\u7D22\u2026" }) {
-  const [query, setQuery] = useState15("");
-  const [active, setActive] = useState15(0);
+  const [query, setQuery] = useState16("");
+  const [active, setActive] = useState16(0);
   const enabled = useMemo4(() => items.filter((item) => !item.disabled && `${item.label} ${item.description ?? ""} ${item.group ?? ""}`.toLowerCase().includes(query.toLowerCase())), [items, query]);
   const dialogRef = useDismissibleLayer(open, () => onOpenChange(false), true);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) {
       setQuery("");
       setActive(0);
@@ -1534,39 +1624,39 @@ function CommandPalette({ open, onOpenChange, items, onSelect, placeholder = "\u
     }
   };
   if (!open) return null;
-  return createPortal3(/* @__PURE__ */ jsx32("div", { className: "hf-command-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onOpenChange(false), children: /* @__PURE__ */ jsxs27("div", { ref: dialogRef, tabIndex: -1, className: "hf-command", role: "dialog", "aria-modal": "true", "aria-label": "\u547D\u4EE4\u9762\u677F", children: [
-    /* @__PURE__ */ jsxs27("div", { className: "hf-command__search", children: [
-      /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: "\u2315" }),
-      /* @__PURE__ */ jsx32("input", { autoFocus: true, role: "combobox", "aria-expanded": "true", "aria-controls": "hf-command-list", value: query, placeholder, onChange: (event) => {
+  return createPortal3(/* @__PURE__ */ jsx33("div", { className: "hf-command-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onOpenChange(false), children: /* @__PURE__ */ jsxs28("div", { ref: dialogRef, tabIndex: -1, className: "hf-command", role: "dialog", "aria-modal": "true", "aria-label": "\u547D\u4EE4\u9762\u677F", children: [
+    /* @__PURE__ */ jsxs28("div", { className: "hf-command__search", children: [
+      /* @__PURE__ */ jsx33("span", { "aria-hidden": "true", children: "\u2315" }),
+      /* @__PURE__ */ jsx33("input", { autoFocus: true, role: "combobox", "aria-expanded": "true", "aria-controls": "hf-command-list", value: query, placeholder, onChange: (event) => {
         setQuery(event.target.value);
         setActive(0);
       }, onKeyDown: keydown }),
-      /* @__PURE__ */ jsx32("kbd", { children: "Esc" })
+      /* @__PURE__ */ jsx33("kbd", { children: "Esc" })
     ] }),
-    /* @__PURE__ */ jsxs27("div", { id: "hf-command-list", className: "hf-command__list", role: "listbox", children: [
-      enabled.map((item, index) => /* @__PURE__ */ jsxs27("button", { type: "button", role: "option", "aria-selected": index === active, onPointerMove: () => setActive(index), onClick: () => {
+    /* @__PURE__ */ jsxs28("div", { id: "hf-command-list", className: "hf-command__list", role: "listbox", children: [
+      enabled.map((item, index) => /* @__PURE__ */ jsxs28("button", { type: "button", role: "option", "aria-selected": index === active, onPointerMove: () => setActive(index), onClick: () => {
         onSelect(item.key);
         onOpenChange(false);
       }, children: [
         item.icon,
-        /* @__PURE__ */ jsxs27("span", { children: [
-          /* @__PURE__ */ jsx32("strong", { children: item.label }),
-          item.description && /* @__PURE__ */ jsx32("small", { children: item.description })
+        /* @__PURE__ */ jsxs28("span", { children: [
+          /* @__PURE__ */ jsx33("strong", { children: item.label }),
+          item.description && /* @__PURE__ */ jsx33("small", { children: item.description })
         ] }),
-        item.shortcut && /* @__PURE__ */ jsx32("kbd", { children: item.shortcut })
+        item.shortcut && /* @__PURE__ */ jsx33("kbd", { children: item.shortcut })
       ] }, item.key)),
-      !enabled.length && /* @__PURE__ */ jsx32("div", { className: "hf-command__empty", children: "\u6CA1\u6709\u5339\u914D\u547D\u4EE4" })
+      !enabled.length && /* @__PURE__ */ jsx33("div", { className: "hf-command__empty", children: "\u6CA1\u6709\u5339\u914D\u547D\u4EE4" })
     ] })
   ] }) }), document.body);
 }
 
 // src/layout/Layout.tsx
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function Container({ size = "lg", padding = 24, className = "", style, ...props }) {
-  return /* @__PURE__ */ jsx33("div", { className: `hf-container hf-container--${size} ${className}`.trim(), style: { "--hf-container-padding": `${padding}px`, ...style }, ...props });
+  return /* @__PURE__ */ jsx34("div", { className: `hf-container hf-container--${size} ${className}`.trim(), style: { "--hf-container-padding": `${padding}px`, ...style }, ...props });
 }
 function Stack({ direction = "column", gap = 12, align, justify, wrap = false, className = "", style, ...props }) {
-  return /* @__PURE__ */ jsx33("div", { className: `hf-stack hf-stack--${direction} ${className}`.trim(), style: { "--hf-stack-gap": `${gap}px`, alignItems: align, justifyContent: justify, flexWrap: wrap ? "wrap" : void 0, ...style }, ...props });
+  return /* @__PURE__ */ jsx34("div", { className: `hf-stack hf-stack--${direction} ${className}`.trim(), style: { "--hf-stack-gap": `${gap}px`, alignItems: align, justifyContent: justify, flexWrap: wrap ? "wrap" : void 0, ...style }, ...props });
 }
 function Grid({ columns = "auto", minItemWidth = 240, gap = 16, className = "", style, ...props }) {
   const gridStyle = {
@@ -1574,7 +1664,7 @@ function Grid({ columns = "auto", minItemWidth = 240, gap = 16, className = "",
     "--hf-grid-gap": `${gap}px`,
     ...style
   };
-  return /* @__PURE__ */ jsx33("div", { className: `hf-grid ${className}`.trim(), style: gridStyle, ...props });
+  return /* @__PURE__ */ jsx34("div", { className: `hf-grid ${className}`.trim(), style: gridStyle, ...props });
 }
 function Masonry({ columns, minColumnWidth = 260, gap = 16, className = "", style, children, ...props }) {
   const masonryStyle = {
@@ -1583,154 +1673,66 @@ function Masonry({ columns, minColumnWidth = 260, gap = 16, className = "", styl
     "--hf-masonry-gap": `${gap}px`,
     ...style
   };
-  return /* @__PURE__ */ jsx33("div", { className: `hf-masonry ${className}`.trim(), style: masonryStyle, ...props, children });
+  return /* @__PURE__ */ jsx34("div", { className: `hf-masonry ${className}`.trim(), style: masonryStyle, ...props, children });
 }
 function PageLayout({ variant = "single", sidebar, header, sidebarWidth = 280, className = "", style, children, ...props }) {
   const layoutStyle = { "--hf-layout-sidebar": `${sidebarWidth}px`, ...style };
-  return /* @__PURE__ */ jsxs28("div", { className: `hf-page-layout hf-page-layout--${variant} ${className}`.trim(), style: layoutStyle, ...props, children: [
-    header && /* @__PURE__ */ jsx33("header", { className: "hf-page-layout__header", children: header }),
-    sidebar && /* @__PURE__ */ jsx33("aside", { className: "hf-page-layout__sidebar", children: sidebar }),
-    /* @__PURE__ */ jsx33("main", { className: "hf-page-layout__main", children })
+  return /* @__PURE__ */ jsxs29("div", { className: `hf-page-layout hf-page-layout--${variant} ${className}`.trim(), style: layoutStyle, ...props, children: [
+    header && /* @__PURE__ */ jsx34("header", { className: "hf-page-layout__header", children: header }),
+    sidebar && /* @__PURE__ */ jsx34("aside", { className: "hf-page-layout__sidebar", children: sidebar }),
+    /* @__PURE__ */ jsx34("main", { className: "hf-page-layout__main", children })
   ] });
 }
 
 // src/layout/Skeleton.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Skeleton({ width = "100%", height = 16, radius, circle, animated = true, className = "", style, ...props }) {
   const value = (input) => typeof input === "number" ? `${input}px` : input;
-  return /* @__PURE__ */ jsx34("span", { "aria-hidden": "true", className: `hf-skeleton ${animated ? "is-animated" : ""} ${circle ? "is-circle" : ""} ${className}`.trim(), style: { width: value(width), height: value(height), borderRadius: radius ? value(radius) : void 0, ...style }, ...props });
+  return /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: `hf-skeleton ${animated ? "is-animated" : ""} ${circle ? "is-circle" : ""} ${className}`.trim(), style: { width: value(width), height: value(height), borderRadius: radius ? value(radius) : void 0, ...style }, ...props });
 }
 
 // src/feedback/Loading.tsx
-import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 function Spinner({ label = "\u6B63\u5728\u52A0\u8F7D", size = 20, className = "" }) {
-  return /* @__PURE__ */ jsx35("span", { className: `hf-loading-spinner ${className}`.trim(), role: "status", "aria-label": label, style: { "--hf-loading-size": `${size}px` } });
+  return /* @__PURE__ */ jsx36("span", { className: `hf-loading-spinner ${className}`.trim(), role: "status", "aria-label": label, style: { "--hf-loading-size": `${size}px` } });
 }
 function LoadingDots({ label = "\u6B63\u5728\u52A0\u8F7D" }) {
-  return /* @__PURE__ */ jsxs29("span", { className: "hf-loading-dots", role: "status", "aria-label": label, children: [
-    /* @__PURE__ */ jsx35("i", {}),
-    /* @__PURE__ */ jsx35("i", {}),
-    /* @__PURE__ */ jsx35("i", {})
+  return /* @__PURE__ */ jsxs30("span", { className: "hf-loading-dots", role: "status", "aria-label": label, children: [
+    /* @__PURE__ */ jsx36("i", {}),
+    /* @__PURE__ */ jsx36("i", {}),
+    /* @__PURE__ */ jsx36("i", {})
   ] });
 }
 function ProgressBar({ value, label, indeterminate = false, className = "" }) {
   const percent = Math.min(100, Math.max(0, value ?? 0));
-  return /* @__PURE__ */ jsxs29("div", { className: `hf-progress ${indeterminate ? "is-indeterminate" : ""} ${className}`.trim(), children: [
-    label && /* @__PURE__ */ jsxs29("div", { className: "hf-progress__label", children: [
-      /* @__PURE__ */ jsx35("span", { children: label }),
-      !indeterminate && /* @__PURE__ */ jsxs29("strong", { children: [
+  return /* @__PURE__ */ jsxs30("div", { className: `hf-progress ${indeterminate ? "is-indeterminate" : ""} ${className}`.trim(), children: [
+    label && /* @__PURE__ */ jsxs30("div", { className: "hf-progress__label", children: [
+      /* @__PURE__ */ jsx36("span", { children: label }),
+      !indeterminate && /* @__PURE__ */ jsxs30("strong", { children: [
         percent,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx35("div", { className: "hf-progress__track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? void 0 : percent, children: /* @__PURE__ */ jsx35("i", { style: { "--hf-progress": `${percent}%` } }) })
+    /* @__PURE__ */ jsx36("div", { className: "hf-progress__track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? void 0 : percent, children: /* @__PURE__ */ jsx36("i", { style: { "--hf-progress": `${percent}%` } }) })
   ] });
 }
 function ProgressRing({ value, size = 72, label }) {
   const percent = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsx35("span", { className: "hf-progress-ring", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, style: { "--hf-ring-value": `${percent * 3.6}deg`, "--hf-ring-size": `${size}px` }, children: /* @__PURE__ */ jsxs29("strong", { children: [
+  return /* @__PURE__ */ jsx36("span", { className: "hf-progress-ring", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, style: { "--hf-ring-value": `${percent * 3.6}deg`, "--hf-ring-size": `${size}px` }, children: /* @__PURE__ */ jsxs30("strong", { children: [
     percent,
     "%"
   ] }) });
 }
 function LoadingOverlay({ active = true, label = "\u6B63\u5728\u51C6\u5907\u5185\u5BB9", className = "", children, ...props }) {
-  return /* @__PURE__ */ jsxs29("div", { className: `hf-loading-overlay ${className}`.trim(), "aria-busy": active, ...props, children: [
+  return /* @__PURE__ */ jsxs30("div", { className: `hf-loading-overlay ${className}`.trim(), "aria-busy": active, ...props, children: [
     children,
-    active && /* @__PURE__ */ jsxs29("div", { className: "hf-loading-overlay__veil", role: "status", children: [
-      /* @__PURE__ */ jsx35(Spinner, { label, size: 28 }),
-      /* @__PURE__ */ jsx35("span", { children: label })
+    active && /* @__PURE__ */ jsxs30("div", { className: "hf-loading-overlay__veil", role: "status", children: [
+      /* @__PURE__ */ jsx36(Spinner, { label, size: 28 }),
+      /* @__PURE__ */ jsx36("span", { children: label })
     ] })
   ] });
 }
 
-// src/forms/Select.tsx
-import { forwardRef as forwardRef5, useEffect as useEffect7, useId as useId6, useRef as useRef4, useState as useState16 } from "react";
-import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
-var Select = forwardRef5(function Select2({ id, label, hint, error, options, placeholder, className = "", value, defaultValue, onChange, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, forwardedRef) {
-  const generatedId = useId6();
-  const inputId = id ?? generatedId;
-  const triggerId = `${inputId}-trigger`;
-  const listboxId = `${inputId}-listbox`;
-  const descriptionId = `${inputId}-description`;
-  const [open, setOpen] = useState16(false);
-  const rootRef = useDismissibleLayer(open, () => setOpen(false), { autoFocus: false });
-  const nativeRef = useRef4(null);
-  const [innerValue, setInnerValue] = useState16(() => String(defaultValue ?? (placeholder ? "" : options.find((option) => !option.disabled)?.value ?? "")));
-  const selectedValue = value === void 0 ? innerValue : String(value);
-  const selectedOption = options.find((option) => option.value === selectedValue);
-  const enabledIndices = options.map((option, index) => option.disabled ? -1 : index).filter((index) => index >= 0);
-  const selectedIndex = options.findIndex((option) => option.value === selectedValue);
-  const [activeIndex, setActiveIndex] = useState16(selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1);
-  const assignRef = (node) => {
-    nativeRef.current = node;
-    if (typeof forwardedRef === "function") forwardedRef(node);
-    else if (forwardedRef) forwardedRef.current = node;
-  };
-  const handleNativeChange = (event) => {
-    if (value === void 0) setInnerValue(event.currentTarget.value);
-    onChange?.(event);
-  };
-  const choose = (nextValue) => {
-    const native = nativeRef.current;
-    if (!native) return;
-    Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set?.call(native, nextValue);
-    native.dispatchEvent(new Event("change", { bubbles: true }));
-    if (value === void 0) setInnerValue(nextValue);
-    setOpen(false);
-    window.requestAnimationFrame(() => document.getElementById(triggerId)?.focus());
-  };
-  useEffect7(() => {
-    if (selectedIndex >= 0) setActiveIndex(selectedIndex);
-  }, [selectedIndex]);
-  const move = (direction) => {
-    if (!enabledIndices.length) return;
-    const current = enabledIndices.indexOf(activeIndex);
-    const next = current < 0 ? 0 : (current + direction + enabledIndices.length) % enabledIndices.length;
-    setActiveIndex(enabledIndices[next]);
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      if (!open) setOpen(true);
-      move(event.key === "ArrowDown" ? 1 : -1);
-    } else if ((event.key === "Enter" || event.key === " ") && open) {
-      event.preventDefault();
-      const option = options[activeIndex];
-      if (option && !option.disabled) choose(option.value);
-    } else if (event.key === "Escape" && open) {
-      event.preventDefault();
-      setOpen(false);
-    } else if (event.key === "Home" && open && enabledIndices.length) {
-      event.preventDefault();
-      setActiveIndex(enabledIndices[0]);
-    } else if (event.key === "End" && open && enabledIndices.length) {
-      event.preventDefault();
-      setActiveIndex(enabledIndices[enabledIndices.length - 1]);
-    } else if (event.key === "Tab") setOpen(false);
-  };
-  return /* @__PURE__ */ jsxs30("div", { className: `hf-field ${className}`.trim(), ref: rootRef, children: [
-    label && /* @__PURE__ */ jsx36("label", { className: "hf-field__label", htmlFor: triggerId, children: label }),
-    /* @__PURE__ */ jsxs30("div", { className: `hf-select-shell ${open ? "hf-select-shell--open" : ""} ${error ? "hf-select-shell--error" : ""}`, children: [
-      /* @__PURE__ */ jsxs30("select", { ref: assignRef, id: inputId, className: "hf-select-native", tabIndex: -1, "aria-hidden": "true", value: selectedValue, disabled, onChange: handleNativeChange, ...props, children: [
-        placeholder && /* @__PURE__ */ jsx36("option", { value: "", disabled: true, children: placeholder }),
-        options.map((option) => /* @__PURE__ */ jsx36("option", { value: option.value, disabled: option.disabled, children: typeof option.label === "string" ? option.label : option.value }, option.value))
-      ] }),
-      /* @__PURE__ */ jsxs30("button", { id: triggerId, type: "button", className: "hf-select", disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : void 0, "aria-activedescendant": open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0, "aria-invalid": Boolean(error), "aria-describedby": hint || error ? descriptionId : void 0, onClick: () => {
-        setActiveIndex(selectedIndex >= 0 ? selectedIndex : enabledIndices[0] ?? -1);
-        setOpen((current) => !current);
-      }, onKeyDown: handleKeyDown, children: [
-        /* @__PURE__ */ jsx36("span", { className: !selectedOption ? "hf-select__placeholder" : "", children: selectedOption?.label ?? placeholder ?? "\u8BF7\u9009\u62E9" }),
-        /* @__PURE__ */ jsx36("svg", { className: "hf-select__chevron", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx36("path", { d: open ? "m4.5 9.75 3.5-3.5 3.5 3.5" : "m4.5 6.25 3.5 3.5 3.5-3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-      ] }),
-      open && /* @__PURE__ */ jsx36("div", { id: listboxId, className: "hf-select-menu", role: "listbox", "aria-labelledby": triggerId, children: options.map((option, index) => /* @__PURE__ */ jsxs30("button", { id: `${listboxId}-option-${index}`, type: "button", role: "option", "aria-selected": option.value === selectedValue, disabled: option.disabled, className: index === activeIndex ? "is-active" : "", onPointerMove: () => !option.disabled && setActiveIndex(index), onClick: () => choose(option.value), children: [
-        /* @__PURE__ */ jsx36("span", { children: option.label }),
-        option.value === selectedValue && /* @__PURE__ */ jsx36("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx36("path", { d: "m3.5 8 3 3 6-6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) })
-      ] }, option.value)) })
-    ] }),
-    (error || hint) && /* @__PURE__ */ jsx36("span", { id: descriptionId, className: `hf-field__hint ${error ? "hf-field__hint--error" : ""}`, children: error ?? hint })
-  ] });
-});
-
 // src/forms/MultiSelect.tsx
 import { useId as useId7, useState as useState17 } from "react";
 import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
@@ -1758,7 +1760,7 @@ function MultiSelect({ label, options, value, onChange, placeholder = "\u8BF7\u9
           /* @__PURE__ */ jsx37("button", { type: "button", "aria-label": `\u79FB\u9664 ${String(option?.label)}`, onClick: (event) => {
             event.stopPropagation();
             toggle(item);
-          }, children: "\xD7" })
+          }, children: /* @__PURE__ */ jsx37(Icon, { name: "close", size: 13 }) })
         ] }, item);
       }) : /* @__PURE__ */ jsx37("em", { children: placeholder }) }),
       /* @__PURE__ */ jsx37(Icon, { name: "chevron-down", size: 16, className: "hf-multiselect__chevron" })
@@ -2276,7 +2278,7 @@ function Combobox({ label, options, value = "", onChange, placeholder = "\u641C\
         setActive(0);
         setOpen(true);
       }, onKeyDown }),
-      /* @__PURE__ */ jsx45("button", { type: "button", "aria-label": open ? "\u5173\u95ED\u9009\u9879" : "\u6253\u5F00\u9009\u9879", disabled, onClick: () => setOpen((current) => !current), children: "\u2304" })
+      /* @__PURE__ */ jsx45("button", { type: "button", "aria-label": open ? "\u5173\u95ED\u9009\u9879" : "\u6253\u5F00\u9009\u9879", disabled, onClick: () => setOpen((current) => !current), children: /* @__PURE__ */ jsx45(Icon, { name: "chevron-down", size: 16 }) })
     ] }),
     open && /* @__PURE__ */ jsx45("div", { id: `${id}-listbox`, className: "hf-combobox__menu", role: "listbox", children: filtered.length ? filtered.map((option, index) => /* @__PURE__ */ jsxs38("button", { type: "button", role: "option", "aria-selected": option.value === value, disabled: option.disabled, className: index === active ? "is-active" : "", onPointerMove: () => setActive(index), onClick: () => choose(option.value), children: [
       /* @__PURE__ */ jsx45("span", { children: option.label }),
@@ -2324,10 +2326,7 @@ function Cascader({ options, value = [], onChange, label }) {
   }
   return /* @__PURE__ */ jsxs40("div", { className: "hf-field hf-cascader", children: [
     label && /* @__PURE__ */ jsx47("span", { className: "hf-field__label", children: label }),
-    /* @__PURE__ */ jsx47("div", { children: levels.map((items, level) => /* @__PURE__ */ jsxs40("select", { "aria-label": `\u7B2C ${level + 1} \u7EA7`, value: value[level] ?? "", onChange: (event) => onChange([...value.slice(0, level), event.target.value]), children: [
-      /* @__PURE__ */ jsx47("option", { value: "", children: "\u8BF7\u9009\u62E9" }),
-      items.map((item) => /* @__PURE__ */ jsx47("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value))
-    ] }, level)) })
+    /* @__PURE__ */ jsx47("div", { children: levels.map((items, level) => /* @__PURE__ */ jsx47(Select, { "aria-label": `\u7B2C ${level + 1} \u7EA7`, className: "hf-cascader__level", value: value[level] ?? "", placeholder: "\u8BF7\u9009\u62E9", options: items.map((item) => ({ label: item.label, value: item.value, disabled: item.disabled })), onChange: (event) => onChange([...value.slice(0, level), event.target.value]) }, level)) })
   ] });
 }
 function TreeSelect({ options, value, onChange, label, placeholder = "\u9009\u62E9\u8282\u70B9" }) {
@@ -2337,8 +2336,8 @@ function TreeSelect({ options, value, onChange, label, placeholder = "\u9009\u62
   return /* @__PURE__ */ jsxs40("div", { className: "hf-field hf-tree-select", children: [
     label && /* @__PURE__ */ jsx47("span", { className: "hf-field__label", children: label }),
     /* @__PURE__ */ jsxs40("button", { type: "button", className: "hf-picker-trigger", "aria-expanded": open, onClick: () => setOpen(!open), children: [
-      all.find((item) => item.node.key === value)?.node.label ?? placeholder,
-      /* @__PURE__ */ jsx47("span", { children: "\u2304" })
+      /* @__PURE__ */ jsx47("span", { children: all.find((item) => item.node.key === value)?.node.label ?? placeholder }),
+      /* @__PURE__ */ jsx47(Icon, { className: "hf-picker-trigger__chevron", name: "chevron-down", size: 16 })
     ] }),
     open && /* @__PURE__ */ jsx47("div", { role: "listbox", children: all.map(({ node, depth }) => /* @__PURE__ */ jsx47("button", { type: "button", role: "option", "aria-selected": node.key === value, disabled: node.disabled, style: { paddingLeft: 12 + depth * 18 }, onClick: () => {
       onChange(node.key);
@@ -2391,7 +2390,7 @@ function SearchInput({ onSearch, loading, clearable = true, ...props }) {
       setValue(event.target.value);
       props.onChange?.(event);
     } }),
-    clearable && value && /* @__PURE__ */ jsx47("button", { type: "button", "aria-label": "\u6E05\u9664\u641C\u7D22", onClick: () => setValue(""), children: "\xD7" }),
+    clearable && value && /* @__PURE__ */ jsx47("button", { type: "button", "aria-label": "\u6E05\u9664\u641C\u7D22", onClick: () => setValue(""), children: /* @__PURE__ */ jsx47(Icon, { name: "close", size: 14 }) }),
     /* @__PURE__ */ jsx47("button", { type: "submit", disabled: loading, children: loading ? "\u641C\u7D22\u4E2D" : "\u641C\u7D22" })
   ] });
 }
@@ -2407,7 +2406,7 @@ function Drawer({ open, title, children, onClose, footer, side = "right", size =
   return createPortal4(/* @__PURE__ */ jsx48("div", { className: "hf-drawer-backdrop", onMouseDown: (event) => event.target === event.currentTarget && onClose(), children: /* @__PURE__ */ jsxs41("div", { ref: drawerRef, className: `hf-drawer hf-drawer--${side} hf-drawer--${size}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [
     /* @__PURE__ */ jsxs41("header", { children: [
       /* @__PURE__ */ jsx48("h2", { id: titleId, children: title }),
-      /* @__PURE__ */ jsx48(Button, { variant: "quiet", size: "sm", onClick: onClose, "aria-label": "\u5173\u95ED\u62BD\u5C49", children: "\xD7" })
+      /* @__PURE__ */ jsx48(Button, { variant: "quiet", size: "sm", iconOnly: true, leadingIcon: /* @__PURE__ */ jsx48(Icon, { name: "close", size: 16 }), onClick: onClose, "aria-label": "\u5173\u95ED\u62BD\u5C49" })
     ] }),
     /* @__PURE__ */ jsx48("div", { className: "hf-drawer__body", children }),
     footer && /* @__PURE__ */ jsx48("footer", { children: footer })
@@ -2492,7 +2491,7 @@ function Notification({ title, children, tone = "info", time, unread, action, on
       children && /* @__PURE__ */ jsx51("p", { children }),
       action && /* @__PURE__ */ jsx51("div", { className: "hf-notification__action", children: action })
     ] }),
-    onClose && /* @__PURE__ */ jsx51("button", { type: "button", "aria-label": "\u5173\u95ED\u901A\u77E5", onClick: onClose, children: "\xD7" })
+    onClose && /* @__PURE__ */ jsx51("button", { type: "button", "aria-label": "\u5173\u95ED\u901A\u77E5", onClick: onClose, children: /* @__PURE__ */ jsx51(Icon, { name: "close", size: 15 }) })
   ] });
 }
 function Result({ status = "info", title, description, actions, extra }) {
@@ -2907,23 +2906,20 @@ function QueryBuilder({ fields, rules, onChange, conjunction = "and", onConjunct
   return /* @__PURE__ */ jsxs56("div", { className: "hf-query-builder", children: [
     /* @__PURE__ */ jsxs56("header", { children: [
       /* @__PURE__ */ jsx64("strong", { children: "\u6EE1\u8DB3" }),
-      /* @__PURE__ */ jsxs56("select", { "aria-label": "\u6761\u4EF6\u5173\u7CFB", value: conjunction, disabled, onChange: (event) => onConjunctionChange?.(event.target.value), children: [
-        /* @__PURE__ */ jsx64("option", { value: "and", children: "\u5168\u90E8\u6761\u4EF6" }),
-        /* @__PURE__ */ jsx64("option", { value: "or", children: "\u4EFB\u4E00\u6761\u4EF6" })
-      ] })
+      /* @__PURE__ */ jsx64(Select, { className: "hf-query-builder__select", "aria-label": "\u6761\u4EF6\u5173\u7CFB", value: conjunction, disabled, options: [{ value: "and", label: "\u5168\u90E8\u6761\u4EF6" }, { value: "or", label: "\u4EFB\u4E00\u6761\u4EF6" }], onChange: (event) => onConjunctionChange?.(event.target.value) })
     ] }),
     /* @__PURE__ */ jsx64("div", { children: rules.map((rule, index) => {
       const field = fields.find((item) => item.key === rule.field) ?? fields[0];
       const operators = field?.operators ?? defaultOperators;
       return /* @__PURE__ */ jsxs56("div", { className: "hf-query-builder__rule", children: [
         /* @__PURE__ */ jsx64("span", { children: index + 1 }),
-        /* @__PURE__ */ jsx64("select", { "aria-label": `\u6761\u4EF6 ${index + 1} \u5B57\u6BB5`, value: rule.field, disabled, onChange: (event) => {
+        /* @__PURE__ */ jsx64(Select, { className: "hf-query-builder__select", "aria-label": `\u6761\u4EF6 ${index + 1} \u5B57\u6BB5`, value: rule.field, disabled, options: fields.map((item) => ({ value: item.key, label: item.label })), onChange: (event) => {
           const next = fields.find((item) => item.key === event.target.value);
           update(rule.id, { field: next.key, operator: (next.operators ?? defaultOperators)[0]?.value ?? "equals", value: "" });
-        }, children: fields.map((item) => /* @__PURE__ */ jsx64("option", { value: item.key, children: item.label }, item.key)) }),
-        /* @__PURE__ */ jsx64("select", { "aria-label": `\u6761\u4EF6 ${index + 1} \u8FD0\u7B97\u7B26`, value: rule.operator, disabled, onChange: (event) => update(rule.id, { operator: event.target.value }), children: operators.map((item) => /* @__PURE__ */ jsx64("option", { value: item.value, children: item.label }, item.value)) }),
+        } }),
+        /* @__PURE__ */ jsx64(Select, { className: "hf-query-builder__select", "aria-label": `\u6761\u4EF6 ${index + 1} \u8FD0\u7B97\u7B26`, value: rule.operator, disabled, options: operators, onChange: (event) => update(rule.id, { operator: event.target.value }) }),
         /* @__PURE__ */ jsx64("input", { "aria-label": `\u6761\u4EF6 ${index + 1} \u503C`, type: field?.type ?? "text", value: rule.value, disabled, onChange: (event) => update(rule.id, { value: event.target.value }) }),
-        /* @__PURE__ */ jsx64("button", { type: "button", "aria-label": `\u5220\u9664\u6761\u4EF6 ${index + 1}`, disabled, onClick: () => onChange(rules.filter((item) => item.id !== rule.id)), children: "\xD7" })
+        /* @__PURE__ */ jsx64("button", { type: "button", "aria-label": `\u5220\u9664\u6761\u4EF6 ${index + 1}`, disabled, onClick: () => onChange(rules.filter((item) => item.id !== rule.id)), children: /* @__PURE__ */ jsx64(Icon, { name: "close", size: 15 }) })
       ] }, rule.id);
     }) }),
     /* @__PURE__ */ jsx64("button", { type: "button", className: "hf-query-builder__add", disabled: disabled || !fields.length, onClick: add, children: "\uFF0B \u6DFB\u52A0\u6761\u4EF6" })
@@ -3071,12 +3067,9 @@ function FilterBuilder({ fields, value, onChange, disabled, addLabel = "\u6DFB\u
     /* @__PURE__ */ jsx66("div", { children: value.map((filter, index) => {
       const field = fields.find((item) => item.key === filter.field) ?? fields[0];
       return /* @__PURE__ */ jsxs58("div", { className: "hf-filter-builder__item", children: [
-        /* @__PURE__ */ jsx66("select", { "aria-label": `\u7B5B\u9009 ${index + 1} \u5B57\u6BB5`, value: filter.field, disabled, onChange: (event) => update(filter.id, { field: event.target.value, value: "" }), children: fields.map((item) => /* @__PURE__ */ jsx66("option", { value: item.key, children: item.label }, item.key)) }),
-        field?.options ? /* @__PURE__ */ jsxs58("select", { "aria-label": `\u7B5B\u9009 ${index + 1} \u503C`, value: filter.value, disabled, onChange: (event) => update(filter.id, { value: event.target.value }), children: [
-          /* @__PURE__ */ jsx66("option", { value: "", children: "\u8BF7\u9009\u62E9" }),
-          field.options.map((item) => /* @__PURE__ */ jsx66("option", { value: item.value, children: item.label }, item.value))
-        ] }) : /* @__PURE__ */ jsx66("input", { "aria-label": `\u7B5B\u9009 ${index + 1} \u503C`, type: field?.type ?? "text", value: filter.value, disabled, onChange: (event) => update(filter.id, { value: event.target.value }) }),
-        /* @__PURE__ */ jsx66("button", { type: "button", "aria-label": `\u5220\u9664\u7B5B\u9009 ${index + 1}`, disabled, onClick: () => onChange(value.filter((item) => item.id !== filter.id)), children: "\xD7" })
+        /* @__PURE__ */ jsx66(Select, { className: "hf-filter-builder__select", "aria-label": `\u7B5B\u9009 ${index + 1} \u5B57\u6BB5`, value: filter.field, disabled, options: fields.map((item) => ({ value: item.key, label: item.label })), onChange: (event) => update(filter.id, { field: event.target.value, value: "" }) }),
+        field?.options ? /* @__PURE__ */ jsx66(Select, { className: "hf-filter-builder__select", "aria-label": `\u7B5B\u9009 ${index + 1} \u503C`, value: filter.value, placeholder: "\u8BF7\u9009\u62E9", disabled, options: field.options, onChange: (event) => update(filter.id, { value: event.target.value }) }) : /* @__PURE__ */ jsx66("input", { "aria-label": `\u7B5B\u9009 ${index + 1} \u503C`, type: field?.type ?? "text", value: filter.value, disabled, onChange: (event) => update(filter.id, { value: event.target.value }) }),
+        /* @__PURE__ */ jsx66("button", { type: "button", "aria-label": `\u5220\u9664\u7B5B\u9009 ${index + 1}`, disabled, onClick: () => onChange(value.filter((item) => item.id !== filter.id)), children: /* @__PURE__ */ jsx66(Icon, { name: "close", size: 15 }) })
       ] }, filter.id);
     }) }),
     /* @__PURE__ */ jsxs58("button", { type: "button", className: "hf-filter-builder__add", disabled: disabled || !fields.length, onClick: add, children: [