@kromatv/sdk 0.1.39-canary.3579809

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

@@ -0,0 +1,102 @@
+import { type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type IconProps } from '#ui/components/atoms/icon';
+import { type StyleDecl } from '#ui/core';
+import { type ControlSize } from '#ui/lib/field-shell';
+declare const paginationVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+    icon: Pick<IconProps, 'color' | 'size'>;
+}, {
+    readonly size: Record<ControlSize, {
+        root: {
+            minW: number;
+            minH: number;
+            px: number;
+            radius: import("#ui/core").RadiusToken;
+        };
+        label: {
+            fontSize: number;
+            lineHeight: number;
+        };
+        icon: {
+            size: number;
+        };
+    }>;
+    readonly current: {
+        readonly true: {
+            readonly root: {
+                readonly bg: "accent";
+                readonly _hover: {
+                    readonly bg: "accentHover";
+                };
+                readonly _press: {
+                    readonly bg: "accentPress";
+                };
+            };
+            readonly label: {
+                readonly color: "accentInk";
+                readonly fontWeight: "700";
+            };
+        };
+    };
+}>;
+interface PaginationRootProps {
+    /** The page being shown, one-based. Clamped into `pageCount`. */
+    page: number;
+    pageCount: number;
+    onPageChange: (next: number) => void;
+    /** Names the navigation landmark: what is being paged through. */
+    label: string;
+    /** The control shell's size; see <TextField>. */
+    size?: ControlSize;
+    /** Pages either side of the current one; one gives a seven-slot row. */
+    siblings?: number;
+    /** The accessible name of one page control. */
+    pageLabel?: (page: number) => string;
+    /** Write the row yourself. Omit it for `Previous`, `Pages`, `Next`. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Paging controls for a list that arrives one page at a time.
+ *
+ * ```tsx
+ * <Pagination.Root page={page} pageCount={20} onPageChange={setPage} label="Releases" />
+ * ```
+ */
+declare function Root({ page, pageCount, onPageChange, label, size, siblings, pageLabel, children, style, }: Readonly<PaginationRootProps>): import("react").JSX.Element;
+interface PaginationStepProps {
+    label?: string;
+}
+/** The step back, disabled rather than hidden on the first page. */
+declare function Previous({ label }: Readonly<PaginationStepProps>): import("react").JSX.Element;
+/** The step forward, disabled rather than hidden on the last page. */
+declare function Next({ label }: Readonly<PaginationStepProps>): import("react").JSX.Element;
+/** The windowed run of page controls. Rendered for you by <Root>; name it
+ *  yourself only when the row puts something else between the arrows. */
+declare function Pages(): import("react").JSX.Element;
+interface PaginationItemProps {
+    page: number;
+}
+/** One page control. The current one carries `aria-current="page"`. */
+declare function Item({ page }: Readonly<PaginationItemProps>): import("react").JSX.Element;
+/** The marker for a hidden run of pages. Not a control: it takes no D-pad stop
+ *  and is skipped by assistive tech. */
+declare function Ellipsis(): import("react").JSX.Element;
+interface PaginationStatusProps {
+    format?: (page: number, pageCount: number) => string;
+}
+/** Where you are in words, for a row that has room to say it. */
+declare function Status({ format }: Readonly<PaginationStatusProps>): import("react").JSX.Element;
+declare const Pagination: {
+    Root: typeof Root;
+    Previous: typeof Previous;
+    Pages: typeof Pages;
+    Item: typeof Item;
+    Ellipsis: typeof Ellipsis;
+    Next: typeof Next;
+    Status: typeof Status;
+};
+export type { PaginationItemProps, PaginationRootProps, PaginationStatusProps, PaginationStepProps, };
+export { Pagination, paginationVariants };

package/types/ui/src/components/molecules/pagination/paging.d.ts

@@ -0,0 +1,24 @@
+/** A place in the row: a page to go to, or the run of pages the window hides. */
+type PageSlot = number | 'gap';
+declare function clamp(page: number, pageCount: number): number;
+/**
+ * The pages the row shows for `page`, first and last always among them, with a
+ * `'gap'` where a run is hidden. Always the same length for a given
+ * `pageCount`, so the row never reflows as it is paged; a gap that would stand
+ * for a single page renders that page instead.
+ */
+declare function pageWindow(page: number, pageCount: number, siblings?: number): PageSlot[];
+/** One page of a list, and the 1-based range it covers. */
+interface Page<T> {
+    items: T[];
+    page: number;
+    pageCount: number;
+    /** 1-based index of the first item shown, or 0 when there is nothing. */
+    first: number;
+    last: number;
+    total: number;
+}
+/** The slice to render, with the page clamped into range. */
+declare function paginate<T>(items: readonly T[], page: number, size: number): Page<T>;
+export type { Page, PageSlot };
+export { clamp, pageWindow, paginate };

package/types/ui/src/components/molecules/person-card/index.d.ts

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

package/types/ui/src/components/molecules/person-card/person-card.d.ts

@@ -0,0 +1,58 @@
+import { type AvatarProps } from '#ui/components/atoms/avatar';
+import { type TextProps } from '#ui/components/atoms/text';
+import { type StyleDecl } from '#ui/core';
+type PersonCardSize = 'sm' | 'tv';
+declare const personCardVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    face: StyleDecl;
+    name: StyleDecl;
+    role: StyleDecl;
+    photo: Required<Pick<AvatarProps, 'size'>>;
+    caption: Required<Pick<TextProps, 'lines'>>;
+}, {
+    readonly size: {
+        readonly sm: {
+            readonly root: {
+                readonly w: 92;
+                readonly gap: 5;
+            };
+            readonly name: {
+                readonly fontSize: 11;
+                readonly lineHeight: 14;
+            };
+            readonly role: {
+                fontSize: 10;
+            };
+            readonly photo: {
+                readonly size: 84;
+            };
+            readonly caption: {
+                readonly lines: 2;
+            };
+        };
+        readonly tv: {
+            readonly root: {
+                readonly w: 120;
+                readonly gap: 6;
+            };
+            readonly name: {
+                fontSize: 16;
+            };
+            readonly role: {
+                fontSize: 14;
+            };
+        };
+    };
+}>;
+interface PersonCardProps {
+    name: string;
+    role?: string | null;
+    photo?: string | null;
+    gradient?: string;
+    size?: PersonCardSize;
+    label?: string;
+    onPress?: () => void;
+}
+declare function PersonCard({ name, role, photo, gradient, size, label, onPress, }: Readonly<PersonCardProps>): import("react").JSX.Element;
+export type { PersonCardProps, PersonCardSize };
+export { PersonCard, personCardVariants };

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

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

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

