@webority/mobile-ui 0.8.1 → 0.9.0

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

@@ -0,0 +1,70 @@
+/**
+ * Calendar: an inline month grid for picking one day or a range, with marked
+ * days (holidays, events, pending requests) drawn as dots and read aloud with
+ * each day. DateRangePicker renders this same grid inside its sheet.
+ */
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+import type { StatusBadgeTone } from '../StatusBadge/index.js';
+import type { CalendarWeekStart } from './calendarDates.js';
+export type CalendarMode = 'single' | 'range';
+export type CalendarMarkKind = 'holiday' | 'event' | 'pending';
+export interface CalendarMarkedDate {
+    date: Date;
+    kind: CalendarMarkKind;
+    /** What the day is ("Dussehra", "Casual leave"); read aloud before the kind. */
+    label?: string;
+    /** Dot colour. Default: `error` for a holiday, `primary` for an event, `warning` for pending. */
+    tone?: StatusBadgeTone;
+}
+/** A selection. Single mode uses `start` only; a range in progress has no `end` yet. */
+export interface CalendarRange {
+    start: Date;
+    end?: Date;
+}
+export interface CalendarProps {
+    /** `single` picks one day; `range` picks a start, then an end. Default `single`. */
+    mode?: CalendarMode;
+    /** The selection; `null` when nothing is picked. */
+    value: CalendarRange | null;
+    /**
+     * Fires on every day tap. In range mode the first tap gives `{ start }`, the
+     * second `{ start, end }`; a tap before the start, or after a complete range,
+     * starts again from the tapped day.
+     */
+    onChange: (range: CalendarRange) => void;
+    /** The month shown (any day in it). Omit to let the calendar own it. */
+    month?: Date;
+    /** Fires when the shown month changes, by the arrows or a tap on a neighbouring month's day. */
+    onMonthChange?: (month: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    /** Days that cannot be picked, besides those outside `minDate` and `maxDate`. */
+    disabledDates?: Date[];
+    /** First weekday of the grid: 0 Sunday, 1 Monday, 6 Saturday. Default 0. */
+    weekStartsOn?: CalendarWeekStart;
+    /** BCP 47 locale for month, weekday and day names. Default `'en-IN'`. */
+    locale?: string;
+    markedDates?: CalendarMarkedDate[];
+    /** Range mode: strike holidays inside a complete range and read them as not counted. */
+    strikeMarkedInRange?: boolean;
+    /**
+     * Fixed width and height of each day, at least 44. Unset, days share the
+     * width equally and stay at least 44 tall.
+     */
+    cellSize?: number;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    /** Names the calendar; read with the month heading ("Leave dates, October 2026"). */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    /** Style override for the month and year heading wrapper. */
+    headerLabelStyle?: StyleProp<ViewStyle>;
+    /** Style override for the previous and next month buttons. */
+    navButtonStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<RNView>>;
+export { Calendar };
+export default Calendar;
+//# sourceMappingURL=Calendar.d.ts.map

package/lib/typescript/module/components/Calendar/CalendarDay.d.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { CalendarCell } from './calendarDates.js';
+import type { CalendarStyles } from './calendarStyles.js';
+export interface CalendarDot {
+    key: string;
+    color: string;
+}
+export interface CalendarDayProps {
+    cell: CalendarCell;
+    accessibilityLabel: string;
+    disabled: boolean;
+    /** The single selected day, or the start or end of the range. */
+    edge: boolean;
+    /** Strictly between the start and end of a complete range. */
+    mid: boolean;
+    barLeft: boolean;
+    barRight: boolean;
+    today: boolean;
+    struck: boolean;
+    dots?: readonly CalendarDot[];
+    /** Day number colour for a holiday; ignored on a selected, disabled or neighbouring-month day. */
+    inkColor?: string;
+    cellStyle: StyleProp<ViewStyle>;
+    styles: CalendarStyles;
+    maxFontSizeMultiplier: number;
+    onPressDay: (cell: CalendarCell) => void;
+}
+/** One day of the grid; memoised so a tap re-renders only the days whose state changed. */
+export declare const CalendarDay: import("react").MemoExoticComponent<({ cell, accessibilityLabel, disabled, edge, mid, barLeft, barRight, today, struck, dots, inkColor, cellStyle, styles, maxFontSizeMultiplier, onPressDay }: CalendarDayProps) => import("react").JSX.Element>;
+//# sourceMappingURL=CalendarDay.d.ts.map

package/lib/typescript/module/components/Calendar/calendarDates.d.ts

@@ -0,0 +1,24 @@
+/** First weekday of the grid: 0 Sunday, 1 Monday, 6 Saturday. */
+export type CalendarWeekStart = 0 | 1 | 6;
+export interface CalendarCell {
+    date: Date;
+    iso: string;
+    inMonth: boolean;
+}
+/** A grid is always six weeks, so the calendar keeps one height across months. */
+export declare const GRID_CELLS = 42;
+export declare const startOfDay: (date: Date) => Date;
+export declare const startOfMonth: (date: Date) => Date;
+export declare const addMonths: (date: Date, delta: number) => Date;
+export declare const isSameDay: (a: Date, b: Date) => boolean;
+/** Local calendar day as `yyyy-MM-dd`, the key every day lookup uses. */
+export declare const toIso: (date: Date) => string;
+/** Whole days from `a` to `b`; rounded because a DST day is 23 or 25 hours long. */
+export declare const daysBetween: (a: Date, b: Date) => number;
+export declare const buildMonthMatrix: (month: Date, weekStartsOn: CalendarWeekStart) => CalendarCell[];
+/** Short weekday names in grid order, each keyed by its weekday number (0 Sunday). */
+export declare const weekdayLabels: (locale: string, weekStartsOn: CalendarWeekStart) => {
+    weekday: number;
+    label: string;
+}[];
+//# sourceMappingURL=calendarDates.d.ts.map

package/lib/typescript/module/components/Calendar/calendarStyles.d.ts

@@ -0,0 +1,125 @@
+import type { Theme } from '../../theme/types.js';
+/** The smallest day cell: the 44 pt minimum touch target. */
+export declare const MIN_CELL_SIZE = 44;
+export declare const NAV_BUTTON_SIZE = 36;
+export declare const buildCalendarStyles: (theme: Theme) => {
+    root: {
+        alignSelf: "stretch";
+    };
+    headerRow: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        marginBottom: number;
+    };
+    navBtn: {
+        alignItems: "center";
+        justifyContent: "center";
+        backgroundColor: string;
+        borderCurve: "continuous";
+        width: number;
+        height: number;
+        borderRadius: 9999;
+    };
+    navBtnPressed: {
+        backgroundColor: string;
+    };
+    navBtnDisabled: {
+        opacity: number;
+    };
+    navText: {
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
+        fontFamily?: string | undefined | undefined;
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+    };
+    headerLabelWrap: {
+        flex: number;
+        alignItems: "center";
+    };
+    headerLabel: {
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
+        fontFamily?: string | undefined | undefined;
+        fontSize: number;
+        color: string;
+    };
+    weekdayRow: {
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+    };
+    weekdayCell: {
+        alignItems: "center";
+        paddingVertical: number;
+    };
+    weekdayText: {
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
+        fontFamily?: string | undefined | undefined;
+        fontSize: number;
+        color: string;
+        letterSpacing: number;
+    };
+    gridRow: {
+        flexDirection: "row";
+        justifyContent: "center";
+    };
+    dayCell: {
+        alignItems: "center";
+        justifyContent: "center";
+        padding: number;
+    };
+    barLeft: {
+        position: "absolute";
+        left: number;
+        right: "50%";
+        top: "5%";
+        bottom: "5%";
+    };
+    barRight: {
+        position: "absolute";
+        left: "50%";
+        right: number;
+        top: "5%";
+        bottom: "5%";
+    };
+    rangeFill: {
+        backgroundColor: string;
+    };
+    dayInner: {
+        borderCurve: "continuous";
+        width: "90%";
+        height: "90%";
+        alignItems: "center";
+        justifyContent: "center";
+        borderRadius: 9999;
+    };
+    dayEdge: {
+        backgroundColor: string;
+    };
+    dayMid: {
+        borderRadius: 0;
+    };
+    dayText: {
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
+        fontFamily?: string | undefined | undefined;
+        fontSize: number;
+    };
+    dayStruck: {
+        textDecorationLine: "line-through";
+    };
+    dots: {
+        position: "absolute";
+        bottom: number;
+        flexDirection: "row";
+        gap: number;
+    };
+    dot: {
+        borderCurve: "continuous";
+        width: number;
+        height: number;
+        borderRadius: 9999;
+    };
+};
+export type CalendarStyles = ReturnType<typeof buildCalendarStyles>;
+//# sourceMappingURL=calendarStyles.d.ts.map

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

@@ -0,0 +1,4 @@
+export type { CalendarMarkedDate, CalendarMarkKind, CalendarMode, CalendarProps, CalendarRange } from './Calendar.js';
+export { Calendar, default } from './Calendar.js';
+export type { CalendarWeekStart } from './calendarDates.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -18,7 +18,7 @@
  * ref.current?.next();
  * ref.current?.prev();
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export type PaginationStyle = 'dots' | 'bars' | 'numbers';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 import type { IconVariant } from '../AppIcon/AppIcon.js';

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

@@ -24,7 +24,7 @@
  * Same data contract as Select: `ChoiceOption[]` by default, `getOption*`
  * accessors for custom shapes.
  */
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { SlotIcon } from '../AppIcon/slotIcon.js';
@@ -103,6 +103,16 @@ interface BaseChoiceGroupProps<T = ChoiceOption> {
     disabled?: boolean;
     /** Density of the built-in templates (padding / fontSize / icon / dot). Default `'md'`. */
     size?: ChoiceGroupSize;
+    /**
+     * Lines an option label may take in the built-in templates before it ends in
+     * an ellipsis. Default `1`. Screen readers always get the full label.
+     */
+    labelLines?: number;
+    /**
+     * Lines an option description may take in the card before it ends in an
+     * ellipsis. Default `2`. The card's accessible label carries the full description.
+     */
+    descriptionLines?: number;
     /** Haptic on select. Pass false to disable; pass a HapticType to override. */
     haptic?: HapticType | false;
     accessibilityLabel?: string;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type ConfettiPreset = 'pop' | 'rain' | 'fireworks';
 export type ConfettiShape = 'strip' | 'square' | 'circle' | 'triangle' | 'star' | 'streamer';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger/index.js';

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

@@ -1,8 +1,10 @@
 import type { ReactNode } from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
+import type { CalendarMarkedDate } from '../Calendar/index.js';
+import type { CalendarWeekStart } from '../Calendar/calendarDates.js';
 import type { PickerTriggerSize, PickerTriggerVariant } from '../PickerTrigger/index.js';
-export type WeekStart = 0 | 1 | 6;
+export type WeekStart = CalendarWeekStart;
 export interface DateRange {
     start: Date | null;
     end: Date | null;
@@ -42,6 +44,10 @@ export interface DateRangePickerProps {
     minDate?: Date;
     maxDate?: Date;
     disabledDates?: Date[];
+    /** Holidays, events and pending requests drawn on the grid; see `Calendar`. */
+    markedDates?: CalendarMarkedDate[];
+    /** Strike holidays inside the chosen range and read them as not counted; see `Calendar`. */
+    strikeMarkedInRange?: boolean;
     locale?: string;
     weekStartsOn?: WeekStart;
     title?: string;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { TextColor } from '../Text/Text.js';
 export type DescriptionsSize = 'sm' | 'md';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type DialogVariant = 'default' | 'success' | 'warning' | 'error' | 'info';

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

@@ -17,7 +17,7 @@
  * ref.current?.close();
  * ref.current?.toggle();
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 export type EmptyStateSize = 'sm' | 'md' | 'lg';
 export interface EmptyStateAction {

package/lib/typescript/module/components/ErrorBoundary/withErrorBoundary.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { ErrorBoundaryProps } from './ErrorBoundary.js';
 /**
  * Wraps a component in an `ErrorBoundary`. Prefer this over hand-wrapping a

package/lib/typescript/module/components/FieldBase/Chevron.d.ts

@@ -8,7 +8,7 @@
  * be a filled triangle drawn with view borders. Pass `open` to get the 180°
  * rotate-on-open animation; omit it for a static chevron.
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface ChevronProps {
     color: string;

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

@@ -20,7 +20,7 @@
  *     (compression, EXIF strip, local copy) before it lands in `files` —
  *     plug the app's image pipeline in there.
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export type FilePickerVariant = 'card' | 'list';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export interface ForceUpdateDialogProps {
     /** Whether the dialog is visible. */

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

@@ -21,7 +21,7 @@
  * />
  * ```
  */
-import React from 'react';
+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 { SelectOption, SelectValue } from '../OptionSheet/OptionSheet.js';

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

@@ -6,6 +6,12 @@ import type { ButtonProps } from '../Button/index.js';
 import type { IconBadgeTone } from '../IconBadge/index.js';
 import type { SwipeableAction } from '../Swipeable/index.js';
 export type ListItemSize = 'sm' | 'md' | 'lg';
+/**
+ * Where the `right` slot sits. `side` is beside the text, `below` is under the
+ * subtitle and description, and `auto` is `side` until the user's text size is
+ * above 1.2 times the default, then `below`, so a badge stops squeezing the title.
+ */
+export type ListItemRightPlacement = 'auto' | 'side' | 'below';
 /** One button of the `actions` row, drawn with the library Button at size `sm`. */
 export interface ListItemAction {
     label: string;
@@ -46,6 +52,24 @@ export interface ListItemProps {
     /** Tone of the `icon` circle. Default `'primary'`. */
     iconTone?: IconBadgeTone;
     right?: React.ReactNode;
+    /**
+     * Where the `right` slot is drawn. Default `'auto'`: beside the text, and
+     * under the subtitle when the font scale is above 1.2. The chevron always
+     * stays at the side.
+     */
+    rightPlacement?: ListItemRightPlacement;
+    /**
+     * Selection mode. The whole row becomes one checkbox (role `checkbox`, with
+     * its `checked` state announced) and the box is drawn in the leading slot,
+     * before any `left` or `icon`. Pressing the row calls `onCheckedChange` and
+     * `onPress` is not used. The box is a drawing, not a control, so nothing
+     * nests inside the row's press target.
+     */
+    selectable?: boolean;
+    /** Whether the row is checked. Controlled: update it from `onCheckedChange`. Used only with `selectable`. */
+    checked?: boolean;
+    /** Called with the next value when a `selectable` row is pressed. */
+    onCheckedChange?: (checked: boolean) => void;
     /**
      * A row of buttons under the item: a node drawn as is, or an array of
      * `ListItemAction` drawn as small Buttons. They sit outside the row's press

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

@@ -1,4 +1,4 @@
 export type { SwipeableAction } from '../Swipeable/index.js';
-export type { ListItemAction, ListItemProps, ListItemSize } from './ListItem.js';
+export type { ListItemAction, ListItemProps, ListItemRightPlacement, ListItemSize } from './ListItem.js';
 export { default, ListItem } from './ListItem.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const loader: {
     show: (message?: string) => void;
     hide: () => void;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 export interface MarkdownProps {
     /** The markdown source. An empty or missing string renders nothing. */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 export type ModalPresentation = 'centered' | 'bottom' | 'fullScreen';

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

@@ -14,7 +14,7 @@
  * once (optimistic) while the app uploads it and reflects the result back
  * through `value`.
  */
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 import type { IconName, SlotIconRef } from '../AppIcon/index.js';

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

@@ -6,7 +6,7 @@
  * 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 React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type RadioDotSize = 'sm' | 'md' | 'lg';
 export interface RadioDotProps {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { RadioValue } from './Radio.js';
 export interface RadioGroupProps {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type 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';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/index.js';
 export interface RepeaterRenderArgs<T> {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type 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';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
 export type SectionHeaderVariant = 'title' | 'caps' | 'sub';
 export interface SectionHeaderProps {

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

@@ -71,6 +71,13 @@ export interface SegmentedControlProps {
      * default under this prop.
      */
     radius?: SegmentedControlRadius;
+    /**
+     * Lines a segment label may take before it is truncated: 1 (default) or 2.
+     * At 2 the segment is taller by one line, so a two-word label ("Second
+     * half") wraps instead of ending in an ellipsis; a one-word label stays on
+     * one line, centred.
+     */
+    labelLines?: 1 | 2;
     /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
     haptic?: HapticType | false;
     accessibilityLabel?: string;

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

@@ -22,7 +22,7 @@
  * circle (50%), or text (small radius, slightly inset height). Set width /
  * height directly for full control.
  */
-import React from 'react';
+import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { RadiusScale } from '../../theme/types.js';
 import type { SkeletonColors } from './SkeletonProvider.js';

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

@@ -13,8 +13,8 @@
  * Skeleton interpolates that value into its own translateX / opacity output.
  * One native-driver loop, no drift, ~zero JS cost.
  */
+import type React from 'react';
 import type { ReactNode } from 'react';
-import React from 'react';
 import { Animated } from 'react-native';
 import type { SkeletonSpeed, SkeletonVariant } from './Skeleton.js';
 export interface SkeletonClockValue {

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

@@ -13,8 +13,8 @@
  * if the user toggles the setting while the app is open the skeletons stop
  * shimmering immediately.
  */
+import type React from 'react';
 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

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

@@ -1,5 +1,5 @@
+import type React from 'react';
 import type { ReactNode } from 'react';
-import React from 'react';
 export interface SkeletonSkipProps {
     children: ReactNode;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
 export type SpinnerSize = 'sm' | 'md' | 'lg';
 export type SpinnerVariant = 'circular' | 'dots';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type 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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { HapticType } from '../../utils/hapticUtils.js';
 /**

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

@@ -14,7 +14,7 @@
  *   <ListItem title="Inbox item" />
  * </Swipeable>
  */
-import React from 'react';
+import type 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';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { TextProps as RNTextProps, Text as RNTextRef, StyleProp, TextStyle } from 'react-native';
 import type { FontWeightKey } from '../../theme/index.js';
 import type { Theme, TypographyScale } from '../../theme/types.js';