@krizaka/ui 2.0.0-beta.3 → 2.0.0-beta.4

package/README.md

@@ -150,7 +150,7 @@ Colours are roles of the preset (`bg-surface-2`, `text-fg-secondary`, `border-bo
 | `@krizaka/ui/confirm-button` | `ConfirmButton` (two presses: `confirmLabel`, `onConfirm`, `timeoutMs` 4000, `label` for an icon, `armedContent`; the `Button` variants), `confirmArmed` | client |
 | `@krizaka/ui/progress` | `Progress` (`variant` bar·ring, `size` sm·md·lg, `value`/`max`, indeterminate without a value, `label`, `valueText`, a ring's centre as children) | server |
 | `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
-| `@krizaka/ui/native` | the marks for React Native (unchanged) | native |
+| `@krizaka/ui/native` | React Native: `ThemeProvider`/`useTheme`, `Txt`, `Button`, `IconButton`, `Card.*`, `Badge`, `Chip` (+ `Group`), `Avatar` (+ `Group`), `Skeleton`, `EmptyState`, `Spinner`, `Countdown`, `Segmented`, `Progress`, `Toaster`/`toast`, the marks — see [React Native](#react-native) | native |
 | `@krizaka/ui/motion.css`, `@krizaka/ui/tailwind.css` | the motion signature; the `@source` of the primitives' classes | CSS |
 | `@krizaka/ui/registry/<name>`, `@krizaka/ui/registry/demos/<name>` | the registry (JSON) and the demos — see [Registry](#registry) | data · client |
 
@@ -198,17 +198,79 @@ A site that renders the demos adds them to Tailwind's sources: `@source "../node
 
 ## React Native
 
-The marks have one geometry; `@krizaka/ui/native` draws it with `react-native-svg` for the apps
-([orochia-mobile](https://github.com/krizaka/orochia-mobile)). The orbit turns and the flame breathes on the native
-driver, and stay still when the system asks to reduce motion. `react-dom`, `react-native` and `react-native-svg` are
+`@krizaka/ui/native` is the platform for the React Native apps
+([orochia-mobile](https://github.com/krizaka/orochia-mobile)): the same primitives as the web, **the same prop names
+where the concept is the same**, the same tokens — `StyleSheet` only, no NativeWind, no dependency beyond
+`react-native` (≥ 0.76) and `react-native-svg` (≥ 15), which the apps already have. The `@krizaka/tokens/native` values
+are inlined in the bundle: the app installs nothing else. `react-dom`, `react-native` and `react-native-svg` are
 optional peers: a web app never installs the native ones, a native app never installs `react-dom`.
 
+```bash
+npm install @krizaka/ui   # react, react-native and react-native-svg come from the app
+```
+
+### Theme
+
+Once, at the root. `mode` is `dark` · `light` · `system` (followed through `useColorScheme`); `overrides` are a
+product's roles over the platform's, per theme — e.g. `nativeTheme` from `@krizaka/orochia-design-system/tokens`.
+Without a provider, `useTheme()` follows the system with the platform's roles. No storage dependency: the app
+persists the choice in `onModeChange`.
+
 ```tsx
-import { OrochiaMark } from "@krizaka/ui/native";
+import { ThemeProvider, Toaster, useTheme } from "@krizaka/ui/native";
+import { nativeTheme } from "@krizaka/orochia-design-system/tokens";
+
+<ThemeProvider mode={mode} onModeChange={saveMode} overrides={nativeTheme} fonts={{ display: "Outfit-Bold" }}>
+  <App />
+  <Toaster closeLabel={t("common.close")} offset={insets.top + 8} />
+</ThemeProvider>;
 
-<OrochiaMark size={72} title="Orochia" neutral={theme.border} />
+const { theme, scheme, mode, setMode, radius } = useTheme(); // theme.surface1, theme.textPrimary, theme.accent…
 ```
 
+### Components
+
+| Native | Props (same names as the web unless noted) | Differences with the web |
+| :-- | :-- | :-- |
+| `Txt` | `variant` display·title·body·caption·label·mono, `tone` text·secondary·muted·accent·success·warning·danger·onAccent·onMedia | Native only (the web uses classes). `title`/`display` are headings. |
+| `Button`, `IconButton` | `variant` primary·secondary·outline·ghost·danger, `size` sm·md·lg, `shape` rounded·pill, `loading`, `disabled`, `onPress`; `IconButton`: `label` required, `icon` | The text is `label` (a string), not children; `icon` before it; no `asChild`. Haptics stay in the app's `onPress`. |
+| `Card.Root/Media/Image/Overlay/Body/Title/Description/Footer` | `tone` default·elevated, `radius`, `Media aspect`, `Image src`/`fallback`, `Overlay corner`, `Body padding` | `Root onPress` makes the card a button (the web uses `asChild` + a link). No `Stat`, no `reveal`. |
+| `Badge` | `tone` neutral·accent·success·warning·danger·scrim, `size` sm·md, `dot`, `pulse` | — |
+| `Chip`, `Chip.Group` | `selected`/`defaultSelected`/`onSelectedChange`, `value`, `size`, `removable` + `removeLabel` + `onRemove`; Group: `type` single·multiple, `value`/`defaultValue`/`onValueChange` | A toggle chip is a `checkbox` (web: a pressed button). `Group scrollable`: one horizontal row. |
+| `Avatar`, `Avatar.Group` | `src`, `alt`, `fallback`, `size` xs·sm·md·lg·xl; Group `max` | `size` also takes points; the default fallback is the initial of `alt`. |
+| `Skeleton` | `shape` text·circle·rect | `width`, `height` as props (no classes). |
+| `EmptyState` | `icon`, `title`, `description`, `action` | `title`/`description` are strings. |
+| `Spinner` | `label`, `size` sm·md·lg | The platform's `ActivityIndicator`. |
+| `Countdown` | `target`, `skewMs`, `units`, `urgentBelowMs`, `size`, `label` | Same clock (`countdown/core`): one interval for every countdown on screen. |
+| `Segmented` | `options` (`value`, `label`, `disabled`), `value`, `onValueChange`, `size` | The web `Tabs variant="segmented"` (a tab list). To filter, `Chip.Group`. |
+| `Progress` | `variant` bar·ring, `size`, `value`/`max`, `label`, `valueText`, a ring's centre as children | The fill is the `accent` → `accent2` gradient (react-native-svg); it animates to each new value. |
+| `Toaster`, `toast` | `toast(title, { description, tone, icon, action, onPress, id, duration, onDismiss })`, `toast.success/warning/error/info`, `toast.dismiss(id?)`; `Toaster closeLabel position offset duration max` | No sonner: a light queue of its own. `offset` takes the safe-area inset (no safe-area dependency). |
+| `OrochiaMark` | `size`, `animated`, `title`, `neutral` | The mark, drawn with react-native-svg. |
+
+Every animation (skeleton, badge dot, urgent countdown, progress, toast entrance, the marks) stops when the system
+asks to reduce motion (`useReducedMotion()`). Accessibility goes through `role` and `aria-*` (RN ≥ 0.71): headings,
+`button`, `checkbox`/`radio`/`radiogroup`, `tab`/`tablist`, `progressbar` with its value, `timer`, a polite live
+region for the toasts.
+
+```tsx
+import { Button, Card, Countdown, OrochiaMark } from "@krizaka/ui/native";
+
+<Card.Root onPress={open}>
+  <Card.Body>
+    <Card.Title>{item.title}</Card.Title>
+    <Countdown target={item.endsAt} skewMs={skew} units={units} label={t("item.endsIn")} size="sm" />
+    <Button variant="primary" label={t("item.join")} onPress={join} />
+  </Card.Body>
+</Card.Root>
+
+<OrochiaMark size={72} title="Orochia" neutral={theme.borderDefault} />
+```
+
+The native stories (`Native/*` in the catalogue) render through react-native-web in the web Storybook: audited by axe
+and screenshot-compared in dark and light like the web ones. Tests run on Jest with React Native's preset and
+Testing Library (`src/native/*.test.tsx`); `scripts/native-dist.mjs` checks that `dist/native.js` carries no
+`"use client"`, no DOM and no import beyond React, `react-native` and `react-native-svg`.
+
 ## The marks
 
 ```tsx

package/dist/native.d.ts

@@ -1,4 +1,277 @@
-import React from 'react';
+import * as React from 'react';
+import React__default from 'react';
+import { ViewProps, PressableProps, StyleProp, ViewStyle, TextProps, ImageProps, DimensionValue, ActivityIndicatorProps } from 'react-native';
+
+/** Milliseconds left until `target` (never negative), ticking every second. `skewMs` = server clock − this clock. */
+declare function useCountdown(target: Date | string | number, skewMs?: number): number;
+/** Splits a duration into days, hours, minutes and seconds. */
+declare function splitDuration(ms: number): {
+    d: number;
+    h: number;
+    m: number;
+    s: number;
+};
+/** The short unit labels, passed translated (e.g. `{ d: "d", h: "h", m: "m", s: "s" }`). */
+type CountdownUnits = {
+    d: string;
+    h: string;
+    m: string;
+    s: string;
+};
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarProps = Omit<ViewProps, "children"> & {
+    src?: string | null;
+    /** The person's name: the image's accessible name and the source of the default initial. */
+    alt?: string;
+    /** Shown while there is no image or when it fails: default, the first letter of `alt`. */
+    fallback?: React.ReactNode;
+    /** A size of the scale, or points. */
+    size?: AvatarSize | number;
+};
+/** A round picture; the initial (or `fallback`) when there is none or it fails to load. */
+declare function AvatarRoot({ src, alt, fallback, size, style, ...props }: AvatarProps): React.JSX.Element;
+type AvatarGroupProps = ViewProps & {
+    /** How many avatars are shown; the rest becomes a `+n` avatar. */
+    max?: number;
+    /** The size of the avatars (and of the `+n` one). */
+    size?: AvatarSize | number;
+};
+/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */
+declare function AvatarGroup({ max, size, style, children, ...props }: AvatarGroupProps): React.JSX.Element;
+/** `Avatar` (an image with a fallback) and `Avatar.Group`. */
+declare const Avatar: typeof AvatarRoot & {
+    Group: typeof AvatarGroup;
+};
+
+type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "scrim";
+type BadgeProps = ViewProps & {
+    tone?: BadgeTone;
+    size?: "sm" | "md";
+    /** A small dot before the text, in the tone's colour. */
+    dot?: boolean;
+    /** The dot breathes (still when the system reduces motion). */
+    pulse?: boolean;
+    children?: React.ReactNode;
+};
+/** A short status in capitals: a tone, a size, an optional (pulsing) dot. */
+declare function Badge({ tone, size, dot, pulse, style, children, ...props }: BadgeProps): React.JSX.Element;
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+type BaseProps = Omit<PressableProps, "children" | "style"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** `rounded` (default) or `pill`. */
+    shape?: "rounded" | "pill";
+    /** Disables, shows a spinner in place of the icon and says busy. */
+    loading?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+type ButtonProps = BaseProps & {
+    /** The visible text — passed translated. It is also the accessible name. */
+    label: string;
+    /** Before the label (an icon component from the app's icon set). */
+    icon?: React.ReactNode;
+};
+/** The action. `variant` × `size` × `shape`, `loading`, `icon`; the haptics, if any, belong to the app's `onPress`. */
+declare function Button({ label, icon, variant, size, shape, loading, disabled, style, ...props }: ButtonProps): React.JSX.Element;
+type IconButtonProps = BaseProps & {
+    /** The accessible name — required, passed translated. */
+    label: string;
+    icon: React.ReactNode;
+};
+/** A square button holding only an icon: `label` is required, it is its accessible name. */
+declare function IconButton({ label, icon, variant, size, shape, loading, disabled, style, ...props }: IconButtonProps): React.JSX.Element;
+
+type TxtVariant = "display" | "title" | "body" | "caption" | "label" | "mono";
+type TxtTone = "text" | "secondary" | "muted" | "accent" | "success" | "warning" | "danger" | "onAccent" | "onMedia";
+type TxtProps = TextProps & {
+    /** The type scale: display · title · body (default) · caption · label · mono (tabular figures). */
+    variant?: TxtVariant;
+    /** A text role of the theme (default `text`). */
+    tone?: TxtTone;
+};
+/** Text in the platform's scale, coloured by a role of the current theme. `title` and `display` are headers for screen readers. */
+declare function Txt({ variant, tone, style, ...props }: TxtProps): React.JSX.Element;
+declare const textStyles: {
+    display: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "900";
+        letterSpacing: number;
+    };
+    title: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "800";
+    };
+    body: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    caption: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    label: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "700";
+    };
+    mono: {
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: "700";
+        fontVariant: "tabular-nums"[];
+    };
+};
+
+type CardRootProps = ViewProps & {
+    /** `default` (the raised surface) or `elevated` (one step higher, with a shadow). */
+    tone?: "default" | "elevated";
+    radius?: "md" | "lg" | "xl";
+    /**
+     * Makes the whole card pressable: a button for screen readers, named by its content (an `aria-label`, if any, must
+     * contain the visible title).
+     */
+    onPress?: PressableProps["onPress"];
+};
+/** The frame: the theme's surface, a hairline border, rounded corners; `onPress` makes it a pressable card. */
+declare function CardRoot({ tone, radius, onPress, style, ...props }: CardRootProps): React.JSX.Element;
+declare const ASPECT: {
+    readonly video: number;
+    readonly square: 1;
+    readonly portrait: number;
+};
+type CardMediaProps = ViewProps & {
+    aspect?: keyof typeof ASPECT | "auto";
+};
+/** The media area at the top of a card: a fixed ratio, the `media` role behind (what shows while an image loads). */
+declare function CardMedia({ aspect, style, ...props }: CardMediaProps): React.JSX.Element;
+type CardImageProps = Omit<ImageProps, "source" | "src"> & {
+    src?: string | null;
+    /** Shown when there is no image: an icon, an illustration (decorative). */
+    fallback?: React.ReactNode;
+};
+/** The image of a media (it fills it), or its `fallback` when there is none. Decorative unless `alt` is given. */
+declare function CardImage({ src, fallback, alt, style, ...props }: CardImageProps): React.JSX.Element;
+declare const CORNER: Record<"top-left" | "top-right" | "bottom-left" | "bottom-right", ViewStyle>;
+type CardOverlayProps = ViewProps & {
+    corner?: keyof typeof CORNER;
+};
+/** What sits on the media (badges, a caption), in a corner. */
+declare function CardOverlay({ corner, style, ...props }: CardOverlayProps): React.JSX.Element;
+declare const PADDING: {
+    readonly none: 0;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 24;
+};
+type CardBodyProps = ViewProps & {
+    padding?: keyof typeof PADDING;
+};
+declare function CardBody({ padding, style, ...props }: CardBodyProps): React.JSX.Element;
+/** The card's name: one line, a header for screen readers. */
+declare function CardTitle({ numberOfLines, ...props }: Omit<TxtProps, "variant">): React.JSX.Element;
+declare function CardDescription({ numberOfLines, ...props }: Omit<TxtProps, "variant">): React.JSX.Element;
+declare function CardFooter({ style, ...props }: ViewProps): React.JSX.Element;
+/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Footer` — the web parts, on View, Image and Text. */
+declare const Card: {
+    Root: typeof CardRoot;
+    Media: typeof CardMedia;
+    Image: typeof CardImage;
+    Overlay: typeof CardOverlay;
+    Body: typeof CardBody;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Footer: typeof CardFooter;
+};
+
+type ChipSize = "sm" | "md";
+type CommonProps = Omit<PressableProps, "children" | "style" | "onPress"> & {
+    size?: ChipSize;
+    style?: StyleProp<ViewStyle>;
+    /** The text (passed translated) or a node (an icon and a text). */
+    children: React.ReactNode;
+};
+type ToggleChipProps = CommonProps & {
+    /** Inside `Chip.Group`: the value this chip stands for (required there, ignored alone). */
+    value?: string;
+    /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    removable?: false;
+};
+type RemovableChipProps = CommonProps & {
+    /** A static chip (a chosen tag, an applied filter) with a remove button. */
+    removable: true;
+    /** The accessible name of the remove button — passed translated, e.g. "Remove #night". */
+    removeLabel: string;
+    onRemove: () => void;
+};
+type ChipProps = ToggleChipProps | RemovableChipProps;
+/** A selectable pill (`selected` / `onSelectedChange`), an item of `Chip.Group` (`value`), or `removable`. */
+declare function ChipBase(props: ChipProps): React.JSX.Element;
+type GroupBase = {
+    size?: ChipSize;
+    disabled?: boolean;
+    /** One horizontal scrolling row (a filter bar) instead of wrapping lines. */
+    scrollable?: boolean;
+    /** The accessible name of the group — passed translated. */
+    "aria-label"?: string;
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+};
+type ChipGroupProps = (GroupBase & {
+    type: "single";
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}) | (GroupBase & {
+    type: "multiple";
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+/** A set of chips: `single` (one value, a radio group; pressing the chosen chip keeps it) or `multiple` (toggles). */
+declare function ChipGroup(props: ChipGroupProps): React.JSX.Element;
+/** `Chip` and `Chip.Group`. */
+declare const Chip: typeof ChipBase & {
+    Group: typeof ChipGroup;
+};
+
+type CountdownProps = {
+    target: Date | string | number;
+    /** Server clock − this clock, in milliseconds. */
+    skewMs?: number;
+    /** The short unit labels, passed translated. */
+    units: CountdownUnits;
+    /** Below this many milliseconds it turns urgent (the danger role, the last segment breathes). Default 60 s. */
+    urgentBelowMs?: number;
+    size?: "sm" | "md" | "lg";
+    /** Accessible name, e.g. "Ends in". */
+    label: string;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Time left until a moment, as segments (2d 04h 13m — days only when there are some) in tabular figures, on the same
+ * clock as the web `Countdown` (one interval for every countdown on screen). Under `urgentBelowMs` it turns to the
+ * danger role and its last segment breathes (still when the system reduces motion).
+ */
+declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label, style }: CountdownProps): React.JSX.Element;
+
+type EmptyStateProps = Omit<ViewProps, "children"> & {
+    /** A decorative icon (hidden from screen readers). */
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    /** What to do next: a Button. */
+    action?: React.ReactNode;
+};
+/** What a list, a search or a screen says when it has nothing to show — every word is a prop. */
+declare function EmptyState({ icon, title, description, action, style, ...props }: EmptyStateProps): React.JSX.Element;
 
 interface NativeMarkProps {
     /** Width and height in points. */
@@ -15,6 +288,201 @@ interface NativeMarkProps {
  * react-native-svg. Three layers so that the motion runs on the native driver: the orbit turns, the eye and the flame
  * breathe, the serpent stays still.
  */
-declare function OrochiaMark({ size, animated, title, neutral }: NativeMarkProps): React.JSX.Element;
+declare function OrochiaMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
+
+type ProgressProps = {
+    /** `bar` (default) or `ring`. */
+    variant?: "bar" | "ring";
+    size?: "sm" | "md" | "lg";
+    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */
+    value?: number | null;
+    max?: number;
+    /** The accessible name — passed translated ("Upload", "Raised towards the goal"). */
+    label: string;
+    /** The value in words for screen readers ("$420 of $1,000") — default: the percentage. */
+    valueText?: string;
+    /** A ring's centre: an amount, a percentage, an icon. */
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * A progress bar or ring in the accent gradient (`accent` → `accent2`): it moves to `value` / `max` when it changes,
+ * indeterminate without a value. Still under reduced motion. A `progressbar` with its value for screen readers.
+ */
+declare function Progress({ variant, size, value, max, label, valueText, children, style }: ProgressProps): React.JSX.Element;
+
+type SegmentedOption<T extends string> = {
+    value: T;
+    label: string;
+    disabled?: boolean;
+};
+type SegmentedProps<T extends string> = {
+    /** The views, in order; `label` passed translated. */
+    options: readonly SegmentedOption<T>[];
+    value: T;
+    onValueChange: (value: T) => void;
+    size?: "sm" | "md";
+    /** The accessible name of the tab list — passed translated. */
+    "aria-label"?: string;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Switches between views of one screen: equal segments on a track, the chosen one raised — the web
+ * `Tabs variant="segmented"`. A tab list for screen readers. To filter a list, use `Chip.Group`.
+ */
+declare function Segmented<T extends string>({ options, value, onValueChange, size, "aria-label": label, style }: SegmentedProps<T>): React.JSX.Element;
+
+type SkeletonProps = {
+    /** `text` (a line), `circle` (an avatar), `rect` (a media, a card). */
+    shape?: "text" | "circle" | "rect";
+    width?: DimensionValue;
+    height?: DimensionValue;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+/** A pulsing placeholder the size of what is loading — hidden from screen readers; still when the system reduces motion. */
+declare function Skeleton({ shape, width, height, style, testID }: SkeletonProps): React.JSX.Element;
+
+type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
+    /** The accessible name of the wait, e.g. "Loading" — passed translated. */
+    label: string;
+    size?: "sm" | "md" | "lg";
+};
+/** An indeterminate wait: the platform's activity indicator in the accent, named by `label`. */
+declare function Spinner({ label, size, ...props }: SpinnerProps): React.JSX.Element;
+
+type ThemeName = "dark" | "light";
+/** The colour roles of one theme (the @krizaka/tokens roles). */
+type Theme = {
+    readonly surface0: string;
+    readonly surface1: string;
+    readonly surface2: string;
+    readonly surface3: string;
+    readonly media: string;
+    readonly borderSubtle: string;
+    readonly borderDefault: string;
+    readonly borderStrong: string;
+    readonly textPrimary: string;
+    readonly textSecondary: string;
+    readonly textMuted: string;
+    readonly textOnMedia: string;
+    readonly accent: string;
+    readonly accentHover: string;
+    readonly accentSoft: string;
+    readonly accent2: string;
+    readonly onAccent: string;
+    readonly ring: string;
+    readonly success: string;
+    readonly warning: string;
+    readonly danger: string;
+    readonly info: string;
+    readonly scrim: string;
+    readonly scrimStrong: string;
+    readonly overlay: string;
+};
+/** Corner radii, in points. */
+type Radius = {
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+    readonly xl: number;
+    readonly full: number;
+};
+/** Motion: the cubic-bezier control points of the platform's ease (`Easing.bezier(...motion.ease)`). */
+type Motion = {
+    readonly ease: readonly [number, number, number, number];
+};
+type Mode = "dark" | "light" | "system";
+/** A product's colour roles per theme (e.g. `nativeTheme` of a product design system): only the roles it changes. */
+type ThemeOverrides = {
+    readonly dark?: Partial<Theme>;
+    readonly light?: Partial<Theme>;
+};
+/** Font families, when the app has loaded them (`expo-font`…). Absent: the system font. */
+type ThemeFonts = {
+    readonly sans?: string;
+    readonly display?: string;
+    readonly mono?: string;
+};
+type ThemeContextValue = {
+    /** The chosen mode: dark, light or follow the system. */
+    mode: Mode;
+    setMode: (mode: Mode) => void;
+    /** The resolved scheme: what `mode` gives on this device right now. */
+    scheme: ThemeName;
+    /** The colour roles of the resolved scheme, overrides applied. */
+    theme: Theme;
+    radius: Radius;
+    motion: Motion;
+    fonts: ThemeFonts;
+};
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    /** Controlled mode (with `onModeChange`). */
+    mode?: Mode;
+    /** Uncontrolled: the mode before the user picks one. Default: follow the system. */
+    defaultMode?: Mode;
+    /** Every change of mode — the app persists it (no storage dependency here). */
+    onModeChange?: (mode: Mode) => void;
+    /** The product's roles over the platform's, per theme. */
+    overrides?: ThemeOverrides;
+    fonts?: ThemeFonts;
+};
+/** Once, at the root of the app. Without it, `useTheme()` follows the system with the platform's roles. */
+declare function ThemeProvider({ children, mode: controlled, defaultMode, onModeChange, overrides, fonts }: ThemeProviderProps): React.JSX.Element;
+/** The current theme: `{ mode, setMode, scheme, theme, radius, motion, fonts }`. */
+declare function useTheme(): ThemeContextValue;
+/** True while the system asks to reduce motion: every loop and transition of /native stops. */
+declare function useReducedMotion(): boolean;
+/** A role at a lower opacity (`#rrggbb` → `rgba()`): the soft tints of the status tones. Other forms pass through. */
+declare function alpha(color: string, opacity: number): string;
+
+type ToastTone = "default" | "success" | "warning" | "error" | "info";
+type ToastOptions = {
+    /** Replaces a toast with the same id (a notification shown once). */
+    id?: string;
+    description?: string;
+    tone?: ToastTone;
+    /** A decorative icon before the text. */
+    icon?: React.ReactNode;
+    /** Milliseconds on screen; `Infinity` keeps it until dismissed. Default: the Toaster's `duration`. */
+    duration?: number;
+    /** Pressing the toast (opening what it is about); it is then dismissed. */
+    onPress?: () => void;
+    /** A button inside the toast; it is then dismissed. */
+    action?: {
+        label: string;
+        onPress: () => void;
+    };
+    /** Called once the toast leaves, whatever the reason. */
+    onDismiss?: () => void;
+};
+type ToastItem = ToastOptions & {
+    id: string;
+    title: string;
+};
+declare function show(title: string, options?: ToastOptions): string;
+declare function dismiss(id?: string): void;
+/** `toast(title, options)`, `toast.success/warning/error/info(…)`, `toast.dismiss(id?)` — the web `toast`'s names. */
+declare const toast: typeof show & {
+    success: (title: string, options?: Omit<ToastOptions, "tone">) => string;
+    warning: (title: string, options?: Omit<ToastOptions, "tone">) => string;
+    error: (title: string, options?: Omit<ToastOptions, "tone">) => string;
+    info: (title: string, options?: Omit<ToastOptions, "tone">) => string;
+    dismiss: typeof dismiss;
+};
+type ToasterProps = {
+    /** The accessible name of each toast's close button — passed translated. */
+    closeLabel: string;
+    position?: "top" | "bottom";
+    /** Distance from the edge, e.g. the safe-area inset + a margin (no safe-area dependency here). */
+    offset?: number;
+    /** Default milliseconds on screen. */
+    duration?: number;
+    /** At most this many on screen; the oldest leave first. */
+    max?: number;
+};
+/** Mount once, at the root (inside `ThemeProvider`). Then call `toast()` from anywhere. */
+declare function Toaster({ closeLabel, position, offset, duration, max }: ToasterProps): React.JSX.Element | null;
 
-export { type NativeMarkProps, OrochiaMark };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type Mode, type Motion, type NativeMarkProps, OrochiaMark, Progress, type ProgressProps, type Radius, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };