@kromatv/sdk 0.1.39-canary.3579809

package/types/ui/src/components/organisms/virtual/virtual-grid/virtual-grid-props.d.ts

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import type { ViewStyle } from 'react-native';
+/** What <VirtualGrid> takes. */
+export interface VirtualGridProps<T> {
+    data: readonly T[];
+    /** The narrowest a tile may be. The grid fits as many as the room allows, the
+     *  way `auto-fill` does in CSS and `<Grid min>` does for a static grid. */
+    min?: number;
+    /** A fixed column count, for a design that demands one whatever the width.
+     *  Wins over `min`. */
+    columns?: number;
+    /** Tile height ÷ tile width (a 2:3 poster is 1.5), which with the measured
+     *  cell width is the row pitch. */
+    ratio?: number;
+    /** An explicit tile height in px, for tiles that are not `ratio`-shaped. Wins
+     *  over `ratio`; `rowGap` is added to it the same way. */
+    itemHeight?: number;
+    /** Between tiles in a row, and what the column maths removes. */
+    gap?: number;
+    /** Between rows. Defaults to `gap`. */
+    rowGap?: number;
+    /** Inset of the rows. Not of the viewport, which is what clips: padding there
+     *  would inset the clip and shave the rows. */
+    px?: number;
+    /** Room above the first row, for a focused tile's ring and scale: the strip
+     *  parks the top row at the content origin and the clip is flush there. */
+    pt?: number;
+    /** The box width to assume until the grid has measured its own: the design
+     *  width. Without one the first frame has no columns to draw. */
+    width?: number;
+    /** Given the tile's index and the pixel width of the cell it lands in, so a
+     *  tile can size its own artwork request to the column it is drawn at. */
+    renderItem: (item: T, index: number, width: number) => ReactElement;
+    /** The exact artwork URL a tile will draw at `width`, so the rows the focus is
+     *  heading for are fetched and decoded before they mount. */
+    art?: (item: T, width: number) => string | null;
+    /** Scrolls with the first row; needs `headerHeight` set alongside it. */
+    header?: ReactElement;
+    headerHeight?: number;
+    /** The viewport that clips. Defaults to filling its parent; give it a bounded
+     *  height either way, or nothing scrolls. */
+    style?: ViewStyle;
+    onEndReached?: () => void;
+    /** Opens the grid on this ROW (not item index) with focus, since the row is
+     *  not mounted yet for `autoFocus` to reach. Read once, on mount. */
+    initialIndex?: number;
+    /** Called when the grid leaves or returns to its first row. */
+    onScrolledChange?: (scrolled: boolean) => void;
+}

package/types/ui/src/components/organisms/virtual/virtual-grid/virtual-grid.d.ts

@@ -0,0 +1,12 @@
+import type { VirtualGridProps } from './virtual-grid-props';
+/**
+ * A vertically scrolling grid of auto-filled tiles, rendering only the rows near
+ * the viewport.
+ *
+ * The strip is translated rather than scrolled, so nothing clips without this
+ * component's `clipStyles.column` box.
+ */
+declare function VirtualGrid<T>({ data, min, columns, ratio, itemHeight, gap, rowGap, px, pt, width, renderItem, art, header, headerHeight, style, onEndReached, initialIndex, onScrolledChange, }: Readonly<VirtualGridProps<T>>): import("react").JSX.Element;
+export type { GridRows } from './grid-rows';
+export type { VirtualGridProps };
+export { VirtualGrid };

package/types/ui/src/components/organisms/virtual/virtual-rail/edge-scroll.d.ts

