@kromatv/sdk 0.1.40-canary.0

package/types/ui/src/components/atoms/button/button-variants.d.ts

@@ -0,0 +1,216 @@
+import type { IconProps } from '#ui/components/atoms/icon';
+import { type StyleDecl, type Variant } from '#ui/core';
+declare const CONTENT_GAP = 9;
+declare const buttonVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+    icon: Pick<IconProps, 'color' | 'size'>;
+}, {
+    readonly variant: {
+        readonly primary: {
+            readonly root: {
+                readonly bg: "accent";
+                readonly _hover: {
+                    readonly bg: "accentHover";
+                };
+                readonly _press: {
+                    readonly bg: "accentPress";
+                };
+                readonly _disabled: {
+                    readonly bg: "accent/50";
+                };
+            };
+            readonly label: {
+                readonly color: "accentInk";
+            };
+            readonly icon: {
+                readonly color: "accentInk";
+            };
+        };
+        readonly glass: {
+            readonly root: {
+                readonly bg: "tint/10";
+                readonly border: "borderStrong";
+                readonly _hover: {
+                    readonly bg: "tint/18";
+                    readonly borderColor: "tint/30";
+                };
+                readonly _press: {
+                    readonly bg: "tint/26";
+                    readonly borderColor: "tint/38";
+                };
+                readonly _disabled: {
+                    readonly bg: "tint/5";
+                    readonly border: "tint/7";
+                };
+            };
+        };
+        readonly ghost: {
+            readonly root: {
+                readonly bg: "transparent";
+                readonly _hover: {
+                    readonly bg: "tint/10";
+                };
+                readonly _press: {
+                    readonly bg: "tint/18";
+                };
+            };
+        };
+        readonly danger: {
+            readonly root: {
+                readonly bg: "danger";
+                readonly _hover: {
+                    readonly bg: "dangerHover";
+                };
+                readonly _press: {
+                    readonly bg: "dangerPress";
+                };
+                readonly _disabled: {
+                    readonly bg: "danger/50";
+                };
+            };
+        };
+        /** Red ink, no fill: the destructive action that is an exit rather than
+         *  the screen's purpose (a dialog's "Delete" beside its primary pair). */
+        readonly dangerGhost: {
+            readonly root: {
+                readonly bg: "transparent";
+                readonly _hover: {
+                    readonly bg: "danger/14";
+                };
+                readonly _press: {
+                    readonly bg: "danger/24";
+                };
+            };
+            readonly label: {
+                readonly color: "danger";
+            };
+            readonly icon: {
+                readonly color: "danger";
+            };
+        };
+        /** A dark wash for a control floating OVER artwork it must not brighten
+         *  (a skip-intro pill, an overlay's quiet action). */
+        readonly scrim: {
+            readonly root: {
+                readonly bg: "bg/70";
+                readonly border: "tint/15";
+                readonly _hover: {
+                    readonly bg: "bg/80";
+                    readonly borderColor: "tint/26";
+                };
+                readonly _press: {
+                    readonly bg: "bg/88";
+                    readonly borderColor: "tint/34";
+                };
+                readonly _disabled: {
+                    readonly bg: "bg/35";
+                    readonly border: "tint/7";
+                };
+            };
+        };
+        /** A bordered toggle: the detail screen's "Ma liste" / "Vu" pills, which
+         *  read as pressed rather than as a primary action: the edge carries the
+         *  state, and the fill stays a whisper. */
+        readonly outline: {
+            readonly root: {
+                readonly bg: "tint/4";
+                readonly border: "borderStrong";
+                readonly _hover: {
+                    readonly bg: "tint/12";
+                    readonly borderColor: "tint/34";
+                };
+                readonly _press: {
+                    readonly bg: "tint/20";
+                    readonly borderColor: "tint/44";
+                };
+                readonly _disabled: {
+                    readonly bg: "tint/3";
+                    readonly border: "tint/8";
+                };
+            };
+        };
+    };
+    readonly active: {
+        true: {};
+    };
+    readonly size: {
+        readonly sm: {
+            readonly root: {
+                readonly py: number;
+                readonly px: 16;
+                readonly minH: number;
+                readonly radius: import("#ui/core").RadiusToken;
+            };
+            readonly label: {
+                readonly fontSize: 13;
+                readonly fontWeight: "600";
+                readonly lineHeight: number;
+            };
+            readonly icon: {
+                readonly size: 16;
+            };
+        };
+        readonly md: {
+            readonly root: {
+                readonly py: number;
+                readonly px: 28;
+                readonly minH: number;
+                readonly radius: import("#ui/core").RadiusToken;
+            };
+            readonly label: {
+                readonly fontSize: 16;
+                readonly fontWeight: "700";
+                readonly lineHeight: number;
+            };
+            readonly icon: {
+                readonly size: 20;
+            };
+        };
+        readonly lg: {
+            readonly root: {
+                readonly py: 17;
+                readonly px: 38;
+            };
+            readonly label: {
+                readonly fontSize: 19;
+                readonly fontWeight: "700";
+            };
+            readonly icon: {
+                readonly size: 22;
+            };
+        };
+        /** The 10-foot primary action (the home hero, a detail screen's Lecture).
+         *  From the table like the rest, so a tv button beside a tv field is the
+         *  same height and the same corner rather than approximately both. */
+        readonly tv: {
+            readonly root: {
+                readonly py: number;
+                readonly px: 40;
+                readonly minH: number;
+                readonly radius: import("#ui/core").RadiusToken;
+            };
+            readonly label: {
+                readonly fontSize: number;
+                readonly fontWeight: "700";
+                readonly lineHeight: number;
+            };
+            readonly icon: {
+                readonly size: 22;
+            };
+        };
+    };
+    readonly block: {
+        readonly true: {
+            readonly root: {
+                readonly self: "stretch";
+            };
+        };
+    };
+}>;
+type ButtonVariant = Variant<typeof buttonVariants, 'variant'>;
+type ButtonSize = Variant<typeof buttonVariants, 'size'>;
+declare const FROSTED: Set<ButtonVariant>;
+declare const UNFILLED: Set<ButtonVariant>;
+export type { ButtonSize, ButtonVariant };
+export { buttonVariants, CONTENT_GAP, FROSTED, UNFILLED };

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+import { type IconName } from '#ui/components/atoms/icon';
+import { type ButtonSize, type ButtonVariant, buttonVariants } from './button-variants';
+interface ButtonProps extends Omit<FocusableProps, 'children' | 'style' | 'focusScale' | 'label' | 'ring' | 'busy'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Stretch to the width of the parent. */
+    block?: boolean;
+    /** The active coat, which only the `outline` variant paints. It is paint and
+     *  nothing else: a button that toggles something says so with `pressed`,
+     *  which is what assistive tech hears. */
+    active?: boolean;
+    /** Leading glyph. */
+    icon?: IconName;
+    /** Trailing glyph (a chevron on a settings row, for instance). */
+    iconRight?: IconName;
+    /** Text label. It is also the accessibility name. Pass `children` instead for
+     *  anything richer than a string. */
+    label?: string;
+    /** Busy: a spinner takes the leading glyph's place and presses are ignored.
+     *  The control stays focusable - a submit that dropped out of the navigator
+     *  mid-spin would strand the remote on nothing. */
+    loading?: boolean;
+    /** Anything richer than `label`. Under `asChild` it is instead the one element
+     *  the button renders as, whose own children take this place. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Focus scale. Defaults to the design's 1.04 for the primary action, and to
+     *  1 inside a <ButtonGroup>, where a member that grows tears the line it
+     *  shares with its neighbours. */
+    focusScale?: number;
+}
+declare function Button({ variant, size, block, active, icon, iconRight, label, loading, asChild, children, style, disabled, focusScale, onPress, onFocus, onBlur, ...focusProps }: Readonly<ButtonProps>): import("react").JSX.Element;
+export type { ButtonProps, ButtonSize, ButtonVariant };
+export { Button, buttonVariants };

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

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

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

