@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/typescript/commonjs/components/Button/Button.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { PressAnimationPreset } from '../../hooks/usePressAnimation';
+import type { GradientDefinition } from '../../theme/types';
+import type { HapticType } from '../../utils/hapticUtils';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+/**
+ * Visual weight, heaviest first: `solid` fills with the tone, `soft` tints
+ * the fill and draws the label in the tone, `outline` keeps a tone border,
+ * `ghost` is label only, `link` is an inline text link in the link colour
+ * whatever the tone, with no box of its own; its underline sweeps in from
+ * the left on press and stays. `glass` is the odd one out: a frosted white
+ * fill with a bright rim and dark ink, for a button sitting on a brand
+ * gradient or a photo, where a tone fill would fight the surface. Its
+ * colours come from `theme.colors.glass`, the same in both schemes, and the
+ * tone only inks a badged icon.
+ */
+export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'glass';
+export type ButtonTone = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
+    title?: string;
+    children?: React.ReactNode;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    /**
+     * When true, the button is disabled and renders a Spinner in place of the title (icons hidden).
+     * Use for in-flight submissions. This is **not** SkeletonContent — interactive controls signal
+     * pending action with an inline spinner, not a placeholder shimmer.
+     */
+    loading?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    /**
+     * Icon before the title. An icon name (`leftIcon="add"`) is drawn in the
+     * label colour at the size's icon size; `{ name, variant }`, a render
+     * function or any node also work.
+     */
+    leftIcon?: SlotIcon;
+    /** Icon after the title; same contract as `leftIcon`. */
+    rightIcon?: SlotIcon;
+    /**
+     * Draws `leftIcon` inside its own opaque disc, sitting at the pill's left
+     * edge, so the icon reads as a badge rather than a glyph in the label. The
+     * disc inverts the button's own colours: white with the icon in the tone on
+     * `solid` and `glass`, the tone with a white icon on `soft`, `outline` and
+     * `ghost`. Sized to the button height less a 4 pt inset; pair with
+     * `rounded` for the pill shape. Ignored on a `link` and without a
+     * `leftIcon`.
+     */
+    leftIconBadge?: boolean;
+    haptic?: HapticType | false;
+    rounded?: boolean;
+    /**
+     * Optional gradient background. Pass either a key from `theme.gradients`
+     * (e.g. `"primary"`) or a `GradientDefinition` literal.
+     */
+    gradient?: string | GradientDefinition;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Press feedback by name: `'scale'` (default), `'bounce'`, `'fade'`,
+     * `'sink'` or `'pulse'`, or `false` for none. Same shape as `haptic`.
+     * A `link` defaults to none: its underline sweeping in is its feedback.
+     */
+    pressAnimation?: PressAnimationPreset | false;
+    testID?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<RNView>>;
+export { Button };
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/lib/typescript/commonjs/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonProps, ButtonSize, ButtonTone, ButtonVariant } from './Button';
+export { Button, default } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Card/Card.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { GestureResponderEvent, ImageSourcePropType, PressableProps, View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { ColorPalette, GradientDefinition } from '../../theme/types';
+import type { HapticType } from '../../utils/hapticUtils';
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardElevation = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type CardRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type CardBackground = keyof ColorPalette['background'] | (string & {});
+export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
+    children?: React.ReactNode;
+    variant?: CardVariant;
+    elevation?: CardElevation;
+    radius?: CardRadius;
+    padding?: CardPadding;
+    interactive?: boolean;
+    /**
+     * Background colour: a `colors.background.*` token or any raw colour
+     * string. Applies on every variant and replaces the variant's default
+     * surface colour; `style` / `containerStyle` still win over it.
+     */
+    bg?: CardBackground;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    imageSource?: ImageSourcePropType;
+    imageHeight?: number;
+    imageAspectRatio?: number;
+    imageOverlay?: React.ReactNode;
+    /**
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
+     */
+    loading?: boolean;
+    /**
+     * Optional gradient background. Pass a key from `theme.gradients` or a
+     * literal `GradientDefinition`. Layered behind the card's content so
+     * existing variant/elevation/radius continue to work.
+     */
+    gradient?: string | GradientDefinition;
+    onPress?: (event: GestureResponderEvent) => void;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    /** Alias for `style` — applied to the outer card element. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the header wrapper View. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the body wrapper View (only present when header or footer is provided). */
+    bodyStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the footer wrapper View. */
+    footerStyle?: StyleProp<ViewStyle>;
+    /** Per-instance override of the corner radius. Wins over the `radius` token. */
+    borderRadius?: number;
+    testID?: string;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<CardProps>;
+};
+export { Card };
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/lib/typescript/commonjs/components/Card/index.d.ts

