@isoline-ui/react-native 0.0.0-stage → 1.0.0

package/dist/components/filter-chip.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { type IconProps } from './icons.tsx';
+/**
+ * Material 3 filter chip — the app's one selectable pill.
+ *
+ * Unselected it reads as an offer, selected it fills with the primary
+ * container. Both states are drawn from the same set of style properties;
+ * only the colour values change. That is load-bearing on Android, and it is
+ * why an unselected chip paints an opaque fill in its own surface's tone
+ * rather than simply leaving the background unset:
+ *
+ * React Native builds a view's background out of layers — fill, border,
+ * ripple — held in a single drawable. Adding a *layer* that wasn't there
+ * before (a fill appearing on select, a border appearing on deselect)
+ * replaces that drawable with a freshly constructed one, and a fresh drawable
+ * starts with empty bounds. A view with `overflow: hidden` clips its children
+ * to those bounds, so for as long as they stay empty the chip paints its fill
+ * and nothing else: the icon and the label are laid out at full size but
+ * never drawn. That is the bug this shape avoids — and `overflow: hidden` is
+ * not optional here, since a contained ripple has to be clipped to the pill
+ * (see `pressable.tsx`).
+ *
+ * So: a fill and a border in *both* states, and selection expressed as
+ * colour. `surface` is what an unselected chip fills with, which has to match
+ * whatever the chip is sitting on for "off" to read as unfilled.
+ *
+ * The same reasoning rules out swapping the leading icon for a checkmark on
+ * select: everything about the chip's structure stays put across a toggle,
+ * and only colour moves. Selection stays legible without colour from the
+ * filled silhouette, the same way it does in `button-group.tsx` — the one
+ * selectable control in the app that never lost its label, and the shape this
+ * chip is now built to match.
+ *
+ * The radius is a real dp value rather than `rounded-full`: Tailwind's full
+ * radius is 9999, and `button-group.tsx` likewise morphs between numbers from
+ * the corner scale.
+ */
+/** The tones a chip can sit on, as the fill an unselected chip paints. */
+declare const SURFACE_FILL: {
+    readonly background: "bg-background";
+    readonly surfaceContainerHigh: "bg-surfaceContainerHigh";
+    /** Bottom sheets and dialogs. */
+    readonly popover: "bg-popover";
+};
+export interface FilterChipProps {
+    label: string;
+    selected: boolean;
+    onPress: () => void;
+    /**
+     * A second, deliberate action on the same chip — removing a saved search,
+     * say. Optional: a chip that only filters has nothing to hide behind a hold.
+     */
+    onLongPress?: () => void;
+    /** Optional leading icon. Drawn in both states, or in neither. */
+    icon?: React.ComponentType<IconProps>;
+    /**
+     * Optional trailing icon — a chevron on a chip that opens a choice rather
+     * than toggling. Drawn in both states, like `icon`.
+     */
+    trailingIcon?: React.ComponentType<IconProps>;
+    /**
+     * The tone the chip is drawn on. An unselected chip fills with it rather
+     * than staying transparent, so its fill is a colour change away from the
+     * selected one rather than a new drawable layer.
+     */
+    surface?: keyof typeof SURFACE_FILL;
+}
+export declare function FilterChip({ label, selected, onPress, onLongPress, icon: Icon, trailingIcon: Trailing, surface, }: FilterChipProps): React.JSX.Element;
+export {};

package/dist/components/floating-action-button.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type MaterialOptions } from '../provider.tsx';
+import type { IconProps } from './icons.tsx';
+export interface FloatingActionButtonProps extends MaterialOptions {
+    icon: React.ComponentType<IconProps>;
+    accessibilityLabel: string;
+    onPress: () => void;
+    label?: string;
+    disabled?: boolean;
+    size?: 56 | 64;
+    style?: StyleProp<ViewStyle>;
+}
+/** A reusable floating action; screen placement and navigation remain consumer-owned. */
+export declare function FloatingActionButton({ icon: Icon, accessibilityLabel, onPress, label, disabled, size, style, material, glassStyle, tintColor, fallbackColor, interactive, }: FloatingActionButtonProps): React.JSX.Element;

