@webority/mobile-ui 0.0.0-stage → 0.0.33

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+export type RatingTone = 'primary' | 'warning';
+export type RatingSize = 'sm' | 'md' | 'lg' | number;
+export interface RatingProps {
+    value: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    allowHalf?: boolean;
+    readonly?: boolean;
+    size?: RatingSize;
+    tone?: RatingTone;
+    label?: 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;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    starContainerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<RatingProps>;
+};
+export { Rating };
+export default Rating;
+//# sourceMappingURL=Rating.d.ts.map

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

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

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+export interface RepeaterRenderArgs<T> {
+    item: T;
+    index: number;
+    /** Replace this row's value. */
+    update: (next: T) => void;
+    /** Remove this row. */
+    remove: () => void;
+    /** False when removing would breach `minRows`. */
+    canRemove: boolean;
+}
+export interface RepeaterProps<T> {
+    value: ReadonlyArray<T>;
+    onChange: (next: T[]) => void;
+    /** Builds a blank row. Called on add — must return a NEW object each time. */
+    createRow: () => T;
+    renderRow: (args: RepeaterRenderArgs<T>) => React.ReactNode;
+    addLabel?: string;
+    /** Per-row heading, e.g. `(i) => \`Line item ${i + 1}\``. */
+    rowLabel?: (index: number) => string;
+    /** Rows below this cannot be removed. Default 0. */
+    minRows?: number;
+    /** Add is hidden at this count. Omit for unlimited. */
+    maxRows?: number;
+    /** Remove affordance. Default true. */
+    removable?: boolean;
+    emptyText?: string;
+    disabled?: boolean;
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Add / remove / edit a list of form rows — line items, phone numbers,
+ * addresses. Owns the array mechanics (immutably) so each screen stops
+ * re-deriving splice/map logic, and keeps the min/max rules in one place where
+ * they can't disagree between the add button and the remove button.
+ */
+export declare const Repeater: <T>({ value, onChange, createRow, renderRow, addLabel, rowLabel, minRows, maxRows, removable, emptyText, disabled, haptic, style, testID }: RepeaterProps<T>) => React.ReactElement;
+export default Repeater;
+//# sourceMappingURL=Repeater.d.ts.map

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

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { TextInput as RNTextInput, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+import type { MarkdownAction } from './markdownActions';
+export interface RichTextEditorProps {
+    /** The markdown source. Controlled, like any other input. */
+    value?: string;
+    /** Fires with the full markdown source after typing or a toolbar action. */
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    /**
+     * Which toolbar actions to show, in the order given. Defaults to the full
+     * set the paired `<Markdown>` renderer can read.
+     */
+    actions?: MarkdownAction[];
+    /** Blocks typing and every toolbar action, and dims the editor. */
+    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;
+    /** Minimum height of the text area in pixels. Default 160. */
+    minHeight?: number;
+    autoFocus?: boolean;
+    accessibilityLabel?: string;
+    /** Haptic feedback for toolbar presses. Pass false to disable; pass a HapticType to override. */
+    haptic?: HapticType | false;
+    /** Style for the outer bordered box. */
+    style?: StyleProp<ViewStyle>;
+    /** Style for the toolbar row. */
+    toolbarStyle?: StyleProp<ViewStyle>;
+    /** Style for the multiline TextInput. */
+    inputStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+/**
+ * A markdown editor: a themed multiline field plus a toolbar that wraps the
+ * current selection in the markers our own `<Markdown>` renderer reads back.
+ *
+ * Deliberately NOT a WYSIWYG surface. Rich-text-on-RN means a WebView, which is
+ * exactly what replacing the stale `react-native-pell-rich-editor` was meant to
+ * escape: markdown in, markdown out, one plain TextInput, no bridge.
+ */
+export declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<RNTextInput>>;
+export default RichTextEditor;
+//# sourceMappingURL=RichTextEditor.d.ts.map

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

@@ -0,0 +1,5 @@
+export type { BlockMarkdownAction, EditorSelection, EditorState, InlineMarkdownAction, MarkdownAction } from './markdownActions';
+export { applyMarkdownAction } from './markdownActions';
+export type { RichTextEditorProps } from './RichTextEditor';
+export { RichTextEditor } from './RichTextEditor';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/RichTextEditor/markdownActions.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The text transforms behind the editor's toolbar, kept out of the component so
+ * the behaviour people actually notice — toggling bold OFF again, and where the
+ * caret lands when nothing is selected — can be tested as data, with no
+ * rendering involved. Same split as Markdown/parse.ts.
+ *
+ * The output targets our own `<Markdown>` renderer, so the vocabulary is the
+ * subset that parser reads: `**`, `*`, `~~`, backtick, `[](…)`, `#`, `##`,
+ * `- `, `1. `, `> `. Nothing here emits anything that renderer would show as
+ * literal text.
+ */
+export interface EditorSelection {
+    start: number;
+    end: number;
+}
+export interface EditorState {
+    text: string;
+    selection: EditorSelection;
+}
+export type InlineMarkdownAction = 'bold' | 'italic' | 'strikethrough' | 'code' | 'link';
+export type BlockMarkdownAction = 'heading1' | 'heading2' | 'bulletList' | 'numberedList' | 'quote';
+export type MarkdownAction = InlineMarkdownAction | BlockMarkdownAction;
+/** Selection as given can be reversed, unset, or past the end after an edit. */
+export declare const normalizeSelection: (selection: EditorSelection, length: number) => EditorSelection;
+/**
+ * Applies one toolbar action to the current text + selection and returns the
+ * next pair. Pure: the caller owns the state.
+ *
+ * Wrapping applies to the selection; with nothing selected the markers are
+ * inserted and the caret lands between them. Applying an action to text that
+ * already carries it removes it instead of stacking a second copy — which is
+ * the half people notice immediately when it is missing.
+ */
+export declare const applyMarkdownAction: (state: EditorState, action: MarkdownAction) => EditorState;
+//# sourceMappingURL=markdownActions.d.ts.map

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

@@ -0,0 +1,45 @@
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import { TextInput } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+export type SearchBarSize = 'sm' | 'md' | 'lg';
+export type SearchBarVariant = 'filled' | 'outlined' | 'underline';
+export type SearchBarLabelMode = 'top' | 'float';
+export interface SearchBarProps extends Omit<TextInputProps, 'style' | 'value' | 'onChangeText'> {
+    /** Optional label: static above the field (`labelMode="top"`) or floating from inside it. */
+    label?: string;
+    /** How the label sits. Default `'top'`, the field family's static label; `'float'` rises on focus / value. */
+    labelMode?: SearchBarLabelMode;
+    labelStyle?: StyleProp<TextStyle>;
+    /** Current value. Optional / nullable — treated as empty string when undefined or null. */
+    value?: string | null;
+    onChangeText: (text: string) => void;
+    onSubmit?: (text: string) => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    onClear?: () => void;
+    /**
+     * Replaces the magnifier. An icon name (`leftIcon="filter"`) is drawn at
+     * the magnifier's own colour and size; `{ name, variant }`, a render
+     * function or any node also work.
+     */
+    leftIcon?: SlotIcon;
+    debounceMs?: number;
+    size?: SearchBarSize;
+    variant?: SearchBarVariant;
+    /**
+     * Corner radius. Default: the theme's `components.searchBar.<size>.borderRadius`
+     * (the pill). Ignored on `underline`, which is always square.
+     */
+    borderRadius?: number;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<TextInput>>;
+export { SearchBar };
+export default SearchBar;
+//# sourceMappingURL=SearchBar.d.ts.map

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

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

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

@@ -0,0 +1,95 @@
+/**
+ * SegmentedControl — iOS-style segmented control.
+ *
+ * Rounded container with equal-width segments and an animated thumb that
+ * springs between selected segments. Theme-aware, dark-mode friendly,
+ * fully accessible (radiogroup / radio roles + selected state).
+ *
+ * The `variant` prop borrows Tabs' other two looks: `underline` slides a bar
+ * under the selected label above a hairline divider, `pills` slides a tinted
+ * pill behind it. Both drop the filled track and its inset; the indicator is
+ * the same Animated.View as the thumb, drawn with that look's colour, corner
+ * and vertical extent. It is a look, not a semantic change: the roles stay
+ * radiogroup / radio, and screen navigation is still Tabs.
+ */
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { RadiusScale } from '../../theme/types';
+import type { HapticType } from '../../utils';
+import type { SlotIcon, SlotIconState } from '../AppIcon/slotIcon';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+export type SegmentedControlTone = 'primary' | 'neutral';
+/** The same three looks as `Tabs`; `segmented` is the filled track with a thumb. */
+export type SegmentedControlVariant = 'underline' | 'pills' | 'segmented';
+export type SegmentValue = string | number;
+/** A theme radius token or a pixel number. */
+export type SegmentedControlRadius = keyof RadiusScale | number;
+/** What a segment knows about itself when it draws its icon. */
+export interface SegmentIconState extends SlotIconState {
+    selected: boolean;
+}
+/**
+ * A segment icon speaks the library's slot language: an AppIcon name
+ * (`icon: 'sun-1'`), `{ name, variant }`, a render function that gets
+ * `{ color, size, selected, disabled }`, or any node drawn as is. A name is
+ * drawn in the label's colour at the size's icon size.
+ */
+export type SegmentIcon = SlotIcon<SegmentIconState>;
+export interface SegmentItem {
+    label: string;
+    value: SegmentValue;
+    icon?: SegmentIcon;
+}
+export interface SegmentedControlProps {
+    segments: SegmentItem[];
+    value?: SegmentValue;
+    defaultValue?: SegmentValue;
+    onChange?: (value: SegmentValue) => void;
+    size?: SegmentedControlSize;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    tone?: SegmentedControlTone;
+    /**
+     * Indicator look, the same three as `Tabs`. `segmented` (default) is the
+     * filled track with a sliding thumb; `underline` a bar under the selected
+     * label over a hairline divider; `pills` a tinted pill behind it. The
+     * height, type size and side padding per size are the same on all three.
+     */
+    variant?: SegmentedControlVariant;
+    /**
+     * Corner radius, a theme token or a pixel number. Rounds the segmented
+     * track (the thumb nests inside with the track's corner 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 `segmentedControl.radius` token is the app-wide
+     * default under this prop.
+     */
+    radius?: SegmentedControlRadius;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    segmentStyle?: StyleProp<ViewStyle>;
+    selectedIndicatorStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+export interface SegmentedControlSizeStyle {
+    height: number;
+    fontSize: number;
+    paddingHorizontal: number;
+    /** Pixel size a named icon is drawn at. */
+    iconSize: number;
+}
+/**
+ * The control's sizes. Exported so `Tabs`' segmented variant draws from the
+ * same numbers and the two looks cannot drift.
+ */
+export declare const segmentedControlSizes: Record<SegmentedControlSize, SegmentedControlSizeStyle>;
+/** Inset between the track edge and the thumb; also read by `Tabs`' segmented variant. */
+export declare const segmentedControlTrackPadding = 4;
+declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<RNView>>;
+export { SegmentedControl };
+export default SegmentedControl;
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { SegmentedControlProps, SegmentedControlRadius, SegmentedControlSize, SegmentedControlTone, SegmentedControlVariant, SegmentIcon, SegmentIconState, SegmentItem, SegmentValue } from './SegmentedControl';
+export { default, SegmentedControl } from './SegmentedControl';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/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';
+import type { SlotIcon } from '../AppIcon/slotIcon';
+import type { SelectOption, SelectValue } from '../OptionSheet/OptionSheet';
+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/commonjs/components/Select/index.d.ts

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

package/lib/typescript/commonjs/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';
+import type { SkeletonColors } from './SkeletonProvider';
+/** 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/commonjs/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';
+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