@@ -0,0 +1,3 @@
+export type { CardElevation, CardPadding, CardProps, CardRadius, CardVariant } from './Card';
+export { Card, default } from './Card';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Carousel/Carousel.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Carousel — generic horizontal carousel with pagination, auto-play, and looping.
+ *
+ * Backed by a virtualized FlatList for memory efficiency. Pagination is driven
+ * by `Animated.event` with `useNativeDriver` so the indicator tracks the scroll
+ * gesture frame-perfectly without round-tripping to JS.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<CarouselRef>(null);
+ * <Carousel
+ *   data={items}
+ *   renderItem={(item) => <Card {...item} />}
+ *   autoPlay
+ *   loop
+ * />
+ *
+ * ref.current?.scrollTo(2);
+ * ref.current?.next();
+ * ref.current?.prev();
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export type PaginationStyle = 'dots' | 'bars' | 'numbers';
+export interface CarouselProps<T = unknown> {
+    data: T[];
+    renderItem: (item: T, index: number) => React.ReactNode;
+    keyExtractor?: (item: T, index: number) => string;
+    /** Controlled current index. */
+    index?: number;
+    /** Initial index for uncontrolled usage. */
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    autoPlay?: boolean;
+    /** Auto-play tick in ms. Default 4000. */
+    autoPlayInterval?: number;
+    /** When the user reaches the end, jump back to the start. autoPlay implies loop. */
+    loop?: boolean;
+    showPagination?: boolean;
+    paginationStyle?: PaginationStyle;
+    /** Width per slide. 'screen' uses the parent width (or window width fallback). */
+    itemWidth?: number | 'screen';
+    /** Horizontal spacing between slides. */
+    spacing?: number;
+    containerStyle?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+    /** Render a horizontal strip of 40x40 thumbnails below the carousel. */
+    showThumbnails?: boolean;
+    /** Feedback on thumbnail selection. `false` opts out. */
+    haptic?: HapticType | false;
+    /**
+     * Custom thumbnail renderer. If omitted, falls back to an Image when the item
+     * shape is `{ uri: string }`, otherwise a numbered placeholder.
+     */
+    renderThumbnail?: (item: T, index: number) => React.ReactNode;
+    /**
+     * When true, renders the carousel as its authored skeleton placeholder
+     * shape: a single slide block plus pagination dots. Footprint matches the
+     * loaded carousel so the layout doesn't shift when data arrives.
+     */
+    loading?: boolean;
+}
+export interface CarouselRef {
+    scrollTo: (index: number, animated?: boolean) => void;
+    next: () => void;
+    prev: () => void;
+}
+declare const Carousel: (<T = unknown>(props: CarouselProps<T> & {
+    ref?: React.Ref<CarouselRef>;
+}) => React.ReactElement | null) & {
+    Skeleton: React.FC<CarouselProps<unknown>>;
+};
+export { Carousel };
+export default Carousel;
+//# sourceMappingURL=Carousel.d.ts.map

package/lib/typescript/commonjs/components/Carousel/index.d.ts

