@cdx-ui/components 0.2.4 → 0.2.5

package/lib/module/components/Breadcrumbs/styles.js

@@ -6,6 +6,32 @@ import { TRANSITION_COLORS } from '../../styles/constants';
 export const breadcrumbRootVariants = cva(['flex-row flex-wrap items-center', 'data-[disabled=true]:opacity-[var(--opacity-disabled)]', 'web:data-[disabled=true]:cursor-not-allowed']);
 export const breadcrumbDisabledCursor = 'web:cursor-not-allowed';
 export const breadcrumbSeparatorVariants = cva(['body-md text-content-tertiary select-none px-1']);
+const breadcrumbAncestorContentColor = {
+  neutral: 'text-content-secondary',
+  action: 'text-content-action',
+  danger: 'text-content-danger',
+  warning: 'text-content-warning',
+  success: 'text-content-success',
+  info: 'text-content-info'
+};
+
+// Color for an `Icon` or `Text` placed directly in item or separator content. Web inherits
+// the CSS color of the content element, so hover follows it; native has no color cascade,
+// so it resolves the state's token.
+export function breadcrumbContentColor(state, color) {
+  if (Platform.OS === 'web') {
+    return 'text-inherit';
+  }
+  switch (state) {
+    case 'current':
+      return 'text-content-primary';
+    case 'ancestor':
+      return breadcrumbAncestorContentColor[color];
+    case 'disabled':
+    case 'separator':
+      return 'text-content-tertiary';
+  }
+}
 export const breadcrumbItemRootVariants = cva(['self-start', 'web:outline-none web:focus:outline-none web:focus-visible:outline-none', 'web:data-[focus-visible=true]:rounded-[2px]', 'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2']);
 const breadcrumbColorVariants = {
   neutral: '',

package/lib/module/components/Breadcrumbs/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","cva","TRANSITION_COLORS","breadcrumbRootVariants","breadcrumbDisabledCursor","breadcrumbSeparatorVariants","breadcrumbItemRootVariants","breadcrumbColorVariants","neutral","action","danger","warning","success","info","breadcrumbItemVariants","variants","isUnderlined","true","select","web","default","false","color","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Breadcrumbs/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAA2B,eAAe;AAEtD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,OAAO,MAAMC,sBAAsB,GAAGF,GAAG,CAAC,CACxC,iCAAiC,EACjC,wDAAwD,EACxD,6CAA6C,CAC9C,CAAC;AAEF,OAAO,MAAMG,wBAAwB,GAAG,wBAAwB;AAEhE,OAAO,MAAMC,2BAA2B,GAAGJ,GAAG,CAAC,CAAC,gDAAgD,CAAC,CAAC;AAElG,OAAO,MAAMK,0BAA0B,GAAGL,GAAG,CAAC,CAC5C,YAAY,EACZ,wEAAwE,EACxE,6CAA6C,EAC7C,kIAAkI,CACnI,CAAC;AAEF,MAAMM,uBAAuB,GAAG;EAC9BC,OAAO,EAAE,EAAE;EACXC,MAAM,EACJ,4IAA4I;EAC9IC,MAAM,EACJ,4IAA4I;EAC9IC,OAAO,EACL,8IAA8I;EAChJC,OAAO,EACL,8IAA8I;EAChJC,IAAI,EAAE;AACR,CAA2C;AAE3C,OAAO,MAAMC,sBAAsB,GAAGb,GAAG,CACvC,CACE,SAAS,EACTC,iBAAiB,EACjB,2CAA2C,EAC3C,8CAA8C,EAC9C,6CAA6C,CAC9C,EACD;EACEa,QAAQ,EAAE;IACRC,YAAY,EAAE;MACZC,IAAI,EAAEjB,QAAQ,CAACkB,MAAM,CAAC;QACpBC,GAAG,EAAE,0EAA0E;QAC/EC,OAAO,EACL;MACJ,CAAC,CAAC;MACFC,KAAK,EAAE;IACT,CAAC;IACDC,KAAK,EAAEf;EACT,CAAC;EACDgB,eAAe,EAAE;IACfP,YAAY,EAAE,KAAK;IACnBM,KAAK,EAAE;EACT;AACF,CACF,CAAC","ignoreList":[]}
+{"version":3,"names":["Platform","cva","TRANSITION_COLORS","breadcrumbRootVariants","breadcrumbDisabledCursor","breadcrumbSeparatorVariants","breadcrumbAncestorContentColor","neutral","action","danger","warning","success","info","breadcrumbContentColor","state","color","OS","breadcrumbItemRootVariants","breadcrumbColorVariants","breadcrumbItemVariants","variants","isUnderlined","true","select","web","default","false","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Breadcrumbs/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAA2B,eAAe;AAEtD,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D,OAAO,MAAMC,sBAAsB,GAAGF,GAAG,CAAC,CACxC,iCAAiC,EACjC,wDAAwD,EACxD,6CAA6C,CAC9C,CAAC;AAEF,OAAO,MAAMG,wBAAwB,GAAG,wBAAwB;AAEhE,OAAO,MAAMC,2BAA2B,GAAGJ,GAAG,CAAC,CAAC,gDAAgD,CAAC,CAAC;AAElG,MAAMK,8BAA8B,GAAG;EACrCC,OAAO,EAAE,wBAAwB;EACjCC,MAAM,EAAE,qBAAqB;EAC7BC,MAAM,EAAE,qBAAqB;EAC7BC,OAAO,EAAE,sBAAsB;EAC/BC,OAAO,EAAE,sBAAsB;EAC/BC,IAAI,EAAE;AACR,CAA2C;;AAE3C;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CACpCC,KAAwD,EACxDC,KAAsB,EACd;EACR,IAAIf,QAAQ,CAACgB,EAAE,KAAK,KAAK,EAAE;IACzB,OAAO,cAAc;EACvB;EACA,QAAQF,KAAK;IACX,KAAK,SAAS;MACZ,OAAO,sBAAsB;IAC/B,KAAK,UAAU;MACb,OAAOR,8BAA8B,CAACS,KAAK,CAAC;IAC9C,KAAK,UAAU;IACf,KAAK,WAAW;MACd,OAAO,uBAAuB;EAClC;AACF;AAEA,OAAO,MAAME,0BAA0B,GAAGhB,GAAG,CAAC,CAC5C,YAAY,EACZ,wEAAwE,EACxE,6CAA6C,EAC7C,kIAAkI,CACnI,CAAC;AAEF,MAAMiB,uBAAuB,GAAG;EAC9BX,OAAO,EAAE,EAAE;EACXC,MAAM,EACJ,4IAA4I;EAC9IC,MAAM,EACJ,4IAA4I;EAC9IC,OAAO,EACL,8IAA8I;EAChJC,OAAO,EACL,8IAA8I;EAChJC,IAAI,EAAE;AACR,CAA2C;AAE3C,OAAO,MAAMO,sBAAsB,GAAGlB,GAAG,CACvC,CACE,SAAS,EACTC,iBAAiB,EACjB,2CAA2C,EAC3C,8CAA8C,EAC9C,6CAA6C,CAC9C,EACD;EACEkB,QAAQ,EAAE;IACRC,YAAY,EAAE;MACZC,IAAI,EAAEtB,QAAQ,CAACuB,MAAM,CAAC;QACpBC,GAAG,EAAE,0EAA0E;QAC/EC,OAAO,EACL;MACJ,CAAC,CAAC;MACFC,KAAK,EAAE;IACT,CAAC;IACDX,KAAK,EAAEG;EACT,CAAC;EACDS,eAAe,EAAE;IACfN,YAAY,EAAE,KAAK;IACnBN,KAAK,EAAE;EACT;AACF,CACF,CAAC","ignoreList":[]}

package/lib/module/components/Stack/HStack.js

@@ -1,8 +1,9 @@
 "use strict";
 
 import { forwardRef } from 'react';
-import { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box } from '../Box';
 import { hStackRootVariants } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const HStack = /*#__PURE__*/forwardRef(({
@@ -13,7 +14,7 @@ export const HStack = /*#__PURE__*/forwardRef(({
   children,
   ...restProps
 }, ref) => {
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     className: cn(hStackRootVariants({
       reversed,
@@ -21,6 +22,9 @@ export const HStack = /*#__PURE__*/forwardRef(({
     }), className),
     style: style,
     ...restProps,
+    ...mergeDataAttributes(dataAttributes({
+      slot: 'hstack'
+    }), restProps),
     children: children
   });
 });

package/lib/module/components/Stack/HStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","cn","hStackRootVariants","jsx","_jsx","HStack","reversed","space","style","className","children","restProps","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Stack/HStack.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,kBAAkB,QAAyB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc/D,OAAO,MAAMC,MAAM,gBAAGN,UAAU,CAC9B,CACE;EAAEO,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAU,CAAC,EACrEC,GAAuB,KACpB;EACH,oBACER,IAAA,CAACJ,IAAI;IACHY,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAER,EAAE,CAACC,kBAAkB,CAAC;MAAEI,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAAEE,SAAS,CAAE;IAClED,KAAK,EAAEA,KAAM;IAAA,GACTG,SAAS;IAAAD,QAAA,EAEZA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDL,MAAM,CAACQ,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["forwardRef","dataAttributes","mergeDataAttributes","cn","Box","hStackRootVariants","jsx","_jsx","HStack","reversed","space","style","className","children","restProps","ref","slot","displayName"],"sourceRoot":"../../../../src","sources":["components/Stack/HStack.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,oBAAoB;AACxE,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,GAAG,QAAuB,QAAQ;AAC3C,SAASC,kBAAkB,QAAyB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc/D,OAAO,MAAMC,MAAM,gBAAGR,UAAU,CAC9B,CACE;EAAES,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAU,CAAC,EACrEC,GAAuB,KACpB;EACH,oBACER,IAAA,CAACH,GAAG;IACFW,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAET,EAAE,CAACE,kBAAkB,CAAC;MAAEI,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAAEE,SAAS,CAAE;IAClED,KAAK,EAAEA,KAAM;IAAA,GACTG,SAAS;IAAA,GAETZ,mBAAmB,CAACD,cAAc,CAAC;MAAEe,IAAI,EAAE;IAAS,CAAC,CAAC,EAAEF,SAAS,CAAC;IAAAD,QAAA,EAErEA;EAAQ,CACN,CAAC;AAEV,CACF,CAAC;AAEDL,MAAM,CAACS,WAAW,GAAG,QAAQ","ignoreList":[]}

package/lib/module/components/Stack/VStack.js

@@ -1,8 +1,9 @@
 "use strict";
 
 import { forwardRef } from 'react';
-import { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box } from '../Box';
 import { vStackRootVariants } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const VStack = /*#__PURE__*/forwardRef(({
@@ -13,7 +14,7 @@ export const VStack = /*#__PURE__*/forwardRef(({
   children,
   ...restProps
 }, ref) => {
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
     className: cn(vStackRootVariants({
       reversed,
@@ -21,6 +22,9 @@ export const VStack = /*#__PURE__*/forwardRef(({
     }), className),
     style: style,
     ...restProps,
+    ...mergeDataAttributes(dataAttributes({
+      slot: 'vstack'
+    }), restProps),
     children: children
   });
 });

package/lib/module/components/Stack/VStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","cn","vStackRootVariants","jsx","_jsx","VStack","reversed","space","style","className","children","restProps","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/Stack/VStack.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,kBAAkB,QAAyB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc/D,OAAO,MAAMC,MAAM,gBAAGN,UAAU,CAC9B,CACE;EAAEO,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAU,CAAC,EACrEC,GAAuB,KACpB;EACH,oBACER,IAAA,CAACJ,IAAI;IACHY,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAER,EAAE,CAACC,kBAAkB,CAAC;MAAEI,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAAEE,SAAS,CAAE;IAClED,KAAK,EAAEA,KAAM;IAAA,GACTG,SAAS;IAAAD,QAAA,EAEZA;EAAQ,CACL,CAAC;AAEX,CACF,CAAC;AAEDL,MAAM,CAACQ,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["forwardRef","dataAttributes","mergeDataAttributes","cn","Box","vStackRootVariants","jsx","_jsx","VStack","reversed","space","style","className","children","restProps","ref","slot","displayName"],"sourceRoot":"../../../../src","sources":["components/Stack/VStack.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,cAAc,EAAEC,mBAAmB,QAAQ,oBAAoB;AACxE,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,GAAG,QAAuB,QAAQ;AAC3C,SAASC,kBAAkB,QAAyB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAc/D,OAAO,MAAMC,MAAM,gBAAGR,UAAU,CAC9B,CACE;EAAES,QAAQ,GAAG,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,QAAQ;EAAE,GAAGC;AAAU,CAAC,EACrEC,GAAuB,KACpB;EACH,oBACER,IAAA,CAACH,GAAG;IACFW,GAAG,EAAEA,GAAI;IACTH,SAAS,EAAET,EAAE,CAACE,kBAAkB,CAAC;MAAEI,QAAQ;MAAEC;IAAM,CAAC,CAAC,EAAEE,SAAS,CAAE;IAClED,KAAK,EAAEA,KAAM;IAAA,GACTG,SAAS;IAAA,GAETZ,mBAAmB,CAACD,cAAc,CAAC;MAAEe,IAAI,EAAE;IAAS,CAAC,CAAC,EAAEF,SAAS,CAAC;IAAAD,QAAA,EAErEA;EAAQ,CACN,CAAC;AAEV,CACF,CAAC;AAEDL,MAAM,CAACS,WAAW,GAAG,QAAQ","ignoreList":[]}

package/lib/module/index.js

@@ -1,11 +1,16 @@
 "use strict";
 
 /// <reference types="uniwind/types" preserve="true" />
+import { View as RNView } from 'react-native';
 export * from './components';
 export * from './hooks';
 export * from './navigation';
 export { ToastProvider, useToast } from './providers/toast';
 export { ForgeDesignProvider } from './providers/forge-design';
-export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
+export { ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/** @deprecated Use `Box` instead. */
+export const View = RNView;
+/** @deprecated Use `BoxRef` for refs and `BoxProps` for props instead. */
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ToastProvider","useToast","ForgeDesignProvider","View","ScrollView","KeyboardAvoidingView","SafeAreaView","useSafeAreaInsets"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,SAASA,aAAa,EAAEC,QAAQ,QAAQ,mBAAmB;AAE3D,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D,SAASC,IAAI,EAAEC,UAAU,EAAEC,oBAAoB,QAAQ,cAAc;AACrE,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,gCAAgC","ignoreList":[]}
+{"version":3,"names":["View","RNView","ToastProvider","useToast","ForgeDesignProvider","ScrollView","KeyboardAvoidingView","SafeAreaView","useSafeAreaInsets"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SAASA,IAAI,IAAIC,MAAM,QAAQ,cAAc;AAE7C,cAAc,cAAc;AAC5B,cAAc,SAAS;AACvB,cAAc,cAAc;AAC5B,SAASC,aAAa,EAAEC,QAAQ,QAAQ,mBAAmB;AAE3D,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,cAAc;AAC/D,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,gCAAgC;;AAEhF;AACA,OAAO,MAAMR,IAAI,GAAGC,MAAM;AAC1B","ignoreList":[]}

package/lib/typescript/animation/hooks/usePopupDialogContentAnimation.d.ts

@@ -22,7 +22,7 @@ export declare function usePopupDialogContentAnimation({ isOpen, progress, isDra
     contentY: SharedValue<number>;
     contentHeight: SharedValue<number>;
     panGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
-    rDragContainerStyle: {
+    rDragContainerStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
         opacity: number;
         transform: ({
             translateY: number;
@@ -40,7 +40,7 @@ export declare function usePopupDialogContentAnimation({ isOpen, progress, isDra
             translateY?: undefined;
         })[];
         opacity?: undefined;
-    };
+    }>;
     entering: import("react-native-reanimated").BaseAnimationBuilder | ((targetValues: import("react-native-reanimated").EntryAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | ((targetValues: import("react-native-reanimated").ExitAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | import("react-native-reanimated").ReanimatedKeyframe | undefined;
     exiting: import("react-native-reanimated").BaseAnimationBuilder | ((targetValues: import("react-native-reanimated").EntryAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | ((targetValues: import("react-native-reanimated").ExitAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | import("react-native-reanimated").ReanimatedKeyframe | undefined;
 };

package/lib/typescript/animation/hooks/usePopupOverlayAnimation.d.ts

@@ -18,11 +18,11 @@ export interface UsePopupOverlayAnimationOptions {
  * On web, entering/exiting are undefined (CSS transitions drive the visuals).
  */
 export declare function usePopupOverlayAnimation(options: UsePopupOverlayAnimationOptions): {
-    rContainerStyle: {
+    rContainerStyle: import("react-native-reanimated/lib/typescript/hook/commonTypes").AnimatedStyleHandle<{
         opacity?: undefined;
     } | {
         opacity: number;
-    };
+    }>;
     entering: import("react-native-reanimated").BaseAnimationBuilder | ((targetValues: import("react-native-reanimated").EntryAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | ((targetValues: import("react-native-reanimated").ExitAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | import("react-native-reanimated").ReanimatedKeyframe | undefined;
     exiting: import("react-native-reanimated").BaseAnimationBuilder | ((targetValues: import("react-native-reanimated").EntryAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | ((targetValues: import("react-native-reanimated").ExitAnimationsValues) => import("react-native-reanimated").LayoutAnimation) | import("react-native-reanimated").ReanimatedKeyframe | undefined;
 };

package/lib/typescript/components/Box/Box.d.ts

@@ -1,6 +1,10 @@
 import { View, type ViewProps } from 'react-native';
 export interface BoxProps extends ViewProps {
     className?: string;
+    /** Renders the child element in place of the default `View`, merging Box's props onto it. */
+    asChild?: boolean;
 }
+/** The instance type of a `Box` ref, e.g. `useRef<BoxRef>(null)`. */
+export type BoxRef = View;
 export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<View>>;
 //# sourceMappingURL=Box.d.ts.map

package/lib/typescript/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,GAAG,2FAQf,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpD,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qEAAqE;AACrE,MAAM,MAAM,MAAM,GAAG,IAAI,CAAC;AAE1B,eAAO,MAAM,GAAG,2FAgBf,CAAC"}

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

@@ -6,7 +6,8 @@ export type { BreadcrumbVariantProps } from './styles';
 export interface BreadcrumbsProps extends IBreadcrumbsProps {
     className?: string;
     /**
-     * Separator rendered between breadcrumb items.
+     * Separator rendered between breadcrumb items. A direct `Icon` or `Text` child takes the
+     * separator color unless it sets `color`.
      * @default `/`
      */
     separator?: ReactNode;
@@ -17,6 +18,7 @@ interface BreadcrumbItemInternalProps {
 }
 export interface BreadcrumbsItemProps extends Omit<ILinkProps, 'children' | 'disabled'> {
     className?: string;
+    /** Item content. A direct `Icon` or `Text` child takes the item's state color unless it sets `color`. */
     children?: ReactNode;
 }
 declare const BreadcrumbsRoot: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<View>>;

package/lib/typescript/components/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,IAAI,EAAkC,MAAM,cAAc,CAAC;AACpF,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAU5B,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,2BAA2B;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6ED,QAAA,MAAM,eAAe,mGAqDpB,CAAC;AAkBF,QAAA,MAAM,eAAe,qIAqGpB,CAAC;AAIF,KAAK,4BAA4B,GAAG,OAAO,eAAe,GAAG;IAC3D,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAElB,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAkB,IAAI,EAAkC,MAAM,cAAc,CAAC;AACpF,OAAO,EAML,KAAK,iBAAiB,EACtB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAa5B,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,2BAA2B;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgGD,QAAA,MAAM,eAAe,mGAqDpB,CAAC;AAkBF,QAAA,MAAM,eAAe,qIAqGpB,CAAC;AAIF,KAAK,4BAA4B,GAAG,OAAO,eAAe,GAAG;IAC3D,IAAI,EAAE,OAAO,eAAe,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,WAAW,EAElB,4BAA4B,CAAC"}

package/lib/typescript/components/Breadcrumbs/styles.d.ts

@@ -1,7 +1,9 @@
 import { type VariantProps } from '@cdx-ui/utils';
+import type { BreadcrumbColor } from '@cdx-ui/primitives';
 export declare const breadcrumbRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const breadcrumbDisabledCursor = "web:cursor-not-allowed";
 export declare const breadcrumbSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare function breadcrumbContentColor(state: 'current' | 'ancestor' | 'disabled' | 'separator', color: BreadcrumbColor): string;
 export declare const breadcrumbItemRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const breadcrumbItemVariants: (props?: ({
     isUnderlined?: boolean | null | undefined;

package/lib/typescript/components/Breadcrumbs/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAIvD,eAAO,MAAM,sBAAsB,oFAIjC,CAAC;AAEH,eAAO,MAAM,wBAAwB,2BAA2B,CAAC;AAEjE,eAAO,MAAM,2BAA2B,oFAA0D,CAAC;AAEnG,eAAO,MAAM,0BAA0B,oFAKrC,CAAC;AAeH,eAAO,MAAM,sBAAsB;;;8EAyBlC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAG1D,eAAO,MAAM,sBAAsB,oFAIjC,CAAC;AAEH,eAAO,MAAM,wBAAwB,2BAA2B,CAAC;AAEjE,eAAO,MAAM,2BAA2B,oFAA0D,CAAC;AAcnG,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,EACxD,KAAK,EAAE,eAAe,GACrB,MAAM,CAaR;AAED,eAAO,MAAM,0BAA0B,oFAKrC,CAAC;AAeH,eAAO,MAAM,sBAAsB;;;8EAyBlC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/lib/typescript/components/Stack/HStack.d.ts

@@ -1,6 +1,7 @@
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { type BoxProps } from '../Box';
 import { type StackSpace } from './styles';
-export interface HStackProps extends ViewProps {
+export interface HStackProps extends Omit<BoxProps, 'asChild'> {
     className?: string;
     /** Token-based gap between children. */
     space?: StackSpace;

package/lib/typescript/components/Stack/HStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/HStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAgBlB,CAAC"}
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/HStack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAkBlB,CAAC"}

package/lib/typescript/components/Stack/VStack.d.ts

@@ -1,6 +1,7 @@
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { type BoxProps } from '../Box';
 import { type StackSpace } from './styles';
-export interface VStackProps extends ViewProps {
+export interface VStackProps extends Omit<BoxProps, 'asChild'> {
     className?: string;
     /** Token-based gap between children. */
     space?: StackSpace;

package/lib/typescript/components/Stack/VStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/VStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAgBlB,CAAC"}
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/VStack.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAkBlB,CAAC"}

package/lib/typescript/components/Toast/animation.d.ts

@@ -1,9 +1,9 @@
 import { Gesture } from 'react-native-gesture-handler';
-import { EntryOrExitLayoutType, useAnimatedStyle } from 'react-native-reanimated';
+import { EntryOrExitLayoutType, FadeInDown, FadeInUp, useAnimatedStyle } from 'react-native-reanimated';
 import type { UseToastRootAnimationOptions } from './types';
-export declare const enteringTop: import("react-native-reanimated").ComplexAnimationBuilder;
+export declare const enteringTop: FadeInUp;
 export declare const exitingTop: import("react-native-reanimated").ReanimatedKeyframe;
-export declare const enteringBottom: import("react-native-reanimated").ComplexAnimationBuilder;
+export declare const enteringBottom: FadeInDown;
 export declare const exitingBottom: import("react-native-reanimated").ReanimatedKeyframe;
 export interface UseToastRootAnimationResult {
     rContainerStyle: ReturnType<typeof useAnimatedStyle>;

package/lib/typescript/components/Toast/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/animation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAEL,qBAAqB,EAMrB,gBAAgB,EAKjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI5D,eAAO,MAAM,WAAW,2DAKd,CAAC;AAEX,eAAO,MAAM,UAAU,sDAUP,CAAC;AAEjB,eAAO,MAAM,cAAc,2DAKjB,CAAC;AAEX,eAAO,MAAM,aAAa,sDAUV,CAAC;AAEjB,MAAM,WAAW,2BAA2B;IAC1C,eAAe,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACrD,uBAAuB,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC5C,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;CAC5C;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,4BAA4B,GACpC,2BAA2B,CAiU7B"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/animation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAEL,qBAAqB,EAErB,UAAU,EACV,QAAQ,EAGR,gBAAgB,EAKjB,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAI5D,eAAO,MAAM,WAAW,UAKd,CAAC;AAEX,eAAO,MAAM,UAAU,sDAUP,CAAC;AAEjB,eAAO,MAAM,cAAc,YAKjB,CAAC;AAEX,eAAO,MAAM,aAAa,sDAUV,CAAC;AAEjB,MAAM,WAAW,2BAA2B;IAC1C,eAAe,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;IACrD,uBAAuB,EAAE,OAAO,CAAC;IACjC,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC5C,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;CAC5C;AAID;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,4BAA4B,GACpC,2BAA2B,CAiU7B"}

package/lib/typescript/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="uniwind/types" preserve="true" />
+import { View as RNView } from 'react-native';
 export * from './components';
 export * from './hooks';
 export * from './navigation';
@@ -6,6 +7,10 @@ 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 { ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+/** @deprecated Use `Box` instead. */
+export declare const View: typeof RNView;
+/** @deprecated Use `BoxRef` for refs and `BoxProps` for props instead. */
+export type View = RNView;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,mBAAmB,mBAAmB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,mBAAmB,mBAAmB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEjF,qCAAqC;AACrC,eAAO,MAAM,IAAI,eAAS,CAAC;AAC3B,0EAA0E;AAC1E,MAAM,MAAM,IAAI,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -106,20 +106,20 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/formatters": "0.2.4",
-    "@cdx-ui/primitives": "0.2.4",
-    "@cdx-ui/icons": "0.2.4",
-    "@cdx-ui/utils": "0.2.4"
+    "@cdx-ui/icons": "0.2.5",
+    "@cdx-ui/utils": "0.2.5",
+    "@cdx-ui/primitives": "0.2.5",
+    "@cdx-ui/formatters": "0.2.5"
   },
   "devDependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@react-navigation/bottom-tabs": "*",
-    "@types/react": "19.1.17",
+    "@types/react": "19.2.14",
     "@types/react-dom": "*",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-native": "*",
     "react-native-builder-bob": "*",
     "react-native-screens": "*",

package/src/components/Box/Box.tsx

@@ -1,16 +1,30 @@
 import { type ForwardedRef, forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 
 export interface BoxProps extends ViewProps {
   className?: string;
+  /** Renders the child element in place of the default `View`, merging Box's props onto it. */
+  asChild?: boolean;
 }
 
-export const Box = forwardRef<View, BoxProps>(
-  ({ children, ...restProps }, ref: ForwardedRef<View>) => {
+/** The instance type of a `Box` ref, e.g. `useRef<BoxRef>(null)`. */
+export type BoxRef = View;
+
+export const Box = forwardRef<BoxRef, BoxProps>(
+  ({ asChild, children, ...restProps }, ref: ForwardedRef<BoxRef>) => {
+    const Comp = asChild ? Slot : View;
+
     return (
-      <View ref={ref} {...restProps}>
+      <Comp
+        ref={ref}
+        {...restProps}
+        // Caller-supplied data attributes win so components composed on Box
+        // (HStack, VStack and their consumers) can replace the default slot.
+        {...mergeDataAttributes(dataAttributes({ slot: 'box' }), restProps)}
+      >
         {children}
-      </View>
+      </Comp>
     );
   },
 );

package/src/components/Breadcrumbs/index.tsx

@@ -19,7 +19,10 @@ import {
   type ILinkProps,
 } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import { Text as ForgeText } from '../Text';
 import {
+  breadcrumbContentColor,
   breadcrumbItemVariants,
   breadcrumbDisabledCursor,
   breadcrumbItemRootVariants,
@@ -35,7 +38,8 @@ type BreadcrumbItemState = 'current' | 'ancestor' | 'disabled';
 export interface BreadcrumbsProps extends IBreadcrumbsProps {
   className?: string;
   /**
-   * Separator rendered between breadcrumb items.
+   * Separator rendered between breadcrumb items. A direct `Icon` or `Text` child takes the
+   * separator color unless it sets `color`.
    * @default `/`
    */
   separator?: ReactNode;
@@ -48,6 +52,7 @@ interface BreadcrumbItemInternalProps {
 
 export interface BreadcrumbsItemProps extends Omit<ILinkProps, 'children' | 'disabled'> {
   className?: string;
+  /** Item content. A direct `Icon` or `Text` child takes the item's state color unless it sets `color`. */
   children?: ReactNode;
 }
 
@@ -65,6 +70,23 @@ function isTextOnlyChild(children: ReactNode): children is string | number {
   return typeof children === 'string' || typeof children === 'number';
 }
 
+// `Icon` and `Text` default to `text-content-primary` and native has no color cascade, so
+// direct children that leave `color` unset take the content color through `className`.
+function withContentColor(children: ReactNode, colorClassName: string): ReactNode {
+  return Children.map(children, (child) => {
+    if (!isValidElement<{ className?: string; color?: unknown }>(child)) {
+      return child;
+    }
+    if (child.type !== Icon && child.type !== ForgeText) {
+      return child;
+    }
+    if (child.props.color !== undefined) {
+      return child;
+    }
+    return cloneElement(child, { className: cn(colorClassName, child.props.className) });
+  });
+}
+
 function BreadcrumbItemContent({
   children,
   className,
@@ -74,6 +96,8 @@ function BreadcrumbItemContent({
   className: string;
   state: BreadcrumbItemState;
 }) {
+  const { color } = useBreadcrumbsContext();
+
   if (isTextOnlyChild(children)) {
     return (
       <Text className={className} {...dataAttributes({ state })}>
@@ -84,13 +108,13 @@ function BreadcrumbItemContent({
 
   return (
     <View className={cn('flex-row items-center gap-1', className)} {...dataAttributes({ state })}>
-      {children}
+      {withContentColor(children, breadcrumbContentColor(state, color))}
     </View>
   );
 }
 
 function BreadcrumbsSeparator({ separator }: { separator: ReactNode }) {
-  const { isDisabled } = useBreadcrumbsContext();
+  const { isDisabled, color } = useBreadcrumbsContext();
   const disabledClassName = isDisabled ? breadcrumbDisabledCursor : undefined;
   const slotProps = mergeDataAttributes({}, dataAttributes({ slot: 'breadcrumbs-separator' }));
   const a11yProps = {
@@ -121,7 +145,7 @@ function BreadcrumbsSeparator({ separator }: { separator: ReactNode }) {
       {...a11yProps}
       {...slotProps}
     >
-      {separator}
+      {withContentColor(separator, breadcrumbContentColor('separator', color))}
     </View>
   );
 }

package/src/components/Breadcrumbs/styles.ts

@@ -13,6 +13,36 @@ export const breadcrumbDisabledCursor = 'web:cursor-not-allowed';
 
 export const breadcrumbSeparatorVariants = cva(['body-md text-content-tertiary select-none px-1']);
 
+const breadcrumbAncestorContentColor = {
+  neutral: 'text-content-secondary',
+  action: 'text-content-action',
+  danger: 'text-content-danger',
+  warning: 'text-content-warning',
+  success: 'text-content-success',
+  info: 'text-content-info',
+} satisfies Record<BreadcrumbColor, string>;
+
+// Color for an `Icon` or `Text` placed directly in item or separator content. Web inherits
+// the CSS color of the content element, so hover follows it; native has no color cascade,
+// so it resolves the state's token.
+export function breadcrumbContentColor(
+  state: 'current' | 'ancestor' | 'disabled' | 'separator',
+  color: BreadcrumbColor,
+): string {
+  if (Platform.OS === 'web') {
+    return 'text-inherit';
+  }
+  switch (state) {
+    case 'current':
+      return 'text-content-primary';
+    case 'ancestor':
+      return breadcrumbAncestorContentColor[color];
+    case 'disabled':
+    case 'separator':
+      return 'text-content-tertiary';
+  }
+}
+
 export const breadcrumbItemRootVariants = cva([
   'self-start',
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',

package/src/components/Stack/HStack.tsx

@@ -1,10 +1,12 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box, type BoxProps } from '../Box';
 import { hStackRootVariants, type StackSpace } from './styles';
 
-export interface HStackProps extends ViewProps {
+export interface HStackProps extends Omit<BoxProps, 'asChild'> {
   className?: string;
   /** Token-based gap between children. */
   space?: StackSpace;
@@ -22,14 +24,16 @@ export const HStack = forwardRef<View, HStackProps>(
     ref: ForwardedRef<View>,
   ) => {
     return (
-      <View
+      <Box
         ref={ref}
         className={cn(hStackRootVariants({ reversed, space }), className)}
         style={style}
         {...restProps}
+        // Caller-supplied data attributes win so components composed on HStack keep their own slot.
+        {...mergeDataAttributes(dataAttributes({ slot: 'hstack' }), restProps)}
       >
         {children}
-      </View>
+      </Box>
     );
   },
 );

package/src/components/Stack/VStack.tsx

@@ -1,10 +1,12 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
+import type { View } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
+import { Box, type BoxProps } from '../Box';
 import { vStackRootVariants, type StackSpace } from './styles';
 
-export interface VStackProps extends ViewProps {
+export interface VStackProps extends Omit<BoxProps, 'asChild'> {
   className?: string;
   /** Token-based gap between children. */
   space?: StackSpace;
@@ -22,14 +24,16 @@ export const VStack = forwardRef<View, VStackProps>(
     ref: ForwardedRef<View>,
   ) => {
     return (
-      <View
+      <Box
         ref={ref}
         className={cn(vStackRootVariants({ reversed, space }), className)}
         style={style}
         {...restProps}
+        // Caller-supplied data attributes win so components composed on VStack keep their own slot.
+        {...mergeDataAttributes(dataAttributes({ slot: 'vstack' }), restProps)}
       >
         {children}
-      </View>
+      </Box>
     );
   },
 );

package/src/index.ts

@@ -1,4 +1,6 @@
 /// <reference types="uniwind/types" preserve="true" />
+import { View as RNView } from 'react-native';
+
 export * from './components';
 export * from './hooks';
 export * from './navigation';
@@ -6,5 +8,10 @@ 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 { ScrollView, KeyboardAvoidingView } from 'react-native';
 export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/** @deprecated Use `Box` instead. */
+export const View = RNView;
+/** @deprecated Use `BoxRef` for refs and `BoxProps` for props instead. */
+export type View = RNView;