@antadesign/anta 0.3.1 → 0.3.2

package/dist/anta_helpers.d.ts

@@ -1,4 +1,14 @@
 export declare function hasChildren(children: React.ReactNode): boolean;
+/**
+ * Normalize a wrapper's label content the way `Button` / `Tabs` do: a bare string
+ * or number becomes a `<tag>` — the ellipsis-capable label part (`a-button-label`,
+ * `a-tab-label`, …) that carries the optical baseline nudge and truncates cleanly;
+ * empty / whitespace strings and `NaN` carry no content and are dropped; a JSX
+ * element is the consumer's own structure, passed through unwrapped (so an icon-only
+ * child keeps its layout). Shared so the rule lives in one place — don't re-implement
+ * it per component.
+ */
+export declare function wrapLabel(kids: React.ReactNode, tag: string): React.ReactNode;
 /**
  * Unwrap a `statechange` (or any) `CustomEvent` a renderer may deliver wrapped:
  * React hands a synthetic event with the real one on `.nativeEvent`; Preact passes

package/dist/anta_helpers.js

@@ -1,6 +1,17 @@
+import { jsx } from "./jsx-runtime";
 function hasChildren(children) {
   return Array.isArray(children) ? children.length > 0 : children != null;
 }
+function wrapLabel(kids, tag) {
+  if (kids == null) return kids;
+  const arr = Array.isArray(kids) ? kids : [kids];
+  return arr.map((child, i) => {
+    if (typeof child === "string") return child.trim() === "" ? null : jsx(tag, { children: child }, i);
+    if (typeof child === "number") return Number.isNaN(child) ? null : jsx(tag, { children: child }, i);
+    if (child == null || typeof child === "boolean") return null;
+    return child;
+  });
+}
 function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
@@ -33,5 +44,6 @@ export {
   NAMED_TONES,
   hasChildren,
   nativeStateChange,
-  toneStyle
+  toneStyle,
+  wrapLabel
 };

package/dist/components/Button.js

@@ -1,19 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle } from "../anta_helpers";
-const wrapChildren = (kids) => {
-  if (kids == null) return kids;
-  const arr = Array.isArray(kids) ? kids : [kids];
-  return arr.map((child, i) => {
-    if (typeof child === "string") {
-      return child.trim() === "" ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
-    }
-    if (typeof child === "number") {
-      return Number.isNaN(child) ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
-    }
-    if (child == null || typeof child === "boolean") return null;
-    return child;
-  });
-};
+import { toneStyle, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -38,6 +24,12 @@ const Button = ({
   const computedStyle = toneStyle(toneAttr, "--button-tone-source", style);
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
+    // `<a-button>` is a custom element with no implicit ARIA role, so AT would
+    // announce it as a generic clickable — and `aria-pressed` below is only
+    // valid on a button/switch role. Publish `role="button"` from the wrapper
+    // (ARIA lives in the wrapper) for both the element and the `<a href>` path;
+    // a consumer's own `role` in `...rest` still wins by spread order.
+    role: "button",
     priority,
     tone: toneAttr,
     underline,
@@ -68,7 +60,7 @@ const Button = ({
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
     label != null && /* @__PURE__ */ jsx("a-button-label", { children: label }),
