@muja-ui/native 0.3.0 → 0.4.0

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { FlexStyle, ViewStyle, ViewProps, StyleProp, View, TextStyle, TextProps as TextProps$1, Text as Text$1, PressableProps, TextInputProps, TextInput, DimensionValue } from 'react-native';
-import { Theme, IconDefinition, Variant, Size, ColorMode, ResolvedColorMode } from '@muja-ui/core';
+import { Theme, IconDefinition, Variant, Size, ColorMode, ResolvedColorMode, ThemeOverride } from '@muja-ui/core';
 export { ColorMode, IconDefinition, ResolvedColorMode, Size, Status, Theme, ThemeOverride, Variant, createTheme, darkTheme, lightTheme, registerIcons } from '@muja-ui/core';
 import { SpaceToken, SemanticColorToken, BorderWidthToken, RadiusToken, ShadowToken, ZIndexToken, ShadowValue, FontSizeToken, FontWeightToken, FontFamilyToken, LineHeightToken, LetterSpacingToken } from '@muja-ui/tokens';
 
@@ -144,7 +144,9 @@ type TextProps = TextOwnProps & StyleProps & Omit<TextProps$1, 'style'> & {
 /**
  * Typography primitive. Color always comes from a semantic token, never a raw
  * value. React Native needs an absolute `lineHeight`, so the unitless token
- * multiplier is resolved against the font size here.
+ * multiplier is resolved against the font size here, and the theme's CSS font
+ * stack is reduced to the one family the platform can load (see
+ * `nativeFontFamily`) — the system font unless the theme names a brand face.
  *
  * ```tsx
  * <Text size="sm" color="textSecondary" truncate>…</Text>
@@ -161,7 +163,8 @@ interface HeadingProps extends Omit<TextProps, 'accessibilityRole'> {
 }
 /**
  * A heading with the correct accessibility role. Sizes follow the level unless
- * `size` overrides them.
+ * `size` overrides them. On iOS the two top levels are bold, matching Large
+ * Title / Title 1; the rest are semibold like Headline.
  *
  * ```tsx
  * <Heading level={2}>Upcoming events</Heading>
@@ -213,7 +216,9 @@ interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
 }
 /**
  * Pressable button. Same variant/size vocabulary as `@muja-ui/web`'s Button;
- * every color resolves from a semantic theme token.
+ * every color resolves from a semantic theme token. Heights are minimums so
+ * the label can grow with Dynamic Type; a `sm` button widens its touch area
+ * to the 44pt floor.
  *
  * ```tsx
  * <Button variant="primary" size="lg" loading onPress={save}>Save</Button>
@@ -257,6 +262,11 @@ interface InputProps extends Omit<TextInputProps, 'style' | 'editable'> {
  * Single-line text field. Focus and invalid states are drawn on the wrapper so
  * adornments sit inside the border.
  *
+ * On iOS the field is a filled, borderless rounded rect like a UIKit search
+ * field or grouped-list cell; a stroke appears only for focus and errors. The
+ * keyboard follows the color mode and shows the native clear button while
+ * editing (unless a `rightElement` occupies that spot).
+ *
  * ```tsx
  * <Input size="md" placeholder="Email" invalid={!!error} />
  * ```
@@ -270,7 +280,7 @@ interface TextareaProps extends Omit<TextInputProps, 'style' | 'editable' | 'mul
     rows?: number;
     style?: StyleProp<TextStyle>;
 }
-/** Multi-line text field. Same states as `Input`. */
+/** Multi-line text field. Same states — and the same iOS filled look — as `Input`. */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
 
 interface LabelProps extends TextProps {
@@ -321,7 +331,9 @@ interface CheckboxProps {
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Checkbox with an optional inline label.
+ * Checkbox with an optional inline label. iOS has no square checkbox — the
+ * idiom (Reminders, Mail's edit mode) is a circle that fills with a tick — so
+ * the box is round there and square elsewhere.
  *
  * ```tsx
  * <Checkbox checked={agreed} onChange={setAgreed}>I agree</Checkbox>
@@ -339,9 +351,12 @@ interface SwitchProps {
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Toggle switch. Built from primitives rather than RN's `Switch` so it follows
- * the theme on both platforms (RN's own switch only takes raw colors and
- * renders with platform-specific metrics).
+ * Toggle switch.
+ *
+ * On iOS this is the real `UISwitch` (through React Native's `Switch`), tinted
+ * with the theme's primary colour — native motion, haptics and VoiceOver
+ * semantics for free, as the HIG asks. Elsewhere it is drawn from primitives so
+ * it follows the theme's metrics on both platforms.
  *
  * ```tsx
  * <Switch checked={enabled} onChange={setEnabled}>Notifications</Switch>
@@ -570,7 +585,8 @@ interface CardProps {
 }
 /**
  * Surface container. Compose with `CardHeader`, `CardTitle`,
- * `CardDescription`, `CardContent` and `CardFooter`.
+ * `CardDescription`, `CardContent` and `CardFooter`. On iOS the `outline`
+ * stroke is a hairline, the way grouped cells are separated.
  *
  * ```tsx
  * <Card variant="elevated" onPress={open}>
@@ -672,7 +688,8 @@ interface ListRowProps {
 }
 /**
  * Settings/list row: leading slot, two lines of text, trailing slot. Pressable
- * rows get a chevron and a button role.
+ * rows get a chevron and a button role. On iOS the row follows a table cell:
+ * 44pt minimum, body-size title, secondary-label subtitle, bold chevron.
  *
  * ```tsx
  * <ListRow title="Notifications" subtitle="Push and email" onPress={open} />
@@ -720,6 +737,9 @@ interface TabsProps<T extends string = string> {
  * because native screens usually swap whole lists rather than mounting all
  * panels at once.
  *
+ * On iOS `segmented` is drawn as a `UISegmentedControl`: a 2pt inset track,
+ * the selected segment lifted on a white pill with a soft shadow, 13pt labels.
+ *
  * ```tsx
  * <Tabs items={tabs} value={tab} onChange={setTab} variant="segmented" />
  * ```
@@ -877,6 +897,7 @@ interface ModalBodyProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function ModalBody({ children, scrollable, style }: ModalBodyProps): react.JSX.Element;
+/** Action row. On iOS a hairline separates it from the body, as in an alert. */
 declare function ModalFooter({ children, style, }: {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -898,8 +919,9 @@ interface BottomSheetProps {
 }
 /**
  * Sheet that slides up from the bottom edge, with a grab handle and
- * drag-to-dismiss. The bottom inset is padded so content clears the home
- * indicator.
+ * drag-to-dismiss. It arrives on a spring with a fading backdrop, the way a
+ * UIKit sheet is presented, and the bottom inset is padded so content clears
+ * the home indicator. On iOS the grabber matches the system's 36×5.
  *
  * ```tsx
  * <BottomSheet open={open} onClose={close} title="Pick a room">…</BottomSheet>
@@ -951,6 +973,11 @@ interface ActionSheetProps {
  * package's `DropdownMenu`. Anchored dropdowns don't belong on a phone, so the
  * same intent surfaces as a sheet.
  *
+ * On iOS it takes the `UIAlertController` action-sheet form: a floating inset
+ * group of centred, tint-coloured rows separated by hairlines, destructive
+ * rows in red, and Cancel as its own bold card underneath. Elsewhere it is a
+ * list inside `BottomSheet`.
+ *
  * ```tsx
  * <ActionSheet open={open} onClose={close} actions={[
  *   { label: 'Share ticket', onPress: share },
@@ -958,7 +985,7 @@ interface ActionSheetProps {
  * ]} />
  * ```
  */
-declare function ActionSheet({ open, onClose, title, description, actions, cancelLabel, style, }: ActionSheetProps): react.JSX.Element;
+declare function ActionSheet(props: ActionSheetProps): react.JSX.Element;
 
 interface ThemeContextValue {
     /** The active theme for the resolved color mode. */
@@ -984,11 +1011,18 @@ interface ThemeProviderProps {
      */
     colorMode?: ColorMode;
     onColorModeChange?: (mode: ColorMode) => void;
+    /**
+     * Lay the platform's own metrics over the theme — on iOS the HIG type scale
+     * (Body 17, Footnote 13…) and UIKit radii. Colors are never touched. Defaults
+     * to true; turn off to render the shared tokens verbatim on every platform.
+     */
+    platformAdaptive?: boolean;
     children: ReactNode;
 }
 /**
  * Provides the resolved theme to every native component. `'system'` follows the
- * OS appearance through React Native's `useColorScheme()`.
+ * OS appearance through React Native's `useColorScheme()`. On iOS the theme is
+ * rendered through Apple HIG metrics (see `adaptThemeToPlatform`).
  *
  * ```tsx
  * <ThemeProvider theme={sduLightTheme} darkTheme={sduDarkTheme}>
@@ -996,7 +1030,7 @@ interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-declare function ThemeProvider({ theme, darkTheme, defaultColorMode, colorMode: colorModeProp, onColorModeChange, children, }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ theme, darkTheme, defaultColorMode, colorMode: colorModeProp, onColorModeChange, platformAdaptive, children, }: ThemeProviderProps): react.JSX.Element;
 /** The active theme object (already resolved for the current color mode). */
 declare function useTheme(): Theme;
 /** Color mode state and controls. */
@@ -1018,9 +1052,24 @@ interface VariantColors {
  * Maps a `Variant` onto semantic theme colors. Web does this in CSS via
  * `data-variant` selectors; native resolves it here so both platforms answer
  * `variant="accent"` with the same roles.
+ *
+ * On iOS the two chrome-less variants follow UIKit's button configurations:
+ * `outline` renders as *tinted* (a soft primary fill, no stroke — iOS has no
+ * stroked buttons) and `ghost` as *plain* (tint-coloured label).
  */
 declare function variantColors(variant: Variant, theme: Theme): VariantColors;
-/** Control geometry per size — shared by Button, Input, Select and Textarea. */
+/**
+ * Background and opacity for a button-like pressable in its current state.
+ * iOS dims the whole control (UIKit's highlight); Android swaps to the pressed
+ * colour. Rows and cells are different — they highlight with a background on
+ * both platforms, so they don't use this.
+ */
+declare function pressFeedback(pressed: boolean, colors: VariantColors): ViewStyle;
+/**
+ * Control geometry per size — shared by Button, Input, Select and Textarea.
+ * `height` is a minimum: controls grow with Dynamic Type / font scaling
+ * instead of clipping their label.
+ */
 interface SizeMetrics {
     height: number;
     paddingHorizontal: number;
@@ -1030,6 +1079,49 @@ interface SizeMetrics {
 }
 declare function sizeMetrics(size: Size, theme: Theme): SizeMetrics;
 
+/**
+ * Read at call time (not module load) so a test can flip the stubbed
+ * `Platform.OS` and exercise both branches of a component.
+ */
+declare function isIOS(): boolean;
+/**
+ * Apple HIG metrics layered over the shared tokens on iOS.
+ *
+ * - Type scale follows the Dynamic Type default sizes: `xs` Footnote 13,
+ *   `sm` Subheadline 15, `md` Body 17, `lg` Title 3 20, `xl` Title 2 22,
+ *   `2xl` Title 1 28, `3xl` Large Title 34.
+ * - Radii follow UIKit: 10 for controls and grouped cells, 12 for large
+ *   buttons and cards, 14 for alerts, 20 for sheets.
+ *
+ * Colors are untouched — brand and dark mode stay the theme's business.
+ */
+declare const iosThemeOverride: ThemeOverride;
+/**
+ * Returns the theme the current platform should render: on iOS the HIG
+ * metrics above are merged in, elsewhere the theme is returned as-is.
+ * `ThemeProvider` applies this automatically (`platformAdaptive`).
+ */
+declare function adaptThemeToPlatform(theme: Theme): Theme;
+
+/**
+ * Turns a CSS font stack from the theme into the single family React Native
+ * wants. The tokens are written as web stacks
+ * (`"'Gilroy', -apple-system, BlinkMacSystemFont, …"`); passing that string
+ * to `fontFamily` on iOS logs "Unrecognized font family" and silently falls
+ * back, so the first usable entry is picked here instead:
+ *
+ * - a system keyword (`-apple-system`, `system-ui`, `sans-serif`, `System`…)
+ *   resolves to `undefined` — SF Pro on iOS, Roboto on Android;
+ * - `ui-monospace` / `ui-serif` resolve to the platform's built-in face;
+ * - web-only names (`Segoe UI`, `SF Mono`…) are skipped;
+ * - anything else (`Gilroy`) is returned verbatim for the app to have loaded.
+ *
+ * ```ts
+ * nativeFontFamily(theme.typography.fontFamily.sans) // → undefined on a stock theme
+ * ```
+ */
+declare function nativeFontFamily(stack: string | undefined): string | undefined;
+
 /** Local-time whole-day helpers. The calendar never leaves local time. */
 declare function startOfDay(date: Date): Date;
 declare function startOfMonth(date: Date): Date;
@@ -1044,4 +1136,4 @@ declare function dayKey(date: Date): string;
  */
 declare function monthGrid(month: Date, weekStartsOn: 0 | 1): Date[];
 
-export { Accordion, type AccordionItemData, type AccordionProps, ActionSheet, type ActionSheetAction, type ActionSheetProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Flex, type FlexOwnProps, type FlexProps, FormField, type FormFieldProps, HStack, Heading, type HeadingLevel, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Label, type LabelProps, ListRow, type ListRowProps, Modal, ModalBody, type ModalBodyProps, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Screen, type ScreenProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, type SizeMetrics, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, type StyleProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Text, type TextOwnProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastContextValue, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipProps, type VariantColors, addDays, addMonths, dayKey, isSameDay, monthGrid, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };
+export { Accordion, type AccordionItemData, type AccordionProps, ActionSheet, type ActionSheetAction, type ActionSheetProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Flex, type FlexOwnProps, type FlexProps, FormField, type FormFieldProps, HStack, Heading, type HeadingLevel, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Label, type LabelProps, ListRow, type ListRowProps, Modal, ModalBody, type ModalBodyProps, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Screen, type ScreenProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, type SizeMetrics, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, type StyleProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Text, type TextOwnProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastContextValue, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipProps, type VariantColors, adaptThemeToPlatform, addDays, addMonths, dayKey, iosThemeOverride, isIOS, isSameDay, monthGrid, nativeFontFamily, pressFeedback, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import * as react_native from 'react-native';
 import { FlexStyle, ViewStyle, ViewProps, StyleProp, View, TextStyle, TextProps as TextProps$1, Text as Text$1, PressableProps, TextInputProps, TextInput, DimensionValue } from 'react-native';
-import { Theme, IconDefinition, Variant, Size, ColorMode, ResolvedColorMode } from '@muja-ui/core';
+import { Theme, IconDefinition, Variant, Size, ColorMode, ResolvedColorMode, ThemeOverride } from '@muja-ui/core';
 export { ColorMode, IconDefinition, ResolvedColorMode, Size, Status, Theme, ThemeOverride, Variant, createTheme, darkTheme, lightTheme, registerIcons } from '@muja-ui/core';
 import { SpaceToken, SemanticColorToken, BorderWidthToken, RadiusToken, ShadowToken, ZIndexToken, ShadowValue, FontSizeToken, FontWeightToken, FontFamilyToken, LineHeightToken, LetterSpacingToken } from '@muja-ui/tokens';
 
@@ -144,7 +144,9 @@ type TextProps = TextOwnProps & StyleProps & Omit<TextProps$1, 'style'> & {
 /**
  * Typography primitive. Color always comes from a semantic token, never a raw
  * value. React Native needs an absolute `lineHeight`, so the unitless token
- * multiplier is resolved against the font size here.
+ * multiplier is resolved against the font size here, and the theme's CSS font
+ * stack is reduced to the one family the platform can load (see
+ * `nativeFontFamily`) — the system font unless the theme names a brand face.
  *
  * ```tsx
  * <Text size="sm" color="textSecondary" truncate>…</Text>
@@ -161,7 +163,8 @@ interface HeadingProps extends Omit<TextProps, 'accessibilityRole'> {
 }
 /**
  * A heading with the correct accessibility role. Sizes follow the level unless
- * `size` overrides them.
+ * `size` overrides them. On iOS the two top levels are bold, matching Large
+ * Title / Title 1; the rest are semibold like Headline.
  *
  * ```tsx
  * <Heading level={2}>Upcoming events</Heading>
@@ -213,7 +216,9 @@ interface ButtonProps extends Omit<PressableProps, 'style' | 'children'> {
 }
 /**
  * Pressable button. Same variant/size vocabulary as `@muja-ui/web`'s Button;
- * every color resolves from a semantic theme token.
+ * every color resolves from a semantic theme token. Heights are minimums so
+ * the label can grow with Dynamic Type; a `sm` button widens its touch area
+ * to the 44pt floor.
  *
  * ```tsx
  * <Button variant="primary" size="lg" loading onPress={save}>Save</Button>
@@ -257,6 +262,11 @@ interface InputProps extends Omit<TextInputProps, 'style' | 'editable'> {
  * Single-line text field. Focus and invalid states are drawn on the wrapper so
  * adornments sit inside the border.
  *
+ * On iOS the field is a filled, borderless rounded rect like a UIKit search
+ * field or grouped-list cell; a stroke appears only for focus and errors. The
+ * keyboard follows the color mode and shows the native clear button while
+ * editing (unless a `rightElement` occupies that spot).
+ *
  * ```tsx
  * <Input size="md" placeholder="Email" invalid={!!error} />
  * ```
@@ -270,7 +280,7 @@ interface TextareaProps extends Omit<TextInputProps, 'style' | 'editable' | 'mul
     rows?: number;
     style?: StyleProp<TextStyle>;
 }
-/** Multi-line text field. Same states as `Input`. */
+/** Multi-line text field. Same states — and the same iOS filled look — as `Input`. */
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
 
 interface LabelProps extends TextProps {
@@ -321,7 +331,9 @@ interface CheckboxProps {
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Checkbox with an optional inline label.
+ * Checkbox with an optional inline label. iOS has no square checkbox — the
+ * idiom (Reminders, Mail's edit mode) is a circle that fills with a tick — so
+ * the box is round there and square elsewhere.
  *
  * ```tsx
  * <Checkbox checked={agreed} onChange={setAgreed}>I agree</Checkbox>
@@ -339,9 +351,12 @@ interface SwitchProps {
     style?: StyleProp<ViewStyle>;
 }
 /**
- * Toggle switch. Built from primitives rather than RN's `Switch` so it follows
- * the theme on both platforms (RN's own switch only takes raw colors and
- * renders with platform-specific metrics).
+ * Toggle switch.
+ *
+ * On iOS this is the real `UISwitch` (through React Native's `Switch`), tinted
+ * with the theme's primary colour — native motion, haptics and VoiceOver
+ * semantics for free, as the HIG asks. Elsewhere it is drawn from primitives so
+ * it follows the theme's metrics on both platforms.
  *
  * ```tsx
  * <Switch checked={enabled} onChange={setEnabled}>Notifications</Switch>
@@ -570,7 +585,8 @@ interface CardProps {
 }
 /**
  * Surface container. Compose with `CardHeader`, `CardTitle`,
- * `CardDescription`, `CardContent` and `CardFooter`.
+ * `CardDescription`, `CardContent` and `CardFooter`. On iOS the `outline`
+ * stroke is a hairline, the way grouped cells are separated.
  *
  * ```tsx
  * <Card variant="elevated" onPress={open}>
@@ -672,7 +688,8 @@ interface ListRowProps {
 }
 /**
  * Settings/list row: leading slot, two lines of text, trailing slot. Pressable
- * rows get a chevron and a button role.
+ * rows get a chevron and a button role. On iOS the row follows a table cell:
+ * 44pt minimum, body-size title, secondary-label subtitle, bold chevron.
  *
  * ```tsx
  * <ListRow title="Notifications" subtitle="Push and email" onPress={open} />
@@ -720,6 +737,9 @@ interface TabsProps<T extends string = string> {
  * because native screens usually swap whole lists rather than mounting all
  * panels at once.
  *
+ * On iOS `segmented` is drawn as a `UISegmentedControl`: a 2pt inset track,
+ * the selected segment lifted on a white pill with a soft shadow, 13pt labels.
+ *
  * ```tsx
  * <Tabs items={tabs} value={tab} onChange={setTab} variant="segmented" />
  * ```
@@ -877,6 +897,7 @@ interface ModalBodyProps {
     style?: StyleProp<ViewStyle>;
 }
 declare function ModalBody({ children, scrollable, style }: ModalBodyProps): react.JSX.Element;
+/** Action row. On iOS a hairline separates it from the body, as in an alert. */
 declare function ModalFooter({ children, style, }: {
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
@@ -898,8 +919,9 @@ interface BottomSheetProps {
 }
 /**
  * Sheet that slides up from the bottom edge, with a grab handle and
- * drag-to-dismiss. The bottom inset is padded so content clears the home
- * indicator.
+ * drag-to-dismiss. It arrives on a spring with a fading backdrop, the way a
+ * UIKit sheet is presented, and the bottom inset is padded so content clears
+ * the home indicator. On iOS the grabber matches the system's 36×5.
  *
  * ```tsx
  * <BottomSheet open={open} onClose={close} title="Pick a room">…</BottomSheet>
@@ -951,6 +973,11 @@ interface ActionSheetProps {
  * package's `DropdownMenu`. Anchored dropdowns don't belong on a phone, so the
  * same intent surfaces as a sheet.
  *
+ * On iOS it takes the `UIAlertController` action-sheet form: a floating inset
+ * group of centred, tint-coloured rows separated by hairlines, destructive
+ * rows in red, and Cancel as its own bold card underneath. Elsewhere it is a
+ * list inside `BottomSheet`.
+ *
  * ```tsx
  * <ActionSheet open={open} onClose={close} actions={[
  *   { label: 'Share ticket', onPress: share },
@@ -958,7 +985,7 @@ interface ActionSheetProps {
  * ]} />
  * ```
  */
-declare function ActionSheet({ open, onClose, title, description, actions, cancelLabel, style, }: ActionSheetProps): react.JSX.Element;
+declare function ActionSheet(props: ActionSheetProps): react.JSX.Element;
 
 interface ThemeContextValue {
     /** The active theme for the resolved color mode. */
@@ -984,11 +1011,18 @@ interface ThemeProviderProps {
      */
     colorMode?: ColorMode;
     onColorModeChange?: (mode: ColorMode) => void;
+    /**
+     * Lay the platform's own metrics over the theme — on iOS the HIG type scale
+     * (Body 17, Footnote 13…) and UIKit radii. Colors are never touched. Defaults
+     * to true; turn off to render the shared tokens verbatim on every platform.
+     */
+    platformAdaptive?: boolean;
     children: ReactNode;
 }
 /**
  * Provides the resolved theme to every native component. `'system'` follows the
- * OS appearance through React Native's `useColorScheme()`.
+ * OS appearance through React Native's `useColorScheme()`. On iOS the theme is
+ * rendered through Apple HIG metrics (see `adaptThemeToPlatform`).
  *
  * ```tsx
  * <ThemeProvider theme={sduLightTheme} darkTheme={sduDarkTheme}>
@@ -996,7 +1030,7 @@ interface ThemeProviderProps {
  * </ThemeProvider>
  * ```
  */
-declare function ThemeProvider({ theme, darkTheme, defaultColorMode, colorMode: colorModeProp, onColorModeChange, children, }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ theme, darkTheme, defaultColorMode, colorMode: colorModeProp, onColorModeChange, platformAdaptive, children, }: ThemeProviderProps): react.JSX.Element;
 /** The active theme object (already resolved for the current color mode). */
 declare function useTheme(): Theme;
 /** Color mode state and controls. */
@@ -1018,9 +1052,24 @@ interface VariantColors {
  * Maps a `Variant` onto semantic theme colors. Web does this in CSS via
  * `data-variant` selectors; native resolves it here so both platforms answer
  * `variant="accent"` with the same roles.
+ *
+ * On iOS the two chrome-less variants follow UIKit's button configurations:
+ * `outline` renders as *tinted* (a soft primary fill, no stroke — iOS has no
+ * stroked buttons) and `ghost` as *plain* (tint-coloured label).
  */
 declare function variantColors(variant: Variant, theme: Theme): VariantColors;
-/** Control geometry per size — shared by Button, Input, Select and Textarea. */
+/**
+ * Background and opacity for a button-like pressable in its current state.
+ * iOS dims the whole control (UIKit's highlight); Android swaps to the pressed
+ * colour. Rows and cells are different — they highlight with a background on
+ * both platforms, so they don't use this.
+ */
+declare function pressFeedback(pressed: boolean, colors: VariantColors): ViewStyle;
+/**
+ * Control geometry per size — shared by Button, Input, Select and Textarea.
+ * `height` is a minimum: controls grow with Dynamic Type / font scaling
+ * instead of clipping their label.
+ */
 interface SizeMetrics {
     height: number;
     paddingHorizontal: number;
@@ -1030,6 +1079,49 @@ interface SizeMetrics {
 }
 declare function sizeMetrics(size: Size, theme: Theme): SizeMetrics;
 
+/**
+ * Read at call time (not module load) so a test can flip the stubbed
+ * `Platform.OS` and exercise both branches of a component.
+ */
+declare function isIOS(): boolean;
+/**
+ * Apple HIG metrics layered over the shared tokens on iOS.
+ *
+ * - Type scale follows the Dynamic Type default sizes: `xs` Footnote 13,
+ *   `sm` Subheadline 15, `md` Body 17, `lg` Title 3 20, `xl` Title 2 22,
+ *   `2xl` Title 1 28, `3xl` Large Title 34.
+ * - Radii follow UIKit: 10 for controls and grouped cells, 12 for large
+ *   buttons and cards, 14 for alerts, 20 for sheets.
+ *
+ * Colors are untouched — brand and dark mode stay the theme's business.
+ */
+declare const iosThemeOverride: ThemeOverride;
+/**
+ * Returns the theme the current platform should render: on iOS the HIG
+ * metrics above are merged in, elsewhere the theme is returned as-is.
+ * `ThemeProvider` applies this automatically (`platformAdaptive`).
+ */
+declare function adaptThemeToPlatform(theme: Theme): Theme;
+
+/**
+ * Turns a CSS font stack from the theme into the single family React Native
+ * wants. The tokens are written as web stacks
+ * (`"'Gilroy', -apple-system, BlinkMacSystemFont, …"`); passing that string
+ * to `fontFamily` on iOS logs "Unrecognized font family" and silently falls
+ * back, so the first usable entry is picked here instead:
+ *
+ * - a system keyword (`-apple-system`, `system-ui`, `sans-serif`, `System`…)
+ *   resolves to `undefined` — SF Pro on iOS, Roboto on Android;
+ * - `ui-monospace` / `ui-serif` resolve to the platform's built-in face;
+ * - web-only names (`Segoe UI`, `SF Mono`…) are skipped;
+ * - anything else (`Gilroy`) is returned verbatim for the app to have loaded.
+ *
+ * ```ts
+ * nativeFontFamily(theme.typography.fontFamily.sans) // → undefined on a stock theme
+ * ```
+ */
+declare function nativeFontFamily(stack: string | undefined): string | undefined;
+
 /** Local-time whole-day helpers. The calendar never leaves local time. */
 declare function startOfDay(date: Date): Date;
 declare function startOfMonth(date: Date): Date;
@@ -1044,4 +1136,4 @@ declare function dayKey(date: Date): string;
  */
 declare function monthGrid(month: Date, weekStartsOn: 0 | 1): Date[];
 
-export { Accordion, type AccordionItemData, type AccordionProps, ActionSheet, type ActionSheetAction, type ActionSheetProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Flex, type FlexOwnProps, type FlexProps, FormField, type FormFieldProps, HStack, Heading, type HeadingLevel, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Label, type LabelProps, ListRow, type ListRowProps, Modal, ModalBody, type ModalBodyProps, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Screen, type ScreenProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, type SizeMetrics, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, type StyleProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Text, type TextOwnProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastContextValue, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipProps, type VariantColors, addDays, addMonths, dayKey, isSameDay, monthGrid, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };
+export { Accordion, type AccordionItemData, type AccordionProps, ActionSheet, type ActionSheetAction, type ActionSheetProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, Box, type BoxProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Flex, type FlexOwnProps, type FlexProps, FormField, type FormFieldProps, HStack, Heading, type HeadingLevel, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Label, type LabelProps, ListRow, type ListRowProps, Modal, ModalBody, type ModalBodyProps, ModalFooter, ModalHeader, type ModalHeaderProps, type ModalProps, ModalTitle, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Screen, type ScreenProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, type SizeMetrics, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, type StyleProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Text, type TextOwnProps, type TextProps, Textarea, type TextareaProps, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, type ToastContextValue, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipProps, type VariantColors, adaptThemeToPlatform, addDays, addMonths, dayKey, iosThemeOverride, isIOS, isSameDay, monthGrid, nativeFontFamily, pressFeedback, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };