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

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/Icon/index.tsx

@@ -1,17 +1,10 @@
 import { withUniwind } from 'uniwind';
 import { cn } from '@cdx-ui/utils';
-import type { ForgeIcon, ForgeIconProps, BrandIcon } from '@cdx-ui/icons';
+import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
 
 export type IconProps = ForgeIconProps & {
   className?: string; // TODO: Why does this need to specified manually?
-  /**
-   * The icon component to render. Accepts `BrandIcon` components (e.g. `WhatsApp`
-   * from `@cdx-ui/icons`) in addition to themeable `ForgeIcon`s — the `size`
-   * portion of `className` still applies, but brand icons ignore `color`/`filled`
-   * (they are permanently fixed-color and non-themeable; see
-   * docs/internal/research/brand-icons-direction-summary.md).
-   */
-  as: ForgeIcon | BrandIcon;
+  as: ForgeIcon;
 };
 
 function IconImpl({ as: IconComponent, ...props }: IconProps) {
@@ -51,7 +44,7 @@ const StyledIcon = withUniwind(withUniwind(IconImpl), {
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
  * ```
  *
- * @param {ForgeIcon | BrandIcon} as - The Forge (or brand) icon component to render.
+ * @param {ForgeIcon} as - The Forge icon component to render.
  * @param {string} className - Utility classes to style the icon using Uniwind.
  * @param {number} size - Icon size (overrides the size class).
  * @param {...ForgeIconProps} ...props - Additional icon props passed to the "as" icon.

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>