@webority/mobile-ui 0.0.0-stage → 0.0.33

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

@@ -0,0 +1,124 @@
+/**
+ * ProfilePicker — a round profile photo with a camera badge at its
+ * bottom-right; tapping it picks a new photo. The mobile counterpart of
+ * webority-ui's AppLogoPicker.
+ *
+ * Native picking stays in the app, exactly as in FilePicker: `sources` are
+ * the same `FilePickerSource` adapters (`pick(): Promise<PickedFileInput[]>`),
+ * so the library adds no dependency. One source launches straight away;
+ * several open the shared OptionSheet. Removing the photo is a row in that
+ * same sheet, not a control drawn over the photo, so a removable photo opens
+ * the sheet even with a single source. With no source and nothing to remove
+ * the photo is display-only: no badge, and a tap does nothing. A freshly
+ * picked photo previews at
+ * once (optimistic) while the app uploads it and reflects the result back
+ * through `value`.
+ */
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+import type { IconName } from '../AppIcon/index.js';
+import type { AvatarImageProps, AvatarTone } from '../Avatar/index.js';
+import type { FilePickerSource, PickedFileInput } from '../FilePicker/index.js';
+export type ProfilePickerSize = 'sm' | 'md' | 'lg' | number;
+export type ProfilePickerShape = 'circle' | 'rounded' | 'square';
+/**
+ * `stacked`: the photo alone, hint below. `inline`: a profile row, photo on
+ * the left with title / subtitle / hint beside it. `profile`: the same
+ * identity block centred beneath the photo.
+ */
+export type ProfilePickerLayout = 'stacked' | 'inline' | 'profile';
+/** Theme colour of the camera badge; the same set StatusBadge and Chip use. */
+export type ProfilePickerTone = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+/**
+ * Look of the camera badge. `solid`: the tone fills it, the icon in the
+ * tone's ink. `soft`: a light tint of the tone, the icon in the tone. `outline`:
+ * the page colour with a ring and icon in the tone. StatusBadge's three names.
+ */
+export type ProfilePickerVariant = 'solid' | 'soft' | 'outline';
+export interface ProfilePickerLabels {
+    /** A11y label of the photo button. Default 'Change profile photo'. */
+    pick: string;
+    /** Label of the "Remove photo" row in the sheet. Default 'Remove photo'. */
+    remove: string;
+    /** Source chooser sheet title. Default 'Change photo'. */
+    sheetTitle: string;
+    errorTooLarge: (maxSizeMB: number) => string;
+    errorWrongType: string;
+}
+export interface ProfilePickerProps {
+    /** Current photo URL or local URI, or null for none. */
+    value?: string | null;
+    /** Person's name: drives the initials shown when there is no photo. */
+    name?: string;
+    /** Native picking adapters (same shape as FilePicker's). One launches directly; several open a chooser. */
+    sources: ReadonlyArray<FilePickerSource>;
+    /** Receives the validated pick. Upload it and pass the resulting URL back as `value`. */
+    onPick?: (file: PickedFileInput) => void;
+    /**
+     * Clears the photo. Removal is a row at the end of the sheet: a just-picked
+     * photo always offers it; an existing `value` offers it only when this is
+     * wired (the app owns removal). While it is offered, tapping the photo opens
+     * the sheet even with a single source.
+     */
+    onRemove?: () => void;
+    /** Spinner over the photo and no interaction, while the pick uploads. */
+    loading?: boolean;
+    disabled?: boolean;
+    /** Accepted mime globs. Default `['image/*']`. A pick with no type passes. */
+    accept?: ReadonlyArray<string>;
+    /** Size cap in MB, enforced when the source reports a size. */
+    maxSizeMB?: number;
+    /** A preset (sm 72, md 120, lg 160) or an exact diameter. Default 'md'. */
+    size?: ProfilePickerSize;
+    shape?: ProfilePickerShape;
+    /** Badge icon at the bottom-right. Default 'camera'. */
+    badgeIcon?: IconName;
+    /**
+     * Theme colour of the badge. Default `theme.components.profilePicker.defaultTone`,
+     * else 'primary'. `theme.components.profilePicker.badgeColor` replaces the
+     * tone's colour and `badgeIconColor` the icon's.
+     */
+    tone?: ProfilePickerTone;
+    /**
+     * Look of the badge: `solid` (default), `soft` or `outline`. Default
+     * `theme.components.profilePicker.defaultVariant`, else 'solid'.
+     */
+    variant?: ProfilePickerVariant;
+    /**
+     * Theme colour of the photo area when there is no photo: the initials disc
+     * and the empty person placeholder take a soft tint of the tone with the
+     * initials or icon in the tone, the Avatar's own `tone`. Unset keeps the
+     * Avatar's per-name palette and the grey placeholder. Default
+     * `theme.components.profilePicker.defaultAvatarTone`.
+     */
+    avatarTone?: AvatarTone;
+    /** Fill behind the initials or the placeholder icon; wins over `avatarTone`. */
+    avatarBackgroundColor?: string;
+    /** Colour of the initials or the placeholder icon; wins over `avatarTone`. */
+    avatarColor?: string;
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    /** App-supplied error; wins over a rejected pick's own message. */
+    error?: string;
+    layout?: ProfilePickerLayout;
+    /** Bold primary text beside / beneath the photo (inline and profile layouts). */
+    title?: React.ReactNode;
+    /** Muted secondary text beside / beneath the photo (inline and profile layouts). */
+    subtitle?: React.ReactNode;
+    /** Renders the photo, e.g. an authenticated image loader (see Avatar). */
+    ImageComponent?: React.ComponentType<AvatarImageProps>;
+    labels?: Partial<ProfilePickerLabels>;
+    /** Haptic on an accepted pick and on remove; errors use `notificationError`. Pass false to disable. */
+    haptic?: HapticType | false;
+    /** Called with the message of a rejected or failed pick. */
+    onError?: (message: string) => void;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const ProfilePicker: React.ForwardRefExoticComponent<ProfilePickerProps & React.RefAttributes<RNView>>;
+export { ProfilePicker };
+export default ProfilePicker;
+//# sourceMappingURL=ProfilePicker.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { ProfilePickerLabels, ProfilePickerLayout, ProfilePickerProps, ProfilePickerShape, ProfilePickerSize, ProfilePickerTone, ProfilePickerVariant } from './ProfilePicker.js';
+export { default, ProfilePicker } from './ProfilePicker.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,33 @@
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { GradientDefinition } from '../../theme/types.js';
+export type ProgressBarTone = 'primary' | 'success' | 'warning' | 'error';
+export interface ProgressBarSegment {
+    /** Fraction of the full track (0–1). */
+    value: number;
+    /** Explicit colour; falls back to `tone`. */
+    color?: string;
+    tone?: ProgressBarTone;
+}
+export interface ProgressBarProps {
+    progress?: number;
+    indeterminate?: boolean;
+    height?: number;
+    radius?: number;
+    tone?: ProgressBarTone;
+    trackColor?: string;
+    barColor?: string;
+    /** Gradient fill for the determinate bar — a `GradientDefinition` or a theme gradient token name. */
+    gradient?: GradientDefinition | string;
+    /** Render a multi-colour breakdown bar (usage split) instead of a single progress fill. */
+    segments?: ProgressBarSegment[];
+    animated?: boolean;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    barStyle?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<RNView>>;
+export { ProgressBar };
+export default ProgressBar;
+//# sourceMappingURL=ProgressBar.d.ts.map

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * ProgressRing: the circular sibling of ProgressBar.
+ *
+ * A track circle and a fill arc drawn with react-native-svg, the arc's
+ * length driven by one animated value so a progress change sweeps
+ * smoothly from the old fraction to the new one. Starts at 12 o'clock and
+ * runs clockwise. Whatever is passed as `children` sits centred inside the
+ * ring (an Avatar, an icon, a percentage), so the ring can wrap a picture
+ * without the picture knowing about it.
+ *
+ * Determinate only: an unknown-duration wait is Spinner's job.
+ */
+import type React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+export type ProgressRingTone = 'primary' | 'success' | 'warning' | 'error';
+export interface ProgressRingProps {
+    /** Fraction of the ring filled, 0 to 1, clamped. Default `0`. */
+    progress?: number;
+    /** Outer diameter in pixels. Default `48`. */
+    size?: number;
+    /** Stroke width of the track and the fill. Default `theme.components.progressRing.strokeWidth`, then `4`. */
+    strokeWidth?: number;
+    /** Fill colour when no `ringColor` is set. Default `'primary'`. */
+    tone?: ProgressRingTone;
+    /** Track colour override. Default `theme.components.progressRing.trackColor`, then `theme.colors.surface.disabled`. */
+    trackColor?: string;
+    /** Fill colour override; wins over `tone`. */
+    ringColor?: string;
+    /**
+     * Colour the fill by how far it has got: `error` below the first stop,
+     * `warning` to the second, `success` from there (stops default to a third
+     * and two thirds, `theme.components.progressRing.colorStops`). The colour
+     * rides the same animated value as the arc, so it flips exactly when the
+     * sweep crosses a stop. Ignored when `ringColor` is set. Default `false`.
+     */
+    colorByProgress?: boolean;
+    /**
+     * Animate progress changes. Default `true`. A reduced-motion setting on
+     * the device snaps the ring to the new value regardless.
+     */
+    animated?: boolean;
+    /** Rounded ends on the fill arc. Default `true`. */
+    rounded?: boolean;
+    /** Content centred inside the ring. */
+    children?: React.ReactNode;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const ProgressRing: React.ForwardRefExoticComponent<ProgressRingProps & React.RefAttributes<RNView>>;
+export { ProgressRing };
+export default ProgressRing;
+//# sourceMappingURL=ProgressRing.d.ts.map

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

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

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

@@ -0,0 +1,33 @@
+import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils.js';
+export type RadioSize = 'sm' | 'md' | 'lg';
+export type RadioTone = 'primary' | 'success' | 'warning' | 'error';
+export type RadioValue = string | number;
+export interface RadioGroupContextValue {
+    selectedValue: RadioValue | undefined;
+    onChange: (value: RadioValue) => void;
+    disabled: boolean;
+}
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue | null>;
+export declare const useRadioGroup: () => RadioGroupContextValue | null;
+export interface RadioProps extends Omit<PressableProps, 'style' | 'children' | 'onPress'> {
+    value: RadioValue;
+    selected?: boolean;
+    onChange?: (value: RadioValue) => void;
+    disabled?: boolean;
+    label?: string;
+    size?: RadioSize;
+    tone?: RadioTone;
+    accessibilityLabel?: string;
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    circleStyle?: StyleProp<ViewStyle>;
+    dotStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<RNView>>;
+export { Radio };
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

package/lib/typescript/module/components/Radio/RadioDot.d.ts

@@ -0,0 +1,24 @@
+/**
+ * RadioDot — the bare animated radio indicator (ring + spring-scaled dot).
+ *
+ * Extracted from Radio so custom option templates (ChoiceGroup `renderOption`,
+ * bespoke cards) can embed the standard indicator without rebuilding the
+ * animation or the disabled/selected colour rules. Purely visual — no press
+ * handling, no a11y role; the parent control owns those.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type RadioDotSize = 'sm' | 'md' | 'lg';
+export interface RadioDotProps {
+    selected: boolean;
+    /** Fill colour of the inner dot + selected ring. Default `colors.primary`. */
+    color?: string;
+    disabled?: boolean;
+    /** Named size reads `theme.components.radio[size]`; a number is the outer diameter in px (inner = half). */
+    size?: RadioDotSize | number;
+    style?: StyleProp<ViewStyle>;
+    dotStyle?: StyleProp<ViewStyle>;
+}
+export declare const RadioDot: React.FC<RadioDotProps>;
+export default RadioDot;
+//# sourceMappingURL=RadioDot.d.ts.map

package/lib/typescript/module/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { RadioValue } from './Radio.js';
+export interface RadioGroupProps {
+    value?: RadioValue;
+    defaultValue?: RadioValue;
+    onChange?: (value: RadioValue) => void;
+    children: React.ReactNode;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const RadioGroup: React.FC<RadioGroupProps>;
+export { RadioGroup };
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1,7 @@
+export type { RadioGroupContextValue, RadioProps, RadioSize, RadioTone, RadioValue } from './Radio.js';
+export { default, Radio, RadioGroupContext, useRadioGroup } from './Radio.js';
+export type { RadioDotProps, RadioDotSize } from './RadioDot.js';
+export { RadioDot } from './RadioDot.js';
+export type { RadioGroupProps } from './RadioGroup.js';
+export { RadioGroup } from './RadioGroup.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

package/lib/typescript/module/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/index.js';
+import type { MarkdownAction } from './markdownActions.js';
+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/module/components/RichTextEditor/index.d.ts

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

package/lib/typescript/module/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/module/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.js';
+import type { SlotIcon } from '../AppIcon/slotIcon.js';
+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/module/components/SearchBar/index.d.ts

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

package/lib/typescript/module/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.js';
+import type { HapticType } from '../../utils/index.js';
+import type { SlotIcon, SlotIconState } from '../AppIcon/slotIcon.js';
+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/module/components/SegmentedControl/index.d.ts

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