@@ -0,0 +1,38 @@
+import type { ViewStyle } from 'react-native';
+interface EdgeScrollInput {
+    /** Where the row sits now, in px from the start (always ≥ 0). */
+    offset: number;
+    index: number;
+    /** Item pitch: the tile's own size plus the gap after it. */
+    itemSize: number;
+    viewport: number;
+    count: number;
+    /** Look-ahead to keep past the selection, in px. One tile reads best. */
+    margin: number;
+}
+/**
+ * The offset after the selection moved to `index`. Returns `offset` unchanged
+ * whenever the selection is comfortably inside the row, which is what makes
+ * the highlight, rather than the content, the thing that moves.
+ */
+declare function edgeScrollOffset({ offset, index, itemSize, viewport, count, margin, }: EdgeScrollInput): number;
+/** How far the row can travel: everything it holds, less what fits. The one
+ * definition the clamp bound and the snap bound both use, so they can't
+ * disagree and let an offset drift off the pitch grid. */
+declare function maxOffset(count: number, pitch: number, room: number): number;
+/**
+ * The horizontal padding a content style spends, in pixels. Percentages and
+ * other non-numeric lengths are ignored rather than guessed at, and longhands
+ * win over the shorthand, matching React Native's own precedence.
+ */
+declare function horizontalInset(style: ViewStyle | undefined): number;
+/**
+ * The pitch that fits whole tiles into the row: rounds `itemWidth` to the
+ * nearest whole count of columns and shares the viewport out between them, so
+ * the last tile is never sliced by the edge. Always a whole number of pixels:
+ * a fractional pitch puts tile boundaries on sub-pixels, which Chrome
+ * rounds independently into hairline seams.
+ */
+declare function fitPitch(itemWidth: number, viewport: number): number;
+export type { EdgeScrollInput };
+export { edgeScrollOffset, fitPitch, horizontalInset, maxOffset };

package/types/ui/src/components/organisms/virtual/virtual-rail/index.d.ts

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

package/types/ui/src/components/organisms/virtual/virtual-rail/rail-edge.d.ts

@@ -0,0 +1,11 @@
+export declare function edgeWidth(row: number): number;
+/** One end of the row: the fade over the row's last tiles, plus the pointer's
+ *  paging control. Uses a plain `Pressable`, not `<Focusable>`, so the arrow is
+ *  never a stop in the D-pad's own path through the row. */
+export declare function RailEdge({ side, shown, arrow, onPress, width, }: Readonly<{
+    side: 'start' | 'end';
+    shown: boolean;
+    arrow: boolean;
+    onPress: () => void;
+    width: number;
+}>): import("react").JSX.Element;

package/types/ui/src/components/organisms/virtual/virtual-rail/virtual-rail.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+import { type ViewStyle } from 'react-native';
+interface VirtualRailProps<T> {
+    data: readonly T[];
+    /** Tile pitch in pixels: the tile's own width PLUS the gap after it, stretched
+     *  so a whole number of tiles fills the row. Tiles fill their cell. */
+    itemWidth: number;
+    renderItem: (item: T, index: number) => ReactElement;
+    gap?: number;
+    style?: ViewStyle;
+    contentStyle?: ViewStyle;
+    onEndReached?: () => void;
+    /** Look-ahead kept past the selection, in TILES, before the row starts moving. */
+    edgeMargin?: number;
+    arrows?: boolean;
+}
+declare function VirtualRail<T>({ data, itemWidth, renderItem, gap, style, contentStyle, onEndReached, edgeMargin, arrows, }: Readonly<VirtualRailProps<T>>): import("react").JSX.Element;
+export type { VirtualRailProps };
+export { VirtualRail };

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

@@ -0,0 +1,2 @@
+export type { TvStageProps } from './tv-stage';
+export { TvStage } from './tv-stage';

package/types/ui/src/components/templates/tv-stage/index.d.ts

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

package/types/ui/src/components/templates/tv-stage/tv-stage.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+interface TvStageProps {
+    children: ReactNode;
+}
+declare function TvStage({ children }: Readonly<TvStageProps>): import("react").JSX.Element;
+export type { TvStageProps };
+export { TvStage };

package/types/ui/src/configure.d.ts

