// Generated by `tinyui schema` from schema/; do not edit.
import type { Node, Ref } from "../node.ts";

export type ColorToken = "primary" | "onPrimary" | "primaryContainer" | "onPrimaryContainer" | "inversePrimary" | "secondary" | "onSecondary" | "secondaryContainer" | "onSecondaryContainer" | "tertiary" | "onTertiary" | "tertiaryContainer" | "onTertiaryContainer" | "background" | "onBackground" | "surface" | "onSurface" | "surfaceVariant" | "onSurfaceVariant" | "surfaceTint" | "inverseSurface" | "inverseOnSurface" | "error" | "onError" | "errorContainer" | "onErrorContainer" | "outline" | "outlineVariant" | "scrim" | "surfaceBright" | "surfaceDim" | "surfaceContainer" | "surfaceContainerHigh" | "surfaceContainerHighest" | "surfaceContainerLow" | "surfaceContainerLowest" | "primaryFixed" | "primaryFixedDim" | "onPrimaryFixed" | "onPrimaryFixedVariant" | "secondaryFixed" | "secondaryFixedDim" | "onSecondaryFixed" | "onSecondaryFixedVariant" | "tertiaryFixed" | "tertiaryFixedDim" | "onTertiaryFixed" | "onTertiaryFixedVariant";
/** A literal `#RRGGBB` / `#AARRGGBB`, or a theme token resolved by the host at composition. */
export type ColorValue = `#${string}` | ColorToken;

export interface LayoutProps {
    weight?: number;
    width?: number | "fill" | "wrap";
    height?: number | "fill" | "wrap";
    cornerRadius?: number;
    background?: ColorValue;
    borderWidth?: number;
    borderColor?: ColorValue;
    padding?: number;
    paddingHorizontal?: number;
    paddingVertical?: number;
    role?: "button" | "checkbox" | "switch" | "radio" | "tab";
    selected?: boolean;
}

export interface ColumnClickPayload {
}

/** Vertical stack. */
export interface ColumnProps extends LayoutProps {
    /** space between children */
    gap?: number;
    /** cross axis */
    align?: "start" | "center" | "end";
    /** main axis */
    justify?: "start" | "center" | "end" | "spaceBetween";
    /** scrolls along the main axis; padding stays outside the scrolling content */
    scroll?: boolean;
    onClick?: (e: ColumnClickPayload) => void;
    children?: Node | Node[];
}

export interface RowClickPayload {
}

/** Horizontal stack. */
export interface RowProps extends LayoutProps {
    /** space between children */
    gap?: number;
    /** cross axis */
    align?: "start" | "center" | "end";
    /** main axis */
    justify?: "start" | "center" | "end" | "spaceBetween";
    /** scrolls along the main axis; padding stays outside the scrolling content */
    scroll?: boolean;
    onClick?: (e: RowClickPayload) => void;
    children?: Node | Node[];
}

export interface BoxClickPayload {
}

/** Children stacked on top of each other. */
export interface BoxProps extends LayoutProps {
    align?: "topStart" | "topCenter" | "topEnd" | "centerStart" | "center" | "centerEnd" | "bottomStart" | "bottomCenter" | "bottomEnd";
    onClick?: (e: BoxClickPayload) => void;
    children?: Node | Node[];
}

export interface TextClickPayload {
}

export interface TextLinkClickPayload {
    /** the `(id)` of the tapped link */
    id: string;
}

export interface TextProps extends LayoutProps {
    /** with onLinkClick set, `[label](id)` spans render as links */
    text: string;
    /** Material 3 text style; fontSize / fontWeight override its fields */
    style?: "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall";
    color?: ColorValue;
    fontSize?: number;
    fontWeight?: "normal" | "medium" | "bold";
    /** 0 = unlimited */
    maxLines?: number;
    align?: "start" | "center" | "end";
    onClick?: (e: TextClickPayload) => void;
    onLinkClick?: (e: TextLinkClickPayload) => void;
}

export interface ButtonClickPayload {
}

/** Label is `text`, or the children when given (an indicator, an icon and a label…); children win. */
export interface ButtonProps extends LayoutProps {
    text?: string;
    enabled?: boolean;
    variant?: "filled" | "outlined" | "text";
    onClick?: (e: ButtonClickPayload) => void;
    children?: Node | Node[];
}

export interface RadioButtonClickPayload {
}

/** Selection lives in JS: `onClick` reports the tap, `selected` is a plain prop. */
export interface RadioButtonProps extends LayoutProps {
    selected: boolean;
    enabled?: boolean;
    onClick?: (e: RadioButtonClickPayload) => void;
}

export interface TextFieldChangePayload {
    text: string;
}

export interface TextFieldCommitPayload {
    /** on IME action or focus loss */
    text: string;
}