package/dist/components/icon-button.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { type GestureResponderEvent, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import { type MaterialOptions } from '../provider.tsx';
+export interface IconButtonProps extends MaterialOptions {
+    icon: React.ComponentType<{
+        size?: number;
+        color?: string;
+        fill?: string;
+    }>;
+    /**
+     * Receives the press event, for a button nested inside a pressable row that
+     * has to stop the row from seeing the same tap.
+     */
+    onPress: (event: GestureResponderEvent) => void;
+    /** Touch target diameter in dp; also sets the ripple's radius. */
+    size?: number;
+    iconSize?: number;
+    /** Defaults to `onSurfaceVariant`. */
+    color?: string;
+    fill?: string;
+    accessibilityLabel?: string;
+    hitSlop?: PressableProps['hitSlop'];
+    className?: string;
+    /** For a filled/elevated variant — plain RN styles, since `elevation` can't be a class. */
+    style?: StyleProp<ViewStyle>;
+    disabled?: boolean;
+}
+/**
+ * The one size every icon button in a screen's header uses: a full 48dp
+ * target around a 22dp glyph, so a back arrow, a star and a sync toggle read
+ * as the same kind of control from one screen to the next. Spread it in —
+ * `<IconButton {...HEADER_ICON_BUTTON} … />` — rather than repeating the
+ * numbers, which is how they drifted apart before.
+ */
+export declare const HEADER_ICON_BUTTON: {
+    readonly size: 48;
+    readonly iconSize: 22;
+};
+/** A circular icon-only pressable with the app's standard borderless ripple. */
+export declare function IconButton({ icon: Icon, onPress, size, iconSize, color, fill, accessibilityLabel, hitSlop, className, style, disabled, material, glassStyle, tintColor, fallbackColor, interactive, }: IconButtonProps): React.JSX.Element;

package/dist/components/icons.d.ts

@@ -0,0 +1,18 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface IconProps {
+    size?: number;
+    color?: string;
+    fill?: string;
+    ruleColor?: string;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const ArrowLeft: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const Check: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const ChevronDown: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const Search: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const X: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const ChevronUp: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const ChevronRight: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const Eye: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const EyeOff: ({ size, color, style }: IconProps) => import("react").JSX.Element;
+export declare const Plus: ({ size, color, style }: IconProps) => import("react").JSX.Element;

package/dist/components/input.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+export type InputProps = React.ComponentProps<typeof TextInput> & {
+    label?: string;
+    /** Shown below the field in destructive color. */
+    error?: string | null;
+    hint?: string;
+};
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<React.ElementRef<typeof TextInput>>>;

package/dist/components/keyboard-inset-view.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type ViewProps } from 'react-native';
+/**
+ * A view that gives up the part of the screen the on-screen keyboard covers.
+ *
+ * Edge-to-edge (the default since Expo SDK 54) stops Android's `adjustResize`
+ * from shrinking the window, and `KeyboardAvoidingView` cannot be relied on to
+ * take over: its `height` mode measures the keyboard against a frame that no
+ * longer ends where the keyboard begins, and leaves the layout full height.
+ * A scroll view inside it then ends behind the keyboard, so its lower fields
+ * can neither be seen nor scrolled to. Padding by the measured keyboard height
+ * shrinks the scroll view's viewport instead, which also lets Android scroll a
+ * focused field into view.
+ */
+export declare function KeyboardInsetView({ style, ...props }: ViewProps): React.JSX.Element;

package/dist/components/list-controls.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { type ScrollViewProps } from 'react-native';
+import type { MaterialOptions } from '../provider.tsx';
+export interface SelectionHeaderProps {
+    count: number;
+    countLabel: string;
+    allSelected: boolean;
+    onClear: () => void;
+    onToggleAll: () => void;
+    clearLabel: string;
+    selectAllLabel: string;
+    deselectAllLabel: string;
+}
+export declare function SelectionHeader({ count, countLabel, allSelected, onClear, onToggleAll, clearLabel, selectAllLabel, deselectAllLabel, }: SelectionHeaderProps): React.JSX.Element;
+export interface ListSectionHeaderProps {
+    title: string;
+    first?: boolean;
+    trailing?: React.ReactNode;
+}
+export declare function ListSectionHeader({ title, first, trailing }: ListSectionHeaderProps): React.JSX.Element;
+export interface JumpToTopPillProps extends MaterialOptions {
+    label: string;
+    onPress: () => void;
+    count?: number;
+    accessibilityLabel?: string;
+}
+export declare function JumpToTopPill({ label, onPress, count, accessibilityLabel, ...materialOptions }: JumpToTopPillProps): React.JSX.Element;
+export interface SettingsScreenLayoutProps {
+    title: string;
+    caption?: string;
+    onBack: () => void;
+    backLabel: string;
+    children: React.ReactNode;
+    overlay?: React.ReactNode;
+    scrollProps?: Omit<ScrollViewProps, 'children'>;
+}
+/** Screen geometry without a router dependency. Overlays stay outside the scrolling content. */
+export declare function SettingsScreenLayout({ title, caption, onBack, backLabel, children, overlay, scrollProps, }: SettingsScreenLayoutProps): React.JSX.Element;

package/dist/components/loading-indicator.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface LoadingIndicatorProps {
+    size?: number;
+    color?: string;
+    /** Draws the M3 "contained" variant — the shape inside a tonal circle. */
+    contained?: boolean;
+    className?: string;
+}
+export declare function LoadingIndicator({ size, color, contained, className, }: LoadingIndicatorProps): React.JSX.Element;

package/dist/components/menu-sheet.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { IconProps } from './icons.tsx';
+import { type MaterialOptions } from '../provider.tsx';
+export interface MenuSheetItem {
+    id: string;
+    icon: React.ComponentType<IconProps>;
+    label: string;
+    onPress: () => void;
+    /** Overrides the icon colour, for a state like "starred". */
+    color?: string;
+    /** Filled icons read as "on" for toggles. */
+    fill?: string;
+}
+export interface MenuSheetProps extends MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    title: string;
+    /** A line under the title saying what the actions would act on. */
+    subject?: string;
+    items: MenuSheetItem[];
+}
+/**
+ * A sheet of actions, each with its symbol and its name.
+ *
+ * The overflow half of a toolbar: what does not fit on the pill — or what an
+ * icon on its own would not explain — is listed here instead, where there is
+ * room for the word that says what it does. Rows are the same size and shape
+ * as the pickers' (`SnoozeSheet`, `MoveSheet`), so an action list and a value
+ * list do not read as two different kinds of sheet.
+ */
+export declare function MenuSheet({ visible, onClose, title, subject, items, ...materialOptions }: MenuSheetProps): React.JSX.Element;
+/** A menu sheet's rows on their own, for a sheet that shows more above its actions. */
+export declare function MenuSheetRows({ items, onClose, }: {
+    items: MenuSheetItem[];
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/components/panel-sheet.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface PanelSheetProps extends MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+export declare function PanelSheet(props: PanelSheetProps): React.JSX.Element;

package/dist/components/password-visibility.d.ts

@@ -0,0 +1,5 @@
+/** Shared affordance for both input styles; credential policy remains caller-owned. */
+export declare function PasswordVisibility({ revealed, onPress, }: {
+    revealed: boolean;
+    onPress: () => void;
+}): import("react").JSX.Element;

package/dist/components/popover-layout.d.ts

@@ -0,0 +1,25 @@
+export interface AnchorRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PopoverViewport {
+    width: number;
+    height: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+/** Clamp and flip an anchored surface without drawing actions outside the usable window. */
+export declare function placePopover(anchor: AnchorRect, size: {
+    width: number;
+    height: number;
+}, viewport: PopoverViewport, placement?: 'top' | 'bottom', gap?: number): {
+    left: number;
+    top: number;
+    width: number;
+    maxHeight: number;
+    placement: string;
+};

package/dist/components/popover.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { type MaterialOptions } from '../provider.tsx';
+import { type AnchorRect } from './popover-layout.ts';
+export type { AnchorRect } from './popover-layout.ts';
+export type PopoverAnchorRef = React.RefObject<React.ComponentRef<typeof View> | null>;
+export interface PopoverProps extends MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    anchorRef?: PopoverAnchorRef;
+    anchor?: AnchorRect;
+    placement?: 'top' | 'bottom';
+    width?: number;
+    accessibilityLabel: string;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onShow?: () => void;
+}
+/** Controlled anchored surface. Native Modal provides back dismissal; web adds focus trapping/Escape. */
+export declare function Popover({ visible, onClose, anchorRef, anchor, placement, width, accessibilityLabel, children, style, onShow, material, glassStyle, tintColor, fallbackColor, interactive, }: PopoverProps): React.JSX.Element;

package/dist/components/pressable.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Pressable as RNPressable, type PressableProps } from 'react-native';
+import { type AnimatedProps } from 'react-native-reanimated';
+/**
+ * Shared touch feedback: contained ripples on Android, a pressed opacity on
+ * iOS. Preserve the caller's style callback, handlers and animated styles.
+ */
+type PressableRef = React.ElementRef<typeof RNPressable>;
+export declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<PressableRef>>;
+/** For a Pressable whose shape or radius is driven by a Reanimated style. */
+export declare const AnimatedPressable: React.ComponentType<Omit<AnimatedProps<PressableProps>, 'ref'> & React.RefAttributes<PressableRef>>;
+export {};

package/dist/components/radio-navigation.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Pressable } from './pressable.tsx';
+/** Native accessibility supplies radio actions; web adds roving focus and selection. */
+export declare function useRadioNavigation(items: {
+    id: string;
+    disabled?: boolean;
+}[], value: string | null, onChange: (id: string) => void): (id: string) => {
+    onKeyDown?: ((event: Parameters<NonNullable<React.ComponentProps<typeof Pressable>["onKeyDown"]>>[0]) => void) | undefined;
+    ref: (node: React.ComponentRef<typeof Pressable> | null) => void;
+    tabIndex: 0 | -1;
+};

