@kromatv/sdk 0.1.40-canary.0

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

@@ -0,0 +1,10 @@
+import type { ControlMetrics, ControlSize } from '#ui/lib/field-shell';
+import type { listRowVariants } from './list-row-variants';
+interface ListRowState {
+    size: ControlSize;
+    metrics: ControlMetrics;
+    slots: ReturnType<typeof listRowVariants>;
+}
+declare const ListRowContext: import("react").Context<ListRowState | null>, useListRow: (part: string) => ListRowState;
+export type { ListRowState };
+export { ListRowContext, useListRow };

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+/** The head of the row, for media rather than a glyph: an <Avatar>, a poster
+ *  thumb, a module icon, a <StatusDot>, a <Spinner>. `<ListRow.Root icon>` is
+ *  the sugar for the kit's icon well. */
+declare function Leading({ children }: Readonly<{
+    children: ReactNode;
+}>): ReactNode;
+/** The row's title. Written first, its plain text is the row's accessible name. */
+declare function Label({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/** The quieter second line: the fact that settles the row. */
+declare function Hint({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+interface TrailingProps {
+    /** Lets the tail give up width so a long value truncates instead of pushing
+     *  the row wider. Off by default: a face, a badge or a chevron has one size
+     *  and must keep it. */
+    shrink?: boolean;
+    children: ReactNode;
+}
+/** The tail of the row: a value, a <Badge>, a <SwitchFace>. The row is the one
+ *  focus stop, so an indicator here is a face and never a control. Given one,
+ *  the row drops the chevron it otherwise draws when it leads somewhere. */
+declare function Trailing({ shrink, children }: Readonly<TrailingProps>): import("react").JSX.Element;
+export type { TrailingProps };
+export { Hint, Label, Leading, Trailing };

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

@@ -0,0 +1,90 @@
+import type { IconProps } from '#ui/components/atoms/icon';
+import { type StyleDecl } from '#ui/core';
+import { type ControlSize } from '#ui/lib/field-shell';
+type ListRowSize = ControlSize;
+/** What a <ListRow.Root> is drawn on. See its `ground` variant. */
+type RowGround = 'artwork' | 'surface';
+declare const listRowVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+    hint: StyleDecl;
+    chevron: Pick<IconProps, 'color' | 'size'>;
+}, {
+    readonly size: Record<ControlSize, {
+        root: {
+            gap: number;
+            px: number;
+            py: number;
+            radius: import("#ui/core").RadiusToken;
+            minH: number;
+            bg: "surface2/72";
+        };
+        label: {
+            fontSize: number;
+            lineHeight: number;
+        };
+        hint: {
+            fontSize: number;
+        };
+        chevron: {
+            size: number;
+        };
+    }>;
+    /** What is behind the row. Over `artwork` the translucent well is blurred
+     *  and lifted, which is what makes it read as an object on a picture; on a
+     *  `surface` - a dialog's card, a settings panel - there is nothing to
+     *  stand off, and a blur and a drop shadow on every row of a list that
+     *  recycles are paid per frame for nothing. Only the shape changes: the
+     *  well, the corner and the outward ring are the same row either way. */
+    readonly ground: {
+        artwork: {};
+        surface: {};
+    };
+    /** Its own object, or one member of a <ListRow.Group>'s single card. A
+     *  member draws no surface: the group carries the well, the blur, the
+     *  edge and the lift for the whole list. */
+    readonly standalone: {
+        readonly true: {
+            readonly root: {
+                readonly border: "border";
+            };
+        };
+        readonly false: {
+            readonly root: {
+                readonly radius: 0;
+                readonly bg: "transparent";
+                readonly _focus: {
+                    readonly bg: "accentSoft";
+                    readonly ring: "focusInset";
+                };
+            };
+        };
+    };
+    /** Whether the row leads anywhere. The step before the amber edge, and only
+     *  a row that does something on press takes it: a settings list is full of
+     *  rows that only display. */
+    readonly pressable: {
+        readonly true: {
+            readonly root: {
+                readonly _hover: {
+                    readonly bg: "surface3";
+                };
+            };
+        };
+    };
+    /** The row the list is currently ABOUT: the run being read, the server in
+     *  use. A wash, not the focus ring, because a selected row keeps its
+     *  reading while the focus is somewhere else entirely. */
+    readonly selected: {
+        readonly true: {
+            readonly root: {
+                readonly bg: "accentSoft";
+            };
+            readonly label: {
+                readonly color: "accentText";
+            };
+        };
+    };
+}>;
+export type { ListRowSize, RowGround };
+export { listRowVariants };

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

@@ -0,0 +1,51 @@
+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 ControlSize } from '#ui/lib/field-shell';
+import { ListGroup } from './list-group';
+import { Hint, Label, Leading, Trailing } from './list-row-parts';
+import { listRowVariants, type RowGround } from './list-row-variants';
+interface ListRowRootProps extends Omit<FocusableProps, 'children' | 'style' | 'label'> {
+    /** Leading glyph, sunk into the kit's icon well. Media that is not a glyph
+     *  goes through <ListRow.Leading>. */
+    icon?: IconName;
+    /** Names the row to assistive tech. It draws NOTHING: the title is
+     *  <ListRow.Label>, whose plain text already names the row. Reach for it only
+     *  where the middle column is a component that says its words through props
+     *  and so has none for the row to read. */
+    label?: string;
+    /** The control shell's size, defaulting to the group's, then to the app's
+     *  (`setEntryDefaults`). */
+    size?: ControlSize;
+    /** What the row is drawn on: `artwork` (a browse screen, a sign-in splash),
+     *  where it blurs and lifts off the picture behind it, or `surface` (a
+     *  dialog's card, a settings panel), where it does neither. Defaults to
+     *  `artwork`; a member of a <ListRow.Group> is on the group's card whatever
+     *  it says. */
+    ground?: RowGround;
+    /** Whether the row draws the disclosure chevron. Defaults to true for a
+     *  pressable row with no <ListRow.Trailing>. Set false for a row that acts in
+     *  place: a choice, a toggle, anything that goes nowhere. */
+    chevron?: boolean;
+    /** The row's parts. Only a DIRECT <ListRow.Leading> or <ListRow.Trailing>
+     *  child is sorted into its slot, so those two may be written anywhere;
+     *  everything else is the middle column, in the order it was written. The
+     *  first plain text in that column is the row's accessible name. Under
+     *  `asChild` it is instead the one element the row renders as, whose own
+     *  children are the parts. */
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root({ icon, label, size, ground: asked, chevron: wantsChevron, asChild, children, onPress, href, role, selected, style, ...focusProps }: Readonly<ListRowRootProps>): import("react").JSX.Element;
+declare const ListRow: {
+    Root: typeof Root;
+    Leading: typeof Leading;
+    Label: typeof Label;
+    Hint: typeof Hint;
+    Trailing: typeof Trailing;
+    Group: typeof ListGroup;
+};
+export type { ListRowSize, RowGround } from './list-row-variants';
+export type { ListRowRootProps };
+export { ListRow, listRowVariants };

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

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

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

@@ -0,0 +1,22 @@
+declare function tintGradient(tint: readonly [string, string]): string;
+interface MediaCardProps {
+    title: string;
+    overline?: string;
+    art: string | null;
+    tint: readonly [string, string];
+    /** Resume position, 0..1, or null for no bar. */
+    progress?: number | null;
+    watched?: boolean;
+    /** Defaults to filling the cell it is placed in, which is what a <Rail>'s
+     *  pitch assumes: the rail fits its pitch to a whole number of columns (see
+     *  `fitPitch`), so a tile pinned to a number of its own overflows the gap the
+     *  cell was holding for it and the row reads as one unbroken strip. Pass a
+     *  number only OUTSIDE a rail. */
+    width?: number | '100%';
+    onPress?: () => void;
+    onFocus?: () => void;
+    autoFocus?: boolean;
+}
+declare function MediaCard({ title, overline, art, tint, progress, watched, width, onPress, onFocus, autoFocus, }: Readonly<MediaCardProps>): import("react").JSX.Element;
+export type { MediaCardProps };
+export { MediaCard, tintGradient };

package/types/ui/src/components/molecules/nav-pill/index.d.ts

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

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

@@ -0,0 +1,28 @@
+type NavPillSize = 'sm' | 'tv';
+/** Which items show their label. Left unset it is the size's own policy: every
+ *  label at `tv`, the active item's at `sm`. */
+type NavPillLabels = 'all' | 'active' | 'none';
+type NavPillTone = 'accent' | 'neutral';
+interface LensRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface SlideTarget {
+    label: string;
+    rect: () => LensRect | null;
+    select: () => void;
+}
+interface NavPillState {
+    size: NavPillSize;
+    labels: NavPillLabels;
+    claim: (id: string, rect: LensRect) => void;
+    release: (id: string) => void;
+    enrol: (id: string, target: SlideTarget) => void;
+    withdraw: (id: string) => void;
+    hover: string | null;
+}
+declare const NavPillContext: import("react").Context<NavPillState | null>, useNavPill: (part: string) => NavPillState;
+export type { LensRect, NavPillLabels, NavPillSize, NavPillState, NavPillTone, SlideTarget };
+export { NavPillContext, useNavPill };

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

@@ -0,0 +1,101 @@
+import { type ComponentRef, type ReactNode, type Ref } from 'react';
+import type { View } from 'react-native';
+import { type FocusableProps } from '#ui/components/atoms/focusable';
+import { type IconName, type IconProps } from '#ui/components/atoms/icon';
+import { type StyleDecl } from '#ui/core';
+/** A kit glyph by name, or a host's own component handed the item's current ink. */
+type NavPillIcon = IconName | ((ink: string) => ReactNode);
+declare const navPillItemVariants: import("../../../core/types").SvFn<{
+    root: StyleDecl;
+    label: StyleDecl;
+    icon: {
+        color: string;
+    } & Pick<IconProps, 'size' | 'thickness'>;
+}, {
+    readonly size: {
+        readonly tv: {
+            readonly root: {
+                readonly row: true;
+                readonly gap: 9;
+                readonly px: 18;
+                readonly py: 11;
+            };
+            readonly label: {
+                readonly fontSize: 18;
+            };
+            readonly icon: {
+                readonly size: 26;
+            };
+        };
+        readonly sm: {
+            readonly root: {
+                readonly center: true;
+                readonly flex: true;
+                readonly gap: 3;
+                readonly px: 10;
+                readonly py: 10;
+                readonly minW: 44;
+                readonly minH: 44;
+            };
+            readonly label: {
+                readonly fontSize: 12;
+                readonly shrink: 0;
+            };
+            readonly icon: {
+                readonly size: 24;
+                readonly color: "textDim";
+            };
+        };
+    };
+    /** Under the lens: the current section, or the one a slide is previewing.
+     *  It stays amber while focused, so only an unlit item brightens. */
+    readonly lit: {
+        readonly true: {
+            readonly label: {
+                readonly color: "accentText";
+            };
+            readonly icon: {
+                readonly color: "accentText";
+            };
+        };
+        readonly false: {
+            readonly label: {
+                readonly _focus: {
+                    readonly color: "text";
+                };
+            };
+            readonly icon: {
+                readonly _focus: {
+                    readonly color: "text";
+                };
+            };
+        };
+    };
+    /** The active item already wears the lens, so it takes no focus wash on top. */
+    readonly active: {
+        readonly true: {};
+        readonly false: {
+            readonly root: {
+                readonly _focus: {
+                    readonly bg: "tint/10";
+                };
+            };
+        };
+    };
+}>;
+interface NavPillItemProps extends Omit<FocusableProps, 'children' | 'onPress' | 'label' | 'style'> {
+    icon: NavPillIcon;
+    /** The item's accessible name, and the word under its glyph wherever the
+     *  Root's label policy shows one. */
+    label: string;
+    /** The current section. At most one item should say so. */
+    active?: boolean;
+    onPress: () => void;
+    ref?: Ref<ComponentRef<typeof View>>;
+}
+/** One section of the switcher. The WHOLE item is the control: one D-pad stop,
+ *  a pointer hit area the size of the capsule's cell, and the lens travelling
+ *  under it rather than a second pressable on top. */
+declare function Item({ icon, label, active, onPress, ref, ...focus }: Readonly<NavPillItemProps>): import("react").JSX.Element;
+export type { NavPillIcon, NavPillItemProps };
+export { Item, navPillItemVariants };

package/types/ui/src/components/molecules/nav-pill/nav-pill-lens.d.ts

@@ -0,0 +1,8 @@
+import type { LensRect, NavPillTone } from './nav-pill-context';
+interface LensProps {
+    rect: LensRect | null;
+    chase: boolean;
+    tone: NavPillTone;
+}
+declare function Lens({ rect, chase, tone }: Readonly<LensProps>): import("react").JSX.Element;
+export { Lens };

package/types/ui/src/components/molecules/nav-pill/nav-pill.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type NavPillLabels, type NavPillSize, type NavPillTone } from './nav-pill-context';
+import { Item } from './nav-pill-item';
+/** The blur or wash the capsule floats on: whatever `registerFrost` gave this
+ *  shell. Present, the capsule thins its own fill so the backdrop reads through
+ *  it; absent, the capsule keeps its solid one. */
+declare function Backdrop({ amount }: Readonly<{
+    amount?: number;
+}>): import("react").JSX.Element;
+interface NavPillRootProps {
+    /** Names the tab strip: what the tabs are tabs OF. */
+    label?: string;
+    size?: NavPillSize;
+    /** The lens's fill, amber by default; the item under it keeps its amber ink
+     *  either way. */
+    tone?: NavPillTone;
+    /** Which items show their label. Container policy, not an item's: it has to
+     *  be the same answer for every item or the capsule's geometry jumps as the
+     *  lens travels. Defaults to the size's own. */
+    labels?: NavPillLabels;
+    slide?: boolean;
+    /** Called with the label under the finger at each crossing, null when the slide ends. */
+    onPreview?: (label: string | null) => void;
+    /** A `<NavPill.Backdrop>` must be a DIRECT child to sit behind the items;
+     *  every other child is an item of the capsule. */
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Root({ label, size, tone, labels, slide, onPreview, children, style, }: Readonly<NavPillRootProps>): import("react").JSX.Element;
+/**
+ * The floating section switcher.
+ *
+ * ```tsx
+ * <NavPill.Root size="tv">
+ *   <NavPill.Item icon="home" label="Accueil" active onPress={goHome} />
+ *   <NavPill.Item icon="search" label="Rechercher" onPress={goSearch} />
+ * </NavPill.Root>
+ *
+ * <NavPill.Root size="sm" labels="none">
+ *   <NavPill.Backdrop>
+ *     <BlurView intensity={60} style={StyleSheet.absoluteFill} />
+ *   </NavPill.Backdrop>
+ *   <NavPill.Item icon="home" label="Accueil" active onPress={goHome} />
+ * </NavPill.Root>
+ * ```
+ */
+declare const NavPill: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Backdrop: typeof Backdrop;
+};
+export type { NavPillIcon, NavPillItemProps } from './nav-pill-item';
+export type { NavPillLabels, NavPillRootProps, NavPillSize, NavPillTone };
+export { NavPill };

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

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

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

@@ -0,0 +1,32 @@
+import type { OtpSize } from './otp-field-variants';
+interface OtpPosition {
+    char: string | null;
+    /** True for the slot the next character lands in. */
+    active: boolean;
+    /** True for the one slot drawing the blinking caret. */
+    caret: boolean;
+}
+interface OtpSlot extends OtpPosition {
+    size: OtpSize;
+    mask: boolean;
+    invalid: boolean;
+    disabled: boolean;
+}
+interface OtpFieldState {
+    size: OtpSize;
+    mask: boolean;
+    invalid: boolean;
+    disabled: boolean;
+    at: (index: number) => OtpPosition;
+}
+declare const OtpFieldContext: import("react").Context<OtpFieldState | null>, useOtpField: (part: string) => OtpFieldState;
+declare const OtpGroupStartContext: import("react").Context<number>;
+declare const OtpSlotIndexContext: import("react").Context<number | null>;
+/**
+ * The state of the slot the calling component stands for, for a face the kit's
+ * own `<OtpField.Slot>` cannot draw. Call it from a DIRECT child of an
+ * `<OtpField.Group>`: that is what gives the face its position in the code.
+ */
+declare function useOtpSlot(): OtpSlot;
+export type { OtpFieldState, OtpSlot };
+export { OtpFieldContext, OtpGroupStartContext, OtpSlotIndexContext, useOtpField, useOtpSlot };

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+declare const SLOT_GAP = 12;
+interface OtpGroupProps extends Omit<BoxProps, 'children'> {
+    /** The group's slots. Every DIRECT child is one slot and takes the next
+     *  position in the code, whether it is an <OtpField.Slot> or a face of your
+     *  own reading `useOtpSlot()`. Separators go BETWEEN groups, not inside one. */
+    children?: ReactNode;
+}
+/** A run of slots the separators break the code into. */
+declare function Group({ children, ...box }: Readonly<OtpGroupProps>): import("react").JSX.Element;
+/** One character of the code, as the kit draws it: a glass well, the character
+ *  or its dot, and the caret when the next keystroke lands here. */
+declare function Slot(): import("react").JSX.Element;
+/** The divider between two groups. */
+declare function Separator(): import("react").JSX.Element;
+export type { OtpGroupProps };
+export { Group, Separator, SLOT_GAP, Slot };

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

@@ -0,0 +1,68 @@
+type OtpSize = 'md' | 'tv';
+declare const otpVariants: import("../../../core/types").SvFn<import("../../../core/types").StyleSlots<{
+    slot: {
+        center: true;
+        bg: "surface2/72";
+        border: "borderStrong";
+    };
+    char: {
+        color: string;
+    };
+}>, {
+    readonly size: {
+        readonly md: {
+            readonly slot: {
+                readonly w: 52;
+                readonly h: 60;
+                readonly radius: import("#ui/core").RadiusToken;
+            };
+            readonly char: {
+                readonly text: "subheading";
+            };
+        };
+        readonly tv: {
+            readonly slot: {
+                readonly w: 72;
+                readonly h: 84;
+                readonly radius: import("#ui/core").RadiusToken;
+            };
+            readonly char: {
+                readonly text: "h1";
+            };
+        };
+    };
+    /** `active` is the slot the next character lands in, and the only one with a caret. */
+    readonly state: {
+        readonly empty: {};
+        readonly filled: {};
+        readonly active: {
+            readonly slot: {
+                readonly borderColor: "accent";
+                readonly bg: "accentSoft";
+            };
+        };
+    };
+    /** Dimmed by colour, never by a row `opacity`: fading the row would fade
+     *  the FROST with it and let the backdrop through as a legible picture.
+     *  The well keeps its fill and only the edge and the ink recede. Declared
+     *  before `invalid` so a lockout keeps its red edge. */
+    readonly disabled: {
+        readonly true: {
+            readonly slot: {
+                readonly borderColor: "border";
+            };
+            readonly char: {
+                readonly color: "textDim";
+            };
+        };
+    };
+    readonly invalid: {
+        readonly true: {
+            readonly slot: {
+                readonly borderColor: "danger";
+            };
+        };
+    };
+}>;
+export type { OtpSize };
+export { otpVariants };

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

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+import { Group, Separator, Slot } from './otp-field-parts';
+import type { OtpSize } from './otp-field-variants';
+declare const REGEXP_ONLY_DIGITS: string;
+declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+interface OtpFieldRootProps extends Omit<BoxProps, 'children' | 'onChange'> {
+    /** How many characters make a code. shadcn's name for the same prop. */
+    maxLength?: number;
+    /** Present: you own the value (controlled). Absent: the field runs itself. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (next: string) => void;
+    /** Fired once, the instant the last slot fills. Auto-submit belongs here. */
+    onComplete?: (code: string) => void;
+    /** Which characters are allowed, tested per character rather than against
+     *  the whole value, so a pasted code with stray spaces is cleaned rather
+     *  than rejected outright. Use one of the REGEXP_* constants; defaults to
+     *  digits only. */
+    pattern?: string;
+    disabled?: boolean;
+    /** Show dots instead of the characters, for a secret PIN. */
+    mask?: boolean;
+    /** Paint every slot's edge red: the last code was rejected. */
+    invalid?: boolean;
+    size?: OtpSize;
+    /** True when the shell has a real keyboard: mounts the off-screen entry so
+     *  the code can be typed, pasted or autofilled. False (a television) leaves
+     *  the slots presentational and expects `onValueChange` from a keypad. */
+    physicalKeyboard?: boolean;
+    /** Offer the platform's SMS one-time-code autofill. Off by default: a code
+     *  that arrives by text message is the only thing it can fill, and iOS pays
+     *  for the offer with a suggestion bar wedged above the keyboard. A pairing
+     *  code read off a television and a profile PIN are neither of them SMS, so
+     *  the bar would be a permanent ornament over a four-digit field. */
+    smsAutofill?: boolean;
+    autoFocus?: boolean;
+    label?: string;
+    /** The <OtpField.Group> and <OtpField.Separator> parts, in the order they are
+     *  drawn. Only a DIRECT Group child is given its place in the code. Left out,
+     *  the row is one group of `maxLength` slots. */
+    children?: ReactNode;
+}
+declare function Root({ maxLength, value: valueProp, defaultValue, onValueChange, onComplete, pattern, disabled, mask, invalid, size, physicalKeyboard, smsAutofill, autoFocus, label, children, ...box }: Readonly<OtpFieldRootProps>): import("react").JSX.Element;
+declare const OtpField: {
+    Root: typeof Root;
+    Group: typeof Group;
+    Slot: typeof Slot;
+    Separator: typeof Separator;
+};
+export type { OtpSlot } from './otp-field-context';
+export { useOtpSlot } from './otp-field-context';
+export type { OtpGroupProps } from './otp-field-parts';
+export { otpVariants } from './otp-field-variants';
+export type { OtpFieldRootProps, OtpSize };
+export { OtpField, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/types/ui/src/components/molecules/page-header/index.d.ts

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

package/types/ui/src/components/molecules/page-header/page-header.d.ts

@@ -0,0 +1,69 @@
+import { type ReactNode } from 'react';
+import { type BoxProps } from '#ui/components/atoms/box';
+import { type IconName } from '#ui/components/atoms/icon';
+interface PageHeaderRootProps extends Omit<BoxProps, 'children'> {
+    /** A `<PageHeader.Actions>` must be a DIRECT child to be pinned to the far
+     *  end; every other child joins the title column. */
+    children?: ReactNode;
+}
+declare function Root({ children, ...box }: Readonly<PageHeaderRootProps>): import("react").JSX.Element;
+interface PageHeaderTitleProps {
+    /** A quiet tail after the title: a count, a category. */
+    suffix?: string;
+    /** A glyph before the title, drawn in the accent at heading scale. */
+    icon?: IconName;
+    children: ReactNode;
+}
+/** The page's heading. It carries the header role, so a screen reader lands
+ *  on it and the glyph beside it is not announced. */
+declare function Title({ suffix, icon, children }: Readonly<PageHeaderTitleProps>): import("react").JSX.Element;
+/** The line under the title: what the page holds, in one sentence. */
+declare function Subtitle({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+interface PageHeaderBackProps {
+    /** Where it goes, named: "Modules", not "Back". A reader should know the
+     *  destination before pressing. */
+    label: string;
+    onPress?: () => void;
+    /** Render onto the one element the children name, so the way back is a real
+     *  link. See `asChild` on <Focusable>. */
+    asChild?: boolean;
+    children?: ReactNode;
+}
+/** The way out, beside the heading. Reading order is where a reader looks to
+ *  leave, so it sits before the title rather than among the page's actions at
+ *  the far end. */
+declare function Back({ label, onPress, asChild, children }: Readonly<PageHeaderBackProps>): import("react").JSX.Element;
+/** The page-level controls, pinned to the far end of the header. */
+declare function Actions({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/**
+ * A page's opening line: the heading, a line under it, and the page-level
+ * actions pinned to the other end.
+ *
+ * ```tsx
+ * <PageHeader.Root>
+ *   <PageHeader.Title>Bibliotheques</PageHeader.Title>
+ *   <PageHeader.Subtitle>3 dossiers surveilles</PageHeader.Subtitle>
+ * </PageHeader.Root>
+ *
+ * <PageHeader.Root>
+ *   <PageHeader.Back label="Modules" onPress={toList} />
+ *   <PageHeader.Title icon="flame">Tendances</PageHeader.Title>
+ *   <PageHeader.Actions>
+ *     <Button variant="primary" label="Ajouter" onPress={add} />
+ *   </PageHeader.Actions>
+ * </PageHeader.Root>
+ * ```
+ */
+declare const PageHeader: {
+    Root: typeof Root;
+    Back: typeof Back;
+    Title: typeof Title;
+    Subtitle: typeof Subtitle;
+    Actions: typeof Actions;
+};
+export type { PageHeaderBackProps, PageHeaderRootProps, PageHeaderTitleProps };
+export { PageHeader };

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

@@ -0,0 +1,3 @@
+export * from './pagination';
+export type { Page, PageSlot } from './paging';
+export { pageWindow, paginate } from './paging';