@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/components/atoms/img/img.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { CornerValue } from '#ui/core/tokens';
+export interface ImgProps {
+    /** Already-sized artwork URL. This component never rewrites it. */
+    src: string | null;
+    /** Accessibility text. Empty (the default) marks the artwork decorative. */
+    alt?: string;
+    /** Applies to both the load-in fade and the cross-fade on `src` change. */
+    duration?: number;
+    /** Defaults to `cover`. */
+    fit?: 'cover' | 'contain';
+    /** CSS object-position, e.g. `'50% 28%'` (heroes favour the upper third).
+     *  Only has a visible effect when `fit` is `cover` AND the art's aspect ratio
+     *  differs from the box's, which is why rail tiles leave it at the default. */
+    position?: string;
+    /** CSS background painted behind the art: the instant-visible fallback fill
+     *  shown while loading and on error. */
+    background?: string;
+    /** Corner, by token name or in px; the container clips the art to it. */
+    radius?: CornerValue;
+    /** Stretch to fill a positioned parent (absolute, inset 0). */
+    fill?: boolean;
+    /** Drawn under the art while it loads (a blur hash, a glyph). */
+    placeholder?: ReactNode;
+    /** Drawn when there is no `src` or it failed (initials, a fallback glyph),
+     *  so the surface degrades to something said rather than to blank. */
+    fallback?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Mark this the above-the-fold LCP art: load it eagerly at high priority
+     *  instead of lazily. Web only, and at most one image per screen. */
+    priority?: boolean;
+    /**
+     * Skip holding the previous image underneath while the next one loads; just
+     * fade the new one in over the background. Off by default: a full-screen
+     * backdrop that swaps on every focus settle would otherwise recomposite two
+     * full-size layers for the length of the fade.
+     */
+    noCrossFade?: boolean;
+    /** Browser targets: keep the picture on a compositor layer of its own, so
+     *  full-screen art is handed to the GPU instead of rasterized on the CPU. */
+    layered?: boolean;
+    /** The art covers its whole box with no transparency (a poster, a backdrop):
+     *  `background` stops drawing once the art has faded in, and stays off while a
+     *  cross-fade holds that art under the next one. */
+    opaque?: boolean;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+export declare const IMG_FADE_MS = 400;
+declare function Img({ src: requested, alt, duration, fit, position, background, radius: corner, fill, placeholder, fallback, style, priority, noCrossFade, layered, opaque, onLoad, onError, }: Readonly<ImgProps>): ReactNode;
+export { Img };

package/types/ui/src/components/atoms/img/index.d.ts

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

package/types/ui/src/components/atoms/img/use-cross-fade.d.ts

@@ -0,0 +1,13 @@
+interface CrossFade {
+    loaded: boolean;
+    errored: boolean;
+    under: string | null;
+    markLoaded: () => void;
+    markErrored: () => void;
+}
+interface CrossFadeOptions {
+    crossFade: boolean;
+    watched: boolean;
+}
+declare function useCrossFade(src: string | null, duration: number, { crossFade, watched }: CrossFadeOptions): CrossFade;
+export { useCrossFade };

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

@@ -0,0 +1,66 @@
+export type { ArtScrimProps, ArtScrimVariant } from './art-scrim';
+export { ArtScrim, CARD_SCRIM, POSTER_SCRIM } from './art-scrim';
+export type { AvatarProps } from './avatar';
+export { AVATAR_GRADIENT, AVATAR_GRADIENTS, AVATAR_ROUNDNESS, Avatar, gradientFor, initialsOf, } from './avatar';
+export type { BadgeProps, BadgeTone } from './badge';
+export { Badge, badgeVariants, qualityTone } from './badge';
+export type { BoxProps } from './box';
+export { Box, Column, Row, Spacer } from './box';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button';
+export { Button, buttonVariants } from './button';
+export type { CheckboxFaceProps, CheckboxProps, CheckboxSize } from './checkbox';
+export { Checkbox, CheckboxFace, checkboxVariants } from './checkbox';
+export type { ChipProps } from './chip';
+export { Chip, chipVariants } from './chip';
+export type { DividerProps } from './divider';
+export { Divider } from './divider';
+export type { ExpandableTextProps } from './expandable-text';
+export { ExpandableText } from './expandable-text';
+export type { Delegate, FocusableProps, FocusHandle, FocusState, HostElement } from './focusable';
+export { delegateOf, Focusable } from './focusable';
+export type { FrostBackdropProps, FrostCoat, FrostOptions, FrostProps } from './frost';
+export { Frost, useFrostCoat } from './frost';
+export type { GridProps } from './grid';
+export { cellWidth, columnsFor, Grid } from './grid';
+export type { GroundProps } from './ground';
+export { Ground } from './ground';
+export type { IconName, IconProps } from './icon';
+export { Icon } from './icon';
+export type { IconButtonProps } from './icon-button';
+export { IconButton, iconButtonVariants } from './icon-button';
+export type { IconWellProps, IconWellSize, IconWellTone } from './icon-well';
+export { IconWell, iconWellVariants } from './icon-well';
+export type { ImgProps } from './img';
+export { IMG_FADE_MS, Img } from './img';
+export type { KbdProps } from './kbd';
+export { Kbd } from './kbd';
+export type { LogoProps } from './logo';
+export { Logo } from './logo';
+export type { NumberFieldProps } from './number-field';
+export { NumberField } from './number-field';
+export type { ProgressProps } from './progress';
+export { clamp01, Progress } from './progress';
+export type { ProgressRingProps } from './progress-ring';
+export { ProgressRing } from './progress-ring';
+export type { RadioFaceProps, RadioProps, RadioSize } from './radio';
+export { Radio, RadioFace, radioVariants } from './radio';
+export type { CardSkeletonProps, PosterSkeletonProps, SkeletonProps, SkeletonShape, TableSkeletonProps, } from './skeleton';
+export { CardSkeleton, PosterSkeleton, Skeleton, TableSkeleton } from './skeleton';
+export type { SpinnerProps } from './spinner';
+export { Spinner } from './spinner';
+export type { StatusDotProps } from './status-dot';
+export { StatusDot } from './status-dot';
+export type { SurfacePad, SurfaceProps, SurfaceTone } from './surface';
+export { Surface, surfaceVariants } from './surface';
+export type { SwitchProps, SwitchSize } from './switch';
+export { Switch, SwitchFace, switchVariants } from './switch';
+export type { TextProps } from './text';
+export { Text } from './text';
+export type { TextAreaProps } from './text-area';
+export type { TextFieldProps, TextFieldType } from './text-field';
+export type { VeilProps } from './veil';
+export { Veil } from './veil';
+export type { WatchedBadgeProps } from './watched-badge';
+export { WatchedBadge } from './watched-badge';
+export type { WheelProps } from './wheel';
+export { Wheel } from './wheel';

package/types/ui/src/components/atoms/kbd/index.d.ts

@@ -0,0 +1,2 @@
+export type { KbdProps } from './kbd';
+export { Kbd } from './kbd';

package/types/ui/src/components/atoms/kbd/kbd.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+interface KbdProps {
+    /** The key as it is printed on it: `esc`, `⌘`, `Ctrl`, `↵`. */
+    children: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * A keycap.
+ *
+ * ```tsx
+ * <Kbd>esc</Kbd>
+ * <Kbd>⌘ K</Kbd>
+ * ```
+ */
+declare function Kbd({ children, style }: Readonly<KbdProps>): import("react").JSX.Element;
+export type { KbdProps };
+export { Kbd };

package/types/ui/src/components/atoms/logo/index.d.ts

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

package/types/ui/src/components/atoms/logo/logo.d.ts

@@ -0,0 +1,11 @@
+import type { WheelSpin } from '#ui/lib/wheel-paths';
+interface LogoProps {
+    /** Lockup height, which is also the wheel-O diameter. */
+    size?: number;
+    markOnly?: boolean;
+    spin?: WheelSpin;
+    color?: string;
+}
+declare function Logo({ size, markOnly, spin, color }: Readonly<LogoProps>): import("react").JSX.Element;
+export type { LogoProps };
+export { Logo };

package/types/ui/src/components/atoms/number-field/index.d.ts

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

package/types/ui/src/components/atoms/number-field/number-field.d.ts

@@ -0,0 +1,11 @@
+import { type TextFieldProps } from '#ui/components/atoms/text-field';
+interface NumberFieldProps extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onValueChange' | 'type' | 'trailing'> {
+    value: number;
+    onValueChange: (next: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare function NumberField({ value, onValueChange, min, max, step, autoFocus, ...field }: Readonly<NumberFieldProps>): import("react").JSX.Element;
+export type { NumberFieldProps };
+export { NumberField };

package/types/ui/src/components/atoms/progress/index.d.ts

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

package/types/ui/src/components/atoms/progress/progress.d.ts

@@ -0,0 +1,28 @@
+import { type ColorValue } from '#ui/core';
+interface ProgressProps {
+    /** 0..1. Values outside the range are clamped, so a caller can pass a raw
+     *  ratio without guarding against a stale duration of 0. */
+    value?: number;
+    /** 0..1 of the track already loaded, drawn as a dimmer fill under `value`. A
+     *  range trailing `value` is held at `value`: nothing plays before it loads. */
+    buffered?: number;
+    /** In px. The design uses 6 on a rail tile. */
+    thickness?: number;
+    color?: ColorValue;
+    trackColor?: ColorValue;
+    /** Round the ends into a pill. Pass `false` for the flush bar pinned to a
+     *  tile's bottom edge. */
+    rounded?: boolean;
+    indeterminate?: boolean;
+    /** Breathe the track ahead of the fill: the bar is stalled on data and still
+     *  reports where it stands. Ignored under `indeterminate`, which has no
+     *  position to keep. */
+    waiting?: boolean;
+    /** Names the bar to assistive tech. Leave it out inside a control that
+     *  already carries the name (a rail tile's resume bar). */
+    label?: string;
+}
+declare function clamp01(n: number): number;
+declare function Progress({ value, buffered, thickness, color, trackColor, rounded, indeterminate, waiting, label, }: Readonly<ProgressProps>): import("react").JSX.Element;
+export type { ProgressProps };
+export { clamp01, Progress };

package/types/ui/src/components/atoms/progress-ring/index.d.ts

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

package/types/ui/src/components/atoms/progress-ring/progress-ring.d.ts

@@ -0,0 +1,10 @@
+import { type RingProps } from '#ui/lib/ring';
+interface ProgressRingProps extends RingProps {
+    indeterminate?: boolean;
+    /** Names the ring to assistive tech. Leave it out inside a control that
+     *  already carries the name. */
+    label?: string;
+}
+declare function ProgressRing({ indeterminate, label, ...props }: Readonly<ProgressRingProps>): import("react").JSX.Element;
+export type { ProgressRingProps };
+export { ProgressRing };

package/types/ui/src/components/atoms/radio/index.d.ts

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

package/types/ui/src/components/atoms/radio/radio.d.ts

@@ -0,0 +1,76 @@
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+type RadioSize = 'sm' | 'tv';
+declare const radioVariants: import("../../../core/types").SvFn<import("../../../core/types").StyleSlots<{
+    root: {
+        center: true;
+        radius: "circle";
+        border: "borderStrong";
+        bg: "tint/6";
+        _disabled: {
+            opacity: number;
+        };
+    };
+    dot: {
+        radius: "circle";
+        bg: "accentInk";
+    };
+}>, {
+    readonly size: {
+        readonly sm: {
+            readonly root: {
+                w: 20;
+                h: 20;
+            };
+            readonly dot: {
+                readonly w: 8;
+                readonly h: 8;
+            };
+        };
+        readonly tv: {
+            readonly root: {
+                w: 28;
+                h: 28;
+            };
+            readonly dot: {
+                readonly w: 11;
+                readonly h: 11;
+            };
+        };
+    };
+    readonly checked: {
+        readonly true: {
+            readonly root: {
+                readonly bg: "accent";
+                readonly border: "accent";
+                readonly _hover: {
+                    readonly bg: "accentHover";
+                    readonly border: "accentHover";
+                };
+            };
+        };
+        readonly false: {
+            readonly root: {
+                readonly _hover: {
+                    readonly bg: "tint/12";
+                    readonly border: "tint/32";
+                };
+            };
+        };
+    };
+}>;
+interface RadioProps extends Omit<FocusableProps, 'children' | 'onPress' | 'role' | 'checked' | 'style'> {
+    checked: boolean;
+    /** Fired on a press that PICKS this one. A press on the chosen radio is not
+     *  a change, so nothing is reported. */
+    onValueChange?: () => void;
+    size?: RadioSize;
+}
+declare function Radio({ checked, onValueChange, size, disabled, ...focusProps }: Readonly<RadioProps>): import("react").JSX.Element;
+interface RadioFaceProps {
+    checked: boolean;
+    size?: RadioSize;
+}
+/** The radio's visuals alone, for a row that is itself the control. */
+declare function RadioFace({ checked, size }: Readonly<RadioFaceProps>): import("react").JSX.Element;
+export type { RadioFaceProps, RadioProps, RadioSize };
+export { Radio, RadioFace, radioVariants };

package/types/ui/src/components/atoms/skeleton/card-skeleton.d.ts

@@ -0,0 +1,6 @@
+interface CardSkeletonProps {
+    fields?: number;
+}
+declare function CardSkeleton({ fields }: Readonly<CardSkeletonProps>): import("react").JSX.Element;
+export type { CardSkeletonProps };
+export { CardSkeleton };

package/types/ui/src/components/atoms/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export * from './card-skeleton';
+export * from './poster-skeleton';
+export * from './skeleton';
+export * from './table-skeleton';

package/types/ui/src/components/atoms/skeleton/poster-skeleton.d.ts

@@ -0,0 +1,7 @@
+interface PosterSkeletonProps {
+    /** An explicit tile width. Omit inside a grid cell, which already sets one. */
+    width?: number;
+}
+declare function PosterSkeleton({ width }: Readonly<PosterSkeletonProps>): import("react").JSX.Element;
+export type { PosterSkeletonProps };
+export { PosterSkeleton };

package/types/ui/src/components/atoms/skeleton/skeleton.d.ts

@@ -0,0 +1,20 @@
+import { type BoxStyleProps } from '#ui/core';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type TypeRole } from '#ui/core/tokens';
+/**
+ * What the placeholder stands in for. `block` is a plain rounded rectangle sized
+ * by the layout shorthands; `text` is a run of lines on a type role's rhythm;
+ * `circle` takes `size` as its diameter; `poster` and `still` take the card
+ * ratios (2:3 and 16:9) and only need a width.
+ */
+type SkeletonShape = 'block' | 'text' | 'circle' | 'poster' | 'still';
+interface SkeletonProps extends BoxStyleProps {
+    shape?: SkeletonShape;
+    lines?: number;
+    variant?: TypeRole;
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Skeleton({ shape, lines, variant, size, style, ...box }: Readonly<SkeletonProps>): import("react").JSX.Element;
+export type { SkeletonProps, SkeletonShape };
+export { Skeleton };

package/types/ui/src/components/atoms/skeleton/table-skeleton.d.ts

@@ -0,0 +1,6 @@
+interface TableSkeletonProps {
+    rows?: number;
+}
+declare function TableSkeleton({ rows }: Readonly<TableSkeletonProps>): import("react").JSX.Element;
+export type { TableSkeletonProps };
+export { TableSkeleton };

package/types/ui/src/components/atoms/spinner/index.d.ts

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

package/types/ui/src/components/atoms/spinner/spinner.d.ts

@@ -0,0 +1,14 @@
+interface SpinnerProps {
+    size?: number;
+    /** Defaults to a tenth of the size, floored at 2. */
+    thickness?: number;
+    /** A token name (`accent`, `textMuted`, `tint/40`) or a colour. Defaults to
+     *  the accent. */
+    color?: string;
+    /** What is being waited for. Leave it out inside a control that already says
+     *  it is busy (a <Button loading>), where a second name is noise. */
+    label?: string;
+}
+declare function Spinner({ size, thickness, color, label }: Readonly<SpinnerProps>): import("react").JSX.Element;
+export type { SpinnerProps };
+export { Spinner };

package/types/ui/src/components/atoms/status-dot/index.d.ts

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

package/types/ui/src/components/atoms/status-dot/status-dot.d.ts

@@ -0,0 +1,9 @@
+interface StatusDotProps {
+    /** `undefined` means not probed yet. */
+    online?: boolean;
+    size?: number;
+    overArt?: boolean;
+}
+declare function StatusDot({ online, size, overArt }: Readonly<StatusDotProps>): import("react").JSX.Element;
+export type { StatusDotProps };
+export { StatusDot };

package/types/ui/src/components/atoms/surface/index.d.ts

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

package/types/ui/src/components/atoms/surface/surface.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+import { type Variant } from '#ui/core';
+declare const surfaceVariants: import("../../../core/types").SvFn<{
+    root: import("#ui/core").StyleDecl;
+}, {
+    readonly tone: {
+        /** The default card: one step up from the page. */
+        readonly plain: {
+            readonly bg: "surface1";
+        };
+        /** Two steps up, for a panel sitting ON a card. */
+        readonly raised: {
+            readonly bg: "surface2";
+        };
+        /** No fill, just an edge. For grouping without adding weight. */
+        readonly outline: {
+            readonly bg: "transparent";
+            readonly border: "border";
+        };
+        /** Over artwork, where a solid fill would hide the image. */
+        readonly glass: {
+            readonly bg: "tint/6";
+            readonly border: "borderStrong";
+        };
+    };
+    readonly pad: {
+        readonly none: {};
+        readonly sm: {
+            readonly p: 12;
+        };
+        readonly md: {
+            readonly p: 20;
+        };
+        readonly lg: {
+            readonly p: 28;
+        };
+    };
+    readonly elevated: {
+        readonly true: {
+            readonly border: "borderStrong";
+        };
+    };
+}>;
+type SurfaceTone = Variant<typeof surfaceVariants, 'tone'>;
+type SurfacePad = Variant<typeof surfaceVariants, 'pad'>;
+interface SurfaceProps extends Omit<BoxProps, 'bg' | 'children'> {
+    tone?: SurfaceTone;
+    pad?: SurfacePad;
+    /** Set it off the page with the stronger edge. Nothing in the kit floats. */
+    elevated?: boolean;
+    children?: ReactNode;
+}
+declare function Surface({ tone, pad, elevated, style, children, ...box }: Readonly<SurfaceProps>): import("react").JSX.Element;
+export type { SurfacePad, SurfaceProps, SurfaceTone };
+export { Surface, surfaceVariants };

package/types/ui/src/components/atoms/switch/index.d.ts

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

package/types/ui/src/components/atoms/switch/switch.d.ts

@@ -0,0 +1,64 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+declare const track: {
+    readonly sm: {
+        readonly w: 46;
+        readonly h: 28;
+        readonly pad: 3;
+        readonly thumb: 20;
+    };
+    readonly tv: {
+        readonly w: 64;
+        readonly h: 36;
+        readonly pad: 4;
+        readonly thumb: 26;
+    };
+};
+declare const switchVariants: import("../../../core/types").SvFn<{
+    root: import("#ui/core").StyleDecl;
+}, {
+    readonly size: {
+        sm: {
+            w: 46;
+            h: 28;
+            p: 3;
+        };
+        tv: {
+            w: 64;
+            h: 36;
+            p: 4;
+        };
+    };
+    /** Styleless on purpose: the checked look is the crossfade layers below,
+     * which a static style can't describe, but `checked` is still the
+     * component's axis, and the workbench matrix reads the axes from here. */
+    readonly checked: {
+        true: {};
+    };
+}>;
+type SwitchSize = keyof typeof track;
+interface SwitchProps extends Omit<FocusableProps, 'children' | 'onPress' | 'style' | 'role' | 'checked'> {
+    /** Present: you own the state (controlled). Absent: the switch runs itself
+     *  from `defaultChecked` and reports through `onCheckedChange`. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (next: boolean) => void;
+    size?: SwitchSize;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Switch({ checked: checkedProp, defaultChecked, onCheckedChange, size, disabled, style, ...focusProps }: Readonly<SwitchProps>): import("react").JSX.Element;
+interface SwitchFaceProps {
+    checked: boolean;
+    size?: SwitchSize;
+    style?: ViewStyle;
+}
+/**
+ * The switch's visuals alone: the track, the amber fill and the sliding
+ * thumb, with nothing pressable about them, for surfaces where the switch is
+ * not its own control (a settings row that drives focus through its own list
+ * navigation, where a `Focusable` switch would be a second stop the D-pad has
+ * to fight past).
+ */
+declare function SwitchFace({ checked, size, style }: Readonly<SwitchFaceProps>): import("react").JSX.Element;
+export type { SwitchFaceProps, SwitchProps, SwitchSize };
+export { Switch, SwitchFace, switchVariants };

package/types/ui/src/components/atoms/text/index.d.ts

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

package/types/ui/src/components/atoms/text/text.d.ts

@@ -0,0 +1,21 @@
+import { type TextProps as RNTextProps, type StyleProp, type TextStyle } from 'react-native';
+import { type ColorToken, type FontToken, type TextLayoutProps, type TypeRole } from '#ui/core';
+interface TextProps extends Omit<RNTextProps, 'style' | 'role'>, TextLayoutProps {
+    /** Design type role. Defaults to `body`. (Named `variant`, not `role`, which
+     *  React Native already uses for the ARIA role.) */
+    variant?: TypeRole;
+    /** Palette token, or any raw colour string for a one-off (the design uses a
+     *  few literal rgba washes that are not tokens). Defaults to `text`. */
+    color?: ColorToken | (string & {});
+    /** Overrides the family the role names, keeping its size, weight and rhythm.
+     *  This is how a version string or a URL is set in `mono`. */
+    font?: FontToken;
+    /** Escape hatch for what the vocabulary does not name, merged last. Type is
+     *  not one of those things: a size or a weight here is a missing role. */
+    style?: StyleProp<TextStyle>;
+    /** Clamp to N lines with an ellipsis (the RN spelling of line-clamp). */
+    lines?: number;
+}
+declare function Text({ variant, color, font, style, lines, ...props }: Readonly<TextProps>): import("react").JSX.Element;
+export type { TextProps };
+export { Text };

package/types/ui/src/components/atoms/text-area/index.d.ts

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

package/types/ui/src/components/atoms/text-area/text-area.d.ts

@@ -0,0 +1,31 @@
+import { type StyleProp, type TextStyle } from 'react-native';
+import { type BoxProps } from '#ui/components/atoms/box';
+import { type ControlSize } from '#ui/lib/field-shell';
+interface TextAreaProps extends Omit<BoxProps, 'children' | 'ring'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+    /** After the entry takes focus; see <TextField>. */
+    onFocus?: () => void;
+    /** After the entry loses focus: the commit point of a save-on-blur field. */
+    onBlur?: () => void;
+    placeholder?: string;
+    rows?: number;
+    maxRows?: number;
+    autoSize?: boolean;
+    physicalKeyboard?: boolean;
+    autoFocus?: boolean;
+    invalid?: boolean;
+    label?: string;
+    /** The control shell's size; see <TextField>. */
+    size?: ControlSize;
+    /** A caller setting a bigger font here should set `lineHeight` with it: that
+     *  is what `rows` counts. */
+    textStyle?: StyleProp<TextStyle>;
+    /** The shell belongs to something else - the well of an <InputGroup>. See
+     *  `fieldShell` for what that drops and why. */
+    flat?: boolean;
+}
+declare function TextArea({ value: valueProp, defaultValue, onValueChange, onFocus, onBlur, placeholder, rows, maxRows, autoSize, physicalKeyboard: askedPhysicalKeyboard, autoFocus, invalid, label, size, textStyle, flat, ...box }: Readonly<TextAreaProps>): import("react").JSX.Element;
+export type { TextAreaProps };
+export { TextArea };

package/types/ui/src/components/atoms/text-field/index.d.ts

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

package/types/ui/src/components/atoms/text-field/text-field.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type StyleProp, TextInput, type TextInputProps, type TextStyle } from 'react-native';
+import { type BoxProps } from '#ui/components/atoms/box';
+import { type IconName } from '#ui/components/atoms/icon';
+import { type ControlSize } from '#ui/lib/field-shell';
+type TextFieldType = 'text' | 'email' | 'password' | 'url' | 'search' | 'number';
+interface TextFieldProps extends Omit<BoxProps, 'children' | 'ring'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+    type?: TextFieldType;
+    onSubmit?: () => void;
+    /** After the entry takes focus. A shell drawn AROUND this field (see
+     *  <InputGroup>) paints the focus state the entry itself gives up. */
+    onFocus?: () => void;
+    /** After the entry loses focus: the commit point of a save-on-blur field. */
+    onBlur?: () => void;
+    /** The entry itself, for a caller that has to focus it from outside: give it
+     *  a ref and the field uses it instead of its own. */
+    entryRef?: RefObject<TextInput | null>;
+    placeholder?: string;
+    icon?: IconName;
+    trailing?: ReactNode;
+    physicalKeyboard?: boolean;
+    autoFocus?: boolean;
+    /** Explicit override; normally derived from `type`. */
+    keyboardType?: 'default' | 'url' | 'email-address';
+    /** Explicit override; normally derived from `type`. A registration form's
+     *  password field says `new-password` here, or the browser's manager fills
+     *  the CURRENT password into it and never offers to generate one. */
+    autoComplete?: NonNullable<TextInputProps['autoComplete']>;
+    invalid?: boolean;
+    /** A value to read and copy, not to change: the entry still focuses and
+     *  still selects, so a share link can be picked up with the keyboard. */
+    readOnly?: boolean;
+    /** Select the whole value when the entry takes focus, which is what a
+     *  one-shot value (a link, a token) wants: focus it and copy it. */
+    selectOnFocus?: boolean;
+    label?: string;
+    /** The control shell's size. Defaults to the app's (`KitProvider`), so a
+     *  call site states this only when it differs from the rest of the app. */
+    size?: ControlSize;
+    textStyle?: StyleProp<TextStyle>;
+    /** The shell belongs to something else - the well of an <InputGroup>, the row
+     *  of a command palette. See `fieldShell` for what that drops and why. */
+    flat?: boolean;
+}
+declare function TextField({ value: valueProp, defaultValue, onValueChange, type, onSubmit, onFocus, onBlur, entryRef, placeholder, icon, trailing, physicalKeyboard: askedPhysicalKeyboard, autoFocus, keyboardType, autoComplete, invalid, readOnly, selectOnFocus, label, size, textStyle, flat, ...box }: Readonly<TextFieldProps>): import("react").JSX.Element;
+export type { TextFieldProps, TextFieldType };
+export { TextField };