@antadesign/anta 0.3.4 → 0.3.5

package/dist/components/Select.js

@@ -44,6 +44,7 @@ const Select = (props) => {
     onValueChange,
     placeholder,
     icon,
+    leading,
     label,
     hint,
     size,
@@ -55,6 +56,8 @@ const Select = (props) => {
     filter,
     selectAll,
     selectAllLabel = "Select all",
+    clearable,
+    clearLabel = "Clear",
     renderOption,
     renderIndicator,
     renderTrigger,
@@ -158,6 +161,11 @@ const Select = (props) => {
     if (!controlled) setInternal(next);
     emit?.(next, { all: true, selected: !allSelected });
   };
+  const clear = () => {
+    const next = multiple ? [] : void 0;
+    if (!controlled) setInternal(next);
+    emit?.(next, { all: true, selected: false });
+  };
   const renderOptionRow = (o, disabled2) => {
     const optState = { value: o.value, selected: isSelected(o.value), disabled: disabled2 };
     const custom = renderOption?.(o, optState);
@@ -256,7 +264,7 @@ const Select = (props) => {
         readOnly: true,
         dimActions: true,
         disabled,
-        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        leading: leading ?? (icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0),
         size,
         status,
         statusIcon,
@@ -329,7 +337,9 @@ const Select = (props) => {
             ),
             /* @__PURE__ */ jsx(MenuSeparator, {})
           ] }),
-          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false)
+          visibleLeaves.length === 0 ? renderEmpty?.({ query: q }) : flattening ? renderFlat() : renderTree(options, false),
+          clearable && selectedValues.length > 0 && // Pinned in the footer so it never scrolls away in a long / filtered list.
+          /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(MenuItem, { icon: "x", label: clearLabel, "data-menu-open": "", onSelect: clear }) })
         ]
       }
     )

package/dist/components/Select.module.css

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

package/dist/components/SelectFaceted.d.ts

