@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.181

package/src/components/index.ts

@@ -1,28 +1,57 @@
+export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
+export * from './Badge';
 export * from './BottomSheet';
 export * from './Box';
+export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CurrencyInput';
+export * from './DateField';
+export * from './Calendar';
+export * from './RangeCalendar';
+export * from './MonthCalendar';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export * from './MonthPicker';
+export * from './DateTimeField';
+export * from './DateTimeList';
+export * from './DateTimePicker';
 export * from './Dialog';
+export * from './Divider';
 export * from './Field';
 export * from './Form';
 export * from './Image';
+export * from './InsuranceDisclosure';
 export * from './Input';
 export * from './OtpInput';
 export * from './Link';
 export * from './ListItem';
+export * from './Accordion';
+export * from './Menu';
 export * from './ProgressBar';
+export * from './ProgressCircle';
+export * from './Skeleton';
 export * from './ProgressSegmented';
 export * from './Radio';
+export * from './ScopedTheme';
+export * from './ScrollShadow';
 export * from './Select';
+export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tabs';
+export * from './Textarea';
 export * from './Tile';
+export * from './Toast';
+export * from './Tooltip';
 export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
 export * from './IconButton';
+export * from './QuickActionButton';

package/src/components/picker/PickerTrigger.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, type ReactNode, type RefObject } from 'react';
+import { Pressable, type PressableProps, type View } from 'react-native';
+import { Slot } from '@cdx-ui/primitives';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+
+export interface PickerTriggerProps extends PressableProps {
+  /**
+   * Merge press / a11y props onto the single child instead of rendering a `Pressable`.
+   * Use when the trigger should be another interactive host (e.g. `IconButton`).
+   * For a larger field hit target, prefer wrapping `DateField.Group` as children
+   * without `asChild` so the outer `Pressable` covers the whole input chrome.
+   */
+  asChild?: boolean;
+  children?: ReactNode;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled?: boolean;
+  triggerRef: RefObject<View | null>;
+  accessibilityLabel: string;
+}
+
+/**
+ * Shared open/close press host for date / month / date-time picker compounds.
+ * Compose two ways:
+ * - **Icon-only** (editable segmented fields): wrap `TriggerIndicator` inside `DateField.Suffix`
+ * - **Full-field** (range or overlay-primary selection): wrap the entire `DateField.Group`
+ */
+export const PickerTrigger = forwardRef<View, PickerTriggerProps>(
+  (
+    {
+      asChild = false,
+      children,
+      className,
+      style,
+      onPress,
+      open,
+      setOpen,
+      disabled,
+      triggerRef,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={mergeRefs(ref, triggerRef)}
+        className={className}
+        style={style}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityState={{ disabled: !!disabled, expanded: open }}
+        disabled={disabled}
+        onPress={composeEventHandlers(onPress, () => setOpen(!open))}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PickerTrigger.displayName = 'PickerTrigger';

package/src/components/picker/styles.ts

@@ -0,0 +1,17 @@
+import { Platform } from 'react-native';
+import { cva } from '@cdx-ui/utils';
+
+/** Keeps the picker popover above app chrome and other absolutely-positioned surfaces. */
+export const PICKER_POPOVER_Z_INDEX = 9999;
+
+export const pickerPopoverContentVariants = cva([
+  'bg-surface-primary',
+  'border border-stroke-secondary',
+  'overflow-hidden',
+  'rounded-[var(--border-radius-default)]',
+  Platform.select({
+    web: 'shadow-sm',
+    default: '',
+  }),
+  'p-3',
+]);

package/src/components/picker/surfaces.tsx

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { ScrollView, View } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import {
+  OverlayContainer,
+  useAnchoredOverlay,
+  useDismissOverlay,
+  useEscapeKey,
+} from '@cdx-ui/primitives';
+import { cn, mergeRefs } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { BottomSheet, useBottomSheet, type BottomSheetModalProps } from '../BottomSheet';
+import { PICKER_POPOVER_Z_INDEX, pickerPopoverContentVariants } from './styles';
+
+// Shared surface wiring for picker compound components.
+
+export function PickerDialogSurface({
+  open,
+  setOpen,
+  registerSurface,
+  children,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'dialog') => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    registerSurface('dialog');
+  }, [registerSurface]);
+
+  return (
+    <Dialog isOpen={open} onOpenChange={setOpen}>
+      {children}
+    </Dialog>
+  );
+}
+
+type PickerBottomSheetSurfaceProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'bottomSheet') => void;
+  children: ReactNode;
+} & Pick<BottomSheetModalProps, 'snapPoints' | 'enableDynamicSizing'>;
+
+export function PickerBottomSheetSurface({
+  open,
+  setOpen,
+  registerSurface,
+  children,
+  snapPoints = ['70%', '90%'],
+  enableDynamicSizing = false,
+}: PickerBottomSheetSurfaceProps) {
+  const { ref, dismiss } = useBottomSheet();
+  const isPresentedRef = useRef(false);
+
+  useEffect(() => {
+    registerSurface('bottomSheet');
+  }, [registerSurface]);
+
+  const handleDismiss = useCallback(() => {
+    isPresentedRef.current = false;
+    setOpen(false);
+  }, [setOpen]);
+
+  const tryPresent = useCallback(() => {
+    if (!open || isPresentedRef.current) {
+      return;
+    }
+    ref.current?.present();
+    isPresentedRef.current = true;
+  }, [open, ref]);
+
+  useEffect(() => {
+    if (!open) {
+      if (isPresentedRef.current) {
+        dismiss();
+        isPresentedRef.current = false;
+      }
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      tryPresent();
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [dismiss, open, tryPresent]);
+
+  return (
+    <BottomSheet.Modal
+      ref={ref}
+      onDismiss={handleDismiss}
+      snapPoints={snapPoints}
+      enableDynamicSizing={enableDynamicSizing}
+    >
+      <BottomSheet.View onLayout={tryPresent}>{children}</BottomSheet.View>
+    </BottomSheet.Modal>
+  );
+}
+
+interface PickerPopoverSurfaceProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  registerSurface: (type: 'popover') => void;
+  anchorRef: RefObject<View | null>;
+  triggerRef?: RefObject<View | null>;
+  children: ReactNode;
+  className?: string;
+}
+
+export function PickerPopoverSurface({
+  open,
+  setOpen,
+  registerSurface,
+  anchorRef,
+  triggerRef,
+  children,
+  className,
+}: PickerPopoverSurfaceProps) {
+  const contentRef = useRef<View>(null);
+  const [dismissEnabled, setDismissEnabled] = useState(false);
+
+  useEffect(() => {
+    registerSurface('popover');
+  }, [registerSurface]);
+
+  useEffect(() => {
+    if (!open) {
+      setDismissEnabled(false);
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      setDismissEnabled(true);
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+
+  const dismiss = useCallback(() => setOpen(false), [setOpen]);
+
+  const { floatingRef, onFloatingLayout, style } = useAnchoredOverlay(anchorRef, open, {
+    placement: 'bottom-start',
+    offset: 4,
+    collisionBehavior: 'flip-shift',
+    width: 'anchor',
+  });
+
+  const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];
+  useDismissOverlay(dismissEnabled, contentRef, excludeRefs, dismiss);
+  useEscapeKey(open, dismiss);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <OverlayContainer
+      onDismiss={dismiss}
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(100)}
+      style={{ zIndex: PICKER_POPOVER_Z_INDEX }}
+    >
+      <View
+        ref={mergeRefs(contentRef, floatingRef)}
+        onLayout={onFloatingLayout}
+        className={cn(pickerPopoverContentVariants(), className)}
+        style={style}
+        accessibilityViewIsModal
+      >
+        <ScrollView scrollEventThrottle={16} showsVerticalScrollIndicator={false}>
+          {children}
+        </ScrollView>
+      </View>
+    </OverlayContainer>
+  );
+}

package/src/globals.d.ts

@@ -0,0 +1 @@
+declare let __DEV__: boolean | undefined;

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+export {
+  useForgeBottomTabScreenOptions,
+  mergeForgeBottomTabScreenOptions,
+  type ForgeReactNavigationBottomTabScreenOptions,
+} from './useForgeBottomTabScreenOptions';

package/src/hooks/useForgeBottomTabScreenOptions.ts

@@ -0,0 +1,245 @@
+/**
+ * useForgeBottomTabScreenOptions
+ *
+ * Returns a `screenOptions` object for **React Navigation bottom tab navigators**
+ * (`@react-navigation/bottom-tabs` v7+), populated with CDX UI design-system
+ * token values.
+ *
+ * CDX UI does not import `@react-navigation` — the consumer passes the returned
+ * object to their own navigator. This keeps the dependency out of
+ * `@cdx-ui/components` and works with any React Navigation tab variant:
+ * `createNativeBottomTabNavigator` (iOS/Android) or `createBottomTabNavigator`
+ * (web/JS).
+ *
+ * **Not compatible with:**
+ * - Expo Router `<NativeTabs>` — uses different prop names
+ * - React Router or DOM tab components — these are not React Navigation
+ *
+ * ## Basic usage
+ *
+ * ```tsx
+ * import { useForgeBottomTabScreenOptions } from '@cdx-ui/components';
+ * import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';
+ *
+ * const Tab = createNativeBottomTabNavigator<AppTabs>();
+ *
+ * function AppTabs() {
+ *   const screenOptions = useForgeBottomTabScreenOptions();
+ *   return (
+ *     <Tab.Navigator screenOptions={screenOptions}>
+ *       <Tab.Screen name="Home" component={HomeScreen} />
+ *     </Tab.Navigator>
+ *   );
+ * }
+ * ```
+ *
+ * ## Overriding individual tokens
+ *
+ * Spread the returned object and override only the keys you need.
+ * Nested style objects (`tabBarLabelStyle`, `tabBarStyle`, `tabBarBadgeStyle`)
+ * must be spread individually to preserve unrelated DS defaults:
+ *
+ * ```tsx
+ * const dsOptions = useForgeBottomTabScreenOptions();
+ * const screenOptions = {
+ *   ...dsOptions,
+ *   tabBarActiveTintColor: '#custom',
+ *   tabBarLabelStyle: { ...dsOptions.tabBarLabelStyle, fontFamily: 'MyFont' },
+ * };
+ * ```
+ *
+ * ## Token variable names
+ *
+ * | screenOption                       | CSS variable                       |
+ * | ---------------------------------- | ---------------------------------- |
+ * | tabBarActiveTintColor              | --color-content-action             |
+ * | tabBarInactiveTintColor            | --color-content-secondary          |
+ * | tabBarStyle.backgroundColor        | --color-surface-primary            |
+ * | tabBarLabelStyle.fontFamily        | --font-body                        |
+ * | tabBarLabelStyle.fontSize          | --text-xs (via `text-xs` class)    |
+ * | tabBarLabelStyle.fontWeight        | --font-weight-medium               |
+ * | tabBarBadgeStyle.backgroundColor   | --color-surface-danger-strong      |
+ *
+ * ## Platform notes
+ *
+ * - `tabBarInactiveTintColor` has no effect on iOS — inactive items always use
+ *   system grey.
+ * - `tabBarStyle.backgroundColor` is ignored on iOS 26+ (liquid glass takes
+ *   over). It is honoured on iOS ≤18 and all Android versions.
+ * - The hook resolves CSS variables via Uniwind's `useCSSVariable`. If the
+ *   Uniwind runtime is not set up (e.g. in a plain Jest test without a CSS
+ *   context), each variable resolves to `undefined` and the hardcoded fallback
+ *   is used instead — fallbacks intentionally match the CDX UI light-theme
+ *   values.
+ * - `tabBarLabelStyle.fontSize` is resolved via Uniwind's
+ *   `useResolveClassNames('text-xs')` rather than reading the rem-valued
+ *   `--text-xs` variable directly. React Navigation v7 requires a numeric
+ *   `fontSize`, and letting Uniwind resolve the class means the rem→px
+ *   conversion uses the consumer's configured rem base (default 16px,
+ *   overridable via the `polyfills.rem` Metro option) instead of a constant
+ *   hardcoded here.
+ */
+import type { TextStyle } from 'react-native';
+import { useCSSVariable, useResolveClassNames } from 'uniwind';
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+/**
+ * The `screenOptions` shape returned by `useForgeBottomTabScreenOptions`.
+ *
+ * These are concrete types (not the broad `StyleProp<…>` React Navigation
+ * uses internally) so consumers get precise IDE completion. The compile-time
+ * drift guard below ensures this type stays assignable to
+ * `BottomTabNavigationOptions` — the TypeScript compiler will error if CDX UI
+ * adds a key or value that React Navigation no longer accepts.
+ *
+ * Pass directly as `screenOptions` on a `createNativeBottomTabNavigator` or
+ * `createBottomTabNavigator` navigator, or spread and override individual keys.
+ */
+export interface ForgeReactNavigationBottomTabScreenOptions {
+  tabBarActiveTintColor: string;
+  tabBarInactiveTintColor: string;
+  tabBarStyle: { backgroundColor: string };
+  tabBarLabelStyle: {
+    fontFamily: string;
+    /** Pixel size — React Navigation requires a number for tab label fontSize. */
+    fontSize: number;
+    fontWeight: TextStyle['fontWeight'];
+  };
+  tabBarBadgeStyle: { backgroundColor: string };
+}
+
+/**
+ * Compile-time drift guard.
+ *
+ * `ForgeReactNavigationBottomTabScreenOptions` must be assignable to
+ * `BottomTabNavigationOptions`. TypeScript checks this assignment at build
+ * time — if React Navigation removes or incompatibly narrows one of our keys,
+ * this line becomes a type error before it reaches consumers.
+ *
+ * The `null as unknown as ...` cast keeps the runtime value `null` so tree-
+ * shakers eliminate the variable from the final bundle entirely.
+ */
+
+const _rnDriftGuard: BottomTabNavigationOptions =
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  null as any as ForgeReactNavigationBottomTabScreenOptions;
+
+// ── Fallbacks ────────────────────────────────────────────────────────────────
+//
+// Resolved light-theme values for each token. Used when useCSSVariable returns
+// undefined (no Uniwind CSS context in scope, e.g. Jest).
+
+const FALLBACKS = {
+  activeTintColor: '#346099', // --color-brand-700 (--color-content-action)
+  inactiveTintColor: '#4a4c4f', // --color-base-800  (--color-content-secondary)
+  fontFamily: 'Inter', // --font-sans           (--font-body)
+  fontSize: 12, // px                    (--text-xs)
+  fontWeight: '500' as TextStyle['fontWeight'], // (--font-weight-medium)
+  backgroundColor: '#ffffff', // --color-white         (--color-surface-primary)
+  badgeBackgroundColor: '#c10007', // --color-red-700       (--color-surface-danger-strong)
+} as const;
+
+/**
+ * Coerces a Uniwind-resolved `fontSize` to a finite pixel number, falling
+ * back when the style could not be resolved (e.g. no Uniwind runtime in Jest).
+ *
+ * `useResolveClassNames('text-xs')` performs the rem→px conversion using
+ * Uniwind's configured rem base, so the value is already numeric on native.
+ * React Native Web may surface string values; unit-less and `px` strings are
+ * accepted, but anything else (`rem`, `em`, `%`) falls back rather than
+ * guessing a rem base here.
+ */
+function toPx(value: string | number | undefined, fallbackPx: number): number {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallbackPx;
+  }
+  if (typeof value !== 'string') return fallbackPx;
+  const trimmed = value.trim();
+  if (!/^-?\d*\.?\d+(px)?$/.test(trimmed)) return fallbackPx;
+  return parseFloat(trimmed);
+}
+
+/**
+ * Coerces a Uniwind `useCSSVariable` fontWeight value to a string.
+ *
+ * `--font-weight-*` variables are emitted as unit-less numbers (e.g. `500`),
+ * and `useCSSVariable` may return them as numbers. React Native's `TextStyle`
+ * accepts numeric fontWeight, but react-native-screens' native bottom tabs
+ * declare the corresponding host prop (`tabBarItemTitleFontWeight`) as a
+ * String — passing a number crashes Android Fabric with
+ * "java.lang.Double cannot be cast to java.lang.String".
+ */
+function toFontWeight(
+  value: string | number | undefined,
+  fallback: TextStyle['fontWeight'],
+): TextStyle['fontWeight'] {
+  if (value === undefined) return fallback;
+  return String(value) as TextStyle['fontWeight'];
+}
+
+// ── Hook ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Returns a `screenOptions` object for **React Navigation bottom tab
+ * navigators** (`@react-navigation/bottom-tabs` v7+), populated with CDX UI
+ * design-system token values.
+ *
+ * Must be called inside a React component or custom hook (React hook rules
+ * apply).
+ */
+/**
+ * Deep-merges consumer overrides into a base `ForgeReactNavigationBottomTabScreenOptions`
+ * object. Nested style objects (`tabBarLabelStyle`, `tabBarStyle`,
+ * `tabBarBadgeStyle`) are merged property-by-property so consumers can override
+ * individual style properties without losing unrelated DS defaults.
+ *
+ * Use with `useForgeBottomTabScreenOptions` to apply targeted overrides:
+ *
+ * ```tsx
+ * const dsOptions = useForgeBottomTabScreenOptions();
+ * const screenOptions = mergeForgeBottomTabScreenOptions(dsOptions, {
+ *   tabBarActiveTintColor: '#custom',
+ *   tabBarLabelStyle: { fontFamily: 'MyFont' }, // fontSize + fontWeight preserved
+ * });
+ * ```
+ */
+export function mergeForgeBottomTabScreenOptions(
+  base: ForgeReactNavigationBottomTabScreenOptions,
+  overrides: Partial<ForgeReactNavigationBottomTabScreenOptions>,
+): ForgeReactNavigationBottomTabScreenOptions {
+  return {
+    ...base,
+    ...overrides,
+    tabBarLabelStyle: { ...base.tabBarLabelStyle, ...overrides.tabBarLabelStyle },
+    tabBarStyle: { ...base.tabBarStyle, ...overrides.tabBarStyle },
+    tabBarBadgeStyle: { ...base.tabBarBadgeStyle, ...overrides.tabBarBadgeStyle },
+  };
+}
+
+export function useForgeBottomTabScreenOptions(): ForgeReactNavigationBottomTabScreenOptions {
+  const activeTintColor = useCSSVariable('--color-content-action');
+  const inactiveTintColor = useCSSVariable('--color-content-secondary');
+  const fontFamily = useCSSVariable('--font-body');
+  const labelTextStyle = useResolveClassNames('text-xs');
+  const fontWeight = useCSSVariable('--font-weight-medium');
+  const backgroundColor = useCSSVariable('--color-surface-primary');
+  const badgeBackgroundColor = useCSSVariable('--color-surface-danger-strong');
+
+  return {
+    tabBarActiveTintColor: String(activeTintColor ?? FALLBACKS.activeTintColor),
+    tabBarInactiveTintColor: String(inactiveTintColor ?? FALLBACKS.inactiveTintColor),
+    tabBarStyle: {
+      backgroundColor: String(backgroundColor ?? FALLBACKS.backgroundColor),
+    },
+    tabBarLabelStyle: {
+      fontFamily: String(fontFamily ?? FALLBACKS.fontFamily),
+      fontSize: toPx(labelTextStyle?.fontSize, FALLBACKS.fontSize),
+      fontWeight: toFontWeight(fontWeight, FALLBACKS.fontWeight),
+    },
+    tabBarBadgeStyle: {
+      backgroundColor: String(badgeBackgroundColor ?? FALLBACKS.badgeBackgroundColor),
+    },
+  };
+}