@@ -0,0 +1,3 @@
+export type { CarouselProps, CarouselRef, PaginationStyle } from './Carousel';
+export { Carousel, default } from './Carousel';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,32 @@
+import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+export type CheckboxTone = 'primary' | 'success' | 'warning' | 'error';
+export interface CheckboxProps extends Omit<PressableProps, 'style' | 'children' | 'onPress'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    label?: string;
+    size?: CheckboxSize;
+    tone?: CheckboxTone;
+    accessibilityLabel?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    boxStyle?: StyleProp<ViewStyle>;
+    /** Style override for the check glyph (✓) inside the box. */
+    checkIconStyle?: StyleProp<TextStyle>;
+    /** Style override for the indeterminate bar inside the box. */
+    indeterminateBarStyle?: StyleProp<ViewStyle>;
+    /** Style override for the outer row container. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override for the label text. */
+    labelStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<RNView>>;
+export { Checkbox };
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/typescript/commonjs/components/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxProps, CheckboxSize, CheckboxTone } from './Checkbox';
+export { Checkbox, default } from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Chip/Chip.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+export type ChipVariant = 'filled' | 'outlined';
+export type ChipTone = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+export type ChipSize = 'sm' | 'md';
+export interface ChipProps {
+    label: string;
+    selected?: boolean;
+    onPress?: () => void;
+    onClose?: () => void;
+    /**
+     * Icon before the label. An icon name (`leftIcon="star"`) is drawn in the
+     * label colour at the size's icon size; `{ name, variant }`, a render
+     * function or any node also work.
+     */
+    leftIcon?: SlotIcon;
+    variant?: ChipVariant;
+    tone?: ChipTone;
+    size?: ChipSize;
+    disabled?: boolean;
+    /**
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
+     */
+    loading?: boolean;
+    accessibilityLabel?: string;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    /** Style override for the chip outer container (alias to style, applied after). */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override for the close (×) button pressable. */
+    closeButtonStyle?: StyleProp<ViewStyle>;
+    /** Style override for the close (×) glyph text. */
+    closeIconStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<ChipProps>;
+};
+export { Chip };
+export default Chip;
+//# sourceMappingURL=Chip.d.ts.map