@@ -0,0 +1,184 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { SelectItem, SelectOption } from './Select';
+interface FacetBase {
+    /** The facet's namespace — the key its value is stored under in the value
+     *  record, and what `onValueChange`'s `attrs.facet` reports. Unique across
+     *  `facets`. */
+    key: string;
+    /** The facet's row label in the menu. */
+    label: string;
+    /** Leading icon on the facet's row. */
+    icon?: IconShape;
+}
+/** A per-facet option-list filter (like `Select`'s `filter`): `true` uses the
+ *  built-in case-insensitive substring match on an option's value / label /
+ *  hint; a function `(option, query) => boolean` does custom matching. */
+export type FacetFilter = boolean | ((option: SelectOption, query: string) => boolean);
+/** Pick **one** option. Value: the chosen option's `value` string (or
+ *  `undefined` when cleared). Re-picking the selected option clears it. Options
+ *  are `Select`'s `SelectItem`s — bare strings or `SelectOption`s carrying the
+ *  same fields (`value`, `label`, `hint`, `icon`, `tone`, `disabled`). */
+export interface SelectFacetSingle extends FacetBase {
+    kind: 'single';
+    /** The options — bare strings or `SelectOption`s (groups / submenus are
+     *  flattened to their leaves). */
+    options: SelectItem[];
+    /** Add a search field atop this facet's flyout that filters its options. */
+    filter?: FacetFilter;
+}
+/** Pick **any number** of options. Value: an array of the chosen `value`
+ *  strings (empty array clears the facet). Options are the same `SelectItem`s
+ *  as `single`. */
+export interface SelectFacetMultiple extends FacetBase {
+    kind: 'multiple';
+    /** The options — bare strings or `SelectOption`s (groups / submenus flattened). */
+    options: SelectItem[];
+    /** Add a search field atop this facet's flyout that filters its options. */
+    filter?: FacetFilter;
+    /** Add a "Select all" row that toggles every option. */
+    selectAll?: boolean;
+    /** Label for the `selectAll` row.
+     *  @defaultValue Select all */
+    selectAllLabel?: string;
+}
+/** Free-form substring. Value: the typed string (or `undefined` when empty).
+ *  Applies on Enter or blur — not on every keystroke. */
+export interface SelectFacetText extends FacetBase {
+    kind: 'text';
+    /** Placeholder for the text field. */
+    placeholder?: string;
+}
+/** Context handed to a `custom` facet's `render`. */
+export interface SelectFacetCustomContext<V> {
+    /** The facet's current value (`undefined` when unset). */
+    value: V | undefined;
+    /** Apply a new value for this facet — pass `undefined` to clear it. */
+    onChange: (next: V | undefined) => void;
+    /** Close the whole filter menu (e.g. after applying from a custom editor). */
+    close: () => void;
+}
+/** Bring your own editor and value type — the escape hatch for anything the
+ *  built-in kinds don't cover, including object-shaped values (a date range, a
+ *  numeric comparator, …). */
+export interface SelectFacetCustom<V = unknown> extends FacetBase {
+    kind: 'custom';
+    /** Render the facet's editor inside its flyout. The returned node stays
+     *  mounted while the menu is open. */
+    render: (ctx: SelectFacetCustomContext<V>) => React.ReactNode;
+    /** Reduce an active value to a short summary shown on the facet's row (a
+     *  string or any node). Called only when the value is set. */
+    summary: (value: V) => React.ReactNode;
+}
+/** One facet (dimension) of the filter, discriminated by `kind`. */
+export type SelectFacet = SelectFacetSingle | SelectFacetMultiple | SelectFacetText | SelectFacetCustom;
+/** The filter value: a facet key → that facet's value. Per kind the value is a
+ *  `string` (single / text), a `string[]` (multiple), or your own `V` (custom).
+ *  A cleared facet is absent from the record (not a falsy entry). */
+export type SelectFacetedValue = Record<string, unknown>;
+/** Second argument to `onValueChange` — what changed. A single-facet edit
+ *  carries `facet` / `kind` / the facet's new `value`; the "Clear all" row
+ *  carries `all: true`. Narrow on `'all' in attrs`. */
+export type SelectFacetedChangeAttrs = {
+    /** The facet key that changed. */
+    facet: string;
+    /** That facet's kind. */
+    kind: SelectFacet['kind'];
+    /** The facet's new value (`undefined` when the facet was cleared). */
+    value: unknown;
+} | {
+    /** Marks the change as the "Clear all" row emptying every facet. */
+    all: true;
+};
+/** Snapshot passed to `renderTrigger` so a custom trigger can reflect the
+ *  current filter and open state. */
+export interface SelectFacetedTriggerState {
+    /** Whether the menu is open — use it for `aria-expanded` and a chevron. */
+    open: boolean;
+    /** The whole current value record. */
+    value: SelectFacetedValue;
+    /** Number of **active facets** (each facet with a value counts once,
+     *  regardless of how many options it holds) — the default badge count. */
+    count: number;
+    /** Whether the whole control is disabled. */
+    disabled: boolean;
+}
+export interface SelectFacetedProps extends Omit<BaseProps, 'children'> {
+    /** The facets (dimensions) to filter across, each with its own editor kind. */
+    facets: SelectFacet[];
+    /** Controlled value — the facet-keyed record. When provided, the consumer
+     *  owns state: a pick only *requests* a change via `onValueChange` (reject by
+     *  not updating). Leave undefined for uncontrolled. */
+    value?: SelectFacetedValue;
+    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    defaultValue?: SelectFacetedValue;
+    /** Fires after any facet changes, with the new full value record and an
+     *  attrs snapshot of what changed. */
+    onValueChange?: (value: SelectFacetedValue, attrs: SelectFacetedChangeAttrs) => void;
+    /** Default trigger's button label.
+     *  @defaultValue Filter */
+    label?: string;
+    /** Default trigger's leading icon.
+     *  @defaultValue filter */
+    icon?: IconShape;
+    /** Default trigger's button size.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Default trigger's button priority.
+     *  @defaultValue secondary */
+    priority?: 'primary' | 'secondary';
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Add a single search field to the top of the root menu that flattens every
+     *  `single` / `multiple` facet's options into one list and searches across them
+     *  — typing "alice" surfaces it under both an Assignee and an Owner facet, each
+     *  selectable in place. `text` / `custom` facets are reachable when the search is
+     *  empty. Matching uses each facet's `filter` function if it has one, else the
+     *  built-in substring match. */
+    searchable?: boolean;
+    /** Placeholder for the global search field.
+     *  @defaultValue Filter… */
+    searchPlaceholder?: string;
+    /** Show the per-facet "Clear" row and the "Clear all" row.
+     *  @defaultValue true */
+    clearable?: boolean;
+    /** Label for the "Clear all" row.
+     *  @defaultValue Clear all */
+    clearAllLabel?: string;
+    /** Render your own trigger in place of the default `Button`. Receives a
+     *  `SelectFacetedTriggerState`; **return exactly one focusable element** (the
+     *  menu anchors to it as its previous sibling and opens it on click). Give it
+     *  `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The custom trigger
+     *  owns its own styling — `className` / `style` / other props apply to the
+     *  *default* trigger only, so put your own on the element you return. */
+    renderTrigger?: (state: SelectFacetedTriggerState) => React.ReactNode;
+}
+/**
+ * `<SelectFaceted>` — a faceted filter: one trigger opens a menu of facets
+ * (dimensions), each a submenu flyout with its own editor. Facet kinds:
+ * `'single'` (pick one), `'multiple'` (pick many), `'text'` (free-form
+ * substring, applied on Enter / blur), and `'custom'` (bring your own editor +
+ * value, including object-shaped values). The value is a
+ * `Record<facetKey, value>`, so the same option value under two facets stays
+ * distinct.
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * There is no `a-select-faceted` element — this wrapper is the coordinator.
+ *
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @example
+ * ```tsx
+ * <SelectFaceted
+ *   facets={[
+ *     { key: 'assignee', label: 'Assignee', kind: 'multiple', options: people },
+ *     { key: 'owner',    label: 'Owner',    kind: 'single',   options: people },
+ *     { key: 'title',    label: 'Title',    kind: 'text' },
+ *   ]}
+ *   value={filters}
+ *   onValueChange={setFilters}
+ * />
+ * ```
+ */
+export declare const SelectFaceted: (props: SelectFacetedProps) => any;
+export {};

