@mastra/playground-ui 60.1.0 → 60.2.0-alpha.1

package/dist/src/ds/components/JSONSchemaForm/json-schema-form-field-description.d.ts

@@ -1,4 +1,7 @@
-import { TextFieldBlockProps } from '../FormFieldBlocks/fields/text-field-block';
+import { InputProps } from '../Input';
 import * as React from 'react';
-export type JSONSchemaFormFieldDescriptionProps = Omit<TextFieldBlockProps, 'value' | 'onChange' | 'name'>;
-export declare function FieldDescription(props: JSONSchemaFormFieldDescriptionProps): React.JSX.Element;
+export type JSONSchemaFormFieldDescriptionProps = Omit<InputProps, 'value' | 'onChange' | 'name'> & {
+    label?: React.ReactNode;
+    labelIsHidden?: boolean;
+};
+export declare function FieldDescription({ label, labelIsHidden, className, ...props }: JSONSchemaFormFieldDescriptionProps): React.JSX.Element;

package/dist/src/ds/components/JSONSchemaForm/json-schema-form-field-name.d.ts

@@ -1,4 +1,7 @@
-import { TextFieldBlockProps } from '../FormFieldBlocks/fields/text-field-block';
+import { InputProps } from '../Input';
 import * as React from 'react';
-export type JSONSchemaFormFieldNameProps = Omit<TextFieldBlockProps, 'value' | 'onChange' | 'name'>;
-export declare function FieldName(props: JSONSchemaFormFieldNameProps): React.JSX.Element;
+export type JSONSchemaFormFieldNameProps = Omit<InputProps, 'value' | 'onChange' | 'name'> & {
+    label?: React.ReactNode;
+    labelIsHidden?: boolean;
+};
+export declare function FieldName({ label, labelIsHidden, className, ...props }: JSONSchemaFormFieldNameProps): React.JSX.Element;

package/dist/src/ds/components/JSONSchemaForm/json-schema-form-field-type.d.ts

@@ -1,4 +1,11 @@
-import { SelectFieldBlockProps } from '../FormFieldBlocks/fields/select-field-block';
+import { SelectTriggerProps } from '../Select/select';
 import * as React from 'react';
-export type JSONSchemaFormFieldTypeProps = Omit<SelectFieldBlockProps, 'value' | 'onValueChange' | 'options' | 'name'>;
-export declare function FieldType({ className, ...props }: JSONSchemaFormFieldTypeProps): React.JSX.Element;
+export type JSONSchemaFormFieldTypeProps = {
+    label?: React.ReactNode;
+    labelIsHidden?: boolean;
+    placeholder?: string;
+    size?: SelectTriggerProps['size'];
+    disabled?: boolean;
+    className?: string;
+};
+export declare function FieldType({ label, labelIsHidden, placeholder, size, disabled, className, }: JSONSchemaFormFieldTypeProps): React.JSX.Element;

package/dist/src/ds/components/Label/label.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
+/** @deprecated Use `FieldLabel` inside a `Field`. */
 declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };

package/dist/src/ds/components/ListSearch/list-search.d.ts

