@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.70

package/lib/module/hooks/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { useForgeBottomTabScreenOptions, mergeForgeBottomTabScreenOptions } from './useForgeBottomTabScreenOptions';
+//# sourceMappingURL=index.js.map

package/lib/module/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useForgeBottomTabScreenOptions","mergeForgeBottomTabScreenOptions"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;AAAA,SACEA,8BAA8B,EAC9BC,gCAAgC,QAE3B,kCAAkC","ignoreList":[]}

package/lib/module/hooks/useForgeBottomTabScreenOptions.js

@@ -0,0 +1,242 @@
+"use strict";
+
+/**
+ * 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 { useCSSVariable, useResolveClassNames } from 'uniwind';
+
+// ── 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.
+ */
+
+/**
+ * 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 =
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+null;
+
+// ── 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',
+  // (--font-weight-medium)
+  backgroundColor: '#ffffff',
+  // --color-white         (--color-surface-primary)
+  badgeBackgroundColor: '#c10007' // --color-red-700       (--color-surface-danger-strong)
+};
+
+/**
+ * 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, fallbackPx) {
+  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, fallback) {
+  if (value === undefined) return fallback;
+  return String(value);
+}
+
+// ── 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, overrides) {
+  return {
+    ...base,
+    ...overrides,
+    tabBarLabelStyle: {
+      ...base.tabBarLabelStyle,
+      ...overrides.tabBarLabelStyle
+    },
+    tabBarStyle: {
+      ...base.tabBarStyle,
+      ...overrides.tabBarStyle
+    },
+    tabBarBadgeStyle: {
+      ...base.tabBarBadgeStyle,
+      ...overrides.tabBarBadgeStyle
+    }
+  };
+}
+export function useForgeBottomTabScreenOptions() {
+  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)
+    }
+  };
+}
+//# sourceMappingURL=useForgeBottomTabScreenOptions.js.map

package/lib/module/hooks/useForgeBottomTabScreenOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCSSVariable","useResolveClassNames","_rnDriftGuard","FALLBACKS","activeTintColor","inactiveTintColor","fontFamily","fontSize","fontWeight","backgroundColor","badgeBackgroundColor","toPx","value","fallbackPx","Number","isFinite","trimmed","trim","test","parseFloat","toFontWeight","fallback","undefined","String","mergeForgeBottomTabScreenOptions","base","overrides","tabBarLabelStyle","tabBarStyle","tabBarBadgeStyle","useForgeBottomTabScreenOptions","labelTextStyle","tabBarActiveTintColor","tabBarInactiveTintColor"],"sourceRoot":"../../../src","sources":["hooks/useForgeBottomTabScreenOptions.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,EAAEC,oBAAoB,QAAQ,SAAS;;AAG9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,aAAyC;AAC7C;AACA,IAAyD;;AAE3D;AACA;AACA;AACA;;AAEA,MAAMC,SAAS,GAAG;EAChBC,eAAe,EAAE,SAAS;EAAE;EAC5BC,iBAAiB,EAAE,SAAS;EAAE;EAC9BC,UAAU,EAAE,OAAO;EAAE;EACrBC,QAAQ,EAAE,EAAE;EAAE;EACdC,UAAU,EAAE,KAAgC;EAAE;EAC9CC,eAAe,EAAE,SAAS;EAAE;EAC5BC,oBAAoB,EAAE,SAAS,CAAE;AACnC,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,IAAIA,CAACC,KAAkC,EAAEC,UAAkB,EAAU;EAC5E,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE;IAC7B,OAAOE,MAAM,CAACC,QAAQ,CAACH,KAAK,CAAC,GAAGA,KAAK,GAAGC,UAAU;EACpD;EACA,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE,OAAOC,UAAU;EAChD,MAAMG,OAAO,GAAGJ,KAAK,CAACK,IAAI,CAAC,CAAC;EAC5B,IAAI,CAAC,oBAAoB,CAACC,IAAI,CAACF,OAAO,CAAC,EAAE,OAAOH,UAAU;EAC1D,OAAOM,UAAU,CAACH,OAAO,CAAC;AAC5B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASI,YAAYA,CACnBR,KAAkC,EAClCS,QAAiC,EACR;EACzB,IAAIT,KAAK,KAAKU,SAAS,EAAE,OAAOD,QAAQ;EACxC,OAAOE,MAAM,CAACX,KAAK,CAAC;AACtB;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASY,gCAAgCA,CAC9CC,IAAgD,EAChDC,SAA8D,EAClB;EAC5C,OAAO;IACL,GAAGD,IAAI;IACP,GAAGC,SAAS;IACZC,gBAAgB,EAAE;MAAE,GAAGF,IAAI,CAACE,gBAAgB;MAAE,GAAGD,SAAS,CAACC;IAAiB,CAAC;IAC7EC,WAAW,EAAE;MAAE,GAAGH,IAAI,CAACG,WAAW;MAAE,GAAGF,SAAS,CAACE;IAAY,CAAC;IAC9DC,gBAAgB,EAAE;MAAE,GAAGJ,IAAI,CAACI,gBAAgB;MAAE,GAAGH,SAAS,CAACG;IAAiB;EAC9E,CAAC;AACH;AAEA,OAAO,SAASC,8BAA8BA,CAAA,EAA+C;EAC3F,MAAM1B,eAAe,GAAGJ,cAAc,CAAC,wBAAwB,CAAC;EAChE,MAAMK,iBAAiB,GAAGL,cAAc,CAAC,2BAA2B,CAAC;EACrE,MAAMM,UAAU,GAAGN,cAAc,CAAC,aAAa,CAAC;EAChD,MAAM+B,cAAc,GAAG9B,oBAAoB,CAAC,SAAS,CAAC;EACtD,MAAMO,UAAU,GAAGR,cAAc,CAAC,sBAAsB,CAAC;EACzD,MAAMS,eAAe,GAAGT,cAAc,CAAC,yBAAyB,CAAC;EACjE,MAAMU,oBAAoB,GAAGV,cAAc,CAAC,+BAA+B,CAAC;EAE5E,OAAO;IACLgC,qBAAqB,EAAET,MAAM,CAACnB,eAAe,IAAID,SAAS,CAACC,eAAe,CAAC;IAC3E6B,uBAAuB,EAAEV,MAAM,CAAClB,iBAAiB,IAAIF,SAAS,CAACE,iBAAiB,CAAC;IACjFuB,WAAW,EAAE;MACXnB,eAAe,EAAEc,MAAM,CAACd,eAAe,IAAIN,SAAS,CAACM,eAAe;IACtE,CAAC;IACDkB,gBAAgB,EAAE;MAChBrB,UAAU,EAAEiB,MAAM,CAACjB,UAAU,IAAIH,SAAS,CAACG,UAAU,CAAC;MACtDC,QAAQ,EAAEI,IAAI,CAACoB,cAAc,EAAExB,QAAQ,EAAEJ,SAAS,CAACI,QAAQ,CAAC;MAC5DC,UAAU,EAAEY,YAAY,CAACZ,UAAU,EAAEL,SAAS,CAACK,UAAU;IAC3D,CAAC;IACDqB,gBAAgB,EAAE;MAChBpB,eAAe,EAAEc,MAAM,CAACb,oBAAoB,IAAIP,SAAS,CAACO,oBAAoB;IAChF;EACF,CAAC;AACH","ignoreList":[]}

package/lib/module/index.js

@@ -2,6 +2,8 @@
 
 /// <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';
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","ScrollView","KeyboardAvoidingView","SafeAreaView","useSafeAreaInsets"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,cAAc,cAAc;AAC5B,SAASA,IAAI,EAAEC,UAAU,EAAEC,oBAAoB,QAAQ,cAAc;AACrE,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,gCAAgC","ignoreList":[]}
+{"version":3,"names":["View","ScrollView","KeyboardAvoidingView","SafeAreaView","useSafeAreaInsets"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,SAASA,IAAI,EAAEC,UAAU,EAAEC,oBAAoB,QAAQ,cAAc;AACrE,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,gCAAgC","ignoreList":[]}

package/lib/module/metro/withCdxMetroConfig.js

@@ -1,20 +1,6 @@
 "use strict";
 
-import { withUniwindConfig } from 'uniwind/metro';
-/**
- * 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(config, options) {
-  return withUniwindConfig(config, {
-    cssEntryFile: options.cssEntryFile,
-    dtsFile: options.generatedTypesFile
-  });
-}
+/** @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. */
 //# sourceMappingURL=withCdxMetroConfig.js.map

