@cdx-ui/components 0.0.1-beta.5 → 0.0.1-beta.51

package/src/components/Tile/index.tsx

@@ -0,0 +1,296 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  createTile,
+  type ITileGroupMultipleProps,
+  type ITileGroupSingleProps,
+  type ITileIndicatorProps,
+  type ITileLeadingSlotProps,
+  type ITileProps,
+  type ITileTrailingSlotProps,
+  useTileContext,
+} from '@cdx-ui/primitives';
+import { Check } from '@cdx-ui/icons';
+import { dataAttributes } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { checkboxIndicatorVariants, checkboxIconVariants } from '../Checkbox/styles';
+import { Icon } from '../Icon';
+import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
+import {
+  tileContentVariants,
+  tileDescriptionVariants,
+  tileGroupVariants,
+  tileIndicatorVariants,
+  tileLeadingSlotVariants,
+  tileRootVariants,
+  tileTitleVariants,
+  tileTrailingSlotVariants,
+  type TileGroupVariantProps,
+  type TileVariantProps,
+} from './styles';
+
+const TILE_SCOPE = 'TILE';
+const TILE_GROUP_SCOPE = 'TILE_GROUP';
+
+const RootPressable = withStyleContext(Pressable, TILE_SCOPE);
+const GroupView = withStyleContext(View, TILE_GROUP_SCOPE);
+
+interface TileGroupStyleContext {
+  shape?: TileVariantProps['shape'];
+}
+
+const useTileGroupStyleContext = (): TileGroupStyleContext => {
+  // `useStyleContext` types the result as a `Record`, but at runtime the value is
+  // `undefined` when no provider is in scope (e.g. standalone Tile). Cast through
+  // `unknown` to acknowledge that.
+  const ctx = useStyleContext(TILE_GROUP_SCOPE) as unknown as TileGroupStyleContext | undefined;
+  return ctx ?? {};
+};
+
+const TilePrimitive = createTile({
+  Pressable: RootPressable,
+  Group: GroupView,
+  LeadingSlot: View,
+  Content: View,
+  Title: Text,
+  Description: Text,
+  Indicator: View,
+  TrailingSlot: View,
+});
+
+// =============================================================================
+// TILE GROUP
+// =============================================================================
+
+/**
+ * Discriminated union mirroring `ITileGroupProps`, with `className` and layout variants added at
+ * the styled layer. Distributing the intersection across each branch keeps `interface … extends`
+ * ergonomics and avoids tripping `@typescript-eslint` on `(union) & { ... }`.
+ *
+ * `direction` and `spacing` constrain the group layout to the three supported patterns:
+ * - `direction="column"` + `spacing="default"` — vertical stack with gaps (default).
+ * - `direction="column"` + `spacing="none"` — tight vertical stack (rows touch).
+ * - `direction="row"` + `spacing="default"` — side-by-side horizontal layout.
+ *
+ * `shape` (when set) is propagated to child `Tile`s via `withStyleContext`, matching the
+ * Avatar size-propagation pattern. A per-tile `shape` prop overrides the inherited value.
+ */
+export interface TileGroupSingleProps extends ITileGroupSingleProps, TileGroupVariantProps {
+  className?: string;
+  /** Visual shape inherited by child `Tile`s. Per-tile `shape` overrides this. */
+  shape?: TileVariantProps['shape'];
+}
+export interface TileGroupMultipleProps extends ITileGroupMultipleProps, TileGroupVariantProps {
+  className?: string;
+  /** Visual shape inherited by child `Tile`s. Per-tile `shape` overrides this. */
+  shape?: TileVariantProps['shape'];
+}
+export type TileGroupProps = TileGroupSingleProps | TileGroupMultipleProps;
+
+const TileGroup = forwardRef<View, TileGroupProps>(
+  ({ className, style, children, direction, spacing, shape, ...props }, ref) => (
+    <TilePrimitive.Group
+      ref={ref as never}
+      className={cn(tileGroupVariants({ direction, spacing }), className)}
+      style={style}
+      context={{ shape }}
+      {...props}
+    >
+      {children}
+    </TilePrimitive.Group>
+  ),
+);
+
+TileGroup.displayName = 'Tile.Group';
+
+// =============================================================================
+// TILE ROOT
+// =============================================================================
+
+export interface TileProps extends ITileProps, TileVariantProps {
+  className?: string;
+}
+
+const TileRoot = forwardRef<View, TileProps>(
+  ({ shape: shapeProp, showSeparator, className, style, context, ...props }, ref) => {
+    const { shape: inheritedShape } = useTileGroupStyleContext();
+    const shape = shapeProp ?? inheritedShape ?? 'card';
+    const computedClassName = cn(tileRootVariants({ shape, showSeparator }), className);
+
+    return (
+      <TilePrimitive
+        ref={ref as never}
+        className={computedClassName}
+        context={{ ...context, shape }}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+TileRoot.displayName = 'Tile';
+
+// =============================================================================
+// SLOTS
+// =============================================================================
+
+export interface TileLeadingSlotProps extends ITileLeadingSlotProps {
+  className?: string;
+}
+
+const TileLeadingSlot = forwardRef<View, TileLeadingSlotProps>(
+  ({ className, style, ...props }, ref) => (
+    <TilePrimitive.LeadingSlot
+      ref={ref as never}
+      className={cn(tileLeadingSlotVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+TileLeadingSlot.displayName = 'Tile.LeadingSlot';
+
+export interface TileContentProps extends ViewProps {
+  className?: string;
+}
+
+const TileContent = forwardRef<View, TileContentProps>(({ className, style, ...props }, ref) => (
+  <TilePrimitive.Content
+    ref={ref as never}
+    className={cn(tileContentVariants(), className)}
+    style={style}
+    {...props}
+  />
+));
+
+TileContent.displayName = 'Tile.Content';
+
+export interface TileTitleProps extends TextProps {
+  className?: string;
+}
+
+const TileTitle = forwardRef<Text, TileTitleProps>(
+  ({ className, style, numberOfLines = 1, ...props }, ref) => (
+    <TilePrimitive.Title
+      ref={ref as never}
+      className={cn(tileTitleVariants(), className)}
+      style={style}
+      numberOfLines={numberOfLines}
+      {...props}
+    />
+  ),
+);
+
+TileTitle.displayName = 'Tile.Title';
+
+export interface TileDescriptionProps extends TextProps {
+  className?: string;
+}
+
+const TileDescription = forwardRef<Text, TileDescriptionProps>(
+  ({ className, style, ...props }, ref) => (
+    <TilePrimitive.Description
+      ref={ref as never}
+      className={cn(tileDescriptionVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+TileDescription.displayName = 'Tile.Description';
+
+/**
+ * Decorative selection affordance. Renders pure CVA-styled Views — no interactive hooks,
+ * no nested Pressable, zero runtime overhead. The Tile root owns the press target and
+ * ARIA role; this subtree is `aria-hidden` via `createTileIndicator`.
+ *
+ * The visual is inferred from the tile context: `single` (radio semantics) → radio ring,
+ * `multiple` (checkbox semantics) → checkbox square. An explicit `indicatorType` prop
+ * overrides — primarily for standalone tiles that want a radio-style visual.
+ */
+function TileIndicatorVisual({ indicatorType }: { indicatorType?: 'radio' | 'checkbox' }) {
+  const { isSelected, isDisabled, selectionType } = useTileContext();
+  const effectiveType: 'radio' | 'checkbox' =
+    indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
+  const stateAttrs = dataAttributes({ checked: isSelected, disabled: isDisabled });
+
+  if (effectiveType === 'radio') {
+    return (
+      <View className={radioIndicatorVariants()} {...stateAttrs}>
+        <View
+          className={radioInnerDotVariants()}
+          {...dataAttributes({ checked: isSelected, invalid: false })}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View className={cn(checkboxIndicatorVariants())} {...stateAttrs}>
+      {isSelected && <Icon as={Check} className={checkboxIconVariants()} />}
+    </View>
+  );
+}
+
+export interface TileIndicatorProps extends ITileIndicatorProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const TileIndicator = forwardRef<View, TileIndicatorProps>(
+  ({ className, children, style, indicatorType, ...props }, ref) => (
+    <TilePrimitive.Indicator
+      ref={ref as never}
+      className={cn(tileIndicatorVariants(), className)}
+      style={style}
+      indicatorType={indicatorType}
+      {...props}
+    >
+      {children ?? <TileIndicatorVisual indicatorType={indicatorType} />}
+    </TilePrimitive.Indicator>
+  ),
+);
+
+TileIndicator.displayName = 'Tile.Indicator';
+
+export interface TileTrailingSlotProps extends ITileTrailingSlotProps {
+  className?: string;
+}
+
+const TileTrailingSlot = forwardRef<View, TileTrailingSlotProps>(
+  ({ className, style, ...props }, ref) => (
+    <TilePrimitive.TrailingSlot
+      ref={ref as never}
+      className={cn(tileTrailingSlotVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+TileTrailingSlot.displayName = 'Tile.TrailingSlot';
+
+type TileCompound = typeof TileRoot & {
+  Group: typeof TileGroup;
+  LeadingSlot: typeof TileLeadingSlot;
+  Content: typeof TileContent;
+  Title: typeof TileTitle;
+  Description: typeof TileDescription;
+  Indicator: typeof TileIndicator;
+  TrailingSlot: typeof TileTrailingSlot;
+};
+
+export const Tile = Object.assign(TileRoot, {
+  Group: TileGroup,
+  LeadingSlot: TileLeadingSlot,
+  Content: TileContent,
+  Title: TileTitle,
+  Description: TileDescription,
+  Indicator: TileIndicator,
+  TrailingSlot: TileTrailingSlot,
+}) as TileCompound;
+
+export { useTileContext };

package/src/components/Tile/styles.ts

@@ -0,0 +1,82 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+export const tileGroupVariants = cva(['flex w-full'], {
+  variants: {
+    direction: {
+      column: 'flex-col',
+      row: 'flex-row',
+    },
+    spacing: {
+      default: 'gap-2',
+      none: 'gap-0',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    spacing: 'default',
+  },
+});
+
+export type TileGroupVariantProps = VariantProps<typeof tileGroupVariants>;
+
+export const tileRootVariants = cva(
+  [
+    'flex-row self-stretch gap-3 px-4 py-3',
+    'data-[disabled=true]:opacity-50',
+    TRANSITION_COLORS,
+    Platform.select({
+      web: [
+        'outline-none',
+        'data-[hover=true]:data-[disabled=false]:bg-surface-action-tint-hover',
+        'data-[active=true]:data-[disabled=false]:data-[hover=true]:bg-surface-action-tint-active',
+        'data-[hover=true]:data-[disabled=false]:data-[state=unselected]:border-stroke-action',
+        'focus-visible:data-[disabled=false]:ring-2 focus-visible:data-[disabled=false]:ring-stroke-focus focus-visible:data-[disabled=false]:ring-offset-2',
+      ].join(' '),
+      default: [
+        'data-[active=true]:bg-surface-action-tint-hover',
+        'data-[active=true]:border-stroke-action',
+      ].join(' '),
+    }),
+  ],
+  {
+    variants: {
+      shape: {
+        flat: 'rounded-none border-0 bg-transparent',
+        card: [
+          'rounded-[var(--border-radius-default)] border-1 border-solid',
+          'border-stroke-secondary',
+          'bg-surface-primary',
+          'data-[state=selected]:border-stroke-action',
+          'data-[state=selected]:border-1.5',
+          'data-[state=selected]:bg-surface-action-tint',
+        ].join(' '),
+      },
+      showSeparator: {
+        true: [
+          'border-b border-solid border-stroke-secondary! native:data-[active=true]:border-stroke-secondary', // Override border-stroke-action on hover
+        ],
+        false: '',
+      },
+    },
+    defaultVariants: {
+      shape: 'card',
+      showSeparator: false,
+    },
+  },
+);
+
+export const tileLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const tileTrailingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const tileContentVariants = cva(['min-w-0 flex-1 flex-col gap-0.5 no-underline']);
+
+export const tileTitleVariants = cva(['text-base font-medium text-content-primary no-underline']);
+
+export const tileDescriptionVariants = cva(['text-sm text-content-secondary no-underline']);
+
+export const tileIndicatorVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export type TileVariantProps = VariantProps<typeof tileRootVariants>;

package/src/components/index.ts

@@ -16,9 +16,12 @@ export * from './Link';
 export * from './ListItem';
 export * from './ProgressBar';
 export * from './ProgressSegmented';
+export * from './Radio';
+export * from './ScopedTheme';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tile';
 export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';

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.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+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,6 @@
 /// <reference types="uniwind/types" preserve="true" />
 export * from './components';
+export * from './hooks';
+export * from './navigation';
 export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

package/src/metro/withCdxMetroConfig.ts

@@ -1,29 +1,4 @@
-import type { MetroConfig } from 'metro-config';
-import { withUniwindConfig } from 'uniwind/metro';
-
-export interface CdxMetroConfigOptions {
-  /** Path to the CSS entry file (e.g., `'./global.css'`). */
-  cssEntryFile: string;
-  /** Path where generated Tailwind class type definitions are written. */
-  generatedTypesFile?: string;
-}
-
-/**
- * Wraps a Metro config with CDX UI's styling-layer configuration.
- *
- * Today this delegates to Uniwind. If the styling layer is swapped (see
- * `docs/research/uniwind-to-nativewind-contingency.md`), only the internals
- * of this function change — consuming Metro configs stay the same.
- *
- * Must be the **outermost** Metro config wrapper (after any other wrappers
- * like `withStorybook`).
- */
-export function withCdxMetroConfig<T extends MetroConfig>(
-  config: T,
-  options: CdxMetroConfigOptions,
-): T {
-  return withUniwindConfig(config, {
-    cssEntryFile: options.cssEntryFile,
-    dtsFile: options.generatedTypesFile,
-  }) as T;
-}
+/** @deprecated Use `withForgeMetroConfig` instead. Will be removed in a future major release. */
+export { withForgeMetroConfig as withCdxMetroConfig } from './withForgeMetroConfig';
+/** @deprecated Use `ForgeMetroConfigOptions` instead. Will be removed in a future major release. */
+export type { ForgeMetroConfigOptions as CdxMetroConfigOptions } from './withForgeMetroConfig';