@cdx-ui/components 0.0.1-beta.138 → 0.0.1-beta.139

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

@@ -1 +1 @@
-{"version":3,"names":["cva","carouselPaginationContainerClassName","carouselPaginationDotVariants","variants","active","true","false","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Carousel/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;;AAEjE;AACA,OAAO,MAAMC,oCAAoC,GAAG,YAAY;AAEhE,OAAO,MAAMC,6BAA6B,GAAGF,GAAG,CAAC,cAAc,EAAE;EAC/DG,QAAQ,EAAE;IACRC,MAAM,EAAE;MACNC,IAAI,EAAE,2BAA2B;MACjCC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["cva","carouselPaginationContainerClassName","carouselPaginationDotVariants","variants","active","true","false","defaultVariants","carouselNavButtonRootVariants","disabled","carouselNavButtonIconVariants"],"sourceRoot":"../../../../src","sources":["components/Carousel/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;;AAEjE;AACA,OAAO,MAAMC,oCAAoC,GAAG,YAAY;AAEhE,OAAO,MAAMC,6BAA6B,GAAGF,GAAG,CAAC,cAAc,EAAE;EAC/DG,QAAQ,EAAE;IACRC,MAAM,EAAE;MACNC,IAAI,EAAE,2BAA2B;MACjCC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfH,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAIF;AACA,OAAO,MAAMI,6BAA6B,GAAGR,GAAG,CAAC,EAAE,EAAE;EACnDG,QAAQ,EAAE;IACRM,QAAQ,EAAE;MACRJ,IAAI,EAAE,kCAAkC;MACxCC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,OAAO,MAAMC,6BAA6B,GAAGV,GAAG,CAAC,EAAE,EAAE;EACnDG,QAAQ,EAAE;IACRM,QAAQ,EAAE;MACRJ,IAAI,EAAE,uBAAuB;MAC7BC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfE,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Carousel/useCarouselActiveIndex.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { useAnimatedReaction } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+let nextListenerId = 1;
+
+/**
+ * Syncs `Math.round(progress)` into React state for bounds-aware disabled state.
+ * Do not call `getCurrentIndex()` during render — the adopted library warns against it.
+ *
+ * Uses both:
+ * - `useAnimatedReaction` + `scheduleOnRN` (native / Babel-transformed web worklets)
+ * - SharedValue `addListener` (JS-thread fallback for web hosts that serve bob-built
+ *   `lib/` without the Reanimated Babel plugin — e.g. the docs Vite SPA)
+ */
+export function useCarouselActiveIndex(progress) {
+  const [activeIndex, setActiveIndex] = useState(() => Math.round(progress.get()));
+  const setActiveIndexRef = useRef(setActiveIndex);
+  setActiveIndexRef.current = setActiveIndex;
+  useAnimatedReaction(() => Math.round(progress.get()), (current, previous) => {
+    if (current !== previous) {
+      scheduleOnRN(setActiveIndexRef.current, current);
+    }
+  });
+  useEffect(() => {
+    const listenerId = nextListenerId++;
+    const onChange = value => {
+      const next = Math.round(value);
+      setActiveIndexRef.current(prev => prev === next ? prev : next);
+    };
+    try {
+      progress.addListener(listenerId, onChange);
+    } catch {
+      // Native JS runtime rejects addListener — the worklet path above handles it.
+      return;
+    }
+    return () => {
+      try {
+        progress.removeListener(listenerId);
+      } catch {
+        // ignore
+      }
+    };
+  }, [progress]);
+  return activeIndex;
+}
+//# sourceMappingURL=useCarouselActiveIndex.js.map

package/lib/module/components/Carousel/useCarouselActiveIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","useAnimatedReaction","scheduleOnRN","nextListenerId","useCarouselActiveIndex","progress","activeIndex","setActiveIndex","Math","round","get","setActiveIndexRef","current","previous","listenerId","onChange","value","next","prev","addListener","removeListener"],"sourceRoot":"../../../../src","sources":["components/Carousel/useCarouselActiveIndex.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACnD,SAASC,mBAAmB,QAA0B,yBAAyB;AAC/E,SAASC,YAAY,QAAQ,uBAAuB;AAEpD,IAAIC,cAAc,GAAG,CAAC;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAACC,QAA6B,EAAU;EAC5E,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGP,QAAQ,CAAC,MAAMQ,IAAI,CAACC,KAAK,CAACJ,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAC,CAAC;EAChF,MAAMC,iBAAiB,GAAGZ,MAAM,CAACQ,cAAc,CAAC;EAChDI,iBAAiB,CAACC,OAAO,GAAGL,cAAc;EAE1CN,mBAAmB,CACjB,MAAMO,IAAI,CAACC,KAAK,CAACJ,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAC,EAChC,CAACE,OAAO,EAAEC,QAAQ,KAAK;IACrB,IAAID,OAAO,KAAKC,QAAQ,EAAE;MACxBX,YAAY,CAACS,iBAAiB,CAACC,OAAO,EAAEA,OAAO,CAAC;IAClD;EACF,CACF,CAAC;EAEDd,SAAS,CAAC,MAAM;IACd,MAAMgB,UAAU,GAAGX,cAAc,EAAE;IACnC,MAAMY,QAAQ,GAAIC,KAAa,IAAK;MAClC,MAAMC,IAAI,GAAGT,IAAI,CAACC,KAAK,CAACO,KAAK,CAAC;MAC9BL,iBAAiB,CAACC,OAAO,CAAEM,IAAI,IAAMA,IAAI,KAAKD,IAAI,GAAGC,IAAI,GAAGD,IAAK,CAAC;IACpE,CAAC;IAED,IAAI;MACFZ,QAAQ,CAACc,WAAW,CAACL,UAAU,EAAEC,QAAQ,CAAC;IAC5C,CAAC,CAAC,MAAM;MACN;MACA;IACF;IAEA,OAAO,MAAM;MACX,IAAI;QACFV,QAAQ,CAACe,cAAc,CAACN,UAAU,CAAC;MACrC,CAAC,CAAC,MAAM;QACN;MAAA;IAEJ,CAAC;EACH,CAAC,EAAE,CAACT,QAAQ,CAAC,CAAC;EAEd,OAAOC,WAAW;AACpB","ignoreList":[]}

package/lib/module/components/IconButton/index.js

@@ -44,9 +44,11 @@ const IconButtonRoot = /*#__PURE__*/forwardRef(({
     className: rootClassName,
     style: style,
     ...props,
-    ...mergeDataAttributes(props, dataAttributes({
+    ...mergeDataAttributes(dataAttributes({
       slot: 'icon-button'
-    })),
+    }),
+    // Consumer/parent compound slots (e.g. carousel-prev-button) win over the default.
+    props),
     children: /*#__PURE__*/_jsx(Icon, {
       as: IconComponent,
       className: glyphClassName

package/lib/module/components/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","ButtonRoot","dataAttributes","mergeDataAttributes","cn","Icon","iconButtonGlyphVariants","iconButtonIconColorVariants","iconButtonRootVariants","jsx","_jsx","hasWarnedIconButtonTintVariant","IconButtonRoot","variant","variantProp","color","size","className","style","as","IconComponent","iconClassName","accessibilityRole","props","ref","__DEV__","console","warn","rootClassName","glyphClassName","slot","children","displayName","IconButton"],"sourceRoot":"../../../../src","sources":["components/IconButton/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAE7C,SACEC,UAAU,EACVC,cAAc,EACdC,mBAAmB,QAEd,oBAAoB;AAE3B,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,IAAI,QAAwB,SAAS;AAC9C,SAEEC,uBAAuB,EACvBC,2BAA2B,EAC3BC,sBAAsB,QACjB,UAAU;;AAIjB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGA,IAAIC,8BAA8B,GAAG,KAAK;AAmB1C,MAAMC,cAAc,gBAAGb,UAAU,CAC/B,CACE;EACEc,OAAO,EAAEC,WAAW,GAAG,OAAO;EAC9BC,KAAK,GAAG,SAAS;EACjBC,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,KAAK;EACLC,EAAE,EAAEC,aAAa;EACjBC,aAAa;EACbC,iBAAiB,GAAG,QAAQ;EAC5B,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACHxB,SAAS,CAAC,MAAM;IACd,IAAIyB,OAAO,IAAIX,WAAW,KAAK,MAAM,IAAI,CAACH,8BAA8B,EAAE;MACxEA,8BAA8B,GAAG,IAAI;MACrCe,OAAO,CAACC,IAAI,CACV,oHACF,CAAC;IACH;EACF,CAAC,EAAE,CAACb,WAAW,CAAC,CAAC;EAEjB,MAAMD,OAAO,GAAGC,WAAW,KAAK,MAAM,GAAG,QAAQ,GAAGA,WAAW;EAE/D,MAAMc,aAAa,GAAGxB,EAAE,CAACI,sBAAsB,CAAC;IAAEK,OAAO;IAAEE,KAAK;IAAEC;EAAK,CAAC,CAAC,EAAEC,SAAS,CAAC;EAErF,MAAMY,cAAc,GAAGzB,EAAE,CACvBE,uBAAuB,CAAC;IAAEU;EAAK,CAAC,CAAC,EACjCT,2BAA2B,CAAC;IAAEM,OAAO;IAAEE;EAAM,CAAC,CAAC,EAC/CM,aACF,CAAC;EAED,oBACEX,IAAA,CAACT,UAAU;IACTuB,GAAG,EAAEA,GAAI;IACTF,iBAAiB,EAAEA,iBAAkB;IACrCL,SAAS,EAAEW,aAAc;IACzBV,KAAK,EAAEA,KAAM;IAAA,GACTK,KAAK;IAAA,GACLpB,mBAAmB,CAACoB,KAAK,EAAErB,cAAc,CAAC;MAAE4B,IAAI,EAAE;IAAc,CAAC,CAAC,CAAC;IAAAC,QAAA,eAEvErB,IAAA,CAACL,IAAI;MAACc,EAAE,EAAEC,aAAc;MAACH,SAAS,EAAEY;IAAe,CAAE;EAAC,CAC5C,CAAC;AAEjB,CACF,CAAC;AAEDjB,cAAc,CAACoB,WAAW,GAAG,YAAY;AAEzC,OAAO,MAAMC,UAAU,GAAGrB,cAAc","ignoreList":[]}
+{"version":3,"names":["forwardRef","useEffect","ButtonRoot","dataAttributes","mergeDataAttributes","cn","Icon","iconButtonGlyphVariants","iconButtonIconColorVariants","iconButtonRootVariants","jsx","_jsx","hasWarnedIconButtonTintVariant","IconButtonRoot","variant","variantProp","color","size","className","style","as","IconComponent","iconClassName","accessibilityRole","props","ref","__DEV__","console","warn","rootClassName","glyphClassName","slot","children","displayName","IconButton"],"sourceRoot":"../../../../src","sources":["components/IconButton/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,SAAS,QAAQ,OAAO;AAE7C,SACEC,UAAU,EACVC,cAAc,EACdC,mBAAmB,QAEd,oBAAoB;AAE3B,SAASC,EAAE,QAAQ,eAAe;AAClC,SAASC,IAAI,QAAwB,SAAS;AAC9C,SAEEC,uBAAuB,EACvBC,2BAA2B,EAC3BC,sBAAsB,QACjB,UAAU;;AAIjB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGA,IAAIC,8BAA8B,GAAG,KAAK;AAmB1C,MAAMC,cAAc,gBAAGb,UAAU,CAC/B,CACE;EACEc,OAAO,EAAEC,WAAW,GAAG,OAAO;EAC9BC,KAAK,GAAG,SAAS;EACjBC,IAAI,GAAG,SAAS;EAChBC,SAAS;EACTC,KAAK;EACLC,EAAE,EAAEC,aAAa;EACjBC,aAAa;EACbC,iBAAiB,GAAG,QAAQ;EAC5B,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACHxB,SAAS,CAAC,MAAM;IACd,IAAIyB,OAAO,IAAIX,WAAW,KAAK,MAAM,IAAI,CAACH,8BAA8B,EAAE;MACxEA,8BAA8B,GAAG,IAAI;MACrCe,OAAO,CAACC,IAAI,CACV,oHACF,CAAC;IACH;EACF,CAAC,EAAE,CAACb,WAAW,CAAC,CAAC;EAEjB,MAAMD,OAAO,GAAGC,WAAW,KAAK,MAAM,GAAG,QAAQ,GAAGA,WAAW;EAE/D,MAAMc,aAAa,GAAGxB,EAAE,CAACI,sBAAsB,CAAC;IAAEK,OAAO;IAAEE,KAAK;IAAEC;EAAK,CAAC,CAAC,EAAEC,SAAS,CAAC;EAErF,MAAMY,cAAc,GAAGzB,EAAE,CACvBE,uBAAuB,CAAC;IAAEU;EAAK,CAAC,CAAC,EACjCT,2BAA2B,CAAC;IAAEM,OAAO;IAAEE;EAAM,CAAC,CAAC,EAC/CM,aACF,CAAC;EAED,oBACEX,IAAA,CAACT,UAAU;IACTuB,GAAG,EAAEA,GAAI;IACTF,iBAAiB,EAAEA,iBAAkB;IACrCL,SAAS,EAAEW,aAAc;IACzBV,KAAK,EAAEA,KAAM;IAAA,GACTK,KAAK;IAAA,GACLpB,mBAAmB,CACrBD,cAAc,CAAC;MAAE4B,IAAI,EAAE;IAAc,CAAC,CAAC;IACvC;IACAP,KACF,CAAC;IAAAQ,QAAA,eAEDrB,IAAA,CAACL,IAAI;MAACc,EAAE,EAAEC,aAAc;MAACH,SAAS,EAAEY;IAAe,CAAE;EAAC,CAC5C,CAAC;AAEjB,CACF,CAAC;AAEDjB,cAAc,CAACoB,WAAW,GAAG,YAAY;AAEzC,OAAO,MAAMC,UAAU,GAAGrB,cAAc","ignoreList":[]}

package/lib/typescript/components/Carousel/context.d.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ICarouselInstance } from 'react-native-reanimated-carousel';
+export interface CarouselContextValue {
+    progress: SharedValue<number>;
+    carouselRef: RefObject<ICarouselInstance | null>;
+    loop: boolean;
+    itemCount: number;
+    vertical: boolean;
+}
+export declare const CarouselProgressProvider: import("react").FunctionComponent<{
+    children: import("react").ReactNode;
+    value: CarouselContextValue;
+}>, useCarouselProgressContext: () => CarouselContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/components/Carousel/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAG1E,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,WAAW,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAO,wBAAwB;;;IAAE,0BAA0B,4BACU,CAAC"}

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

@@ -2,6 +2,8 @@ import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'rea
 import type { AccessibilityRole, AccessibilityState } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import { type ICarouselInstance, type TCarouselProps } from 'react-native-reanimated-carousel';
+import { CarouselNextButton, CarouselPrevButton } from './navButton';
+export type { CarouselNavButtonProps } from './navButton';
 export type CarouselRef = ICarouselInstance;
 /**
  * Full passthrough of `react-native-reanimated-carousel`'s own props (per `01-api-design.md`,
@@ -11,7 +13,7 @@ export type CarouselRef = ICarouselInstance;
  */
 export type CarouselProps<T> = TCarouselProps<T> & {
     className?: string;
-    /** Rendered inside the carousel's progress-sharing provider — use to compose `Carousel.Pagination`. */
+    /** Rendered inside the carousel's progress-sharing provider — use to compose `Carousel.Pagination`, `Carousel.PrevButton`, and `Carousel.NextButton`. */
     children?: ReactNode;
 };
 declare const CarouselRoot: <T>(props: CarouselProps<T> & {
@@ -52,6 +54,8 @@ export interface CarouselPaginationProps<T = unknown> {
 declare const CarouselPagination: <T>(props: CarouselPaginationProps<T>) => ReactElement | null;
 type CarouselCompoundComponent = typeof CarouselRoot & {
     Pagination: typeof CarouselPagination;
+    PrevButton: typeof CarouselPrevButton;
+    NextButton: typeof CarouselNextButton;
 };
 export declare const Carousel: CarouselCompoundComponent;
 export interface UseCarouselOptions {
@@ -66,5 +70,4 @@ export declare function useCarousel(options?: UseCarouselOptions): {
     prev: (opts?: Parameters<ICarouselInstance["prev"]>[0]) => void | undefined;
     scrollTo: (opts?: Parameters<ICarouselInstance["scrollTo"]>[0]) => void | undefined;
 };
-export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAa,MAAM,cAAc,CAAC;AAErF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAmB,EAEjB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAM1C,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAyEF,QAAA,MAAM,YAAY,EAAgC,CAAC,CAAC,EAClD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACvD,YAAY,GAAG,IAAI,CAAC;AAMzB,MAAM,WAAW,4CAA4C;IAC3D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,OAAO;IAClD,8FAA8F;IAC9F,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACnD,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,2BAA2B,CAAC,EAAE,CAC5B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,KACX,4CAA4C,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,6GAA6G;IAC7G,WAAW,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAClD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gFAAgF;IAChF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAgFD,QAAA,MAAM,kBAAkB,EAAkC,CAAC,CAAC,EAC1D,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAC9B,YAAY,GAAG,IAAI,CAAC;AAEzB,KAAK,yBAAyB,GAAG,OAAO,YAAY,GAAG;IACrD,UAAU,EAAE,OAAO,kBAAkB,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAEf,yBAAyB,CAAC;AAMhC,MAAM,WAAW,kBAAkB;IACjC,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB;;IAKpD,8FAA8F;;kBAEhF,UAAU,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;kBACxC,UAAU,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;sBACpC,UAAU,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;EAEjE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/components/Carousel/navButton.d.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ICarouselInstance } from 'react-native-reanimated-carousel';
+import { type ForgeIcon } from '@cdx-ui/icons';
+import { type IconButtonProps } from '../IconButton';
+export interface CarouselNavButtonProps extends Omit<IconButtonProps, 'as' | 'variant' | 'onPress' | 'disabled' | 'isDisabled'> {
+    /** Mirrors `Carousel`'s `data.length` — only required when rendered outside `<Carousel>`. */
+    itemCount?: number;
+    /** Explicit progress value — only required when rendered outside `<Carousel>`. */
+    progress?: SharedValue<number>;
+    /** Explicit carousel ref — only required outside `<Carousel>` (unless `onPress` is provided). */
+    carouselRef?: RefObject<ICarouselInstance | null>;
+    /**
+     * Mirrors `Carousel`'s `loop` prop for bounds-aware disabled state.
+     * Defaults to `true` (same as `Carousel`) when omitted outside context.
+     */
+    loop?: boolean;
+    /**
+     * Mirrors `Carousel`'s `vertical` prop for default icons and accessibility labels.
+     * Defaults to `false` when omitted outside context.
+     */
+    vertical?: boolean;
+    /** Overrides the default press-to-navigate behavior (`prev` / `next` with `{ animated: true }`). */
+    onPress?: () => void;
+    /** Manual override; when omitted, derived from `loop` and `progress` at bounds. */
+    disabled?: boolean;
+    /** Forge icon component — defaults to direction-appropriate chevrons or arrows. */
+    as?: ForgeIcon;
+    /** Overrides default `"Previous slide"` / `"Next slide"` (or item labels when `vertical`). */
+    accessibilityLabel?: string;
+}
+export declare function CarouselPrevButton(props: CarouselNavButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CarouselPrevButton {
+    var displayName: string;
+}
+export declare function CarouselNextButton(props: CarouselNavButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CarouselNextButton {
+    var displayName: string;
+}
+//# sourceMappingURL=navButton.d.ts.map

package/lib/typescript/components/Carousel/navButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/navButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAKjE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,eAAe,EACf,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CACzD;IACC,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iGAAiG;IACjG,WAAW,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAClD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oGAAoG;IACpG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,8FAA8F;IAC9F,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAuGD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,sBAAsB,2CAE/D;yBAFe,kBAAkB;;;AAMlC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,sBAAsB,2CAE/D;yBAFe,kBAAkB"}

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

@@ -5,4 +5,12 @@ export declare const carouselPaginationDotVariants: (props?: ({
     active?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type CarouselPaginationDotVariants = VariantProps<typeof carouselPaginationDotVariants>;
+/** Overrides IconButton's default disabled opacity so tertiary icon color reads clearly at bounds. */
+export declare const carouselNavButtonRootVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const carouselNavButtonIconVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CarouselNavButtonVariants = VariantProps<typeof carouselNavButtonRootVariants>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,sGAAsG;AACtG,eAAO,MAAM,oCAAoC,eAAe,CAAC;AAEjE,eAAO,MAAM,6BAA6B;;8EAUxC,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAC,OAAO,6BAA6B,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,sGAAsG;AACtG,eAAO,MAAM,oCAAoC,eAAe,CAAC;AAEjE,eAAO,MAAM,6BAA6B;;8EAUxC,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAC,OAAO,6BAA6B,CAAC,CAAC;AAE/F,sGAAsG;AACtG,eAAO,MAAM,6BAA6B;;8EAUxC,CAAC;AAEH,eAAO,MAAM,6BAA6B;;8EAUxC,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,6BAA6B,CAAC,CAAC"}

package/lib/typescript/components/Carousel/useCarouselActiveIndex.d.ts

@@ -0,0 +1,12 @@
+import { type SharedValue } from 'react-native-reanimated';
+/**
+ * Syncs `Math.round(progress)` into React state for bounds-aware disabled state.
+ * Do not call `getCurrentIndex()` during render — the adopted library warns against it.
+ *
+ * Uses both:
+ * - `useAnimatedReaction` + `scheduleOnRN` (native / Babel-transformed web worklets)
+ * - SharedValue `addListener` (JS-thread fallback for web hosts that serve bob-built
+ *   `lib/` without the Reanimated Babel plugin — e.g. the docs Vite SPA)
+ */
+export declare function useCarouselActiveIndex(progress: SharedValue<number>): number;
+//# sourceMappingURL=useCarouselActiveIndex.d.ts.map

package/lib/typescript/components/Carousel/useCarouselActiveIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselActiveIndex.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/useCarouselActiveIndex.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKhF;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,MAAM,CAsC5E"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAI3C,MAAM,WAAW,eACf,SAAQ,cAAc,EAAE,YAAY,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EACJ,iBAAiB;IACnB,0CAA0C;OACxC,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,EAAE,EAAE,SAAS,CAAC;IACd,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC;AAqDD,eAAO,MAAM,UAAU,kGAAiB,CAAC;AAEzC,YAAY,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,UAAU,CAAC;AAElB,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAI3C,MAAM,WAAW,eACf,SAAQ,cAAc,EAAE,YAAY,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EACJ,iBAAiB;IACnB,0CAA0C;OACxC,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,EAAE,EAAE,SAAS,CAAC;IACd,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC;AAyDD,eAAO,MAAM,UAAU,kGAAiB,CAAC;AAEzC,YAAY,EAAE,sBAAsB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.138",
+  "version": "0.0.1-beta.139",
   "license": "MIT",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -77,9 +77,9 @@
     "class-variance-authority": "^0.7.1",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/primitives": "0.0.1-beta.138",
-    "@cdx-ui/utils": "0.0.1-beta.138",
-    "@cdx-ui/icons": "0.0.1-beta.138"
+    "@cdx-ui/primitives": "0.0.1-beta.139",
+    "@cdx-ui/utils": "0.0.1-beta.139",
+    "@cdx-ui/icons": "0.0.1-beta.139"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Carousel/context.ts

@@ -0,0 +1,15 @@
+import type { RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ICarouselInstance } from 'react-native-reanimated-carousel';
+import { createContext } from '@cdx-ui/utils';
+
+export interface CarouselContextValue {
+  progress: SharedValue<number>;
+  carouselRef: RefObject<ICarouselInstance | null>;
+  loop: boolean;
+  itemCount: number;
+  vertical: boolean;
+}
+
+export const [CarouselProgressProvider, useCarouselProgressContext] =
+  createContext<CarouselContextValue>('CarouselProgress', { strict: false });

package/src/components/Carousel/index.tsx

@@ -16,10 +16,18 @@ import RNCarousel, {
   type TCarouselProps,
 } from 'react-native-reanimated-carousel';
 import { useResolveClassNames } from 'uniwind';
-import { cn, createContext, mergeRefs } from '@cdx-ui/utils';
+import { cn, mergeRefs } from '@cdx-ui/utils';
+import {
+  CarouselProgressProvider,
+  useCarouselProgressContext,
+  type CarouselContextValue,
+} from './context';
+import { CarouselNextButton, CarouselPrevButton } from './navButton';
 import { resolveCarouselPaginationScrollAction } from './paginationNavigation';
 import { carouselPaginationContainerClassName, carouselPaginationDotVariants } from './styles';
 
+export type { CarouselNavButtonProps } from './navButton';
+
 export type CarouselRef = ICarouselInstance;
 
 /**
@@ -30,7 +38,7 @@ export type CarouselRef = ICarouselInstance;
  */
 export type CarouselProps<T> = TCarouselProps<T> & {
   className?: string;
-  /** Rendered inside the carousel's progress-sharing provider — use to compose `Carousel.Pagination`. */
+  /** Rendered inside the carousel's progress-sharing provider — use to compose `Carousel.Pagination`, `Carousel.PrevButton`, and `Carousel.NextButton`. */
   children?: ReactNode;
 };
 
@@ -42,17 +50,6 @@ type CarouselDotStyle = Omit<ViewStyle, 'width' | 'height' | 'backgroundColor' |
   borderRadius?: number;
 };
 
-interface CarouselContextValue {
-  progress: SharedValue<number>;
-  carouselRef: RefObject<ICarouselInstance | null>;
-  loop: boolean;
-}
-
-const [CarouselProgressProvider, useCarouselProgressContext] = createContext<CarouselContextValue>(
-  'CarouselProgress',
-  { strict: false },
-);
-
 function isSharedValueProgress(value: unknown): value is SharedValue<number> {
   return typeof value === 'object' && value !== null && 'value' in value;
 }
@@ -72,6 +69,8 @@ function CarouselInner<T>(
   const internalRef = useRef<ICarouselInstance>(null);
   const internalProgress = useSharedValue(defaultIndex);
   const resolvedClassNameStyle = useResolveClassNames(cn(className));
+  const vertical = rest.vertical ?? false;
+  const itemCount = rest.data.length;
 
   const handleProgressChange = useCallback(
     (offsetProgress: number, absoluteProgress: number) => {
@@ -88,6 +87,8 @@ function CarouselInner<T>(
     progress: consumerProgress ?? internalProgress,
     carouselRef: internalRef,
     loop,
+    itemCount,
+    vertical,
   };
 
   return (
@@ -234,10 +235,14 @@ const CarouselPagination = CarouselPaginationComponent as <T>(
 
 type CarouselCompoundComponent = typeof CarouselRoot & {
   Pagination: typeof CarouselPagination;
+  PrevButton: typeof CarouselPrevButton;
+  NextButton: typeof CarouselNextButton;
 };
 
 export const Carousel = Object.assign(CarouselRoot, {
   Pagination: CarouselPagination,
+  PrevButton: CarouselPrevButton,
+  NextButton: CarouselNextButton,
 }) as CarouselCompoundComponent;
 
 // =============================================================================

package/src/components/Carousel/navButton.tsx

@@ -0,0 +1,160 @@
+import { useCallback } from 'react';
+import type { RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ICarouselInstance } from 'react-native-reanimated-carousel';
+import {
+  ChevronLeft,
+  ChevronRight,
+  KeyboardArrowDown,
+  KeyboardArrowUp,
+  type ForgeIcon,
+} from '@cdx-ui/icons';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { IconButton, type IconButtonProps } from '../IconButton';
+import { useCarouselProgressContext } from './context';
+import { carouselNavButtonIconVariants, carouselNavButtonRootVariants } from './styles';
+import { useCarouselActiveIndex } from './useCarouselActiveIndex';
+
+export interface CarouselNavButtonProps extends Omit<
+  IconButtonProps,
+  'as' | 'variant' | 'onPress' | 'disabled' | 'isDisabled'
+> {
+  /** Mirrors `Carousel`'s `data.length` — only required when rendered outside `<Carousel>`. */
+  itemCount?: number;
+  /** Explicit progress value — only required when rendered outside `<Carousel>`. */
+  progress?: SharedValue<number>;
+  /** Explicit carousel ref — only required outside `<Carousel>` (unless `onPress` is provided). */
+  carouselRef?: RefObject<ICarouselInstance | null>;
+  /**
+   * Mirrors `Carousel`'s `loop` prop for bounds-aware disabled state.
+   * Defaults to `true` (same as `Carousel`) when omitted outside context.
+   */
+  loop?: boolean;
+  /**
+   * Mirrors `Carousel`'s `vertical` prop for default icons and accessibility labels.
+   * Defaults to `false` when omitted outside context.
+   */
+  vertical?: boolean;
+  /** Overrides the default press-to-navigate behavior (`prev` / `next` with `{ animated: true }`). */
+  onPress?: () => void;
+  /** Manual override; when omitted, derived from `loop` and `progress` at bounds. */
+  disabled?: boolean;
+  /** Forge icon component — defaults to direction-appropriate chevrons or arrows. */
+  as?: ForgeIcon;
+  /** Overrides default `"Previous slide"` / `"Next slide"` (or item labels when `vertical`). */
+  accessibilityLabel?: string;
+}
+
+interface CarouselNavButtonInternalProps extends CarouselNavButtonProps {
+  direction: 'prev' | 'next';
+}
+
+function resolveDefaultIcon(vertical: boolean, direction: 'prev' | 'next'): ForgeIcon {
+  if (vertical) {
+    return direction === 'prev' ? KeyboardArrowUp : KeyboardArrowDown;
+  }
+  return direction === 'prev' ? ChevronLeft : ChevronRight;
+}
+
+function resolveDefaultAccessibilityLabel(vertical: boolean, direction: 'prev' | 'next'): string {
+  if (vertical) {
+    return direction === 'prev' ? 'Previous item' : 'Next item';
+  }
+  return direction === 'prev' ? 'Previous slide' : 'Next slide';
+}
+
+function CarouselNavButton({
+  direction,
+  progress: progressProp,
+  carouselRef: carouselRefProp,
+  itemCount: itemCountProp,
+  loop: loopProp,
+  vertical: verticalProp,
+  onPress,
+  disabled: disabledProp,
+  as,
+  accessibilityLabel,
+  color = 'neutral',
+  size = 'default',
+  className,
+  iconClassName,
+  ...iconButtonProps
+}: CarouselNavButtonInternalProps) {
+  const context = useCarouselProgressContext();
+  const progress = progressProp ?? context?.progress;
+  const carouselRef = carouselRefProp ?? context?.carouselRef;
+  const itemCount = itemCountProp ?? context?.itemCount;
+  const loop = loopProp ?? context?.loop ?? true;
+  const vertical = verticalProp ?? context?.vertical ?? false;
+
+  if (!progress) {
+    throw new Error(
+      `Carousel.${direction === 'prev' ? 'PrevButton' : 'NextButton'} must be rendered inside <Carousel> or receive an explicit \`progress\` prop.`,
+    );
+  }
+
+  if (!onPress && !carouselRef) {
+    throw new Error(
+      `Carousel.${direction === 'prev' ? 'PrevButton' : 'NextButton'} must be rendered inside <Carousel> or receive an explicit \`carouselRef\` prop (or a custom \`onPress\`).`,
+    );
+  }
+
+  if (itemCount == null) {
+    throw new Error(
+      `Carousel.${direction === 'prev' ? 'PrevButton' : 'NextButton'} must be rendered inside <Carousel> or receive an explicit \`itemCount\` prop.`,
+    );
+  }
+
+  const activeIndex = useCarouselActiveIndex(progress);
+  const atStart = activeIndex <= 0;
+  const atEnd = activeIndex >= itemCount - 1;
+  const autoDisabled = !loop && (direction === 'prev' ? atStart : atEnd);
+  const disabled = disabledProp ?? autoDisabled;
+
+  const handlePress = useCallback(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+
+    if (direction === 'prev') {
+      carouselRef?.current?.prev({ animated: true });
+    } else {
+      carouselRef?.current?.next({ animated: true });
+    }
+  }, [onPress, carouselRef, direction]);
+
+  const dataSlot = direction === 'prev' ? 'carousel-prev-button' : 'carousel-next-button';
+
+  return (
+    <IconButton
+      as={as ?? resolveDefaultIcon(vertical, direction)}
+      variant="ghost"
+      color={color}
+      size={size}
+      isDisabled={disabled}
+      onPress={handlePress}
+      accessibilityLabel={
+        accessibilityLabel ?? resolveDefaultAccessibilityLabel(vertical, direction)
+      }
+      accessibilityState={{ disabled }}
+      className={cn(carouselNavButtonRootVariants({ disabled }), className)}
+      iconClassName={cn(carouselNavButtonIconVariants({ disabled }), iconClassName)}
+      {...iconButtonProps}
+      {...mergeDataAttributes(iconButtonProps, dataAttributes({ slot: dataSlot }))}
+    />
+  );
+}
+
+export function CarouselPrevButton(props: CarouselNavButtonProps) {
+  return <CarouselNavButton direction="prev" {...props} />;
+}
+
+CarouselPrevButton.displayName = 'Carousel.PrevButton';
+
+export function CarouselNextButton(props: CarouselNavButtonProps) {
+  return <CarouselNavButton direction="next" {...props} />;
+}
+
+CarouselNextButton.displayName = 'Carousel.NextButton';

package/src/components/Carousel/styles.ts

@@ -16,3 +16,30 @@ export const carouselPaginationDotVariants = cva('rounded-full', {
 });
 
 export type CarouselPaginationDotVariants = VariantProps<typeof carouselPaginationDotVariants>;
+
+/** Overrides IconButton's default disabled opacity so tertiary icon color reads clearly at bounds. */
+export const carouselNavButtonRootVariants = cva([], {
+  variants: {
+    disabled: {
+      true: 'data-[disabled=true]:opacity-100',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+  },
+});
+
+export const carouselNavButtonIconVariants = cva([], {
+  variants: {
+    disabled: {
+      true: 'text-content-tertiary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    disabled: false,
+  },
+});
+
+export type CarouselNavButtonVariants = VariantProps<typeof carouselNavButtonRootVariants>;

package/src/components/Carousel/useCarouselActiveIndex.ts

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAnimatedReaction, type SharedValue } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+
+let nextListenerId = 1;
+
+/**
+ * Syncs `Math.round(progress)` into React state for bounds-aware disabled state.
+ * Do not call `getCurrentIndex()` during render — the adopted library warns against it.
+ *
+ * Uses both:
+ * - `useAnimatedReaction` + `scheduleOnRN` (native / Babel-transformed web worklets)
+ * - SharedValue `addListener` (JS-thread fallback for web hosts that serve bob-built
+ *   `lib/` without the Reanimated Babel plugin — e.g. the docs Vite SPA)
+ */
+export function useCarouselActiveIndex(progress: SharedValue<number>): number {
+  const [activeIndex, setActiveIndex] = useState(() => Math.round(progress.get()));
+  const setActiveIndexRef = useRef(setActiveIndex);
+  setActiveIndexRef.current = setActiveIndex;
+
+  useAnimatedReaction(
+    () => Math.round(progress.get()),
+    (current, previous) => {
+      if (current !== previous) {
+        scheduleOnRN(setActiveIndexRef.current, current);
+      }
+    },
+  );
+
+  useEffect(() => {
+    const listenerId = nextListenerId++;
+    const onChange = (value: number) => {
+      const next = Math.round(value);
+      setActiveIndexRef.current((prev) => (prev === next ? prev : next));
+    };
+
+    try {
+      progress.addListener(listenerId, onChange);
+    } catch {
+      // Native JS runtime rejects addListener — the worklet path above handles it.
+      return;
+    }
+
+    return () => {
+      try {
+        progress.removeListener(listenerId);
+      } catch {
+        // ignore
+      }
+    };
+  }, [progress]);
+
+  return activeIndex;
+}

package/src/components/IconButton/index.tsx

@@ -81,7 +81,11 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
         className={rootClassName}
         style={style}
         {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'icon-button' }))}
+        {...mergeDataAttributes(
+          dataAttributes({ slot: 'icon-button' }),
+          // Consumer/parent compound slots (e.g. carousel-prev-button) win over the default.
+          props,
+        )}
       >
         <Icon as={IconComponent} className={glyphClassName} />
       </ButtonRoot>