@@ -0,0 +1,26 @@
+import { type BoxProps } from '#ui/components/atoms/box';
+interface PinFieldProps extends Omit<BoxProps, 'children' | 'onChange'> {
+    /** How many digits make a code. The dots row is exactly this wide. */
+    maxLength?: number;
+    /** Present: you own the buffer (controlled). Absent: the field runs itself. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+    /** Fired once, the instant the last digit lands. The TV PIN screen submits
+     *  from here: a completed code validates with no OK press. */
+    onComplete?: (code: string) => void;
+    /** Ignore input (a request is in flight, a lockout is counting down). */
+    disabled?: boolean;
+    /** Paint the empty dots red: the last code was rejected. */
+    invalid?: boolean;
+    /** Names the code to assistive tech. The dots are faces with no text to be
+     *  read, so without it the row is an unnamed group. */
+    label?: string;
+    /** True when the shell has a real keyboard: digits and Delete are captured
+     *  window-wide, so the code can simply be typed. On a TV this never
+     *  attaches; the on-screen keypad feeds `onValueChange` instead. */
+    physicalKeyboard?: boolean;
+}
+declare function PinField({ maxLength, value: valueProp, defaultValue, onValueChange, onComplete, disabled, invalid, label, physicalKeyboard, ...box }: Readonly<PinFieldProps>): import("react").JSX.Element;
+export type { PinFieldProps };
+export { PinField };

package/types/ui/src/components/molecules/poster-card/index.d.ts

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

package/types/ui/src/components/molecules/poster-card/poster-card.d.ts

