@kromatv/sdk 0.1.40-canary.0

package/types/ui/src/components/molecules/disclosure/disclosure.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+interface DisclosureRootProps {
+    /** Present: you own the state (controlled). Absent: the disclosure runs
+     *  itself from `defaultOpen` and reports through `onOpenChange`. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (next: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+    /** A `<Disclosure.Trigger>` and a `<Disclosure.Panel>` must be DIRECT
+     *  children to take their slot; given a panel, it IS the body and stray
+     *  children beside it are dropped. */
+    children?: ReactNode;
+}
+declare function Root({ open: openProp, defaultOpen, onOpenChange, style, children, }: Readonly<DisclosureRootProps>): import("react").JSX.Element;
+interface DisclosureTriggerProps {
+    /** The section's heading. A plain string names the row to assistive tech as
+     *  well. */
+    children: ReactNode;
+    /** Names the row to assistive tech. It draws NOTHING: reach for it only where
+     *  the heading is richer than a string and so has no plain text to be read. */
+    label?: string;
+}
+/** What opens the section, and the rule above it. The whole row is the control:
+ *  one D-pad stop, and the chevron is a face rather than a second target. */
+declare function Trigger({ children, label }: Readonly<DisclosureTriggerProps>): import("react").JSX.Element;
+/** The region the trigger swaps in. It is unmounted while closed, so nothing
+ *  inside it is reachable by a pointer, a screen reader or a D-pad. */
+declare function Panel({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element | null;
+/**
+ * A collapsible section behind a divider header.
+ *
+ * ```tsx
+ * <Disclosure.Root>
+ *   <Disclosure.Trigger>Avance</Disclosure.Trigger>
+ *   <Field.Root label="Endpoint" />
+ * </Disclosure.Root>
+ *
+ * <Disclosure.Root defaultOpen>
+ *   <Disclosure.Trigger>Avance</Disclosure.Trigger>
+ *   <Disclosure.Panel>
+ *     <Field.Root label="Endpoint" />
+ *   </Disclosure.Panel>
+ * </Disclosure.Root>
+ * ```
+ */
+declare const Disclosure: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+export type { DisclosureRootProps, DisclosureTriggerProps };
+export { Disclosure };

package/types/ui/src/components/molecules/disclosure/index.d.ts

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

package/types/ui/src/components/molecules/dropzone/dropzone-parts.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { type IconName } from '#ui/components/atoms/icon';
+export declare const SURFACE_SHAPE: {
+    readonly borderWidth: 1.5;
+    readonly borderRadius: 16;
+    readonly paddingX: 24;
+    readonly paddingY: 28;
+    readonly gap: 8;
+};
+/** A file the zone turned away, with the rule it broke. */
+export interface DropzoneRejection {
+    file: File;
+    reason: 'size' | 'type';
+}
+export interface DropzoneRootProps {
+    /** Names the surface to assistive tech, which cannot read a drawing. A zone
+     *  with a `<Dropzone.Title>` may leave it out: the title names it. */
+    label?: string;
+    /** Comma-separated types, as the native picker takes them (`.torrent`,
+     *  `image/*`). Also filters what a DROP is allowed to carry. */
+    accept?: string;
+    /** Take more than one file. Defaults to one. */
+    multiple?: boolean;
+    /** Turn away anything larger, in bytes. */
+    maxSize?: number;
+    disabled?: boolean;
+    /** Busy: the surface stops taking files and spins instead. */
+    loading?: boolean;
+    /** The files that got through. */
+    onDrop?: (files: File[]) => void;
+    onReject?: (rejections: DropzoneRejection[]) => void;
+    /** A `<Dropzone.Icon>`, a `<Dropzone.Title>`, a `<Dropzone.Description>`. */
+    children?: ReactNode;
+}
+/** The glyph above the title. Decorative: the title carries the meaning. */
+export declare function DropzoneIcon({ name }: Readonly<{
+    name?: IconName;
+}>): import("react").JSX.Element;
+/** What the surface takes, in the operator's words. */
+export declare function DropzoneTitle({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The quieter second line: the formats, the size ceiling, how many. */
+export declare function DropzoneDescription({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;

package/types/ui/src/components/molecules/dropzone/dropzone-sift.d.ts

@@ -0,0 +1,6 @@
+import type { DropzoneRejection, DropzoneRootProps } from './dropzone-parts';
+/** Split what arrived into what the zone takes and what it turns away. */
+export declare function sift(files: readonly File[], { accept, maxSize, multiple }: Pick<DropzoneRootProps, 'accept' | 'maxSize' | 'multiple'>): {
+    taken: File[];
+    turned: DropzoneRejection[];
+};

package/types/ui/src/components/molecules/dropzone/dropzone.d.ts

@@ -0,0 +1,21 @@
+import { DropzoneDescription, DropzoneIcon, type DropzoneRootProps, DropzoneTitle } from './dropzone-parts';
+declare function Root({ label, disabled, children }: Readonly<DropzoneRootProps>): import("react").JSX.Element;
+/**
+ * A surface files are dropped on, or clicked to browse for.
+ *
+ * ```tsx
+ * <Dropzone.Root accept=".torrent" maxSize={1024 * 1024} onDrop={([file]) => queue(file)}>
+ *   <Dropzone.Icon />
+ *   <Dropzone.Title>Drop a .torrent here</Dropzone.Title>
+ *   <Dropzone.Description>or click to browse</Dropzone.Description>
+ * </Dropzone.Root>
+ * ```
+ */
+declare const Dropzone: {
+    Root: typeof Root;
+    Icon: typeof DropzoneIcon;
+    Title: typeof DropzoneTitle;
+    Description: typeof DropzoneDescription;
+};
+export type { DropzoneRejection, DropzoneRootProps } from './dropzone-parts';
+export { Dropzone };

package/types/ui/src/components/molecules/dropzone/dropzone.web.d.ts

@@ -0,0 +1,11 @@
+import { DropzoneDescription, DropzoneIcon, type DropzoneRootProps, DropzoneTitle } from './dropzone-parts';
+declare function Root({ label, accept, multiple, maxSize, disabled, loading, onDrop, onReject, children, }: Readonly<DropzoneRootProps>): import("react").JSX.Element;
+/** A surface files are dropped on, or clicked to browse for. See ./dropzone. */
+declare const Dropzone: {
+    Root: typeof Root;
+    Icon: typeof DropzoneIcon;
+    Title: typeof DropzoneTitle;
+    Description: typeof DropzoneDescription;
+};
+export type { DropzoneRejection, DropzoneRootProps } from './dropzone-parts';
+export { Dropzone };

package/types/ui/src/components/molecules/dropzone/index.d.ts

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

package/types/ui/src/components/molecules/empty-state/empty-state.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { type IconName } from '#ui/components/atoms/icon';
+type EmptyStateSize = 'sm' | 'md' | 'tv';
+type EmptyStateLayout = 'inline' | 'fill';
+type EmptyStateMedia = 'icon' | 'plain';
+interface MediaProps {
+    /** `icon` sinks the mark into the round well; `plain` draws no well, for media
+     *  that brings its own shape. */
+    variant?: EmptyStateMedia;
+    /** Sugar for the common case: a glyph, drawn at the size the Root declared.
+     *  Media the kit cannot size for you goes through `children` instead. */
+    name?: IconName;
+    children?: ReactNode;
+}
+interface RootProps {
+    /** `sm` stands in for a list inside a section, `md` for a page, `tv` for a
+     *  page read across a room. */
+    size?: EmptyStateSize;
+    /** `fill` makes the state THE page: it takes the whole region it was given
+     *  and centres in it, instead of hanging below whatever came before. */
+    layout?: EmptyStateLayout;
+    /** The mark, as a glyph the kit can size, drawn above the column. Media it
+     *  cannot size goes through <EmptyState.Media> instead. */
+    icon?: IconName;
+    /** The column, in the order it is read: a <Title>, a <Hint>, a <Detail>, an
+     *  <Actions>. */
+    children?: ReactNode;
+}
+declare function Root({ size, layout, icon, children }: Readonly<RootProps>): import("react").JSX.Element;
+/** The mark that says which kind of nothing this is. `icon` sinks its child into
+ *  the kit's round well; `plain` leaves media that brings its own shape (a
+ *  poster, an avatar, an illustration) alone. */
+declare function Media({ variant, name, children }: Readonly<MediaProps>): import("react").JSX.Element;
+/** What is missing. */
+declare function Title({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** Why it is missing, and what would fix it. */
+declare function Hint({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The raw cause, when there is one worth showing: an error message, a path.
+ *  Set apart in a chip under the hint, the way the error pages do. */
+declare function Detail({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The one thing to do about it, held off the text above it. */
+declare function Actions({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+declare const EmptyState: {
+    Root: typeof Root;
+    Media: typeof Media;
+    Title: typeof Title;
+    Hint: typeof Hint;
+    Detail: typeof Detail;
+    Actions: typeof Actions;
+};
+export type { EmptyStateLayout, EmptyStateMedia, EmptyStateSize, MediaProps as EmptyStateMediaProps, RootProps as EmptyStateRootProps, };
+export { EmptyState };

package/types/ui/src/components/molecules/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './empty-state';

package/types/ui/src/components/molecules/field/field.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+import { type TextAreaProps } from '#ui/components/atoms/text-area';
+import { type TextFieldProps } from '#ui/components/atoms/text-field';
+import type { ControlSize } from '#ui/lib/field-shell';
+interface FieldRootProps extends Omit<BoxProps, 'children'> {
+    /** Names the control to assistive tech, and heads the field unless `hideLabel`. */
+    label: string;
+    /** Drops the label ROW; the label still reaches the control as its name. */
+    hideLabel?: boolean;
+    /** Takes the <Field.Hint>'s place and marks the control invalid. Empty reads
+     *  as none. */
+    error?: string;
+    /** Defaults to whether there is an `error`. */
+    invalid?: boolean;
+    /** The shell size every part takes, defaulting to the app's (`setEntryDefaults`). */
+    size?: ControlSize;
+    /** What the field's entry binds to. A part with its own `value`,
+     *  `defaultValue` or `onValueChange` holds its state instead. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+    /** Without a control of its own, the field renders a <Field.Input>. A
+     *  <Field.Hint> is sorted under the control, so both must be DIRECT children. */
+    children?: ReactNode;
+}
+declare function Root({ label, hideLabel, error, invalid, size, value: valueProp, defaultValue, onValueChange, children, ...box }: Readonly<FieldRootProps>): import("react").JSX.Element;
+interface EntryValue {
+    /** Held by the entry itself. Given none of the three, it binds to the Root's. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+}
+interface FieldInputProps extends Omit<TextFieldProps, 'label' | 'invalid' | 'size' | 'onValueChange'>, EntryValue {
+}
+/** The single-line entry. `type` wires the keyboard, the autofill and the
+ *  masking; the label, the invalid tint and the shell size come from the Root. */
+declare function Input({ value, defaultValue, onValueChange, ...props }: Readonly<FieldInputProps>): import("react").JSX.Element;
+interface FieldTextareaProps extends Omit<TextAreaProps, 'label' | 'invalid' | 'size' | 'onValueChange'>, EntryValue {
+}
+/** The multi-line entry: it opens `rows` tall and grows to `maxRows`. One of its
+ *  lines is one line of a <Field.Input>, so the two align in a form. */
+declare function Textarea({ value, defaultValue, onValueChange, ...props }: Readonly<FieldTextareaProps>): import("react").JSX.Element;
+/** The note under the control: the help text, or the Root's `error` in its
+ *  place. Wherever it is written, it renders under the control. */
+declare function Hint({ children }: Readonly<{
+    children?: ReactNode;
+}>): import("react").JSX.Element | null;
+declare const Field: {
+    Root: typeof Root;
+    Input: typeof Input;
+    Textarea: typeof Textarea;
+    Hint: typeof Hint;
+};
+export type { FieldInputProps, FieldRootProps, FieldTextareaProps };
+export { Field };

package/types/ui/src/components/molecules/field/index.d.ts

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

package/types/ui/src/components/molecules/hint/hint.d.ts

@@ -0,0 +1,23 @@
+import type { StyleProp, TextStyle } from 'react-native';
+import type { ColorToken } from '#ui/core';
+import { type BoxProps } from '#ui/components/atoms/box';
+declare const KEYS: {
+    readonly left: 'chevron-left';
+    readonly right: 'chevron-right';
+    readonly up: 'chevron-up';
+    readonly down: 'chevron-down';
+    readonly back: 'backspace';
+    readonly play: 'player-play-filled';
+    readonly pause: 'player-pause-filled';
+};
+type HintKey = keyof typeof KEYS;
+interface HintProps extends Omit<BoxProps, 'children'> {
+    /** The translated line, with `{left}`-style tokens where keys belong. */
+    text: string;
+    size?: number;
+    color?: ColorToken | (string & {});
+    textStyle?: StyleProp<TextStyle>;
+}
+declare function Hint({ text, size, color, textStyle, ...box }: Readonly<HintProps>): import("react").JSX.Element;
+export type { HintKey, HintProps };
+export { Hint, KEYS as HINT_KEYS };

package/types/ui/src/components/molecules/hint/index.d.ts

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

package/types/ui/src/components/molecules/index.d.ts

@@ -0,0 +1,70 @@
+export type { AddTileProps, AddTileSize } from './add-tile';
+export { AddTile, addTileVariants } from './add-tile';
+export type { AlphabetItemProps, AlphabetRailRootProps, AlphabetRailSize, LetterRange, } from './alphabet-rail';
+export { AlphabetRail } from './alphabet-rail';
+export type { BackButtonProps } from './back-button';
+export { BackButton } from './back-button';
+export type { ButtonGroupAddonProps, ButtonGroupRootProps, GroupMember, GroupOrientation, GroupPosition, } from './button-group';
+export { ButtonGroup, useGroupMember, useGroupShape } from './button-group';
+export type { CalloutRootProps, CalloutTone } from './callout';
+export { Callout } from './callout';
+export type { CategoryTileProps, CategoryTileSize } from './category-tile';
+export { CategoryTile, categoryTileVariants } from './category-tile';
+export type { ChoiceItemProps, ChoiceRootProps, MultipleRootProps, SingleRootProps, } from './choice-list';
+export { ChoiceList } from './choice-list';
+export type { CopyButtonProps } from './copy-button';
+export { CopyButton } from './copy-button';
+export type { DataFieldRootProps, DataFieldValueProps } from './data-field';
+export { DataField } from './data-field';
+export type { DisclosureRootProps, DisclosureTriggerProps } from './disclosure';
+export { Disclosure } from './disclosure';
+export type { DropzoneRejection, DropzoneRootProps } from './dropzone';
+export { Dropzone } from './dropzone';
+export type { EmptyStateLayout, EmptyStateRootProps, EmptyStateSize } from './empty-state';
+export { EmptyState } from './empty-state';
+export type { FieldInputProps, FieldRootProps, FieldTextareaProps } from './field';
+export { Field } from './field';
+export type { HintKey, HintProps } from './hint';
+export { HINT_KEYS, Hint } from './hint';
+export type { InputGroupAddonProps, InputGroupRootProps } from './input-group';
+export { InputGroup } from './input-group';
+export type { KeypadProps } from './keypad';
+export { Keypad } from './keypad';
+export type { LegendItemProps, LegendRootProps } from './legend';
+export { Legend } from './legend';
+export type { ListItemProps, ListRootProps } from './list';
+export { List } from './list';
+export type { ListGroupProps, ListRowRootProps, ListRowSize } from './list-row';
+export { ListRow, listRowVariants } from './list-row';
+export type { MediaCardProps } from './media-card';
+export { MediaCard, tintGradient } from './media-card';
+export type { NavPillIcon, NavPillItemProps, NavPillLabels, NavPillRootProps, NavPillSize, } from './nav-pill';
+export { NavPill } from './nav-pill';
+export type { OtpFieldRootProps, OtpGroupProps, OtpSize, OtpSlot } from './otp-field';
+export { OtpField, otpVariants, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, useOtpSlot, } from './otp-field';
+export type { PageHeaderRootProps, PageHeaderTitleProps } from './page-header';
+export { PageHeader } from './page-header';
+export type { PageSlot, PaginationItemProps, PaginationRootProps, PaginationStatusProps, PaginationStepProps, } from './pagination';
+export { Pagination, pageWindow, paginationVariants } from './pagination';
+export type { PersonCardProps, PersonCardSize } from './person-card';
+export { PersonCard, personCardVariants } from './person-card';
+export type { PinFieldProps } from './pin-field';
+export { PinField } from './pin-field';
+export type { PosterCardProps } from './poster-card';
+export { PosterCard } from './poster-card';
+export type { SectionRootProps } from './section';
+export { Section } from './section';
+export type { SegmentGroupRootProps } from './segment-group';
+export { SegmentGroup, segmentGroupVariants } from './segment-group';
+export type { SelectDismissReason, SelectItemProps, SelectOpenDetails, SelectOpenReason, SelectOption, SelectRootProps, SelectTriggerProps, SelectValueDetails, } from './select';
+export { Select, selectTriggerVariants } from './select';
+export type { StatCardRootProps, StatCardValueProps } from './stat-card';
+export { StatCard } from './stat-card';
+export type { StepperFlow, StepperFlowOptions, StepperItemProps, StepperItemState, StepperListProps, StepperMoveProps, StepperOrientation, StepperPanelProps, StepperRootProps, StepperStep, StepperValueDetails, } from './stepper';
+export { Stepper, stepperVariants, useStepper, useStepperItem, useSteps } from './stepper';
+export type { ThemeSwitchProps } from './theme-switch';
+export { ThemeSwitch } from './theme-switch';
+export type { TimelineItemProps, TimelineRootProps, TimelineTone } from './timeline';
+export { Timeline } from './timeline';
+export type { TooltipProps } from './tooltip';
+export { Tooltip } from './tooltip';

package/types/ui/src/components/molecules/input-group/index.d.ts

@@ -0,0 +1,3 @@
+export type { InputGroupRootProps } from './input-group';
+export { InputGroup } from './input-group';
+export type { AddonProps as InputGroupAddonProps } from './input-group-parts';

package/types/ui/src/components/molecules/input-group/input-group-context.d.ts

@@ -0,0 +1,34 @@
+import type { ControlMetrics, ControlSize } from '#ui/lib/field-shell';
+/** Where an addon sits: `inline` is the control's own row, `block` is a bar
+ *  above or below it. */
+type AddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+interface InputGroupContext {
+    /** The shell's name, worn by the entry as well: the shell is what a reader
+     *  meets, but the entry is what focus lands on. */
+    label: string;
+    /** The shell's size, handed to the controls the parts wrap. */
+    size: ControlSize | undefined;
+    metrics: ControlMetrics;
+    invalid: boolean;
+    /** The padding the control draws itself, zero where an addon holds it. */
+    padStart: number;
+    padEnd: number;
+    /** Told by the control, painted by the shell. */
+    onFocusChange: (focused: boolean) => void;
+    /** Registered by the control so a press on the padding types into it. */
+    registerFocus: (focus: () => void) => void;
+    focusControl: () => void;
+}
+declare const Context: import("react").Context<InputGroupContext | null>, useInputGroup: (part: string) => InputGroupContext;
+/** What an addon tells each control inside it: the side, and whether the
+ *  control sits at the addon's outer edge (only that one pulls in). */
+interface AddonSlot {
+    align: AddonAlign;
+    edge: boolean;
+}
+declare const AddonContext: import("react").Context<AddonSlot | null>;
+declare function useAddonSlot(): AddonSlot | null;
+/** How far a control inside the shell sits from its edge. */
+declare const INSET = 6;
+export type { AddonAlign, AddonSlot, InputGroupContext };
+export { AddonContext, Context, INSET, useAddonSlot, useInputGroup };

package/types/ui/src/components/molecules/input-group/input-group-parts.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ButtonProps } from '#ui/components/atoms/button';
+import { type IconButtonProps } from '#ui/components/atoms/icon-button';
+import { type TextAreaProps } from '#ui/components/atoms/text-area';
+import { type TextFieldProps } from '#ui/components/atoms/text-field';
+import { type AddonAlign } from './input-group-context';
+/** The entry, stripped of the shell it usually draws: that belongs to Root. */
+declare function GroupInput(props: Readonly<Omit<TextFieldProps, 'size'>>): import("react").JSX.Element;
+/** The multi-line entry, and the one the block addons are for. */
+declare function GroupTextarea(props: Readonly<Omit<TextAreaProps, 'size'>>): import("react").JSX.Element;
+interface AddonProps {
+    /** Where it sits, not where it is written. */
+    align?: AddonAlign;
+    /** A hairline between a block addon and the entry. */
+    divider?: boolean;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    children: ReactNode;
+}
+declare function Addon({ align, divider, onPress, style, children, }: Readonly<AddonProps>): import("react").JSX.Element;
+/** A labelled button that lives inside the shell. */
+declare function GroupButton({ style, ...props }: Readonly<ButtonProps>): import("react").JSX.Element;
+/** The icon-only one: its `label` is the accessible name, not visible text. */
+declare function GroupIconButton({ style, ...props }: Readonly<IconButtonProps>): import("react").JSX.Element;
+/** Unit text inside an addon. */
+declare function GroupText({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export type { AddonProps };
+export { Addon, GroupButton, GroupIconButton, GroupInput, GroupText, GroupTextarea };

package/types/ui/src/components/molecules/input-group/input-group.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type ControlSize } from '#ui/lib/field-shell';
+import { Addon, GroupButton, GroupIconButton, GroupInput, GroupText, GroupTextarea } from './input-group-parts';
+interface InputGroupRootProps {
+    /** Names the whole control to assistive tech: the entry plus its addons is
+     *  one thing to a reader, whatever it is made of. The entry wears it too,
+     *  unless it names itself: that is where focus lands. */
+    label: string;
+    /** The control shell's size; see <TextField>. */
+    size?: ControlSize;
+    invalid?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children: ReactNode;
+}
+declare function Root({ label, size, invalid, style, children }: Readonly<InputGroupRootProps>): import("react").JSX.Element;
+/**
+ * An entry and its addons as one control.
+ *
+ * ```tsx
+ * <InputGroup.Root label="Search">
+ *   <InputGroup.Addon><Icon name="search" size={18} /></InputGroup.Addon>
+ *   <InputGroup.Input placeholder="Search" />
+ *   <InputGroup.Addon align="inline-end"><Kbd>K</Kbd></InputGroup.Addon>
+ * </InputGroup.Root>
+ * ```
+ */
+declare const InputGroup: {
+    Root: typeof Root;
+    Input: typeof GroupInput;
+    Textarea: typeof GroupTextarea;
+    Addon: typeof Addon;
+    Button: typeof GroupButton;
+    IconButton: typeof GroupIconButton;
+    Text: typeof GroupText;
+};
+export type { InputGroupRootProps };
+export { InputGroup };

package/types/ui/src/components/molecules/keypad/index.d.ts

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

package/types/ui/src/components/molecules/keypad/keypad.d.ts

@@ -0,0 +1,44 @@
+import { type StyleDecl } from '#ui/core';
+type KeypadSize = 'tv' | 'compact';
+declare const keypadVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+}, {
+    readonly kind: {
+        readonly digit: {
+            readonly label: {
+                readonly text: "subheading";
+            };
+        };
+        readonly delete: {};
+    };
+    readonly size: {
+        readonly tv: {
+            readonly root: {
+                readonly w: 88;
+                readonly h: 72;
+            };
+        };
+        readonly compact: {
+            readonly root: {
+                readonly w: 80;
+                readonly h: 64;
+            };
+        };
+    };
+}>;
+interface KeypadProps {
+    onDigit: (digit: string) => void;
+    onDelete: () => void;
+    /** `tv` is a remote's pad, read across a room. `compact` is a thumb's, for a
+     *  phone, where the pad shares the screen with everything else. */
+    size?: KeypadSize;
+    /** Takes the screen's focus on mount, landing on the 1 key. On by default:
+     *  a PIN screen has nowhere else worth starting. */
+    autoFocus?: boolean;
+    /** Ignore presses (a code is being checked, a lockout is counting down). */
+    disabled?: boolean;
+}
+declare function Keypad({ onDigit, onDelete, size, autoFocus, disabled, }: Readonly<KeypadProps>): import("react").JSX.Element;
+export type { KeypadProps };
+export { Keypad, keypadVariants };

package/types/ui/src/components/molecules/legend/index.d.ts

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

package/types/ui/src/components/molecules/legend/legend.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+import type { ColorValue } from '#ui/core';
+interface LegendRootProps extends Omit<BoxProps, 'children'> {
+    children?: ReactNode;
+}
+declare function Root({ children, ...box }: Readonly<LegendRootProps>): import("react").JSX.Element;
+interface LegendItemProps {
+    /** The series' own paint, as the chart was given it. */
+    color: ColorValue;
+    /** What the dot stands for. */
+    children?: ReactNode;
+}
+/** One entry: the dot and what it stands for. The dot is a face and never a
+ *  control - a legend reports, it does not filter. */
+declare function Item({ color, children }: Readonly<LegendItemProps>): import("react").JSX.Element;
+/**
+ * The key to a chart's colours.
+ *
+ * ```tsx
+ * <Legend.Root>
+ *   <Legend.Item color={CHART_SERIES.films}>Films</Legend.Item>
+ *   <Legend.Item color={CHART_SERIES.tv}>Series</Legend.Item>
+ * </Legend.Root>
+ * ```
+ */
+declare const Legend: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+export type { LegendItemProps, LegendRootProps };
+export { Legend };

package/types/ui/src/components/molecules/list/index.d.ts

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

package/types/ui/src/components/molecules/list/list.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+interface ListRootProps {
+    /** Numbers the items in the order they were written, in place of bullets. */
+    ordered?: boolean;
+    /** Names the list to assistive tech. Draws nothing. */
+    label?: string;
+    /** A DIRECT <List.Item> child: only a direct child is counted, which is what
+     *  lets an ordered list number itself. */
+    children?: ReactNode;
+}
+declare function Root({ ordered, label, children }: Readonly<ListRootProps>): import("react").JSX.Element;
+interface ListItemProps {
+    /** Draws a checkbox face in place of the marker: a task, ticked or not. The
+     *  face is a drawing and never a control - a document is not a form. */
+    checked?: boolean;
+    /** A string is set in the body role; anything else is drawn as it was
+     *  written, so an item can hold a paragraph or a block of its own. */
+    children?: ReactNode;
+}
+declare function Item({ checked, children }: Readonly<ListItemProps>): import("react").JSX.Element;
+/**
+ * A bulleted, numbered or ticked list.
+ *
+ * ```tsx
+ * <List.Root>
+ *   <List.Item>Direct play whenever the client can decode it.</List.Item>
+ *   <List.Item>Remux only where the container is the problem.</List.Item>
+ * </List.Root>
+ *
+ * <List.Root ordered>
+ *   <List.Item>Install the module.</List.Item>
+ *   <List.Item>Give it a port.</List.Item>
+ * </List.Root>
+ * ```
+ */
+declare const List: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+export type { ListItemProps, ListRootProps };
+export { List };

package/types/ui/src/components/molecules/list-row/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListGroupProps } from './list-group';
+export { ListGroup } from './list-group';
+export * from './list-row';

package/types/ui/src/components/molecules/list-row/list-group.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type ControlSize } from '#ui/lib/field-shell';
+interface ListGroupSlot {
+    size: ControlSize;
+}
+/** The group this row is a member of, or `null` when it stands alone. A member
+ * must not draw a surface of its own, and takes the group's size. */
+export declare function useListGroup(): ListGroupSlot | null;
+interface ListGroupProps {
+    children: ReactNode;
+    /** The size members fall back to, defaulting to the app's
+     *  (`setEntryDefaults`). A member's own `size` still wins. */
+    size?: ControlSize;
+    /** Insets the hairlines from the card's edge, so they read as separators
+     *  between rows rather than as full-width rules. Defaults to the members'
+     *  own side padding. */
+    divider?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ListGroup({ children, size, divider, style }: Readonly<ListGroupProps>): import("react").JSX.Element;
+export type { ListGroupProps, ListGroupSlot };
+export { ListGroup };