@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/typescript/module/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/module/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/index.js';
+import type { SlotIcon } from '../AppIcon/index.js';
+import type { SliderSize, SliderTone, SliderVariant } from '../Slider/index.js';
+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/module/components/SliderField/index.d.ts

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

package/lib/typescript/module/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/module/components/Spinner/index.d.ts

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

package/lib/typescript/module/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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+/**
+ * The same semantic vocabulary Chip and Badge use, and the web library's
+ * `AppStatusBadge` (its `danger` is `error` here, the mobile theme's name).
+ * A semantic name survives a palette change; a colour name does not.
+ */
+export type StatusBadgeTone = 'success' | 'warning' | 'error' | 'info' | 'primary' | 'neutral';
+/**
+ * `soft` is the default: the tone at a light tint behind text in the tone,
+ * with a border in the tone so the pill has an edge on any surface. `outline`
+ * drops the fill. `solid` fills with the tone and draws the text on it.
+ */
+export type StatusBadgeVariant = 'soft' | 'outline' | 'solid';
+export type StatusBadgeSize = 'sm' | 'md';
+export interface StatusBadgeProps {
+    /** The status as the reader should see it ("Active", "Pending review"). */
+    label: string;
+    tone?: StatusBadgeTone;
+    variant?: StatusBadgeVariant;
+    size?: StatusBadgeSize;
+    /** A small disc before the label in the status colour. */
+    dot?: boolean;
+    /**
+     * A status colour of the app's own, `#RRGGBB`, for a status the backend
+     * names with a colour rather than a tone (a pipeline stage, a category).
+     * Fill, border, text and dot all derive from it, so nothing else needs
+     * naming. Wins over `tone`. A non-hex value falls back to the tone.
+     */
+    color?: string;
+    /**
+     * 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;
+    /** Defaults to the label. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<StatusBadgeProps>;
+};
+export { StatusBadge };
+export default StatusBadge;
+//# sourceMappingURL=StatusBadge.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { StatusBadgeProps, StatusBadgeSize, StatusBadgeTone, StatusBadgeVariant } from './StatusBadge.js';
+export { default, StatusBadge } from './StatusBadge.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils.js';
+/**
+ * `horizontal`: numbered circles in a row, joined by a line. `vertical`: the
+ * same circles in a column, with a description beside each. `segmented`: a
+ * "Step 1 of 3 · Label" caption over one bar per step, filled up to and
+ * including the active step.
+ */
+export type StepperVariant = 'horizontal' | 'vertical' | 'segmented';
+export type StepperTone = 'primary' | 'success';
+/**
+ * What a tap on a step does. Steps always run in order: every step before
+ * the active one is done, so a tap never leaves a gap. `none`: nothing, the
+ * stepper only shows progress. `back`: a done step becomes the active one.
+ * `select`: any step becomes the active one, and tapping the active step
+ * again leaves none active.
+ */
+export type StepperPressMode = 'none' | 'back' | 'select';
+export interface StepperStep {
+    key: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+}
+export interface StepperProps {
+    steps: StepperStep[];
+    /**
+     * Zero-based index of the current step. Every step before it is done and
+     * every step after it upcoming. `null` or a negative number for no active
+     * step (nothing done), `steps.length` for all done. Passing it makes the
+     * active step controlled; leave it out and the stepper keeps its own,
+     * starting at `defaultActiveStep`.
+     */
+    activeStep?: number | null;
+    /** Starting active step when `activeStep` is left out. Default 0. */
+    defaultActiveStep?: number | null;
+    /** What a tap on a step does. Default `none`. */
+    pressMode?: StepperPressMode;
+    /** Every accepted tap, with the step's index, before the state changes. */
+    onStepPress?: (index: number) => void;
+    /** The new active step after a tap; `null` for none. */
+    onActiveStepChange?: (index: number | null) => void;
+    variant?: StepperVariant;
+    tone?: StepperTone;
+    /**
+     * `segmented` only: the caption above the bars. Receives the zero-based
+     * index of the active step (`null` when none is active), the step count
+     * and that step. Default `Step 2 of 3 · Billing`, or `1 of 3 done` with no
+     * active step.
+     */
+    formatCaption?: (index: number | null, total: number, step: StepperStep | undefined) => string;
+    /**
+     * 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;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    circleStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    connectorStyle?: StyleProp<ViewStyle>;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
+    testID?: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<StepperProps>;
+};
+export { Stepper };
+export default Stepper;
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { StepperPressMode, StepperProps, StepperStep, StepperTone, StepperVariant } from './Stepper.js';
+export { default, Stepper } from './Stepper.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,50 @@
+/**
+ * Swipeable — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * Wraps any content and reveals contextual actions when the user
+ * swipes left or right. Past `fullSwipeThreshold`, the first action
+ * fires automatically and the content slides off-screen.
+ *
+ * USAGE:
+ *
+ * <Swipeable
+ *   leftActions={[{ key: 'archive', label: 'Archive', tone: 'success', onPress: handleArchive }]}
+ *   rightActions={[{ key: 'delete', label: 'Delete', tone: 'error', onPress: handleDelete }]}
+ * >
+ *   <ListItem title="Inbox item" />
+ * </Swipeable>
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+export type SwipeableTone = 'primary' | 'success' | 'warning' | 'error' | 'neutral';
+export interface SwipeableAction {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    onPress: () => void;
+    tone?: SwipeableTone;
+}
+export interface SwipeableProps {
+    children: React.ReactNode;
+    leftActions?: SwipeableAction[];
+    rightActions?: SwipeableAction[];
+    /** px to fully reveal the row of actions; default 80 */
+    threshold?: number;
+    /** px past which the first action fires automatically + content slides off-screen; default 200 */
+    fullSwipeThreshold?: number;
+    onSwipeOpen?: (side: 'left' | 'right') => void;
+    onSwipeClose?: () => void;
+    disabled?: boolean;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    containerStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const Swipeable: React.FC<SwipeableProps>;
+export { Swipeable };
+export default Swipeable;
+//# sourceMappingURL=Swipeable.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SwipeableAction, SwipeableProps, SwipeableTone } from './Swipeable.js';
+export { default, Swipeable } from './Swipeable.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,29 @@
+import type { PressableProps, View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils.js';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export type SwitchTone = 'primary' | 'success' | 'warning' | 'error';
+export interface SwitchProps extends Omit<PressableProps, 'style' | 'children' | 'onPress'> {
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    size?: SwitchSize;
+    tone?: SwitchTone;
+    label?: string;
+    accessibilityLabel?: string;
+    haptic?: HapticType | false;
+    /**
+     * When true, the thumb briefly scales up on value change (1 → 1.15 → 1).
+     * Use for playful/brand-flavored switches; default off for system feel.
+     */
+    bounce?: boolean;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    trackStyle?: StyleProp<ViewStyle>;
+    thumbStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<RNView>>;
+export { Switch };
+export default Switch;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SwitchProps, SwitchSize, SwitchTone } from './Switch.js';
+export { default, Switch } from './Switch.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,99 @@
+/**
+ * Tabs — top tabs with an animated underline, pill or segmented indicator.
+ *
+ * Layout: equal-width row by default, or horizontal-scrollable when
+ * `scrollable` is true. The active indicator (underline, pill or segmented
+ * thumb) is an Animated.View positioned absolutely; its translateX + width
+ * spring to the measured layout of the active tab. Driven by native driver
+ * where possible (transform); width animates separately on the JS thread
+ * because RN's native driver does not support layout props.
+ *
+ * `segmented` borrows SegmentedControl's look (filled track, sliding thumb)
+ * for tabs that sit inside content, reading that control's size table and
+ * theme overrides so the two stay in step; the inset is the tabs' own token
+ * (tabs.trackPadding, 4). It is a look, not a semantic change: the roles
+ * stay tablist/tab, and a value choice is still SegmentedControl.
+ */
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
+import type { RadiusScale } from '../../theme/types.js';
+import type { HapticType } from '../../utils/index.js';
+import type { SlotIcon, SlotIconState } from '../AppIcon/slotIcon.js';
+export type TabsVariant = 'underline' | 'pills' | 'segmented';
+export type TabsSize = 'sm' | 'md' | 'lg';
+/** A theme radius token or a pixel number. */
+export type TabsRadius = keyof RadiusScale | number;
+export type TabsAlign = 'left' | 'center';
+/** What a tab knows about itself when it draws its icon. */
+export interface TabItemIconState extends SlotIconState {
+    focused: boolean;
+}
+/**
+ * A tab icon speaks the library's slot language: an AppIcon name
+ * (`icon: 'home'`), `{ name, variant }`, a render function that gets
+ * `{ color, size, focused, disabled }`, or any node drawn as is. A name is
+ * drawn in the label's colour at the tabs' icon size.
+ */
+export type TabItemIcon = SlotIcon<TabItemIconState>;
+export interface TabItem {
+    key: string;
+    label: string;
+    icon?: TabItemIcon;
+    /** Optional numeric/string badge — rendered inline after the label when provided. */
+    badge?: string | number;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    tabs: TabItem[];
+    activeKey: string;
+    onChange: (key: string) => void;
+    variant?: TabsVariant;
+    /**
+     * Corner radius, a theme token or a pixel number. Rounds the segmented
+     * track (the thumb nests inside it, its corner the track's minus the inset),
+     * the pill, and the ends of the underline. Unset, each variant keeps its own
+     * default: `md` track with an `sm` thumb, a `full` pill, a square underline.
+     * The theme's `tabs.radius` token is the app-wide default under this prop.
+     */
+    radius?: TabsRadius;
+    /**
+     * Scales the type, the tab padding and the icon together. `md` is the
+     * default look. On the segmented variant the size is SegmentedControl's
+     * size of the same name.
+     */
+    size?: TabsSize;
+    scrollable?: boolean;
+    align?: TabsAlign;
+    style?: StyleProp<ViewStyle>;
+    /** Alias of `style`. Applied to the outer container View. Additive — both merge. */
+    containerStyle?: StyleProp<ViewStyle>;
+    tabStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to each tab label Text. */
+    tabLabelStyle?: StyleProp<TextStyle>;
+    /** Style override applied to the per-tab icon wrapper. */
+    tabIconStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the per-tab badge wrapper. */
+    tabBadgeStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the bottom divider line (underline variant only). */
+    dividerStyle?: StyleProp<ViewStyle>;
+    /** Style override applied to the animated indicator (underline or pill). */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * Optional fractional active-index (0..tabs.length-1). When supplied and
+     * every tab has been measured, the indicator's translateX + width track
+     * this value via interpolation instead of springing on activeKey change.
+     * Wire it to a horizontal pager's `scrollX / pageWidth` to make the
+     * indicator follow drags in real time. Press-driven `onChange` still fires
+     * the same way; consumers typically scroll the pager in response so the
+     * progress value catches up.
+     */
+    progress?: Animated.AnimatedInterpolation<number> | Animated.Value;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<RNView>>;
+export { Tabs };
+export default Tabs;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { TabItem, TabItemIcon, TabItemIconState, TabsAlign, TabsProps, TabsRadius, TabsSize, TabsVariant } from './Tabs.js';
+export { default, Tabs } from './Tabs.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,36 @@
+import type { TextInput as RNTextInput, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+import type { FieldBaseSize, FieldBaseVariant } from '../FieldBase/index.js';
+export interface TagInputProps {
+    /** Controlled tags. */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    size?: FieldBaseSize;
+    variant?: FieldBaseVariant;
+    /** Reject a tag past this count. Omit for unlimited. */
+    maxTags?: number;
+    /** Reject a tag that already exists (case-insensitive). Default true. */
+    unique?: boolean;
+    /** Validate or transform a candidate. Return null to reject it. */
+    transform?: (raw: string) => string | null;
+    /** Characters that commit the current draft in addition to submit. Default [',']. */
+    separators?: string[];
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Chips as input — the "type a value, press enter, it becomes a tag" field.
+ * Chip renders a tag and Input takes text, but nothing joined them, so consumers
+ * built this by hand each time (and each one disagreed about backspace).
+ */
+export declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<RNTextInput>>;
+export default TagInput;
+//# sourceMappingURL=TagInput.d.ts.map

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

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