package/dist/components/refresh-control.d.ts

@@ -0,0 +1,16 @@
+import { type RefreshControlProps as RNRefreshControlProps } from 'react-native';
+export type RefreshControlProps = RNRefreshControlProps;
+/**
+ * RN's `RefreshControl`, pre-colored with the app's role tokens for the
+ * current scheme.
+ *
+ * Every other prop is forwarded, and that is load-bearing rather than
+ * politeness. On Android a `ScrollView` does not render its `refreshControl`
+ * beside the list: it clones the element with the scroll view itself as
+ * `children` and the list's layout style, and renders that clone as the
+ * outer view. A wrapper that accepts only `refreshing` and `onRefresh` drops
+ * both — which takes the entire list, empty state and footer included, out of
+ * the tree and leaves a blank screen under the header. Keep this a
+ * pass-through; anything it swallows, the list loses.
+ */
+export declare function RefreshControl({ tintColor, colors, progressBackgroundColor, ...rest }: RefreshControlProps): import("react").JSX.Element;

package/dist/components/row-gap.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The space a card list leaves between two rows.
+ *
+ * Every list that renders rows as separate rounded cards passes this as its
+ * `ItemSeparatorComponent`, so the rhythm is one value rather than a number
+ * repeated per screen. Taller cards that need to breathe more — the
+ * Screener's — space themselves.
+ */
+export declare function RowGap(): import("react").JSX.Element;