package/lib/module/metro/withCdxMetroConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["withUniwindConfig","withCdxMetroConfig","config","options","cssEntryFile","dtsFile","generatedTypesFile"],"sourceRoot":"../../../src","sources":["metro/withCdxMetroConfig.ts"],"mappings":";;AACA,SAASA,iBAAiB,QAAQ,eAAe;AASjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAChCC,MAAS,EACTC,OAA8B,EAC3B;EACH,OAAOH,iBAAiB,CAACE,MAAM,EAAE;IAC/BE,YAAY,EAAED,OAAO,CAACC,YAAY;IAClCC,OAAO,EAAEF,OAAO,CAACG;EACnB,CAAC,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["withForgeMetroConfig","withCdxMetroConfig"],"sourceRoot":"../../../src","sources":["metro/withCdxMetroConfig.ts"],"mappings":";;AAAA;AACA,SAASA,oBAAoB,IAAIC,kBAAkB,QAAQ,wBAAwB;AACnF","ignoreList":[]}

package/lib/module/metro/withForgeMetroConfig.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import { withUniwindConfig } from 'uniwind/metro';
+/**
+ * Wraps a Metro config with Forge 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 withForgeMetroConfig(config, options) {
+  return withUniwindConfig(config, {
+    cssEntryFile: options.cssEntryFile,
+    dtsFile: options.generatedTypesFile
+  });
+}
+//# sourceMappingURL=withForgeMetroConfig.js.map

package/lib/module/metro/withForgeMetroConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["withUniwindConfig","withForgeMetroConfig","config","options","cssEntryFile","dtsFile","generatedTypesFile"],"sourceRoot":"../../../src","sources":["metro/withForgeMetroConfig.ts"],"mappings":";;AACA,SAASA,iBAAiB,QAAQ,eAAe;AASjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAClCC,MAAS,EACTC,OAAgC,EAC7B;EACH,OAAOH,iBAAiB,CAACE,MAAM,EAAE;IAC/BE,YAAY,EAAED,OAAO,CAACC,YAAY;IAClCC,OAAO,EAAEF,OAAO,CAACG;EACnB,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/module/navigation/forgeTabIcon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import { createElement } from 'react';
+/**
+ * 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) {
+  const render = ({
+    focused,
+    color,
+    size
+  }) => /*#__PURE__*/createElement(icon.Component, {
+    filled: focused,
+    color,
+    size
+  });
+  return render;
+}
+//# sourceMappingURL=forgeTabIcon.js.map

