@boostdev/design-system-react-native 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -14,17 +14,72 @@ declare const lineHeight: {
     readonly bodyS: number;
 };
 
-type ThemeColors = typeof colors.light | typeof colors.dark;
+type ThemeColorName = keyof typeof colors.light;
+/** Semantic theme colors, widened to `string` so brand overrides typecheck. */
+type ThemeColors = Readonly<Record<ThemeColorName, string>>;
+/**
+ * Per-scheme token overrides, merged over the foundation colors.
+ * The React Native equivalent of overriding tokens in the web
+ * `boostdev.tokens.override` CSS layer.
+ */
+interface ThemeTokenOverrides {
+    light?: Partial<Record<ThemeColorName, string>>;
+    dark?: Partial<Record<ThemeColorName, string>>;
+}
 interface ThemeContextValue {
     colors: ThemeColors;
     isDark: boolean;
 }
-declare function ThemeProvider({ children, colorScheme }: {
+interface ThemeProviderProps {
     children: ReactNode;
     colorScheme?: 'light' | 'dark';
-}): react_jsx_runtime.JSX.Element;
+    tokens?: ThemeTokenOverrides;
+}
+declare function ThemeProvider({ children, colorScheme, tokens }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
+interface ReactNavigationFontStyle {
+    fontFamily: string;
+    fontWeight: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+}
+interface ReactNavigationThemeColors {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    notification: string;
+}
+interface ReactNavigationThemeFonts {
+    regular: ReactNavigationFontStyle;
+    medium: ReactNavigationFontStyle;
+    bold: ReactNavigationFontStyle;
+    heavy: ReactNavigationFontStyle;
+}
+interface ReactNavigationTheme {
+    dark: boolean;
+    colors: ReactNavigationThemeColors;
+    fonts: ReactNavigationThemeFonts;
+}
+interface CreateReactNavigationThemeOptions {
+    dark?: boolean;
+    tokens?: ThemeColors;
+    colors?: Partial<ReactNavigationThemeColors>;
+    fonts?: Partial<ReactNavigationThemeFonts>;
+}
+/**
+ * Pure builder. Produces a React Navigation–compatible theme from the design
+ * system foundation tokens. Use this when you are not wrapping in our
+ * `ThemeProvider`, or when you need a theme outside React.
+ */
+declare function createReactNavigationTheme(options?: CreateReactNavigationThemeOptions): ReactNavigationTheme;
+/**
+ * Hook variant. Reads from the design system's `ThemeProvider` and returns a
+ * React Navigation–compatible theme. Pass the result directly to
+ * `<NavigationContainer theme={...} />`.
+ */
+declare function useReactNavigationTheme(overrides?: Pick<CreateReactNavigationThemeOptions, 'colors' | 'fonts'>): ReactNavigationTheme;
+
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 interface TypographyProps {
     variant?: TypographyVariant;
@@ -515,14 +570,14 @@ interface DialogProps {
 }
 declare function Dialog({ isOpen, onClose, title, children, style, }: Readonly<DialogProps>): react_jsx_runtime.JSX.Element;
 
-interface DrawerProps {
+interface SideSheetProps {
     isOpen: boolean;
     onClose: () => void;
     title?: ReactNode;
     children?: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function Drawer({ isOpen, onClose, title, children, style, }: Readonly<DrawerProps>): react_jsx_runtime.JSX.Element;
+declare function SideSheet({ isOpen, onClose, title, children, style, }: Readonly<SideSheetProps>): react_jsx_runtime.JSX.Element;
 
 type ToastVariant = 'success' | 'error' | 'info';
 interface ToastContextType {
@@ -571,4 +626,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type CreateReactNavigationThemeOptions, type DescriptionItem, DescriptionList, Dialog, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, type ReactNavigationFontStyle, type ReactNavigationTheme, type ReactNavigationThemeColors, type ReactNavigationThemeFonts, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, SideSheet, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, type ThemeColorName, type ThemeColors, ThemeProvider, type ThemeTokenOverrides, ToastProvider, Tooltip, Typography, createReactNavigationTheme, lineHeight, useReactNavigationTheme, useTheme, useToast };

package/dist/index.js

@@ -16,13 +16,14 @@ var lineHeight = {
 // src/native/ThemeContext.tsx
 import { jsx } from "react/jsx-runtime";
 var ThemeContext = createContext(null);
-function ThemeProvider({ children, colorScheme }) {
+function ThemeProvider({ children, colorScheme, tokens }) {
   const systemScheme = useColorScheme();
   const isDark = (colorScheme ?? systemScheme) === "dark";
-  const value = useMemo(
-    () => ({ colors: isDark ? colors.dark : colors.light, isDark }),
-    [isDark]
-  );
+  const value = useMemo(() => {
+    const base = isDark ? colors.dark : colors.light;
+    const overrides = isDark ? tokens?.dark : tokens?.light;
+    return { colors: { ...base, ...overrides }, isDark };
+  }, [isDark, tokens]);
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
@@ -31,7 +32,47 @@ function useTheme() {
   return ctx;
 }
 
-// src/components/ui/Typography/Typography.native.tsx
+// src/native/ReactNavigationTheme.ts
+import { palette, colors as foundationColors, font as font2 } from "@boostdev/design-system-foundation/native";
+function mapColors(tokens, dark) {
+  return {
+    primary: tokens.colorInteractive,
+    background: tokens.colorBg,
+    card: tokens.colorBgSubtle,
+    text: tokens.colorOnBg,
+    border: dark ? palette.grey700 : palette.grey200,
+    notification: tokens.colorError
+  };
+}
+function mapFonts() {
+  const family = font2.family.body;
+  return {
+    regular: { fontFamily: family, fontWeight: String(font2.weight.body) },
+    medium: { fontFamily: family, fontWeight: String(font2.weight.medium) },
+    bold: { fontFamily: family, fontWeight: String(font2.weight.bold) },
+    heavy: { fontFamily: family, fontWeight: String(font2.weight.heading) }
+  };
+}
+function createReactNavigationTheme(options = {}) {
+  const dark = options.dark ?? false;
+  const tokens = options.tokens ?? (dark ? foundationColors.dark : foundationColors.light);
+  return {
+    dark,
+    colors: { ...mapColors(tokens, dark), ...options.colors },
+    fonts: { ...mapFonts(), ...options.fonts }
+  };
+}
+function useReactNavigationTheme(overrides = {}) {
+  const { colors: tokens, isDark } = useTheme();
+  return createReactNavigationTheme({
+    dark: isDark,
+    tokens,
+    colors: overrides.colors,
+    fonts: overrides.fonts
+  });
+}
+
+// src/components/ui/Typography/Typography.tsx
 import { StyleSheet, Text } from "react-native";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var styles = StyleSheet.create({
@@ -85,7 +126,7 @@ function Typography({ variant = "body", children, style }) {
   );
 }
 
-// src/components/ui/Badge/Badge.native.tsx
+// src/components/ui/Badge/Badge.tsx
 import { StyleSheet as StyleSheet2, View, Text as Text2 } from "react-native";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var styles2 = StyleSheet2.create({
@@ -118,7 +159,7 @@ function Badge({ children, variant = "primary", style }) {
   return /* @__PURE__ */ jsx3(View, { style: [styles2.badge, { backgroundColor: bg }, style], children: /* @__PURE__ */ jsx3(Text2, { style: [styles2.text, { color: text }], children }) });
 }
 
-// src/components/ui/Avatar/Avatar.native.tsx
+// src/components/ui/Avatar/Avatar.tsx
 import { StyleSheet as StyleSheet3, View as View2, Text as Text3, Image } from "react-native";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var sizeMap = {
@@ -184,7 +225,7 @@ function Avatar({ src, alt, name, size = "medium", style }) {
   );
 }
 
-// src/components/ui/Separator/Separator.native.tsx
+// src/components/ui/Separator/Separator.tsx
 import { StyleSheet as StyleSheet4, View as View3 } from "react-native";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var styles4 = StyleSheet4.create({
@@ -212,7 +253,7 @@ function Separator({ orientation = "horizontal", style }) {
   );
 }
 
-// src/components/ui/Loading/Loading.native.tsx
+// src/components/ui/Loading/Loading.tsx
 import { ActivityIndicator } from "react-native";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var rnSize = {
@@ -234,7 +275,7 @@ function Loading({ size = "medium", accessibilityLabel = "Loading", style }) {
   );
 }
 
-// src/components/ui/Progress/Progress.native.tsx
+// src/components/ui/Progress/Progress.tsx
 import { StyleSheet as StyleSheet5, View as View4, Text as Text4 } from "react-native";
 import { jsx as jsx7, jsxs } from "react/jsx-runtime";
 var trackHeight = {
@@ -306,7 +347,7 @@ function Progress({
   ] });
 }
 
-// src/components/ui/Skeleton/Skeleton.native.tsx
+// src/components/ui/Skeleton/Skeleton.tsx
 import { useEffect, useRef } from "react";
 import { Animated, StyleSheet as StyleSheet6 } from "react-native";
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -342,7 +383,7 @@ function Skeleton({ style }) {
   );
 }
 
-// src/components/ui/Alert/Alert.native.tsx
+// src/components/ui/Alert/Alert.tsx
 import { StyleSheet as StyleSheet7, View as View5, Text as Text5, Pressable } from "react-native";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var styles7 = StyleSheet7.create({
@@ -422,7 +463,7 @@ function Alert({
   );
 }
 
-// src/components/ui/NotificationBanner/NotificationBanner.native.tsx
+// src/components/ui/NotificationBanner/NotificationBanner.tsx
 import { StyleSheet as StyleSheet8, View as View6, Text as Text6, Pressable as Pressable2 } from "react-native";
 import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var styles8 = StyleSheet8.create({
@@ -485,7 +526,7 @@ function NotificationBanner({
   );
 }
 
-// src/components/ui/Link/Link.native.tsx
+// src/components/ui/Link/Link.tsx
 import { StyleSheet as StyleSheet9, Text as Text7, Pressable as Pressable3, Linking } from "react-native";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var styles9 = StyleSheet9.create({
@@ -519,7 +560,7 @@ function Link({ href, children, accessibilityLabel, style, onPress }) {
   );
 }
 
-// src/components/ui/DescriptionList/DescriptionList.native.tsx
+// src/components/ui/DescriptionList/DescriptionList.tsx
 import { StyleSheet as StyleSheet10, View as View7, Text as Text8 } from "react-native";
 import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var styles10 = StyleSheet10.create({
@@ -550,7 +591,7 @@ function DescriptionList({ items, style }) {
   ] }, i)) });
 }
 
-// src/components/ui/Breadcrumb/Breadcrumb.native.tsx
+// src/components/ui/Breadcrumb/Breadcrumb.tsx
 import { StyleSheet as StyleSheet11, View as View8, Text as Text9, Pressable as Pressable4 } from "react-native";
 import { Fragment, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var styles11 = StyleSheet11.create({
@@ -616,7 +657,7 @@ function Breadcrumb({ items, style }) {
   );
 }
 
-// src/components/ui/ProgressCircle/ProgressCircle.native.tsx
+// src/components/ui/ProgressCircle/ProgressCircle.tsx
 import { StyleSheet as StyleSheet12, View as View9, Text as Text10 } from "react-native";
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var SIZE_PX = {
@@ -783,7 +824,7 @@ function ProgressCircle({
   );
 }
 
-// src/components/ui/Tooltip/Tooltip.native.tsx
+// src/components/ui/Tooltip/Tooltip.tsx
 import { useState } from "react";
 import { StyleSheet as StyleSheet13, View as View10, Text as Text11, Pressable as Pressable5 } from "react-native";
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -832,7 +873,7 @@ function Tooltip({ content, children, style }) {
   ] });
 }
 
-// src/components/ui/Pagination/Pagination.native.tsx
+// src/components/ui/Pagination/Pagination.tsx
 import { StyleSheet as StyleSheet14, View as View11, Text as Text12, Pressable as Pressable6 } from "react-native";
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function getPageRange(current, total) {
@@ -981,7 +1022,7 @@ function Pagination({
   );
 }
 
-// src/components/ui/Collapsible/Collapsible.native.tsx
+// src/components/ui/Collapsible/Collapsible.tsx
 import { useCallback, useRef as useRef2, useState as useState2 } from "react";
 import {
   StyleSheet as StyleSheet15,
@@ -1095,7 +1136,7 @@ function Collapsible({
   );
 }
 
-// src/components/ui/Accordion/Accordion.native.tsx
+// src/components/ui/Accordion/Accordion.tsx
 import { useState as useState3 } from "react";
 import {
   StyleSheet as StyleSheet16,
@@ -1210,7 +1251,7 @@ function Accordion({
   }) });
 }
 
-// src/components/ui/Tabs/Tabs.native.tsx
+// src/components/ui/Tabs/Tabs.tsx
 import { useState as useState4 } from "react";
 import {
   StyleSheet as StyleSheet17,
@@ -1315,7 +1356,7 @@ function Tabs({
   ] });
 }
 
-// src/components/ui/Table/Table.native.tsx
+// src/components/ui/Table/Table.tsx
 import {
   StyleSheet as StyleSheet18,
   View as View15,
@@ -1455,7 +1496,7 @@ function Table({
   );
 }
 
-// src/components/ui/Calendar/Calendar.native.tsx
+// src/components/ui/Calendar/Calendar.tsx
 import { useState as useState5 } from "react";
 import {
   StyleSheet as StyleSheet19,
@@ -1725,7 +1766,7 @@ function Calendar({
   );
 }
 
-// src/components/ui/Carousel/Carousel.native.tsx
+// src/components/ui/Carousel/Carousel.tsx
 import { useCallback as useCallback2, useRef as useRef3, useState as useState6 } from "react";
 import {
   StyleSheet as StyleSheet20,
@@ -1893,7 +1934,7 @@ function Carousel({
   );
 }
 
-// src/components/layout/Card/Card.native.tsx
+// src/components/layout/Card/Card.tsx
 import { StyleSheet as StyleSheet21, View as View18, Pressable as Pressable13 } from "react-native";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var paddingMap = {
@@ -1956,7 +1997,7 @@ function Card({
   return /* @__PURE__ */ jsx23(View18, { style: [styles21.card, variantStyle, inner, style], children });
 }
 
-// src/components/layout/SectionHeader/SectionHeader.native.tsx
+// src/components/layout/SectionHeader/SectionHeader.tsx
 import { StyleSheet as StyleSheet22, View as View19, Text as Text19 } from "react-native";
 import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var alignMap2 = {
@@ -2016,7 +2057,7 @@ function SectionHeader({
   ] });
 }
 
-// src/components/layout/IconWrapper/IconWrapper.native.tsx
+// src/components/layout/IconWrapper/IconWrapper.tsx
 import { View as View20 } from "react-native";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function IconWrapper({ children, style, accessibilityElementsHidden }) {
@@ -2031,7 +2072,7 @@ function IconWrapper({ children, style, accessibilityElementsHidden }) {
   );
 }
 
-// src/components/layout/ButtonGroup/ButtonGroup.native.tsx
+// src/components/layout/ButtonGroup/ButtonGroup.tsx
 import { StyleSheet as StyleSheet23, View as View21 } from "react-native";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var styles23 = StyleSheet23.create({
@@ -2058,7 +2099,7 @@ function ButtonContainer({ children, variant, accessibilityLabel, style }) {
 }
 var ButtonGroup = ButtonContainer;
 
-// src/components/interaction/Button/Button.native.tsx
+// src/components/interaction/Button/Button.tsx
 import { StyleSheet as StyleSheet24, Pressable as Pressable14, Text as Text20, View as View22 } from "react-native";
 import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var sizeTokens = {
@@ -2131,7 +2172,7 @@ function Button({
   );
 }
 
-// src/components/interaction/Rating/Rating.native.tsx
+// src/components/interaction/Rating/Rating.tsx
 import { StyleSheet as StyleSheet25, View as View23, Text as Text21 } from "react-native";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var STAR_SIZE = 24;
@@ -2171,10 +2212,10 @@ function Rating({ value, max = 5, style, accessibilityLabel }) {
   );
 }
 
-// src/components/interaction/form/Switch/Switch.native.tsx
+// src/components/interaction/form/Switch/Switch.tsx
 import { Switch as RNSwitch, View as View24, StyleSheet as StyleSheet27 } from "react-native";
 
-// src/components/interaction/form/atoms/Label.native.tsx
+// src/components/interaction/form/atoms/Label.tsx
 import { Text as Text22 } from "react-native";
 import { jsx as jsx29 } from "react/jsx-runtime";
 function Label({ label, style }) {
@@ -2197,7 +2238,7 @@ function Label({ label, style }) {
   );
 }
 
-// src/components/interaction/form/atoms/Message.native.tsx
+// src/components/interaction/form/atoms/Message.tsx
 import { StyleSheet as StyleSheet26, Text as Text23 } from "react-native";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var styles26 = StyleSheet26.create({
@@ -2222,7 +2263,7 @@ function Message({ message, type, style }) {
   );
 }
 
-// src/components/interaction/form/Switch/Switch.native.tsx
+// src/components/interaction/form/Switch/Switch.tsx
 import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var styles27 = StyleSheet27.create({
   container: {
@@ -2266,7 +2307,7 @@ function Switch({
   ] });
 }
 
-// src/components/interaction/form/Checkbox/Checkbox.native.tsx
+// src/components/interaction/form/Checkbox/Checkbox.tsx
 import { StyleSheet as StyleSheet28, View as View25, Pressable as Pressable15 } from "react-native";
 import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var BOX = 22;
@@ -2328,7 +2369,7 @@ function Checkbox({
   ] });
 }
 
-// src/components/interaction/form/CheckboxGroup/CheckboxGroup.native.tsx
+// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
 import { StyleSheet as StyleSheet29, View as View26, Text as Text24 } from "react-native";
 import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var styles29 = StyleSheet29.create({
@@ -2377,7 +2418,7 @@ function CheckboxGroup({
   );
 }
 
-// src/components/interaction/form/Radio/Radio.native.tsx
+// src/components/interaction/form/Radio/Radio.tsx
 import { StyleSheet as StyleSheet30, View as View27, Pressable as Pressable16 } from "react-native";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var DOT = 22;
@@ -2439,7 +2480,7 @@ function Radio({
   ] });
 }
 
-// src/components/interaction/form/RadioGroup/RadioGroup.native.tsx
+// src/components/interaction/form/RadioGroup/RadioGroup.tsx
 import { StyleSheet as StyleSheet31, View as View28, Text as Text25 } from "react-native";
 import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var styles31 = StyleSheet31.create({
@@ -2488,7 +2529,7 @@ function RadioGroup({
   );
 }
 
-// src/components/interaction/form/FileInput/FileInput.native.tsx
+// src/components/interaction/form/FileInput/FileInput.tsx
 import { StyleSheet as StyleSheet32, View as View29, Pressable as Pressable17, Text as Text26 } from "react-native";
 import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var styles32 = StyleSheet32.create({
@@ -2583,7 +2624,7 @@ function FileInput({
   ] });
 }
 
-// src/components/interaction/form/Combobox/Combobox.native.tsx
+// src/components/interaction/form/Combobox/Combobox.tsx
 import { useState as useState7, useMemo as useMemo2 } from "react";
 import {
   StyleSheet as StyleSheet33,
@@ -2605,7 +2646,8 @@ var styles33 = StyleSheet33.create({
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingVertical: spacing.xs,
     paddingHorizontal: spacing.s,
     borderWidth: 1,
@@ -2758,7 +2800,7 @@ function Combobox({
   ] });
 }
 
-// src/components/interaction/form/SegmentedControl/SegmentedControl.native.tsx
+// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
 import { Children } from "react";
 import { StyleSheet as StyleSheet34, View as View31, Pressable as Pressable19, Text as Text28 } from "react-native";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -2836,7 +2878,7 @@ function SegmentedControl({
   );
 }
 
-// src/components/interaction/form/FormInput/FormInput.native.tsx
+// src/components/interaction/form/FormInput/FormInput.tsx
 import { useState as useState8 } from "react";
 import {
   StyleSheet as StyleSheet35,
@@ -2860,7 +2902,8 @@ var styles35 = StyleSheet35.create({
   input: {
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: 44 satisfies the touch-target requirement.
     paddingHorizontal: spacing.s,
     paddingVertical: spacing.xs,
     borderWidth: 1,
@@ -2928,7 +2971,7 @@ function FormInput({
   ] });
 }
 
-// src/components/interaction/form/Textarea/Textarea.native.tsx
+// src/components/interaction/form/Textarea/Textarea.tsx
 import { useState as useState9 } from "react";
 import {
   StyleSheet as StyleSheet36,
@@ -3010,7 +3053,7 @@ function Textarea({
   ] });
 }
 
-// src/components/interaction/form/Select/Select.native.tsx
+// src/components/interaction/form/Select/Select.tsx
 import { useState as useState10 } from "react";
 import {
   StyleSheet as StyleSheet37,
@@ -3234,7 +3277,7 @@ function Select({
   ] });
 }
 
-// src/components/interaction/form/Slider/Slider.native.tsx
+// src/components/interaction/form/Slider/Slider.tsx
 import { useState as useState11 } from "react";
 import {
   StyleSheet as StyleSheet38,
@@ -3397,7 +3440,7 @@ function Slider({
   );
 }
 
-// src/components/interaction/form/NumberInput/NumberInput.native.tsx
+// src/components/interaction/form/NumberInput/NumberInput.tsx
 import { useState as useState12 } from "react";
 import {
   StyleSheet as StyleSheet39,
@@ -3442,7 +3485,8 @@ var styles39 = StyleSheet39.create({
     flex: 1,
     fontFamily: font.family.body,
     fontSize: font.size.body,
-    lineHeight: lineHeight.body,
+    // No lineHeight on single-line TextInput: iOS clips descenders/ascenders when
+    // lineHeight is set explicitly. minHeight: STEPPER_SIZE (44) covers the touch target.
     textAlign: "center",
     paddingHorizontal: spacing.xs,
     paddingVertical: spacing.xs,
@@ -3576,7 +3620,7 @@ function NumberInput({
   ] });
 }
 
-// src/components/interaction/Dialog/Dialog.native.tsx
+// src/components/interaction/Dialog/Dialog.tsx
 import {
   Modal as Modal2,
   View as View37,
@@ -3692,7 +3736,7 @@ function Dialog({
   );
 }
 
-// src/components/interaction/Drawer/Drawer.native.tsx
+// src/components/interaction/SideSheet/SideSheet.tsx
 import { useEffect as useEffect2, useRef as useRef4 } from "react";
 import {
   Modal as Modal3,
@@ -3751,7 +3795,7 @@ var styles41 = StyleSheet41.create({
     flex: 1
   }
 });
-function Drawer({
+function SideSheet({
   isOpen,
   onClose,
   title,
@@ -3812,7 +3856,7 @@ function Drawer({
                 style: StyleSheet41.absoluteFill,
                 onPress: onClose,
                 accessibilityRole: "button",
-                accessibilityLabel: "Close drawer"
+                accessibilityLabel: "Close side sheet"
               }
             )
           }
@@ -3842,7 +3886,7 @@ function Drawer({
                         style: styles41.closeButton,
                         onPress: onClose,
                         accessibilityRole: "button",
-                        accessibilityLabel: "Close drawer",
+                        accessibilityLabel: "Close side sheet",
                         hitSlop: 8,
                         children: /* @__PURE__ */ jsx45(
                           Text33,
@@ -3866,7 +3910,7 @@ function Drawer({
   );
 }
 
-// src/components/interaction/Toast/Toast.native.tsx
+// src/components/interaction/Toast/Toast.tsx
 import {
   useState as useState13,
   useEffect as useEffect3,
@@ -4030,7 +4074,7 @@ function useToast() {
   return context;
 }
 
-// src/components/interaction/DropdownMenu/DropdownMenu.native.tsx
+// src/components/interaction/DropdownMenu/DropdownMenu.tsx
 import React, { useState as useState14, useEffect as useEffect4, useRef as useRef6 } from "react";
 import {
   Modal as Modal4,
@@ -4282,7 +4326,7 @@ function DropdownMenu({
   ] });
 }
 
-// src/components/interaction/Popover/Popover.native.tsx
+// src/components/interaction/Popover/Popover.tsx
 import React2, { useState as useState15 } from "react";
 import {
   Modal as Modal5,
@@ -4377,7 +4421,6 @@ export {
   Combobox,
   DescriptionList,
   Dialog,
-  Drawer,
   DropdownMenu,
   FileInput,
   FormInput,
@@ -4399,6 +4442,7 @@ export {
   SegmentedControl,
   Select,
   Separator,
+  SideSheet,
   Skeleton,
   Slider,
   Switch,
@@ -4412,9 +4456,11 @@ export {
   animation,
   border,
   colors,
+  createReactNavigationTheme,
   font,
   lineHeight,
   spacing,
+  useReactNavigationTheme,
   useTheme,
   useToast,
   zIndex