@@ -0,0 +1,49 @@
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+import type { FrostBackdropProps } from './components/atoms/frost';
+import type { Theme, ThemeMode } from './core';
+import type { DeviceStore } from './lib/device-store';
+import type { ControlSize } from './lib/field-shell';
+import type { ImageBackend } from './lib/image-backend';
+import type { SurfacePresentation } from './lib/surface-presentation';
+/**
+ * How far the reader sits and what they type with. Every consequence follows
+ * from that one word, so a shell states it once instead of restating each:
+ *
+ * - `tv` is the kit's own default. A field is a value with a caret, typing
+ *   arrives from an on-screen keyboard, and controls are sized for a room.
+ * - `phone` has a real keyboard, so a field focuses a real entry and summons
+ *   the IME, and an anchored surface opens as a sheet because a handset has no
+ *   room beside a trigger for a panel.
+ * - `browser` is the same keyboard at arm's length, at console density, with
+ *   surfaces left to the platform: a panel under a pointer.
+ */
+export type FormFactor = 'tv' | 'phone' | 'browser';
+type EntryDefaults = Readonly<{
+    physicalKeyboard: boolean;
+    size: ControlSize;
+}>;
+export interface KitConfig<P extends FrostBackdropProps = FrostBackdropProps> {
+    formFactor?: FormFactor;
+    designWidth?: number;
+    remote?: boolean;
+    deviceStore?: DeviceStore | null;
+    frostEnabled?: boolean;
+    /** Frost drawn only by a `<FrostSource>`'s layer: anywhere else a frosted
+     *  surface keeps its plain fill. Defaults to true for `tv`, false otherwise. */
+    frostLayerOnly?: boolean;
+    entry?: Partial<EntryDefaults>;
+    surfaces?: SurfacePresentation;
+    ground?: ThemeMode;
+    theme?: Theme;
+    image?: ImageBackend;
+    frost?: ComponentType<P>;
+}
+/** Prepare immutable root configuration. The mounted provider applies it.
+ * Pass the result to KitProvider; capability defaults belong to that tree. */
+export declare function configureKit<P extends FrostBackdropProps = FrostBackdropProps>(config: Readonly<KitConfig<P>>): Readonly<KitConfig<P>>;
+/** Supplies root defaults; nested providers inherit unspecified capabilities. */
+export declare function KitProvider<P extends FrostBackdropProps = FrostBackdropProps>({ config, children, }: {
+    config?: Readonly<KitConfig<P>>;
+    children?: ReactNode;
+}): ReactElement;
+export {};

package/types/ui/src/core/atomic/index.d.ts

@@ -0,0 +1,5 @@
+export type { RuleEntry } from './inject';
+export { injectRules } from './inject';
+export { mergeStatic, staticStyle } from './register';
+export type { StaticStates } from './static-style';
+export { isStaticStyle } from './static-style';

package/types/ui/src/core/atomic/inject.d.ts

@@ -0,0 +1,3 @@
+/** A rule and the priority group it belongs to; lower groups paint first. */
+export type RuleEntry = readonly [group: number, css: string];
+export declare function injectRules(entries: readonly RuleEntry[]): void;

package/types/ui/src/core/atomic/register.d.ts

@@ -0,0 +1,13 @@
+import { type StaticStates } from './static-style';
+/**
+ * A style the build compiled, made live: marked, frozen and registered with
+ * the renderer, which compiles it to the classes the build emitted and inserts
+ * nothing. What the build writes in place of a static declaration.
+ */
+export declare function staticStyle(values: Record<string, unknown>, states?: StaticStates): Record<string, unknown>;
+/**
+ * Static layers merged into one, last wins per property, as a recipe merges
+ * its cascade. Every layer has to be static: every rule the result needs is
+ * then already in the sheet, so the merge can be registered the same way.
+ */
+export declare function mergeStatic(layers: readonly object[]): Record<string, unknown>;

package/types/ui/src/core/atomic/static-style.d.ts

@@ -0,0 +1,8 @@
+import type { SvStateName } from '#ui/core/states';
+export type StaticStates = Partial<Record<SvStateName, Record<string, unknown>>>;
+export declare function isStaticStyle(value: unknown): value is Record<string, unknown>;
+/** The interaction-state layers a static recipe layer carries. */
+export declare function staticStates(style: Record<string, unknown>): StaticStates;
+/** Marks a style as already in the sheet. Non-enumerable, so a key walk, a
+ *  spread, `flatten` and the renderer's own compiler see only the longhands. */
+export declare function markStatic(style: Record<string, unknown>, states?: StaticStates): void;

package/types/ui/src/core/breakpoint-cascade.d.ts