package/lib/module/navigation/forgeTabIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createElement","forgeTabIcon","icon","render","focused","color","size","Component","filled"],"sourceRoot":"../../../src","sources":["navigation/forgeTabIcon.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,OAAO;AAIrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAACC,IAAkB,EAAmB;EAChE,MAAMC,MAAM,GAAGA,CAAC;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAwD,CAAC,kBACzFN,aAAa,CAACE,IAAI,CAACK,SAAS,EAAE;IAAEC,MAAM,EAAEJ,OAAO;IAAEC,KAAK;IAAEC;EAAK,CAAC,CAAC;EAEjE,OAAOH,MAAM;AACf","ignoreList":[]}

package/lib/module/navigation/forgeTabIcon.native.js

@@ -0,0 +1,31 @@
+"use strict";
+
+/**
+ * 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) {
+  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
+  }) => ({
+    type: 'image',
+    source: focused ? native.filled : native.outlined,
+    tinted: true
+  });
+  return resolve;
+}
+//# sourceMappingURL=forgeTabIcon.native.js.map

package/lib/module/navigation/forgeTabIcon.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forgeTabIcon","icon","native","name","Component","displayName","Error","resolve","focused","type","source","filled","outlined","tinted"],"sourceRoot":"../../../src","sources":["navigation/forgeTabIcon.native.ts"],"mappings":";;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAACC,IAAkB,EAAmB;EAChE,MAAM;IAAEC;EAAO,CAAC,GAAGD,IAAI;EAEvB,IAAI,CAACC,MAAM,EAAE;IACX,MAAMC,IAAI,GAAGF,IAAI,CAACG,SAAS,CAACC,WAAW,IAAI,MAAM;IACjD,MAAM,IAAIC,KAAK,CACb,kBAAkBH,IAAI,8CAA8C,GAClE,iEAAiE,GACjE,mEAAmE,GACnE,iEAAiE,GACjE,6DACJ,CAAC;EACH;EAEA,MAAMI,OAAO,GAAGA,CAAC;IAAEC;EAA8B,CAAC,MAAgC;IAChFC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAEF,OAAO,GAAGN,MAAM,CAACS,MAAM,GAAGT,MAAM,CAACU,QAAQ;IACjDC,MAAM,EAAE;EACV,CAAC,CAAC;EAEF,OAAON,OAAO;AAChB","ignoreList":[]}

package/lib/module/navigation/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { forgeTabIcon } from './forgeTabIcon';
+//# sourceMappingURL=index.js.map

package/lib/module/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forgeTabIcon"],"sourceRoot":"../../../src","sources":["navigation/index.ts"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,gBAAgB","ignoreList":[]}

package/lib/module/navigation/types.js

@@ -0,0 +1,36 @@
+"use strict";
+
+/**
+ * Structural mirror of the `image` arm of `NativeBottomTabIcon` from
+ * `@react-navigation/bottom-tabs/unstable`. Declared locally so
+ * `@cdx-ui/components` carries no runtime React Navigation dependency —
+ * the drift guards below fail the build if the upstream shape changes.
+ */
+
+/**
+ * The value `forgeTabIcon()` returns — callable as `tabBarIcon` on **both**
+ * React Navigation bottom tab navigators. The intersection carries both call
+ * signatures; the platform-split implementation guarantees the matching one
+ * at runtime:
+ *
+ * - `createBottomTabNavigator` (web/JS) invokes it with
+ *   `{ focused, color, size }` and renders the returned element.
+ * - `createNativeBottomTabNavigator` (iOS/Android) invokes it with
+ *   `{ focused }` and receives a native icon descriptor.
+ */
+
+/**
+ * Compile-time drift guards (see `useForgeBottomTabScreenOptions` for the
+ * pattern): `ForgeTabBarIcon` must stay assignable to the `tabBarIcon`
+ * option of both navigators. The `null as any` casts keep the runtime
+ * values `null` so tree-shakers eliminate them entirely.
+ */
+
+const _rnDriftGuardWeb =
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+null;
+const _rnDriftGuardNative =
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+null;
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/navigation/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_rnDriftGuardWeb","_rnDriftGuardNative"],"sourceRoot":"../../../src","sources":["navigation/types.ts"],"mappings":";;AAKA;AACA;AACA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMA,gBAA0D;AAC9D;AACA,IAA8B;AAEhC,MAAMC,mBAAmE;AACvE;AACA,IAA8B;AAAC","ignoreList":[]}