package/lib/typescript/commonjs/components/Chip/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChipProps, ChipSize, ChipTone, ChipVariant } from './Chip';
+export { Chip, default } from './Chip';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -0,0 +1,120 @@
+/**
+ * ChoiceGroup — headless single-choice group with templated options.
+ *
+ * The component owns the BEHAVIOUR: selection state (controlled or
+ * uncontrolled), per-option press handling, haptics, radio/radiogroup a11y,
+ * and row/column/wrap layout. Each option's LOOK comes from a template:
+ *
+ *   - `card` (default): a bordered card — label (+ optional icon /
+ *     description) with a RadioDot after the content (or before it, with
+ *     `indicatorPosition="leading"`), tinted with the option's colour when
+ *     selected. The "Hot / Warm / Cold" status-picker pattern works
+ *     zero-config.
+ *   - `chip`: an icon-and-label pill that hugs its content. Selection is the
+ *     pill itself, edged and tinted in the option's colour with the label and
+ *     icon in that colour; no dot, no description. The role / filter pattern.
+ *   - `renderOption`: full custom JSX per option. Receives
+ *     `{ option, index, selected, pressed, disabled, color }`; press handling
+ *     and a11y stay managed. Embed the exported RadioDot to keep the standard
+ *     indicator inside a custom layout.
+ *
+ * Cross-option visuals (a single indicator sliding BETWEEN options, joined
+ * segments) are out of scope by design — that's SegmentedControl.
+ *
+ * Same data contract as Select: `ChoiceOption[]` by default, `getOption*`
+ * accessors for custom shapes.
+ */
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+import type { RadioValue } from '../Radio/Radio';
+export type ChoiceGroupSize = 'sm' | 'md' | 'lg';
+export type ChoiceGroupDirection = 'row' | 'column';
+export type ChoiceGroupVariant = 'card' | 'chip';
+/** Which side of the card the radio dot sits on. */
+export type ChoiceGroupIndicatorPosition = 'leading' | 'trailing';
+export interface ChoiceOption {
+    label: string;
+    value: RadioValue;
+    /** Tints the default card (label, border, dot, selected fill). Default: `colors.primary`. */
+    color?: string;
+    /** Card only; the chip is label and icon alone. */
+    description?: string;
+    /**
+     * Icon before the label. An AppIcon name (`icon: 'shield-tick'`) is drawn
+     * in the option's current ink (its colour when selected, the text ink
+     * otherwise) and bold while selected; `{ name, variant }`, a render
+     * function receiving `{ color, size, disabled }`, or any node also work.
+     */
+    icon?: SlotIcon;
+    disabled?: boolean;
+}
+/** Everything a custom option template needs to render one option. */
+export interface ChoiceOptionState<T = ChoiceOption> {
+    option: T;
+    index: number;
+    selected: boolean;
+    pressed: boolean;
+    disabled: boolean;
+    /** Resolved option colour: `getOptionColor` → option `color` → `colors.primary`. */
+    color: string;
+}
+export interface ChoiceGroupProps<T = ChoiceOption> {
+    /** `ChoiceOption` shape by default; pass `getOption*` accessors for anything else. */
+    options: ReadonlyArray<T>;
+    /** Defaults to `(o) => (o as ChoiceOption).label`. */
+    getOptionLabel?: (option: T) => string;
+    /** Defaults to `(o) => (o as ChoiceOption).value`. */
+    getOptionValue?: (option: T) => RadioValue;
+    /** Defaults to `(o) => (o as ChoiceOption).disabled === true`. */
+    getOptionDisabled?: (option: T) => boolean;
+    /** Defaults to `(o) => (o as ChoiceOption).description`. */
+    getOptionDescription?: (option: T) => string | undefined;
+    /** Defaults to `(o) => (o as ChoiceOption).icon`. */
+    getOptionIcon?: (option: T) => SlotIcon | undefined;
+    /** Defaults to `(o) => (o as ChoiceOption).color`. */
+    getOptionColor?: (option: T) => string | undefined;
+    /** Controlled selected value. */
+    value?: RadioValue;
+    /** Uncontrolled initial value. */
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue) => void;
+    /**
+     * Custom option template. The library still owns press handling, haptics
+     * and a11y — the template only paints. Selected-state styling is the
+     * template's job (it gets the booleans).
+     */
+    renderOption?: (state: ChoiceOptionState<T>) => React.ReactNode;
+    /** Look of the built-in template: the bordered `card` (default) or the icon-and-label `chip`. */
+    variant?: ChoiceGroupVariant;
+    /** Side of the card the radio dot sits on. Default `'trailing'`; the chip has no dot. */
+    indicatorPosition?: ChoiceGroupIndicatorPosition;
+    /** Main axis of the option list. Default `'row'`. */
+    direction?: ChoiceGroupDirection;
+    /** Gap between options. Default `theme.spacing.sm`. */
+    gap?: number;
+    /** Allow options to wrap onto multiple lines (swatch grids). Default `false`. */
+    wrap?: boolean;
+    /**
+     * Stretch options equally along the main axis. Default: `true` for an
+     * unwrapped row of cards (the status-picker look), `false` otherwise; a
+     * chip hugs its content.
+     */
+    fullWidth?: boolean;
+    /** Disables the whole group. Per-option `disabled` still applies on top. */
+    disabled?: boolean;
+    /** Density of the built-in templates (padding / fontSize / icon / dot). Default `'md'`. */
+    size?: ChoiceGroupSize;
+    /** Haptic on select. Pass false to disable; pass a HapticType to override. */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    /** Style for each option's pressable wrapper (both templates). */
+    optionStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const ChoiceGroup: React.ForwardRefExoticComponent<ChoiceGroupProps<unknown> & React.RefAttributes<RNView>>;
+export { ChoiceGroup };
+export default ChoiceGroup;
+//# sourceMappingURL=ChoiceGroup.d.ts.map

