import * as React from "react"; /** Counter pill fields on {@link SegmentedOption} — same vocabulary as `Button` / `Toggle`. */ type SegmentedCountFields = { /** * Optional count rendered as a borderless pill after the label — do not nest `Badge` in `label` * for this (gh#602): `Badge` `secondary` is `--muted`, which matches the Segmented track. */ count?: number | string; /** Cap for numeric `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). */ overflowCount?: number; /** Render the pill when numeric `count` is 0. Default `true`. */ showZero?: boolean; /** * Localized description of what the count means, folded into the accessible name * (`全件, 54 件` when supplied). */ countLabel?: string; }; /** One choice in a {@link Segmented}. */ export type SegmentedOption = SegmentedCountFields & { /** Wire value — what `onValueChange` reports and what a form submits. */ value: string; /** Visible label. It is also the item's accessible name, so it is required. */ label: React.ReactNode; /** Optional leading glyph, rendered `aria-hidden` beside the label. */ icon?: React.ReactNode; /** Disable this one choice; the rest of the group stays operable. */ disabled?: boolean; }; export type SegmentedProp = { /** The closed set of choices, in reading order. */ options: readonly SegmentedOption[]; /** Controlled selection. */ value?: string; /** Uncontrolled initial selection. */ defaultValue?: string; onValueChange?: (value: string) => void; /** * antd `block` — stretch the bar to its container and share the width EQUALLY between the * choices, so the selected pill does not resize as the label changes length. */ block?: boolean; /** antd `vertical` — stack the choices in a column. Arrow keys follow the axis. */ vertical?: boolean; /** * Control height tier: `md` (default), `xs`, `sm` or `lg` — the same `--control-height-*` tier * every other control reads. `xs` is the fourth step (gh#719, the one Toggle/ToggleGroup took in * gh#716): a 24px-dense row can carry a real segmented control instead of a hand-rolled row of * Buttons. */ size?: "xs" | "sm" | "md" | "lg"; /** Disable the whole group. */ disabled?: boolean; /** Form field name — submits the selected value with the form. */ name?: string; id?: string; className?: string; /** Accessible name of the group. Required unless a visible label points at `id`. */ "aria-label"?: string; "aria-labelledby"?: string; }; export type SegmentedProps = SegmentedProp; /** * Segmented — one-of-N from a small, closed, always-visible set. The established enterprise * `Segmented` control (docs/DESIGN-AUTHORITY.md) drawn on react-aria-components' RadioGroup, * which is this repo's authority for behaviour primitives. * * WHY NOT `ToggleGroup`. A ToggleGroup is a row of PRESSED buttons: `aria-pressed`, independently * togglable, and — even at `type="single"` — deselectable, so "no theme at all" is a state the * markup permits. A segmented control is a radio group: exactly one member is always chosen, the * arrow keys move between members rather than Tab, and a screen reader must say "Light, radio * button, 1 of 3, selected" and not "Light, toggle button, pressed". WAI-ARIA APG owns that * distinction and it is not a skin. * * The primitive gives roving tabindex, arrow-key traversal (RTL-aware), the radiogroup/radio roles * and the hidden input a native form submit needs. This file adds that geometry and nothing * else — the focus mark comes from `ui-focus-ring`, the ONE source in styles/focus-ring.css. * * "RTL-aware" IS true now, and it used not to be. On Radix it was: Radix read `dir` from its own * `DirectionProvider`, this repo rendered none, and it never looked at `` — measured in * jsdom, with `document.documentElement.dir = "rtl"` ArrowLeft on the first option went to the * LAST one, i.e. straight LTR traversal under a reversed layout, so the key that moves your eye * left moved the selection right. The repair then was to hand Radix the ambient React Aria * direction explicitly. * * On `react-aria-components` that hand-off is gone, because the primitive reads the SAME * `useLocale()` itself. One source of truth, fed by `AppProvider`, nothing threaded through the * call site — and `src/__tests__/rtl-arrow-direction.test.tsx` holds it: under an `ar-AE` locale * ArrowLeft advances and ArrowRight retreats, and `` alone still does not. * `orientation` decides WHICH pair of arrows moves the focus; the locale decides which END of the * row each of them means. */ export declare const Segmented: React.ForwardRefExoticComponent>; export {};