@satinhq/kit 0.0.0-stage → 0.1.0-beta.0

package/dist/public/controls.d.ts

@@ -0,0 +1,360 @@
+import type { Choice } from '../list-form/ListForm.js';
+import type { Searchable } from '../search/searchable.js';
+import type { TaskAction } from '../tasks/useTask.js';
+import type { ScrollPositionBinding, VerticalScrollGeometry } from '../scroll/position.js';
+import type { ScrollDismissesKeyboardMode } from '../keyboard/adapter.js';
+import type { ScrollEdgeEffectHidden, ScrollEdgeEffectStyleSelection } from '../scroll/edgePolicy.js';
+import { type BuiltInButtonStyle, type ButtonStyle, type ButtonRole, type ControlSize, type BuiltInToggleStyle, type ToggleStyle } from './controlStyle.js';
+import { type SymbolName } from '../symbols/Symbol.js';
+import { type SubmitLabel, type TextFieldKind } from '../text-input/kinds.js';
+import { type AriaAttributes, type ReactNode, type RefAttributes, type ReactElement, type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+import { type ButtonBorderShape } from './buttonBorderShape.js';
+export type { ButtonBorderShape } from './buttonBorderShape.js';
+import type { RowActionsProps } from '../actions/types.js';
+import { type ListItemID } from '../list-form/editing.js';
+import type { Routes, RouteProps, RegisteredRoutes } from './routes.js';
+/** `swipeActions` and `contextMenu` for a row inside a `List`. */
+export type RowInteractionProps = RowActionsProps;
+/** `textFieldStyle`: `automatic` adapts to the container; `plain` draws no field chrome. */
+export type TextFieldStyle = 'automatic' | 'plain';
+/** A number caps growth; a range also reserves its minimum number of lines. */
+export type LineLimit = number | {
+    min: number;
+    max: number;
+};
+/** The scroll, search and section options `Form` and `List` share. `style` is inline CSS. */
+export type FormProps = Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    id: string;
+    refreshable?: TaskAction;
+    scrollDismissesKeyboard?: ScrollDismissesKeyboardMode;
+    scrollEdgeEffectHidden?: ScrollEdgeEffectHidden;
+    scrollEdgeEffectStyle?: ScrollEdgeEffectStyleSelection;
+    defaultScrollAnchor?: 'top' | 'bottom';
+    maintainVisibleContentPosition?: boolean;
+    scrollPosition?: ScrollPositionBinding;
+    onScrollGeometryChange?: (geometry: VerticalScrollGeometry) => void;
+    searchable?: Searchable;
+    listSectionSpacing?: 'default' | 'compact' | number;
+    scrollContentBackground?: 'hidden' | 'visible';
+};
+/** `listStyle`: the row chrome of a `List`. */
+export type ListStyle = 'insetGrouped' | 'plain' | 'grouped' | 'sidebar';
+/** A `List` takes a `Form`'s options, its `listStyle` and an optional `selection`. */
+export type ListProps<ID extends ListItemID = ListItemID> = FormProps & {
+    listStyle?: ListStyle;
+} & ListSelectionProps<ID>;
+/**
+ * `List(selection:)`. An optional id selects one row: tapping a row selects it. A `Set`
+ * selects many: while editing, rows show selection circles and taps toggle them. Rows are
+ * identified by their `ForEach` ids.
+ */
+export type ListSelectionProps<ID extends ListItemID = ListItemID> = {
+    selection?: undefined;
+    onSelectionChange?: undefined;
+} | {
+    selection: ID | null;
+    onSelectionChange: (next: ID | null) => void;
+} | {
+    selection: ReadonlySet<ID>;
+    onSelectionChange: (next: Set<ID>) => void;
+};
+/**
+ * `List`: a named vertical scroll view of rows, inset grouped by default. Controls inside
+ * it render as rows. Its `id` keys scroll restoration, so keep it stable.
+ *
+ * With `selection`, rows from a `ForEach` become selectable; with an `EditButton` in the screen's
+ * toolbar, `ForEach`'s `onDelete` and `onMove` add the editing controls.
+ *
+ * @example
+ * <List id="notes">
+ *   {notes.map(note => (
+ *     <NavigationLink key={note.id} to="note" params={{ id: note.id }}>
+ *       {note.title}
+ *     </NavigationLink>
+ *   ))}
+ * </List>
+ */
+export declare function List<ID extends ListItemID>(props: FormProps & {
+    listStyle?: ListStyle;
+    selection: ReadonlySet<ID>;
+    onSelectionChange: (next: Set<ID>) => void;
+}): ReactElement;
+export declare function List<ID extends ListItemID>(props: FormProps & {
+    listStyle?: ListStyle;
+    selection: ID | null;
+    onSelectionChange: (next: ID | null) => void;
+}): ReactElement;
+export declare function List(props: FormProps & {
+    listStyle?: ListStyle;
+}): ReactElement;
+/** `Form`: an inset grouped `List` for settings and data entry, whose scroll dismisses
+ * the keyboard immediately. */
+export declare function Form(props: FormProps): import("react").JSX.Element;
+/** Button's action, label and control properties. An `iconOnly` button needs an `aria-label`. */
+export type ButtonProps = AriaAttributes & RowInteractionProps & {
+    children?: ReactNode;
+    symbol?: SymbolName;
+    onPress(): void;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    title?: string;
+    role?: ButtonRole;
+    buttonStyle?: BuiltInButtonStyle | ButtonStyle;
+    style?: CSSProperties;
+    controlSize?: ControlSize;
+    buttonBorderShape?: ButtonBorderShape;
+    tint?: string;
+} & ({
+    iconOnly: true;
+    'aria-label': string;
+} | {
+    iconOnly?: false;
+});
+/**
+ * SwiftUI `Button`. It adapts to where it is: a tinted row in a `List`, a glass button in a
+ * toolbar, otherwise the `buttonStyle` you choose. `role="destructive"` carries into every context.
+ *
+ * @example
+ * <Button symbol="plus" onPress={addNote}>New Note</Button>
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+/**
+ * `EditButton`: toggles the screen's edit mode. In a toolbar it reads Edit, then becomes
+ * the prominent checkmark (Done) while editing, as in iOS 27.
+ *
+ * @example
+ * <Screen toolbar={<ToolbarItem placement="topBarTrailing"><EditButton /></ToolbarItem>}>
+ */
+export declare function EditButton(): import("react").JSX.Element;
+/** A destination route and its params (typed against the registered routes), plus the row's
+ * label and accessories. */
+export type NavigationLinkProps<R extends Routes = RegisteredRoutes> = [
+    keyof R['definitions']
+] extends [never] ? RowInteractionProps & {
+    to: never;
+    params?: never;
+    children: ReactNode;
+    symbol?: SymbolName;
+    leading?: ReactNode;
+} : {
+    [K in keyof R['definitions'] & string]: {
+        to: K;
+    } & RowInteractionProps & ({} extends RouteProps<R, K> ? {
+        params?: RouteProps<R, K>;
+    } : {
+        params: RouteProps<R, K>;
+    }) & {
+        children: ReactNode;
+        value?: ReactNode;
+        disabled?: boolean;
+        leading?: ReactNode;
+        symbol?: SymbolName;
+        className?: string;
+    };
+}[keyof R['definitions'] & string];
+/**
+ * `NavigationLink(value:)`: pushes a declared route. In a `List` it is a disclosure row;
+ * elsewhere, a plain pressable.
+ *
+ * @example
+ * <NavigationLink to="note" params={{ id: note.id }}>{note.title}</NavigationLink>
+ */
+export declare function NavigationLink<R extends Routes = RegisteredRoutes>({ to, params, children, swipeActions, contextMenu, symbol, ...props }: NavigationLinkProps<R>): import("react").JSX.Element;
+/** A row title and its secondary line. */
+export type RowLabelProps = {
+    children: ReactNode;
+    detail: ReactNode;
+};
+/** A row's title with a secondary line under it, with a title and a subheadline. The framework owns its layout. */
+export declare function RowLabel({ children, detail }: RowLabelProps): import("react").JSX.Element;
+/** The row's label and the trailing value it shows. */
+export type LabeledContentProps = RowInteractionProps & {
+    label: ReactNode;
+    value: ReactNode;
+    leading?: ReactNode;
+    disabled?: boolean;
+    destructive?: boolean;
+    className?: string;
+    'aria-label'?: string;
+};
+/** `LabeledContent`: a row with a label and a secondary trailing value. */
+export declare function LabeledContent({ 'aria-label': accessibilityLabel, ...props }: LabeledContentProps): import("react").JSX.Element;
+/** Toggle's controlled value, label and control properties. */
+export type ToggleProps = {
+    isOn: boolean;
+    onChange(isOn: boolean): void;
+    disabled?: boolean;
+    label: string;
+    /** A secondary line under the label, drawn with secondary text styling. The label
+     * stays the accessible name; the subtitle is its description. */
+    subtitle?: string;
+    leading?: ReactNode;
+    toggleStyle?: BuiltInToggleStyle | ToggleStyle;
+    style?: CSSProperties;
+    controlSize?: ControlSize;
+    tint?: string;
+};
+/**
+ * `Toggle`: a controlled boolean. It is a switch row in a `List` or `Form`, a bare switch
+ * elsewhere, or a `button` or custom `ToggleStyle`.
+ *
+ * @example
+ * <Toggle label="Show Completed" isOn={showCompleted} onChange={setShowCompleted} />
+ * <Toggle label="Date" subtitle="Today" isOn={hasDate} onChange={setHasDate} />
+ */
+export declare function Toggle({ isOn, toggleStyle: requestedStyle, style: cssStyle, controlSize, tint, disabled, ...props }: ToggleProps): import("react").JSX.Element;
+/** Picker's options, controlled value and `pickerStyle`. */
+export type PickerProps = {
+    label: string;
+    options: readonly Choice[];
+    disabled?: boolean;
+    leading?: ReactNode;
+    pickerStyle?: 'menu' | 'navigationLink' | 'segmented' | 'inline';
+    style?: CSSProperties;
+    selection: string;
+    onSelectionChange(id: string): void;
+};
+/**
+ * `Picker`: choose one option. `menu` (default) shows a menu from the row,
+ * `navigationLink` pushes a list of options, `inline` lists them in place and `segmented` draws a
+ * segmented control.
+ *
+ * An option can carry a `symbol` (or `icon`) and a `color`. Icons draw in colour in an inline or
+ * navigationLink list, in the label colour inside the open menu, and not at all when segmented.
+ *
+ * @example
+ * <Picker label="Sort" selection={sort} onSelectionChange={setSort}
+ *   options={[{ id: 'date', label: 'Date' }, { id: 'title', label: 'Title' }]} />
+ * <Picker label="List" pickerStyle="inline" selection={list} onSelectionChange={setList}
+ *   options={[{ id: 'home', label: 'Home', symbol: 'house', color: systemColor('red') }]} />
+ */
+export declare function Picker({ pickerStyle, selection, onSelectionChange, disabled, ...rest }: PickerProps): import("react").JSX.Element;
+/** Stepper's controlled value, bounds and step. */
+export type StepperProps = {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label: string;
+    onEditingChange?: (editing: boolean) => void;
+};
+/** `Stepper`: increments or decrements a controlled number within its bounds. A row in a
+ * `List`, the bare control elsewhere. */
+export declare function Stepper({ disabled, ...rest }: StepperProps): import("react").JSX.Element;
+/** Slider's controlled value, range, step and accessibility label. */
+export type SliderProps = {
+    value: number;
+    onChange: (value: number) => void;
+    /** `in: min...max`; defaults to 0...1. */
+    min?: number;
+    max?: number;
+    /** Snap to multiples of `step` from `min`; omit for a continuous Slider. */
+    step?: number;
+    /** Show a tick mark at each step, centred under the thumb's stops. */
+    ticks?: boolean;
+    /** Accessibility label; a Slider shows no visible label, as on iOS. */
+    label: string;
+    disabled?: boolean;
+    tint?: string;
+    onEditingChange?: (editing: boolean) => void;
+};
+/** `Slider(value:in:step:)`: in a List or Form it fills its own 60 pt row. */
+export declare function Slider({ disabled, tint, ...rest }: SliderProps): import("react").JSX.Element;
+/** Horizontal TextField's controlled text and keyboard intent. */
+export type HorizontalTextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'onSubmit' | 'size' | 'placeholder'> & {
+    label: string;
+    value: string;
+    onChange(value: string): void;
+    kind?: TextFieldKind;
+    submitLabel?: SubmitLabel;
+    onSubmit?(): void;
+    labelPlacement?: 'leading' | 'above';
+    prompt?: string;
+    textFieldStyle?: TextFieldStyle;
+    axis?: 'horizontal';
+};
+/** Vertical TextField's controlled text, growth limits and keyboard intent. */
+export type VerticalTextFieldProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'rows' | 'placeholder'> & {
+    label: string;
+    value: string;
+    onChange(value: string): void;
+    prompt?: string;
+    textFieldStyle?: TextFieldStyle;
+    axis: 'vertical';
+    lineLimit?: LineLimit;
+    kind?: Exclude<TextFieldKind, 'new-password' | 'current-password'>;
+    submitLabel?: SubmitLabel;
+};
+/** A single-line field, or with `axis="vertical"` a field that grows to its `lineLimit`. */
+export type TextFieldProps = HorizontalTextFieldProps | VerticalTextFieldProps;
+/**
+ * SwiftUI `TextField`: controlled text with a label, an optional `prompt` and keyboard intent from
+ * `kind`. In a `List` or `Form` it becomes the row; elsewhere it draws a standalone field.
+ * `axis="vertical"` grows with its content.
+ *
+ * @example
+ * <TextField label="Title" value={title} onChange={setTitle} />
+ */
+export declare const TextField: {
+    (props: HorizontalTextFieldProps & RefAttributes<HTMLInputElement>): ReactElement | null;
+    (props: VerticalTextFieldProps & RefAttributes<HTMLTextAreaElement>): ReactElement | null;
+};
+/** SecureField's controlled text, label and prompt. */
+export type SecureFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'onSubmit' | 'size' | 'placeholder'> & {
+    label: string;
+    value: string;
+    onChange(value: string): void;
+    kind?: 'new-password' | 'current-password';
+    submitLabel?: SubmitLabel;
+    onSubmit?(): void;
+    labelPlacement?: 'leading' | 'above';
+    prompt?: string;
+    textFieldStyle?: TextFieldStyle;
+};
+/** SwiftUI `SecureField`: password entry with secure system input, adapting to a row in a form. */
+export declare const SecureField: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "onSubmit" | "placeholder" | "size" | "type" | "value"> & {
+    label: string;
+    value: string;
+    onChange(value: string): void;
+    kind?: 'new-password' | 'current-password';
+    submitLabel?: SubmitLabel;
+    onSubmit?(): void;
+    labelPlacement?: 'leading' | 'above';
+    prompt?: string;
+    textFieldStyle?: TextFieldStyle;
+} & RefAttributes<HTMLInputElement>>;
+/** TextEditor's controlled text, label and prompt. */
+export type TextEditorProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'rows' | 'placeholder'> & {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    minLines?: number;
+    maxLines?: number;
+    prompt?: string;
+    textFieldStyle?: TextFieldStyle;
+};
+/** SwiftUI `TextEditor`: multiline text, adapting to a row in a form. */
+export declare const TextEditor: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" | "onChange" | "placeholder" | "rows" | "value"> & {
+    value: string;
+    onChange(value: string): void;
+    label?: string;
+    minLines?: number;
+    maxLines?: number;
+    prompt?: string;
+    textFieldStyle?: TextFieldStyle;
+} & RefAttributes<HTMLTextAreaElement>>;
+/** The empty state's title, optional description and icon (a tray by default). */
+export type ContentUnavailableViewProps = {
+    /** System symbol used when no custom icon is supplied. Defaults to tray. */
+    symbol?: SymbolName;
+    title: string;
+    description?: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+};
+/** `ContentUnavailableView`: an icon, title and description shown for empty content. */
+export declare function ContentUnavailableView({ symbol, title, description, icon, className, children, }: ContentUnavailableViewProps): import("react").JSX.Element;