@@ -0,0 +1,45 @@
+import { type BreakpointName } from '#ui/core/tokens/layout';
+/**
+ * A value stated per breakpoint, mobile-first: `base` is mandatory and applies
+ * until the next breakpoint the object names. A missing middle step inherits
+ * from below, never from above.
+ */
+export type Breakpoints<T> = {
+    base: T;
+} & {
+    [K in Exclude<BreakpointName, 'base'>]?: T;
+};
+/** Any value in the vocabulary: one value, or one per breakpoint. */
+export type Responsive<T> = T | Breakpoints<T>;
+export declare const LAST_BREAKPOINT: number;
+/**
+ * The attribute the store writes on the document root: a declaration a build
+ * compiled paints through `:root[data-kroma-bp~="md"]` rather than a media
+ * query, so the classes and the resolver never disagree about the step.
+ */
+export declare const BREAKPOINT_ATTRIBUTE = "data-kroma-bp";
+/** Every step reached at `index`, which is what the attribute carries: `~=`
+ *  then matches a step from where it starts upwards, as the cascade does. */
+export declare function stepsReached(index: number): string;
+/** The step a design width falls in, as a position in {@link BREAKPOINTS}. */
+export declare function breakpointAt(width: number): number;
+/**
+ * Which breakpoints a value names, as a bitmask, and 0 for anything that is not
+ * a breakpoint object - a plain value, an Animated node, a transform array.
+ * Zero is the whole zero-cost path: it is what keeps a flat declaration off the
+ * breakpoint axis, exactly as an empty state mask keeps it off the state axis.
+ */
+export declare function breakpointBits(value: unknown): number;
+/** The value at a breakpoint, mobile-first. A value naming no breakpoint at all
+ *  passes through, so an Animated node stays itself. */
+export declare function valueAt(value: object, index: number): unknown;
+/**
+ * The step a declaration naming `mask` actually resolves at when the surface
+ * is at `index`: the widest breakpoint it names at or below that one, and 0
+ * when it names none.
+ *
+ * This is the cache-key axis. Two widths a declaration cannot tell apart share
+ * one entry, and a declaration with no responsive value at all keys on 0
+ * forever - so it mints exactly the one entry it does today.
+ */
+export declare function stepAt(mask: number, index: number): number;

package/types/ui/src/core/breakpoint.d.ts

@@ -0,0 +1,16 @@
+import { type BreakpointName } from '#ui/core/tokens';
+export type { Breakpoints, Responsive } from '#ui/core/breakpoint-cascade';
+export { breakpointBits, valueAt } from '#ui/core/breakpoint-cascade';
+export declare function createBreakpointRuntime(width?: number): {
+    index: () => number;
+    /** The step a server renders at: it has no window, so only a pinned width
+     *  reaches it. What hydration must match before the real step lands. */
+    serverIndex: () => number;
+    pinDesignWidth(next?: number): void;
+    retain(): () => void;
+    subscribe(listener: () => void): () => void;
+};
+export type BreakpointRuntime = ReturnType<typeof createBreakpointRuntime>;
+export declare function breakpointIndex(runtime?: BreakpointRuntime): number;
+export declare function currentBreakpoint(runtime?: BreakpointRuntime): BreakpointName;
+export declare function breakpointStep(mask: number, at?: number): number;

package/types/ui/src/core/color.d.ts

@@ -0,0 +1,22 @@
+import { type Theme } from '#ui/core/theme';
+import type { ColorToken } from '#ui/core/tokens';
+import { withAlpha } from '#ui/core/tokens/colors';
+export { withAlpha };
+declare const BARE: {
+    readonly white: '#FFFFFF';
+    readonly black: '#000000';
+};
+export type ColorBase = ColorToken | keyof typeof BARE;
+/**
+ * A colour. Deliberately not `ColorToken | (string & {})`: that escape hatch
+ * made every string legal, so `bg: 'acent'` compiled and painted nothing, since
+ * `color()` returns an unrecognised value verbatim and React Native ignores a
+ * colour it cannot parse.
+ */
+export type ColorValue = ColorBase | `${ColorBase}/${number}` | `#${string}` | `rgb(${string})` | `rgba(${string})` | `hsl(${string})` | `hsla(${string})` | 'transparent' | 'currentColor';
+/** Resolves a token name through the palette and anything else verbatim. A
+ *  trailing `/NN` is Tailwind's alpha syntax and means NN percent opacity. */
+export declare function color(value: string, theme?: Theme): string;
+/** Style keys whose value is a colour. A recipe slot that feeds an <Icon> writes
+ *  `color`, which is not a shorthand, and must still resolve `accent/45`. */
+export declare const COLOR_KEYS: ReadonlySet<string>;

package/types/ui/src/core/ground-shade.d.ts

@@ -0,0 +1,3 @@
+import { type Theme } from '#ui/core/theme-create';
+export declare function onPaper(theme?: Theme): boolean;
+export declare function groundShade(alpha: number, theme?: Theme): string;

package/types/ui/src/core/index.d.ts