@@ -1,10 +1,10 @@
-import { InputProps } from '../Input';
+import { SearchInputProps } from '../SearchInput';
 export type ListSearchProps = {
     onSearch: (search: string) => void;
     label: string;
     placeholder: string;
     debounceMs?: number;
-    size?: InputProps['size'];
+    size?: SearchInputProps['size'];
     /**
      * Optional controlled value. When provided, ListSearch stays in sync with this
      * prop — useful when the parent needs to clear the input programmatically

package/dist/src/ds/components/SearchInput/index.d.ts

@@ -0,0 +1 @@
+export * from './search-input';

package/dist/src/ds/components/SearchInput/search-input.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'react';
+import { InputGroupInputProps, InputGroupProps } from '../InputGroup';
+export type SearchInputProps = Omit<InputGroupInputProps, 'value' | 'onChange' | 'type' | 'ref' | 'error'> & {
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    onClose?: () => void;
+    size?: InputGroupProps['size'];
+    className?: string;
+    ref?: Ref<HTMLInputElement>;
+};
+export declare function SearchInput({ label, value, onValueChange, onClose, size, className, ref, ...inputProps }: SearchInputProps): import("react").JSX.Element;

package/dist/src/ds/components/SearchInput/search-input.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchInput } from './search-input';
+declare const meta: Meta<typeof SearchInput>;
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Collapsible: Story;

package/dist/src/ds/components/Textarea/textarea.d.ts

@@ -5,19 +5,12 @@ declare const textareaVariants: (props?: ({
     variant?: "default" | "unstyled" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & Omit<VariantProps<typeof textareaVariants>, 'variant'> & {
+export type TextareaProps = Omit<React.ComponentProps<'textarea'>, 'size'> & Omit<VariantProps<typeof textareaVariants>, 'variant'> & {
     /** `filled` is a deprecated alias for `default`; both render the filled surface. */
     variant?: VariantProps<typeof textareaVariants>['variant'] | DeprecatedFilledVariant;
     testId?: string;
+    /** @deprecated Wrap the control in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */
     error?: boolean;
 };
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & Omit<VariantProps<(props?: ({
-    variant?: "default" | "unstyled" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "variant"> & {
-    /** `filled` is a deprecated alias for `default`; both render the filled surface. */
-    variant?: VariantProps<typeof textareaVariants>["variant"] | DeprecatedFilledVariant;
-    testId?: string;
-    error?: boolean;
-} & React.RefAttributes<HTMLTextAreaElement>>;
+declare function Textarea({ className, size, testId, variant, error, ...props }: TextareaProps): React.JSX.Element;
 export { Textarea };

package/dist/src/ds/components/ai/ask-user/ask-user.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
 import { Button } from '../../Button';
+import { FieldLabelProps } from '../../Field';
 import { Txt } from '../../Txt';
 export type AskUserSelectionMode = 'single_select' | 'multi_select';
 export type AskUserAnswer = string | string[];
@@ -20,7 +21,7 @@ export declare const AskUserContainer: ({ className, ...props }: ComponentProps<
 export declare const AskUserLabel: ({ children, className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 export declare const AskUserBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 export declare const AskUserQuestion: ({ className, ...props }: ComponentProps<typeof Txt>) => import("react").JSX.Element;
-export interface AskUserOptionRowProps extends Omit<ComponentProps<'label'>, 'children'> {
+export interface AskUserOptionRowProps extends Omit<FieldLabelProps, 'children'> {
     control: ReactNode;
     label: string;
     description?: string;

package/dist/src/ds/new/settings/index.d.ts

@@ -1,4 +1,4 @@
 export { SettingsContainer } from './settings-container';
 export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsTitle } from './settings-header';
-export { SettingsRow, type SettingsRowProps } from './settings-row';
+export { SettingsFieldsetRow, SettingsRow, type SettingsFieldsetRowProps, type SettingsRowProps } from './settings-row';
 export { SettingsLayout, type SettingsLayoutProps } from './settings-layout';

package/dist/src/ds/new/settings/settings-row.d.ts

@@ -1,7 +1,9 @@
-import { ComponentProps, ReactNode } from 'react';
-export type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {
+import { ReactNode } from 'react';
+import { FieldProps, FieldsetProps } from '../../components/Field';
+export type SettingsRowProps = Omit<FieldProps, 'children' | 'invalid' | 'orientation'> & {
     label: ReactNode;
     description?: ReactNode;
+    /** @deprecated The row's `Field` names the control it holds; drop `htmlFor` and the control's `id`. */
     htmlFor?: string;
     children?: ReactNode;
     tone?: 'default' | 'destructive';
@@ -12,6 +14,12 @@ export type SettingsRowProps = Omit<ComponentProps<'div'>, 'children'> & {
 type SettingsRowLayoutProps = SettingsRowProps & {
     layout: 'factory' | 'section';
 };
-export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, required, errorMsg, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
+export declare function SettingsRowLayout({ label, description, htmlFor, children, className, layout, tone, viewOnly, required, errorMsg, disabled, ...props }: SettingsRowLayoutProps): import("react").JSX.Element;
 export declare function SettingsRow(props: SettingsRowProps): import("react").JSX.Element;
+export type SettingsFieldsetRowProps = Omit<FieldsetProps, 'children'> & {
+    label: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
+export declare function SettingsFieldsetRow({ label, description, children, className, ...props }: SettingsFieldsetRowProps): import("react").JSX.Element;
 export {};

package/dist/src/ds/new/settings/settings-row.stories.d.ts

@@ -0,0 +1,321 @@
+import { StoryObj } from '@storybook/react-vite';
+import { SettingsRow } from './index';
+declare const meta: {
+    title: string;
+    component: typeof SettingsRow;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        label: string;
+        description: string;
+    };
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
+        title?: string | undefined | undefined;
+        ref?: import('react').Ref<HTMLDivElement> | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        style?: import('react').CSSProperties | ((state: import('@base-ui/react').FieldRootState) => React.CSSProperties | undefined) | undefined;
+        tabIndex?: number | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
+        role?: import('react').AriaRole | undefined;
+        about?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        inert?: boolean | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined | undefined;
+        part?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined | undefined;
+        onCopy?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ClipboardEvent<HTMLDivElement>>) => void) | undefined;
+        onCopyCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ClipboardEvent<HTMLDivElement>>) => void) | undefined;
+        onCut?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ClipboardEvent<HTMLDivElement>>) => void) | undefined;
+        onCutCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ClipboardEvent<HTMLDivElement>>) => void) | undefined;
+        onPaste?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ClipboardEvent<HTMLDivElement>>) => void) | undefined;
+        onPasteCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ClipboardEvent<HTMLDivElement>>) => void) | undefined;
+        onCompositionEnd?: ((event: import('@base-ui/react').BaseUIEvent<import('react').CompositionEvent<HTMLDivElement>>) => void) | undefined;
+        onCompositionEndCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').CompositionEvent<HTMLDivElement>>) => void) | undefined;
+        onCompositionStart?: ((event: import('@base-ui/react').BaseUIEvent<import('react').CompositionEvent<HTMLDivElement>>) => void) | undefined;
+        onCompositionStartCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').CompositionEvent<HTMLDivElement>>) => void) | undefined;
+        onCompositionUpdate?: ((event: import('@base-ui/react').BaseUIEvent<import('react').CompositionEvent<HTMLDivElement>>) => void) | undefined;
+        onCompositionUpdateCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').CompositionEvent<HTMLDivElement>>) => void) | undefined;
+        onFocus?: ((event: import('@base-ui/react').BaseUIEvent<import('react').FocusEvent<HTMLDivElement, Element>>) => void) | undefined;
+        onFocusCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').FocusEvent<HTMLDivElement, Element>>) => void) | undefined;
+        onBlur?: ((event: import('@base-ui/react').BaseUIEvent<import('react').FocusEvent<HTMLDivElement, Element>>) => void) | undefined;
+        onBlurCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').FocusEvent<HTMLDivElement, Element>>) => void) | undefined;
+        onChange?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ChangeEvent<HTMLDivElement, Element>>) => void) | undefined;
+        onChangeCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ChangeEvent<HTMLDivElement, Element>>) => void) | undefined;
+        onBeforeInput?: ((event: import('@base-ui/react').BaseUIEvent<import('react').InputEvent<HTMLDivElement>>) => void) | undefined;
+        onBeforeInputCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').InputEvent<HTMLDivElement>>) => void) | undefined;
+        onInput?: ((event: import('@base-ui/react').BaseUIEvent<import('react').InputEvent<HTMLDivElement>>) => void) | undefined;
+        onInputCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').InputEvent<HTMLDivElement>>) => void) | undefined;
+        onReset?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onResetCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSubmit?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SubmitEvent<HTMLDivElement>>) => void) | undefined;
+        onSubmitCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SubmitEvent<HTMLDivElement>>) => void) | undefined;
+        onInvalid?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onInvalidCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoad?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onError?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onErrorCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onKeyDown?: ((event: import('@base-ui/react').BaseUIEvent<import('react').KeyboardEvent<HTMLDivElement>>) => void) | undefined;
+        onKeyDownCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').KeyboardEvent<HTMLDivElement>>) => void) | undefined;
+        onKeyPress?: ((event: import('@base-ui/react').BaseUIEvent<import('react').KeyboardEvent<HTMLDivElement>>) => void) | undefined;
+        onKeyPressCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').KeyboardEvent<HTMLDivElement>>) => void) | undefined;
+        onKeyUp?: ((event: import('@base-ui/react').BaseUIEvent<import('react').KeyboardEvent<HTMLDivElement>>) => void) | undefined;
+        onKeyUpCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').KeyboardEvent<HTMLDivElement>>) => void) | undefined;
+        onAbort?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onAbortCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onCanPlay?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onCanPlayCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onCanPlayThrough?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onCanPlayThroughCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onDurationChange?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onDurationChangeCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onEmptied?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onEmptiedCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onEncrypted?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onEncryptedCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onEnded?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onEndedCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadedData?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadedDataCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadedMetadata?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadedMetadataCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadStart?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onLoadStartCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onPause?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onPauseCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onPlay?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onPlayCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onPlaying?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onPlayingCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onProgress?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onProgressCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onRateChange?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onRateChangeCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSeeked?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSeekedCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSeeking?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSeekingCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onStalled?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onStalledCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSuspend?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSuspendCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onTimeUpdate?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onTimeUpdateCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onVolumeChange?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onVolumeChangeCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onWaiting?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onWaitingCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onAuxClick?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onAuxClickCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onClick?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onClickCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onContextMenu?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onContextMenuCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onDoubleClick?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onDoubleClickCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onDrag?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragEnd?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragEndCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragEnter?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragEnterCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragExit?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragExitCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragLeave?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragLeaveCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragOver?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragOverCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragStart?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDragStartCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDrop?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onDropCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').DragEvent<HTMLDivElement>>) => void) | undefined;
+        onMouseDown?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseDownCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseEnter?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseLeave?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseMove?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseMoveCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseOut?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseOutCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseOver?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseOverCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseUp?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onMouseUpCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').MouseEvent<HTMLDivElement, MouseEvent>>) => void) | undefined;
+        onSelect?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onSelectCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').SyntheticEvent<HTMLDivElement, Event>>) => void) | undefined;
+        onTouchCancel?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchCancelCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchEnd?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchEndCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchMove?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchMoveCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchStart?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onTouchStartCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TouchEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerDown?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerDownCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerMove?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerMoveCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerUp?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerUpCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerCancel?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerCancelCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerEnter?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerLeave?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerOver?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerOverCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerOut?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onPointerOutCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onGotPointerCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onGotPointerCaptureCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onLostPointerCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onLostPointerCaptureCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').PointerEvent<HTMLDivElement>>) => void) | undefined;
+        onScroll?: ((event: import('@base-ui/react').BaseUIEvent<import('react').UIEvent<HTMLDivElement, UIEvent>>) => void) | undefined;
+        onScrollCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').UIEvent<HTMLDivElement, UIEvent>>) => void) | undefined;
+        onScrollEnd?: ((event: import('@base-ui/react').BaseUIEvent<import('react').UIEvent<HTMLDivElement, UIEvent>>) => void) | undefined;
+        onScrollEndCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').UIEvent<HTMLDivElement, UIEvent>>) => void) | undefined;
+        onWheel?: ((event: import('@base-ui/react').BaseUIEvent<import('react').WheelEvent<HTMLDivElement>>) => void) | undefined;
+        onWheelCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').WheelEvent<HTMLDivElement>>) => void) | undefined;
+        onAnimationStart?: ((event: import('@base-ui/react').BaseUIEvent<import('react').AnimationEvent<HTMLDivElement>>) => void) | undefined;
+        onAnimationStartCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').AnimationEvent<HTMLDivElement>>) => void) | undefined;
+        onAnimationEnd?: ((event: import('@base-ui/react').BaseUIEvent<import('react').AnimationEvent<HTMLDivElement>>) => void) | undefined;
+        onAnimationEndCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').AnimationEvent<HTMLDivElement>>) => void) | undefined;
+        onAnimationIteration?: ((event: import('@base-ui/react').BaseUIEvent<import('react').AnimationEvent<HTMLDivElement>>) => void) | undefined;
+        onAnimationIterationCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').AnimationEvent<HTMLDivElement>>) => void) | undefined;
+        onToggle?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ToggleEvent<HTMLDivElement>>) => void) | undefined;
+        onBeforeToggle?: ((event: import('@base-ui/react').BaseUIEvent<import('react').ToggleEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionCancel?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionCancelCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionEnd?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionEndCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionRun?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionRunCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionStart?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        onTransitionStartCapture?: ((event: import('@base-ui/react').BaseUIEvent<import('react').TransitionEvent<HTMLDivElement>>) => void) | undefined;
+        key?: import('react').Key | null | undefined;
+        disabled?: boolean | undefined | undefined;
+        name?: string | undefined | undefined;
+        render?: import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | import('@base-ui/react').ComponentRenderFn<import('@base-ui/react').HTMLProps, import('@base-ui/react').FieldRootState> | undefined;
+        actionsRef?: import('react').RefObject<import('@base-ui/react').FieldRootActions | null> | undefined;
+        validate?: ((value: unknown, formValues: import("@base-ui/react").Form.Values) => string | string[] | null | Promise<string | string[] | null>) | undefined | undefined;
+        validationMode?: import('@base-ui/react').FormValidationMode | undefined;
+        validationDebounceTime?: number | undefined | undefined;
+        dirty?: boolean | undefined | undefined;
+        touched?: boolean | undefined | undefined;
+        label: import('react').ReactNode;
+        description?: import('react').ReactNode;
+        htmlFor?: string | undefined;
+        children?: import('react').ReactNode;
+        tone?: "default" | "destructive" | undefined;
+        viewOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        errorMsg?: import('react').ReactNode;
+    }>) => import("react").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/** Selects and comboboxes beside the label share one width set by the row; other controls keep their own. */
+export declare const Controls: Story;
+/** A width class on the trigger overrides the row, e.g. a compact picker next to an action. */
+export declare const CompactOverride: Story;
+export declare const LongDescription: Story;
+export declare const ViewOnly: Story;
+export declare const Destructive: Story;
+export declare const Validation: Story;

