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

package/dist/index.cjs

@@ -47,7 +47,6 @@ __export(index_exports, {
   Combobox: () => Combobox,
   DescriptionList: () => DescriptionList,
   Dialog: () => Dialog,
-  Drawer: () => Drawer,
   DropdownMenu: () => DropdownMenu,
   FileInput: () => FileInput,
   FormInput: () => FormInput,
@@ -69,6 +68,7 @@ __export(index_exports, {
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   Separator: () => Separator,
+  SideSheet: () => SideSheet,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
   Switch: () => Switch,
@@ -82,9 +82,11 @@ __export(index_exports, {
   animation: () => import_native.animation,
   border: () => import_native.border,
   colors: () => import_native.colors,
+  createReactNavigationTheme: () => createReactNavigationTheme,
   font: () => import_native.font,
   lineHeight: () => lineHeight,
   spacing: () => import_native.spacing,
+  useReactNavigationTheme: () => useReactNavigationTheme,
   useTheme: () => useTheme,
   useToast: () => useToast,
   zIndex: () => import_native.zIndex
@@ -109,13 +111,14 @@ var lineHeight = {
 // src/native/ThemeContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var ThemeContext = (0, import_react.createContext)(null);
-function ThemeProvider({ children, colorScheme }) {
+function ThemeProvider({ children, colorScheme, tokens }) {
   const systemScheme = (0, import_react_native.useColorScheme)();
   const isDark = (colorScheme ?? systemScheme) === "dark";
-  const value = (0, import_react.useMemo)(
-    () => ({ colors: isDark ? import_native.colors.dark : import_native.colors.light, isDark }),
-    [isDark]
-  );
+  const value = (0, import_react.useMemo)(() => {
+    const base = isDark ? import_native.colors.dark : import_native.colors.light;
+    const overrides = isDark ? tokens?.dark : tokens?.light;
+    return { colors: { ...base, ...overrides }, isDark };
+  }, [isDark, tokens]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
@@ -124,7 +127,47 @@ function useTheme() {
   return ctx;
 }
 
-// src/components/ui/Typography/Typography.native.tsx
+// src/native/ReactNavigationTheme.ts
+var import_native2 = require("@boostdev/design-system-foundation/native");
+function mapColors(tokens, dark) {
+  return {
+    primary: tokens.colorInteractive,
+    background: tokens.colorBg,
+    card: tokens.colorBgSubtle,
+    text: tokens.colorOnBg,
+    border: dark ? import_native2.palette.grey700 : import_native2.palette.grey200,
+    notification: tokens.colorError
+  };
+}
+function mapFonts() {
+  const family = import_native2.font.family.body;
+  return {
+    regular: { fontFamily: family, fontWeight: String(import_native2.font.weight.body) },
+    medium: { fontFamily: family, fontWeight: String(import_native2.font.weight.medium) },
+    bold: { fontFamily: family, fontWeight: String(import_native2.font.weight.bold) },
+    heavy: { fontFamily: family, fontWeight: String(import_native2.font.weight.heading) }
+  };
+}
+function createReactNavigationTheme(options = {}) {
+  const dark = options.dark ?? false;
+  const tokens = options.tokens ?? (dark ? import_native2.colors.dark : import_native2.colors.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
 var import_react_native2 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var styles = import_react_native2.StyleSheet.create({
@@ -178,7 +221,7 @@ function Typography({ variant = "body", children, style }) {
   );
 }
 
-// src/components/ui/Badge/Badge.native.tsx
+// src/components/ui/Badge/Badge.tsx
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var styles2 = import_react_native3.StyleSheet.create({
@@ -211,7 +254,7 @@ function Badge({ children, variant = "primary", style }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles2.badge, { backgroundColor: bg }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.Text, { style: [styles2.text, { color: text }], children }) });
 }
 
-// src/components/ui/Avatar/Avatar.native.tsx
+// src/components/ui/Avatar/Avatar.tsx
 var import_react_native4 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var sizeMap = {
@@ -277,7 +320,7 @@ function Avatar({ src, alt, name, size = "medium", style }) {
   );
 }
 
-// src/components/ui/Separator/Separator.native.tsx
+// src/components/ui/Separator/Separator.tsx
 var import_react_native5 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var styles4 = import_react_native5.StyleSheet.create({
@@ -305,7 +348,7 @@ function Separator({ orientation = "horizontal", style }) {
   );
 }
 
-// src/components/ui/Loading/Loading.native.tsx
+// src/components/ui/Loading/Loading.tsx
 var import_react_native6 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var rnSize = {
@@ -327,7 +370,7 @@ function Loading({ size = "medium", accessibilityLabel = "Loading", style }) {
   );
 }
 
-// src/components/ui/Progress/Progress.native.tsx
+// src/components/ui/Progress/Progress.tsx
 var import_react_native7 = require("react-native");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var trackHeight = {
@@ -399,7 +442,7 @@ function Progress({
   ] });
 }
 
-// src/components/ui/Skeleton/Skeleton.native.tsx
+// src/components/ui/Skeleton/Skeleton.tsx
 var import_react2 = require("react");
 var import_react_native8 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -435,7 +478,7 @@ function Skeleton({ style }) {
   );
 }
 
-// src/components/ui/Alert/Alert.native.tsx
+// src/components/ui/Alert/Alert.tsx
 var import_react_native9 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var styles7 = import_react_native9.StyleSheet.create({
@@ -515,7 +558,7 @@ function Alert({
   );
 }
 
-// src/components/ui/NotificationBanner/NotificationBanner.native.tsx
+// src/components/ui/NotificationBanner/NotificationBanner.tsx
 var import_react_native10 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var styles8 = import_react_native10.StyleSheet.create({
@@ -578,7 +621,7 @@ function NotificationBanner({
   );
 }
 
-// src/components/ui/Link/Link.native.tsx
+// src/components/ui/Link/Link.tsx
 var import_react_native11 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var styles9 = import_react_native11.StyleSheet.create({
@@ -612,7 +655,7 @@ function Link({ href, children, accessibilityLabel, style, onPress }) {
   );
 }
 
-// src/components/ui/DescriptionList/DescriptionList.native.tsx
+// src/components/ui/DescriptionList/DescriptionList.tsx
 var import_react_native12 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var styles10 = import_react_native12.StyleSheet.create({
@@ -643,7 +686,7 @@ function DescriptionList({ items, style }) {
   ] }, i)) });
 }
 
-// src/components/ui/Breadcrumb/Breadcrumb.native.tsx
+// src/components/ui/Breadcrumb/Breadcrumb.tsx
 var import_react_native13 = require("react-native");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var styles11 = import_react_native13.StyleSheet.create({
@@ -709,7 +752,7 @@ function Breadcrumb({ items, style }) {
   );
 }
 
-// src/components/ui/ProgressCircle/ProgressCircle.native.tsx
+// src/components/ui/ProgressCircle/ProgressCircle.tsx
 var import_react_native14 = require("react-native");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var SIZE_PX = {
@@ -876,7 +919,7 @@ function ProgressCircle({
   );
 }
 
-// src/components/ui/Tooltip/Tooltip.native.tsx
+// src/components/ui/Tooltip/Tooltip.tsx
 var import_react3 = require("react");
 var import_react_native15 = require("react-native");
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -925,7 +968,7 @@ function Tooltip({ content, children, style }) {
   ] });
 }
 
-// src/components/ui/Pagination/Pagination.native.tsx
+// src/components/ui/Pagination/Pagination.tsx
 var import_react_native16 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function getPageRange(current, total) {
@@ -1074,7 +1117,7 @@ function Pagination({
   );
 }
 
-// src/components/ui/Collapsible/Collapsible.native.tsx
+// src/components/ui/Collapsible/Collapsible.tsx
 var import_react4 = require("react");
 var import_react_native17 = require("react-native");
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -1179,7 +1222,7 @@ function Collapsible({
   );
 }
 
-// src/components/ui/Accordion/Accordion.native.tsx
+// src/components/ui/Accordion/Accordion.tsx
 var import_react5 = require("react");
 var import_react_native18 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -1286,7 +1329,7 @@ function Accordion({
   }) });
 }
 
-// src/components/ui/Tabs/Tabs.native.tsx
+// src/components/ui/Tabs/Tabs.tsx
 var import_react6 = require("react");
 var import_react_native19 = require("react-native");
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -1385,7 +1428,7 @@ function Tabs({
   ] });
 }
 
-// src/components/ui/Table/Table.native.tsx
+// src/components/ui/Table/Table.tsx
 var import_react_native20 = require("react-native");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var styles18 = import_react_native20.StyleSheet.create({
@@ -1519,7 +1562,7 @@ function Table({
   );
 }
 
-// src/components/ui/Calendar/Calendar.native.tsx
+// src/components/ui/Calendar/Calendar.tsx
 var import_react7 = require("react");
 var import_react_native21 = require("react-native");
 var import_jsx_runtime21 = require("react/jsx-runtime");
@@ -1784,7 +1827,7 @@ function Calendar({
   );
 }
 
-// src/components/ui/Carousel/Carousel.native.tsx
+// src/components/ui/Carousel/Carousel.tsx
 var import_react8 = require("react");
 var import_react_native22 = require("react-native");
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -1945,7 +1988,7 @@ function Carousel({
   );
 }
 
-// src/components/layout/Card/Card.native.tsx
+// src/components/layout/Card/Card.tsx
 var import_react_native23 = require("react-native");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var paddingMap = {
@@ -2008,7 +2051,7 @@ function Card({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: [styles21.card, variantStyle, inner, style], children });
 }
 
-// src/components/layout/SectionHeader/SectionHeader.native.tsx
+// src/components/layout/SectionHeader/SectionHeader.tsx
 var import_react_native24 = require("react-native");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var alignMap2 = {
@@ -2068,7 +2111,7 @@ function SectionHeader({
   ] });
 }
 
-// src/components/layout/IconWrapper/IconWrapper.native.tsx
+// src/components/layout/IconWrapper/IconWrapper.tsx
 var import_react_native25 = require("react-native");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function IconWrapper({ children, style, accessibilityElementsHidden }) {
@@ -2083,7 +2126,7 @@ function IconWrapper({ children, style, accessibilityElementsHidden }) {
   );
 }
 
-// src/components/layout/ButtonGroup/ButtonGroup.native.tsx
+// src/components/layout/ButtonGroup/ButtonGroup.tsx
 var import_react_native26 = require("react-native");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var styles23 = import_react_native26.StyleSheet.create({
@@ -2110,7 +2153,7 @@ function ButtonContainer({ children, variant, accessibilityLabel, style }) {
 }
 var ButtonGroup = ButtonContainer;
 
-// src/components/interaction/Button/Button.native.tsx
+// src/components/interaction/Button/Button.tsx
 var import_react_native27 = require("react-native");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var sizeTokens = {
@@ -2183,7 +2226,7 @@ function Button({
   );
 }
 
-// src/components/interaction/Rating/Rating.native.tsx
+// src/components/interaction/Rating/Rating.tsx
 var import_react_native28 = require("react-native");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var STAR_SIZE = 24;
@@ -2223,10 +2266,10 @@ function Rating({ value, max = 5, style, accessibilityLabel }) {
   );
 }
 
-// src/components/interaction/form/Switch/Switch.native.tsx
+// src/components/interaction/form/Switch/Switch.tsx
 var import_react_native31 = require("react-native");
 
-// src/components/interaction/form/atoms/Label.native.tsx
+// src/components/interaction/form/atoms/Label.tsx
 var import_react_native29 = require("react-native");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function Label({ label, style }) {
@@ -2249,7 +2292,7 @@ function Label({ label, style }) {
   );
 }
 
-// src/components/interaction/form/atoms/Message.native.tsx
+// src/components/interaction/form/atoms/Message.tsx
 var import_react_native30 = require("react-native");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var styles26 = import_react_native30.StyleSheet.create({
@@ -2274,7 +2317,7 @@ function Message({ message, type, style }) {
   );
 }
 
-// src/components/interaction/form/Switch/Switch.native.tsx
+// src/components/interaction/form/Switch/Switch.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var styles27 = import_react_native31.StyleSheet.create({
   container: {
@@ -2318,7 +2361,7 @@ function Switch({
   ] });
 }
 
-// src/components/interaction/form/Checkbox/Checkbox.native.tsx
+// src/components/interaction/form/Checkbox/Checkbox.tsx
 var import_react_native32 = require("react-native");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var BOX = 22;
@@ -2380,7 +2423,7 @@ function Checkbox({
   ] });
 }
 
-// src/components/interaction/form/CheckboxGroup/CheckboxGroup.native.tsx
+// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
 var import_react_native33 = require("react-native");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var styles29 = import_react_native33.StyleSheet.create({
@@ -2429,7 +2472,7 @@ function CheckboxGroup({
   );
 }
 
-// src/components/interaction/form/Radio/Radio.native.tsx
+// src/components/interaction/form/Radio/Radio.tsx
 var import_react_native34 = require("react-native");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var DOT = 22;
@@ -2491,7 +2534,7 @@ function Radio({
   ] });
 }
 
-// src/components/interaction/form/RadioGroup/RadioGroup.native.tsx
+// src/components/interaction/form/RadioGroup/RadioGroup.tsx
 var import_react_native35 = require("react-native");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var styles31 = import_react_native35.StyleSheet.create({
@@ -2540,7 +2583,7 @@ function RadioGroup({
   );
 }
 
-// src/components/interaction/form/FileInput/FileInput.native.tsx
+// src/components/interaction/form/FileInput/FileInput.tsx
 var import_react_native36 = require("react-native");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var styles32 = import_react_native36.StyleSheet.create({
@@ -2635,7 +2678,7 @@ function FileInput({
   ] });
 }
 
-// src/components/interaction/form/Combobox/Combobox.native.tsx
+// src/components/interaction/form/Combobox/Combobox.tsx
 var import_react9 = require("react");
 var import_react_native37 = require("react-native");
 var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -2650,7 +2693,8 @@ var styles33 = import_react_native37.StyleSheet.create({
   input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.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: import_native.spacing.xs,
     paddingHorizontal: import_native.spacing.s,
     borderWidth: 1,
@@ -2803,7 +2847,7 @@ function Combobox({
   ] });
 }
 
-// src/components/interaction/form/SegmentedControl/SegmentedControl.native.tsx
+// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
 var import_react10 = require("react");
 var import_react_native38 = require("react-native");
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -2881,7 +2925,7 @@ function SegmentedControl({
   );
 }
 
-// src/components/interaction/form/FormInput/FormInput.native.tsx
+// src/components/interaction/form/FormInput/FormInput.tsx
 var import_react11 = require("react");
 var import_react_native39 = require("react-native");
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -2901,7 +2945,8 @@ var styles35 = import_react_native39.StyleSheet.create({
   input: {
     fontFamily: import_native.font.family.body,
     fontSize: import_native.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: import_native.spacing.s,
     paddingVertical: import_native.spacing.xs,
     borderWidth: 1,
@@ -2969,7 +3014,7 @@ function FormInput({
   ] });
 }
 
-// src/components/interaction/form/Textarea/Textarea.native.tsx
+// src/components/interaction/form/Textarea/Textarea.tsx
 var import_react12 = require("react");
 var import_react_native40 = require("react-native");
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -3047,7 +3092,7 @@ function Textarea({
   ] });
 }
 
-// src/components/interaction/form/Select/Select.native.tsx
+// src/components/interaction/form/Select/Select.tsx
 var import_react13 = require("react");
 var import_react_native41 = require("react-native");
 var import_jsx_runtime41 = require("react/jsx-runtime");
@@ -3263,7 +3308,7 @@ function Select({
   ] });
 }
 
-// src/components/interaction/form/Slider/Slider.native.tsx
+// src/components/interaction/form/Slider/Slider.tsx
 var import_react14 = require("react");
 var import_react_native42 = require("react-native");
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -3422,7 +3467,7 @@ function Slider({
   );
 }
 
-// src/components/interaction/form/NumberInput/NumberInput.native.tsx
+// src/components/interaction/form/NumberInput/NumberInput.tsx
 var import_react15 = require("react");
 var import_react_native43 = require("react-native");
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -3461,7 +3506,8 @@ var styles39 = import_react_native43.StyleSheet.create({
     flex: 1,
     fontFamily: import_native.font.family.body,
     fontSize: import_native.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: import_native.spacing.xs,
     paddingVertical: import_native.spacing.xs,
@@ -3595,7 +3641,7 @@ function NumberInput({
   ] });
 }
 
-// src/components/interaction/Dialog/Dialog.native.tsx
+// src/components/interaction/Dialog/Dialog.tsx
 var import_react_native44 = require("react-native");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var styles40 = import_react_native44.StyleSheet.create({
@@ -3705,7 +3751,7 @@ function Dialog({
   );
 }
 
-// src/components/interaction/Drawer/Drawer.native.tsx
+// src/components/interaction/SideSheet/SideSheet.tsx
 var import_react16 = require("react");
 var import_react_native45 = require("react-native");
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -3756,7 +3802,7 @@ var styles41 = import_react_native45.StyleSheet.create({
     flex: 1
   }
 });
-function Drawer({
+function SideSheet({
   isOpen,
   onClose,
   title,
@@ -3817,7 +3863,7 @@ function Drawer({
                 style: import_react_native45.StyleSheet.absoluteFill,
                 onPress: onClose,
                 accessibilityRole: "button",
-                accessibilityLabel: "Close drawer"
+                accessibilityLabel: "Close side sheet"
               }
             )
           }
@@ -3847,7 +3893,7 @@ function Drawer({
                         style: styles41.closeButton,
                         onPress: onClose,
                         accessibilityRole: "button",
-                        accessibilityLabel: "Close drawer",
+                        accessibilityLabel: "Close side sheet",
                         hitSlop: 8,
                         children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                           import_react_native45.Text,
@@ -3871,7 +3917,7 @@ function Drawer({
   );
 }
 
-// src/components/interaction/Toast/Toast.native.tsx
+// src/components/interaction/Toast/Toast.tsx
 var import_react17 = require("react");
 var import_react_native46 = require("react-native");
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -4021,7 +4067,7 @@ function useToast() {
   return context;
 }
 
-// src/components/interaction/DropdownMenu/DropdownMenu.native.tsx
+// src/components/interaction/DropdownMenu/DropdownMenu.tsx
 var import_react18 = __toESM(require("react"), 1);
 var import_react_native47 = require("react-native");
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -4263,7 +4309,7 @@ function DropdownMenu({
   ] });
 }
 
-// src/components/interaction/Popover/Popover.native.tsx
+// src/components/interaction/Popover/Popover.tsx
 var import_react19 = __toESM(require("react"), 1);
 var import_react_native48 = require("react-native");
 var import_jsx_runtime48 = require("react/jsx-runtime");

package/dist/index.d.cts

@@ -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 };