@antadesign/anta 0.3.2 → 0.3.4

package/dist/components/Select.js

@@ -0,0 +1,341 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState, useId } from "../jsx-runtime";
+import { Input } from "./Input";
+import { Icon } from "./Icon";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuGroup } from "./MenuGroup";
+import { MenuSeparator } from "./MenuSeparator";
+import { Tooltip } from "./Tooltip";
+import styles from "./Select.module.css";
+const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
+const normalize = (o) => typeof o === "string" ? { value: o, label: o } : o;
+function optionsWithSelection(options, values) {
+  const set = new Set(values == null ? [] : Array.isArray(values) ? values : [values]);
+  const state = (on, total) => on === 0 ? "none" : on === total ? "all" : "some";
+  const walk = (items) => items.map((raw) => {
+    if (typeof raw !== "string" && Array.isArray(raw.submenu)) {
+      const sm = raw;
+      const children = walk(sm.submenu);
+      const on = children.reduce((n, c) => n + c.on, 0);
+      const total = children.reduce((n, c) => n + c.total, 0);
+      return { node: { ...sm, submenu: children.map((c) => c.node), selectionState: state(on, total) }, on, total };
+    }
+    if (typeof raw !== "string" && Array.isArray(raw.options)) {
+      const g = raw;
+      const children = walk(g.options);
+      const on = children.reduce((n, c) => n + c.on, 0);
+      const total = children.reduce((n, c) => n + c.total, 0);
+      return { node: { ...g, options: children.map((c) => c.node), selectionState: state(on, total) }, on, total };
+    }
+    const o = normalize(raw);
+    const selected = set.has(o.value);
+    return { node: { ...o, selected }, on: selected ? 1 : 0, total: 1 };
+  });
+  return walk(options).map((c) => c.node);
+}
+const Select = (props) => {
+  const {
+    options,
+    selection,
+    indicator,
+    value,
+    defaultValue,
+    onValueChange,
+    placeholder,
+    icon,
+    label,
+    hint,
+    size,
+    status,
+    statusIcon,
+    round,
+    disabled,
+    toneSelected,
+    filter,
+    selectAll,
+    selectAllLabel = "Select all",
+    renderOption,
+    renderIndicator,
+    renderTrigger,
+    renderEmpty,
+    className,
+    style,
+    ...rest
+  } = props;
+  const multiple = selection === "multiple";
+  const statusColor = status && status !== "neutral" ? `var(--text-2-${status})` : void 0;
+  const mark = multiple ? "checkbox" : indicator ?? "none";
+  const menuItemIndicator = mark === "none" ? void 0 : mark;
+  const emit = onValueChange;
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const currentRaw = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeId, setActiveId] = useState(null);
+  const uid = useId();
+  const isSubmenu = (it) => typeof it === "object" && Array.isArray(it.submenu);
+  const isGroup = (it) => typeof it === "object" && Array.isArray(it.options);
+  const collectLeaves = (items, group, disabled2, out) => {
+    for (const raw of items) {
+      if (typeof raw !== "string" && isSubmenu(raw)) collectLeaves(raw.submenu, raw.label, disabled2 || !!raw.disabled, out);
+      else if (typeof raw !== "string" && isGroup(raw)) collectLeaves(raw.options, raw.label, disabled2 || !!raw.disabled, out);
+      else {
+        const o = normalize(raw);
+        out.push({ opt: o, disabled: disabled2 || !!o.disabled, group });
+      }
+    }
+  };
+  const allLeaves = [];
+  collectLeaves(options, void 0, false, allLeaves);
+  const seenValues = /* @__PURE__ */ new Set();
+  for (const l of allLeaves) {
+    if (seenValues.has(l.opt.value))
+      console.warn(`[anta] <Select> duplicate option value=${JSON.stringify(l.opt.value)} \u2014 values must be unique.`);
+    seenValues.add(l.opt.value);
+  }
+  const byValue = new Map(allLeaves.map((l) => [l.opt.value, l.opt]));
+  const filtering = filter !== void 0 && filter !== false;
+  const q = query.trim();
+  const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const queryRe = filtering && typeof filter !== "function" && q ? new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i") : null;
+  const matches = (o) => typeof filter === "function" ? filter(o, q) : !queryRe || [o.value, o.label ?? "", o.hint ?? ""].some((s) => queryRe.test(s));
+  const prune = typeof filter === "function" || filtering && !!q;
+  const visibleLeaves = prune ? allLeaves.filter((l) => matches(l.opt)) : allLeaves;
+  const flattening = filtering && !!q;
+  const highlight = (text) => {
+    if (!queryRe) return text;
+    const re = new RegExp(queryRe.source, "gi");
+    const out = [];
+    let last = 0;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      if (m.index > last) out.push(text.slice(last, m.index));
+      out.push(/* @__PURE__ */ jsx("b", { children: m[0] }, out.length));
+      last = m.index + m[0].length;
+      if (m[0].length === 0) re.lastIndex++;
+    }
+    if (out.length === 0) return text;
+    if (last < text.length) out.push(text.slice(last));
+    return out;
+  };
+  const selectedValues = Array.isArray(currentRaw) ? currentRaw : currentRaw != null ? [currentRaw] : [];
+  const isSelected = (v) => selectedValues.includes(v);
+  const selectedOptions = selectedValues.map((v) => byValue.get(v)).filter(Boolean);
+  let display = "";
+  if (multiple) {
+    if (selectedOptions.length === 1) display = selectedOptions[0].label ?? selectedOptions[0].value;
+    else if (selectedOptions.length > 1) display = `${selectedOptions.length} selected`;
+  } else if (currentRaw != null) {
+    const o = byValue.get(currentRaw);
+    display = o ? o.label ?? o.value : "";
+  }
+  const choose = (o, e) => {
+    if (multiple) {
+      if (selectAll && e?.altKey) {
+        const next2 = [o.value];
+        if (!controlled) setInternal(next2);
+        emit?.(next2, { value: o.value, option: o, selected: true });
+        return;
+      }
+      const has = selectedValues.includes(o.value);
+      const next = has ? selectedValues.filter((v) => v !== o.value) : [...selectedValues, o.value];
+      if (!controlled) setInternal(next);
+      emit?.(next, { value: o.value, option: o, selected: !has });
+    } else {
+      if (!controlled) setInternal(o.value);
+      emit?.(o.value, { value: o.value, option: o });
+    }
+  };
+  const enabledValues = multiple ? visibleLeaves.filter((l) => !l.disabled).map((l) => l.opt.value) : [];
+  const enabledSelected = enabledValues.filter((v) => selectedValues.includes(v));
+  const allSelected = enabledValues.length > 0 && enabledSelected.length === enabledValues.length;
+  const someSelected = enabledSelected.length > 0 && !allSelected;
+  const toggleAll = () => {
+    const keep = selectedValues.filter((v) => !enabledValues.includes(v));
+    const next = allSelected ? keep : [...keep, ...enabledValues];
+    if (!controlled) setInternal(next);
+    emit?.(next, { all: true, selected: !allSelected });
+  };
+  const renderOptionRow = (o, disabled2) => {
+    const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
+    const custom = renderOption?.(o, optState);
+    const customMark = renderIndicator?.(optState);
+    const ariaSelectable = !multiple && mark === "none" ? { role: "menuitemradio", "aria-checked": isSelected(o.value) ? "true" : "false" } : void 0;
+    const isolateHint = multiple && selectAll && !disabled2 ? IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this" : void 0;
+    const tip = o.tooltip ?? isolateHint;
+    const hintOnly = o.tooltip == null && isolateHint != null;
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        id: `${uid}-opt-${o.value}`,
+        selectionIndicator: menuItemIndicator,
+        ...ariaSelectable,
+        indicator: customMark ?? void 0,
+        label: custom ? void 0 : queryRe ? highlight(o.label ?? o.value) : o.label ?? o.value,
+        hint: custom ? void 0 : queryRe && o.hint ? highlight(o.hint) : o.hint,
+        icon: custom ? void 0 : o.icon,
+        tone: o.tone,
+        toneSelected,
+        selected: isSelected(o.value),
+        disabled: disabled2 || void 0,
+        "data-menu-open": multiple ? "" : void 0,
+        onSelect: (e) => choose(o, e),
+        children: [
+          custom,
+          tip && /* @__PURE__ */ jsx(Tooltip, { ...hintOnly ? { follow: true, delay: 700 } : {}, children: tip })
+        ]
+      },
+      o.value
+    );
+  };
+  const renderTree = (items, disabled2) => {
+    const out = [];
+    items.forEach((raw, i) => {
+      if (typeof raw !== "string" && isSubmenu(raw)) {
+        const dis = disabled2 || !!raw.disabled;
+        const inner = renderTree(raw.submenu, dis);
+        if (inner.length)
+          out.push(
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                submenu: true,
+                label: raw.label,
+                icon: raw.icon,
+                disabled: dis || void 0,
+                "data-menu-open": multiple ? "" : void 0,
+                children: /* @__PURE__ */ jsx(Menu, { children: inner })
+              },
+              `sub-${i}-${raw.label}`
+            )
+          );
+        return;
+      }
+      if (typeof raw !== "string" && isGroup(raw)) {
+        const dis = disabled2 || !!raw.disabled;
+        const inner = renderTree(raw.options, dis);
+        if (inner.length) out.push(/* @__PURE__ */ jsx(MenuGroup, { label: raw.label, children: inner }, `grp-${i}-${raw.label}`));
+        return;
+      }
+      const o = normalize(raw);
+      if (typeof filter === "function" && !matches(o)) return;
+      out.push(renderOptionRow(o, disabled2 || !!o.disabled));
+    });
+    return out;
+  };
+  const renderFlat = () => {
+    const shown = allLeaves.filter((l) => matches(l.opt));
+    const out = [];
+    for (let i = 0; i < shown.length; ) {
+      const label2 = shown[i].group;
+      if (label2 === void 0) {
+        out.push(renderOptionRow(shown[i].opt, shown[i].disabled));
+        i++;
+        continue;
+      }
+      const rows = [];
+      const start = i;
+      while (i < shown.length && shown[i].group === label2) {
+        rows.push(renderOptionRow(shown[i].opt, shown[i].disabled));
+        i++;
+      }
+      out.push(/* @__PURE__ */ jsx(MenuGroup, { label: label2, children: rows }, `flat-${start}-${label2}`));
+    }
+    return out;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger ? renderTrigger({ open, value: currentRaw, selected: selectedOptions, disabled: !!disabled, icon }) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        hint,
+        placeholder,
+        value: display,
+        readOnly: true,
+        dimActions: true,
+        disabled,
+        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        size,
+        status,
+        statusIcon,
+        round,
+        "aria-haspopup": "menu",
+        "aria-expanded": open ? "true" : "false",
+        onKeyDown: (e) => {
+          if (!open && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        },
+        trailing: (
+          // Chevron rotates down → up when open (spacing + rotation in the CSS
+          // module, matching the Input "Select dropdown" example).
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              shape: "chevron-down",
+              className: open ? `${styles.chevron} ${styles.open}` : styles.chevron,
+              style: statusColor ? { color: statusColor } : void 0
+            }
+          )
+        ),
+        className,
+        style,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        onStateChange: (_e, { next }) => {
+          setOpen(next);
+          if (!next) {
+            setQuery("");
+            setActiveId(null);
+          }
+        },
+        onactivedescendant: (e) => setActiveId((e.nativeEvent ?? e).detail?.id ?? null),
+        children: [
+          filtering && // `slot="header"` pins the field in the Menu's fixed header region (above
+          // the scrolling options); `data-menu-search` puts the menu in combobox
+          // mode — it focuses this field on open and drives an active-option cursor.
+          /* @__PURE__ */ jsx("div", { className: styles.filter, slot: "header", "data-menu-open": "", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              "data-menu-search": "",
+              size: "small",
+              value: query,
+              placeholder: "Filter\u2026",
+              "aria-label": "Filter options",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": open && activeId ? activeId : void 0,
+              onInput: (e) => setQuery(e.currentTarget.value)
+            }
+          ) }),
+          multiple && selectAll && visibleLeaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                selectionIndicator: "checkbox",
+                selected: allSelected,
+                indeterminate: someSelected,
+                label: selectAllLabel,
+                "data-menu-open": "",
+                "data-menu-skip-active": "",
+                onSelect: toggleAll
+              }
+            ),
+            /* @__PURE__ */ jsx(MenuSeparator, {})
+          ] }),
+          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false)
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Select,
+  optionsWithSelection
+};

