@cdx-ui/components 0.2.3 → 0.2.4

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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,10 +106,10 @@
     "@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/formatters": "0.2.4",
+    "@cdx-ui/primitives": "0.2.4",
+    "@cdx-ui/icons": "0.2.4",
+    "@cdx-ui/utils": "0.2.4"
   },
   "devDependencies": {
     "@dnd-kit/core": "6.3.1",

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'],

package/src/components/Menu/index.tsx

@@ -35,6 +35,7 @@ import {
   type IMenuTriggerProps,
 } from '@cdx-ui/primitives';
 import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { ScrollShadow } from '../ScrollShadow';
 import { Icon, type IconProps } from '../Icon';
 import { checkboxIconVariants, checkboxIndicatorVariants } from '../Checkbox/styles';
 import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
@@ -222,14 +223,16 @@ const MenuContent = forwardRef<View, MenuContentProps>(
       : mergeDataAttributes(props, dataAttributes({ slot: 'menu-content' }));
 
     const content = shouldScroll ? (
-      <ScrollView
-        className="shrink"
-        style={[MENU_SCROLL_STYLE, constrainedStyle]}
-        scrollEventThrottle={16}
-        nestedScrollEnabled
-      >
-        {children}
-      </ScrollView>
+      <ScrollShadow className="shrink" style={constrainedStyle} surface="primary">
+        <ScrollView
+          className="shrink"
+          style={[MENU_SCROLL_STYLE, constrainedStyle]}
+          scrollEventThrottle={16}
+          nestedScrollEnabled
+        >
+          {children}
+        </ScrollView>
+      </ScrollShadow>
     ) : (
       children
     );

package/src/components/ScrollShadow/gradient.ts

@@ -0,0 +1,48 @@
+import { I18nManager } from 'react-native';
+import { SCROLL_SHADOW_SURFACE_FROM_CLASS, type ScrollShadowSurface } from './styles';
+
+type ScrollShadowEdge = 'start' | 'end';
+type ScrollShadowOrientation = 'horizontal' | 'vertical';
+
+export function getWebSurfaceGradientClasses(
+  surface: ScrollShadowSurface,
+  orientation: ScrollShadowOrientation,
+  edge: ScrollShadowEdge,
+): string {
+  const fromClass = SCROLL_SHADOW_SURFACE_FROM_CLASS[surface];
+
+  if (orientation === 'vertical') {
+    return edge === 'start'
+      ? `bg-gradient-to-b ${fromClass} to-transparent`
+      : `bg-gradient-to-t ${fromClass} to-transparent`;
+  }
+
+  // ltr:/rtl: so the fade flips with layout direction on the first paint,
+  // not after a later scroll re-render.
+  return edge === 'start'
+    ? `ltr:bg-gradient-to-r rtl:bg-gradient-to-l ${fromClass} to-transparent`
+    : `ltr:bg-gradient-to-l rtl:bg-gradient-to-r ${fromClass} to-transparent`;
+}
+
+export function getInlineBackgroundImage(
+  color: string,
+  orientation: ScrollShadowOrientation,
+  edge: ScrollShadowEdge,
+  isRTL = I18nManager.isRTL,
+): string {
+  if (orientation === 'vertical') {
+    return edge === 'start'
+      ? `linear-gradient(to bottom, ${color}, transparent)`
+      : `linear-gradient(to top, ${color}, transparent)`;
+  }
+
+  if (isRTL) {
+    return edge === 'start'
+      ? `linear-gradient(to left, ${color}, transparent)`
+      : `linear-gradient(to right, ${color}, transparent)`;
+  }
+
+  return edge === 'start'
+    ? `linear-gradient(to right, ${color}, transparent)`
+    : `linear-gradient(to left, ${color}, transparent)`;
+}