@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-YAYSXZZZ.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Progress-33WE2NI7.css');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var ProgressBase = React__namespace.forwardRef(({
+  value,
+  max = 100,
+  label,
+  showValue,
+  tone = "accent",
+  color,
+  size = "md",
+  indeterminate = false,
+  className = "",
+  style,
+  ...rest
+}, ref) => {
+  const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+  const safeValue = Number.isFinite(value) ? value : 0;
+  const normalizedValue = Math.max(0, Math.min(safeMax, safeValue));
+  const pct = normalizedValue / safeMax * 100;
+  const rootStyle = {
+    ...color ? {
+      ["--progress-fill"]: color,
+      ["--progress-fill-glow"]: `color-mix(in oklch, ${color} 35%, transparent)`
+    } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: `progress ${size} ${tone} ${indeterminate ? "indeterminate" : ""} ${className}`,
+      style: rootStyle,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": safeMax,
+      "aria-valuenow": indeterminate ? void 0 : normalizedValue,
+      "aria-valuetext": indeterminate ? "\u52A0\u8F7D\u4E2D" : void 0,
+      ...rest,
+      children: [
+        (label || showValue) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "progress-label", children: [
+          label ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+          showValue && !indeterminate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "v", children: [
+            Math.round(pct),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "progress-track", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "progress-bar", style: { width: indeterminate ? "35%" : `${pct}%` } }) })
+      ]
+    }
+  );
+});
+ProgressBase.displayName = "Progress";
+var Progress = chunkNRJXZPZR_cjs.withComponentTheme(ProgressBase, "Progress", "progress");
+
+exports.Progress = Progress;

package/dist/{chunk-6LN4VVX7.js → chunk-YBGMTQ2V.js}

@@ -1,11 +1,12 @@
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Collapse-UNBHEPYP.css';
+import './Collapse-BTSBHBSY.css';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var CollapsePanel = ({ open, children }) => {
+var CollapsePanel = ({ open, id, labelledBy, children }) => {
   const innerRef = React.useRef(null);
   const [h, setH] = React.useState(0);
   const [animated, setAnimated] = React.useState(false);
@@ -18,21 +19,28 @@ var CollapsePanel = ({ open, children }) => {
     return () => ro.disconnect();
   }, []);
   React.useEffect(() => {
-    const id = requestAnimationFrame(() => setAnimated(true));
-    return () => cancelAnimationFrame(id);
+    const id2 = requestAnimationFrame(() => setAnimated(true));
+    return () => cancelAnimationFrame(id2);
   }, []);
   return /* @__PURE__ */ jsx(
     "div",
     {
+      id,
       className: "collapse-body",
       style: { maxHeight: open ? h : 0, transition: animated ? void 0 : "none" },
       "aria-hidden": !open,
+      "aria-labelledby": labelledBy,
+      role: "region",
+      ...!open ? { inert: "" } : {},
       children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "collapse-body-inner", children })
     }
   );
 };