@@ -0,0 +1,24 @@
+interface PosterCardProps {
+    title: string;
+    /** A word above the title naming what the tile is - `FILM`, `SERIES`. Cased by
+     *  the style, so pass it in the reading case. Omit it and the title sits alone. */
+    overline?: string;
+    /** Portrait key art. Falls back to the `tint` fill. */
+    art: string | null;
+    tint: readonly [string, string];
+    /** Resume / series-completion position, 0..1, or null for no bar. */
+    progress?: number | null;
+    watched?: boolean;
+    /** An explicit tile width. Omit inside a <Grid>, whose cell already sets the
+     *  column width; a VIRTUALISED grid has no cell to fill (its rows are laid out
+     *  from the item size it was given), so there the tile states its own. */
+    width?: number;
+    onPress?: () => void;
+    /** OK held on a remote, or a finger held on the tile. */
+    onLongPress?: () => void;
+    onFocus?: () => void;
+    autoFocus?: boolean;
+}
+declare function PosterCard({ title, overline, art, tint, progress, watched, width, onPress, onLongPress, onFocus, autoFocus, }: Readonly<PosterCardProps>): import("react").JSX.Element;
+export type { PosterCardProps };
+export { PosterCard };

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

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

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

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+interface SectionRootProps extends Omit<BoxProps, 'children'> {
+    /** Space between the band's content rows, not between them and the header.
+     *  Defaults to 16. */
+    gap?: number;
+    /** A `<Section.Header>` must be a DIRECT child to sit above the rule; every
+     *  other child is content. */
+    children?: ReactNode;
+}
+declare function Root({ gap, children, ...box }: Readonly<SectionRootProps>): import("react").JSX.Element;
+/** The band's opening row, and the rule under it. The rule is the header's
+ *  own, so a band written without a header carries none. */
+declare function Header({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The overline naming the band, and the band's heading to assistive tech. */
+declare function Title({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The band's controls, pinned to the far end of the header row. */
+declare function Actions({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/**
+ * A titled band: an overline, a rule, and the content under both.
+ *
+ * ```tsx
+ * <Section.Root>
+ *   <Section.Header>
+ *     <Section.Title>Lecture</Section.Title>
+ *   </Section.Header>
+ *   <PlaybackCard />
+ * </Section.Root>
+ *
+ * <Section.Root>
+ *   <Section.Header>
+ *     <Section.Title>Lecture</Section.Title>
+ *     <Section.Actions>
+ *       <Button size="sm" label="Tout voir" onPress={seeAll} />
+ *     </Section.Actions>
+ *   </Section.Header>
+ *   <PlaybackCard />
+ * </Section.Root>
+ * ```
+ */
+declare const Section: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Title: typeof Title;
+    Actions: typeof Actions;
+};
+export type { SectionRootProps };
+export { Section };

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

@@ -0,0 +1,2 @@
+export * from './segment-group';
+export { segmentGroupVariants } from './segment-group-item';

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

@@ -0,0 +1,22 @@
+import type { StyleScope } from '#ui/core';
+import type { View } from 'react-native';
+import type { Radius } from '#ui/core/tokens/layout';
+import { type ControlSize } from '#ui/lib/field-shell';
+declare const GROUP_PAD = 4;
+interface Box2D {
+    x: number;
+    width: number;
+}
+interface SegmentGroupContext {
+    value: string;
+    select: (next: string) => void;
+    size: ControlSize;
+    stretch: boolean;
+    report: (value: string, box: Box2D) => void;
+    tabStop: string | undefined;
+    mount: (value: string, view: View | null) => void;
+}
+declare const Context: import("react").Context<SegmentGroupContext | null>, useSegmentGroup: (part: string) => SegmentGroupContext;
+declare function segmentRadius(size: ControlSize, scope: StyleScope): Radius;
+export type { Box2D, SegmentGroupContext };
+export { Context, GROUP_PAD, segmentRadius, useSegmentGroup };

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

@@ -0,0 +1,58 @@
+import { type StyleDecl } from '#ui/core';
+import { type ReactNode } from 'react';
+import { type IconName } from '#ui/components/atoms/icon';
+declare const segmentGroupVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+    hint: StyleDecl;
+}, {
+    readonly size: Record<import("#ui/lib/field-shell").ControlSize, {
+        root: {
+            px: number;
+            py: number;
+            minH: number;
+        };
+        label: {
+            fontSize: number;
+            lineHeight: number;
+        };
+    }>;
+    readonly active: {
+        readonly true: {
+            readonly root: {
+                readonly _hover: {
+                    readonly bg: "transparent";
+                };
+                readonly _press: {
+                    readonly bg: "transparent";
+                };
+            };
+            readonly label: {
+                readonly color: "accentText";
+            };
+        };
+    };
+}>;
+interface ItemProps {
+    value: string;
+    /** Names the segment to assistive tech. It draws NOTHING: the drawn title is
+     *  <SegmentGroup.Label>, whose plain text already names the segment. Reach
+     *  for it only where the children carry no text a reader could use: a
+     *  glyph-only segment, or a count spoken in another form than it is drawn. */
+    label?: string;
+    /** Leading glyph. A segment with no <SegmentGroup.Label> is the glyph alone,
+     *  and `label` carries its name. */
+    icon?: IconName;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+declare function Item({ value, label, icon, disabled, children }: Readonly<ItemProps>): import("react").JSX.Element;
+/** The segment's drawn title; its plain text is the segment's accessible name. */
+declare function Label({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The quieter word beside the label: the fact that settles the choice. */
+declare function Hint({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+export { Hint, Item, Label, segmentGroupVariants };

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

@@ -0,0 +1,29 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ControlSize } from '#ui/lib/field-shell';
+import { Hint, Item, Label } from './segment-group-item';
+interface RootProps<T extends string> {
+    value: T;
+    onValueChange: (next: T) => void;
+    /** Accessible name of the group: what the segments are segments OF. */
+    label?: string;
+    /** The control shell's size; see <TextField>. */
+    size?: ControlSize;
+    /** Fill the width, every segment an equal share, instead of hugging its
+     *  labels. For a control that names the MODE of the screen under it rather
+     *  than a value in a form: a pill floating mid-page reads as unanchored, and
+     *  a full-width bar reads as the thing the page is currently showing. */
+    stretch?: boolean;
+    /** The group's segments. Only a DIRECT <SegmentGroup.Item> child joins the
+     *  arrow-key order, so an Item is never wrapped. */
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root<T extends string>({ value, onValueChange, label, size, stretch, children, style, }: Readonly<RootProps<T>>): import("react").JSX.Element;
+declare const SegmentGroup: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Label: typeof Label;
+    Hint: typeof Hint;
+};
+export type { RootProps as SegmentGroupRootProps };
+export { SegmentGroup };

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

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

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

@@ -0,0 +1,54 @@
+import type { ReactNode, RefObject } from 'react';
+import type { StyleProp, TextStyle, View } from 'react-native';
+/** Why the surface closed. `back` is the remote's Back button (and, in a
+ *  browser TV shell, the key it arrives as). */
+type SelectDismissReason = 'select' | 'outside' | 'escape' | 'back';
+type SelectOpenReason = 'trigger' | SelectDismissReason;
+interface SelectOpenDetails {
+    reason: SelectOpenReason;
+}
+interface SelectOption {
+    value: string;
+    label: string;
+    note?: string;
+    disabled?: boolean;
+}
+interface SelectValueDetails {
+    item: SelectOption;
+}
+interface SelectState {
+    values: readonly string[];
+    multiple: boolean;
+    picked: readonly SelectOption[];
+    media: ReadonlyMap<string, ReactNode>;
+    label: string | undefined;
+    placeholder: string | undefined;
+    open: boolean;
+    disabled: boolean;
+    anchor: RefObject<View | null>;
+    setOpen: (open: boolean, reason: SelectOpenReason) => void;
+    pick: (value: string) => void;
+}
+declare const SelectContext: import("react").Context<SelectState | null>, useSelect: (part: string) => SelectState;
+interface SelectRowState {
+    presentation: 'panel' | 'dialog';
+    nativeID?: string;
+    active: boolean;
+    /** Whether the keys put the highlight here rather than a cursor sweeping
+     *  past: the ring is the keyboard's, the wash is the pointer's. */
+    keyed?: boolean;
+    onHoverIn?: () => void;
+    onPicked?: () => void;
+    onLayout?: (y: number, height: number) => void;
+}
+declare const DIALOG_ROW: SelectRowState;
+declare const SelectRowContext: import("react").Context<SelectRowState>;
+declare function useSelectRow(): SelectRowState;
+interface SelectItemState {
+    value: string;
+    chosen: boolean;
+}
+declare const SelectItemContext: import("react").Context<SelectItemState | null>, useSelectItem: (part: string) => SelectItemState;
+declare const SelectInkContext: import("react").Context<StyleProp<TextStyle>>;
+export type { SelectDismissReason, SelectItemState, SelectOpenDetails, SelectOpenReason, SelectOption, SelectRowState, SelectState, SelectValueDetails, };
+export { DIALOG_ROW, SelectContext, SelectInkContext, SelectItemContext, SelectRowContext, useSelect, useSelectItem, useSelectRow, };

package/types/ui/src/components/molecules/select/select-item.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '#ui/components/atoms/icon';
+import { type SelectOption } from './select-context';
+interface SelectItemProps {
+    value: string;
+    /** The row. A DIRECT <Select.Media> child is its head, wherever it is
+     *  written; a plain string beside it IS the label; anything else is the row
+     *  itself, and then `label` is what the trigger and assistive tech read. */
+    children?: ReactNode;
+    label?: string;
+    /** The fact that settles the choice: a bitrate, a codec, a count. */
+    note?: string;
+    /** The head of the row, as a glyph the kit can size. A mark it cannot size
+     *  goes through <Select.Media>, which wins the head from it. */
+    icon?: IconName;
+    disabled?: boolean;
+}
+/** The descriptor a <Select.Item> declares: what names it in the trigger, and
+ *  what the listbox keyboard types ahead over. */
+declare function optionOf(props: Readonly<SelectItemProps>): SelectOption;
+/** The head a <Select.Item> declares: a written <Select.Media>, else the `icon`
+ *  sugar. The Root keys these by value, so the trigger draws the pick's. */
+declare function mediaOf(props: Readonly<SelectItemProps>): ReactNode;
+declare function Item(props: Readonly<SelectItemProps>): import("react").JSX.Element;
+/** The mark that stands for an option, at the head of its row and again in the
+ *  trigger once that row is the pick. <Select.Item>'s `icon` is the sugar for
+ *  the common case; write this instead where the mark is the option's own. */
+declare function Media({ name, children, }: Readonly<{
+    name?: IconName;
+    /** A mark the kit cannot size: give it 18px, so a column of faces lines up
+     *  with a column of glyphs. */
+    children?: ReactNode;
+}>): import("react").JSX.Element;
+/** The picked row's face: a tick, or a checkbox where several rows can be
+ *  picked at once. <Select.Item> draws it for you; name it yourself only when
+ *  the row's arrangement puts it somewhere else. */
+declare function Indicator(): import("react").JSX.Element;
+export type { SelectItemProps };
+export { Indicator, Item, Media, mediaOf, optionOf };

package/types/ui/src/components/molecules/select/select-options-dialog.d.ts

@@ -0,0 +1,3 @@
+import type { SelectSurfaceProps } from './select-surface';
+declare function SelectOptionsDialog({ open, onDismiss, label, items }: Readonly<SelectSurfaceProps>): import("react").JSX.Element;
+export { SelectOptionsDialog };

package/types/ui/src/components/molecules/select/select-options.d.ts

@@ -0,0 +1,3 @@
+import type { SelectSurfaceProps } from './select-surface';
+declare function SelectOptions(props: Readonly<SelectSurfaceProps>): import("react").JSX.Element | null;
+export { SelectOptions };

package/types/ui/src/components/molecules/select/select-selection.d.ts

@@ -0,0 +1,24 @@
+import type { SelectOption, SelectValueDetails } from './select-context';
+interface SelectSingleValueProps {
+    multiple?: false;
+    /** '' is "nothing picked": no option may use it, or the placeholder never
+     *  shows. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string, details: SelectValueDetails) => void;
+}
+interface SelectMultipleValueProps {
+    /** Every pick toggles a value and the surface stays open. */
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (next: string[], details: SelectValueDetails) => void;
+}
+type SelectValueProps = SelectSingleValueProps | SelectMultipleValueProps;
+interface SelectSelection {
+    values: readonly string[];
+    choose: (value: string, item: SelectOption | undefined) => void;
+}
+declare function useSelectSelection(props: Readonly<SelectValueProps>): SelectSelection;
+export type { SelectMultipleValueProps, SelectSingleValueProps, SelectValueProps };
+export { useSelectSelection };

package/types/ui/src/components/molecules/select/select-surface.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement, RefObject } from 'react';
+import type { View } from 'react-native';
+import type { SurfacePresentation } from '#ui/lib/surface-presentation';
+import type { SelectDismissReason, SelectOption } from './select-context';
+export type SelectPresentation = SurfacePresentation;
+export interface SelectSurfaceProps {
+    open: boolean;
+    presentation: SelectPresentation;
+    label: string | undefined;
+    options: readonly SelectOption[];
+    items: readonly ReactElement[];
+    values: readonly string[];
+    multiple: boolean;
+    onPick: (next: string) => void;
+    onDismiss: (reason: SelectDismissReason) => void;
+    anchor: RefObject<View | null>;
+}