@cdx-ui/components 0.0.1-beta.9 → 0.0.1-beta.91

package/src/components/Toast/types.ts

@@ -0,0 +1,332 @@
+import { View } from 'react-native';
+import type { EntryOrExitLayoutType, WithTimingConfig } from 'react-native-reanimated';
+import type { ToastRootProps } from '@cdx-ui/primitives';
+import { ForgeIcon } from '@cdx-ui/icons';
+import type { AnimationRoot, AnimationValue } from '../../animation';
+import type { ToastComponentProps, ToastShowOptions } from '../../providers/toast';
+import type { ButtonProps } from '../Button';
+import type { IconButtonProps } from '../IconButton';
+import type { IconProps } from '../Icon';
+import { ToastColorProps } from './styles';
+
+/**
+ * Toast color types
+ */
+export type ToastColor = ToastColorProps['color'];
+
+/**
+ * Toast placement types.
+ *
+ * On web, `-start` and `-end` variants position the toast at the
+ * corresponding horizontal edge with a `max-width` of 460 px.
+ * The plain `top` / `bottom` values centre the toast horizontally.
+ *
+ * On native (iOS / Android), `-start` and `-end` degrade gracefully
+ * to edge-to-edge layout identical to their base `top` / `bottom`
+ * counterpart — the toast still spans the full width.
+ */
+export type ToastPlacement =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end';
+
+/**
+ * Animation configuration for toast root component
+ */
+export type ToastRootAnimation = AnimationRoot<{
+  opacity?: AnimationValue<{
+    /**
+     * Opacity interpolation values [start, end]
+     * Controls how fast toast items fade out as they move beyond the visible stack limits.
+     * When toasts are pushed out of view (beyond the last few visible items), their opacity
+     * gradually decreases to create a smooth disappearing effect.
+     * - First value: fully visible opacity (1) for items within visible stack
+     * - Second value: hidden opacity (0) for items pushed out of view
+     * @default [1, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  translateY?: AnimationValue<{
+    /**
+     * Translate Y interpolation values [start, end]
+     * Controls how much of a toast item is visible when it's positioned behind the last visible toast.
+     * This creates a "peek" effect where stacked toasts are slightly offset vertically,
+     * allowing users to see a portion of the toast behind the current one.
+     * - First value: no offset (0) for the last/active toast
+     * - Second value: vertical offset in pixels (10) for toasts behind the last one
+     * Note: The offset direction is automatically adjusted based on placement (top/bottom)
+     * @default [0, 10] (multiplied by placement sign)
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  scale?: AnimationValue<{
+    /**
+     * Scale interpolation values [start, end]
+     * Controls the size scaling of toast items in the stack.
+     * Toasts behind the active one are slightly scaled down to create depth and visual hierarchy.
+     * - First value: normal scale (1) for the active/last toast
+     * - Second value: scaled down value (0.97) for toasts positioned behind
+     * @default [1, 0.97]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 300 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  entering?: AnimationValue<{
+    /**
+     * Custom entering animation for top placement
+     * @default FadeInUp.springify().withInitialValues({ opacity: 1, transform: [{ translateY: -100 }] }).mass(3)
+     */
+    top?: EntryOrExitLayoutType;
+    /**
+     * Custom entering animation for bottom placement
+     * @default FadeInDown.springify().withInitialValues({ opacity: 1, transform: [{ translateY: 100 }] }).mass(3)
+     */
+    bottom?: EntryOrExitLayoutType;
+  }>;
+  exiting?: AnimationValue<{
+    /**
+     * Custom exiting animation for top placement
+     * @default Keyframe animation with translateY: -100, scale: 0.97, opacity: 0.5
+     */
+    top?: EntryOrExitLayoutType;
+    /**
+     * Custom exiting animation for bottom placement
+     * @default Keyframe animation with translateY: 100, scale: 0.97, opacity: 0.5
+     */
+    bottom?: EntryOrExitLayoutType;
+  }>;
+}>;
+
+/**
+ * Props for the Toast.Root component
+ */
+export interface ToastProps extends ToastRootProps, Omit<ToastComponentProps, 'id'> {
+  /**
+   * Color of the toast
+   * @default 'default'
+   */
+  color?: ToastColor;
+  /**
+   * Placement of the toast
+   * @default 'bottom'
+   */
+  placement?: ToastPlacement;
+  /**
+   * Additional CSS class for the toast container
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `opacity` - Animated for visibility transitions when toasts are pushed beyond visible stack limits
+   * - `transform` (translateY) - Animated for vertical position transitions when toasts are stacked, and for swipe-to-dismiss gestures
+   * - `transform` (scale) - Animated for size scaling transitions when toasts are stacked (toasts behind active one are scaled down)
+   * - `height` - Animated for height transitions when toast content changes
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Toast.Root
+   *   animation={{
+   *     opacity: {
+   *       value: [1, 0],
+   *       timingConfig: { duration: 300 }
+   *     },
+   *     translateY: {
+   *       value: [0, 10],
+   *       timingConfig: { duration: 300 }
+   *     },
+   *     scale: {
+   *       value: [1, 0.97],
+   *       timingConfig: { duration: 300 }
+   *     }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+  /**
+   * Animation configuration for toast
+   * - `false` or `"disabled"`: Disable only root animations
+   * - `"disable-all"`: Disable all animations including children
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: ToastRootAnimation;
+  /**
+   * Whether the toast can be swiped to dismiss and dragged with rubber effect
+   * @default true
+   */
+  isSwipeable?: boolean;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Props for the Toast.Title component
+ */
+export interface ToastTitleProps {
+  /**
+   * Content to be rendered as title
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS class for the title
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Toast.Description component
+ */
+export interface ToastDescriptionProps {
+  /**
+   * Content to be rendered as description
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional CSS class for the description
+   */
+  className?: string;
+}
+
+/**
+ * Props for the Toast.Icon component
+ */
+export interface ToastIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set.
+   */
+  as?: IconProps['as'];
+  /**
+   * Child element to render when `asChild` is set.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Props for the Toast.Action component
+ */
+export type ToastActionProps = ButtonProps;
+
+/**
+ * Props for the Toast.Close component
+ */
+export type ToastCloseProps = Omit<IconButtonProps, 'as'> & {
+  /**
+   * Forge icon component to render (icon-only control).
+   * @default CloseIcon
+   */
+  as?: ForgeIcon;
+};
+
+/**
+ * Context values shared between Toast components
+ */
+export interface ToastContextValue {
+  /**
+   * Color of the toast
+   */
+  color?: ToastColor;
+  /**
+   * Function to hide the toast
+   */
+  hide?: (ids?: (string & {}) | string[] | 'all') => void;
+  /**
+   * ID of the toast
+   */
+  id?: string;
+}
+
+/**
+ * Ref type for the Toast.Root component
+ */
+export type ToastRootRef = React.ComponentRef<typeof View>;
+
+/**
+ * Props for useToastRootAnimation hook
+ * Picks required properties from ToastRootProps and adds id from ToastComponentProps
+ */
+export type UseToastRootAnimationOptions = Pick<
+  ToastProps,
+  | 'animation'
+  | 'index'
+  | 'total'
+  | 'heights'
+  | 'placement'
+  | 'hide'
+  | 'isSwipeable'
+  | 'maxVisibleToasts'
+> &
+  Pick<ToastComponentProps, 'id'>;
+
+/**
+ * Props for the DefaultToast component
+ * Used internally when showing toasts with string or config object (without component)
+ */
+export interface DefaultToastProps extends ToastComponentProps {
+  /**
+   * Color of the toast
+   * @default 'default'
+   */
+  color?: ToastProps['color'];
+  /**
+   * Placement of the toast
+   * @default 'bottom'
+   */
+  placement?: ToastProps['placement'];
+  /**
+   * Animation configuration for toast
+   */
+  animation?: ToastProps['animation'];
+  /**
+   * Whether the toast can be swiped to dismiss and dragged with rubber effect
+   */
+  isSwipeable?: ToastProps['isSwipeable'];
+  /**
+   * Label text for the toast
+   */
+  label?: string;
+  /**
+   * Description text for the toast
+   */
+  description?: string;
+  /**
+   * Action button label text
+   */
+  actionLabel?: string;
+  /**
+   * Callback function called when the action button is pressed
+   * Receives show and hide functions for programmatic toast control
+   */
+  onActionPress?: (helpers: {
+    show: (options: string | ToastShowOptions) => string;
+    hide: (ids?: (string & {}) | string[] | 'all') => void;
+  }) => void;
+  /**
+   * Forge icon component to display in the toast.
+   * Rendered via `Toast.Icon` internally — inherits color-aware coloring automatically.
+   */
+  icon?: ForgeIcon;
+}

package/src/components/VirtualizedList/index.tsx

@@ -1,9 +1,19 @@
 import type { ForwardedRef, ReactElement } from 'react';
 import { forwardRef } from 'react';
-import { FlashList, type FlashListProps, type FlashListRef } from '@shopify/flash-list';
+import {
+  FlashList,
+  type FlashListProps,
+  type FlashListRef,
+  type ListRenderItem,
+  type ListRenderItemInfo,
+  type RenderTarget,
+  type RenderTargetOptions,
+  type ViewToken,
+} from '@shopify/flash-list';
 
 export type VirtualizedListRef = FlashListRef<unknown>;
 export type VirtualizedListProps<T = unknown> = FlashListProps<T>;
+export type { ListRenderItem, ListRenderItemInfo, RenderTarget, RenderTargetOptions, ViewToken };
 
 function VirtualizedListInner<T>(
   props: VirtualizedListProps<T>,

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
 export * from './BottomSheet';
@@ -6,7 +7,9 @@ export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './CurrencyInput';
 export * from './Dialog';
+export * from './Divider';
 export * from './Field';
 export * from './Form';
 export * from './Image';
@@ -15,12 +18,18 @@ export * from './OtpInput';
 export * from './Link';
 export * from './ListItem';
 export * from './ProgressBar';
+export * from './Skeleton';
 export * from './ProgressSegmented';
+export * from './Radio';
+export * from './ScopedTheme';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';
+export * from './Tile';
+export * from './Toast';
 export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
 export * from './IconButton';
+export * from './QuickActionButton';

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,8 @@
 /// <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 { 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';