package/dist/components/SelectFaceted.js

@@ -0,0 +1,331 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState, useMemo } from "../jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+import { Button } from "./Button";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { MenuGroup } from "./MenuGroup";
+import { MenuSeparator } from "./MenuSeparator";
+import { Tag } from "./Tag";
+import { Input } from "./Input";
+import styles from "./SelectFaceted.module.css";
+const normalizeOpt = (o) => typeof o === "string" ? { value: o, label: o } : o;
+const leavesOf = (items) => {
+  const out = [];
+  for (const it of items) {
+    if (typeof it !== "string" && Array.isArray(it.submenu))
+      out.push(...leavesOf(it.submenu));
+    else if (typeof it !== "string" && Array.isArray(it.options))
+      out.push(...leavesOf(it.options));
+    else out.push(normalizeOpt(it));
+  }
+  return out;
+};
+const isEmpty = (v) => v == null || v === "" || Array.isArray(v) && v.length === 0;
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const defaultMatch = (o, query) => {
+  const q = query.trim();
+  if (!q) return true;
+  const re = new RegExp(q.split(/\s+/).map(escapeRe).join("\\s+"), "i");
+  return [o.value, o.label, o.hint].some((v) => typeof v === "string" && re.test(v));
+};
+const SelectFaceted = (props) => {
+  const {
+    facets,
+    value,
+    defaultValue,
+    onValueChange,
+    label = "Filter",
+    icon = "filter",
+    size,
+    priority = "secondary",
+    disabled,
+    searchable,
+    searchPlaceholder = "Filter\u2026",
+    clearable = true,
+    clearAllLabel = "Clear all",
+    renderTrigger,
+    className,
+    style,
+    ...rest
+  } = props;
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? {});
+  const current = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [drafts, setDrafts] = useState({});
+  const [seenText, setSeenText] = useState({});
+  {
+    let nextSeen = null;
+    let nextDrafts = drafts;
+    for (const f of facets) {
+      if (f.kind !== "text") continue;
+      if (seenText[f.key] !== current[f.key]) {
+        nextSeen = { ...nextSeen ?? seenText, [f.key]: current[f.key] };
+        nextDrafts = { ...nextDrafts, [f.key]: current[f.key] ?? "" };
+      }
+    }
+    if (nextSeen) {
+      setSeenText(nextSeen);
+      setDrafts(nextDrafts);
+    }
+  }
+  const [queries, setQueries] = useState({});
+  const [rootQuery, setRootQuery] = useState("");
+  const [activeIds, setActiveIds] = useState({});
+  const onActive = (key) => (e) => {
+    const id = nativeStateChange(e).detail?.id ?? null;
+    setActiveIds((s) => s[key] === id ? s : { ...s, [key]: id });
+  };
+  const activeCount = facets.reduce((n, f) => n + (isEmpty(current[f.key]) ? 0 : 1), 0);
+  const leavesByKey = useMemo(
+    () => new Map(
+      facets.map((f) => [
+        f.key,
+        f.kind === "single" || f.kind === "multiple" ? leavesOf(f.options) : []
+      ])
+    ),
+    [facets]
+  );
+  const commit = (next, attrs) => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next, attrs);
+  };
+  const setFacet = (facet, nextValue) => {
+    const cleared = isEmpty(nextValue);
+    const next = { ...current };
+    if (cleared) delete next[facet.key];
+    else next[facet.key] = nextValue;
+    commit(next, { facet: facet.key, kind: facet.kind, value: cleared ? void 0 : nextValue });
+  };
+  const clearAll = () => commit({}, { all: true });
+  const visibleLeavesOf = (facet) => {
+    const leaves = leavesByKey.get(facet.key) ?? [];
+    if (!facet.filter) return leaves;
+    const q = queries[facet.key] ?? "";
+    const match = typeof facet.filter === "function" ? facet.filter : defaultMatch;
+    return leaves.filter((o) => match(o, q));
+  };
+  const filterHeader = (facet) => facet.filter ? /* @__PURE__ */ jsx("div", { slot: "header", "data-menu-open": "", style: { padding: "4px" }, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-menu-search": "",
+      size: "small",
+      value: queries[facet.key] ?? "",
+      placeholder: "Filter\u2026",
+      "aria-label": `Filter ${facet.label}`,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeIds[facet.key] ?? void 0,
+      onInput: (e) => setQueries((s) => ({ ...s, [facet.key]: e.currentTarget.value }))
+    }
+  ) }) : null;
+  const optionRow = (facet, opt, keyPrefix = "") => {
+    const shared = {
+      icon: opt.icon,
+      label: opt.label ?? opt.value,
+      hint: opt.hint,
+      tone: opt.tone,
+      disabled: opt.disabled,
+      "data-menu-open": ""
+    };
+    if (facet.kind === "single") {
+      const cur = current[facet.key];
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          ...shared,
+          selectionIndicator: "check",
+          selected: cur === opt.value,
+          onSelect: () => setFacet(facet, cur === opt.value ? void 0 : opt.value)
+        },
+        `${keyPrefix}${opt.value}`
+      );
+    }
+    const arr = current[facet.key] ?? [];
+    return /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        ...shared,
+        selectionIndicator: "checkbox",
+        selected: arr.includes(opt.value),
+        onSelect: () => setFacet(facet, arr.includes(opt.value) ? arr.filter((v) => v !== opt.value) : [...arr, opt.value])
+      },
+      `${keyPrefix}${opt.value}`
+    );
+  };
+  const renderSingle = (facet) => visibleLeavesOf(facet).map((opt) => optionRow(facet, opt));
+  const renderMultiple = (facet) => {
+    const arr = current[facet.key] ?? [];
+    const leaves = visibleLeavesOf(facet);
+    const enabled = leaves.filter((o) => !o.disabled).map((o) => o.value);
+    const allOn = enabled.length > 0 && enabled.every((v) => arr.includes(v));
+    const someOn = enabled.some((v) => arr.includes(v));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      facet.selectAll && leaves.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            selectionIndicator: "checkbox",
+            selected: allOn,
+            indeterminate: someOn && !allOn,
+            label: facet.selectAllLabel ?? "Select all",
+            "data-menu-open": "",
+            onSelect: () => setFacet(
+              facet,
+              // Toggle only the visible set, preserving picks hidden by the filter.
+              allOn ? arr.filter((v) => !enabled.includes(v)) : [.../* @__PURE__ */ new Set([...arr, ...enabled])]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(MenuSeparator, {})
+      ] }),
+      leaves.map((opt) => optionRow(facet, opt))
+    ] });
+  };
+  const renderFlatResults = () => {
+    const groups = facets.filter((f) => f.kind === "single" || f.kind === "multiple").map((facet) => {
+      const match = typeof facet.filter === "function" ? facet.filter : defaultMatch;
+      return { facet, matched: (leavesByKey.get(facet.key) ?? []).filter((o) => match(o, rootQuery)) };
+    }).filter((g) => g.matched.length > 0);
+    return groups.map(({ facet, matched }) => /* @__PURE__ */ jsx(MenuGroup, { label: facet.label, children: matched.map((opt) => optionRow(facet, opt, `${facet.key}:`)) }, facet.key));
+  };
+  const renderText = (facet) => {
+    const applied = current[facet.key] ?? "";
+    const draft = drafts[facet.key] ?? applied;
+    const apply = () => {
+      const next = draft.trim() || void 0;
+      if (next !== (applied || void 0)) setFacet(facet, next);
+    };
+    return (
+      // `data-menu-open` keeps the menu open through typing; the value commits on
+      // Enter / blur, not per keystroke.
+      /* @__PURE__ */ jsx("div", { "data-menu-open": "", style: { padding: "4px" }, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "small",
+          value: draft,
+          placeholder: facet.placeholder,
+          "aria-label": facet.label,
+          onInput: (e) => setDrafts((d) => ({ ...d, [facet.key]: e.currentTarget.value })),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              apply();
+            }
+          },
+          onBlur: apply
+        }
+      ) })
+    );
+  };
+  const renderCustom = (facet) => /* @__PURE__ */ jsx("div", { "data-menu-open": "", children: facet.render({
+    value: current[facet.key],
+    onChange: (next) => setFacet(facet, next),
+    close: () => setOpen(false)
+  }) });
+  const renderEditor = (facet) => {
+    const isOptions = facet.kind === "single" || facet.kind === "multiple";
+    const body = facet.kind === "single" ? renderSingle(facet) : facet.kind === "multiple" ? renderMultiple(facet) : facet.kind === "text" ? renderText(facet) : renderCustom(facet);
+    const hasValue = !isEmpty(current[facet.key]);
+    return /* @__PURE__ */ jsxs(Menu, { onactivedescendant: isOptions && facet.filter ? onActive(facet.key) : void 0, children: [
+      isOptions && filterHeader(facet),
+      body,
+      clearable && hasValue && /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          icon: "x",
+          label: "Clear",
+          "data-menu-open": "",
+          onSelect: () => setFacet(facet, void 0)
+        }
+      ) })
+    ] });
+  };
+  const summaryOf = (facet) => {
+    const v = current[facet.key];
+    if (isEmpty(v)) return null;
+    switch (facet.kind) {
+      case "single": {
+        const opt = (leavesByKey.get(facet.key) ?? []).find((o) => o.value === v);
+        return opt?.label ?? String(v);
+      }
+      case "multiple":
+        return String(v.length);
+      case "text":
+        return String(v);
+      case "custom":
+        return facet.summary(v);
+    }
+  };
+  const triggerState = {
+    open,
+    value: current,
+    count: activeCount,
+    disabled: !!disabled
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderTrigger ? renderTrigger(triggerState) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon,
+        label,
+        priority,
+        size,
+        disabled,
+        "aria-haspopup": "menu",
+        "aria-expanded": open ? "true" : "false",
+        className,
+        style,
+        ...rest,
+        children: activeCount > 0 && /* @__PURE__ */ jsx(Tag, { size: "small", priority: "primary", tone: "brand", children: String(activeCount) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        open,
+        onStateChange: (_e, { next }) => {
+          setOpen(next);
+          if (!next) setRootQuery("");
+        },
+        onactivedescendant: searchable ? onActive("__root__") : void 0,
+        children: [
+          searchable && // Pinned global search: flattens all options facets while a query is active.
+          /* @__PURE__ */ jsx("div", { slot: "header", "data-menu-open": "", className: styles.search, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              "data-menu-search": "",
+              size: "small",
+              value: rootQuery,
+              placeholder: searchPlaceholder,
+              "aria-label": "Filter all facets",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": activeIds["__root__"] ?? void 0,
+              onInput: (e) => setRootQuery(e.currentTarget.value)
+            }
+          ) }),
+          searchable && rootQuery.trim() ? renderFlatResults() : facets.map((facet) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, icon: facet.icon, label: facet.label, children: [
+            (() => {
+              const s = summaryOf(facet);
+              return s != null ? /* @__PURE__ */ jsx(Tag, { size: "small", tone: "brand", children: s }) : null;
+            })(),
+            renderEditor(facet)
+          ] }, facet.key)),
+          clearable && /* @__PURE__ */ jsx("div", { slot: "footer", className: styles.footer, children: /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: "filter-x",
+              label: clearAllLabel,
+              disabled: activeCount === 0,
+              "data-menu-open": "",
+              onSelect: clearAll
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  SelectFaceted
+};

package/dist/components/SelectFaceted.module.css

@@ -0,0 +1 @@
+.search{padding:var(--menu-padding, 4px)}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}

package/dist/components/Tabs.d.ts

@@ -41,6 +41,12 @@ export interface TabOption {
     /** 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;
+    /** Tooltip for this tab — a string or any node — shown **only when the tab's label
+     *  is truncated** (tabs ellipsize when the strip overflows), so a clipped tab reveals
+     *  its full text on hover while a tab that fits shows nothing. Rendered as a
+     *  `truncatedOnly` `<Tooltip>` anchored to the tab. For an always-visible tooltip or
+     *  other custom trigger content, use `children` with your own `<Tooltip>` instead. */
+    tooltip?: React.ReactNode;
 }
 /** Public props for `<Tabs>`. */
 export interface TabsProps extends Omit<BaseProps, "onChange"> {

package/dist/components/Tabs.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
 import { useState } from "../jsx-runtime";
 import { nativeStateChange, toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
+import { Tooltip } from "./Tooltip";
 const Tabs = ({
   children,
   options,
@@ -88,7 +89,8 @@ const Tabs = ({
             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.iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: p.iconTrailing, "aria-hidden": "true" }),
+              p.tooltip != null && p.tooltip !== "" ? /* @__PURE__ */ jsx(Tooltip, { truncatedOnly: true, children: p.tooltip }) : null
             ]
           },
           p.value