@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,3 @@
+export type { BannerAction, BannerProps, BannerVariant } from './Banner';
+export { Banner, default } from './Banner';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export type BottomNavigationVariant = 'pill' | 'underline';
+export type BottomNavigationIndicatorPosition = 'top' | 'bottom';
+export type TabBadge = number | string | boolean | null;
+export interface TabIconProps {
+    color: string;
+    size: number;
+    focused: boolean;
+}
+export interface TabConfig {
+    key: string;
+    label: string;
+    icon: (props: TabIconProps) => React.ReactNode;
+    activeIcon?: (props: TabIconProps) => React.ReactNode;
+    badge?: TabBadge;
+}
+export interface BottomNavigationProps {
+    tabs: TabConfig[];
+    activeTab: string;
+    onChange: (tabKey: string) => void;
+    haptic?: HapticType | false;
+    showLabels?: boolean;
+    variant?: BottomNavigationVariant;
+    /**
+     * Where the active-tab line sits, for variants that draw a line
+     * (currently `underline`). Default `'bottom'` preserves the legacy look;
+     * `'top'` flips the line to sit just above the tab row.
+     */
+    indicatorPosition?: BottomNavigationIndicatorPosition;
+    style?: StyleProp<ViewStyle>;
+    indicatorStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const BottomNavigation: React.ForwardRefExoticComponent<BottomNavigationProps & React.RefAttributes<RNView>>;
+export { BottomNavigation };
+export default BottomNavigation;
+//# sourceMappingURL=BottomNavigation.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { BottomNavigationProps, BottomNavigationVariant, TabBadge, TabConfig, TabIconProps } from './BottomNavigation';
+export { BottomNavigation, default } from './BottomNavigation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,113 @@
+/**
+ * BottomSheet — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * A polished, theme-aware bottom sheet with multi-snap-point support,
+ * UI-thread driven pan gestures, and native-driver spring animations.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<BottomSheetRef>(null);
+ * <BottomSheet ref={ref} snapPoints={[200, '50%', '90%']}>
+ *   <YourContent />
+ * </BottomSheet>
+ *
+ * ref.current?.expand();   // open at first snap point (or `index` prop)
+ * ref.current?.expand(2);  // open at specific index
+ * ref.current?.collapse(); // animate to smallest snap point
+ * ref.current?.close();    // dismiss
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type SnapPoint = number | `${number}%`;
+export type KeyboardBehavior = 'none' | 'shift';
+export type BottomSheetMode = 'modal' | 'inline';
+export interface BottomSheetProps {
+    snapPoints: SnapPoint[];
+    index?: number;
+    onChange?: (index: number) => void;
+    onAnimate?: (from: number, to: number) => void;
+    enablePanDownToClose?: boolean;
+    enableBackdropPress?: boolean;
+    /**
+     * @deprecated Backdrop opacity is now controlled by the theme token
+     * `colors.background.overlay` (alpha baked into the rgba value). Animated
+     * opacity on the backdrop was unreliable under Fabric view-flattening, so
+     * the scrim is now a static plain View. To tune dim level, override
+     * `theme.colors.background.overlay` in your theme bridge.
+     */
+    backdropOpacity?: number;
+    /**
+     * How the sheet reacts to the soft keyboard.
+     * - `'none'` (default): the sheet stays put; keyboard may overlap content.
+     * - `'shift'`: animate the sheet upward by the keyboard height while it's
+     *   visible (clamped so the sheet never extends past the top of the screen)
+     *   and animate back when dismissed. Best for forms that live inside the
+     *   sheet itself.
+     */
+    keyboardBehavior?: KeyboardBehavior;
+    /**
+     * How the sheet is mounted in the view tree.
+     * - `'modal'` (default): rendered inside a native `<Modal>` so the backdrop
+     *   covers the entire screen (status bar, headers, tab bars) — the standard
+     *   bottom-sheet UX.
+     * - `'inline'`: rendered as an `absoluteFill` overlay inside the parent
+     *   component. Useful when embedding a sheet within a bounded area.
+     */
+    mode?: BottomSheetMode;
+    handleIndicatorStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Sticky region rendered between the drag handle and the scrollable content.
+     * Does not scroll with `children`. Can call `useBottomSheet()` to read sheet
+     * state.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sticky region pinned to the bottom of the sheet, above the safe-area
+     * inset. Does not scroll with `children`, and rides up with the keyboard
+     * when `keyboardBehavior='shift'` (no extra wiring needed — the whole sheet
+     * shifts). Typical use: action button rows.
+     */
+    footer?: React.ReactNode;
+    /** Style applied to the header region wrapper. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the footer region wrapper. */
+    footerStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    accessibilityLabel?: string;
+    accessibilityViewIsModal?: boolean;
+    testID?: string;
+}
+export interface BottomSheetRef {
+    expand: (index?: number) => void;
+    collapse: () => void;
+    close: () => void;
+}
+/**
+ * State + actions exposed to anything rendered inside a `<BottomSheet>` —
+ * including the `header` and `footer` slots. Read via `useBottomSheet()`.
+ *
+ * `snapIndex` is the JS-thread mirror of the current snap point. -1 means the
+ * sheet is closed (mid-close-animation included). Use it to drive footer
+ * button enable state, conditional headers, etc. If you need per-frame
+ * progress (e.g. fade a header in as the sheet expands), reach for the
+ * animated value via a future enhancement — not exposed today to keep the
+ * surface minimal.
+ */
+export interface BottomSheetContextValue {
+    snapIndex: number;
+    snapPoints: number[];
+    expand: (index?: number) => void;
+    collapse: () => void;
+    close: () => void;
+}
+/**
+ * Access the enclosing `<BottomSheet>`'s state and imperative actions.
+ * Must be called from a component rendered inside a `<BottomSheet>` (as
+ * `children`, `header`, or `footer`).
+ */
+export declare const useBottomSheet: () => BottomSheetContextValue;
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
+export { BottomSheet };
+export default BottomSheet;
+//# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
+export { BottomSheet, default, useBottomSheet } from './BottomSheet';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import type { View as RNView, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { ColorPalette, RadiusScale, SpacingScale, Theme } from '../../theme/types';
+export type SpacingToken = keyof SpacingScale;
+export type RadiusToken = keyof RadiusScale;
+export type BackgroundToken = keyof ColorPalette['background'];
+export interface BoxProps extends ViewProps {
+    /** padding (all sides) */
+    p?: SpacingToken;
+    /** paddingHorizontal */
+    px?: SpacingToken;
+    /** paddingVertical */
+    py?: SpacingToken;
+    pt?: SpacingToken;
+    pr?: SpacingToken;
+    pb?: SpacingToken;
+    pl?: SpacingToken;
+    /** margin (all sides) */
+    m?: SpacingToken;
+    mx?: SpacingToken;
+    my?: SpacingToken;
+    mt?: SpacingToken;
+    mr?: SpacingToken;
+    mb?: SpacingToken;
+    ml?: SpacingToken;
+    /** Flexbox gap between children (spacing token). */
+    gap?: SpacingToken;
+    /** Background — a `colors.background.*` token or a raw colour string. */
+    bg?: BackgroundToken | (string & {});
+    radius?: RadiusToken;
+    /** Draw a hairline border in `colors.border.primary`. */
+    border?: boolean;
+    flex?: number;
+    align?: ViewStyle['alignItems'];
+    justify?: ViewStyle['justifyContent'];
+    direction?: ViewStyle['flexDirection'];
+    wrap?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+type LayoutProps = Omit<BoxProps, 'style' | 'children'>;
+export declare const resolveBoxStyle: (theme: Theme, p: LayoutProps) => ViewStyle;
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<RNView>>;
+export type StackProps = Omit<BoxProps, 'direction'>;
+/** Vertical flex container with token spacing between children (default gap `md`). */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<RNView>>;
+export type RowProps = Omit<BoxProps, 'direction'>;
+/** Horizontal flex container (default `align="center"`, gap `sm`). */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<RNView>>;
+export interface SpacerProps {
+    /** Fixed spacer of this spacing token. Omit for a flexible spacer (`flex: 1`). */
+    size?: SpacingToken;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/** Fixed gap (`size`) or a flexible push (`flex: 1`) between siblings. */
+declare const Spacer: React.FC<SpacerProps>;
+export { Box, Row, Spacer, Stack };
+export default Box;
+//# sourceMappingURL=Box.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { BoxProps, RowProps, SpacerProps, StackProps } from './Box';
+export { Box, Row, resolveBoxStyle, Spacer, Stack } from './Box';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { GradientDefinition } from '../../theme/types';
+import type { HapticType } from '../../utils/hapticUtils';
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+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;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    haptic?: HapticType | false;
+    rounded?: boolean;
+    /**
+     * Optional gradient background. Pass either a key from `theme.gradients`
+     * (e.g. `"primary"`) or a `GradientDefinition` literal. Requires
+     * `react-native-linear-gradient` to be installed; without it the button
+     * falls back to flat colour with a dev warning.
+     */
+    gradient?: string | GradientDefinition;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    pressAnimation?: boolean;
+    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,57 @@
+import React from 'react';
+import type { GestureResponderEvent, ImageSourcePropType, PressableProps, View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { 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 interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
+    children?: React.ReactNode;
+    variant?: CardVariant;
+    elevation?: CardElevation;
+    radius?: CardRadius;
+    padding?: CardPadding;
+    interactive?: boolean;
+    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. Requires
+     * `react-native-linear-gradient` to be installed.
+     */
+    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,41 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+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;
+    leftIcon?: React.ReactNode;
+    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,100 @@
+/**
+ * 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:
+ *
+ *   - Default template: a bordered card — label (+ optional icon /
+ *     description) with a trailing RadioDot, tinted with the option's colour
+ *     when selected. The "Hot / Warm / Cold" status-picker pattern works
+ *     zero-config.
+ *   - `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 { RadioValue } from '../Radio/Radio';
+export type ChoiceGroupSize = 'sm' | 'md' | 'lg';
+export type ChoiceGroupDirection = 'row' | 'column';
+export interface ChoiceOption {
+    label: string;
+    value: RadioValue;
+    /** Tints the default card (label, border, dot, selected fill). Default: `colors.primary`. */
+    color?: string;
+    description?: string;
+    icon?: React.ReactNode;
+    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) => React.ReactNode;
+    /** 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;
+    /** 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
+     * unwrapped rows (the status-picker look), `false` otherwise.
+     */
+    fullWidth?: boolean;
+    /** Disables the whole group. Per-option `disabled` still applies on top. */
+    disabled?: boolean;
+    /** Density of the DEFAULT template (padding / fontSize / 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, ChoiceGroupProps, ChoiceGroupSize, 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,41 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type ConfettiMode = 'rain' | 'cannon';
+export interface ConfettiOrigin {
+    x: number;
+    y: 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[];
+    /** `'rain'` falls from the top edge; `'cannon'` bursts up/out from `origin`. Default `'rain'`. */
+    mode?: ConfettiMode;
+    /** Burst origin for `'cannon'` (defaults to the bottom-centre of the container). */
+    origin?: ConfettiOrigin;
+    /** Full animation duration in ms. 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;
+}
+declare const Confetti: React.ForwardRefExoticComponent<ConfettiProps & React.RefAttributes<ConfettiHandle>>;
+export { Confetti };
+export default Confetti;
+//# sourceMappingURL=Confetti.d.ts.map