@fangxinyan/lumina 0.6.18 → 0.7.0

package/dist/chunk-QDY56GGO.js

@@ -0,0 +1,234 @@
+import { withComponentTheme, withInternalComponentThemePart } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Radio-RL7232MZ.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var uncontrolledRadioGroups = /* @__PURE__ */ new WeakMap();
+function registerUncontrolledRadio(input, name, listener) {
+  let documentGroups = uncontrolledRadioGroups.get(input.ownerDocument);
+  if (!documentGroups) {
+    documentGroups = /* @__PURE__ */ new Map();
+    uncontrolledRadioGroups.set(input.ownerDocument, documentGroups);
+  }
+  let group = documentGroups.get(name);
+  if (!group) {
+    group = /* @__PURE__ */ new Set();
+    documentGroups.set(name, group);
+  }
+  group.add(listener);
+  return () => {
+    group.delete(listener);
+    if (group.size === 0) documentGroups.delete(name);
+  };
+}
+function notifyUncontrolledRadioGroup(input, name) {
+  uncontrolledRadioGroups.get(input.ownerDocument)?.get(name)?.forEach((listener) => listener(input));
+}
+var RadioRoot = React.forwardRef(({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  label,
+  className = "",
+  id,
+  name,
+  value: formValue,
+  required,
+  form,
+  tabIndex,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React.useState(defaultChecked ?? false);
+  const isControlled = checked !== void 0;
+  const value = isControlled ? checked : inner;
+  const inputRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!isControlled && inputRef.current && inputRef.current.checked !== inner) {
+      setInner(inputRef.current.checked);
+    }
+  }, [inner, isControlled]);
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (isControlled || !input || !name) return;
+    return registerUncontrolledRadio(input, name, (selected) => setInner(selected === input));
+  }, [isControlled, name]);
+  const pick = () => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInner(true);
+      if (name && inputRef.current) notifyUncontrolledRadioGroup(inputRef.current, name);
+    }
+    onChange?.(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref,
+      className: `radio ${value ? "checked" : ""} ${disabled ? "disabled" : ""} ${className}`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "radio",
+            className: "radio-native",
+            checked: value,
+            disabled,
+            onChange: pick,
+            id,
+            name,
+            value: formValue,
+            required,
+            form,
+            tabIndex,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": ariaInvalid,
+            "aria-required": ariaRequired
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "radio-dot" }),
+        label && /* @__PURE__ */ jsx("span", { className: "radio-label", children: label })
+      ]
+    }
+  );
+});
+RadioRoot.displayName = "Radio";
+var ThemedRadio = withComponentTheme(RadioRoot, "Radio", "radio");
+var InternalRadio = withInternalComponentThemePart(ThemedRadio, "Radio");
+var RadioGroupInner = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  required,
+  form,
+  direction,
+  variant = "default",
+  size = "md",
+  className = "",
+  onKeyDown,
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React.useState(defaultValue);
+  const generatedName = React.useId();
+  const groupRef = React.useRef(null);
+  const [thumb, setThumb] = React.useState({ left: 0, width: 0, ready: false });
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : inner;
+  const currentOption = options.find((option) => option.value === current);
+  const rovingValue = currentOption && !currentOption.disabled ? currentOption.value : options.find((option) => !option.disabled)?.value;
+  const setGroupRef = React.useCallback(
+    (node) => {
+      groupRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const pick = (v) => {
+    if (!isControlled) setInner(v);
+    onChange?.(v);
+  };
+  const resolvedDirection = direction ?? (variant === "segmented" ? "horizontal" : "vertical");
+  const groupName = name ?? `lumina-radio-${generatedName.replace(/:/g, "")}`;
+  const handleGroupKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (!["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) return;
+    const inputs = Array.from(
+      groupRef.current?.querySelectorAll('input[type="radio"]:not(:disabled)') ?? []
+    );
+    if (!inputs.length) return;
+    const activeIndex = Math.max(0, inputs.indexOf(document.activeElement));
+    const delta = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1;
+    const next = inputs[(activeIndex + delta + inputs.length) % inputs.length];
+    event.preventDefault();
+    next.focus();
+    next.click();
+  };
+  React.useLayoutEffect(() => {
+    if (variant !== "segmented") return;
+    const group = groupRef.current;
+    if (!group) return;
+    const updateThumb = () => {
+      const active = group.querySelector(".radio.checked");
+      if (!active) {
+        setThumb((prev) => prev.ready ? { left: prev.left, width: prev.width, ready: false } : prev);
+        return;
+      }
+      const next = {
+        left: active.offsetLeft,
+        width: active.offsetWidth,
+        ready: true
+      };
+      setThumb(
+        (prev) => prev.left === next.left && prev.width === next.width && prev.ready === next.ready ? prev : next
+      );
+    };
+    updateThumb();
+    const frame = requestAnimationFrame(updateThumb);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateThumb) : null;
+    if (observer) {
+      observer.observe(group);
+      group.querySelectorAll(".radio").forEach((item) => observer.observe(item));
+    }
+    window.addEventListener("resize", updateThumb);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+      window.removeEventListener("resize", updateThumb);
+    };
+  }, [current, options, size, variant]);
+  return /* @__PURE__ */ jsxs("div", { ref: setGroupRef, ...rest, role: "radiogroup", onKeyDown: handleGroupKeyDown, className: `radio-group ${resolvedDirection} ${variant} ${size} ${className}`, children: [
+    variant === "segmented" && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "radio-segment-thumb",
+        style: {
+          width: thumb.width,
+          transform: `translateX(${thumb.left}px)`,
+          opacity: thumb.ready ? 1 : 0
+        }
+      }
+    ),
+    options.map((opt) => /* @__PURE__ */ jsx(
+      InternalRadio,
+      {
+        label: opt.label,
+        checked: current === opt.value,
+        disabled: opt.disabled,
+        name: groupName,
+        required,
+        form,
+        value: opt.value,
+        tabIndex: rovingValue === opt.value ? 0 : -1,
+        onChange: () => pick(opt.value)
+      },
+      String(opt.value)
+    ))
+  ] });
+};
+var RadioGroupBase = React.forwardRef(RadioGroupInner);
+RadioGroupBase.displayName = "RadioGroup";
+var RadioGroup = withComponentTheme(
+  RadioGroupBase,
+  "RadioGroup",
+  "radio"
+);
+var Radio = ThemedRadio;
+Radio.Group = RadioGroup;
+
+export { Radio, RadioGroup };