export interface TextFieldFocusChangePayload {
    focused: boolean;
}

export interface TextFieldTrailingClickPayload {
}

export interface TextFieldPrefixClickPayload {
}

export interface TextFieldSetTextArgs {
    text: string;
}

export interface TextFieldFocusArgs {
}

export interface TextFieldBlurArgs {
}

export type TextFieldCommands = {
    setText: TextFieldSetTextArgs;
    focus: TextFieldFocusArgs;
    blur: TextFieldBlurArgs;
};

/** Text and cursor live on the Kotlin side; JS gets notified and issues commands (docs/adr-004 §3.3). */
export interface TextFieldProps extends LayoutProps {
    initialText?: string;
    placeholder?: string;
    singleLine?: boolean;
    keyboard?: "text" | "number" | "email" | "phone" | "password";
    /** masks the text; unset follows keyboard="password", so a visibility toggle just flips it */
    secure?: boolean;
    /** error colours on the outline, label and supportingText */
    error?: boolean;
    /** one line under the field: a hint, or the error message while error is true */
    supportingText?: string;
    /** fixed text before the input, such as a calling code */
    prefixText?: string;
    /** icon at the end, such as show / hide or clear; tappable when onTrailingClick is set */
    trailingIcon?: string;
    /** next moves focus to the following field */
    imeAction?: "done" | "next";
    /** 0 = unlimited; longer input is cut, not rejected */
    maxLength?: number;
    onChange?: (e: TextFieldChangePayload) => void;
    onCommit?: (e: TextFieldCommitPayload) => void;
    onFocusChange?: (e: TextFieldFocusChangePayload) => void;
    onTrailingClick?: (e: TextFieldTrailingClickPayload) => void;
    onPrefixClick?: (e: TextFieldPrefixClickPayload) => void;
    ref?: Ref<TextFieldCommands>;
}

export interface LazyColumnReachEndPayload {
}

export interface LazyColumnScrollEndPayload {
    /** first visible child */
    index: number;
}

export interface LazyColumnScrollToArgs {
    index: number;
}

export type LazyColumnCommands = {
    scrollTo: LazyColumnScrollToArgs;
};

/** Virtualised vertical list; children are usually a <For>. */
export interface LazyColumnProps extends LayoutProps {
    gap?: number;
    onReachEnd?: (e: LazyColumnReachEndPayload) => void;
    onScrollEnd?: (e: LazyColumnScrollEndPayload) => void;
    ref?: Ref<LazyColumnCommands>;
    children?: Node | Node[];
}

/** Empty space; size it with width / height. */
export interface SpacerProps extends LayoutProps {
}

export interface IconClickPayload {
}

/** A single-colour icon whose data comes with the package (`import bolt from "….svg"`); tinted, never ships an icon set. */
export interface IconProps extends LayoutProps {
    icon: string;
    size?: number;
    /** defaults to the content colour */
    tint?: ColorValue;
    /** what a screen reader says; leave unset for a decorative icon next to its text */
    label?: string;
    onClick?: (e: IconClickPayload) => void;
}

/** Indeterminate M3 loading indicator. */
export interface LoadingProps extends LayoutProps {
    size?: number;
    color?: ColorValue;
}

export interface BottomSheetDismissPayload {
}

/** M3 modal bottom sheet over the page; children are its content. Shown while `open`; set it to false in `onDismiss`, which fires after the user swiped, tapped the scrim or pressed back. */
export interface BottomSheetProps {
    /** true slides it in, false animates it out */
    open: boolean;
    onDismiss?: (e: BottomSheetDismissPayload) => void;
    children?: Node | Node[];
}

/** M3 horizontal divider: a full-width line. Inset it with paddingHorizontal. */
export interface DividerProps extends LayoutProps {
    thickness?: number;
    color?: ColorValue;
}

export interface CheckboxClickPayload {
}

/** Same model as RadioButton: `onClick` reports the tap, `checked` is a plain prop the page owns. */
export interface CheckboxProps extends LayoutProps {
    checked: boolean;
    enabled?: boolean;
    onClick?: (e: CheckboxClickPayload) => void;
}

export interface CodeFieldChangePayload {
    text: string;
}

export interface CodeFieldCompletePayload {
    /** when the last cell is filled */
    text: string;
}

export interface CodeFieldSetTextArgs {
    text: string;
}

export interface CodeFieldFocusArgs {
}

export interface CodeFieldClearArgs {
}

export type CodeFieldCommands = {
    setText: CodeFieldSetTextArgs;
    focus: CodeFieldFocusArgs;
    clear: CodeFieldClearArgs;
};

