@cdx-ui/components 0.2.3 → 0.2.5

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

@@ -1,29 +1,71 @@
-import { type ReactNode } from 'react';
-import { type ViewStyle } from 'react-native';
-import { type ScrollShadowVariantProps } from './styles';
+import { type ReactElement } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ScrollShadowSize, type ScrollShadowSurface, type ScrollShadowVariantProps } from './styles';
 import { type ScrollShadowCapability } from './useScrollShadow';
-export type { ScrollShadowCapability };
+export type { ScrollShadowCapability, UseScrollShadowOptions, UseScrollShadowReturn, } from './useScrollShadow';
+export { useScrollShadow } from './useScrollShadow';
+export type ScrollShadowVisibility = 'auto' | 'both' | 'start' | 'end' | 'none';
 export interface ScrollShadowProps extends ScrollShadowVariantProps {
-    children: ReactNode;
+    /**
+     * The scroll view to decorate: a `ScrollView`, `FlatList`, or `VirtualizedList`, passed as
+     * the direct child. With a forced `visibility`, any single view works.
+     */
+    children: ReactElement;
+    /** Classes for the wrapping view, for example `h-full` or `flex-1` to bound the scroller. */
     className?: string;
+    /** Style for the wrapping view. */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Scroll axis that gets fades.
+     * @default inferred from the child's `horizontal` prop, otherwise `'vertical'`
+     */
+    orientation?: 'horizontal' | 'vertical';
     /**
-     * Tailwind `from-*` utility for edge overlays — match the surface behind the scroll area.
-     * Pair with a low opacity (e.g. `from-surface-secondary/40`) for a light fade.
-     * @default 'from-background/35'
+     * Theme surface the fade blends into. Match it to the background behind the scroller.
+     * @default 'background'
      */
-    fadeFromClassName?: string;
+    surface?: ScrollShadowSurface;
     /**
-     * Shadow fade size in pixels.
-     * @default 64
+     * Fade depth along the scroll axis: `small` is 32px, `default` is 40px, `large` is 72px.
+     * @default 'default'
      */
-    size?: number;
+    size?: ScrollShadowSize;
     /**
-     * Scroll offset before showing edge shadows.
+     * Which edges show a fade. `auto` follows the scroll position; `both`, `start`, and `end`
+     * force those edges on; `none` hides them.
+     * @default 'auto'
+     */
+    visibility?: ScrollShadowVisibility;
+    /**
+     * Pixels of scroll slack before an edge counts as scrollable. Only used with `auto`.
      * @default 0
      */
     offset?: number;
+    /**
+     * Hides the child's scrollbar on web. On iOS and Android, set
+     * `showsVerticalScrollIndicator` or `showsHorizontalScrollIndicator` on the child instead.
+     * @default false
+     */
+    hideScrollBar?: boolean;
+    /**
+     * Width, opacity, or position overrides for the fade overlays, applied after `size`, for
+     * example `w-24` or `opacity-85`. Must not carry color classes; use `surface` or
+     * `colorClassName` instead.
+     */
+    edgeClassName?: string;
+    /**
+     * One-off fade color outside the `surface` options, as an `accent-*` class. Overrides
+     * `surface` on every platform and follows dark mode and `ScopedTheme`.
+     */
+    colorClassName?: string;
+    /**
+     * Called when either edge starts or stops being scrollable, with
+     * `{ canScrollBefore, canScrollAfter }`. Only fires with `visibility="auto"`.
+     */
     onCapabilityChange?: (capability: ScrollShadowCapability) => void;
-    style?: ViewStyle;
 }