package/lib/typescript/commonjs/components/ChoiceGroup/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChoiceGroupDirection, ChoiceGroupIndicatorPosition, ChoiceGroupProps, ChoiceGroupSize, ChoiceGroupVariant, ChoiceOption, ChoiceOptionState } from './ChoiceGroup';
+export { ChoiceGroup, default } from './ChoiceGroup';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Confetti/Confetti.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type ConfettiPreset = 'pop' | 'rain' | 'fireworks';
+export type ConfettiShape = 'strip' | 'square' | 'circle' | 'triangle' | 'star' | 'streamer';
+export type ConfettiSpeed = 'slow' | 'normal' | 'fast';
+export interface ConfettiOrigin {
+    x: number;
+    y: number;
+}
+/**
+ * Multipliers on the chosen preset, all defaulting to 1. They tune a preset
+ * rather than replace it, so `preset="pop" physics={{ fallSpeed: 2 }}` is still
+ * recognisably a pop.
+ */
+export interface ConfettiPhysics {
+    /** Launch speed. Above 1 throws pieces further from the origin. */
+    velocity?: number;
+    /** Air resistance. Above 1 makes pieces give up their launch speed sooner. */
+    drag?: number;
+    /** Steady falling speed once the launch speed is spent. */
+    fallSpeed?: number;
+    /** Burst arc in degrees, for `'pop'` and `'fireworks'`. Ignored by `'rain'`. */
+    spread?: number;
+}
+export interface ConfettiHandle {
+    /** Fire a burst. Re-seeds the pieces so each call looks different. */
+    start: () => void;
+    /** Stop and clear immediately. */
+    stop: () => void;
+}
+export interface ConfettiProps {
+    /** Number of pieces. Default 80. */
+    count?: number;
+    /** Piece colours. Defaults to a vibrant set drawn from the theme palette. */
+    colors?: string[];
+    /**
+     * Which animation to run. Default `'pop'`.
+     *
+     * - `'pop'` bursts open from `origin`, rises, hangs, then floats down.
+     * - `'rain'` falls from the top edge.
+     * - `'fireworks'` fires several staggered bursts at random points.
+     */
+    preset?: ConfettiPreset;
+    /** Which shapes appear. Defaults to a mix chosen per preset. */
+    shapes?: ConfettiShape[];
+    /** Scales `duration`: slow is 1.6x, fast is 0.6x. Default `'normal'`. */
+    speed?: ConfettiSpeed;
+    /** Tune the preset's motion. Each value multiplies the preset's own. */
+    physics?: ConfettiPhysics;
+    /** Burst origin for `'pop'` (defaults to the centre of the container). */
+    origin?: ConfettiOrigin;
+    /** Base animation duration in ms, before `speed` scales it. Default 2800. */
+    duration?: number;
+    /** Fade pieces out near the end. Default true. */
+    fadeOut?: boolean;
+    /** Fire automatically on mount. Default false. */
+    autoStart?: boolean;
+    /** Loop continuously (ongoing celebration). Default false. */
+    recycle?: boolean;
+    /** Base piece size in px (varied ±40% per piece). Default 10. */
+    size?: number;
+    /** Called once when a non-recycling burst finishes (or immediately if reduce-motion is on). */
+    onComplete?: () => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * A piece carries its whole trajectory, so every preset is data rather than a
+ * separate code path and all pieces share one `progress` value.
+ *
+ * Velocities and the terminal speed are fractions of the container per unit of
+ * timeline, not pixels, so a mid-burst layout change rescales instead of
+ * stranding pieces off-screen.
+ */
+export interface Piece {
+    color: string;
+    size: number;
+    shape: ConfettiShape;
+    x0Frac: number;
+    y0Frac: number;
+    /** Launch velocity, in container-widths / -heights per unit of timeline. */
+    vxFrac: number;
+    vyFrac: number;
+    /** Air resistance. Higher spends the launch velocity sooner. */
+    drag: number;
+    /** Steady fall speed once the launch velocity is spent, in heights per unit. */
+    terminalFrac: number;
+    /** Fraction of the timeline to wait before launching. */
+    delay: number;
+    rotations: number;
+    rotateDir: 1 | -1;
+    swayAmp: number;
+    swayFreq: number;
+    flutterFreq: number;
+}
+export declare const DEFAULT_PHYSICS: Required<ConfettiPhysics>;
+export interface Seed {
+    colors: string[];
+    baseSize: number;
+    originXFrac: number;
+    originYFrac: number;
+    physics: Required<ConfettiPhysics>;
+    shapes: ConfettiShape[];
+}
+/**
+ * Exported for tests only, deliberately not re-exported from the barrel.
+ *
+ * The rendered transform cannot verify a preset's shape: the test-time
+ * reanimated mock resolves the timeline straight to its end value, so every
+ * piece reads at t = 1 and per-piece `delay` becomes invisible. Asserting the
+ * trajectory a preset SEEDS is the only way to test it honestly.
+ */
+export declare const buildPieces: (count: number, preset: ConfettiPreset, seed: Seed) => Piece[];
+declare const Confetti: React.ForwardRefExoticComponent<ConfettiProps & React.RefAttributes<ConfettiHandle>>;
+export { Confetti };
+export default Confetti;
+//# sourceMappingURL=Confetti.d.ts.map

package/lib/typescript/commonjs/components/Confetti/index.d.ts

@@ -0,0 +1,3 @@
+export type { ConfettiHandle, ConfettiOrigin, ConfettiPhysics, ConfettiPreset, ConfettiProps, ConfettiShape, ConfettiSpeed } from './Confetti';
+export { Confetti } from './Confetti';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger';
+export type DatePickerMode = 'modal' | 'inline';
+export type WeekStart = 0 | 1 | 6;
+/**
+ * DatePicker operates in two modes:
+ *
+ * 1. **Controlled-modal mode** — pass `visible` (plus `onChange` / `onClose`)
+ *    and own the open state externally. The component renders only the modal.
+ * 2. **Trigger mode** — omit `visible`. The component renders a built-in
+ *    PickerTrigger field (label / value / placeholder / chevron / clear /
+ *    helper / error / size / variant) and manages its own open state. The
+ *    field opens the modal on press and closes it on confirm/cancel.
+ *
+ * `onChange` / `onClose` are typed optional to support trigger-only usage
+ * where the consumer may not need either callback. In controlled-modal mode
+ * they remain semantically required.
+ */
+export interface DatePickerProps {
+    visible?: boolean;
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    onClose?: () => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    mode?: DatePickerMode;
+    locale?: string;
+    weekStartsOn?: WeekStart;
+    title?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    /** Outer container style applied to the calendar card. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style override for the header label text wrapper (month/year). */
+    headerLabelStyle?: StyleProp<ViewStyle>;
+    /** Style override for the previous/next navigation buttons. */
+    navButtonStyle?: StyleProp<ViewStyle>;
+    /** Style override for the cancel/confirm footer buttons. */
+    footerButtonStyle?: StyleProp<ViewStyle>;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    testID?: string;
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: PickerTriggerSize;
+    variant?: PickerTriggerVariant;
+    clearable?: boolean;
+    onClear?: () => void;
+    formatValue?: (date: Date) => string;
+    triggerStyle?: StyleProp<ViewStyle>;
+}
+declare const DatePicker: React.FC<DatePickerProps>;
+export { DatePicker };
+export default DatePicker;
+//# sourceMappingURL=DatePicker.d.ts.map

package/lib/typescript/commonjs/components/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export type { DatePickerMode, DatePickerProps, WeekStart } from './DatePicker';
+export { DatePicker, default } from './DatePicker';
+//# sourceMappingURL=index.d.ts.map