@@ -0,0 +1,26 @@
+export type { Breakpoints, Responsive } from './breakpoint';
+export { breakpointIndex, createBreakpointRuntime, currentBreakpoint } from './breakpoint';
+export type { ColorValue } from './color';
+export { color, withAlpha } from './color';
+export { normalize } from './normalize';
+export { sv, svFor, useSv } from './recipe';
+export { boxStyle, declaredBreakpoints, splitShorthand } from './shorthand-resolve';
+export type { BoxStyleProps, TextLayoutProps } from './shorthands';
+export { TEXT_STYLE_PROPS } from './shorthands';
+export { stabilise } from './stabilise';
+export type { SvState, SvStateName } from './states';
+export { useStyleRuntime, useStyleScope } from './style-context';
+export { createStyleRuntime } from './style-runtime';
+export type { StyleScope } from './style-scope';
+export { DEFAULT_STYLE_SCOPE } from './style-scope';
+export { registered, resolveStyles, sharedStyle, style, styles, useStyles } from './styles';
+export type { RingToken, Theme, ThemeOverrides, ThemeTokens } from './theme';
+export { groundShade, onPaper } from './ground-shade';
+export { radiusValue, scaledRadius } from './radius-value';
+export { activeTheme, createTheme, createThemeRuntime, KROMA, KROMA_LIGHT, themed, themedCache, themeVersion, } from './theme';
+export type { ThemeMode } from './theme-mode';
+export { applyMode, readMode, resolveMode, writeMode } from './theme-mode';
+export * from './tokens';
+export type { AnySv, Resolved, StyleDecl, Variant, VariantProps, VariantSource } from './types';
+export { useBreakpoint, useBreakpointStep } from './use-breakpoint';
+export { ThemeProvider, useSystemGround, useTheme, useThemeControls, useThemeVersion, } from './use-theme';

package/types/ui/src/core/normalize.d.ts

@@ -0,0 +1,22 @@
+import { type Theme } from '#ui/core/theme';
+import { type SvStateName } from '#ui/core/states';
+export interface Split {
+    rest: Record<string, unknown>;
+    states: Partial<Record<SvStateName, Record<string, unknown>>>;
+    declared: SvStateName[];
+    breakpoints: number;
+}
+export declare function split(decl: object | undefined, index: number, theme?: Theme): Split | undefined;
+/**
+ * Rewrites one layer into React Native longhands, resolving shorthands, colours
+ * and, against the breakpoint at `index`, any value stated per breakpoint.
+ *
+ * Per LAYER, which is what makes merging correct: merging authored keys would
+ * leave `{ px: 18 }` and `{ p: 12 }` both alive, and the resolver would then
+ * pick by specificity rather than by order, so an earlier base would beat a
+ * later variant. Once every layer speaks longhand, `Object.assign` is the
+ * conflict resolution - last write wins, per property, like CSS.
+ *
+ * A layer the build already compiled is its own canonical form.
+ */
+export declare function normalize(decl: object, index: number, theme?: Theme): Record<string, unknown>;

package/types/ui/src/core/radius-value.d.ts

@@ -0,0 +1,4 @@
+import { type Theme } from '#ui/core/theme-create';
+import { type CornerValue, type Radius } from '#ui/core/tokens/layout';
+export declare function radiusValue(corner: CornerValue, side?: number, theme?: Theme): Radius;
+export declare function scaledRadius(corner: CornerValue, factor: number, theme?: Theme): Radius;

package/types/ui/src/core/recipe.d.ts

@@ -0,0 +1,24 @@
+import { type StyleScope } from './style-scope';
+import type { FlatVariantGroups, SlotShapes, StyleDecl, StyleSlots, SvConfig, SvFlatConfig, SvFn, VariantGroups } from '#ui/core/types';
+/** Single slot: `base` plus flat variant options, which is most components. */
+export declare function sv<const V extends FlatVariantGroups = Record<string, never>>(config: SvFlatConfig<V>): SvFn<{
+    root: StyleDecl;
+}, V>;
+/** Named slots, all painted. Only the names are inferred, never the shapes: a
+ *  variant option paints keys the base never mentioned. */
+export declare function sv<S extends Record<string, StyleDecl>, const V extends VariantGroups<StyleSlots<S>> = Record<string, never>>(config: SvConfig<StyleSlots<S>, V> & {
+    slots: S;
+}): SvFn<StyleSlots<S>, V>;
+/**
+ * Names the slot shapes up front, for a recipe with a slot that feeds a
+ * component's props rather than its style:
+ *
+ *   svFor<{ root: StyleDecl; icon: IconProps }>()({ slots: { … }, variants: { … } })
+ *
+ * Curried because TypeScript has no partial type-argument inference: naming the
+ * shapes inline would forfeit inference of the variant groups, and every option
+ * name would widen to `string`.
+ */
+export declare function svFor<P extends SlotShapes>(): <const V extends VariantGroups<P> = Record<string, never>>(config: SvConfig<P, V>) => SvFn<P, V>;
+export declare function bindRecipe<R>(recipe: R, scope: StyleScope): R;
+export declare function useSv<R>(recipe: R): R;