package/dist/public/controls.js

@@ -0,0 +1,301 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ControlStyleBody, controlTintStyle, useControlStyle, } from './controlStyle.js';
+import { SymbolImage } from '../symbols/Symbol.js';
+import { toolbarIconName } from './Label.js';
+import { usePickerNavigation } from './pickerNavigation.js';
+import { RowLabelBody } from '../list-form/RowLabel.js';
+import { textFieldAttributes } from '../text-input/kinds.js';
+import { GlassFieldContext } from './fieldContext.js';
+import { Children, isValidElement, forwardRef, useContext, useId, useState, } from 'react';
+import * as Rows from '../list-form/ListForm.js';
+import * as Fields from '../text-input/TextField.js';
+import { TextEditor as Editor } from '../text-input/TextEditor.js';
+import { Pressable } from '../press/Pressable.js';
+import { glassRadius } from '../glass/regions.js';
+import { GlassButton } from '../glass/GlassEffect.js';
+import { resolveButtonBorderShape } from './buttonBorderShape.js';
+import { ToolbarConfirmationContext, ToolbarContext } from './toolbar.js';
+import { useScreenContentNavigation } from './screenChrome.js';
+import { useNavigation } from './runtime.js';
+import { ListContext, ListRowContentContext } from '../list-form/listContext.js';
+import { useEditMode } from '../list-form/editing.js';
+function useFieldVariant(style = 'automatic') {
+    const list = useContext(ListContext);
+    const glass = useContext(GlassFieldContext);
+    const rowContent = useContext(ListRowContentContext);
+    return style === 'plain' || glass || rowContent ? 'plain' : list ? 'row' : 'standalone';
+}
+export function List({ listStyle, children, selection, onSelectionChange, ...props }) {
+    const chrome = useScreenContentNavigation();
+    const authoredTitle = Children.toArray(children).some(child => isValidElement(child) && child.type === 'h1');
+    const title = !authoredTitle && chrome.titleDisplay !== 'none' ? chrome.title : undefined;
+    return (_jsx(ListContext, { value: true, children: _jsx(Rows.List, { ...props, navigationTitle: title, navigationTitleDisplay: chrome.titleDisplay === 'large' ? 'large' : 'inline', variant: listStyle, selectionBinding: selectionBinding(selection, onSelectionChange), children: children }) }));
+}
+function selectionBinding(selection, onSelectionChange) {
+    if (selection === undefined || !onSelectionChange)
+        return undefined;
+    if (selection instanceof Set)
+        return {
+            mode: 'multiple',
+            value: selection,
+            onChange: onSelectionChange,
+        };
+    return {
+        mode: 'single',
+        value: selection,
+        onChange: onSelectionChange,
+    };
+}
+/** `Form`: an inset grouped `List` for settings and data entry, whose scroll dismisses
+ * the keyboard immediately. */
+export function Form(props) {
+    return (_jsx(List, { ...props, listStyle: "insetGrouped", scrollDismissesKeyboard: props.scrollDismissesKeyboard ?? 'immediately' }));
+}
+/**
+ * SwiftUI `Button`. It adapts to where it is: a tinted row in a `List`, a glass button in a
+ * toolbar, otherwise the `buttonStyle` you choose. `role="destructive"` carries into every context.
+ *
+ * @example
+ * <Button symbol="plus" onPress={addNote}>New Note</Button>
+ */
+export const Button = forwardRef(function Button({ children, symbol, role, buttonStyle: requestedStyle, style: cssStyle, controlSize, buttonBorderShape, tint, disabled, swipeActions, contextMenu, ...rest }, ref) {
+    const list = useContext(ListContext);
+    const toolbar = useContext(ToolbarContext);
+    const confirmation = useContext(ToolbarConfirmationContext);
+    const configuration = useControlStyle({
+        buttonStyle: requestedStyle,
+        controlSize,
+        tint,
+        disabled,
+    });
+    const style = configuration.buttonStyle ?? 'automatic';
+    const resolvedBorderShape = resolveButtonBorderShape(buttonBorderShape);
+    const [isPressed, setPressed] = useState(false);
+    // A toolbar button labelled with an icon-only Label or a SymbolImage is a glass circle, and so is a
+    // titled button with a symbol: SwiftUI's `Button("New Reminder", systemImage: "plus")` in a toolbar
+    // draws only its symbol (iOS 27.0 native reference), the title becoming its accessible name. A bare symbol
+    // with no title is the same circle (SwiftUI's `Button { } label: { Image(systemName:) }`).
+    const symbolTitle = toolbar && symbol && typeof children === 'string' && !rest.iconOnly ? children : undefined;
+    const bareSymbolName = toolbar && symbol && (children == null || typeof children === 'boolean') && !rest.iconOnly
+        ? rest['aria-label']?.trim() || symbol
+        : undefined;
+    const iconName = symbolTitle ??
+        bareSymbolName ??
+        (toolbar && !symbol && !rest.iconOnly ? toolbarIconName(children) : undefined);
+    const props = {
+        ...rest,
+        disabled: configuration.disabled,
+        style: { ...controlTintStyle(configuration.tint), ...cssStyle },
+        'data-satin-control-size': configuration.controlSize,
+        'data-satin-button-symbol': symbol,
+        'data-satin-control-tinted': configuration.tint ? 'true' : undefined,
+    };
+    const content = (_jsxs(_Fragment, { children: [symbol && (_jsx(SymbolImage, { name: symbol, style: {
+                    ...(toolbar ? { fontSize: 22 } : {}),
+                    marginInlineEnd: children == null || symbolTitle ? undefined : '0.3em',
+                } })), symbolTitle === undefined && children] }));
+    if (typeof style === 'object')
+        return (_jsx(Pressable, { ...props, ref: ref, "data-satin-button-role": role, onPressStateChange: state => setPressed(state === 'pressed'), children: _jsx(ControlStyleBody, { children: style.makeBody({
+                    label: content,
+                    role,
+                    isPressed,
+                    isEnabled: !configuration.disabled,
+                    controlSize: configuration.controlSize,
+                    tint: configuration.tint,
+                }) }) }));
+    if (toolbar === 'group' && style === 'automatic')
+        return (_jsx(Pressable, { ...props, ref: ref, "data-satin-toolbar-button": "true", "data-satin-button-role": role, children: content }));
+    if (list && style === 'automatic')
+        return (_jsx(Rows.Row, { swipeActions, contextMenu, ref: ref, buttonProps: props, className: ['satin-list-button', props.className].filter(Boolean).join(' '), destructive: role === 'destructive', disabled: props.disabled, onPress: props.onPress, label: children, leading: symbol ? (_jsx(SymbolImage, { name: symbol, style: { fontSize: 21.7, color: configuration.tint ?? 'var(--satin-tint)' } })) : undefined, accessibilityLabel: props['aria-label'] }));
+    if (style === 'glass' || style === 'glassProminent' || (toolbar && style === 'automatic'))
+        return (_jsx(GlassButton, { shape: resolvedBorderShape, ...(iconName !== undefined
+                ? {
+                    ...props,
+                    iconOnly: true,
+                    'aria-label': rest['aria-label']?.trim() || iconName,
+                }
+                : props), ref: ref, "data-satin-toolbar-button": toolbar && style === 'automatic' ? 'true' : undefined, "data-satin-toolbar-confirmation": toolbar && style === 'automatic' && confirmation ? 'true' : undefined, "data-satin-button-role": role, buttonStyle: style === 'glassProminent' ||
+                (toolbar &&
+                    style === 'automatic' &&
+                    confirmation &&
+                    (props.iconOnly || iconName !== undefined))
+                ? 'glassProminent'
+                : 'glass', tint: role === 'destructive' ? 'var(--satin-system-red)' : configuration.tint, "data-satin-button-style": style === 'glass' || style === 'glassProminent' ? style : undefined, children: content }));
+    return (_jsx(Pressable, { ...props, ref: ref, style: buttonBorderShape && (style === 'bordered' || style === 'borderedProminent')
+            ? {
+                ...props.style,
+                borderRadius: typeof resolvedBorderShape === 'string'
+                    ? '9999px'
+                    : glassRadius(resolvedBorderShape, Number.MAX_VALUE, Number.MAX_VALUE),
+            }
+            : props.style, "data-satin-row-intrinsic": "true", "data-satin-button-style": style, "data-satin-button-role": role, children: _jsx("span", { "data-satin-button-content": true, children: content }) }));
+});
+/**
+ * `EditButton`: toggles the screen's edit mode. In a toolbar it reads Edit, then becomes
+ * the prominent checkmark (Done) while editing, as in iOS 27.
+ *
+ * @example
+ * <Screen toolbar={<ToolbarItem placement="topBarTrailing"><EditButton /></ToolbarItem>}>
+ */
+export function EditButton() {
+    const [editMode, setEditMode] = useEditMode();
+    const editing = editMode === 'active';
+    const toolbar = useContext(ToolbarContext);
+    const toggle = () => setEditMode(editing ? 'inactive' : 'active');
+    if (toolbar && editing)
+        return (_jsx(ToolbarConfirmationContext, { value: true, children: _jsx(Button, { iconOnly: true, "aria-label": "Done", symbol: "checkmark", onPress: toggle }) }));
+    return _jsx(Button, { onPress: toggle, children: editing ? 'Done' : 'Edit' });
+}
+/**
+ * `NavigationLink(value:)`: pushes a declared route. In a `List` it is a disclosure row;
+ * elsewhere, a plain pressable.
+ *
+ * @example
+ * <NavigationLink to="note" params={{ id: note.id }}>{note.title}</NavigationLink>
+ */
+export function NavigationLink({ to, params, children, swipeActions, contextMenu, symbol, ...props }) {
+    const list = useContext(ListContext);
+    const navigation = useNavigation();
+    const configuration = useControlStyle({
+        disabled: 'disabled' in props ? Boolean(props.disabled) : undefined,
+    });
+    const onPress = () => {
+        ;
+        navigation.push(to, params);
+    };
+    return list ? (_jsx(Rows.NavigationRow, { ...props, swipeActions, contextMenu, label: children, leading: symbol ? (_jsx(SymbolImage, { name: symbol, style: { fontSize: 21.7, color: configuration.tint ?? 'var(--satin-tint)' } })) : (props.leading), onPress: onPress })) : (_jsxs(Pressable, { ...props, disabled: configuration.disabled, style: controlTintStyle(configuration.tint), "data-satin-navigation-link": "true", onPress: onPress, children: [symbol && _jsx(SymbolImage, { name: symbol }), children] }));
+}
+/** A row's title with a secondary line under it, with a title and a subheadline. The framework owns its layout. */
+export function RowLabel({ children, detail }) {
+    return _jsx(RowLabelBody, { detail: detail, children: children });
+}
+/** `LabeledContent`: a row with a label and a secondary trailing value. */
+export function LabeledContent({ 'aria-label': accessibilityLabel, ...props }) {
+    return _jsx(Rows.ValueRow, { ...props, accessibilityLabel: accessibilityLabel });
+}
+/**
+ * `Toggle`: a controlled boolean. It is a switch row in a `List` or `Form`, a bare switch
+ * elsewhere, or a `button` or custom `ToggleStyle`.
+ *
+ * @example
+ * <Toggle label="Show Completed" isOn={showCompleted} onChange={setShowCompleted} />
+ * <Toggle label="Date" subtitle="Today" isOn={hasDate} onChange={setHasDate} />
+ */
+export function Toggle({ isOn, toggleStyle: requestedStyle, style: cssStyle, controlSize, tint, disabled, ...props }) {
+    const list = useContext(ListContext);
+    const configuration = useControlStyle({
+        toggleStyle: requestedStyle,
+        controlSize,
+        tint,
+        disabled,
+    });
+    const descriptionId = useId();
+    const style = configuration.toggleStyle ?? 'automatic';
+    const [isPressed, setPressed] = useState(false);
+    if (style === 'automatic' || style === 'switch') {
+        const rowProps = {
+            ...props,
+            checked: isOn,
+            style: cssStyle,
+            disabled: configuration.disabled,
+            tint: configuration.tint,
+        };
+        return list ? _jsx(Rows.ToggleRow, { ...rowProps }) : _jsx(Rows.Toggle, { ...rowProps });
+    }
+    const semantics = typeof style === 'object' ? style.semantics : 'button';
+    return (_jsx(Pressable, { disabled: configuration.disabled, role: semantics === 'button' ? undefined : semantics, "aria-label": props.label, "aria-describedby": props.subtitle === undefined ? undefined : descriptionId, "aria-checked": semantics === 'button' ? undefined : isOn, "aria-pressed": semantics === 'button' ? isOn : undefined, "data-satin-row-intrinsic": style === 'button' ? 'true' : undefined, "data-satin-toggle-style": typeof style === 'string' ? style : 'custom', "data-satin-button-style": style === 'button' ? 'bordered' : undefined, "data-satin-control-size": configuration.controlSize, "data-satin-control-tinted": configuration.tint ? 'true' : undefined, style: { ...controlTintStyle(configuration.tint), ...cssStyle }, onPress: () => {
+            if (!configuration.disabled)
+                props.onChange(!isOn);
+        }, onPressStateChange: state => setPressed(state === 'pressed'), children: _jsx(ControlStyleBody, { children: typeof style === 'object' ? (style.makeBody({
+                label: toggleLabel(props, descriptionId),
+                isOn: isOn,
+                isPressed,
+                isEnabled: !configuration.disabled,
+                controlSize: configuration.controlSize,
+                tint: configuration.tint,
+            })) : (_jsx("span", { "data-satin-button-content": true, children: toggleLabel(props, descriptionId) })) }) }));
+}
+/** A button-style or custom Toggle draws its subtitle under the label, like the switch row. */
+function toggleLabel(props, descriptionId) {
+    if (props.subtitle === undefined)
+        return props.label;
+    return (_jsx(RowLabelBody, { detail: props.subtitle, detailId: descriptionId, children: props.label }));
+}
+/**
+ * `Picker`: choose one option. `menu` (default) shows a menu from the row,
+ * `navigationLink` pushes a list of options, `inline` lists them in place and `segmented` draws a
+ * segmented control.
+ *
+ * An option can carry a `symbol` (or `icon`) and a `color`. Icons draw in colour in an inline or
+ * navigationLink list, in the label colour inside the open menu, and not at all when segmented.
+ *
+ * @example
+ * <Picker label="Sort" selection={sort} onSelectionChange={setSort}
+ *   options={[{ id: 'date', label: 'Date' }, { id: 'title', label: 'Title' }]} />
+ * <Picker label="List" pickerStyle="inline" selection={list} onSelectionChange={setList}
+ *   options={[{ id: 'home', label: 'Home', symbol: 'house', color: systemColor('red') }]} />
+ */
+export function Picker({ pickerStyle = 'menu', selection, onSelectionChange, disabled, ...rest }) {
+    // `ControlStyleProvider disabled` disables a Picker as SwiftUI's `.disabled` does a subtree.
+    const configuration = useControlStyle({ disabled });
+    const props = {
+        ...rest,
+        disabled: configuration.disabled,
+        value: selection,
+        onChange: onSelectionChange,
+    };
+    const navigate = usePickerNavigation(props);
+    if (pickerStyle === 'segmented')
+        return _jsx(Rows.SegmentedControl, { ...props });
+    if (pickerStyle === 'inline')
+        return _jsx(Rows.PickerOptions, { ...props });
+    return (_jsx(Rows.PickerRow, { ...props, onNavigate: navigate, presentation: pickerStyle === 'navigationLink' ? 'navigation' : 'menu' }));
+}
+/** `Stepper`: increments or decrements a controlled number within its bounds. A row in a
+ * `List`, the bare control elsewhere. */
+export function Stepper({ disabled, ...rest }) {
+    const configuration = useControlStyle({ disabled });
+    const props = { ...rest, disabled: configuration.disabled };
+    return useContext(ListContext) ? (_jsx(Rows.StepperRow, { ...props })) : (_jsx(Rows.StepperControl, { ...props }));
+}
+/** `Slider(value:in:step:)`: in a List or Form it fills its own 60 pt row. */
+export function Slider({ disabled, tint, ...rest }) {
+    const configuration = useControlStyle({ disabled, tint });
+    const props = { ...rest, disabled: configuration.disabled, tint: configuration.tint };
+    return useContext(ListContext) ? _jsx(Rows.SliderRow, { ...props }) : _jsx(Rows.Slider, { ...props });
+}
+const Field = forwardRef(function TextField({ prompt, textFieldStyle, style, ...props }, ref) {
+    const variant = useFieldVariant(textFieldStyle);
+    const hidden = prompt !== undefined || variant === 'plain' || variant === 'row';
+    if (props.axis === 'vertical') {
+        const { axis: _axis, kind = 'text', submitLabel, lineLimit, ...editorProps } = props;
+        const { type: _type, enterKeyHint: _enterKeyHint, ...attributes } = textFieldAttributes(kind);
+        return (_jsx(Editor, { ...attributes, enterKeyHint: submitLabel, ...editorProps, style: style, ref: ref, field: true, minLines: typeof lineLimit === 'object' ? lineLimit.min : 1, maxLines: typeof lineLimit === 'object' ? lineLimit.max : lineLimit, placeholder: prompt ?? props.label, variant: variant, labelVisibility: "hidden" }));
+    }
+    const { axis: _axis, ...fieldProps } = props;
+    return (_jsx(Fields.TextField, { ...fieldProps, style: style, ref: ref, placeholder: prompt ?? (hidden ? props.label : undefined), variant: variant, labelVisibility: hidden ? 'hidden' : 'visible' }));
+});
+/**
+ * SwiftUI `TextField`: controlled text with a label, an optional `prompt` and keyboard intent from
+ * `kind`. In a `List` or `Form` it becomes the row; elsewhere it draws a standalone field.
+ * `axis="vertical"` grows with its content.
+ *
+ * @example
+ * <TextField label="Title" value={title} onChange={setTitle} />
+ */
+// The cast keeps single-line refs and events precisely typed when axis is omitted.
+export const TextField = Field;
+/** SwiftUI `SecureField`: password entry with secure system input, adapting to a row in a form. */
+export const SecureField = forwardRef(function SecureField({ prompt, textFieldStyle, style, ...props }, ref) {
+    const variant = useFieldVariant(textFieldStyle);
+    return (_jsx(Fields.SecureField, { ...props, style: style, ref: ref, placeholder: prompt ?? (variant !== 'standalone' ? props.label : undefined), variant: variant, labelVisibility: prompt !== undefined || variant !== 'standalone' ? 'hidden' : 'visible' }));
+});
+/** SwiftUI `TextEditor`: multiline text, adapting to a row in a form. */
+export const TextEditor = forwardRef(function TextEditor({ prompt, textFieldStyle, style, ...props }, ref) {
+    const variant = useFieldVariant(textFieldStyle);
+    return (_jsx(Editor, { ...props, minLines: props.minLines ?? (variant === 'row' ? 1 : 3), style: style, ref: ref, placeholder: prompt ?? (variant === 'plain' ? props.label : undefined), variant: variant, labelVisibility: prompt !== undefined || variant !== 'standalone' ? 'hidden' : 'visible' }));
+});
+/** `ContentUnavailableView`: an icon, title and description shown for empty content. */
+export function ContentUnavailableView({ symbol = 'tray', title, description, icon, className, children, }) {
+    return (_jsxs("div", { "data-satin-empty-state": "true", className: className, children: [_jsx("div", { "data-satin-empty-state-icon": "true", "aria-hidden": "true", children: icon ?? _jsx(SymbolImage, { name: symbol }) }), _jsx("strong", { "data-satin-empty-state-title": "true", children: title }), description && _jsx("div", { "data-satin-empty-state-description": "true", children: description }), children && _jsx("div", { "data-satin-unavailable-actions": "true", children: children })] }));
+}