package/src/index.ts

@@ -1,4 +1,10 @@
 /// <reference types="uniwind/types" preserve="true" />
 export * from './components';
+export * from './hooks';
+export * from './navigation';
+export { ToastProvider, useToast } from './providers/toast';
+export type * from './providers/toast';
+export { ForgeDesignProvider } from './providers/forge-design';
+export type { ForgeDesignConfig, ForgeDesignProviderProps } from './providers/forge-design';
 export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

package/src/navigation/forgeTabIcon.native.ts

@@ -0,0 +1,36 @@
+import type { ForgeTabIcon } from '@cdx-ui/icons/tab-icons';
+import type { ForgeNativeBottomTabIcon, ForgeTabBarIcon } from './types';
+
+/**
+ * forgeTabIcon — iOS/Android implementation (see `forgeTabIcon.ts` for the
+ * full contract and usage example).
+ *
+ * Returns a `tabBarIcon` function for `createNativeBottomTabNavigator` that
+ * resolves the descriptor's pre-rasterized template PNGs: outlined at rest,
+ * filled when focused (iOS only — Android tabs use one static icon and
+ * express selection via tint). `tinted: true` makes the native tab bar apply
+ * `tabBarActiveTintColor` / `tabBarInactiveTintColor` at runtime, so theming
+ * and dark mode flow through `useForgeBottomTabScreenOptions` unchanged.
+ */
+export function forgeTabIcon(icon: ForgeTabIcon): ForgeTabBarIcon {
+  const { native } = icon;
+
+  if (!native) {
+    const name = icon.Component.displayName ?? 'icon';
+    throw new Error(
+      `forgeTabIcon: "${name}" has no native tab assets. Use a generated ` +
+        `descriptor from '@cdx-ui/icons/tab-icons' (curated in the icon ` +
+        `package's tab-icons.config.json), or pass a descriptor with your ` +
+        `own template PNGs: { native: { outlined: require(...), filled: ` +
+        `require(...) } } at a 24dp base size with @2x/@3x variants.`,
+    );
+  }
+
+  const resolve = ({ focused }: { focused: boolean }): ForgeNativeBottomTabIcon => ({
+    type: 'image',
+    source: focused ? native.filled : native.outlined,
+    tinted: true,
+  });
+
+  return resolve as ForgeTabBarIcon;
+}