@@ -0,0 +1,62 @@
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+type CheckboxSize = 'sm' | 'tv';
+declare const checkboxVariants: import("../../../core/types").SvFn<{
+    root: import("#ui/core").StyleDecl;
+}, {
+    readonly size: {
+        readonly sm: {
+            w: 20;
+            h: 20;
+        };
+        readonly tv: {
+            readonly w: 28;
+            readonly h: 28;
+            readonly radius: "sm";
+        };
+    };
+    /** Checked and mixed both paint the amber fill: a parent row of a partly
+     *  selected group is as much "acted on" as a fully selected one. The hover
+     *  lives per state so a filled box hovers up the amber ladder rather than
+     *  back down to the white wash under its near-black mark (see <Chip>). */
+    readonly checked: {
+        readonly true: {
+            readonly bg: "accent";
+            readonly border: "accent";
+            readonly _hover: {
+                readonly bg: "accentHover";
+                readonly border: "accentHover";
+            };
+        };
+        readonly false: {
+            readonly _hover: {
+                readonly bg: "tint/12";
+                readonly border: "tint/32";
+            };
+        };
+    };
+}>;
+interface CheckboxProps extends Omit<FocusableProps, 'children' | 'onPress' | 'role' | 'checked' | 'style'> {
+    /** Present: you own the state (controlled). Absent: it runs itself from
+     *  `defaultChecked` and reports through `onCheckedChange`. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Some of the things under this one are checked. Announced as `mixed`, and
+     *  a press from here checks them all. */
+    indeterminate?: boolean;
+    onCheckedChange?: (next: boolean) => void;
+    size?: CheckboxSize;
+}
+declare function Checkbox({ checked: checkedProp, defaultChecked, indeterminate, onCheckedChange, size, disabled, ...focusProps }: Readonly<CheckboxProps>): import("react").JSX.Element;
+interface CheckboxFaceProps {
+    checked: boolean;
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+}
+/**
+ * The checkbox's visuals alone, with nothing pressable about them: for a row
+ * that is itself the control (see <ChoiceList>), where a focusable checkbox
+ * would be a second stop the D-pad has to fight past.
+ */
+declare function CheckboxFace({ checked, indeterminate, size, }: Readonly<CheckboxFaceProps>): import("react").JSX.Element;
+export type { CheckboxFaceProps, CheckboxProps, CheckboxSize };
+export { Checkbox, CheckboxFace, checkboxVariants };

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

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

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