-var normalizeKeys = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
-var Collapse = React.forwardRef(({
+var normalizeKeys = (value, singleOpen = false) => {
+  const keys = value == null ? [] : Array.isArray(value) ? value : [value];
+  return singleOpen ? keys.slice(0, 1) : keys;
+};
+var CollapseBase = React.forwardRef(({
   items,
   accordion = false,
   multiple = true,
@@ -45,10 +53,14 @@ var Collapse = React.forwardRef(({
   className = "",
   ...rest
 }, ref) => {
-  const [inner, setInner] = React.useState(() => normalizeKeys(defaultActiveKey));
-  const isControlled = activeKey !== void 0;
-  const keys = isControlled ? normalizeKeys(activeKey) : inner;
+  const baseId = React.useId();
   const singleOpen = accordion || !multiple;
+  const [inner, setInner] = React.useState(() => normalizeKeys(defaultActiveKey, singleOpen));
+  const isControlled = activeKey !== void 0;
+  const keys = normalizeKeys(isControlled ? activeKey : inner, singleOpen);
+  React.useEffect(() => {
+    if (!isControlled && singleOpen && inner.length > 1) setInner(inner.slice(0, 1));
+  }, [inner, isControlled, singleOpen]);
   const toggle = (k, itemDisabled) => {
     if (collapsible === "disabled" || itemDisabled) return;
     const next = keys.includes(k) ? keys.filter((x) => x !== k) : singleOpen ? [k] : [...keys, k];
@@ -61,42 +73,49 @@ var Collapse = React.forwardRef(({
       ref,
       className: `collapse ${ghost ? "ghost" : ""} ${size} ${className}`,
       ...rest,
-      children: items.map((it) => {
+      children: items.map((it, index) => {
         const open = keys.includes(it.key);
         const isDisabled = it.disabled || collapsible === "disabled";
         const headerClickable = collapsible === "header" && !isDisabled;
+        const headerId = `${baseId}-header-${index}`;
+        const panelId = `${baseId}-panel-${index}`;
         return /* @__PURE__ */ jsxs(
           "div",
           {
             className: `collapse-item ${open ? "open" : ""} ${isDisabled ? "disabled" : ""} ${collapsible === "icon" ? "icon-only" : ""}`,
             children: [
-              /* @__PURE__ */ jsxs(
+              collapsible === "icon" ? /* @__PURE__ */ jsxs("div", { id: headerId, className: "collapse-head", children: [
+                /* @__PURE__ */ jsx("span", { children: it.label }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "collapse-chev clickable",
+                    disabled: isDisabled,
+                    onClick: () => toggle(it.key, it.disabled),
+                    "aria-expanded": open,
+                    "aria-controls": panelId,
+                    "aria-label": open ? "\u6536\u8D77\u9762\u677F" : "\u5C55\u5F00\u9762\u677F",
+                    children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 16, "aria-hidden": true })
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(
                 "button",
                 {
+                  id: headerId,
                   type: "button",
                   className: "collapse-head",
                   disabled: isDisabled,
                   onClick: () => headerClickable && toggle(it.key, it.disabled),
                   "aria-expanded": open,
+                  "aria-controls": panelId,
                   children: [
                     /* @__PURE__ */ jsx("span", { children: it.label }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: `collapse-chev${collapsible === "icon" ? " clickable" : ""}`,
-                        onClick: (e) => {
-                          if (collapsible === "icon" && !isDisabled) {
-                            e.stopPropagation();
-                            toggle(it.key, it.disabled);
-                          }
-                        },
-                        children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 16 })
-                      }
-                    )
+                    /* @__PURE__ */ jsx("span", { className: "collapse-chev", "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 16 }) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(CollapsePanel, { open, children: it.children })
+              /* @__PURE__ */ jsx(CollapsePanel, { open, id: panelId, labelledBy: headerId, children: it.children })
             ]
           },
           it.key
@@ -105,6 +124,7 @@ var Collapse = React.forwardRef(({
     }
   );
 });
-Collapse.displayName = "Collapse";
+CollapseBase.displayName = "Collapse";
+var Collapse = withComponentTheme(CollapseBase, "Collapse", "collapse");
 
 export { Collapse };

package/dist/{chunk-TYLDISRK.js → chunk-YKHIIC7M.js}

@@ -1,11 +1,11 @@
-import './tokens-RYJ3DFTU.css';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './StatusBar-FJKEEPXU.css';
+import './StatusBar-TCGR3LXP.css';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/components/StatusBar/StatusBar.tsx
-var StatusBarItem = React.forwardRef(({
+var StatusBarItemBase = React.forwardRef(({
   icon,
   tone = "default",
   onClick,
@@ -26,13 +26,19 @@ var StatusBarItem = React.forwardRef(({
         type: "button",
         className: cls,
         onClick,
+        ...rest,
         children: content
       }
     );
   }
   return /* @__PURE__ */ jsx("div", { ref, className: cls, ...rest, children: content });
 });
-StatusBarItem.displayName = "StatusBarItem";
+StatusBarItemBase.displayName = "StatusBarItem";
+var StatusBarItem = withComponentTheme(
+  StatusBarItemBase,
+  "StatusBarItem",
+  "status-bar"
+);
 var StatusBarBase = React.forwardRef(({
   left,
   center,
@@ -47,7 +53,8 @@ var StatusBarBase = React.forwardRef(({
   right != null && /* @__PURE__ */ jsx("div", { className: "statusbar-section right", children: right })
 ] }));
 StatusBarBase.displayName = "StatusBar";
-var StatusBar = StatusBarBase;
+var ThemedStatusBar = withComponentTheme(StatusBarBase, "StatusBar", "status-bar");
+var StatusBar = ThemedStatusBar;
 StatusBar.Item = StatusBarItem;
 
 export { StatusBar, StatusBarItem };

package/dist/{chunk-3VXGZ3SJ.js → chunk-YPMQC5HX.js}

@@ -1,11 +1,16 @@
-import { Input } from './chunk-IOAOG5L7.js';
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { InputThemeIdentityProvider, Input } from './chunk-UE4HFGJ6.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './InputNumber-VXQIWLQC.css';
+import './InputNumber-6NHBMRT4.css';
 import * as React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var normalizeNumber = (value, min, max, precision) => {
+  const clamped = Math.max(min, Math.min(max, value));
+  return precision != null ? Number(clamped.toFixed(precision)) : clamped;
+};
+var normalizePrecision = (precision) => precision != null && Number.isFinite(precision) ? Math.max(0, Math.min(100, Math.trunc(precision))) : void 0;
 var InputNumber = React.forwardRef(
   ({
     value,
@@ -13,6 +18,8 @@ var InputNumber = React.forwardRef(
     onChange,
     onBlur,
     onFocus,
+    onWheel,
+    onKeyDown,
     onPressEnter,
     min = -Infinity,
     max = Infinity,
@@ -29,22 +36,31 @@ var InputNumber = React.forwardRef(
     suffix,
     autoFocus,
     id,
-    name
+    name,
+    theme,
+    ...rest
   }, ref) => {
-    const [inner, setInner] = React.useState(defaultValue ?? null);
+    const normalizedMin = Number.isFinite(min) ? min : -Infinity;
+    const normalizedMaxCandidate = Number.isFinite(max) ? max : Infinity;
+    const normalizedMax = Math.max(normalizedMin, normalizedMaxCandidate);
+    const normalizedStep = Number.isFinite(step) && step > 0 ? step : 1;
+    const normalizedPrecision = normalizePrecision(precision);
+    const [inner, setInner] = React.useState(
+      () => defaultValue == null || !Number.isFinite(defaultValue) ? null : normalizeNumber(defaultValue, normalizedMin, normalizedMax, normalizedPrecision)
+    );
     const isControlled = value !== void 0;
-    const current = isControlled ? value : inner;
+    const current = isControlled ? typeof value === "number" && Number.isFinite(value) ? normalizeNumber(value, normalizedMin, normalizedMax, normalizedPrecision) : null : inner;
     const [text, setText] = React.useState(current == null ? "" : String(current));
     React.useEffect(() => {
-      if (isControlled) setText(value == null ? "" : String(value));
-    }, [value, isControlled]);
+      if (isControlled) setText(current == null ? "" : String(current));
+    }, [current, isControlled]);
     const clamp = React.useCallback(
-      (n) => Math.max(min, Math.min(max, n)),
-      [min, max]
+      (n) => Math.max(normalizedMin, Math.min(normalizedMax, n)),
+      [normalizedMax, normalizedMin]
     );
     const round = React.useCallback(
-      (n) => precision != null ? Number(n.toFixed(precision)) : n,
-      [precision]
+      (n) => normalizedPrecision != null ? Number(n.toFixed(normalizedPrecision)) : n,
+      [normalizedPrecision]
     );
     const commit = (next) => {
       if (!isControlled) setInner(next);
@@ -57,7 +73,7 @@ var InputNumber = React.forwardRef(
         return;
       }
       const parsed = Number(v);
-      if (!Number.isNaN(parsed)) commit(clamp(round(parsed)));
+      if (Number.isFinite(parsed)) commit(clamp(round(parsed)));
     };
     const handleBlur = (e) => {
       if (current == null) setText("");
@@ -73,19 +89,27 @@ var InputNumber = React.forwardRef(
       onChange?.(next);
     };
     const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
       if (e.key === "ArrowUp") {
         e.preventDefault();
-        increment(step);
+        increment(normalizedStep);
       }
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        increment(-step);
+        increment(-normalizedStep);
       }
       if (e.key === "Enter") onPressEnter?.(e);
     };
-    const upDisabled = disabled || readOnly || current != null && current >= max;
-    const downDisabled = disabled || readOnly || current != null && current <= min;
-    const stepperSuffix = controls ? /* @__PURE__ */ jsxs("span", { className: "ipn-steppers", "aria-hidden": true, children: [
+    const handleWheel = (event) => {
+      onWheel?.(event);
+      if (event.defaultPrevented || document.activeElement !== event.currentTarget || disabled || readOnly) return;
+      event.preventDefault();
+      increment(event.deltaY < 0 ? normalizedStep : -normalizedStep);
+    };
+    const upDisabled = disabled || readOnly || current != null && current >= normalizedMax;
+    const downDisabled = disabled || readOnly || current != null && current <= normalizedMin;
+    const stepperSuffix = controls ? /* @__PURE__ */ jsxs("span", { className: "ipn-steppers", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -94,7 +118,8 @@ var InputNumber = React.forwardRef(
           tabIndex: -1,
           disabled: upDisabled,
           onMouseDown: (e) => e.preventDefault(),
-          onClick: () => increment(step),
+          onClick: () => increment(normalizedStep),
+          "aria-label": "\u589E\u52A0\u6570\u503C",
           children: /* @__PURE__ */ jsx(Icon, { name: "chevUp", size: 10, stroke: 2.5 })
         }
       ),
@@ -106,7 +131,8 @@ var InputNumber = React.forwardRef(
           tabIndex: -1,
           disabled: downDisabled,
           onMouseDown: (e) => e.preventDefault(),
-          onClick: () => increment(-step),
+          onClick: () => increment(-normalizedStep),
+          "aria-label": "\u51CF\u5C11\u6570\u503C",
           children: /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 10, stroke: 2.5 })
         }
       )
@@ -115,10 +141,11 @@ var InputNumber = React.forwardRef(
       suffix,
       stepperSuffix
     ] }) : stepperSuffix ?? suffix;
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(InputThemeIdentityProvider, { value: { component: "InputNumber", cssPrefix: "input" }, children: /* @__PURE__ */ jsx(
       Input,
       {
         ref,
+        ...rest,
         id,
         name,
         size,
@@ -132,12 +159,18 @@ var InputNumber = React.forwardRef(
         suffix: finalSuffix,
         className: `input-number ${className}`,
         inputMode: "decimal",
+        role: "spinbutton",
+        "aria-valuemin": Number.isFinite(normalizedMin) ? normalizedMin : void 0,
+        "aria-valuemax": Number.isFinite(normalizedMax) ? normalizedMax : void 0,
+        "aria-valuenow": current ?? void 0,
         onValueChange: handleInput,
         onKeyDown: handleKeyDown,
+        onWheel: handleWheel,
         onBlur: handleBlur,
-        onFocus
+        onFocus,
+        theme
       }
-    );
+    ) });
   }
 );
 InputNumber.displayName = "InputNumber";

package/dist/{chunk-UWL6DRZW.cjs → chunk-YUJ7Z6N2.cjs}

@@ -1,12 +1,15 @@
 'use strict';
 
 var chunk35RCCUGO_cjs = require('./chunk-35RCCUGO.cjs');
-var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
-var chunkVS3I5OKA_cjs = require('./chunk-VS3I5OKA.cjs');
-var chunkSW2HMNCA_cjs = require('./chunk-SW2HMNCA.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
+var chunkSTQDKMS5_cjs = require('./chunk-STQDKMS5.cjs');
+var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
+var chunkT4RR6NVU_cjs = require('./chunk-T4RR6NVU.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./TimePicker-ZBJOXH3U.css');
+require('./TimePicker-WJ3FSK6A.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -83,7 +86,7 @@ var compose = (base, key, value) => ({
   second: key === "second" ? value : base.second
 });
 var byDistanceFrom = (preferred) => (a, b) => Math.abs(a - preferred) - Math.abs(b - preferred) || a - b;
-var TimePicker = React__namespace.forwardRef(
+var TimePickerBase = React__namespace.forwardRef(
   ({
     value,
     defaultValue = null,
@@ -110,6 +113,12 @@ var TimePicker = React__namespace.forwardRef(
     dropdownClassName = "",
     className = "",
     onKeyDown,
+    id: fieldId,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-required": ariaRequired,
+    "aria-label": ariaLabel,
     ...rest
   }, ref) => {
     const includeSecond = showSecond ?? format === "HH:mm:ss";
@@ -144,13 +153,23 @@ var TimePicker = React__namespace.forwardRef(
       setOpen
     });
     const rootRef = React__namespace.useRef(null);
-    const panelRef = React__namespace.useRef(null);
-    const { triggerRef, floatingStyle } = chunkYB3IWIOJ_cjs.useFloating({
+    const panelId = React__namespace.useId();
+    const portalContainer = chunkEE5KXDRK_cjs.usePortalContainer();
+    const portalTheme = chunkNRJXZPZR_cjs.useComponentPortalTheme("TimePicker");
+    const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = chunkFJB3243S_cjs.useFloating({
       open,
       placement,
       panelWidth: includeSecond ? 312 : 236,
       panelHeight: 330
     });
+    chunkHSDMJUB6_cjs.useOverlayLayer({
+      open: open && !disabled && !readOnly && portalContainer != null,
+      containerRef: panelRef,
+      ownerRef: triggerRef,
+      zIndex: panelZIndex,
+      onEscape: () => setOpen(false),
+      restoreFocus: true
+    });
     const setRootRef = React__namespace.useCallback(
       (node) => {
         rootRef.current = node;
@@ -197,20 +216,16 @@ var TimePicker = React__namespace.forwardRef(
         if (panelRef.current?.contains(target)) return;
         setOpen(false);
       };
-      const onDocKey = (event) => {
-        if (event.key === "Escape") setOpen(false);
-      };
       document.addEventListener("mousedown", onDown);
-      document.addEventListener("keydown", onDocKey);
       return () => {
         document.removeEventListener("mousedown", onDown);
-        document.removeEventListener("keydown", onDocKey);
       };
     }, [open, setOpen]);
     const scrollListTo = React__namespace.useCallback(
       (list, top, animate) => {
         const frame = scrollFramesRef.current.get(list);
         if (frame != null) cancelAnimationFrame(frame);
+        scrollFramesRef.current.delete(list);
         if (!animate) {
           list.scrollTop = top;
           return;
@@ -240,7 +255,8 @@ var TimePicker = React__namespace.forwardRef(
     );
     React__namespace.useEffect(() => {
       if (!open) return;
-      const shouldAnimate = wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
+      const prefersReducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const shouldAnimate = !prefersReducedMotion && wasOpenRef.current && scrollSignatureRef.current != null && scrollSignatureRef.current !== scrollSignature;
       requestAnimationFrame(() => {
         panelRef.current?.querySelectorAll(".time-picker-list").forEach((list) => {
           const selected = list.querySelector(".time-picker-option.selected");
@@ -298,11 +314,12 @@ var TimePicker = React__namespace.forwardRef(
         return;
       }
       const parsed = parseTime(draft);
-      if (!parsed || isDisabledTime(parsed)) {
+      const normalized = parsed ? { ...parsed, second: includeSecond ? parsed.second : 0 } : null;
+      if (!normalized || isDisabledTime(normalized)) {
         setDraft(current ?? "");
         return;
       }
-      commit(parsed);
+      commit(normalized);
     };
     const handleRootKeyDown = (event) => {
       onKeyDown?.(event);
@@ -316,6 +333,20 @@ var TimePicker = React__namespace.forwardRef(
         setOpen(false);
       }
     };
+    const handleOptionKeyDown = (event) => {
+      const list = event.currentTarget.parentElement;
+      if (!list) return;
+      const options = Array.from(list.querySelectorAll("button:not(:disabled)"));
+      const index = options.indexOf(event.currentTarget);
+      let nextIndex = index;
+      if (event.key === "ArrowDown" || event.key === "ArrowRight") nextIndex = index + 1;
+      else if (event.key === "ArrowUp" || event.key === "ArrowLeft") nextIndex = index - 1;
+      else if (event.key === "Home") nextIndex = 0;
+      else if (event.key === "End") nextIndex = options.length - 1;
+      else return;
+      event.preventDefault();
+      options[Math.max(0, Math.min(options.length - 1, nextIndex))]?.focus();
+    };
     const renderColumn = (label, key, options) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-picker-column", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "time-picker-column-label", children: label }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "time-picker-list", role: "listbox", "aria-label": label, children: options.map((option) => {
@@ -330,6 +361,7 @@ var TimePicker = React__namespace.forwardRef(
             disabled: optionDisabled,
             className: `time-picker-option ${selected ? "selected" : ""}`,
             onClick: () => pick(key, option),
+            onKeyDown: handleOptionKeyDown,
             children: pad(option)
           },
           option
@@ -348,10 +380,16 @@ var TimePicker = React__namespace.forwardRef(
       invalid && "invalid",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setRootRef, className: rootClassName, onKeyDown: handleRootKeyDown, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: ["Input", "Button"], children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkVS3I5OKA_cjs.Input,
+        chunkSTQDKMS5_cjs.Input,
         {
+          id: fieldId,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
+          "aria-describedby": ariaDescribedBy,
           value: draft,
           size,
           placeholder,
@@ -365,17 +403,21 @@ var TimePicker = React__namespace.forwardRef(
           onBlur: handleInputBlur,
           inputMode: "numeric",
           "aria-expanded": open,
-          "aria-haspopup": "dialog"
+          "aria-haspopup": "dialog",
+          "aria-controls": open ? panelId : void 0
         }
       ),
-      open && !disabled && !readOnly && typeof document !== "undefined" && reactDom.createPortal(
+      open && !disabled && !readOnly && portalContainer && reactDom.createPortal(
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: panelRef,
+            id: panelId,
             className: `time-picker-panel ${includeSecond ? "with-second" : "without-second"} ${mergedPanelClassName}`,
             role: "dialog",
-            style: floatingStyle,
+            "aria-label": "\u9009\u62E9\u65F6\u95F4",
+            ...portalTheme.dataAttributes,
+            style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-picker-columns", children: [
                 renderColumn("\u65F6", "hour", hourOptions),
@@ -384,7 +426,7 @@ var TimePicker = React__namespace.forwardRef(
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-picker-footer", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkSW2HMNCA_cjs.Button,
+                  chunkT4RR6NVU_cjs.Button,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -395,7 +437,7 @@ var TimePicker = React__namespace.forwardRef(
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "time-picker-footer-spacer" }),
                 allowClear && /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkSW2HMNCA_cjs.Button,
+                  chunkT4RR6NVU_cjs.Button,
                   {
                     size: "sm",
                     variant: "ghost",
@@ -406,16 +448,21 @@ var TimePicker = React__namespace.forwardRef(
                     children: "\u6E05\u7A7A"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkSW2HMNCA_cjs.Button, { size: "sm", variant: "primary", onClick: () => setOpen(false), children: "\u786E\u5B9A" })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkT4RR6NVU_cjs.Button, { size: "sm", variant: "primary", onClick: () => setOpen(false), children: "\u786E\u5B9A" })
               ] })
             ]
           }
         ),
-        document.body
+        portalContainer
       )
-    ] });
+    ] }) });
   }
 );
-TimePicker.displayName = "TimePicker";
+TimePickerBase.displayName = "TimePicker";
+var TimePicker = chunkNRJXZPZR_cjs.withComponentTheme(
+  TimePickerBase,
+  "TimePicker",
+  ["time-picker", "input", "button"]
+);
 
 exports.TimePicker = TimePicker;