package/src/navigation/forgeTabIcon.ts

@@ -0,0 +1,33 @@
+import { createElement } from 'react';
+import type { ForgeTabIcon } from '@cdx-ui/icons/tab-icons';
+import type { ForgeTabBarIcon } from './types';
+
+/**
+ * forgeTabIcon — web/JS-navigator implementation.
+ *
+ * Maps a {@link ForgeTabIcon} descriptor to a React Navigation `tabBarIcon`
+ * value that renders the same Forge UI icon on every platform:
+ *
+ * - **Web** (`createBottomTabNavigator`): renders the SVG icon component with
+ *   `filled={focused}` and the navigator-supplied `color`/`size` — pair with
+ *   `useForgeBottomTabScreenOptions` so tints come from design tokens.
+ * - **iOS/Android** (`createNativeBottomTabNavigator`): the `.native` module
+ *   of this file returns a tinted template-image descriptor instead.
+ *
+ * ```tsx
+ * import { useForgeBottomTabScreenOptions, forgeTabIcon } from '@cdx-ui/components';
+ * import { HomeTabIcon } from '@cdx-ui/icons/tab-icons';
+ *
+ * <Tab.Screen
+ *   name="Home"
+ *   component={HomeScreen}
+ *   options={{ title: 'Home', tabBarIcon: forgeTabIcon(HomeTabIcon) }}
+ * />
+ * ```
+ */
+export function forgeTabIcon(icon: ForgeTabIcon): ForgeTabBarIcon {
+  const render = ({ focused, color, size }: { focused: boolean; color: string; size: number }) =>
+    createElement(icon.Component, { filled: focused, color, size });
+
+  return render as ForgeTabBarIcon;
+}

package/src/navigation/index.ts

@@ -0,0 +1,3 @@
+export { forgeTabIcon } from './forgeTabIcon';
+export type { ForgeNativeBottomTabIcon, ForgeTabBarIcon } from './types';
+export type { ForgeTabIcon, ForgeTabIconNativeSources } from '@cdx-ui/icons/tab-icons';