package/types/ui/src/core/scope-marks.d.ts

@@ -0,0 +1,12 @@
+/** The attributes a styling root stamps on its element in a browser: whose
+ *  theme, which ground, which breakpoint steps. Tokens and compiled styles
+ *  read them through the cascade, so whatever renders outside the root's
+ *  element carries them along to paint the same. */
+export interface ScopeMarks {
+    readonly 'data-kroma-theme'?: string;
+    readonly 'data-theme'?: 'light' | 'dark';
+    readonly 'data-kroma-bp': string;
+}
+export declare const ScopeMarksContext: import("react").Context<ScopeMarks | null>;
+/** The marks of the nearest styling root, or null outside every root. */
+export declare function useScopeMarks(): ScopeMarks | null;

package/types/ui/src/core/shorthand-resolve.d.ts

@@ -0,0 +1,55 @@
+import type { ViewStyle } from 'react-native';
+import { type BoxStyleProps } from '#ui/core/shorthands';
+import { type Theme } from '#ui/core/theme';
+import type { FontToken, TypeRole } from '#ui/core/tokens';
+/**
+ * Split a prop bag into the shorthands and everything else.
+ *
+ * Every consumer needs exactly this partition - <Box> and <Text> to tell a style
+ * prop from a real host prop, a recipe to tell what needs resolving from what
+ * passes through - so the rule for recognising a shorthand lives in one place.
+ *
+ * `key` canonicalises the caller's prop order, so `row gap={4}` and `gap={4} row`
+ * are one entry in whatever cache the caller keys on it; it is empty when nothing
+ * needs resolving.
+ */
+export declare function splitShorthand(props: object, names?: ReadonlySet<string>): {
+    shorthand: Record<string, unknown>;
+    rest: Record<string, unknown>;
+    /** Whether any shorthand was found, so a caller can skip the resolver. */
+    any: boolean;
+    key: string;
+    /** The breakpoints the bag names, 0 when it names none; see
+     *  {@link breakpointBits}. */
+    breakpoints: number;
+};
+/**
+ * Which breakpoints a whole declaration names, for a consumer that compiles one
+ * ahead of time (a recipe layer, a `styles()` value) and has to know whether it
+ * belongs on the breakpoint axis at all.
+ */
+export declare function declaredBreakpoints(decl: object, names?: ReadonlySet<string>): number;
+/**
+ * Resolves a prop bag into React Native longhands at a breakpoint. A bag
+ * stating nothing per breakpoint resolves the same at every index.
+ */
+export declare function boxStyle(p: Readonly<BoxStyleProps>, index: number, theme?: Theme): ViewStyle;
+/**
+ * The text half of the vocabulary. Only a style DECLARATION speaks it (a recipe
+ * layer, a `styles()` value); it is deliberately not part of `BoxStyleProps`,
+ * because a <Box> is a View and a View cannot paint type.
+ */
+export interface TextStyleProps {
+    /** A whole type role, spread under the rest of the layer, so
+     *  `{ text: 'label', fontSize: 13 }` is the label role at 13px. */
+    text?: TypeRole;
+    /** Font family by token name; wins over the family `text` brought in. */
+    font?: FontToken;
+}
+/**
+ * Resolves the text shorthands of one layer, consuming their keys, or nothing
+ * if it has none. Membership-checked against the theme, not just typeof: a slot
+ * that feeds a component's PROPS may carry a `text` of its own, and that one
+ * must pass through untouched.
+ */
+export declare function textStyle(decl: Record<string, unknown>, theme?: Theme): Record<string, unknown> | undefined;