package/lib/module/styles/primitives.js

@@ -1,40 +1,69 @@
 "use strict";
 
 // packages/components/src/styles/primitives.ts
-// Semantic constants for CDX UI component styling.
+// Semantic constants for Forge UI component styling.
 
 // ─── Colors ──────────────────────────────────────────────
 // Surface & background
+/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
 export const COLOR_BG_PRIMARY = 'bg-white';
+/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
 export const COLOR_BG_SUBTLE = 'bg-slate-50';
+/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
 export const COLOR_BG_MUTED = 'bg-slate-100';
+/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
 export const COLOR_BG_INVERSE = 'bg-slate-900';
 
 // Border
+/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
 export const COLOR_BORDER_DEFAULT = 'border-slate-200';
+/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
 export const COLOR_BORDER_STRONG = 'border-slate-300';
+/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
 export const COLOR_BORDER_FOCUS = 'border-slate-900';
+/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
 export const COLOR_BORDER_INVALID = 'border-red-500';
 
 // Text
+/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
 export const COLOR_TEXT_PRIMARY = 'text-slate-900';
+/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
 export const COLOR_TEXT_SECONDARY = 'text-slate-500';
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export const COLOR_TEXT_MUTED = 'text-slate-400';
+/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
 export const COLOR_TEXT_INVERSE = 'text-white';
+/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
 export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
+/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
 export const COLOR_TEXT_INVALID = 'text-red-600';
 
 // Brand / Action
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
+/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
 export const COLOR_BRAND_HOVER = 'bg-slate-800';
+/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
 export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
 
 // Accent (for checked states, active indicators)
+/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
 export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
+/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
 export const COLOR_ACCENT_BORDER = 'border-slate-900';
 