-    wrapChildren(children),
+    wrapLabel(children, "a-button-label"),
     iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" })
   ] });
   if (href != null) {
@@ -76,7 +68,6 @@ const Button = ({
       "a",
       {
         href,
-        role: "button",
         ...sharedAttrs,
         ...rest,
         children: inner

package/dist/components/Checkbox.d.ts

@@ -11,9 +11,9 @@ type StateDetail = {
     prev: CheckboxState;
 };
 type StateChangeEvent = CustomEvent<StateDetail>;
-/** Snapshot passed as the 2nd argument to `onAnyChange` — the new value plus
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new value plus
  *  form-relevant fields, so you don't poke at `event.target`. Mirrors `Input`'s
- *  `onAnyChange` convention. */
+ *  `onValueChange` convention. */
 export interface CheckboxChangeAttrs {
     checked: boolean;
     indeterminate: boolean;
@@ -48,21 +48,22 @@ export interface CheckboxProps extends BaseProps {
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Colour variant, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`)
-     *  for a one-off custom tone. Tints fill, label, hint, and the unselected box
-     *  border. Named tones track light/dark mode automatically via the theme-aware
-     *  role tokens; a custom colour keeps its hue + chroma and pins lightness to the
-     *  fill curve.
+    /** Colour of the **mark** — the checked-box fill and the unselected box border.
+     *  A named tone or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a
+     *  one-off custom tone. Named tones track light/dark mode automatically via the
+     *  theme-aware role tokens; a custom colour keeps its hue + chroma and pins
+     *  lightness to the fill curve. The label + hint stay neutral — use `toneText`
+     *  to recolour those.
      *  @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Colour of the **text** — the label and hint — independent of `tone`. A named
+     *  tone or any literal CSS color. Named tones track light/dark via the theme-aware
+     *  `--text-*` role tokens. Omit to leave the text neutral.
+     *  @defaultValue 'neutral' */
+    toneText?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px box.
      *  @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` fills the checked box with the tone colour and
-     *  draws a white checkmark; `secondary` keeps the box unfilled and draws the
-     *  border + checkmark in the tone colour (an outlined look).
-     *  @defaultValue 'primary' */
-    priority?: 'primary' | 'secondary';
     /** Fired on click / Space *before* the element applies any change. Event-first
      *  so `event.preventDefault()` is the synchronous veto (uncontrolled mode);
      *  `detail` carries `{ next, prev }`. In controlled mode the element never
@@ -77,8 +78,8 @@ export interface CheckboxProps extends BaseProps {
     onChange?: (event: Event) => void;
     /** Like `onChange`, but with a `{ checked, indeterminate, name, value }` snapshot
      *  as the 2nd argument — the ergonomic "just give me the new value" callback
-     *  (mirrors `Input`'s `onAnyChange`). */
-    onAnyChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
+     *  (mirrors `Input`'s `onValueChange`). */
+    onValueChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
 }
 /**
  * Checkbox. Renders an `<a-checkbox>` web component that owns the visual
@@ -93,5 +94,5 @@ export interface CheckboxProps extends BaseProps {
  * <Checkbox defaultChecked label="Remember me" hint="On this device" />
  * ```
  */
-export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, size, priority, onStateChange, onChange, onAnyChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
+export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneText, size, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
 export {};

package/dist/components/Checkbox.js

@@ -13,11 +13,11 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   tone,
+  toneText,
   size,
-  priority,
   onStateChange,
   onChange,
-  onAnyChange,
+  onValueChange,
   label,
   hint,
   className,
@@ -26,7 +26,11 @@ const Checkbox = ({
   tabIndex,
   ...rest
 }) => {
-  const computedStyle = toneStyle(tone, "--checkbox-tone-source", style);
+  const computedStyle = toneStyle(
+    toneText,
+    "--checkbox-tone-text-source",
+    toneStyle(tone, "--checkbox-tone-source", style)
+  );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
   const onstatechange = onStateChange ? (e) => {
@@ -37,9 +41,9 @@ const Checkbox = ({
       prev: stateToValue(detail.prev)
     });
   } : void 0;
-  const onchange = onChange || onAnyChange ? (e) => {
+  const onchange = onChange || onValueChange ? (e) => {
     onChange?.(e);
-    onAnyChange?.(e, checkboxAttrsOf(e.currentTarget));
+    onValueChange?.(e, checkboxAttrsOf(e.currentTarget));
   } : void 0;
   const stateAttr = checked !== void 0 ? valueToState(checked) : void 0;
   const defaultStateAttr = checked === void 0 && defaultChecked !== void 0 ? valueToState(defaultChecked) : void 0;
@@ -55,8 +59,8 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      "tone-text": toneText && toneText !== "neutral" ? toneText : void 0,
       size: size && size !== "medium" ? size : void 0,
-      priority: priority && priority !== "primary" ? priority : void 0,
       tabIndex: disabled ? -1 : tabIndex ?? 0,
       onstatechange,
       onchange,

package/dist/components/Input.d.ts

@@ -1,6 +1,6 @@
 import type { BaseProps, DOMEventHandlers } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
-/** Convenience snapshot passed as the 2nd argument to `onAnyChange`. */
+/** Convenience snapshot passed as the 2nd argument to `onValueChange`. */
 export interface InputChangeAttrs {
     /** Current value. */
     value: string;
@@ -114,7 +114,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     onInput?: (e: any) => void;
     /** Fires on **commit** (blur / Enter) — the platform `change` semantics, **not**
      *  React's per-keystroke `onChange`. This is a web component, so `onChange` keeps
-     *  the native meaning; reach for `onInput` (every keystroke) or `onAnyChange`
+     *  the native meaning; reach for `onInput` (every keystroke) or `onValueChange`
      *  (both) for live updates. Read `e.target.value`. */
     onChange?: (e: any) => void;
     /** Unified value-change handler — the easy path for state. Fires on `input`
@@ -123,7 +123,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  you can do `setForm(s => ({ ...s, [attrs.name]: attrs.value }))` without
      *  digging into the event. Use `event.type` to tell a live edit (`input`) from
      *  a commit (`change`); read `id` / `type` / `className` off `event.target`. */
-    onAnyChange?: (event: any, attrs: InputChangeAttrs) => void;
+    onValueChange?: (event: any, attrs: InputChangeAttrs) => void;
     /** Fires when the built-in clear button (`clearable`) is clicked, *before*
      *  the field is cleared. Call `e.preventDefault()` to keep the current value
      *  — the clear is cancelled and `onClearInput` won't fire. Backed by the
@@ -156,4 +156,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onAnyChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -62,7 +62,7 @@ const Input = ({
   step,
   onInput,
   onChange,
-  onAnyChange,
+  onValueChange,
   onClearClick,
   onClearInput,
   children,
@@ -100,13 +100,13 @@ const Input = ({
       max,
       step,
       "aria-invalid": status === "critical" ? "true" : void 0,
-      oninput: onInput || onAnyChange ? (e) => {
+      oninput: onInput || onValueChange ? (e) => {
         onInput?.(e);
-        onAnyChange?.(e, attrsOf(e));
+        onValueChange?.(e, attrsOf(e));
       } : void 0,
-      onchange: onChange || onAnyChange ? (e) => {
+      onchange: onChange || onValueChange ? (e) => {
         onChange?.(e);
-        onAnyChange?.(e, attrsOf(e));
+        onValueChange?.(e, attrsOf(e));
       } : void 0,
       onclearclick: onClearClick ? (e) => onClearClick(nativeStateChange(e).event) : void 0,
       onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,

package/dist/components/RadioGroup.d.ts

@@ -8,7 +8,7 @@ type StateDetail = {
     reason: StateReason;
 };
 type StateChangeEvent = CustomEvent<StateDetail>;
-/** Snapshot passed as the 2nd argument to `onAnyChange` — the new value plus the
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new value plus the
  *  field name, so you don't poke at `event.target`. Mirrors `Input`/`Checkbox`. */
 export interface RadioChangeAttrs {
     value: string | null;
@@ -25,12 +25,12 @@ export interface RadioOption {
     hint?: React.ReactNode;
     /** Disable just this option (skipped by keyboard, dropped from the tab order). */
     disabled?: boolean;
-    /** Override this one option's tone (defaults to the group's `tone`). */
+    /** Override this one option's mark tone (defaults to the group's `tone`). */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Override this one option's text tone (defaults to the group's `toneText`). */
+    toneText?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
     /** Override this one option's size (defaults to the group's `size`). */
     size?: "small" | "medium" | "large";
-    /** Override this one option's priority (defaults to the group's `priority`). */
-    priority?: "primary" | "secondary";
 }
 /** Public props for `<RadioGroup>` — the single-select container. */
 export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"> {
@@ -58,7 +58,7 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
     onChange?: (event: Event) => void;
     /** Like `onChange`, but with a `{ value, name }` snapshot as the 2nd argument —
      *  the ergonomic "just give me the new value" callback (mirrors `Input`). */
-    onAnyChange?: (event: Event, attrs: RadioChangeAttrs) => void;
+    onValueChange?: (event: Event, attrs: RadioChangeAttrs) => void;
     /** Fired when focus enters the group (any option) — wired to `focusin`, since
      *  focus lands on an individual option, not the group element itself. */
     onFocus?: (event: FocusEvent) => void;
@@ -78,20 +78,20 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
      *  the neutral default.
      *  @defaultValue 'neutral' */
     status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
-    /** Tone applied to every option (an option's own `tone` wins), or any literal
-     *  CSS color for a one-off custom tone. Tints fill, label, hint, and the
-     *  unselected ring border. Named tones track light/dark mode.
+    /** Mark tone applied to every option (an option's own `tone` wins), or any literal
+     *  CSS color for a one-off custom tone. Colours the selected-ring fill + dot and
+     *  the unselected ring border. Named tones track light/dark mode. The option text
+     *  stays neutral — use `toneText` for that.
      *  @defaultValue 'neutral' */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Text tone applied to every option's label + hint (an option's own `toneText`
+     *  wins), independent of `tone`. A named tone or any literal CSS color. Omit to
+     *  leave the text neutral.
+     *  @defaultValue 'neutral' */
+    toneText?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
     /** Size applied to every option (an option's own `size` wins).
      *  @defaultValue 'medium' */
     size?: "small" | "medium" | "large";
-    /** Visual priority applied to every option (an option's own `priority` wins).
-     *  `primary` fills the selected ring with the tone colour and draws a white dot;
-     *  `secondary` keeps the ring unfilled and draws the border + dot in the tone
-     *  colour (an outlined look).
-     *  @defaultValue 'primary' */
-    priority?: "primary" | "secondary";
     /** Disable the whole group. */
     disabled?: boolean;
     /** Layout + arrow-key axis.
@@ -115,5 +115,5 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
  *
  * Requires `@antadesign/anta/elements` (client-side only).
  */
-export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onAnyChange, onFocus, onBlur, name, label, hint, status, tone, size, priority, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
+export declare const RadioGroup: ({ options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneText, size, disabled, orientation, className, style, ...rest }: RadioGroupProps) => any;
 export {};

package/dist/components/RadioGroup.js

@@ -11,7 +11,7 @@ const RadioGroup = ({
   defaultValue,
   onStateChange,
   onChange,
-  onAnyChange,
+  onValueChange,
   onFocus,
   onBlur,
   name,
@@ -19,8 +19,8 @@ const RadioGroup = ({
   hint,
   status,
   tone,
+  toneText,
   size,
-  priority,
   disabled,
   orientation,
   className,
@@ -47,9 +47,9 @@ const RadioGroup = ({
     if (detail.reason === "user" && event.defaultPrevented) return;
     setInternalValue(detail.next ?? void 0);
   };
-  const onchange = onChange || onAnyChange ? (e) => {
+  const onchange = onChange || onValueChange ? (e) => {
     onChange?.(e);
-    onAnyChange?.(e, radioAttrsOf(e.currentTarget));
+    onValueChange?.(e, radioAttrsOf(e.currentTarget));
   } : void 0;
   return /* @__PURE__ */ jsxs(
     "a-radio-group",
@@ -64,8 +64,8 @@ const RadioGroup = ({
       name,
       status: status && status !== "neutral" ? status : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      "tone-text": toneText && toneText !== "neutral" ? toneText : void 0,
       size: size && size !== "medium" ? size : void 0,
-      priority: priority && priority !== "primary" ? priority : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
       onstatechange,
@@ -73,7 +73,7 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(tone, "--radio-tone-source", style),
+      style: toneStyle(toneText, "--radio-tone-text-source", toneStyle(tone, "--radio-tone-source", style)),
       children: [
         label && /* @__PURE__ */ jsx("a-radio-group-label", { id: labelId, children: label }),
         hint && /* @__PURE__ */ jsx("a-radio-group-hint", { id: hintId, children: hint }),
@@ -87,10 +87,10 @@ const RadioGroup = ({
               "aria-disabled": optDisabled ? "true" : void 0,
               tabIndex: o.value === tabStopValue ? 0 : -1,
               tone: o.tone && o.tone !== "neutral" ? o.tone : void 0,
+              "tone-text": o.toneText && o.toneText !== "neutral" ? o.toneText : void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
-              priority: o.priority && o.priority !== "primary" ? o.priority : void 0,
               disabled: o.disabled ? "" : void 0,
-              style: toneStyle(o.tone, "--radio-tone-source"),
+              style: toneStyle(o.toneText, "--radio-tone-text-source", toneStyle(o.tone, "--radio-tone-source")),
               children: [
                 /* @__PURE__ */ jsx("a-radio-label", { children: o.label }),
                 o.hint != null && /* @__PURE__ */ jsx("a-radio-hint", { children: o.hint })

package/dist/components/Tab.d.ts

@@ -0,0 +1,34 @@
+import type { IconShape } from "../elements/a-icon.shapes";
+/** One tab in a `<Tabs>` strip. A **config component**: `Tabs` reads these props to
+ *  render the underlying `<a-tab>` (`tabindex`, `role`, `aria-controls`, and
+ *  selection are all `Tabs`' job), so `<Tab>` renders nothing on its own. */
+export interface TabProps {
+    /** This tab's identity — pairs it with the `<TabPanel value="…">` of the same
+     *  value, and the value reported by `onStateChange` / `onChange`. Unique per strip. */
+    value: string;
+    /** Visible label. Alternatively pass `children`. */
+    label?: React.ReactNode;
+    /** Tab content when you need more than a string — used if `label` is omitted. */
+    children?: React.ReactNode;
+    /** Leading icon shape, rendered before the label. */
+    icon?: IconShape;
+    /** Trailing icon shape, rendered after the label. */
+    iconTrailing?: IconShape;
+    /** Per-tab tone override, same vocabulary as `<Tabs tone>` — colours this one tab's
+     *  label + icons (all priorities/modes, named or custom colour) and, when it's the
+     *  active tab, its indicator. For a **custom literal colour** the sliding indicator can't
+     *  adopt it (the shared moving element can't read a descendant's colour), so a custom tone
+     *  colours the label everywhere and the indicator only in `noslide`; the six **named**
+     *  tones colour both in every mode. Overrides the strip's `tone` for this tab.
+     *  @defaultValue inherits the strip's `tone` */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Disable just this tab — skipped by keyboard nav and dropped from the tab order
+     *  (a disabled-but-selected tab stays reachable, per the ARIA pattern). */
+    disabled?: boolean;
+}
+/**
+ * A tab inside `<Tabs>`. Configuration only — `Tabs` reads its props and renders the
+ * real `<a-tab>`, so this component itself produces no DOM. Use it as a direct child
+ * of `<Tabs>`; rendering it elsewhere does nothing.
+ */
+export declare const Tab: (_props: TabProps) => null;

package/dist/components/Tab.js

@@ -0,0 +1,4 @@
+const Tab = (_props) => null;
+export {
+  Tab
+};

package/dist/components/TabPanel.d.ts

@@ -0,0 +1,22 @@
+import type { TabsMounting } from "./Tabs";
+/** A panel paired to the `<Tab>` of the same `value`. A **config component**: `Tabs`
+ *  reads these props and renders the underlying `<a-tabpanel>` (id wiring, show/hide,
+ *  `inert`, and the mounting strategy are all `Tabs`' job). */
+export interface TabPanelProps {
+    /** Pairs this panel with the `<Tab value="…">` of the same value. */
+    value: string;
+    /** Panel content — arbitrary React/Preact. */
+    children?: React.ReactNode;
+    /** Override the `<Tabs mounting>` strategy for just this panel. See `TabsMounting`. */
+    mounting?: TabsMounting;
+    /** CSS class on the rendered `<a-tabpanel>`. */
+    className?: string;
+    /** Inline style on the rendered `<a-tabpanel>`. */
+    style?: React.CSSProperties;
+}
+/**
+ * A tab panel inside `<Tabs>`. Configuration only — `Tabs` reads its props and renders
+ * the real `<a-tabpanel>`, so this component itself produces no DOM. Use it as a direct
+ * child of `<Tabs>`; rendering it elsewhere does nothing.
+ */
+export declare const TabPanel: (_props: TabPanelProps) => null;

package/dist/components/TabPanel.js

@@ -0,0 +1,4 @@
+const TabPanel = (_props) => null;
+export {
+  TabPanel
+};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,112 @@
+import type { BaseProps } from "../general_types";
+/** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
+type StateDetail = {
+    next: string | null;
+    prev: string | null;
+};
+type StateChangeEvent = CustomEvent<StateDetail>;
+/** Snapshot passed as the 2nd argument to `onValueChange`. */
+export interface TabsChangeAttrs {
+    value: string | null;
+}
+/**
+ * How `<TabPanel>`s that aren't the active one are handled.
+ * - `'display'` *(default)* — all panels mounted; inactive ones hidden via
+ *   `display:none`. Preserves panel DOM/form state; correct a11y for free.
+ * - `'visibility'` — all mounted; inactive hidden via `visibility:hidden`, so each
+ *   panel keeps its layout box (useful to avoid reflow / for measuring).
+ * - `'active'` — only the active panel is rendered; React unmounts the rest (state
+ *   resets on switch; defers expensive subtrees).
+ * - `'lazy'` — a panel mounts on first activation, then stays mounted+hidden.
+ */
+export type TabsMounting = "display" | "visibility" | "active" | "lazy";
+/** Public props for `<Tabs>`. */
+export interface TabsProps extends Omit<BaseProps, "onChange"> {
+    /** The strip's contents, as config-only elements `Tabs` reads (they render
+     *  nothing themselves): one `<Tab value="…" label="…">` per tab, and optionally a
+     *  `<TabPanel value="…">` whose `value` matches a tab — `Tabs` then shows that
+     *  panel's body when its tab is active. Omit the panels to use `Tabs` as a bare
+     *  selectable strip. Order is free; tabs and panels can interleave. */
+    children?: React.ReactNode;
+    /** Controlled active value — the `value` of the `<Tab>` to mark selected (and, when a
+     *  `<TabPanel value="…">` shares it, the panel to reveal). When set, you own selection:
+     *  the strip renders exactly what this says, and a user pick only *requests* a change
+     *  via `onStateChange` — apply it by updating this prop, reject it by leaving it
+     *  unchanged. Leave undefined (and use `defaultValue`) for uncontrolled. */
+    value?: string;
+    /** Initial active value for the uncontrolled case — the `value` of the `<Tab>` selected
+     *  on first render. After that `Tabs` owns selection itself. */
+    defaultValue?: string;
+    /** Fired whenever the active tab changes — event-first. `detail` is
+     *  `{ next, prev }` (values; `null` = none). Cancelable: `event.preventDefault()`
+     *  vetoes it (uncontrolled), or in controlled mode answer by updating `value`. */
+    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
+    /** Fired *after* the active tab changes — a native `change` event. */
+    onChange?: (event: Event) => void;
+    /** Like `onChange`, but with a `{ value }` snapshot as the 2nd argument. */
+    onValueChange?: (event: Event, attrs: TabsChangeAttrs) => void;
+    /** Focus entered the strip (any tab) — wired to `focusin` (focus lands on a tab,
+     *  not the tablist). */
+    onFocus?: (event: FocusEvent) => void;
+    /** Focus left the strip entirely — wired to `focusout`. */
+    onBlur?: (event: FocusEvent) => void;
+    /** Accessible name for the tablist (`aria-label`). */
+    label?: string;
+    /** Visual priority. `primary` is the raised pill on a recessed track (the
+     *  segmented-control look); `secondary` keeps that sizing but drops the track, marking
+     *  the selected tab with a subtle active background fill; `tertiary` is a bottom-underline
+     *  indicator under the selected tab (no track, no rest line). `tone` colours `secondary` +
+     *  `tertiary`; `primary` stays neutral.
+     *  @defaultValue 'primary' */
+    priority?: "primary" | "secondary" | "tertiary";
+    /** Tone applied to the selected indicator/label, or any literal CSS color for a
+     *  one-off custom tone (derived in oklch). Named tones track light/dark.
+     *  @defaultValue 'neutral' */
+    tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Size — small 24px · medium 28px · large 32px tall, matching Button's scale (the tab's
+     *  label leading runs a touch tighter, offset by 1px more block padding per side).
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Layout + arrow-key axis. Horizontal ellipsizes labels when tabs overflow (scroll
+     *  is opt-in via CSS); vertical stacks them.
+     *  @defaultValue 'horizontal' */
+    orientation?: "horizontal" | "vertical";
+    /** How inactive panels are mounted/hidden. Per-panel `<TabPanel mounting>` overrides.
+     *  @defaultValue 'display' */
+    mounting?: TabsMounting;
+    /** Disable the sliding indicator. By default the selected-tab indicator animates
+     *  between tabs (a single rectangle, via CSS anchor positioning); `noslide` paints it
+     *  per tab so it snaps with no movement. (Browsers without anchor positioning get that
+     *  per-tab paint automatically — `noslide` is the explicit opt-out.) */
+    noslide?: boolean;
+    /** Disable the whole strip. */
+    disabled?: boolean;
+}
+/**
+ * `<Tabs>` — a tablist with optional panels, rendered from `<Tab>` / `<TabPanel>`
+ * children.
+ *
+ * Like `RadioGroup`, this wrapper owns the **declarative** DOM concerns the elements
+ * deliberately don't touch — each tab's **`tabindex`** (every enabled tab is its own
+ * tab stop), `role`, the `aria-controls`/`aria-labelledby` wiring, and which panel
+ * shows (per `mounting`). Selection itself lives in `<a-tabs>` off-DOM (it sets each
+ * tab's `selected` property), so the elements never mutate the DOM; this wrapper
+ * reflects the current value into panel visibility on re-render.
+ *
+ * Controlled (`value` + `onStateChange`) or uncontrolled (`defaultValue`). Drop the
+ * `<TabPanel>`s and it's just a selectable strip emitting `statechange` / `change`.
+ *
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="account" label="Settings">
+ *   <Tab value="account" label="Account" icon="user" />
+ *   <Tab value="security" label="Security" />
+ *   <TabPanel value="account"><AccountForm /></TabPanel>
+ *   <TabPanel value="security"><SecurityForm /></TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare const Tabs: ({ children, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, mounting, noslide, disabled, className, style, id, ...rest }: TabsProps) => any;
+export {};