package/dist/components/search-field.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface SearchFieldProps extends MaterialOptions {
+    value: string;
+    onChangeText: (value: string) => void;
+    placeholder: string;
+    accessibilityLabel: string;
+    /** Label for the clear button, which only appears once something is typed. */
+    clearAccessibilityLabel: string;
+    /** Opens the keyboard on mount — for a screen whose only job is this field. */
+    autoFocus?: boolean;
+    className?: string;
+}
+/**
+ * The app's filter-as-you-type field: a pill with a leading magnifier and a
+ * clear button that appears only once there is something to clear.
+ *
+ * Deliberately not built on `Input`, which is the form control — a labelled
+ * box with room underneath for an error. A filter box has no label, no
+ * validation and no submit; it just narrows the list under it.
+ */
+export declare function SearchField({ value, onChangeText, placeholder, accessibilityLabel, clearAccessibilityLabel, autoFocus, className, material, glassStyle, tintColor, fallbackColor, interactive, }: SearchFieldProps): React.JSX.Element;

package/dist/components/select-field.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface SelectOption<T extends string> {
+    id: T;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectFieldProps<T extends string> extends MaterialOptions {
+    value: T;
+    options: SelectOption<T>[];
+    onChange: (value: T) => void;
+    accessibilityLabel: string;
+    menuMaterial?: MaterialOptions['material'];
+    disabled?: boolean;
+}
+export declare function SelectField<T extends string>({ value, options, onChange, accessibilityLabel, disabled, material, menuMaterial, glassStyle, tintColor, fallbackColor, interactive, }: SelectFieldProps<T>): React.JSX.Element;

package/dist/components/settings-list.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { type IconProps } from './icons.tsx';
+import { type SelectOption } from './select-field.tsx';
+import { type MaterialOptions } from '../provider.tsx';
+/**
+ * The pieces every settings screen is built from.
+ *
+ * Settings used to be one screen that spelled out each card, row, switch and
+ * chevron inline, which is why the same twelve lines of markup appeared a
+ * dozen times over and drifted apart as they were edited. Splitting settings
+ * across several screens would have multiplied that, so the row shapes live
+ * here instead and a screen only says what its settings *are*.
+ */
+export type SettingsIcon = React.ComponentType<IconProps>;
+/**
+ * Corner radii for one row of a connected group.
+ *
+ * M3 Expressive draws a settings group as separate cards that still read as
+ * one object: the group's outer corners stay large, and every corner facing a
+ * neighbour tightens to the small step.
+ */
+export declare function groupRounding(index: number, count: number): string;
+export declare function SettingsSection({ title, children, }: {
+    title?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * A run of rows drawn as one connected card group.
+ *
+ * Takes the rows as children rather than as data so a screen can drop one on a
+ * condition (`{Platform.OS === 'android' ? <Row/> : null}`) and still get the
+ * rounding right — a falsy child is discarded here, before the corners are
+ * worked out, so a hidden row never leaves a flattened corner behind.
+ */
+export declare function SettingsGroup({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export interface SettingsNavRowProps {
+    icon?: SettingsIcon;
+    /** Custom leading content in the icon's place — an account's color dot. */
+    leading?: React.ReactNode;
+    label: string;
+    description?: string;
+    /** The current choice, shown at the row's trailing edge. */
+    value?: string;
+    onPress: () => void;
+    accessibilityLabel?: string;
+    /** For a row that removes something: red label, and no chevron to follow. */
+    destructive?: boolean;
+}
+/** A row that opens something else — another screen, or a picker sheet. */
+export declare function SettingsNavRow({ icon, leading, label, description, value, onPress, accessibilityLabel, destructive, }: SettingsNavRowProps): React.JSX.Element;
+export interface SettingsChoiceRowProps {
+    /** Custom leading content — a calendar's color dot. */
+    leading?: React.ReactNode;
+    label: string;
+    description?: string;
+    selected: boolean;
+    onPress: () => void;
+    accessibilityLabel?: string;
+}
+/**
+ * One option of a choice spelled out as rows rather than a menu, for options
+ * that need a second line to tell apart: two calendars both called "Personal".
+ */
+export declare function SettingsChoiceRow({ leading, label, description, selected, onPress, accessibilityLabel, }: SettingsChoiceRowProps): React.JSX.Element;
+export interface SettingsSwitchRowProps {
+    icon?: SettingsIcon;
+    /** Custom leading content in the icon's place — a calendar's color dot. */
+    leading?: React.ReactNode;
+    label: string;
+    description?: string;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+}
+export declare function SettingsSwitchRow({ icon, leading, label, description, value, onValueChange, disabled, accessibilityLabel, }: SettingsSwitchRowProps): React.JSX.Element;
+export interface SettingsSelectRowProps<T extends string> extends MaterialOptions {
+    menuMaterial?: MaterialOptions['material'];
+    disabled?: boolean;
+    icon?: SettingsIcon;
+    label: string;
+    description?: string;
+    value: T;
+    options: SelectOption<T>[];
+    onChange: (value: T) => void;
+    accessibilityLabel?: string;
+}
+export declare function SettingsSelectRow<T extends string>({ icon, label, description, value, options, onChange, accessibilityLabel, ...materialOptions }: SettingsSelectRowProps<T>): React.JSX.Element;
+/**
+ * A card holding something that is not a row — the theme picker's button
+ * group, the accent swatches. Matches a group of one so custom content sits on
+ * the same surface at the same inset as the rows above and below it.
+ */
+export declare function SettingsCard({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/settings-row.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { type IconProps } from './icons.tsx';
+/** A row in a settings card: a symbol in its own tinted circle, a label and what it is set to. */
+export declare function SettingsRow({ icon: Icon, label, description, onPress, value, onValueChange, first, }: {
+    icon?: React.ComponentType<IconProps>;
+    label: string;
+    description?: string;
+    onPress?: () => void;
+    /** A switch instead of a chevron. */
+    value?: boolean;
+    onValueChange?: (value: boolean) => void;
+    first?: boolean;
+}): React.JSX.Element;

package/dist/components/sheet-frame.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { type ScrollViewProps, type StyleProp, type ViewStyle } from 'react-native';
+import { type AnimatedStyle } from 'react-native-reanimated';
+import type { Sheet } from './sheet-transition.ts';
+import { type MaterialOptions } from '../provider.tsx';
+/**
+ * The scrim, the panel and its handle — everything `BottomSheet` and
+ * `PanelSheet` share, so the two look and move as one kind of sheet. Each
+ * places it differently: one in a `Modal`, one inside the screen, lifted by
+ * the keyboard (`lift`).
+ */
+export declare function SheetFrame({ sheet, visible, onClose, lift, panelStyle, children, dragFrom, material, glassStyle, tintColor, fallbackColor, interactive, }: {
+    dragFrom?: 'handle' | 'panel';
+    sheet: Sheet;
+    visible: boolean;
+    onClose: () => void;
+    lift?: StyleProp<AnimatedStyle<ViewStyle>>;
+    panelStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
+    children: React.ReactNode;
+} & MaterialOptions): React.JSX.Element;
+/**
+ * A vertical list inside a sheet. It scrolls first and lets the sheet's pull
+ * take over at its top, as Android's own sheets do; a plain `ScrollView`
+ * would fight the pull for every vertical swipe. Sideways rows of chips can
+ * stay plain `ScrollView`s: the pull gives way to a sideways swipe.
+ */
+export declare function SheetScrollView({ onScroll, onLayout, onContentSizeChange, ...props }: ScrollViewProps): React.JSX.Element;

package/dist/components/sheet-lifecycle.d.ts

@@ -0,0 +1,36 @@
+import { type ViewStyle, type LayoutChangeEvent } from 'react-native';
+import { Gesture } from 'react-native-gesture-handler';
+import { type SharedValue, type AnimatedStyle } from 'react-native-reanimated';
+import { type SheetScroll } from '../sheet-physics.ts';
+/** What a `SheetScrollView` needs from the sheet it scrolls in. */
+export interface SheetScrollContextValue {
+    pull: ReturnType<typeof Gesture.Pan>;
+    scrolls: SharedValue<Record<string, SheetScroll>>;
+}
+/**
+ * A bottom sheet's whole life: in, under the finger, and out again.
+ *
+ * Driven by shared values rather than Reanimated's `entering` layout
+ * animations, and that is the point. On Android a layout animation on a view
+ * inside a `Modal` leaves the view's *layout* where the animation started even
+ * though it is drawn where the animation ended, so presses inside the panel
+ * are hit-tested against whatever is behind it — here the scrim, whose one job
+ * is to close the panel. A picker built that way looks like it snaps back the
+ * instant an option is tapped (software-mansion/react-native-reanimated#4422).
+ * An animated transform moves the native view, and Android hit-tests against
+ * where the view actually is.
+ *
+ * The sheet stays `mounted` after `visible` turns false, until the panel has
+ * slid out: however it was closed — the scrim, back, a row that acts, a pull —
+ * it leaves the way it came. The scrim is not on a clock of its own; it is
+ * worked out from where the panel is, so the two always move as one.
+ */
+export interface Sheet {
+    mounted: boolean;
+    scrimStyle: AnimatedStyle<ViewStyle>;
+    panelStyle: AnimatedStyle<ViewStyle>;
+    onPanelLayout: (event: LayoutChangeEvent) => void;
+    pull: ReturnType<typeof Gesture.Pan>;
+    scrollContext: SheetScrollContextValue;
+}
+export declare function useSheet(visible: boolean, onClose: () => void): Sheet;

package/dist/components/sheet-transition.d.ts

@@ -0,0 +1,36 @@
+import { type LayoutChangeEvent } from 'react-native';
+import { type AnimatedStyle, type SharedValue } from 'react-native-reanimated';
+/**
+ * The open transition for a panel presented inside a `Modal`: the scrim dims,
+ * and the panel springs up from the edge it is anchored to.
+ *
+ * Driven by shared values rather than Reanimated's `entering` layout
+ * animations, and that is the entire point of this hook. On Android a layout
+ * animation on a view inside a `Modal` leaves the view's *layout* where the
+ * animation started even though the view is drawn where the animation ended,
+ * so presses inside the panel are hit-tested against whatever is behind it —
+ * here the scrim, whose one job is to close the panel. A picker built that way
+ * looks like it snaps back the instant an option is tapped: the tap closed the
+ * sheet and never reached the row it landed on. Only Android is affected, and
+ * only inside a `Modal`, which is why it survived review twice
+ * (software-mansion/react-native-reanimated#4422).
+ *
+ * An animated transform has no such problem: it moves the native view, and
+ * Android hit-tests against where the view actually is.
+ */
+export interface SheetTransition {
+    scrimStyle: AnimatedStyle<{
+        opacity: number;
+    }>;
+    panelStyle: AnimatedStyle<{
+        transform: {
+            translateY: number;
+        }[];
+    }>;
+    onPanelLayout: (event: LayoutChangeEvent) => void;
+    drag: SharedValue<number>;
+    height: SharedValue<number>;
+    reducedMotion: boolean;
+}
+export declare function useSheetTransition(visible: boolean): SheetTransition;
+export { useSheet, type Sheet, type SheetScrollContextValue } from './sheet-lifecycle.ts';