-export declare function ScrollShadow({ children, className, fadeFromClassName, hideScrollBar, orientation, offset, onCapabilityChange, size, style, }: ScrollShadowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollShadow({ children, className, style, surface, size, visibility, hideScrollBar, orientation, offset, edgeClassName, colorClassName, onCapabilityChange, }: ScrollShadowProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ScrollShadow {
+    var displayName: string;
+}
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhE,OAAO,EAIL,KAAK,wBAAwB,EAC9B,MAAM,UAAU,CAAC;AAClB,OAAO,EAAmB,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAEjF,YAAY,EAAE,sBAAsB,EAAE,CAAC;AAEvC,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,iBAAwC,EACxC,aAAqB,EACrB,WAA0B,EAC1B,MAAU,EACV,kBAAkB,EAClB,IAAS,EACT,KAAK,GACN,EAAE,iBAAiB,2CA+DnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAAwC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpG,OAAO,EAML,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,UAAU,CAAC;AAMlB,OAAO,EAEL,KAAK,sBAAsB,EAG5B,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACV,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAEhF,MAAM,WAAW,iBAAkB,SAAQ,wBAAwB;IACjE;;;OAGG;IACH,QAAQ,EAAE,YAAY,CAAC;IACvB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACnE;AAwID,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAsB,EACtB,IAAgB,EAChB,UAAmB,EACnB,aAAqB,EACrB,WAAW,EACX,MAAU,EACV,aAAa,EACb,cAAc,EACd,kBAAkB,GACnB,EAAE,iBAAiB,2CAgGnB;yBA7Ge,YAAY"}

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

@@ -1,12 +1,18 @@
 import { type VariantProps } from '@cdx-ui/utils';
+export type ScrollShadowSurface = 'background' | 'primary' | 'secondary';
+export type ScrollShadowSize = 'small' | 'default' | 'large';
+export declare const SCROLL_SHADOW_SURFACE_CSS_VARS: Record<ScrollShadowSurface, string>;
+export declare const SCROLL_SHADOW_SIZE_PX: Record<ScrollShadowSize, number>;
+export declare const SCROLL_SHADOW_SURFACE_FROM_CLASS: Record<ScrollShadowSurface, string>;
 export declare const scrollShadowVariants: (props?: ({
-    orientation?: "vertical" | "horizontal" | null | undefined;
     hideScrollBar?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const scrollShadowContainerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const scrollShadowOverlayVariants: (props?: ({
+export declare const scrollShadowEdgeVariants: (props?: ({
     orientation?: "vertical" | "horizontal" | null | undefined;
     edge?: "end" | "start" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ScrollShadowVariantProps = VariantProps<typeof scrollShadowVariants>;
+export type ScrollShadowEdgeVariantProps = VariantProps<typeof scrollShadowEdgeVariants>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,oBAAoB;;;8EAe/B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAiC,CAAC;AAE5E,eAAO,MAAM,2BAA2B;;;8EAiCtC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,CAAC;AACzE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAI9E,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAIlE,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,MAAM,CAAC,mBAAmB,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,oBAAoB;;8EAU/B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAiC,CAAC;AAE5E,eAAO,MAAM,wBAAwB;;;;8EAiCnC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/lib/typescript/components/ScrollShadow/useComposedScrollHandler.d.ts

@@ -0,0 +1,13 @@
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+type ScrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+export declare function isReanimatedScrollHandler(handler: unknown): boolean;
+export declare function composeScrollHandler(internalHandler: ScrollHandler, externalHandler: unknown): ScrollHandler;
+/**
+ * Only call this when the child already passed a Reanimated scroll handler.
+ * `useAnimatedScrollHandler` requires a Babel worklet, and the published
+ * package is not transformed by that plugin, so the plain ScrollView path
+ * must not mount this hook.
+ */
+export declare function useReanimatedComposedScrollHandler(internalHandler: ScrollHandler, externalHandler: unknown): unknown;
+export {};
+//# sourceMappingURL=useComposedScrollHandler.d.ts.map

package/lib/typescript/components/ScrollShadow/useComposedScrollHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComposedScrollHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/useComposedScrollHandler.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAK5E,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;AAE9E,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAEnE;AAED,wBAAgB,oBAAoB,CAClC,eAAe,EAAE,aAAa,EAC9B,eAAe,EAAE,OAAO,GACvB,aAAa,CAMf;AAED;;;;;GAKG;AACH,wBAAgB,kCAAkC,CAChD,eAAe,EAAE,aAAa,EAC9B,eAAe,EAAE,OAAO,GACvB,OAAO,CAyBT"}

package/lib/typescript/components/ScrollShadow/useScrollShadow.d.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 export interface ScrollShadowCapability {
     canScrollBefore: boolean;
@@ -6,12 +7,24 @@ export interface ScrollShadowCapability {
 export interface UseScrollShadowOptions {
     orientation?: 'horizontal' | 'vertical';
     offset?: number;
+    enabled?: boolean;
     onCapabilityChange?: (capability: ScrollShadowCapability) => void;
 }
-export declare function useScrollShadow({ orientation, offset, onCapabilityChange, }?: UseScrollShadowOptions): {
+export interface UseScrollShadowReturn {
     capability: ScrollShadowCapability;
     handleLayout: (event: LayoutChangeEvent) => void;
     handleContentSizeChange: (width: number, height: number) => void;
     handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-};
+}
+export interface ScrollShadowDistance {
+    before: number;
+    after: number;
+}
+interface ScrollShadowTrackerOptions extends UseScrollShadowOptions {
+    onDistanceChange?: (distance: ScrollShadowDistance) => void;
+}
+export declare function normalizeAxisScrollOffset(rawOffset: number, orientation: 'horizontal' | 'vertical', maxOffset: number, platform?: typeof Platform.OS): number;
+export declare function useScrollShadow(options?: UseScrollShadowOptions): UseScrollShadowReturn;
+export declare function useScrollShadowTracker({ orientation, offset, enabled, onCapabilityChange, onDistanceChange, }?: ScrollShadowTrackerOptions): UseScrollShadowReturn;
+export {};
 //# sourceMappingURL=useScrollShadow.d.ts.map

package/lib/typescript/components/ScrollShadow/useScrollShadow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollShadow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/useScrollShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE/F,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACnE;AA2BD,wBAAgB,eAAe,CAAC,EAC9B,WAA0B,EAC1B,MAAU,EACV,kBAAkB,GACnB,GAAE,sBAA2B;;0BA4BlB,iBAAiB;qCASjB,MAAM,UAAU,MAAM;0BAQtB,oBAAoB,CAAC,iBAAiB,CAAC;EAqBlD"}
+{"version":3,"file":"useScrollShadow.d.ts","sourceRoot":"","sources":["../../../../src/components/ScrollShadow/useScrollShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE/F,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACnE;AAED,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,sBAAsB,CAAC;IACnC,YAAY,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,YAAY,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,oBAAoB,KAAK,IAAI,CAAC;CAC7D;AAcD,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,YAAY,GAAG,UAAU,EACtC,SAAS,EAAE,MAAM,EACjB,QAAQ,GAAE,OAAO,QAAQ,CAAC,EAAgB,GACzC,MAAM,CAOR;AA4BD,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B,GAAG,qBAAqB,CAE3F;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAwB,EACxB,MAAU,EACV,OAAc,EACd,kBAAkB,EAClB,gBAAgB,GACjB,GAAE,0BAA+B,GAAG,qBAAqB,CA6EzD"}

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/Tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,IAAI,EACJ,IAAI,EAEJ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAUL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAqBL,KAAK,WAAW,EACjB,MAAM,UAAU,CAAC;AAElB,YAAY,EAAE,WAAW,EAAE,CAAC;AAqD5B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU;IACxE,iKAAiK;IACjK,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAkBb,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED,QAAA,MAAM,QAAQ,gGA2Yb,CAAC;AAQF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,+FAyCZ,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,oGAoBjB,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iGAiBd,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,GAAG,EAAE,OAAO,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,KAAK,EAAE,OAAO,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,IAAI,EAKX,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,IAAI,EACJ,IAAI,EAEJ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAUL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAmBL,KAAK,WAAW,EACjB,MAAM,UAAU,CAAC;AAElB,YAAY,EAAE,WAAW,EAAE,CAAC;AAqD5B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU;IACxE,iKAAiK;IACjK,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,4FAkBb,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED,QAAA,MAAM,QAAQ,gGAmYb,CAAC;AAQF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,+FAyCZ,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,oGAoBjB,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,SAAS,iGAiBd,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,GAAG,EAAE,OAAO,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,YAAY,CAAC;IAC9B,KAAK,EAAE,OAAO,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,IAAI,EAKX,qBAAqB,CAAC"}

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

@@ -8,13 +8,6 @@ export declare const OUTLINE_INDICATOR_THICKNESS = 2;
  * ahead of a still-sliding solid/outline indicator. Change both together.
  */
 export declare const TABS_INDICATOR_TRANSITION_MS = 150;
-/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
-export declare const TABS_SCROLL_FADE_SIZE = 32;
-/**
- * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
- * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
- */
-export declare const TABS_SOLID_SCROLL_FADE_SIZE = 40;
 /**
  * Numeric styles that can't be expressed as static Uniwind utility classes — solid track radius
  * and outline indicator offset (`bottom-px` / `left-px` don't apply on Reanimated host views).

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAKvD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAuB9C,kGAAkG;AAClG,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD,yFAAyF;AACzF,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAqB9C;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;IAIrB,kGAAkG;;;;IAIlG,sGAAsG;;;;;;;;;;;;;;;;;;;;;;;;IAwBtG,6GAA6G;;;;;CAK7G,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,oFAA4B,CAAC;AAE1D,mEAAmE;AACnE,eAAO,MAAM,qBAAqB;;;;8EAkChC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,oFAErC,CAAC;AAEH,eAAO,MAAM,4BAA4B,oFAAiD,CAAC;AAE3F,eAAO,MAAM,0BAA0B,oFAA6B,CAAC;AAErE,eAAO,MAAM,+BAA+B,oFAAmC,CAAC;AAGhF,eAAO,MAAM,4BAA4B,oFAOvC,CAAC;AAIH,eAAO,MAAM,iCAAiC,oFAO5C,CAAC;AAEH,eAAO,MAAM,qCAAqC;;8EAUjD,CAAC;AAIF,eAAO,MAAM,wBAAwB;;8EAQnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;8EA0BhC,CAAC;AAEH,eAAO,MAAM,eAAe;;;8EAuD3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;8EAQ5B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAiB/B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AACvE,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAKvD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAuB9C,kGAAkG;AAClG,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAE7C;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAqBhD;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;IAIrB,kGAAkG;;;;IAIlG,sGAAsG;;;;;;;;;;;;;;;;;;;;;;;;IAwBtG,6GAA6G;;;;;CAK7G,CAAC;AAEH,eAAO,MAAM,gBAAgB;;8EAQ3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,oFAA4B,CAAC;AAE1D,mEAAmE;AACnE,eAAO,MAAM,qBAAqB;;;;8EAkChC,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,oFAErC,CAAC;AAEH,eAAO,MAAM,4BAA4B,oFAAiD,CAAC;AAE3F,eAAO,MAAM,0BAA0B,oFAA6B,CAAC;AAErE,eAAO,MAAM,+BAA+B,oFAAmC,CAAC;AAGhF,eAAO,MAAM,4BAA4B,oFAOvC,CAAC;AAIH,eAAO,MAAM,iCAAiC,oFAO5C,CAAC;AAEH,eAAO,MAAM,qCAAqC;;8EAUjD,CAAC;AAIF,eAAO,MAAM,wBAAwB;;8EAQnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;8EA0BhC,CAAC;AAEH,eAAO,MAAM,eAAe;;;8EAuD3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;8EAQ5B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAiB/B,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AACvE,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,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/figma/ListItem.SectionHeader.figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.SectionHeader.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ListItem.SectionHeader.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAa1B,wBAIE"}
+{"version":3,"file":"ListItem.SectionHeader.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ListItem.SectionHeader.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA6B1B,wBAIE"}

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.3",
+  "version": "0.2.5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,7 +33,9 @@
     "lib",
     "src",
     "!src/figma",
-    "coverage.svg"
+    "coverage.svg",
+    "docs",
+    "AGENTS.md"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -104,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.3",
-    "@cdx-ui/utils": "0.2.3",
-    "@cdx-ui/icons": "0.2.3",
-    "@cdx-ui/primitives": "0.2.3"
+    "@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/DateTimeList/index.tsx

@@ -1,6 +1,5 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Pressable, Text, View, type ViewProps } from 'react-native';
-import { useCSSVariable } from 'uniwind';
 import {
   dataAttributes,
   DATE_TIME_LIST_HEIGHT,
@@ -15,10 +14,11 @@ import {
 } from '@cdx-ui/primitives';
 import { getDateTimeSegmentVisibility } from '@cdx-ui/formatters';
 import { cn } from '@cdx-ui/utils';
+import { ScrollShadow } from '../ScrollShadow';
 import {
   dateTimeListColumnsVariants,
   dateTimeListColumnVariants,
-  dateTimeListEdgeFadeVariants,
+  dateTimeListFadeLayerVariants,
   dateTimeListHighlightVariants,
   dateTimeListOptionTextVariants,
   dateTimeListOptionVariants,
@@ -50,24 +50,6 @@ function DateTimeListDefaultBody() {
   );
 }
 
-/** Cross-platform edge fade (Uniwind gradients are unreliable on native). */
-function EdgeFade({ edge }: { edge: 'top' | 'bottom' }) {
-  const surface = useCSSVariable('--color-surface-primary') || 'transparent';
-  const isTop = edge === 'top';
-  return (
-    <View
-      pointerEvents="none"
-      className={dateTimeListEdgeFadeVariants({ edge })}
-      style={{
-        height: DATE_TIME_LIST_ITEM_HEIGHT * 1.75,
-        experimental_backgroundImage: isTop
-          ? `linear-gradient(to bottom, ${surface as string}, transparent)`
-          : `linear-gradient(to top, ${surface as string}, transparent)`,
-      }}
-    />
-  );
-}
-
 const DateTimeListRoot = forwardRef<View, DateTimeListProps>(
   ({ className, children, style, ...props }, ref) => (
     <DateTimeListRootPrimitive
@@ -86,12 +68,17 @@ const DateTimeListRoot = forwardRef<View, DateTimeListProps>(
         }}
       />
 
-      <View className={dateTimeListColumnsVariants()}>
-        {children ?? <DateTimeListDefaultBody />}
-      </View>
-
-      <EdgeFade edge="top" />
-      <EdgeFade edge="bottom" />
+      <ScrollShadow
+        className={dateTimeListFadeLayerVariants()}
+        orientation="vertical"
+        size="large"
+        surface="primary"
+        visibility="both"
+      >
+        <View className={dateTimeListColumnsVariants()}>
+          {children ?? <DateTimeListDefaultBody />}
+        </View>
+      </ScrollShadow>
     </DateTimeListRootPrimitive>
   ),
 );

package/src/components/DateTimeList/styles.ts

@@ -45,15 +45,6 @@ export const dateTimeListOptionTextVariants = cva('body-md tabular-nums', {
   defaultVariants: { selected: false },
 });
 
-export const dateTimeListEdgeFadeVariants = cva(['absolute left-0 right-0', LAYER_EDGE_FADE], {
-  variants: {
-    edge: {
-      top: 'top-0',
-      bottom: 'bottom-0',
-    },
-  },
-  defaultVariants: { edge: 'top' },
-});
+export const dateTimeListFadeLayerVariants = cva(['h-full', LAYER_EDGE_FADE]);
 
 export type DateTimeListColumnVariantProps = VariantProps<typeof dateTimeListColumnVariants>;
-export type DateTimeListEdgeFadeVariantProps = VariantProps<typeof dateTimeListEdgeFadeVariants>;

package/src/components/ListItem/index.tsx

@@ -522,11 +522,12 @@ export interface ListItemSectionHeaderProps extends ViewProps {
   trailing?: ReactNode;
   /**
    * Background treatment. `ghost` has no fill and a bottom border; `subtle` adds a neutral fill
-   * (matching `subtle` on Avatar, Chip, and IconButton) and drops the bottom border.
-   * Label typography is the same for both.
+   * (matching `subtle` on Avatar, Chip, and IconButton) and drops the bottom border. `gradient`
+   * fades from the primary surface into a brand tint, left to right, and keeps the bottom border.
+   * Label typography is the same for all three.
    * @default 'ghost'
-   * @remarks `'ghost' | 'subtle'`
-   * @fumadocsType `'ghost' | 'subtle'`
+   * @remarks `'ghost' | 'subtle' | 'gradient'`
+   * @fumadocsType `'ghost' | 'subtle' | 'gradient'`
    */
   variant?: ListItemSectionHeaderVariant;
   /**

package/src/components/ListItem/styles.ts

@@ -154,6 +154,7 @@ export const listItemSectionHeaderVariants = cva(
         ghost: [],
         // The fill separates the header from its rows, so the bottom border is dropped.
         subtle: 'bg-surface-neutral-subtle border-b-0',
+        gradient: 'bg-gradient-to-r from-surface-primary to-surface-brand-tint',
       },
       showDivider: {
         true: ['border-t-4 border-solid border-t-surface-brand-strong/40', 'border-x-0'],