@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/typescript/commonjs/components/Skeleton/SkeletonContent.d.ts

@@ -0,0 +1,102 @@
+/**
+ * SkeletonContent — show placeholder shapes while data is loading, then
+ * cross-fade to the real children once it arrives.
+ *
+ * Three usage patterns, listed in order of preference:
+ *
+ *   1. **Explicit placeholder** (recommended):
+ *
+ *        <SkeletonContent loading={isLoading} placeholder={<Card.Skeleton />}>
+ *          <Card>{realChildren}</Card>
+ *        </SkeletonContent>
+ *
+ *      Renders `placeholder` verbatim while loading and `children` once loaded.
+ *      Most precise and predictable — what you write is exactly what shimmers.
+ *      Prefer this for any non-trivial layout.
+ *
+ *   2. **Self-describing components inside an auto-walked tree**:
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <Stepper steps={steps} />
+ *          <Card>...</Card>
+ *        </SkeletonContent>
+ *
+ *      With no `placeholder` prop, the walker substitutes each element. For
+ *      library components, the walker checks for a `Component.Skeleton` static
+ *      and replaces the element wholesale with it (the component author knows
+ *      its shape best). For plain `<Text>`, `<Image>`, and sized `<View>`
+ *      leaves the walker substitutes shape-matched `<Skeleton>` blocks based
+ *      on the element's own style. Good for screen-level wrappers.
+ *
+ *   3. **Hand-authored primitive trees** (legacy / quick prototyping):
+ *
+ *        <SkeletonContent loading={isLoading}>
+ *          <View>
+ *            <Text style={{ fontSize: 20 }}>Title</Text>
+ *            <Text>Subtitle</Text>
+ *          </View>
+ *        </SkeletonContent>
+ *
+ *      Same walker as (2) — the Text/Image/View introspection handles
+ *      primitive trees that mirror the loaded layout.
+ *
+ * Cross-fade: when `loading` flips from true to false, real children fade in
+ * over `fadeDuration` ms. The first render is guarded — content that was
+ * never in a loading state does NOT fade on mount, only the actual
+ * loading→loaded transition does. Matches Chakra UI's `isLoaded` feel.
+ */
+import type { ComponentType, ReactNode } from 'react';
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+import type { SkeletonColors } from './SkeletonProvider';
+/**
+ * Components that ship their own placeholder shape declare this static. The
+ * walker looks for it before falling back to primitive introspection. The
+ * function receives the original component's props so consumer-customizable
+ * dimensions (size, count, etc.) carry through to the placeholder.
+ */
+export type SkeletonStaticOf<P> = ComponentType<P> & {
+    Skeleton?: ComponentType<P>;
+};
+export interface SkeletonContentProps {
+    /** When true, render the placeholder (or walker output) instead of `children`. */
+    loading: boolean;
+    children: ReactNode;
+    /**
+     * Explicit placeholder JSX. When provided, the walker is bypassed entirely
+     * and `placeholder` is rendered verbatim while `loading` is true. This is
+     * the recommended path for any non-trivial layout — most precise and most
+     * predictable. Combine with `count` to repeat the shape.
+     */
+    placeholder?: ReactNode;
+    /** Animation style forwarded to walker-produced `<Skeleton>` blocks. */
+    variant?: SkeletonVariant;
+    /** Animation speed forwarded to walker-produced `<Skeleton>` blocks. */
+    speed?: SkeletonSpeed;
+    /**
+     * Repeat `placeholder` (or `children`, when no placeholder is provided)
+     * this many times while loading. Useful for list layouts where the
+     * placeholder shape should appear N times (e.g. 3 site cards, 5 list rows).
+     * Ignored when `loading` is false. Default: `1`.
+     */
+    count?: number;
+    /**
+     * Colour override forwarded to every walker-produced `<Skeleton>`. Either
+     * or both keys can be set; missing keys fall back to provider defaults /
+     * theme. Has no effect when `placeholder` is provided — author colours
+     * directly on the placeholder JSX instead.
+     */
+    colors?: SkeletonColors;
+    /**
+     * Duration in ms for the load→content cross-fade. Default `300`. Set `0`
+     * to disable. Per-instance overrides the provider's `fadeDuration`.
+     */
+    fadeDuration?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const SkeletonContent: React.FC<SkeletonContentProps>;
+export { SkeletonContent };
+export default SkeletonContent;
+//# sourceMappingURL=SkeletonContent.d.ts.map

package/lib/typescript/commonjs/components/Skeleton/SkeletonList.d.ts

@@ -0,0 +1,30 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { FlatListProps, StyleProp, ViewStyle } from 'react-native';
+import type { SkeletonSpeed, SkeletonVariant } from './Skeleton';
+import type { SkeletonColors } from './SkeletonProvider';
+export interface SkeletonListProps<ItemT> extends Omit<FlatListProps<ItemT>, 'data' | 'renderItem'> {
+    /** Whether the list is in its initial loading state. */
+    loading: boolean;
+    /** The data to render once loading is complete. */
+    data: readonly ItemT[] | null | undefined;
+    /** Renders a single real item once data is available. */
+    renderItem: FlatListProps<ItemT>['renderItem'];
+    /**
+     * Renders one placeholder row. Index is provided so callers may vary
+     * placeholder shape per slot if desired. Defaults to `null`.
+     */
+    renderPlaceholder?: (index: number) => ReactNode;
+    /** How many placeholder rows to render while loading. Default: 3. */
+    placeholderCount?: number;
+    /** Animation style — same as Skeleton. */
+    variant?: SkeletonVariant;
+    /** Animation speed — same as Skeleton. */
+    speed?: SkeletonSpeed;
+    /** Colour override forwarded to the placeholder skeletons. */
+    colors?: SkeletonColors;
+    /** Style applied to the wrapper View around the placeholders. */
+    placeholderContainerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare const SkeletonList: <ItemT>(props: SkeletonListProps<ItemT>) => ReactElement;
+//# sourceMappingURL=SkeletonList.d.ts.map

package/lib/typescript/commonjs/components/Skeleton/SkeletonProvider.d.ts

@@ -0,0 +1,66 @@
+/**
+ * SkeletonProvider — app-level defaults for every <Skeleton> below it.
+ *
+ * Two responsibilities:
+ *   1. Broadcasts the default variant / speed / colors / radius /
+ *      placeholderCount so consumers don't repeat them per call site.
+ *   2. Mounts the shared `SkeletonClockProvider` (see SkeletonClock.tsx) so
+ *      every primitive shares a single Animated.Value — synchronized shimmer
+ *      across the whole subtree, one native-driver loop per provider.
+ *
+ * Also honors the OS "Reduce Motion" preference: when enabled, the clock is
+ * paused and skeletons render as static dim blocks. The detection is live —
+ * if the user toggles the setting while the app is open the skeletons stop
+ * shimmering immediately.
+ */
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { SkeletonRadius, SkeletonSpeed, SkeletonVariant } from './Skeleton';
+/**
+ * Per-instance color override for a skeleton. `background` is the resting
+ * tone of the placeholder; `highlight` is the moving shimmer band (or pulse
+ * fade). Either can be omitted — missing keys fall back to the active theme.
+ */
+export interface SkeletonColors {
+    background?: string;
+    highlight?: string;
+}
+export interface SkeletonProviderDefaults {
+    variant?: SkeletonVariant;
+    speed?: SkeletonSpeed;
+    /** Default `placeholderCount` for `<SkeletonList>` when not specified per-instance. */
+    placeholderCount?: number;
+    /** Default `radius` for `<Skeleton>` when not specified per-instance. */
+    radius?: SkeletonRadius;
+    /** App-wide colour overrides for the shimmer base + highlight. */
+    colors?: SkeletonColors;
+    /**
+     * Fade duration in ms for the `loading → loaded` cross-fade inside
+     * `SkeletonContent`. Default `300`. Set to `0` to disable.
+     */
+    fadeDuration?: number;
+    /**
+     * Hard override for animation. `'auto'` (default) follows the OS
+     * "Reduce Motion" preference: shimmer when off, static when on. `'always'`
+     * forces shimmer regardless. `'never'` forces static — useful for tests or
+     * battery-sensitive screens.
+     */
+    animation?: 'auto' | 'always' | 'never';
+}
+export interface SkeletonProviderProps extends SkeletonProviderDefaults {
+    children: ReactNode;
+}
+export declare const SkeletonProvider: React.FC<SkeletonProviderProps>;
+/**
+ * Read the current SkeletonProvider defaults. Returns an empty object when
+ * no provider is mounted, so the skeleton primitives still work outside of
+ * one — but without a shared clock or theme-coordinated colors.
+ */
+export declare const useSkeletonDefaults: () => SkeletonProviderDefaults;
+/**
+ * Subscribes to the OS "Reduce Motion" preference. Live — updates when the
+ * user toggles the setting while the app is open. Used internally by
+ * `SkeletonProvider`; exposed so consumer screens can branch on it too.
+ */
+export declare const useReduceMotion: () => boolean;
+//# sourceMappingURL=SkeletonProvider.d.ts.map

package/lib/typescript/commonjs/components/Skeleton/SkeletonSkip.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface SkeletonSkipProps {
+    children: ReactNode;
+}
+/**
+ * Pass-through marker that opts a subtree out of `SkeletonContent`'s auto walker.
+ *
+ * The walker recognizes this element type and returns its children unchanged
+ * even while `loading` is true. Use it to keep a specific Text/Image/View
+ * visible inside a skeleton block — e.g., a brand mark, a status icon, or a
+ * decorative element that should never shimmer.
+ *
+ * @example
+ *   <SkeletonContent loading>
+ *     <View style={styles.card}>
+ *       <SkeletonSkip>
+ *         <Image source={Logo} style={styles.brandMark} />
+ *       </SkeletonSkip>
+ *       <Text>Loading…</Text>
+ *     </View>
+ *   </SkeletonContent>
+ */
+export declare const SkeletonSkip: React.FC<SkeletonSkipProps>;
+//# sourceMappingURL=SkeletonSkip.d.ts.map

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

@@ -0,0 +1,13 @@
+export type { SkeletonCircleProps, SkeletonProps, SkeletonRadius, SkeletonShape, SkeletonSpeed, SkeletonTextProps, SkeletonVariant, SkeletonWidth } from './Skeleton';
+export { default, Skeleton, SkeletonCircle, SkeletonText } from './Skeleton';
+export type { SkeletonClockProviderProps, SkeletonClockValue } from './SkeletonClock';
+export { SkeletonClockProvider, useSkeletonClock } from './SkeletonClock';
+export type { SkeletonContentProps, SkeletonStaticOf } from './SkeletonContent';
+export { SkeletonContent } from './SkeletonContent';
+export type { SkeletonListProps } from './SkeletonList';
+export { SkeletonList } from './SkeletonList';
+export type { SkeletonColors, SkeletonProviderDefaults, SkeletonProviderProps } from './SkeletonProvider';
+export { SkeletonProvider, useReduceMotion, useSkeletonDefaults } from './SkeletonProvider';
+export type { SkeletonSkipProps } from './SkeletonSkip';
+export { SkeletonSkip } from './SkeletonSkip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export type SlideToConfirmTone = 'primary' | 'success' | 'warning' | 'error';
+export type SlideToConfirmSize = 'sm' | 'md' | 'lg';
+export interface SlideToConfirmProps {
+    /** Fired once the handle is dragged past the threshold. */
+    onConfirm: () => void;
+    /** Resting label (centred). Default "Slide to confirm". */
+    label?: string;
+    /** Label shown after confirming. Default "Confirmed". */
+    confirmedLabel?: string;
+    tone?: SlideToConfirmTone;
+    size?: SlideToConfirmSize;
+    disabled?: boolean;
+    /** Fraction of the track (0–1) the handle must cross to confirm. Default 0.9. */
+    threshold?: number;
+    /** Auto-reset this many ms after confirm, or `false` to stay confirmed. Default `false`. */
+    resetAfter?: number | false;
+    /** Haptic on confirm. Pass `false` to disable or a `HapticType` to override. Default `'notificationSuccess'`. */
+    haptic?: HapticType | false;
+    /** Handle glyph. Defaults to a right-chevron. */
+    icon?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    trackStyle?: StyleProp<ViewStyle>;
+    handleStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const SlideToConfirm: React.ForwardRefExoticComponent<SlideToConfirmProps & React.RefAttributes<RNView>>;
+export { SlideToConfirm };
+export default SlideToConfirm;
+//# sourceMappingURL=SlideToConfirm.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SlideToConfirmProps, SlideToConfirmSize, SlideToConfirmTone } from './SlideToConfirm';
+export { SlideToConfirm } from './SlideToConfirm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,89 @@
+import type React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export type SliderTone = 'primary' | 'success' | 'warning' | 'error';
+export type SliderSize = 'sm' | 'md' | 'lg';
+/**
+ * Visual style of the slider.
+ *
+ * - `default`: a thin track under a white thumb ringed in the tone colour.
+ * - `inset`: a thick track; the thumb is a small white ring with a tone-coloured
+ *   centre that rides INSIDE the fill, so the fill always extends past it.
+ * - `minimal`: a hairline track and a small solid thumb in the tone colour.
+ * - `bar`: a thick bar with no visible thumb (like a volume or brightness
+ *   control); drag anywhere on the fill's end, or tap the bar to jump.
+ */
+export type SliderVariant = 'default' | 'inset' | 'minimal' | 'bar';
+interface SliderCommonProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    tone?: SliderTone;
+    size?: SliderSize;
+    /**
+     * Visual style. Default `'default'`. The theme's per-size `trackHeight` /
+     * `thumbDiameter` tokens resize the `default` variant only: the other
+     * variants carry their own proportions, which a single pair of numbers
+     * would break.
+     */
+    variant?: SliderVariant;
+    /**
+     * A value bubble above the thumb. `true` shows it while the thumb is being
+     * dragged; `'always'` keeps it up. Default `false`.
+     */
+    showLabel?: boolean | 'always';
+    /**
+     * Keep the thumb on the step positions while it is dragged. Default
+     * `false`: the thumb follows the finger and settles on the nearest step
+     * when it is let go, while `value` snaps to the step the whole time. A
+     * thumb pinned to the steps stands still for a few frames and then hops a
+     * step, which reads as a stutter on a fine step and a jerk on a coarse one.
+     */
+    snapThumb?: boolean;
+    formatLabel?: (value: number) => string;
+    /**
+     * Draws the bubble's content in place of `formatLabel`'s text, for a
+     * counting number or any richer node. Its container is the bubble itself.
+     */
+    renderLabel?: (value: number) => React.ReactNode;
+    accessibilityLabel?: string;
+    /**
+     * Haptic feedback: once when a drag starts and once when it arrives at
+     * `min` or `max`, plus every accessibility step and track tap. Never on
+     * each step of a drag: on Android that is a motor pulse per step, and a
+     * hundred late, bunched pulses under the finger feel like the thumb
+     * catching. Pass false to disable; pass a HapticType to override.
+     */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    trackStyle?: StyleProp<ViewStyle>;
+    fillStyle?: StyleProp<ViewStyle>;
+    thumbStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    /** Override the thumb press-scale target (default 1.1). */
+    thumbPressScale?: number;
+    /** Override the label fade duration (default theme.motion.duration.fast). */
+    labelShowDuration?: number;
+    /** Override the label final opacity when visible (default 1). */
+    labelOpacity?: number;
+    testID?: string;
+}
+interface SliderSingleProps extends SliderCommonProps {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+}
+interface SliderRangeProps extends SliderCommonProps {
+    range: true;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+}
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<RNView>>;
+export { Slider };
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SliderProps, SliderSize, SliderTone, SliderVariant } from './Slider';
+export { default, Slider } from './Slider';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Slider/valueText.d.ts

@@ -0,0 +1,84 @@
+import type { StyleProp, TextStyle } from 'react-native';
+/**
+ * Shared between AmountSlider and SliderField: the number that counts to its
+ * new value, and the edit-in-a-box logic that keeps a half-typed entry from
+ * being snapped or overwritten.
+ */
+export declare const clampValue: (value: number, min: number, max: number) => number;
+export declare const snapValue: (value: number, min: number, max: number, step: number) => number;
+/** Digits, one decimal point and a leading minus out of whatever was typed. */
+export declare const parseTyped: (text: string) => number | null;
+export interface CountingTextProps {
+    value: number;
+    /** Turns the (rounded) shown value into text. */
+    format: (value: number) => string;
+    /** Decimals the shown value is rounded to before formatting, so a step of 1 never shows `70.5` mid-count. */
+    decimals?: number;
+    /** Length of the count in ms. `0` jumps. */
+    duration: number;
+    /**
+     * When this changes the number jumps instead of counting: a unit change
+     * (Lakh to Crore) would otherwise read `99.5` sliding to `1.0`.
+     */
+    jumpKey?: string;
+    style?: StyleProp<TextStyle>;
+    testID?: string;
+}
+/**
+ * A number that counts from its last shown value to the new one. It lives in
+ * its own component so each frame re-renders one Text, not its parent.
+ */
+export declare const CountingText: import("react").NamedExoticComponent<CountingTextProps>;
+export interface UseValueDraftOptions {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    /** Text of the box when it is not being edited. */
+    format: (value: number) => string;
+    /** Turns the box text into a number; `null` for nothing typed yet. */
+    parse?: (text: string) => number | null;
+    /** Receives the clamped value on every keystroke that parses, and the snapped one on blur. */
+    onChange: (value: number) => void;
+}
+export interface ValueDraft {
+    /** What the box shows now: the draft while editing, the formatted value otherwise. */
+    text: string;
+    editing: boolean;
+    onFocus: () => void;
+    onChangeText: (text: string) => void;
+    onBlur: () => void;
+}
+/**
+ * Edit-in-a-box for a slider value. While the box has focus it shows what was
+ * typed, so a drag does not overwrite a half-typed entry. Each keystroke moves
+ * the value live, clamped only: snapping every keystroke would turn a
+ * half-typed 5,25,000 into 5,50,000 before the user finished. Blur snaps to
+ * the step, and an emptied box resolves to `min`.
+ */
+export declare const useValueDraft: ({ value, min, max, step, format, parse, onChange }: UseValueDraftOptions) => ValueDraft;
+export type RollDirection = 'up' | 'down';
+export interface RollingTextProps {
+    text: string;
+    /**
+     * `up` for a value that grew: the old character leaves upward and the new
+     * one rises in from below, like an odometer. `down` reverses it.
+     */
+    direction?: RollDirection;
+    /** Length of one roll in ms. `0` swaps in place. */
+    duration: number;
+    /**
+     * `true` rolls each character on its own (digits). `false` treats the
+     * whole text as one piece that crossfades (a unit word).
+     */
+    perCharacter?: boolean;
+    style?: StyleProp<TextStyle>;
+    testID?: string;
+}
+/**
+ * Text whose characters roll vertically to their new values, the way a
+ * counter's digits do. The slot count is the longer of the current and the
+ * previous text, so a digit that disappears rolls out instead of vanishing.
+ */
+export declare const RollingText: import("react").NamedExoticComponent<RollingTextProps>;
+//# sourceMappingURL=valueText.d.ts.map

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

@@ -0,0 +1,82 @@
+import type React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+import type { SlotIcon } from '../AppIcon';
+import type { SliderSize, SliderTone, SliderVariant } from '../Slider';
+interface SliderFieldCommonProps {
+    /** Field label above the slider. */
+    label?: string;
+    /** Muted text after the label, such as `(%)`. */
+    unit?: string;
+    /** Opens in a tooltip from an info icon after the label. */
+    info?: string;
+    /** Appends the required marker to the label. */
+    required?: boolean;
+    helperText?: string;
+    /** Shown in place of `helperText`, in the error colour; the value box turns red with an icon. */
+    error?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    tone?: SliderTone;
+    size?: SliderSize;
+    /** The Slider's look. Default `'default'`. */
+    variant?: SliderVariant;
+    haptic?: HapticType | false;
+    /** A value bubble that stays up above each thumb and counts to the new value. Default `true`. */
+    showBubble?: boolean;
+    /** The `min` and `max` values at the ends of the track. Default `true`. */
+    showBounds?: boolean;
+    /**
+     * An editable value box: to the right of the track, or one at each end in
+     * `range` mode (where they replace the bounds). Default `false`.
+     */
+    showInput?: boolean;
+    /** Minus and plus buttons at the ends of the track, stepping by `step`. Single mode only. Default `false`. */
+    showStepper?: boolean;
+    /** Icon at the start of the row, outside the bounds. */
+    startIcon?: SlotIcon;
+    /** Icon at the end of the row, outside the bounds. */
+    endIcon?: SlotIcon;
+    /** Replaces the formatted `min` at the start of the track. */
+    startLabel?: string;
+    /** Replaces the formatted `max` at the end of the track. */
+    endLabel?: string;
+    /** One formatter for the bubble, the bounds and the box: `70%`, `$2,500`, `Very Bright`. */
+    formatValue?: (value: number) => string;
+    /** Turns the box text back into a number; `null` for nothing typed yet. Default: digits and one point. */
+    parseInput?: (text: string) => number | null;
+    /**
+     * Length in ms of the bubble's count. Default `theme.motion.duration.fast`,
+     * which the ThemeProvider collapses to 0 under reduced motion.
+     */
+    animationDuration?: number;
+    /** Width of each value box. Default 72. */
+    inputWidth?: number;
+    /** Read out for the slider. Defaults to `label`. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    boundStyle?: StyleProp<TextStyle>;
+    sliderStyle?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+interface SliderFieldSingleProps extends SliderFieldCommonProps {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+}
+interface SliderFieldRangeProps extends SliderFieldCommonProps {
+    range: true;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+}
+export type SliderFieldProps = SliderFieldSingleProps | SliderFieldRangeProps;
+declare const SliderField: React.ForwardRefExoticComponent<SliderFieldProps & React.RefAttributes<RNView>>;
+export { SliderField };
+export default SliderField;
+//# sourceMappingURL=SliderField.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerVariant = 'circular' | 'dots';
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: string;
+    message?: string;
+    overlay?: boolean;
+    backdropColor?: string;
+    variant?: SpinnerVariant;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<RNView>>;
+export { Spinner };
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SpinnerProps, SpinnerSize, SpinnerVariant } from './Spinner';
+export { default, Spinner } from './Spinner';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,69 @@
+/**
+ * SquircleFill: the Android half of smooth corners.
+ *
+ * iOS rounds a view with Apple's continuous curve through
+ * `borderCurve: 'continuous'` (`utils/corners`). Android has no such style,
+ * so a host that wants the same look on Android draws its fill and border
+ * as an SVG path laid over its own bounds, and paints itself transparent
+ * behind it. Internal: `FieldBase`, `Button` and `Card` use it; apps get the
+ * corners through those. No barrel on purpose: a directory without an
+ * index.ts is an internal primitive, not a component of the public table.
+ *
+ * The overlay is absolutely positioned and inert to touches. It needs the
+ * host's measured size, which `useSquircle` collects from the host's
+ * `onLayout`; until the first layout the host keeps its native corner, so
+ * the first frame shows a circular corner rather than no fill at all.
+ *
+ * Not a general clipping tool: children of the host are not clipped to the
+ * shape, which is why hosts that must clip (a card with an image header, a
+ * gradient button) keep their native corner.
+ */
+import type { LayoutChangeEvent } from 'react-native';
+import { Animated } from 'react-native';
+export type SquircleColor = string | Animated.AnimatedInterpolation<string | number>;
+export interface SquircleFillProps {
+    /** The host's measured border-box size. */
+    width: number;
+    height: number;
+    /** Radius of the outer edge, the same number the host gives `borderRadius`. */
+    radius: number;
+    /** Fill colour; an Animated interpolation follows the host's state animation. */
+    fill: SquircleColor;
+    /** Border colour; omitted or transparent draws no border. */
+    stroke?: SquircleColor;
+    /** Border width; the path is inset by half of it so the outer edge meets the host's bounds. */
+    strokeWidth?: number;
+    /**
+     * The host's native border width. Absolute children sit inside a native
+     * border, so the overlay is pulled outward by this much to cover the
+     * whole border box. Hosts keep their native width (painted transparent)
+     * so their layout does not move by a pixel when the overlay takes over.
+     */
+    outset?: number;
+    testID?: string;
+}
+export declare function SquircleFill({ width, height, radius, fill, stroke, strokeWidth, outset, testID }: SquircleFillProps): import("react").JSX.Element;
+export declare namespace SquircleFill {
+    var displayName: string;
+}
+export interface SquircleLayout {
+    /** Attach to the host; forwards to `onLayoutProp` after recording the size. */
+    onLayout: (event: LayoutChangeEvent) => void;
+    /** The host's last measured size, or null before the first layout. */
+    size: {
+        width: number;
+        height: number;
+    } | null;
+    /**
+     * True when the host should paint itself transparent and render a
+     * `SquircleFill`: Android, `enabled`, measured, and a radius the shape
+     * can improve on (`squircleApplies`).
+     */
+    active: boolean;
+}
+/**
+ * Tracks a host's size for `SquircleFill`. On iOS (and when `enabled` is
+ * false) it only forwards the layout event and never re-renders the host.
+ */
+export declare function useSquircle(enabled: boolean, radius: number, onLayoutProp?: (event: LayoutChangeEvent) => void): SquircleLayout;
+//# sourceMappingURL=SquircleFill.d.ts.map