package/dist/{chunk-4KDABJSY.cjs → chunk-QNQSNVCU.cjs}

@@ -1,9 +1,10 @@
 'use strict';
 
-var chunkQMX67CVT_cjs = require('./chunk-QMX67CVT.cjs');
-require('./tokens-RYJ3DFTU.css');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Calendar-I6NHCXIB.css');
+require('./Calendar-QJ5HWEJQ.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -32,22 +33,28 @@ var MONTHS = Array.from({ length: 12 }, (_, index) => `${index + 1} \u6708`);
 var YEARS_PER_PAGE = 12;
 var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 var isValidDate = (date) => date instanceof Date && !Number.isNaN(date.getTime());
-var Calendar = React__namespace.forwardRef(({
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var CalendarBase = React__namespace.forwardRef(({
   value,
   defaultValue,
   onChange,
   viewDate,
+  onViewChange,
   min,
   max,
   disabledDate,
   className = "",
   ...rest
 }, ref) => {
-  const [inner, setInner] = React__namespace.useState(defaultValue ?? /* @__PURE__ */ new Date());
+  const [inner, setInner] = React__namespace.useState(
+    () => isValidDate(defaultValue) ? startOfDay(defaultValue) : startOfDay(/* @__PURE__ */ new Date())
+  );
   const isControlled = value !== void 0;
-  const sel = isControlled ? value : inner;
-  const [view, setView] = React__namespace.useState(new Date(sel.getFullYear(), sel.getMonth(), 1));
+  const sel = isControlled ? isValidDate(value) ? startOfDay(value) : null : inner;
+  const initialView = sel ?? startOfDay(/* @__PURE__ */ new Date());
+  const [view, setView] = React__namespace.useState(new Date(initialView.getFullYear(), initialView.getMonth(), 1));
   const [mode, setMode] = React__namespace.useState("date");
+  const rootRef = React__namespace.useRef(null);
   const viewDateTime = isValidDate(viewDate) ? viewDate.getTime() : null;
   const viewDateYear = isValidDate(viewDate) ? viewDate.getFullYear() : null;
   const viewDateMonth = isValidDate(viewDate) ? viewDate.getMonth() : null;
@@ -56,16 +63,55 @@ var Calendar = React__namespace.forwardRef(({
     setView(new Date(viewDateYear, viewDateMonth, 1));
     setMode("date");
   }, [viewDateMonth, viewDateTime, viewDateYear]);
+  const selectedTime = sel?.getTime() ?? null;
+  React__namespace.useEffect(() => {
+    if (viewDateTime != null || selectedTime == null) return;
+    const selected = new Date(selectedTime);
+    setView(new Date(selected.getFullYear(), selected.getMonth(), 1));
+  }, [selectedTime, viewDateTime]);
   const first = new Date(view.getFullYear(), view.getMonth(), 1);
   const startDay = first.getDay();
   const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
   const cells = [];
   for (let i = 0; i < startDay; i++) cells.push(null);
   for (let d = 1; d <= daysInMonth; d++) cells.push(d);
+  const normalizedMin = React__namespace.useMemo(() => isValidDate(min) ? startOfDay(min) : void 0, [min]);
+  const normalizedMax = React__namespace.useMemo(() => isValidDate(max) ? startOfDay(max) : void 0, [max]);
   const isDisabledDay = React__namespace.useCallback(
-    (date) => min && date < min || max && date > max || (disabledDate?.(date) ?? false),
-    [disabledDate, max, min]
+    (date) => normalizedMin && startOfDay(date) < normalizedMin || normalizedMax && startOfDay(date) > normalizedMax || (disabledDate?.(startOfDay(date)) ?? false),
+    [disabledDate, normalizedMax, normalizedMin]
   );
+  const setRootRef = React__namespace.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const handleGridKeyDown = (event) => {
+    const buttons = Array.from(
+      rootRef.current?.querySelectorAll(".calendar-grid button.calendar-cell") ?? []
+    );
+    const index = buttons.indexOf(event.target);
+    if (index < 0) return;
+    let step = 0;
+    let nextIndex = index;
+    if (event.key === "ArrowRight") step = 1;
+    else if (event.key === "ArrowLeft") step = -1;
+    else if (event.key === "ArrowDown") step = 7;
+    else if (event.key === "ArrowUp") step = -7;
+    else if (event.key === "Home") nextIndex = buttons.findIndex((button) => !button.disabled);
+    else if (event.key === "End") {
+      nextIndex = buttons.length - 1;
+      while (nextIndex >= 0 && buttons[nextIndex].disabled) nextIndex -= 1;
+    } else return;
+    event.preventDefault();
+    if (step !== 0) {
+      nextIndex += step;
+      while (nextIndex >= 0 && nextIndex < buttons.length && buttons[nextIndex].disabled) {
+        nextIndex += step;
+      }
+    }
+    if (nextIndex >= 0 && nextIndex < buttons.length) buttons[nextIndex].focus();
+  };
   const isMonthDisabled = React__namespace.useCallback(
     (year, month) => {
       const count = new Date(year, month + 1, 0).getDate();
@@ -82,6 +128,11 @@ var Calendar = React__namespace.forwardRef(({
     ),
     [isMonthDisabled]
   );
+  const selectedInView = !!sel && sel.getFullYear() === view.getFullYear() && sel.getMonth() === view.getMonth();
+  const focusableSelectionInView = selectedInView && !!sel && !isDisabledDay(sel);
+  const firstFocusableDay = cells.find(
+    (day) => day != null && !isDisabledDay(new Date(view.getFullYear(), view.getMonth(), day))
+  );
   const pick = (d) => {
     const next = new Date(view.getFullYear(), view.getMonth(), d);
     if (isDisabledDay(next)) return;
@@ -89,24 +140,29 @@ var Calendar = React__namespace.forwardRef(({
     onChange?.(next);
   };
   const shiftView = (step) => {
+    let next;
     if (mode === "year") {
-      setView(new Date(view.getFullYear() + step * YEARS_PER_PAGE, view.getMonth(), 1));
-      return;
-    }
-    if (mode === "month") {
-      setView(new Date(view.getFullYear() + step, view.getMonth(), 1));
-      return;
+      next = new Date(view.getFullYear() + step * YEARS_PER_PAGE, view.getMonth(), 1);
+    } else if (mode === "month") {
+      next = new Date(view.getFullYear() + step, view.getMonth(), 1);
+    } else {
+      next = new Date(view.getFullYear(), view.getMonth() + step, 1);
     }
-    setView(new Date(view.getFullYear(), view.getMonth() + step, 1));
+    setView(next);
+    onViewChange?.(next);
   };
   const pickMonth = (month) => {
     if (isMonthDisabled(view.getFullYear(), month)) return;
-    setView(new Date(view.getFullYear(), month, 1));
+    const next = new Date(view.getFullYear(), month, 1);
+    setView(next);
+    onViewChange?.(next);
     setMode("date");
   };
   const pickYear = (year) => {
     if (isYearDisabled(year)) return;
-    setView(new Date(year, view.getMonth(), 1));
+    const next = new Date(year, view.getMonth(), 1);
+    setView(next);
+    onViewChange?.(next);
     setMode("month");
   };
   const yearPageStart = Math.floor(view.getFullYear() / YEARS_PER_PAGE) * YEARS_PER_PAGE;
@@ -163,7 +219,7 @@ var Calendar = React__namespace.forwardRef(({
       )
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: `calendar ${className}`, ...rest, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setRootRef, className: `calendar ${className}`, ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-head", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -172,7 +228,7 @@ var Calendar = React__namespace.forwardRef(({
           className: "btn icon sm ghost",
           onClick: () => shiftView(-1),
           "aria-label": mode === "year" ? "Previous years" : mode === "month" ? "Previous year" : "Previous month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "chevLeft", size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "chevLeft", size: 14 })
         }
       ),
       renderTitle(),
@@ -183,12 +239,12 @@ var Calendar = React__namespace.forwardRef(({
           className: "btn icon sm ghost",
           onClick: () => shiftView(1),
           "aria-label": mode === "year" ? "Next years" : mode === "month" ? "Next year" : "Next month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkQMX67CVT_cjs.Icon, { name: "chevRight", size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "chevRight", size: 14 })
         }
       )
     ] }),
-    mode === "date" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-grid", children: [
-      WEEKDAYS.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-dow", children: w }, w)),
+    mode === "date" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-grid", role: "grid", "aria-label": `${view.getFullYear()} \u5E74 ${view.getMonth() + 1} \u6708`, onKeyDown: handleGridKeyDown, children: [
+      WEEKDAYS.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-dow", role: "columnheader", children: w }, w)),
       cells.map((d, i) => {
         if (d === null) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "calendar-cell out" }, i);
         const date = new Date(view.getFullYear(), view.getMonth(), d);
@@ -197,8 +253,12 @@ var Calendar = React__namespace.forwardRef(({
           "button",
           {
             type: "button",
+            role: "gridcell",
+            "aria-label": `${view.getFullYear()}-${String(view.getMonth() + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`,
+            "aria-selected": !!sel && isSameDay(date, sel),
             disabled: !!disabled,
-            className: `calendar-cell ${isSameDay(date, sel) ? "selected" : ""} ${isSameDay(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
+            tabIndex: focusableSelectionInView && !!sel && isSameDay(date, sel) || !focusableSelectionInView && d === firstFocusableDay ? 0 : -1,
+            className: `calendar-cell ${sel && isSameDay(date, sel) ? "selected" : ""} ${isSameDay(date, /* @__PURE__ */ new Date()) ? "today" : ""} ${disabled ? "disabled" : ""}`,
             onClick: () => pick(d),
             children: d
           },
@@ -236,6 +296,7 @@ var Calendar = React__namespace.forwardRef(({
     }) })
   ] });
 });
-Calendar.displayName = "Calendar";
+CalendarBase.displayName = "Calendar";
+var Calendar = chunkNRJXZPZR_cjs.withComponentTheme(CalendarBase, "Calendar", "calendar");
 
 exports.Calendar = Calendar;

package/dist/chunk-QYPA77OI.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./List-6BQIFAIT.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 ListBase = React__namespace.forwardRef(({ items, dividers = true, className = "", style, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "ul",
+  {
+    ref,
+    className: `list ${dividers ? "with-dividers" : ""} ${className}`,
+    style: { listStyle: "none", margin: 0, ...style },
+    ...rest,
+    children: items.map((it) => {
+      const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        it.avatar && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-item-avatar", children: it.avatar }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "list-item-meta", children: [
+          it.title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-item-title", children: it.title }),
+          it.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "list-item-desc", children: it.description })
+        ] })
+      ] });
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: `list-item ${it.onClick ? "clickable" : ""}`, children: [
+        it.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "list-item-trigger", onClick: it.onClick, children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-item-trigger", children: content }),
+        it.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "list-item-actions", children: it.actions })
+      ] }, it.key);
+    })
+  }
+));
+ListBase.displayName = "List";
+var List = chunkNRJXZPZR_cjs.withComponentTheme(ListBase, "List", "list");
+
+exports.List = List;

package/dist/chunk-RAK6CENJ.js

@@ -0,0 +1,83 @@
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Tabs-A3IG6UZ6.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var getFirstEnabledKey = (items) => items.find((item) => !item.disabled)?.key;
+var TabsBase = React.forwardRef(({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  variant = "line",
+  centered,
+  className = "",
+  ...rest
+}, ref) => {
+  const baseId = React.useId();
+  const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+  const [inner, setInner] = React.useState(defaultActiveKey ?? getFirstEnabledKey(items));
+  const isControlled = activeKey !== void 0;
+  const requested = isControlled ? activeKey : inner;
+  const current = items.some((item) => item.key === requested && !item.disabled) ? requested : getFirstEnabledKey(items);
+  const select = (k) => {
+    if (items.find((item) => item.key === k)?.disabled) return;
+    if (!isControlled) setInner(k);
+    onChange?.(k);
+  };
+  const handleTabKeyDown = (event) => {
+    const enabled = items.filter((item) => !item.disabled);
+    const index = enabled.findIndex((item) => item.key === current);
+    let target;
+    if (event.key === "ArrowRight") target = enabled[(index + 1) % enabled.length];
+    if (event.key === "ArrowLeft") target = enabled[(index - 1 + enabled.length) % enabled.length];
+    if (event.key === "Home") target = enabled[0];
+    if (event.key === "End") target = enabled[enabled.length - 1];
+    if (!target) return;
+    event.preventDefault();
+    tabRefs.current.get(target.key)?.focus();
+    select(target.key);
+  };
+  const active = items.find((i) => i.key === current);
+  const activeIndex = items.findIndex((item) => item.key === current);
+  return /* @__PURE__ */ jsxs("div", { ref, className: `tabs ${variant} ${centered ? "centered" : ""} ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "tabs-nav", role: "tablist", children: items.map((it, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (node) => {
+          if (node) tabRefs.current.set(it.key, node);
+          else tabRefs.current.delete(it.key);
+        },
+        type: "button",
+        role: "tab",
+        id: `${baseId}-tab-${index}`,
+        "aria-selected": current === it.key,
+        "aria-controls": it.content !== void 0 ? `${baseId}-panel-${index}` : void 0,
+        tabIndex: current === it.key ? 0 : -1,
+        disabled: it.disabled,
+        className: `tab ${current === it.key ? "active" : ""}`,
+        onClick: () => select(it.key),
+        onKeyDown: handleTabKeyDown,
+        children: it.label
+      },
+      it.key
+    )) }),
+    active?.content !== void 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${baseId}-panel-${activeIndex}`,
+        className: "tabs-content",
+        role: "tabpanel",
+        "aria-labelledby": `${baseId}-tab-${activeIndex}`,
+        tabIndex: 0,
+        children: active.content
+      }
+    )
+  ] });
+});
+TabsBase.displayName = "Tabs";
+var Tabs = withComponentTheme(TabsBase, "Tabs", "tabs");
+
+export { Tabs };

package/dist/{chunk-BW76ENTW.cjs → chunk-RERMZNF3.cjs}

@@ -1,8 +1,9 @@
 'use strict';
 
-require('./tokens-RYJ3DFTU.css');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+require('./tokens-CEJVVA3G.css');
 require('./shared-NJHRNLRH.css');
-require('./Spin-GONGPV4Q.css');
+require('./Spin-F5YIEENO.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -26,14 +27,13 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// src/components/Spin/Spin.tsx
 var SIZE_PX = {
   small: 14,
   default: 20,
   large: 32
 };
 var resolveSize = (size) => typeof size === "number" ? size : SIZE_PX[size];
-var Spin = React__namespace.forwardRef(({
+var SpinBase = React__namespace.forwardRef(({
   size = "default",
   tone = "accent",
   tip,
@@ -60,13 +60,13 @@ var Spin = React__namespace.forwardRef(({
     const finalClassName = extraClassName ?? indicatorClass;
     const finalStyle = { ...indicatorStyle, ...extraStyle };
     if (variant === "dots") {
-      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: finalClassName, style: finalStyle, "aria-label": "Loading", ...indicatorRest, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: finalClassName, style: finalStyle, role: "status", "aria-label": "\u52A0\u8F7D\u4E2D", ...indicatorRest, children: [
         /* @__PURE__ */ jsxRuntime.jsx("i", {}),
         /* @__PURE__ */ jsxRuntime.jsx("i", {}),
         /* @__PURE__ */ jsxRuntime.jsx("i", {})
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: finalClassName, style: finalStyle, "aria-label": "Loading", ...indicatorRest });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: finalClassName, style: finalStyle, role: "status", "aria-label": "\u52A0\u8F7D\u4E2D", ...indicatorRest });
   };
   if (!text) {
     return renderIndicator({
@@ -76,11 +76,12 @@ var Spin = React__namespace.forwardRef(({
       ...rest
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: rootClass, style, ...rest, children: [
-    renderIndicator(),
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: rootClass, style, role: "status", "aria-live": "polite", ...rest, children: [
+    renderIndicator({ "aria-hidden": true }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spin-label", children: text })
   ] });
 });
-Spin.displayName = "Spin";
+SpinBase.displayName = "Spin";
+var Spin = chunkNRJXZPZR_cjs.withComponentTheme(SpinBase, "Spin", "spin");
 
 exports.Spin = Spin;