sherick-ui 2.5.0 → 2.7.0

package/dist/types/dev.d.ts

@@ -17,13 +17,13 @@ declare const elevation: {
 };
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
-    readonly control: "rounded-[1rem]";
+    readonly control: "rounded-[0.75rem]";
     readonly mark: "rounded-[0.375rem]";
-    readonly row: "rounded-[0.75rem]";
-    readonly prominent: "rounded-[1.25rem]";
-    readonly surface: "rounded-[1.5rem]";
-    readonly sheet: "rounded-[1rem]";
-    readonly expressive: "rounded-[1.75rem]";
+    readonly row: "rounded-[0.5rem]";
+    readonly prominent: "rounded-[1rem]";
+    readonly surface: "rounded-[1.25rem]";
+    readonly sheet: "rounded-[0.75rem]";
+    readonly expressive: "rounded-[1.5rem]";
     readonly pill: "rounded-full";
     readonly circle: "rounded-full";
 };
@@ -33,8 +33,8 @@ declare const edgeTone: {
     readonly rule: "border-sherick-edge/[0.075]";
 };
 declare const rim: {
-    readonly field: "border-[1.5px] border-sherick-rim";
-    readonly fieldError: "border-[1.5px] border-sherick-danger";
+    readonly field: "border-[1.5px] border-transparent border-b-sherick-rim";
+    readonly fieldError: "border-[1.5px] border-transparent border-b-sherick-danger";
     readonly dashed: string;
     readonly dashedHover: "hover:after:bg-sherick-ink-muted";
     readonly dashedDragging: "data-[dragging]:after:bg-sherick-primary";
@@ -56,17 +56,17 @@ declare const state: {
     readonly text: "cursor-text";
     readonly rowHover: "hover:bg-sherick-ink/[0.05]";
     readonly field: {
-        readonly hover: "hover:bg-sherick-canvas/[0.85] hover:border-sherick-ink-muted";
-        readonly focus: "focus:bg-sherick-canvas focus:border-sherick-ink-muted";
-        readonly focusWithin: "[&&]:focus-within:bg-sherick-canvas [&&]:focus-within:border-sherick-ink-muted";
-        readonly engaged: "bg-sherick-canvas border-sherick-ink-muted";
-        readonly errorHover: "hover:bg-sherick-canvas/[0.85]";
-        readonly errorFocus: "focus:bg-sherick-canvas";
-        readonly errorEngaged: "bg-sherick-canvas";
-        readonly invalid: "data-[invalid]:border-sherick-danger";
-        readonly invalidHover: "data-[invalid]:hover:border-sherick-danger";
-        readonly invalidEngaged: "data-[invalid]:border-sherick-danger";
-        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:border-sherick-danger";
+        readonly hover: "hover:bg-sherick-surface-high/[0.82] hover:border-b-sherick-ink-muted";
+        readonly focus: "focus:bg-sherick-surface-high focus:border-b-sherick-ink-muted";
+        readonly focusWithin: "[&&]:focus-within:bg-sherick-surface-high [&&]:focus-within:border-b-sherick-ink-muted";
+        readonly engaged: "bg-sherick-surface-high border-b-sherick-ink-muted";
+        readonly errorHover: "hover:bg-sherick-danger-soft/[0.55]";
+        readonly errorFocus: "focus:bg-sherick-danger-soft/[0.55]";
+        readonly errorEngaged: "bg-sherick-danger-soft/[0.55]";
+        readonly invalid: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger";
+        readonly invalidHover: "data-[invalid]:hover:bg-sherick-danger-soft/[0.55] data-[invalid]:hover:border-b-sherick-danger";
+        readonly invalidEngaged: "data-[invalid]:bg-sherick-danger-soft/[0.55] data-[invalid]:border-b-sherick-danger";
+        readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger-soft/[0.55] [&&]:data-[invalid]:focus-within:border-b-sherick-danger";
     };
 };
 declare const stateLayerQuietComposite: string;
@@ -78,6 +78,7 @@ declare const stateLayer: {
     readonly track: string;
     readonly mark: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
+    readonly fieldPart: string;
 };
 declare const hitArea = "relative after:pointer-events-auto after:absolute after:inset-[min(0px,calc((100%-2.75rem)/2))] after:content-['']";
 declare const material: {
@@ -85,8 +86,8 @@ declare const material: {
     readonly matteQuiet: "bg-sherick-surface/[0.42] text-sherick-ink";
     readonly matte: "bg-sherick-surface/[0.78] text-sherick-ink";
     readonly matteHigh: "bg-sherick-surface-high/[0.72] text-sherick-ink";
-    readonly control: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-ink-muted";
-    readonly controlError: "bg-sherick-canvas/[0.7] text-sherick-ink placeholder:text-sherick-danger";
+    readonly control: "bg-sherick-surface-high/[0.6] text-sherick-ink placeholder:text-sherick-ink-muted";
+    readonly controlError: "bg-sherick-danger-soft/[0.55] text-sherick-ink placeholder:text-sherick-danger";
     readonly handle: "bg-sherick-ink-muted text-sherick-canvas";
     readonly acrylic: "bg-sherick-surface-float/[var(--sui-glass-fill)] bg-[image:var(--sui-glass-gradient)] text-sherick-ink backdrop-blur-[var(--sui-glass-blur)] backdrop-saturate-[var(--sui-glass-saturation)] backdrop-brightness-[var(--sui-glass-brightness)]";
     readonly acrylicDense: "bg-sherick-surface-float/[var(--sui-glass-dense-fill)] bg-[image:var(--sui-glass-gradient-dense)] text-sherick-ink backdrop-blur-[var(--sui-glass-dense-blur)] backdrop-saturate-[var(--sui-glass-dense-saturation)] backdrop-brightness-[var(--sui-glass-dense-brightness)]";
@@ -102,7 +103,7 @@ declare const type: {
     };
     readonly supporting: "text-[0.8125rem] leading-5";
     readonly caption: "text-xs leading-4";
-    readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
+    readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold tracking-[-0.011em]";
     readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
     readonly numeric: "tabular-nums";
 };
@@ -111,7 +112,7 @@ declare const density: {
     readonly normal: string;
     readonly prominent: string;
     readonly target: "min-h-11 min-w-11";
-    readonly part: "min-h-11 min-w-9";
+    readonly part: "min-h-11 min-w-8";
 };
 declare const iconSlot: {
     readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
@@ -145,6 +146,7 @@ declare const detail: {
 declare const list: {
     readonly sheet: "max-w-[var(--available-width)] max-h-[var(--available-height)] overflow-y-auto";
     readonly option: string;
+    readonly groupLabel: string;
     readonly command: string;
 };
 declare const disclosure: {
@@ -196,7 +198,9 @@ declare const tone: {
     };
 };
 declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
-declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
+declare const puck = "bg-sherick-puck";
+declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-soft has-[[data-checked]]:text-sherick-ink";
+declare const selectableRowSupporting = "group-has-[[data-checked]]:text-sherick-ink";
 declare const selectable: {
     readonly surface: string;
     readonly markSurface: string;
@@ -239,6 +243,8 @@ declare const recipeAlphas: {
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
+        readonly mark: number;
+        readonly error: number;
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
@@ -343,5 +349,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, rim, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRim, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, puck, recessedTop, recipeAlphas, rim, selectable, selectableRowSupporting, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/index.d.cts

@@ -1,9 +1,10 @@
 import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
 import * as React from 'react';
-import React__default, { ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, HTMLAttributes, ComponentPropsWithoutRef, AnchorHTMLAttributes, ComponentProps, Ref, ReactElement, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, MouseEventHandler, ComponentPropsWithRef, TextareaHTMLAttributes } from 'react';
+import React__default, { ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, HTMLAttributes, ComponentPropsWithoutRef, AnchorHTMLAttributes, ComponentProps, Ref, ClipboardEvent, ReactElement, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, MouseEventHandler, ComponentPropsWithRef, TextareaHTMLAttributes } from 'react';
 import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
 import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { CheckboxGroup as CheckboxGroup$1 } from '@base-ui/react/checkbox-group';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
@@ -12,6 +13,7 @@ import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
 import { Select as Select$1 } from '@base-ui/react/select';
 import { Field as Field$1 } from '@base-ui/react/field';
+import { Form as Form$1 } from '@base-ui/react/form';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Menu as Menu$1 } from '@base-ui/react/menu';
 import { NumberField as NumberField$1 } from '@base-ui/react/number-field';
@@ -324,6 +326,55 @@ interface CheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "v
  */
 declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
+type ChoiceAppearance = "default" | "surface";
+
+interface CheckboxGroupOption {
+    value: string;
+    label: ReactNode;
+    /** Supporting copy beneath the label, such as the domains a casino answers on. */
+    description?: ReactNode;
+    disabled?: boolean;
+}
+type CheckboxGroupChangeDetails = Parameters<NonNullable<CheckboxGroup$1.Props["onValueChange"]>>[1];
+interface CheckboxGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> {
+    options: CheckboxGroupOption[];
+    /** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */
+    appearance?: ChoiceAppearance;
+    /** The group's own label. Base names the group from it. */
+    label?: ReactNode;
+    /** Supporting copy beneath the group. */
+    description?: ReactNode;
+    /**
+     * The message shown while the group is invalid. Its presence is what makes the group invalid; omit
+     * it and the group shows what Base reports, including an error a `Form` returns for its `name`.
+     */
+    error?: ReactNode;
+    /** The ticked options' values. */
+    value?: string[];
+    defaultValue?: string[];
+    /** Base's own change callback, event details included. */
+    onValueChange?: (value: string[], eventDetails: CheckboxGroupChangeDetails) => void;
+    /** Identifies the group when a form is submitted: one entry per ticked option. */
+    name?: string;
+    /**
+     * At least one option must be ticked. It marks the label and is checked when a `Form` validates;
+     * the message is `requiredMessage`.
+     */
+    required?: boolean;
+    /** The message a required group shows when nothing is ticked. */
+    requiredMessage?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Styles the labelled group. */
+    className?: string;
+}
+/**
+ * Any number of choices out of a list — the options-API sibling of `RadioGroup`, with the same rows,
+ * the same opt-in `surface` row and the same labelled column. Base UI owns the value, the group
+ * semantics and the form participation; Sherick UI owns the rows and the marks.
+ */
+declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Omit<CheckboxGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
 /** The parts every chip has, whichever of its two forms it takes. */
 interface ChipAnatomy {
     children: ReactNode;
@@ -402,23 +453,35 @@ interface ChipGroupProps extends Omit<ToggleGroup$1.Props<string>, "multiple" |
  */
 declare const ChipGroup: React__default.ForwardRefExoticComponent<Omit<ChipGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
+interface OptionGroup<Option> {
+    /** The heading the group is filed under. The primitive names the group from it. */
+    label: string;
+    options: Option[];
+}
+
 interface ComboboxOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
+/** Options filed under one heading, such as channels under their category. */
+type ComboboxOptionGroup = OptionGroup<ComboboxOption>;
 type ComboboxRootProps = Combobox$1.Root.Props<ComboboxOption>;
 type ComboboxChangeDetails = Parameters<NonNullable<ComboboxRootProps["onValueChange"]>>[1];
-interface ComboboxProps {
-    options: ComboboxOption[];
-    /** The selected option's value, or `null` for no selection. */
-    value?: string | null;
-    defaultValue?: string | null;
+/**
+ * A change Base did not make: several entries pasted at once into a creatable combobox. It carries
+ * the paste event itself, and nothing to cancel — the entries are added in one step.
+ */
+interface ComboboxPasteDetails {
+    reason: "input-paste";
+    event: ClipboardEvent<HTMLInputElement>["nativeEvent"];
+}
+interface ComboboxCommonProps {
     /**
-     * The selected option's own `value`, so two equal options compare equal even when a caller
-     * rebuilds its options array. Base's event details are passed through unchanged.
+     * The options, in the order they read. Any of them may be filed under a heading by passing a group
+     * (`{ label, options }`) in its place; an option outside every group is listed where it stands.
      */
-    onValueChange?: (value: string | null, eventDetails: ComboboxChangeDetails) => void;
+    options: Array<ComboboxOption | ComboboxOptionGroup>;
     placeholder?: string;
     /** Shown in place of the list when the query matches no option. */
     emptyMessage?: ReactNode;
@@ -447,12 +510,48 @@ interface ComboboxProps {
     readOnly?: boolean;
     disabled?: boolean;
 }
+interface ComboboxSingleProps extends ComboboxCommonProps {
+    multiple?: false;
+    /** The selected option's value, or `null` for no selection. */
+    value?: string | null;
+    defaultValue?: string | null;
+    /**
+     * The selected option's own `value`, so two equal options compare equal even when a caller
+     * rebuilds its options array. Base's event details are passed through unchanged.
+     */
+    onValueChange?: (value: string | null, eventDetails: ComboboxChangeDetails) => void;
+    creatable?: never;
+    createLabel?: never;
+    chipsLabel?: never;
+}
+interface ComboboxMultipleProps extends ComboboxCommonProps {
+    /** Holds any number of options, each shown as a removable chip inside the field. */
+    multiple: true;
+    /** The selected options' values, in the order they were chosen. */
+    value?: string[];
+    defaultValue?: string[];
+    /**
+     * The selected options' own values. Base's event details are passed through unchanged; a
+     * multi-line paste into a creatable field reports `{ reason: "input-paste" }` instead.
+     */
+    onValueChange?: (value: string[], eventDetails: ComboboxChangeDetails | ComboboxPasteDetails) => void;
+    /**
+     * Accepts entries that are not among the options: the typed text is offered as an "Add" row, and
+     * pasting several lines adds one entry per line. A created entry's value is its own text.
+     */
+    creatable?: boolean;
+    /** The "Add" row's copy for the current query. */
+    createLabel?: (query: string) => ReactNode;
+    /** The accessible name of the chip row. */
+    chipsLabel?: string;
+}
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
 /**
- * A text field that filters a list of options and selects one of them. It is the searchable
- * sibling of `Select`: the same option shape, the same value contract and the same box, with an
- * input instead of a trigger. Base UI owns filtering, the listbox semantics, keyboard
- * interaction, the anchored popup and the hidden form input; Sherick UI owns the field, the row
- * treatment and the tone of the selected option.
+ * A text field that filters a list of options and selects one of them, or several. It is the
+ * searchable sibling of `Select`: the same option shape, the same value contract and the same box,
+ * with an input instead of a trigger. Base UI owns filtering, the listbox semantics, keyboard
+ * interaction, chip navigation and removal, the anchored popup and the hidden form inputs; Sherick UI
+ * owns the field, the row treatment, the chips and the tone of the selected option.
  *
  * Filtering is Base's and it is local — an application that needs remote results owns the
  * fetching, the debounce and the loading state around this control.
@@ -772,10 +871,16 @@ interface SelectOption {
     value: string;
     disabled?: boolean;
 }
+/** Options filed under one heading, such as channels under their category. */
+type SelectOptionGroup = OptionGroup<SelectOption>;
 type SelectRootProps = Select$1.Root.Props<string>;
 type SelectChangeDetails = Parameters<NonNullable<SelectRootProps["onValueChange"]>>[1];
 interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "defaultValue"> {
-    options: SelectOption[];
+    /**
+     * The options, in the order they read. Any of them may be filed under a heading by passing a group
+     * (`{ label, options }`) in its place; an option outside every group is listed where it stands.
+     */
+    options: Array<SelectOption | SelectOptionGroup>;
     variant?: Variant;
     value?: string | null;
     defaultValue?: string | null;
@@ -882,6 +987,32 @@ interface FileUploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "children
 }
 declare const FileUpload: React__default.ForwardRefExoticComponent<FileUploadProps & React__default.RefAttributes<HTMLInputElement>>;
 
+/** Messages keyed by each field's `name`: one message, or several. */
+type FormErrors = Record<string, string | string[]>;
+interface FormProps extends Omit<ComponentProps<typeof Form$1>, "className" | "render" | "errors" | "children" | "ref"> {
+    /**
+     * Errors returned from outside the form — typically a server's answer to a submission — keyed by
+     * each field's `name`. Each field shows its own message, the form moves focus to the first field
+     * that has one, and a field's entry clears as soon as its value changes.
+     */
+    errors?: FormErrors;
+    /** Styles the form's own column. The fields inside it style themselves. */
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A form whose fields report what is wrong where it is wrong. On submit, Base UI validates every
+ * field it holds, keeps the submission from leaving while any is invalid and moves focus to the
+ * first invalid field in document order, so a submit button at the bottom of a long form never
+ * answers with nothing. The same happens when `errors` arrive after a submission.
+ *
+ * Every Sherick field takes part through its `name`: `Input`, `Textarea`, `RadioGroup` and
+ * `CheckboxGroup` carry their own; `Select`, `Combobox`, `NumberField`, `Checkbox`, `Switch` and
+ * `Slider` take part inside a `Field` given the `name`. Base UI owns validation, the errors map and
+ * the focus move; Sherick UI owns only the column the fields stand in.
+ */
+declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<HTMLFormElement>>;
+
 type IconButtonAppearance = "tonal" | "ghost" | "acrylic";
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: Variant;
@@ -891,7 +1022,7 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     label?: ReactNode;
     description?: ReactNode;
     error?: boolean;
@@ -899,6 +1030,13 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     inputClassName?: string;
     /** Base's value-change callback, event details included. */
     onValueChange?: Input$1.Props["onValueChange"];
+    /**
+     * Text or a mark at the start of the field, such as `€` or `https://`. It is presentation only and
+     * hidden from assistive technology, so the label must carry whatever the reader needs from it.
+     */
+    prefix?: ReactNode;
+    /** Text or a mark at the end of the field, such as `tickets` or `.discord.gg`. Presentation only. */
+    suffix?: ReactNode;
 }
 declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
 
@@ -1084,7 +1222,7 @@ interface NavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare const NavItem: ({ children, icon, className, href, active, ...props }: NavItemProps) => React__default.JSX.Element;
 
-interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "type" | "size" | "ref"> {
+interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "type" | "size" | "ref" | "prefix"> {
     value?: number | null;
     defaultValue?: number;
     onValueChange?: NumberField$1.Root.Props["onValueChange"];
@@ -1093,6 +1231,23 @@ interface NumberFieldProps extends Omit<ComponentProps<"input">, "value" | "defa
     min?: number;
     max?: number;
     step?: number;
+    /**
+     * How the value is written: Base's `Intl.NumberFormatOptions`, passed through unchanged —
+     * `{ style: "currency", currency: "EUR" }`, `{ minimumFractionDigits: 2 }`, `{ style: "percent" }`.
+     */
+    format?: NumberField$1.Root.Props["format"];
+    /** The locale the value is parsed and written in. Defaults to the runtime's own. */
+    locale?: NumberField$1.Root.Props["locale"];
+    /**
+     * A unit written before the value, such as `€`. It is presentation only and hidden from assistive
+     * technology, so the field's label must name the unit as well ("Price (€)").
+     */
+    prefix?: ReactNode;
+    /**
+     * A unit written after the value, such as `×` or `tickets`. Presentation only, like `prefix`:
+     * name the unit in the label as well.
+     */
+    suffix?: ReactNode;
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
@@ -1209,15 +1364,24 @@ declare const Progress: React__default.ForwardRefExoticComponent<Omit<ProgressPr
 interface RadioGroupOption {
     value: string;
     label: ReactNode;
+    /** Supporting copy beneath the label. It describes the choice rather than naming it. */
+    description?: ReactNode;
     disabled?: boolean;
 }
 interface RadioGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> {
     options: RadioGroupOption[];
     /** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */
-    appearance?: "default" | "surface";
+    appearance?: ChoiceAppearance;
     /** The group's own label. Naming the group is the group's job, not a field's: an
      *  enclosing `Field` names one control, while every option here is its own control. */
     label?: ReactNode;
+    /** Supporting copy beneath the group. */
+    description?: ReactNode;
+    /**
+     * The message shown while the group is invalid. Its presence is what makes the group invalid; omit
+     * it and the group shows what Base reports, including an error a `Form` returns for its `name`.
+     */
+    error?: ReactNode;
     value?: string;
     defaultValue?: string;
     onValueChange?: RadioGroup$1.Props<string>["onValueChange"];
@@ -1726,5 +1890,5 @@ interface DirectionProviderProps {
 /** Declares writing direction to the interaction and positioning primitives, including portals. */
 declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
 
-export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
-export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
+export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, DateTimePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, Form, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
+export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarDateTime, CalendarLabels, CalendarProps, CardProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxPasteDetails, ComboboxProps, ComboboxSingleProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DateTimePickerLabels, DateTimePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, FormErrors, FormProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectOptionGroup, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };