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

package/dist/native.d.ts

@@ -19,8 +19,11 @@ type CountdownUnits = {
     s: string;
 };
 
+type BrandId = "krizaka" | "orazaka" | "orochia";
+
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 type AvatarProps = Omit<ViewProps, "children"> & {
+    /** The image URI; absent, `null` or failing: the fallback. */
     src?: string | null;
     /** The person's name: the image's accessible name and the source of the default initial. */
     alt?: string;
@@ -46,7 +49,9 @@ declare const Avatar: typeof AvatarRoot & {
 
 type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger" | "scrim";
 type BadgeProps = ViewProps & {
+    /** neutral (default) · accent · success · warning · danger · scrim (on a media). */
     tone?: BadgeTone;
+    /** sm (default) · md. */
     size?: "sm" | "md";
     /** A small dot before the text, in the tone's colour. */
     dot?: boolean;
@@ -60,12 +65,15 @@ declare function Badge({ tone, size, dot, pulse, style, children, ...props }: Ba
 type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
 type ButtonSize = "sm" | "md" | "lg";
 type BaseProps = Omit<PressableProps, "children" | "style"> & {
+    /** The look: `primary`, `secondary` (default), `outline`, `ghost`, `danger` — as on the web. */
     variant?: ButtonVariant;
+    /** sm · md (default) · lg: 32, 40 or 48 points high. */
     size?: ButtonSize;
     /** `rounded` (default) or `pill`. */
     shape?: "rounded" | "pill";
     /** Disables, shows a spinner in place of the icon and says busy. */
     loading?: boolean;
+    /** Styles merged last, over the button's frame. */
     style?: StyleProp<ViewStyle>;
 };
 type ButtonProps = BaseProps & {
@@ -79,6 +87,7 @@ declare function Button({ label, icon, variant, size, shape, loading, disabled,
 type IconButtonProps = BaseProps & {
     /** The accessible name — required, passed translated. */
     label: string;
+    /** The icon (from the app's icon set); the button shows nothing else. */
     icon: React.ReactNode;
 };
 /** A square button holding only an icon: `label` is required, it is its accessible name. */
@@ -130,6 +139,7 @@ declare const textStyles: {
 type CardRootProps = ViewProps & {
     /** `default` (the raised surface) or `elevated` (one step higher, with a shadow). */
     tone?: "default" | "elevated";
+    /** The corner radius, from the theme: md · lg · xl (default). */
     radius?: "md" | "lg" | "xl";
     /**
      * Makes the whole card pressable: a button for screen readers, named by its content (an `aria-label`, if any, must
@@ -145,11 +155,13 @@ declare const ASPECT: {
     readonly portrait: number;
 };
 type CardMediaProps = ViewProps & {
+    /** video (default, 16:9) · square · portrait, or `auto` (the image's own). */
     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"> & {
+    /** The image URI; absent or `null`: the `fallback` on the media colour. */
     src?: string | null;
     /** Shown when there is no image: an icon, an illustration (decorative). */
     fallback?: React.ReactNode;
@@ -158,6 +170,7 @@ type CardImageProps = Omit<ImageProps, "source" | "src"> & {
 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 & {
+    /** The corner of the media it sits in: top-left (default) · top-right · bottom-left · bottom-right. */
     corner?: keyof typeof CORNER;
 };
 /** What sits on the media (badges, a caption), in a corner. */
@@ -169,6 +182,7 @@ declare const PADDING: {
     readonly lg: 24;
 };
 type CardBodyProps = ViewProps & {
+    /** none · sm · md (default) · lg. */
     padding?: keyof typeof PADDING;
 };
 declare function CardBody({ padding, style, ...props }: CardBodyProps): React.JSX.Element;
@@ -190,7 +204,9 @@ declare const Card: {
 
 type ChipSize = "sm" | "md";
 type CommonProps = Omit<PressableProps, "children" | "style" | "onPress"> & {
+    /** sm · md (default); in a group, the group's size. */
     size?: ChipSize;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
     /** The text (passed translated) or a node (an icon and a text). */
     children: React.ReactNode;
@@ -200,7 +216,9 @@ type ToggleChipProps = CommonProps & {
     value?: string;
     /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */
     selected?: boolean;
+    /** Uncontrolled: selected at first (alone, outside a group). */
     defaultSelected?: boolean;
+    /** Alone: called with the new state when it is pressed. */
     onSelectedChange?: (selected: boolean) => void;
     removable?: false;
 };
@@ -209,18 +227,21 @@ type RemovableChipProps = CommonProps & {
     removable: true;
     /** The accessible name of the remove button — passed translated, e.g. "Remove #night". */
     removeLabel: string;
+    /** Called when its remove button is pressed. */
     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 = {
+    /** sm · md (default); in a group, the group's size. */
     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;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
 };
@@ -243,6 +264,7 @@ declare const Chip: typeof ChipBase & {
 };
 
 type CountdownProps = {
+    /** The moment it counts down to: a Date, an ISO string or epoch milliseconds. */
     target: Date | string | number;
     /** Server clock − this clock, in milliseconds. */
     skewMs?: number;
@@ -250,9 +272,11 @@ type CountdownProps = {
     units: CountdownUnits;
     /** Below this many milliseconds it turns urgent (the danger role, the last segment breathes). Default 60 s. */
     urgentBelowMs?: number;
+    /** sm · md (default) · lg. */
     size?: "sm" | "md" | "lg";
     /** Accessible name, e.g. "Ends in". */
     label: string;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /**
@@ -265,7 +289,9 @@ declare function Countdown({ target, skewMs, units, urgentBelowMs, size, label,
 type EmptyStateProps = Omit<ViewProps, "children"> & {
     /** A decorative icon (hidden from screen readers). */
     icon?: React.ReactNode;
+    /** What is empty, in a few words ("No notifications yet"). */
     title: string;
+    /** Why, or what will fill it. */
     description?: string;
     /** What to do next: a Button. */
     action?: React.ReactNode;
@@ -276,26 +302,47 @@ declare function EmptyState({ icon, title, description, action, style, ...props
 interface NativeMarkProps {
     /** Width and height in points. */
     size?: number;
-    /** The orbit turns and the flame breathes; always still when the system asks to reduce motion. */
+    /** The orbit turns and the core breathes; always still when the system asks to reduce motion. */
     animated?: boolean;
     /** An accessible name (the mark becomes an image); without it the mark is decorative. */
     title?: string;
-    /** The neutral strokes (orbit, ring): the host's border colour. */
+    /** The neutral strokes (orbit, ring). Default: the theme's muted text colour. */
     neutral?: string;
 }
+
+/**
+ * The Krizaka mark for React Native — the geometry of the web mark (marks/krizaka-geometry.ts), drawn with
+ * react-native-svg: the ink shield follows the theme's text roles, the node and the core are Krizaka blue. The orbit
+ * turns and the core breathes on the native driver; still when the system reduces motion.
+ */
+declare function KrizakaMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
+
+/**
+ * The Orazaka mark for React Native — the geometry of the web mark (marks/orazaka-geometry.ts): the three shards turn
+ * slowly around the core, which breathes; still when the system reduces motion.
+ */
+declare function OrazakaMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
+
 /**
  * The Orochia mark for React Native — the same geometry as the web mark (marks/orochia-geometry.ts), drawn with
  * 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__default.JSX.Element;
+declare function OrochiaMark({ size, animated, title, neutral: neutralProp }: NativeMarkProps): React__default.JSX.Element;
+
+/** The mark of a Krizaka brand by id, for React Native — the counterpart of the web `ProductLogo`. */
+declare function ProductMark({ id, ...props }: NativeMarkProps & {
+    id: BrandId;
+}): React__default.JSX.Element;
 
 type ProgressProps = {
     /** `bar` (default) or `ring`. */
     variant?: "bar" | "ring";
+    /** sm · md (default) · lg: the bar's thickness or the ring's diameter. */
     size?: "sm" | "md" | "lg";
     /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */
     value?: number | null;
+    /** The value of a full bar. Default 100. */
     max?: number;
     /** The accessible name — passed translated ("Upload", "Raised towards the goal"). */
     label: string;
@@ -303,6 +350,7 @@ type ProgressProps = {
     valueText?: string;
     /** A ring's centre: an amount, a percentage, an icon. */
     children?: React.ReactNode;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /**
@@ -319,11 +367,15 @@ type SegmentedOption<T extends string> = {
 type SegmentedProps<T extends string> = {
     /** The views, in order; `label` passed translated. */
     options: readonly SegmentedOption<T>[];
+    /** The selected view (controlled). */
     value: T;
+    /** Called with the view pressed. */
     onValueChange: (value: T) => void;
+    /** sm · md (default). */
     size?: "sm" | "md";
     /** The accessible name of the tab list — passed translated. */
     "aria-label"?: string;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /**
@@ -335,9 +387,13 @@ declare function Segmented<T extends string>({ options, value, onValueChange, si
 type SkeletonProps = {
     /** `text` (a line), `circle` (an avatar), `rect` (a media, a card). */
     shape?: "text" | "circle" | "rect";
+    /** Points or a percentage; default: the shape's. */
     width?: DimensionValue;
+    /** Points or a percentage; default: the shape's. */
     height?: DimensionValue;
+    /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
+    /** The id the tests find it by. */
     testID?: string;
 };
 /** A pulsing placeholder the size of what is loading — hidden from screen readers; still when the system reduces motion. */
@@ -346,6 +402,7 @@ declare function Skeleton({ shape, width, height, style, testID }: SkeletonProps
 type SpinnerProps = Omit<ActivityIndicatorProps, "size" | "color"> & {
     /** The accessible name of the wait, e.g. "Loading" — passed translated. */
     label: string;
+    /** sm · md (default) · lg. */
     size?: "sm" | "md" | "lg";
 };
 /** An indeterminate wait: the platform's activity indicator in the accent, named by `label`. */
@@ -369,9 +426,13 @@ type Theme = {
     readonly accent: string;
     readonly accentHover: string;
     readonly accentSoft: string;
+    readonly accentText: string;
     readonly accent2: string;
     readonly onAccent: string;
     readonly ring: string;
+    readonly brandGradientFrom: string;
+    readonly brandGradientVia: string;
+    readonly brandGradientTo: string;
     readonly success: string;
     readonly warning: string;
     readonly danger: string;
@@ -426,6 +487,7 @@ type ThemeProviderProps = {
     onModeChange?: (mode: Mode) => void;
     /** The product's roles over the platform's, per theme. */
     overrides?: ThemeOverrides;
+    /** Font families the app has loaded (`expo-font`…); absent: the system font. */
     fonts?: ThemeFonts;
 };
 /** Once, at the root of the app. Without it, `useTheme()` follows the system with the platform's roles. */
@@ -474,6 +536,7 @@ declare const toast: typeof show & {
 type ToasterProps = {
     /** The accessible name of each toast's close button — passed translated. */
     closeLabel: string;
+    /** Where the toasts stack: `top` (default) or `bottom`. */
     position?: "top" | "bottom";
     /** Distance from the edge, e.g. the safe-area inset + a margin (no safe-area dependency here). */
     offset?: number;
@@ -485,4 +548,4 @@ type ToasterProps = {
 /** 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 { 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 };
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, 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, KrizakaMark, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, ProductMark, 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 };