package/dist/src/ds/primitives/form-element.d.ts

@@ -3,9 +3,14 @@ export declare const inputFocusBorderVisible = "focus-visible:border-border-focu
 export declare const inputFocusBorderWithin = "focus-within:border-border-focus";
 export declare const controlFocusBorderVisible = "outline-hidden focus-visible:outline-hidden focus-visible:border-border-focus";
 export declare const surfaceRimFocus = "focus-visible:outline-hidden focus-visible:[--surface-rim:var(--border-focus)]";
-export declare const fieldErrorRim = "[--field-rim:var(--destructive-indicator)] [--field-rim-focus:var(--destructive-indicator)]";
+export declare const fieldErrorRim = "aria-invalid:[--field-rim:var(--destructive-indicator)] aria-invalid:[--field-rim-focus:var(--destructive-indicator)]";
 export declare const fieldErrorRimWithin = "has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)]";
+export declare function deprecatedErrorAria(error: boolean | undefined): {
+    'aria-invalid'?: true;
+};
+export declare const fieldTriggerErrorBorder = "aria-invalid:border-destructive-indicator aria-invalid:hover:border-destructive-indicator aria-invalid:focus-visible:border-destructive-indicator";
 export declare const fieldTriggerStyle: string;
+export declare const fieldTriggerWidthStyle = "w-(--field-width,100%) shrink-(--field-shrink,1)";
 export declare const inputSurfaceAndFocusStyle: string;
 export declare const inputSurfaceAndFocusWithinStyle: string;
 export declare const raisedControlSurfaceStyle: string;

package/dist/src/ds/primitives/textarea-control.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+export type TextareaControlProps = React.ComponentProps<'textarea'>;
+export declare function TextareaControl({ id, name, disabled, ref, ...props }: TextareaControlProps): React.JSX.Element;

package/dist/src/lib/form/components/form.d.ts

@@ -1,2 +1,2 @@
 import { default as React } from 'react';
-export declare const Form: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export declare function Form({ className, ...props }: React.ComponentProps<'form'>): React.JSX.Element;

package/dist/src/lib/keyboard/keyboard-dispatcher.d.ts

@@ -36,6 +36,8 @@ export type KeyboardLayer = {
     depth: number;
     bindings: UseKeydownArgs;
     shouldHandle?: (event: KeyboardEvent) => boolean;
+    /** When `false`, auto-repeated keydowns from a held key don't fire handlers. */
+    repeat?: boolean;
 };
 export type KeyboardDispatcher = {
     /** Registers a layer and returns its unregister function. */

package/dist/src/lib/keyboard/use-keydown.d.ts

@@ -14,6 +14,12 @@ export type UseKeydownOptions = {
      * unless the listener targets that field directly.
      */
     shouldHandle?: (event: KeyboardEvent) => boolean;
+    /**
+     * When `false`, holding a key runs its handler once instead of on every
+     * auto-repeat (repeats are still default-prevented). Use it for toggles.
+     * Defaults to `true`.
+     */
+    repeat?: boolean;
 };
 /**
  * Binds keyboard shortcuts (see `UseKeydownArgs` for the syntax).