package/dist/components/Select.module.css

@@ -0,0 +1 @@
+.chevron{margin-inline-end:7px;transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}

package/dist/components/Tab.d.ts

@@ -14,6 +14,9 @@ export interface TabProps {
     icon?: IconShape;
     /** Trailing icon shape, rendered after the label. */
     iconTrailing?: IconShape;
+    /** Fully-round just this tab's box. `<Tabs round>` rounds the whole strip
+     *  (tabs + sliding indicator) instead. */
+    round?: boolean;
     /** 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

package/dist/components/Tab.js

@@ -1,4 +1,5 @@
-const Tab = (_props) => null;
+import { markTabsKind } from "../anta_helpers";
+const Tab = markTabsKind((_props) => null, "tab");
 export {
   Tab
 };

package/dist/components/TabPanel.d.ts

@@ -1,22 +1,30 @@
-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). */
+/**
+ * A tab panel inside `<Tabs>`. Renders a self-managing `<a-tabpanel>` — the element
+ * finds its `<a-tabs>` (its flat sibling under the same parent — `Tabs` renders the
+ * strip and panels with no wrapper), matches by `value`, and shows/hides itself
+ * off-DOM. This wrapper is a pure projection: it sets the static ARIA (`role`,
+ * `tabindex`, `value`) and passes `children` straight through; `Tabs` never reads
+ * or toggles it.
+ *
+ * Use it as a direct child of `<Tabs>`, paired to an `options` entry by `value`.
+ * For a strip and panels in different layout regions (no shared parent), or to
+ * unmount an inactive panel (the old `mounting="active" | "lazy"`), drive selection
+ * with a controlled `value` and render the content yourself — see the Tabs docs.
+ */
 export interface TabPanelProps {
-    /** Pairs this panel with the `<Tab value="…">` of the same value. */
+    /** Pairs this panel with the tab (`options` entry) 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;
+    /** How this panel hides while inactive: `display` (default — removed from layout
+     *  and the a11y tree) or `visibility` (keeps its layout box, to measure it or
+     *  avoid reflow). Both stay mounted; to *not render* an inactive panel, render it
+     *  conditionally off a controlled `value` (see the Tabs docs).
+     *  @defaultValue display */
+    hideMode?: "display" | "visibility";
     /** 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;
+export declare const TabPanel: ({ value, children, hideMode, className, style }: TabPanelProps) => any;

package/dist/components/TabPanel.js

@@ -1,4 +1,16 @@
-const TabPanel = (_props) => null;
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const TabPanel = ({ value, children, hideMode, className, style }) => /* @__PURE__ */ jsx(
+  "a-tabpanel",
+  {
+    value,
+    role: "tabpanel",
+    tabIndex: 0,
+    "hide-mode": hideMode === "visibility" ? "visibility" : void 0,
+    class: className,
+    style,
+    children
+  }
+);
 export {
   TabPanel
 };

package/dist/components/Tabs.d.ts

@@ -1,4 +1,5 @@
 import type { BaseProps } from "../general_types";
+import type { IconShape } from "../elements/a-icon.shapes";
 /** The element's `statechange` payload — `next`/`prev` are tab values (`null` = none). */
 type StateDetail = {
     next: string | null;
@@ -9,33 +10,58 @@ type StateChangeEvent = CustomEvent<StateDetail>;
 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";
+/** One tab as a plain data object for the `options` array — the single source `Tabs`
+ *  renders its strip from (like `RadioGroup`'s `options`). `Tabs` reads these fields to
+ *  render the underlying `<a-tab>` (`tabindex`, `role`, and selection are all `Tabs`'
+ *  job, published off-DOM by the element). */
+export interface TabOption {
+    /** 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. The string shorthand for the tab's content; for richer content
+     *  pass `children` instead (`label` wins when both are set). */
+    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;
+    /** Fully-round just this tab's box. `<Tabs round>` rounds the whole strip
+     *  (tabs + sliding indicator) instead. */
+    round?: boolean;
+    /** 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;
+}
 /** 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. */
+    /** Optional `<TabPanel value="…">` panels, one per tab value. Each is a
+     *  self-managing `<a-tabpanel>` that shows itself when its `value` is the active
+     *  tab. Omit them to use `Tabs` as a bare selectable strip. To place panels in a
+     *  different layout region, or to unmount an inactive panel, drive selection with
+     *  a controlled `value` and render the content yourself (see the docs). */
     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. */
+    /** The tabs, as a data array (the strip's single source). Each entry is a
+     *  `TabOption` (`value`, `label` or `children`, `icon`, `iconTrailing`, `tone`,
+     *  `disabled`, `round`). */
+    options?: TabOption[];
+    /** Controlled active value — the tab `value` 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.
+     *  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. */
+    /** Initial active value for the uncontrolled case. After first render `Tabs`
+     *  owns selection itself. */
     defaultValue?: string;
     /** Fired whenever the active tab changes — event-first. `detail` is
      *  `{ next, prev }` (values; `null` = none). Cancelable: `event.preventDefault()`
@@ -71,42 +97,51 @@ export interface TabsProps extends Omit<BaseProps, "onChange"> {
      *  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;
+    /** Fully-round the tabs and the sliding indicator (and the primary track
+     *  well). Applies strip-wide; a single tab's `round` rounds just that tab. A
+     *  `number` (px) or CSS length string sets a custom radius on the top-level
+     *  track well only — the tab pills + indicator stay fully round. */
+    round?: boolean | number | string;
     /** Disable the whole strip. */
     disabled?: boolean;
 }
 /**
- * `<Tabs>` — a tablist with optional panels, rendered from `<Tab>` / `<TabPanel>`
- * children.
+ * `<Tabs>` — a tablist with optional panels. The strip renders from the `options`
+ * array; panels are `<TabPanel>` children that manage their own visibility.
  *
- * 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.
+ * The strip (`<a-tabs>`) and the panels render as flat siblings — there is no wrapper
+ * element, so `className` / `id` / `style` / `...rest` land on the strip. Laying the
+ * strip out relative to its panels is the consumer's job: a horizontal strip stacks
+ * above the panels in normal flow; for a vertical strip beside them, wrap `<Tabs>` in
+ * your own flex container. Any non-`TabPanel` children render verbatim as siblings too.
  *
- * Controlled (`value` + `onStateChange`) or uncontrolled (`defaultValue`). Drop the
- * `<TabPanel>`s and it's just a selectable strip emitting `statechange` / `change`.
+ * `<a-tabs>` owns selection off-DOM (it sets each tab's `selected` property and the
+ * roving `aria-activedescendant` via `ElementInternals`, writing no attribute to any
+ * tab); this wrapper mirrors the value only to render the strip's roving `tabindex`,
+ * and the panels read it straight from `<a-tabs>`. Controlled (`value` + `onStateChange`)
+ * or uncontrolled (`defaultValue`).
  *
  * 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" />
+ * <Tabs
+ *   defaultValue="account"
+ *   label="Settings"
+ *   options={[
+ *     { value: "account", label: "Account", icon: "user" },
+ *     { 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 declare const Tabs: ({ children, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
 export {};