@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/typescript/module/components/Select/Select.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Select — single + multi select with bottom-sheet picker.
+ *
+ * The trigger is a FieldBase row; the picker itself is the shared OptionSheet
+ * primitive (also behind InlineSelect), so the sheet look + behaviour never
+ * drift between the two. Supports optional client-side search, theme-aware
+ * styling, full a11y, and dark-mode auto.
+ */
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+import type { SlotIcon } from '../AppIcon/slotIcon.js';
+import type { SelectOption, SelectValue } from '../OptionSheet/OptionSheet.js';
+export type SelectSize = 'sm' | 'md' | 'lg';
+export type SelectVariant = 'outlined' | 'filled' | 'underline';
+export type { SelectOption, SelectValue };
+interface BaseSelectProps<T = SelectOption> {
+    /**
+     * Options to render. Default shape is `SelectOption` (`{ label, value, ... }`)
+     * — for that shape no accessors are needed. To use a different option shape
+     * (e.g. `{ id, name }` from a domain model), pass `getOptionLabel` /
+     * `getOptionValue` (and optionally `getOptionDisabled`/`getOptionDescription`/
+     * `getOptionIcon`) so Select can read it without per-call-site mapping.
+     */
+    options: ReadonlyArray<T>;
+    /** Defaults to `(o) => (o as SelectOption).label`. */
+    getOptionLabel?: (option: T) => string;
+    /** Defaults to `(o) => (o as SelectOption).value`. */
+    getOptionValue?: (option: T) => SelectValue;
+    /** Defaults to `(o) => (o as SelectOption).disabled === true`. */
+    getOptionDisabled?: (option: T) => boolean;
+    /** Defaults to `(o) => (o as SelectOption).description`. */
+    getOptionDescription?: (option: T) => string | undefined;
+    /** Defaults to `(o) => (o as SelectOption).icon`. */
+    getOptionIcon?: (option: T) => React.ReactNode;
+    placeholder?: string;
+    searchable?: boolean;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
+    label?: string;
+    /**
+     * Heading shown at the top of the options bottom-sheet. Independent of
+     * `label` (the field label above the trigger) — omit it for a sheet with no
+     * heading. Falls back to `label`/`placeholder` only for the sheet's a11y name.
+     */
+    title?: string;
+    /**
+     * Appends the required marker to the label. Marker text + colour come from
+     * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default
+     * `'*'` in `colors.error`).
+     */
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+    size?: SelectSize;
+    /**
+     * Controls the trigger field's fill + border treatment. Resolution chain:
+     * caller prop → `components.select.defaultVariant` → `components.field.defaultVariant`
+     * → 'outlined'.
+     */
+    variant?: SelectVariant;
+    /**
+     * Slot rendered to the left of the trigger text. Mirrors Input's `leftIcon`:
+     * an icon name (`leftIcon="user"`) is drawn in the field palette's icon
+     * colour and size for the current state; `{ name, variant }`, a render
+     * function or any node also work.
+     */
+    leftIcon?: SlotIcon;
+    /**
+     * Replaces the built-in arrow on the right of the trigger. Rendered static —
+     * the default chevron's rotate-on-open is dropped, so pass an already-animated
+     * node if you want motion. Mirrors Input's `rightIcon`, same contract as `leftIcon`.
+     */
+    rightIcon?: SlotIcon;
+    /** Colour of the built-in chevron. Ignored when `rightIcon` is set. Default: `colors.text.tertiary` (`text.disabled` when disabled). */
+    chevronColor?: string;
+    /** Size of the built-in chevron in pixels. Ignored when `rightIcon` is set. Default: the field size's `iconSize`. */
+    chevronSize?: number;
+    /** Per-instance override for the trigger's corner radius. Wins over `components.select.borderRadius` and size defaults. */
+    borderRadius?: number;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    triggerStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    /** Style for every option row in the sheet (padding, background, …). */
+    optionStyle?: StyleProp<ViewStyle>;
+    /** Extra style for the selected option row — wins over `optionStyle` and the default selected fill. */
+    selectedOptionStyle?: StyleProp<ViewStyle>;
+    /** Style for every option's label text in the sheet. */
+    optionTextStyle?: StyleProp<TextStyle>;
+    /** Extra style for the selected option's label text — wins over `optionTextStyle` and the default selected colour. */
+    selectedOptionTextStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+interface SingleSelectProps<T = SelectOption> extends BaseSelectProps<T> {
+    multi?: false;
+    value?: SelectValue;
+    onChange: (value: SelectValue) => void;
+}
+interface MultiSelectProps<T = SelectOption> extends BaseSelectProps<T> {
+    multi: true;
+    value?: SelectValue[];
+    onChange: (value: SelectValue[]) => void;
+}
+export type SelectProps<T = SelectOption> = SingleSelectProps<T> | MultiSelectProps<T>;
+declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<RNView>>;
+export { Select };
+export default Select;
+//# sourceMappingURL=Select.d.ts.map

package/lib/typescript/module/components/Select/index.d.ts

@@ -0,0 +1,3 @@
+export type { SelectOption, SelectProps, SelectSize, SelectValue } from './Select.js';
+export { default, Select } from './Select.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Skeleton — the leaf placeholder primitive.
+ *
+ * Every Skeleton on screen reads the shared shimmer/pulse clock from
+ * `SkeletonProvider` (see SkeletonClock.tsx). One native-driver loop per
+ * provider drives every instance, so 50 placeholders on a list don't spawn
+ * 50 timers and the shimmer bands never drift out of phase.
+ *
+ * Visual:
+ *   - A View with the base color and `overflow: hidden` + radius gives the
+ *     placeholder its shape.
+ *   - For `animation: 'shimmer'`, an Animated.View carrying a 3-stop
+ *     linear gradient (transparent → highlight → transparent) translates
+ *     across the box. The radius clips it to the right outline automatically.
+ *   - For `animation: 'pulse'`, a full-fill Animated.View fades its opacity
+ *     between 0 and 0.6. Cheap and useful for tiny shapes where a sweep
+ *     would barely be visible.
+ *   - For `animation: 'none'` (or when the OS Reduce Motion preference is
+ *     on), just the base color renders.
+ *
+ * `variant` describes the SHAPE: rect (default), rounded (theme.radius.md),
+ * circle (50%), or text (small radius, slightly inset height). Set width /
+ * height directly for full control.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { RadiusScale } from '../../theme/types.js';
+import type { SkeletonColors } from './SkeletonProvider.js';
+/** Animation pattern. */
+export type SkeletonVariant = 'shimmer' | 'pulse' | 'none';
+/** Sweep speed for the shimmer band. Ignored for pulse / none. */
+export type SkeletonSpeed = 'slow' | 'normal' | 'fast';
+/** Pre-defined shape archetype. Plays nicely with `width`/`height` overrides. */
+export type SkeletonShape = 'rect' | 'rounded' | 'circle' | 'text';
+/** `theme.radius` token name or a literal pixel value. */
+export type SkeletonRadius = keyof Pick<RadiusScale, 'sm' | 'md' | 'lg' | 'xl' | 'full'> | number;
+export type SkeletonWidth = number | 'auto' | '100%' | `${number}%`;
+export interface SkeletonProps {
+    /**
+     * Pre-defined shape archetype. Sets sensible defaults for the missing
+     * dimensions/radius. Override individual values via `width`, `height`,
+     * `radius` as needed.
+     * - `'rect'`: default, sharp corners.
+     * - `'rounded'`: `theme.radius.md` corners — for cards / buttons.
+     * - `'circle'`: 50% radius — for avatars / icons (provide `width` = `height`).
+     * - `'text'`: small radius + roughly text-line height. `height` becomes
+     *   `1.15× fontSize` if a `fontSize` would have been passed.
+     */
+    shape?: SkeletonShape;
+    width?: SkeletonWidth;
+    height?: number;
+    radius?: SkeletonRadius;
+    /** Animation pattern. */
+    variant?: SkeletonVariant;
+    /** Sweep speed for shimmer. */
+    speed?: SkeletonSpeed;
+    /**
+     * Per-instance color override. Falls back to provider defaults, then theme.
+     * Use for one-off contrast adjustments (dark shimmer on a light banner);
+     * prefer `<SkeletonProvider colors={...}>` for app-wide overrides.
+     */
+    colors?: SkeletonColors;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export interface SkeletonCircleProps extends Omit<SkeletonProps, 'width' | 'height' | 'shape'> {
+    size: number;
+}
+export interface SkeletonTextProps extends Omit<SkeletonProps, 'height' | 'shape'> {
+    lines?: number;
+    lastLineWidth?: SkeletonWidth;
+    spacing?: number;
+    fontSize?: number;
+}
+declare const Skeleton: React.FC<SkeletonProps>;
+declare const SkeletonCircle: React.FC<SkeletonCircleProps>;
+declare const SkeletonText: React.FC<SkeletonTextProps>;
+export { Skeleton, SkeletonCircle, SkeletonText };
+export default Skeleton;
+//# sourceMappingURL=Skeleton.d.ts.map

package/lib/typescript/module/components/Skeleton/SkeletonClock.d.ts

@@ -0,0 +1,60 @@
+/**
+ * SkeletonClock — single shared animation tick for every <Skeleton> on screen.
+ *
+ * Why this exists: previously every Skeleton primitive ran its own
+ * `Animated.loop` on its own `Animated.Value`. A list of 20 placeholders =
+ * 20 independent native-driver timers, each starting at a slightly different
+ * mount frame, so their shimmer bands drift out of phase within ~1s and the
+ * surface feels noisy. CSS-driven web skeleton libs (react-loading-skeleton,
+ * MUI) avoid this because the browser owns a single timeline. We emulate
+ * that on RN by hoisting the loop into context.
+ *
+ * The clock produces a value in `[0, 1)` that wraps every `duration` ms. Each
+ * Skeleton interpolates that value into its own translateX / opacity output.
+ * One native-driver loop, no drift, ~zero JS cost.
+ */
+import type { ReactNode } from 'react';
+import React from 'react';
+import { Animated } from 'react-native';
+import type { SkeletonSpeed, SkeletonVariant } from './Skeleton.js';
+export interface SkeletonClockValue {
+    /**
+     * `Animated.Value` looping 0→1 for the shimmer variant. Each Skeleton
+     * interpolates this into translateX. One value per provider scope =
+     * perfectly synchronized shimmer bands across the whole subtree.
+     */
+    shimmer: Animated.Value;
+    /**
+     * Separate value for the pulse variant (different duration / easing).
+     * Lives alongside shimmer so swapping `variant` per-instance is cheap.
+     */
+    pulse: Animated.Value;
+    /** Whether the clock is currently running (false in reduced-motion mode). */
+    enabled: boolean;
+}
+export interface SkeletonClockProviderProps {
+    /** Drives the shimmer band's speed. */
+    speed: SkeletonSpeed;
+    /** Pause the clock entirely — e.g., when reduced-motion is on. */
+    enabled: boolean;
+    /**
+     * Default variant flag. Both loops always run regardless (it's cheap),
+     * but we accept this prop so the provider's API matches the user-facing
+     * variant default. Reserved for future use; currently the prop is purely
+     * descriptive.
+     */
+    variant: SkeletonVariant;
+    children: ReactNode;
+}
+/**
+ * Owns the loops. Mount one of these inside `SkeletonProvider`; every
+ * `<Skeleton>` below it shares the same animated values.
+ */
+export declare const SkeletonClockProvider: React.FC<SkeletonClockProviderProps>;
+/**
+ * Read the active clock. Returns a fallback "always-still" clock when no
+ * provider is mounted, so the primitives still render (statically) outside
+ * one — keeps demo/storybook usage friction-free.
+ */
+export declare const useSkeletonClock: () => SkeletonClockValue;
+//# sourceMappingURL=SkeletonClock.d.ts.map

package/lib/typescript/module/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.js';
+import type { SkeletonColors } from './SkeletonProvider.js';
+/**
+ * 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/module/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.js';
+import type { SkeletonColors } from './SkeletonProvider.js';
+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/module/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.js';
+/**
+ * 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/module/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/module/components/Skeleton/index.d.ts

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

package/lib/typescript/module/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/index.js';
+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/module/components/SlideToConfirm/index.d.ts

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

package/lib/typescript/module/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/index.js';
+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/module/components/Slider/index.d.ts

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