@antadesign/anta 0.3.1 → 0.3.3

package/dist/components/MenuItem.js

@@ -1,25 +1,42 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { toneStyle } from "../anta_helpers";
 const MenuItem = ({
   icon,
   label,
+  hint,
   kbd,
   iconTrailing,
   disabled,
+  selected,
+  selectionIndicator,
+  indeterminate,
+  indicator,
   tone,
+  toneSelected,
   submenu,
   value,
   onSelect,
   className,
+  style,
   children,
   ...rest
 }) => {
+  const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check";
+  const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
+  const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
+  const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
+  const effectiveTone = selected && toneSelected || tone;
+  const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
   return /* @__PURE__ */ jsxs(
     "a-menu-item",
     {
-      role: "menuitem",
+      role,
       tabIndex: 0,
       disabled: disabled ? "" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      selected: keepTint ? "" : void 0,
+      "aria-checked": ariaChecked,
+      tone: toneAttr,
+      style: toneStyle(effectiveTone, "--menu-item-tone-source", style),
       submenu: submenu ? "" : void 0,
       "aria-haspopup": submenu ? "menu" : void 0,
       "aria-expanded": submenu ? "false" : void 0,
@@ -33,14 +50,61 @@ const MenuItem = ({
       class: className,
       ...rest,
       children: [
+        indicator != null ? (
+          // `min-height: 1lh` makes the wrapper one text line tall and centres the node
+          // in it, so a small indicator aligns with the label's first line in a hinted
+          // (top-aligned) row instead of riding at the top.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-indicator": "",
+              style: { flex: "none", display: "inline-flex", alignItems: "center", minHeight: "1lh", pointerEvents: "none" },
+              children: indicator
+            }
+          )
+        ) : selectionIndicator === "checkbox" ? /* @__PURE__ */ jsx(
+          "a-checkbox",
+          {
+            "aria-hidden": "true",
+            state: indeterminate ? "indeterminate" : selected ? "checked" : "unchecked",
+            tone: toneAttr,
+            style: toneStyle(effectiveTone, "--checkbox-tone-source")
+          }
+        ) : selectionIndicator === "radio" ? (
+          // Real boolean, not the ''/undefined presence form: `a-radio` has a
+          // `selected` *property* setter (`applyState(!!on)`), so Preact routes the
+          // prop through it — `''` would read as false and never select. A boolean
+          // drives the property correctly and clears stale state on deselect. (The
+          // checkbox above is safe: its `state` is attribute-only, no property.)
+          /* @__PURE__ */ jsx(
+            "a-radio",
+            {
+              "aria-hidden": "true",
+              selected: !!selected,
+              tone: toneAttr,
+              style: toneStyle(effectiveTone, "--radio-tone-source")
+            }
+          )
+        ) : null,
         icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
-        label != null && /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+        label != null && (hint != null ? (
+          // A hint stacks under the label in a column; the icon / kbd / trailing
+          // icon stay in the row (the item's `align-items: center` centers them
+          // against the two-line block).
+          /* @__PURE__ */ jsxs("a-menu-item-text", { children: [
+            /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+            /* @__PURE__ */ jsx("a-menu-item-hint", { children: hint })
+          ] })
+        ) : /* @__PURE__ */ jsx("a-menu-item-label", { children: label })),
+        children,
         kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
-        /* @__PURE__ */ (() => {
-          const trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
+        (() => {
+          let trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
+          if (!submenu && !iconTrailing && selectionIndicator === "check" && indicator == null)
+            trailing = selected ? "check" : "blank";
           return trailing ? /* @__PURE__ */ jsx("a-icon", { shape: trailing, "aria-hidden": "true" }) : null;
-        })(),
-        children
+        })()
       ]
     }
   );

package/dist/components/MenuSeparator.d.ts

@@ -1,14 +1,25 @@
 import type { BaseProps } from '../general_types';
 export interface MenuSeparatorProps extends BaseProps {
+    /** Optional caption. With content, the separator renders as a small muted text
+     *  row — a group / subsection name, or a utility message like `Loading…` — instead
+     *  of a line, and the wrapper flips it to an `aria-live="polite"` status region
+     *  (`role="status"`) so a changing message is announced. Empty, it's a plain divider. */
+    children?: React.ReactNode;
 }
 /**
- * MenuSeparator — a thin divider between groups of `MenuItem`s.
+ * MenuSeparator — a divider between groups of `MenuItem`s, or a small caption row.
+ *
+ * Empty, it's a thin line. Given text, it becomes a muted caption (a group name or
+ * a status message) and turns into an `aria-live="polite"` region — this is what
+ * `Select`'s `renderEmpty` uses for its "no results" / "loading" messages.
  *
  * @example
  * ```tsx
  * <MenuItem label="Edit" />
  * <MenuSeparator />
  * <MenuItem tone="critical" label="Delete" />
+ *
+ * <MenuSeparator>No results</MenuSeparator>
  * ```
  */
-export declare const MenuSeparator: ({ className, ...rest }: MenuSeparatorProps) => any;
+export declare const MenuSeparator: ({ className, children, ...rest }: MenuSeparatorProps) => any;

package/dist/components/MenuSeparator.js

@@ -1,6 +1,16 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-const MenuSeparator = ({ className, ...rest }) => {
-  return /* @__PURE__ */ jsx("a-menu-separator", { role: "separator", class: className, ...rest });
+const MenuSeparator = ({ className, children, ...rest }) => {
+  const hasContent = !!children && !(typeof children === "string" && children.trim() === "");
+  return /* @__PURE__ */ jsx(
+    "a-menu-separator",
+    {
+      role: hasContent ? "status" : "separator",
+      "aria-live": hasContent ? "polite" : void 0,
+      class: className,
+      ...rest,
+      children: hasContent ? children : null
+    }
+  );
 };
 export {
   MenuSeparator

package/dist/components/Progress.d.ts

@@ -10,6 +10,9 @@ export interface ProgressProps extends BaseProps {
      *  light/dark automatically.
      *  @defaultValue 'neutral' */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Fully-round track (`border-radius: 999px`); the fill is clipped to it. Pass a
+     *  `number` (px) or a CSS length string for a custom radius. */
+    round?: boolean | number | string;
     /** Text label displayed after the percentage. When you provide custom
      *  `children` (which replace the default label row), `label` is no longer
      *  rendered — but it still supplies the progressbar's accessible name, so
@@ -46,4 +49,4 @@ export interface ProgressProps extends BaseProps {
  * <Progress value={75} tone="info" label="Processing" />
  * ```
  */
-export declare const Progress: ({ value, max, tone, label, hint, className, style, children, ...rest }: ProgressProps) => any;
+export declare const Progress: ({ value, max, tone, round, label, hint, className, style, children, ...rest }: ProgressProps) => any;

package/dist/components/Progress.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { hasChildren, toneStyle } from "../anta_helpers";
-const Progress = ({ value, max = 100, tone, label, hint, className, style, children, ...rest }) => {
+import { hasChildren, toneStyle, roundStyle } from "../anta_helpers";
+const Progress = ({ value, max = 100, tone, round, label, hint, className, style, children, ...rest }) => {
   const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, value / max * 100))) : 0;
   const clampedValue = max > 0 ? Math.min(max, Math.max(0, value)) : 0;
   const ariaLabel = [label, `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || void 0;
@@ -10,13 +10,14 @@ const Progress = ({ value, max = 100, tone, label, hint, className, style, child
       value,
       max,
       tone: tone && tone !== "neutral" ? tone : void 0,
+      round: round ? "" : void 0,
       role: "progressbar",
       "aria-valuenow": clampedValue,
       "aria-valuemin": 0,
       "aria-valuemax": max,
       "aria-label": ariaLabel,
       class: className,
-      style: toneStyle(tone, "--progress-tone-source", style),
+      style: roundStyle(round, "--progress-round", toneStyle(tone, "--progress-tone-source", style)),
       ...rest,
       children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
         /* @__PURE__ */ jsxs("a-progress-number", { children: [

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 `toneSelected` (defaults to the group's). */
+    toneSelected?: "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,22 @@ 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. Use `toneSelected`
+     *  instead to tone only the selected option and leave the rest neutral. The option
+     *  text stays neutral — recolour it in plain CSS via the `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Like `tone`, but coloured onto the **selected option only** — every unselected
+     *  ring stays neutral grey. Applied to every option (an option's own `toneSelected`
+     *  wins). Prefer this over `tone` when a resting tinted border would read as a
+     *  validation state.
+     *  @defaultValue 'neutral' */
+    toneSelected?: "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 +117,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, toneSelected, 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,
+  toneSelected,
   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-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : 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(toneSelected, "--radio-tone-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-selected": o.toneSelected && o.toneSelected !== "neutral" ? o.toneSelected : 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.toneSelected, "--radio-tone-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/Select.d.ts

@@ -0,0 +1,255 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+/** One option in a `<Select>`. Pass a bare string as shorthand for
+ *  `{ value: s, label: s }`. Carries an index signature so you can attach
+ *  arbitrary fields (a `ranAt` date, a `status`, …) and read them back in
+ *  `renderOption`; the built-in filter still matches on `value`/`label`/`hint`. */
+export interface SelectOption {
+    /** The option's value — its identity and what `onValueChange` reports. */
+    value: string;
+    /** Visible label. Defaults to `value`. */
+    label?: string;
+    /** Secondary text under the label (the option row's `hint`). */
+    hint?: string;
+    /** Leading icon (renders after the selection indicator, if any). */
+    icon?: IconShape;
+    /** Disable just this option. */
+    disabled?: boolean;
+    /** Tone for this option's row (label, icon, hint, selected tint, and the
+     *  checkbox/radio indicator). A named tone or a custom CSS color. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Your own data — attach anything and read it in `renderOption`. */
+    [key: string]: unknown;
+}
+/** A titled group of options rendered **inline** under a heading (like `MenuGroup`).
+ *  Selection stays global — a group only organizes; its heading isn't selectable.
+ *  `disabled` cascades to every descendant. Nest groups / submenus freely. */
+export interface SelectGroup {
+    /** The section heading (non-interactive). */
+    label: string;
+    /** The grouped items — options, or further groups / submenus. */
+    options: SelectItem[];
+    /** Disable the whole group (cascades to all descendants). */
+    disabled?: boolean;
+}
+/** A titled branch whose items live behind a **flyout** (like `MenuItem submenu`).
+ *  Navigation only — the parent row opens the submenu and is never itself selectable.
+ *  While a filter query is active the tree flattens and a submenu collapses into a
+ *  group (its `label` becomes the heading). `disabled` cascades to descendants. */
+export interface SelectSubmenu {
+    /** The parent row's label — and the group heading when filtering flattens it. */
+    label: string;
+    /** Leading icon on the parent row. */
+    icon?: IconShape;
+    /** The submenu's items — options, or further groups / submenus. */
+    submenu: SelectItem[];
+    /** Disable the whole branch (cascades to all descendants). */
+    disabled?: boolean;
+}
+/** One entry in `options`: a plain option (string shorthand or `SelectOption`), an
+ *  inline `SelectGroup`, or a flyout `SelectSubmenu`. Discriminated by shape — an
+ *  `options` array is a group, a `submenu` array is a submenu, else it's an option.
+ *  (`options` / `submenu` are therefore reserved keys on an option object.) */
+export type SelectItem = string | SelectOption | SelectGroup | SelectSubmenu;
+/** Per-row snapshot passed to `renderOption` / `renderIndicator`. Everything here
+ *  is known at render time; the combobox "active" cursor is deliberately absent
+ *  (it's a live element state the DOM owns, not a render-time value). */
+export interface OptionState {
+    /** The option's value. */
+    value: string;
+    /** Whether this row is currently selected. */
+    selected: boolean;
+    /** Whether this row is disabled. */
+    disabled: boolean;
+}
+/** Snapshot passed to `renderEmpty` when the option list (after any active
+ *  filter) is empty. `query` discriminates the cause: non-empty means the filter
+ *  hid everything; empty means there were no options to begin with (where the
+ *  consumer's own external loading state, if any, decides "loading" vs "empty"). */
+export interface EmptyState {
+    /** The current filter query, trimmed ('' when there's no filter, nothing typed,
+     *  or simply no options). */
+    query: string;
+}
+/** Snapshot passed to `renderTrigger` so a custom trigger can reflect the current
+ *  selection and open state. */
+export interface TriggerState {
+    /** Whether the menu is open — use it for `aria-expanded` and a chevron. */
+    open: boolean;
+    /** The current selection: a string (single), a string array (`multiple`), or
+     *  `undefined` when nothing is chosen. */
+    value: string | string[] | undefined;
+    /** The resolved option objects for the current selection (empty when none).
+     *  `selected.length` is the multi-select count. */
+    selected: SelectOption[];
+    /** Whether the whole select is disabled. */
+    disabled: boolean;
+    /** The `icon` shape passed to `Select`, if any — hand it to your trigger
+     *  (e.g. a `Button`'s `icon`) so a custom trigger keeps the same leading glyph. */
+    icon?: IconShape;
+}
+/** Snapshot passed as the 2nd argument to `onValueChange` — describes *what*
+ *  changed, alongside the new full value in the 1st argument. A discriminated
+ *  union: a row toggle carries `value` + `option`; the "Select all" row carries
+ *  `all: true` instead. Narrow on `'all' in attrs` before reading `option`. */
+export type SelectChangeAttrs = {
+    /** The option value that changed — the chosen value (single) or the toggled
+     *  row (multiple). */
+    value: string;
+    /** The resolved option object for `value`. */
+    option: SelectOption;
+    /** Multiple only: whether the change turned selection **on** (true) or off. */
+    selected?: boolean;
+} | {
+    /** Marks the change as coming from the "Select all" row (multiple only). */
+    all: true;
+    /** Whether Select-all turned everything **on** (true) or cleared it. */
+    selected: boolean;
+};
+/** Props shared by both selection modes, intersected into `SelectProps`. Exported
+ *  (and kept as an interface intersected — not a union base via `extends`) so its
+ *  members read as `Select`'s *own* props in the generated docs, not inherited. */
+export interface SelectCommonProps extends Omit<BaseProps, 'children'> {
+    /** The options to choose from — bare strings, `SelectOption` objects, `SelectGroup`s
+     *  (inline titled sections), or `SelectSubmenu`s (flyout branches). Groups and
+     *  submenus nest and mix with plain options. Selection stays global (one `value`,
+     *  leaf options only); a filter query flattens the tree into grouped results. */
+    options: SelectItem[];
+    /** The per-row mark for **single**-select: `'none'` (a tint-only highlight),
+     *  `'check'` (a trailing checkmark on the selected row, keeping the tint — the
+     *  canonical Select look), or `'radio'` (a leading radio on every row).
+     *  Multi-select always uses checkboxes.
+     *  @defaultValue none */
+    indicator?: 'none' | 'check' | 'radio';
+    /** Text shown when nothing is selected. */
+    placeholder?: string;
+    /** Leading icon shown at the left of the field (the default trigger's `Input`
+     *  `leading` slot). With a custom `renderTrigger`, it's passed through as
+     *  `state.icon` instead — the consumer places it. */
+    icon?: IconShape;
+    /** Field label, above the trigger (Input's `label`). */
+    label?: string;
+    /** Helper text under the field (Input's `hint`). */
+    hint?: string;
+    /** Field size.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Validation/feedback tone for the field (Input's `status`).
+     *  @defaultValue neutral */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Glyph shown before the `hint` when `status` is set (Input's `statusIcon`).
+     *  Each status has a default; pass a shape to override, or `false` to drop it. */
+    statusIcon?: IconShape | (string & {}) | false;
+    /** Round the field corners — `true` for fully round, or a number / CSS length. */
+    round?: boolean | number | string;
+    /** Disable the whole select. */
+    disabled?: boolean;
+    /** Tone applied to the **selected** row(s) — the whole row takes this tone
+     *  (label, icon, indicator, and the background tint), like passing `tone` to just
+     *  the chosen option. A named tone or a custom CSS color. Most visible with the
+     *  tint-based marks (`indicator` `'none'` / `'check'`); with `'radio'` /
+     *  `'checkbox'` it tones the label + indicator (those modes have no row tint). */
+    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Add a search field at the top of the menu that filters the options as you
+     *  type. `true` uses the built-in matcher — a case-insensitive substring of the
+     *  option's **value / label / hint**. Pass a **function** `(option, query) =>
+     *  boolean` for custom matching (called per option; return `true` to keep it). */
+    filter?: boolean | ((option: SelectOption, query: string) => boolean);
+    /** `multiple` only: add a "Select all" row at the top that toggles every enabled
+     *  option (the currently-visible ones when a `filter` query is active); its box
+     *  shows the mixed state when only some are selected. */
+    selectAll?: boolean;
+    /** Label for the `selectAll` row.
+     *  @defaultValue Select all */
+    selectAllLabel?: string;
+    /** Render the **content** of each option row yourself, replacing the built-in
+     *  `label`/`hint`/`icon` layout. Select still supplies the row box, click, ARIA,
+     *  and the selection indicator — you return only what goes *inside*. Read extra
+     *  fields off the option (see `SelectOption`'s index signature) plus an
+     *  `OptionState` (`value`/`selected`/`disabled`). Filtering still works (it
+     *  matches the option's `value`/`label`/`hint`), but match-highlighting is
+     *  skipped — your content owns its own display. */
+    renderOption?: (option: SelectOption, state: OptionState) => React.ReactNode;
+    /** Replace each row's selection **mark** with your own node, drawn at the
+     *  leading edge. The row stays the control (`role` + `aria-checked` from
+     *  `indicator` / `selection`); only the drawn mark changes, so pair it with an
+     *  `indicator` (`'check'` / `'radio'`) or `selection="multiple"` for the
+     *  semantics. Composes with `renderOption`. */
+    renderIndicator?: (state: OptionState) => React.ReactNode;
+    /** Render your own trigger in place of the default field. Receives a
+     *  `TriggerState` (`open` / `value` / `selected` / `disabled` / `icon`) to drive
+     *  its look. **Return exactly one focusable element** (an Anta `Button`, say) —
+     *  the menu anchors to it (its own previous DOM sibling) and opens it on click,
+     *  so a fragment, multiple siblings, or a non-focusable wrapper will misanchor
+     *  (the menu warns in the console if the trigger has no focusable element). Give
+     *  the element `aria-haspopup="menu"` plus `aria-expanded={state.open}`. The field
+     *  props (`label`, `hint`, `size`, `status`, `placeholder`, `round`) don't apply. */
+    renderTrigger?: (state: TriggerState) => React.ReactNode;
+    /** Render content in the menu body when the (filtered) option list is empty —
+     *  a "no results" message, a loading indicator (gated on your own external
+     *  loading state), or a "create from the query" row. Receives an `EmptyState`
+     *  (`query`, trimmed). There is no built-in empty message: when omitted, an empty
+     *  list renders nothing. Whatever you return goes where the option rows would —
+     *  a plain node is inert; return a `MenuItem` (e.g. a "Create" row) to make it
+     *  focusable and selectable. */
+    renderEmpty?: (state: EmptyState) => React.ReactNode;
+}
+/**
+ * `<Select>` props. `selection` discriminates the value shape: single mode
+ * (`value: string`) or `multiple` (`value: string[]`).
+ */
+export type SelectProps = SelectCommonProps & ({
+    /** Selection mode. `'single'` (the default) keeps `value` a string and
+     *  closes the menu on pick. Switch to `'multiple'` for checkboxes + an
+     *  array value.
+     *  @defaultValue single */
+    selection?: 'single';
+    /** Controlled value. When provided, the consumer owns selection: the field
+     *  follows this prop and a pick only *requests* a change via `onValueChange`
+     *  (reject by not updating). Leave undefined for uncontrolled. */
+    value?: string;
+    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    defaultValue?: string;
+    /** Fires after the selection changes, with the new value and a
+     *  `{ value, option }` snapshot. Select has no discrete element state, so
+     *  there is no cancelable `onStateChange` (see the Input event-model note). */
+    onValueChange?: (value: string, attrs: SelectChangeAttrs) => void;
+} | {
+    /** Multi-select: checkboxes on every row, the menu stays open while
+     *  toggling, the field shows an "N selected" count, and `value` is an array. */
+    selection: 'multiple';
+    /** Controlled values (see the single-select `value` note). */
+    value?: string[];
+    /** Initial values for the uncontrolled case. */
+    defaultValue?: string[];
+    /** Fires after any toggle, with the new value array and a `{ value, option,
+     *  selected }` snapshot of the row that changed (or `{ all: true }` for the
+     *  Select-all row). */
+    onValueChange?: (value: string[], attrs: SelectChangeAttrs) => void;
+});
+/**
+ * `<Select>` — a single- or multi-select dropdown, composed from `<Input>` (a
+ * read-only trigger) and `<Menu>` (the options). `selection` sets behaviour:
+ * `'single'` (default; `value` is a string, menu closes on pick) or `'multiple'`
+ * (checkboxes, `value` is a string array, menu stays open while toggling, the
+ * field shows an "N selected" count). For single-select, `indicator` picks the
+ * per-row mark: `'none'` (tint only, default), `'check'` (trailing checkmark), or
+ * `'radio'` (leading radio).
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`). There
+ * is no `a-select` element — this wrapper is the coordinator; for a non-React
+ * equivalent, hand-compose the same pieces (see the docs).
+ *
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   label="Field"
+ *   options={['output_text', 'stream', 'container']}
+ *   defaultValue="stream"
+ *   onValueChange={(v) => console.log(v)}
+ * />
+ * ```
+ */
+export declare const Select: (props: SelectProps) => any;