@antadesign/anta 0.3.2 → 0.3.3

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

@@ -27,8 +27,8 @@ export interface RadioOption {
     disabled?: boolean;
     /** Override this one option's mark tone (defaults to the group's `tone`). */
     tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
-    /** Override this one option's text tone (defaults to the group's `toneText`). */
-    toneText?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Override this one option's `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";
 }
@@ -79,16 +79,18 @@ export interface RadioGroupProps extends Omit<BaseProps, "children" | "onChange"
      *  @defaultValue 'neutral' */
     status?: "neutral" | "brand" | "info" | "success" | "warning" | "critical";
     /** Mark tone applied to every option (an option's own `tone` wins), or any literal
-     *  CSS color for a one-off custom tone. Colours the selected-ring fill + dot and
-     *  the unselected ring border. Named tones track light/dark mode. The option text
-     *  stays neutral — use `toneText` for that.
+     *  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 & {});
-    /** Text tone applied to every option's label + hint (an option's own `toneText`
-     *  wins), independent of `tone`. A named tone or any literal CSS color. Omit to
-     *  leave the text neutral.
+    /** 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' */
-    toneText?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    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";
@@ -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, onValueChange, onFocus, onBlur, name, label, hint, status, tone, toneText, size, 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

@@ -19,7 +19,7 @@ const RadioGroup = ({
   hint,
   status,
   tone,
-  toneText,
+  toneSelected,
   size,
   disabled,
   orientation,
@@ -64,7 +64,7 @@ const RadioGroup = ({
       name,
       status: status && status !== "neutral" ? status : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-text": toneText && toneText !== "neutral" ? toneText : void 0,
+      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
       size: size && size !== "medium" ? size : void 0,
       disabled: disabled ? "" : void 0,
       orientation: orientation && orientation !== "vertical" ? orientation : void 0,
@@ -73,7 +73,7 @@ const RadioGroup = ({
       onfocusin: onFocus,
       onfocusout: onBlur,
       class: className,
-      style: toneStyle(toneText, "--radio-tone-text-source", 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-text": o.toneText && o.toneText !== "neutral" ? o.toneText : void 0,
+              "tone-selected": o.toneSelected && o.toneSelected !== "neutral" ? o.toneSelected : void 0,
               size: o.size && o.size !== "medium" ? o.size : void 0,
               disabled: o.disabled ? "" : void 0,
-              style: toneStyle(o.toneText, "--radio-tone-text-source", 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;