@antadesign/anta 0.3.1 → 0.3.3

package/dist/components/Select.js

@@ -0,0 +1,290 @@
+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 styles from "./Select.module.css";
+const normalize = (o) => typeof o === "string" ? { value: o, label: o } : o;
+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 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 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) => {
+    if (multiple) {
+      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;
+    return /* @__PURE__ */ jsx(
+      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: () => choose(o),
+        children: custom
+      },
+      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("");
+        },
+        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",
+              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
+};

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

@@ -0,0 +1,37 @@
+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;
+    /** 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;
+}
+/**
+ * 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,5 @@
+import { markTabsKind } from "../anta_helpers";
+const Tab = markTabsKind((_props) => null, "tab");
+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,5 @@
+import { markTabsKind } from "../anta_helpers";
+const TabPanel = markTabsKind((_props) => null, "panel");
+export {
+  TabPanel
+};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,129 @@
+import type { BaseProps } from "../general_types";
+import type { TabProps } from "./Tab";
+/** 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;
+}
+/** One tab as a plain data object for the `options` prop — the array-driven
+ *  alternative to `<Tab>` children (mirrors `RadioGroup`'s `options`). Same
+ *  fields as `<Tab>` minus `children` (use `label`); `icon` / `iconTrailing`
+ *  are icon-shape strings. */
+export type TabOption = Omit<TabProps, "children">;
+/**
+ * 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;
+    /** Tabs as a data array instead of `<Tab>` children (like `RadioGroup`'s
+     *  `options`). When set, the strip renders from these and `<Tab>` children are
+     *  ignored; `<TabPanel>` children still supply panel bodies (matched by `value`).
+     *  Each entry is a `TabOption` (`value`, `label`, `icon`, `iconTrailing`,
+     *  `tone`, `disabled`, `round`). */
+    options?: TabOption[];
+    /** 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;
+    /** Fully-round the tabs and the sliding indicator (and the primary track
+     *  well). Applies strip-wide; a single `<Tab 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.
+ *
+ * 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, options, value, defaultValue, onStateChange, onChange, onValueChange, onFocus, onBlur, label, priority, tone, size, orientation, mounting, noslide, round, disabled, className, style, id, ...rest }: TabsProps) => any;
+export {};

package/dist/components/Tabs.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useId, useState, Fragment } from "../jsx-runtime";
+import { nativeStateChange, toneStyle, roundStyle, wrapLabel, TABS_KIND } from "../anta_helpers";
+import styles from "./Tabs.module.css";
+const flattenChildren = (nodes) => {
+  const out = [];
+  const visit = (n) => {
+    if (n == null || typeof n === "boolean") return;
+    if (Array.isArray(n)) {
+      n.forEach(visit);
+      return;
+    }
+    if (n && n.type === Fragment) {
+      visit(n.props?.children);
+      return;
+    }
+    out.push(n);
+  };
+  visit(nodes);
+  return out;
+};
+const Tabs = ({
+  children,
+  options,
+  value,
+  defaultValue,
+  onStateChange,
+  onChange,
+  onValueChange,
+  onFocus,
+  onBlur,
+  label,
+  priority,
+  tone,
+  size,
+  orientation,
+  mounting = "display",
+  noslide,
+  round,
+  disabled,
+  className,
+  style,
+  id,
+  ...rest
+}) => {
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = controlled ? value : internalValue;
+  const [mounted, setMounted] = useState(
+    () => new Set(currentValue != null ? [currentValue] : [])
+  );
+  if (currentValue != null && !mounted.has(currentValue)) {
+    setMounted((m) => m.has(currentValue) ? m : new Set(m).add(currentValue));
+  }
+  const baseId = useId();
+  const tabId = (v) => `${baseId}-tab-${v}`;
+  const panelId = (v) => `${baseId}-panel-${v}`;
+  const items = flattenChildren(children);
+  const tabs = options ? options.map((o) => ({ props: o })) : items.filter((c) => c?.type?.[TABS_KIND] === "tab");
+  const panels = items.filter((c) => c?.type?.[TABS_KIND] === "panel");
+  const panelValues = new Set(panels.map((pan) => pan.props.value));
+  const seen = /* @__PURE__ */ new Set();
+  for (const t of tabs) {
+    if (seen.has(t.props.value))
+      console.warn(`[anta] <Tabs> duplicate <Tab value=${JSON.stringify(t.props.value)}> \u2014 values must be unique.`);
+    seen.add(t.props.value);
+  }
+  const onstatechange = (e) => {
+    const { event, detail } = nativeStateChange(e);
+    if (!detail) return;
+    onStateChange?.(event, detail);
+    if (controlled) return;
+    if (event.defaultPrevented) return;
+    setInternalValue(detail.next ?? void 0);
+  };
+  const onchange = onChange || onValueChange ? (e) => {
+    onChange?.(e);
+    onValueChange?.(e, { value: e.currentTarget?.value ?? null });
+  } : void 0;
+  const vertical = orientation === "vertical";
+  const needsContainer = panels.length > 0 || vertical;
+  const strip = /* @__PURE__ */ jsx(
+    "a-tabs",
+    {
+      role: "tablist",
+      "aria-label": label,
+      "aria-orientation": vertical ? "vertical" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      state: controlled ? value : void 0,
+      "default-state": !controlled ? defaultValue : void 0,
+      priority: priority && priority !== "primary" ? priority : void 0,
+      tone: tone && tone !== "neutral" ? tone : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      orientation: vertical ? "vertical" : void 0,
+      noslide: noslide ? "" : void 0,
+      round: round ? "" : void 0,
+      disabled: disabled ? "" : void 0,
+      onstatechange,
+      onchange,
+      onfocusin: onFocus,
+      onfocusout: onBlur,
+      class: needsContainer ? void 0 : className,
+      id: needsContainer ? void 0 : id,
+      style: roundStyle(round, "--tabs-round", toneStyle(tone, "--tabs-tone-source", style)),
+      ...needsContainer ? {} : rest,
+      children: tabs.map((t) => {
+        const p = t.props;
+        const tabDisabled = disabled || p.disabled;
+        const isSelected = p.value === currentValue;
+        const hasPanel = panelValues.has(p.value);
+        return /* @__PURE__ */ jsxs(
+          "a-tab",
+          {
+            role: "tab",
+            value: p.value,
+            id: tabId(p.value),
+            tone: p.tone && p.tone !== "neutral" ? p.tone : void 0,
+            style: toneStyle(p.tone, "--tabs-tone-source", void 0),
+            "aria-controls": hasPanel ? panelId(p.value) : void 0,
+            "aria-disabled": tabDisabled ? "true" : void 0,
+            tabIndex: tabDisabled && !isSelected ? -1 : 0,
+            disabled: tabDisabled ? "" : void 0,
+            round: round || p.round ? "" : void 0,
+            children: [
+              p.icon && /* @__PURE__ */ jsx("a-icon", { shape: p.icon, "aria-hidden": "true" }),
+              wrapLabel(p.label != null ? p.label : p.children, "a-tab-label"),
+              p.iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: p.iconTrailing, "aria-hidden": "true" })
+            ]
+          },
+          p.value
+        );
+      })
+    }
+  );
+  if (!needsContainer) return strip;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: className ? `${styles.container} ${className}` : styles.container,
+      "data-orientation": vertical ? "vertical" : void 0,
+      id,
+      ...rest,
+      children: [
+        strip,
+        panels.map((pan) => {
+          const p = pan.props;
+          const active = p.value === currentValue;
+          const mode = p.mounting ?? mounting;
+          if (mode === "active" && !active) return null;
+          if (mode === "lazy" && !active && !mounted.has(p.value)) return null;
+          const hidden = !active;
+          const hideByVisibility = hidden && mode === "visibility";
+          return /* @__PURE__ */ jsx(
+            "a-tabpanel",
+            {
+              role: "tabpanel",
+              id: panelId(p.value),
+              "aria-labelledby": tabId(p.value),
+              tabIndex: active ? 0 : void 0,
+              hidden: hidden && !hideByVisibility ? true : void 0,
+              "data-hide": hideByVisibility ? "visibility" : void 0,
+              inert: hidden ? true : void 0,
+              class: p.className,
+              style: p.style,
+              children: p.children
+            },
+            p.value
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  Tabs
+};

package/dist/components/Tabs.module.css

@@ -0,0 +1 @@
+.container{display:flex;flex-direction:column;gap:12px;min-width:0}.container[data-orientation=vertical]{flex-direction:row;align-items:flex-start;gap:16px}.container[data-orientation=vertical]>a-tabpanel{flex:1 1 auto;min-width:0}