/** A row of digit cells over one input; text, focus and the IME stay on the Kotlin side like TextField (docs/adr-004 §3.3). */
export interface CodeFieldProps extends LayoutProps {
    /** number of cells, 1 to 12; input stops there */
    length?: number;
    /** shows a dot instead of each digit */
    secure?: boolean;
    enabled?: boolean;
    /** error colour on the cell outlines */
    error?: boolean;
    /** oneTimeCode lets the system offer a code it just received by SMS; none keeps it from offering anything, saved passwords included */
    autofill?: "none" | "oneTimeCode";
    onChange?: (e: CodeFieldChangePayload) => void;
    onComplete?: (e: CodeFieldCompletePayload) => void;
    ref?: Ref<CodeFieldCommands>;
}

export interface SelectSelectPayload {
    value: string;
}

/** M3 exposed dropdown; the choices are its `Option` children. The selection is the page's: `onSelect` reports the pick, `value` shows it. */
export interface SelectProps extends LayoutProps {
    /** value of the chosen Option; unset or unmatched shows the placeholder (not `selected`, the common selectable-container prop) */
    value?: string;
    placeholder?: string;
    label?: string;
    enabled?: boolean;
    onSelect?: (e: SelectSelectPayload) => void;
    children?: Node | Node[];
}

/** One choice of its parent Select or Menu, which reads these props; renders nothing anywhere else. */
export interface OptionProps {
    value: string;
    text: string;
}

export interface PopoverDismissPayload {
}

/** Card floating next to its parent, which is the anchor; children are its content. Shown while `open`; it never takes focus, so the keyboard stays up. `onDismiss` reports a tap outside, the page decides whether to close. */
export interface PopoverProps {
    open: boolean;
    /** preferred side of the anchor; flips when that side has no room */
    placement?: "above" | "below";
    /** as wide as the anchor instead of its content */
    matchAnchorWidth?: boolean;
    onDismiss?: (e: PopoverDismissPayload) => void;
    children?: Node | Node[];
}

/** M3 top app bar at the top of the page; children go in its trailing actions slot. It pads itself below the status bar; `height` is the bar's own height, the status bar not included. Its back button does what system back does on this page: the last enabled `BackHandler` gets it, otherwise the page closes. */
export interface TopAppBarProps extends LayoutProps {
    title?: string;
    /** shows a back button with this icon; unset, no back button (the first page of a flow) */
    backIcon?: string;
    /** what a screen reader says for the back button */
    backLabel?: string;
    children?: Node | Node[];
}

export interface BackHandlerBackPayload {
}

/** While `enabled`, system back and the `TopAppBar` back button on this page fire `onBack` instead of closing the page; draws nothing. Declared up front because the host cannot ask JS at the moment of the gesture. Of several enabled ones, the last mounted wins. */
export interface BackHandlerProps {
    enabled?: boolean;
    onBack?: (e: BackHandlerBackPayload) => void;
}

export interface MenuSelectPayload {
    value: string;
}

export interface MenuDismissPayload {
}

/** M3 dropdown menu next to its parent, which is the anchor; the items are its `Option` children. Shown while `open`; a pick (`onSelect`) or a tap outside (`onDismiss`) has already closed it when reported, and it stays closed until `open` goes false and true again. */
export interface MenuProps {
    open: boolean;
    onSelect?: (e: MenuSelectPayload) => void;
    onDismiss?: (e: MenuDismissPayload) => void;
    children?: Node | Node[];
}

export interface IntrinsicElements {
    Column: ColumnProps;
    Row: RowProps;
    Box: BoxProps;
    Text: TextProps;
    Button: ButtonProps;
    RadioButton: RadioButtonProps;
    TextField: TextFieldProps;
    LazyColumn: LazyColumnProps;
    Spacer: SpacerProps;
    Icon: IconProps;
    Loading: LoadingProps;
    BottomSheet: BottomSheetProps;
    Divider: DividerProps;
    Checkbox: CheckboxProps;
    CodeField: CodeFieldProps;
    Select: SelectProps;
    Option: OptionProps;
    Popover: PopoverProps;
    TopAppBar: TopAppBarProps;
    BackHandler: BackHandlerProps;
    Menu: MenuProps;
}

export const Column = "Column";
export const Row = "Row";
export const Box = "Box";
export const Text = "Text";
export const Button = "Button";
export const RadioButton = "RadioButton";
export const TextField = "TextField";
export const LazyColumn = "LazyColumn";
export const Spacer = "Spacer";
export const Icon = "Icon";
export const Loading = "Loading";
export const BottomSheet = "BottomSheet";
export const Divider = "Divider";
export const Checkbox = "Checkbox";
export const CodeField = "CodeField";
export const Select = "Select";
export const Option = "Option";
export const Popover = "Popover";
export const TopAppBar = "TopAppBar";
export const BackHandler = "BackHandler";
export const Menu = "Menu";