@@ -0,0 +1,172 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+import { type IconName, type IconProps } from '#ui/components/atoms/icon';
+import { type ColorValue, type StyleDecl } from '#ui/core';
+/**
+ * The whole design, including every state it can be in.
+ *
+ * A chip carries no focus scale, so the hover wash each variant declares is all
+ * a cursor has to go on where there is no focus scope.
+ */
+declare const chipVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+    dot: StyleDecl;
+    count: StyleDecl;
+    icon: Pick<IconProps, 'color' | 'size'>;
+}, {
+    readonly variant: {
+        readonly solid: {
+            readonly root: {
+                readonly bg: "tint/7";
+                readonly _hover: {
+                    readonly bg: "tint/13";
+                };
+            };
+            readonly label: {
+                readonly color: "text";
+            };
+            readonly count: {
+                readonly color: "text";
+            };
+        };
+        /** `subtle` is the strip that floats over the browse screens' ambient art:
+         *  a fainter wash, no border, and muted text so it recedes until focused. */
+        readonly subtle: {
+            readonly root: {
+                readonly bg: "tint/8";
+                readonly borderWidth: 0;
+                readonly _hover: {
+                    readonly bg: "tint/14";
+                };
+            };
+            readonly label: {
+                readonly color: "textMuted";
+            };
+            readonly count: {
+                readonly color: "textMuted";
+            };
+            readonly icon: {
+                readonly color: "textMuted";
+            };
+        };
+        /** An opaque raised chip, for strips that sit on the page rather than over
+         *  artwork (the season picker on a series detail screen). */
+        readonly surface: {
+            readonly root: {
+                readonly bg: "surface2";
+                readonly borderWidth: 0;
+                readonly _hover: {
+                    readonly bg: "surface3";
+                };
+            };
+            readonly label: {
+                readonly color: "textMuted";
+            };
+            readonly count: {
+                readonly color: "textMuted";
+            };
+            readonly icon: {
+                readonly color: "textMuted";
+            };
+        };
+        /** An edge and nothing else, on a screen whose amber is already spoken
+         *  for by a Play button: selected fills with ink instead of accent (see
+         *  the compound below), so the row never competes with the action. */
+        readonly outline: {
+            readonly root: {
+                readonly bg: "transparent";
+                readonly border: "tint/14";
+                readonly minH: 36;
+                readonly _hover: {
+                    readonly bg: "tint/8";
+                };
+            };
+            readonly label: {
+                readonly text: "label";
+                readonly color: "text";
+            };
+            readonly count: {
+                readonly color: "text";
+            };
+        };
+    };
+    /** Declared after `variant` so the accent fill and ink beat whatever idle
+     *  colours the variant declared. A filled chip hovers up the amber ladder
+     *  rather than back down to a white wash. */
+    readonly active: {
+        readonly true: {
+            readonly root: {
+                readonly bg: "accent";
+                readonly _hover: {
+                    readonly bg: "accentHover";
+                };
+            };
+            readonly label: {
+                readonly color: "accentInk";
+            };
+            readonly count: {
+                readonly color: "accentInk";
+            };
+            readonly icon: {
+                readonly color: "accentInk";
+            };
+            readonly dot: {
+                readonly bg: "accentInk";
+            };
+        };
+    };
+    readonly size: {
+        readonly sm: {
+            readonly label: {
+                readonly fontSize: 13;
+            };
+            readonly count: {
+                readonly fontSize: 13;
+            };
+            readonly icon: {
+                readonly size: 15;
+            };
+        };
+        readonly tv: {
+            readonly root: {
+                readonly py: 10;
+                readonly px: 22;
+            };
+            readonly label: {
+                readonly fontSize: 18;
+            };
+            readonly count: {
+                readonly fontSize: 18;
+            };
+            readonly dot: {
+                readonly w: 9;
+                readonly h: 9;
+            };
+            readonly icon: {
+                readonly size: 17;
+            };
+        };
+    };
+}>;
+interface ChipProps extends Omit<FocusableProps, 'children' | 'style' | 'label'> {
+    /** The accent fill. It is paint and nothing else: a chip that turns a filter
+     *  on and off says so with `pressed`, which is what assistive tech hears. */
+    active?: boolean;
+    size?: 'sm' | 'tv';
+    variant?: 'solid' | 'subtle' | 'surface' | 'outline';
+    /** Leading glyph, before the label. */
+    icon?: IconName;
+    /** A status colour as a dot before the label. An active chip paints it in
+     *  ink, so it stays visible on the accent fill. */
+    dot?: ColorValue;
+    /** A trailing count, in the label's colour at lower emphasis. */
+    count?: number;
+    label?: string;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Chip({ active, size, variant, icon, dot, count, label, children, style, ...focusProps }: Readonly<ChipProps>): import("react").JSX.Element;
+export type { ChipProps };
+export { Chip, chipVariants };

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

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

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

@@ -0,0 +1,13 @@
+import type { ColorValue } from '#ui/core';
+interface DividerProps {
+    /** Run vertically instead of horizontally. */
+    vertical?: boolean;
+    /** In px. Defaults to 1 on the web scale. */
+    thickness?: number;
+    /** Space above and below (or left and right when vertical). */
+    spacing?: number;
+    color?: ColorValue;
+}
+declare function Divider({ vertical, thickness, spacing, color, }: Readonly<DividerProps>): import("react").JSX.Element;
+export type { DividerProps };
+export { Divider };

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

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

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

@@ -0,0 +1,20 @@
+import { type TextProps } from '#ui/components/atoms/text';
+interface ExpandableTextProps extends Pick<TextProps, 'variant' | 'color' | 'style'> {
+    children: string;
+    /** How many lines the collapsed state shows. */
+    lines?: number;
+    /** The affordance's text, in the host's language. Drawn alone: a clamped
+     *  paragraph already ends in an ellipsis on every platform, and prefixing a
+     *  second one reads as two truncations. */
+    moreLabel: string;
+    /**
+     * Grow and shrink between the two heights rather than jumping. On by
+     * default: the paragraph moves everything under it, and a jump reads as the
+     * page having reloaded. Pass `false` where the surrounding layout animates
+     * already, or in a test that would rather not wait.
+     */
+    animate?: boolean;
+}
+declare function ExpandableText({ children, lines, moreLabel, variant, color, style, animate, }: Readonly<ExpandableTextProps>): import("react").JSX.Element;
+export type { ExpandableTextProps };
+export { ExpandableText };

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

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

package/types/ui/src/components/atoms/focusable/focusable-a11y.d.ts

@@ -0,0 +1,12 @@
+import type { AccessibilityRole, AccessibilityValue } from 'react-native';
+import { type A11yFlags } from '#ui/lib/a11y';
+import type { A11yState, FocusCurrent, FocusRole } from './focusable-types';
+declare function claimProps(state: A11yFlags, value: AccessibilityValue | undefined, current?: FocusCurrent): A11yState;
+/** What the platform can be handed: the web keeps the real ARIA role, native
+ *  gets the nearest value Android's `fromValue` accepts. */
+declare function platformRole(role: FocusRole): AccessibilityRole;
+/** The role a host element states for itself. An `<a href>` announces as a link
+ *  without one, so a control that renders as an anchor states none. */
+declare function hostRole(role: FocusRole): AccessibilityRole | undefined;
+declare function linkProps(href: string | undefined, role: FocusRole): object | null;
+export { claimProps, hostRole, linkProps, platformRole };

package/types/ui/src/components/atoms/focusable/focusable-delegate.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import type { AnySv } from '#ui/core';
+import type { FocusableProps, FocusState, HostElement } from './focusable-types';
+declare function hostFor<R extends AnySv>(children: FocusableProps<R>['children'], state: FocusState<R>): HostElement;
+declare function contentFor<R extends AnySv>(asChild: boolean, children: FocusableProps<R>['children']): FocusableProps<R>['children'];
+/**
+ * A control's `asChild` children, split into the element it hands its host to
+ * and the content that fills it.
+ */
+type Delegate = {
+    host: null;
+    content: ReactNode;
+    wrap: (face: ReactNode) => ReactNode;
+} | {
+    host: HostElement;
+    content: ReactNode;
+    wrap: (face: ReactNode) => HostElement;
+};
+declare function delegateOf(asChild: boolean | undefined, children: ReactNode): Delegate;
+export type { Delegate };
+export { contentFor, delegateOf, hostFor };

package/types/ui/src/components/atoms/focusable/focusable-forms.d.ts

@@ -0,0 +1,62 @@
+import { type NodeHandle } from '@kroma/spatial-nav/react';
+import type { ReactNode, RefObject } from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+import type { AnySv } from '#ui/core';
+import type { RingToken } from '#ui/core/theme';
+import type { splitBoxLayers } from '#ui/lib/box-layers';
+import type { A11yState, FocusableProps, FocusRole, Resolve, TouchAt, WebKeys } from './focusable-types';
+declare function DisabledForm({ at, }: Readonly<{
+    at: {
+        role: FocusRole;
+        disabledState: A11yState;
+        label: string | undefined;
+        onLayout: FocusableProps['onLayout'];
+        style: StyleProp<ViewStyle>;
+        focusedStyle: ViewStyle | undefined;
+        animated: FocusableProps['style'];
+        focused: boolean;
+        hovered: boolean;
+        slots: ReturnType<AnySv>;
+        children: FocusableProps['children'];
+    };
+}>): ReactNode;
+declare function TouchForm({ at }: Readonly<{
+    at: TouchAt;
+}>): ReactNode;
+declare function NavigatorForm({ entry, at, }: Readonly<{
+    entry: RefObject<NodeHandle | null>;
+    at: {
+        onLayout: FocusableProps['onLayout'];
+        webKeys: WebKeys;
+        href: string | undefined;
+        layers: ReturnType<typeof splitBoxLayers> | null;
+        style: FocusableProps['style'];
+        focusedStyle: ViewStyle | undefined;
+        animated: FocusableProps['style'];
+        showRing: boolean;
+        ringToken: RingToken;
+        focused: boolean;
+        focusVisible: boolean;
+        hovered: boolean;
+        press: () => void;
+        pointerPress: () => void;
+        handleFocus: () => void;
+        handleBlur: () => void;
+        setBox: (view: View | null) => void;
+        label: string | undefined;
+        role: FocusRole;
+        a11yState: A11yState;
+        pressed: boolean;
+        pressedStyle: StyleProp<ViewStyle>;
+        hoveredStyle: ViewStyle | undefined;
+        onHoverIn: () => void;
+        onHoverOut: () => void;
+        onPointerDown: () => void;
+        onPointerUp: () => void;
+        onLongPress: FocusableProps['onLongPress'];
+        hitSlop: FocusableProps['hitSlop'];
+        resolve: Resolve;
+        children: FocusableProps['children'];
+    };
+}>): ReactNode;
+export { DisabledForm, NavigatorForm, TouchForm };

package/types/ui/src/components/atoms/focusable/focusable-link.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { FocusableProps, HostAt } from './focusable-types';
+declare function LinkForm({ child, at, }: Readonly<{
+    child: FocusableProps['children'];
+    at: HostAt;
+}>): ReactNode;
+export { LinkForm };