-// Semantic colors (danger, warning, success, info)
-// Kept for Button's 5-color system
+/**
+ * @deprecated Use semantic token classes directly instead. Map each color key to its
+ * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
+ * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
+ * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
+ * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
+ * - `border` → `border-stroke-{color}` (--color-stroke-{color})
+ * - `text` → `text-content-{color}` (--color-content-{color})
+ * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
+ *
+ * See Button/styles.ts for a complete migration example.
+ */
 export const SEMANTIC_COLORS = {
   action: {
     bg: 'bg-slate-900',
@@ -79,21 +108,29 @@ export const SEMANTIC_COLORS = {
 };
 
 // ─── Focus ───────────────────────────────────────────────
+/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
 export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
 
 // ─── Radius ──────────────────────────────────────────────
-export const RADIUS_SM = 'rounded-lg'; // buttons, inputs, checkboxes
-export const RADIUS_MD = 'rounded-xl'; // cards, dropdowns, modals
-export const RADIUS_FULL = 'rounded-full'; // pills, avatars, switches
+/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
+export const RADIUS_SM = 'rounded-lg';
+/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
+export const RADIUS_MD = 'rounded-xl';
+/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
+export const RADIUS_FULL = 'rounded-full';
 
 // ─── Shadows ─────────────────────────────────────────────
+
+/** @deprecated Use `shadow-sm` directly instead */
 export const SHADOW_SM = 'shadow-sm';
+/** @deprecated Use `shadow-md` directly instead */
 export const SHADOW_MD = 'shadow-md';
 
 // ─── Sizing ──────────────────────────────────────────────
 // Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
 // Only two sizes: 'default' (regular) and 'small' (compact).
 // NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
+/** @deprecated */
 export const SIZE_SCALE = {
   default: {
     height: 'h-10',

package/lib/module/styles/primitives.js.map

@@ -1 +1 @@
-{"version":3,"names":["COLOR_BG_PRIMARY","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["COLOR_BG_PRIMARY","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/utils/positionToDataIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import { dataAttributes } from '@cdx-ui/primitives';
+
+/**
+ * Position hint accepted by icon/spinner-bearing styled slots
+ * (`Button.Icon`, `Button.Spinner`, `Chip.Icon`, etc.). Maps to a logical
+ * `data-icon` attribute that CVA targets for leading/trailing padding.
+ *
+ * `'leading'`  → `data-icon="inline-start"`
+ * `'trailing'` → `data-icon="inline-end"`
+ */
+
+/**
+ * Returns the data-attribute spread props for the requested position, or
+ * `undefined` when no position is set (so the attribute is omitted entirely
+ * and baseline spacing applies).
+ *
+ * Spread the result onto the rendered element:
+ *
+ * ```tsx
+ * <Icon {...positionToDataIcon(position)} />
+ * ```
+ *
+ * Spacing rules live in CVA variant strings, targeting the attribute via
+ * logical-property utilities so RTL flips automatically:
+ *
+ * ```ts
+ * cva(['data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5'], { ... });
+ * ```
+ */
+export function positionToDataIcon(position) {
+  if (!position) return undefined;
+  return dataAttributes({
+    icon: position === 'leading' ? 'inline-start' : 'inline-end'
+  });
+}
+//# sourceMappingURL=positionToDataIcon.js.map

package/lib/module/utils/positionToDataIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dataAttributes","positionToDataIcon","position","undefined","icon"],"sourceRoot":"../../../src","sources":["utils/positionToDataIcon.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAACC,QAA2B,EAAE;EAC9D,IAAI,CAACA,QAAQ,EAAE,OAAOC,SAAS;EAC/B,OAAOH,cAAc,CAAC;IAAEI,IAAI,EAAEF,QAAQ,KAAK,SAAS,GAAG,cAAc,GAAG;EAAa,CAAC,CAAC;AACzF","ignoreList":[]}

package/lib/typescript/components/AlertDialog/index.d.ts

@@ -15,11 +15,12 @@ export interface AlertDialogCancelProps extends Omit<ButtonProps, 'variant'> {
 declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<View>>;
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
     Trigger: typeof Dialog.Trigger;
-    Content: typeof Dialog.Content;
+    Popup: typeof Dialog.Popup;
     Header: typeof Dialog.Header;
     Title: typeof Dialog.Title;
     Description: typeof Dialog.Description;
-    Body: typeof Dialog.Body;
+    Content: typeof Dialog.Content;
+    Text: typeof Dialog.Text;
     Footer: typeof Dialog.Footer;
     Close: typeof Dialog.Close;
     Action: typeof AlertDialogAction;