@cdx-ui/components 0.0.1-beta.13 → 0.0.1-beta.131

package/src/components/Card/styles.ts

@@ -19,12 +19,16 @@ export const cardRootVariants = cva(
   },
 );
 
+// ── Stripe ──────────────────────────────────────────────────
+
+export const cardStripeVariants = cva(['bg-brand-400', 'h-2', 'w-full']);
+
 // ── Header ──────────────────────────────────────────────────
 
 export const cardHeaderVariants = cva([
-  'flex-row items-center justify-between px-5 py-3',
-  'border-t-8 border-t-surface-brand-strong',
-  'border-b border-b-solid border-b-stroke-secondary',
+  'border-b border-solid border-b-stroke-secondary',
+  'flex-row items-center justify-between gap-0.5',
+  'px-5 py-3',
 ]);
 
 // ── Title ───────────────────────────────────────────────────
@@ -43,7 +47,18 @@ export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
 
 // ── Footer ──────────────────────────────────────────────────
 
-export const cardFooterVariants = cva(['p-5 pt-0', 'flex-row items-center gap-2']);
+export const cardFooterVariants = cva(['flex-col items-stretch gap-2'], {
+  variants: {
+    fullBleed: {
+      true: 'p-5',
+      false: 'px-5 pb-5 pt-0',
+    },
+  },
+  defaultVariants: {
+    fullBleed: false,
+  },
+});
 
 export type CardVariantProps = VariantProps<typeof cardRootVariants>;
 export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;
+export type CardFooterVariantProps = VariantProps<typeof cardFooterVariants>;

package/src/components/Carousel/index.tsx

@@ -0,0 +1,263 @@
+import {
+  forwardRef,
+  useCallback,
+  useRef,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react';
+import type { AccessibilityRole, AccessibilityState, ViewStyle } from 'react-native';
+import { useSharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import RNCarousel, {
+  Pagination as RNCarouselPagination,
+  type ICarouselInstance,
+  type TCarouselProps,
+} from 'react-native-reanimated-carousel';
+import { useResolveClassNames } from 'uniwind';
+import { cn, createContext, mergeRefs } from '@cdx-ui/utils';
+import { resolveCarouselPaginationScrollAction } from './paginationNavigation';
+import { carouselPaginationContainerClassName, carouselPaginationDotVariants } from './styles';
+
+export type CarouselRef = ICarouselInstance;
+
+/**
+ * Full passthrough of `react-native-reanimated-carousel`'s own props (per `01-api-design.md`,
+ * Resolved Question #1) — re-exported under a Forge-owned name so consumers never import the
+ * adopted library directly. A type alias (not `interface extends`) because `TCarouselProps<T>`
+ * is itself a union-containing type (vertical/mode discriminants), which interfaces cannot extend.
+ */
+export type CarouselProps<T> = TCarouselProps<T> & {
+  className?: string;
+  /** Rendered inside the carousel's progress-sharing provider — use to compose `Carousel.Pagination`. */
+  children?: ReactNode;
+};
+
+/** Mirrors the adopted library's private `DotStyle` shape (not exported) without importing it. */
+type CarouselDotStyle = Omit<ViewStyle, 'width' | 'height' | 'backgroundColor' | 'borderRadius'> & {
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  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;
+}
+
+function CarouselInner<T>(
+  {
+    className,
+    style,
+    onProgressChange,
+    children,
+    loop = true,
+    defaultIndex = 0,
+    ...rest
+  }: CarouselProps<T>,
+  ref: Ref<ICarouselInstance>,
+) {
+  const internalRef = useRef<ICarouselInstance>(null);
+  const internalProgress = useSharedValue(defaultIndex);
+  const resolvedClassNameStyle = useResolveClassNames(cn(className));
+
+  const handleProgressChange = useCallback(
+    (offsetProgress: number, absoluteProgress: number) => {
+      internalProgress.value = absoluteProgress;
+      if (typeof onProgressChange === 'function') {
+        onProgressChange(offsetProgress, absoluteProgress);
+      }
+    },
+    [onProgressChange, internalProgress],
+  );
+
+  const consumerProgress = isSharedValueProgress(onProgressChange) ? onProgressChange : undefined;
+  const contextValue: CarouselContextValue = {
+    progress: consumerProgress ?? internalProgress,
+    carouselRef: internalRef,
+    loop,
+  };
+
+  return (
+    <CarouselProgressProvider value={contextValue}>
+      <RNCarousel
+        ref={mergeRefs(ref, internalRef)}
+        style={[resolvedClassNameStyle, style]}
+        onProgressChange={consumerProgress ?? handleProgressChange}
+        loop={loop}
+        defaultIndex={defaultIndex}
+        {...rest}
+      />
+      {children}
+    </CarouselProgressProvider>
+  );
+}
+
+const CarouselRoot = forwardRef(CarouselInner) as <T>(
+  props: CarouselProps<T> & { ref?: Ref<ICarouselInstance> },
+) => ReactElement | null;
+
+// =============================================================================
+// PAGINATION
+// =============================================================================
+
+export interface CarouselPaginationItemAccessibilityOverrides {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+}
+
+export interface CarouselPaginationProps<T = unknown> {
+  /** Carousel items — must be the same array (or same length) passed to `Carousel`'s `data`. */
+  data: T[];
+  /** Lay dots out vertically instead of horizontally. @default true (horizontal) */
+  horizontal?: boolean;
+  /** Custom content per dot; defaults to the library's built-in dot rendering. */
+  renderItem?: (item: T, index: number) => ReactNode;
+  /** Dot size in pixels (both width and height). */
+  size?: number;
+  /** Included in the default accessibility label, e.g. `"Slide 1 of 4 - {carouselName}"`. */
+  carouselName?: string;
+  /** Per-dot accessibility overrides. Defaults to `"Slide N of M"` / `"Go to Slide N of M"`. */
+  paginationItemAccessibility?: (
+    index: number,
+    length: number,
+  ) => CarouselPaginationItemAccessibilityOverrides;
+  className?: string;
+  /** Explicit progress value — only required when rendered outside `<Carousel>` (sibling composition). */
+  progress?: SharedValue<number>;
+  /** Explicit carousel ref for the default press-to-navigate behavior — only required outside `<Carousel>`. */
+  carouselRef?: RefObject<ICarouselInstance | null>;
+  /**
+   * Mirrors `Carousel`'s `loop` prop for shortest-path dot navigation.
+   * Defaults to `true` (same as `Carousel`) when omitted outside context.
+   */
+  loop?: boolean;
+  /** Overrides the default press-to-navigate behavior (`scrollTo({ index })`). */
+  onPress?: (index: number) => void;
+}
+
+function CarouselPaginationComponent<T extends object>({
+  className,
+  progress: progressProp,
+  carouselRef: carouselRefProp,
+  loop: loopProp,
+  onPress,
+  ...rest
+}: CarouselPaginationProps<T>) {
+  // `strict: false` with no `defaultValue` means this returns `undefined` outside a
+  // `<Carousel>` provider at runtime; cast to communicate that to TypeScript, since
+  // `createContext`'s helper type always reports `T` (see `@cdx-ui/utils`).
+  const context = useCarouselProgressContext() as CarouselContextValue | undefined;
+  const progress = progressProp ?? context?.progress;
+  const carouselRef = carouselRefProp ?? context?.carouselRef;
+  const loop = loopProp ?? context?.loop ?? true;
+
+  if (!progress) {
+    throw new Error(
+      'Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `progress` prop.',
+    );
+  }
+
+  if (!onPress && !carouselRef) {
+    throw new Error(
+      'Carousel.Pagination must be rendered inside <Carousel> or receive an explicit `carouselRef` prop (or a custom `onPress`).',
+    );
+  }
+
+  const handlePress = useCallback(
+    (index: number) => {
+      if (onPress) {
+        onPress(index);
+        return;
+      }
+
+      const carousel = carouselRef?.current;
+      if (!carousel) return;
+
+      const scrollAction = resolveCarouselPaginationScrollAction(
+        carousel.getCurrentIndex(),
+        index,
+        rest.data.length,
+        loop,
+      );
+
+      if (scrollAction) {
+        carousel.scrollTo(scrollAction);
+      }
+    },
+    [onPress, carouselRef, loop, rest.data.length],
+  );
+
+  const containerStyle = useResolveClassNames(cn(carouselPaginationContainerClassName, className));
+  const dotStyle = useResolveClassNames(carouselPaginationDotVariants({ active: false }));
+  const activeDotStyle = useResolveClassNames(carouselPaginationDotVariants({ active: true }));
+
+  return (
+    <RNCarouselPagination.Custom
+      {...rest}
+      progress={progress}
+      onPress={handlePress}
+      containerStyle={containerStyle}
+      dotStyle={{
+        width: 6,
+        height: 6,
+        ...(dotStyle as CarouselDotStyle),
+      }}
+      activeDotStyle={{
+        width: 18,
+        height: 6,
+        ...(activeDotStyle as CarouselDotStyle),
+      }}
+    />
+  );
+}
+
+CarouselPaginationComponent.displayName = 'Carousel.Pagination';
+
+const CarouselPagination = CarouselPaginationComponent as <T>(
+  props: CarouselPaginationProps<T>,
+) => ReactElement | null;
+
+type CarouselCompoundComponent = typeof CarouselRoot & {
+  Pagination: typeof CarouselPagination;
+};
+
+export const Carousel = Object.assign(CarouselRoot, {
+  Pagination: CarouselPagination,
+}) as CarouselCompoundComponent;
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export interface UseCarouselOptions {
+  /** Seed `progress` to match `Carousel`'s `defaultIndex` in sibling composition. @default 0 */
+  defaultIndex?: number;
+}
+
+export function useCarousel(options?: UseCarouselOptions) {
+  const ref = useRef<ICarouselInstance>(null);
+  const progress = useSharedValue(options?.defaultIndex ?? 0);
+  return {
+    ref,
+    /** Bind to `Carousel`'s `onProgressChange` and sibling `Carousel.Pagination`'s `progress`. */
+    progress,
+    next: (opts?: Parameters<ICarouselInstance['next']>[0]) => ref.current?.next(opts),
+    prev: (opts?: Parameters<ICarouselInstance['prev']>[0]) => ref.current?.prev(opts),
+    scrollTo: (opts?: Parameters<ICarouselInstance['scrollTo']>[0]) => ref.current?.scrollTo(opts),
+  };
+}

package/src/components/Carousel/paginationNavigation.ts

@@ -0,0 +1,32 @@
+import type { ICarouselInstance } from 'react-native-reanimated-carousel';
+
+type CarouselPaginationScrollAction = NonNullable<Parameters<ICarouselInstance['scrollTo']>[0]>;
+
+/**
+ * Resolves the shortest `scrollTo` action for pagination dot presses.
+ *
+ * In loop mode the library's absolute `scrollTo({ index })` can animate through every
+ * slide when the current index is past the halfway point of the loop buffer (e.g. index 2 → 3
+ * with four items). Relative `count` navigation avoids that wrap-around path.
+ */
+export function resolveCarouselPaginationScrollAction(
+  currentIndex: number,
+  targetIndex: number,
+  dataLength: number,
+  loop: boolean,
+): CarouselPaginationScrollAction | null {
+  if (currentIndex === targetIndex) return null;
+
+  if (!loop) {
+    return { index: targetIndex, animated: true };
+  }
+
+  const forwardDelta = (targetIndex - currentIndex + dataLength) % dataLength;
+  const backwardDelta = (currentIndex - targetIndex + dataLength) % dataLength;
+
+  if (forwardDelta <= backwardDelta) {
+    return { count: forwardDelta, animated: true };
+  }
+
+  return { count: -backwardDelta, animated: true };
+}

package/src/components/Carousel/styles.ts

@@ -0,0 +1,18 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/** Small default gap between dots — the library ships no default spacing between pagination items. */
+export const carouselPaginationContainerClassName = 'gap-2 py-1';
+
+export const carouselPaginationDotVariants = cva('rounded-full', {
+  variants: {
+    active: {
+      true: 'bg-surface-neutral-strong',
+      false: 'bg-surface-neutral-subtle',
+    },
+  },
+  defaultVariants: {
+    active: false,
+  },
+});
+
+export type CarouselPaginationDotVariants = VariantProps<typeof carouselPaginationDotVariants>;

package/src/components/Checkbox/index.tsx

@@ -1,11 +1,18 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
 import { Check, CheckIndeterminateSmall } from '@cdx-ui/icons';
-import { createCheckbox, type ICheckboxProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  CheckboxRoot as CheckboxRootPrimitive,
+  CheckboxGroup as CheckboxGroupPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useCheckboxContext,
+  type ICheckboxProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
 import {
-  type CheckboxVariantProps,
   checkboxGroupVariants,
   checkboxIconVariants,
   checkboxIndicatorVariants,
@@ -13,49 +20,33 @@ import {
   checkboxRootVariants,
 } from './styles';
 
-const SCOPE = 'CHECKBOX';
-
-const Root = withStyleContext(Pressable, SCOPE);
-
-const useCheckboxStyleContext = () => useStyleContext(SCOPE) as CheckboxVariantProps;
-
-const CheckboxPrimitive = createCheckbox({
-  Root,
-  Indicator: View,
-  Icon: View,
-  Label: Text,
-  Group: View,
-});
-
 // =============================================================================
 // CHECKBOX ROOT
 // =============================================================================
 
-export interface CheckboxProps extends ICheckboxProps, CheckboxVariantProps {
+export interface CheckboxProps extends ICheckboxProps {
   className?: string;
   children?: ReactNode;
 }
 
 const CheckboxRoot = forwardRef<View, CheckboxProps>(
-  ({ size = 'default', className, isIndeterminate, children, style, ...props }, ref) => {
-    const computedClassName = cn(checkboxRootVariants({ size }), className);
+  ({ className, isIndeterminate, children, style, ...props }, ref) => {
+    const computedClassName = cn(checkboxRootVariants(), className);
 
     return (
-      <CheckboxPrimitive
+      <CheckboxRootPrimitive
         ref={ref as any}
         className={computedClassName}
         isIndeterminate={isIndeterminate}
         style={style}
-        context={{ size }}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'checkbox' }))}
       >
         <CheckboxIndicator>
-          <CheckboxPrimitive.Icon>
-            <CheckboxIcon as={isIndeterminate ? CheckIndeterminateSmall : Check} />
-          </CheckboxPrimitive.Icon>
+          <CheckboxIconSlot isIndeterminate={isIndeterminate} />
         </CheckboxIndicator>
         {children}
-      </CheckboxPrimitive>
+      </CheckboxRootPrimitive>
     );
   },
 );
@@ -63,28 +54,79 @@ const CheckboxRoot = forwardRef<View, CheckboxProps>(
 CheckboxRoot.displayName = 'Checkbox';
 
 // =============================================================================
-// CHECKBOX INDICATOR
+// CHECKBOX INDICATOR (styled-only, reads context for data-* styling)
 // =============================================================================
 
+/** Compound check × invalid × active state for native Uniwind selectors (single data-field-state). */
+const INDICATOR_STATES = {
+  'unchecked:false:false': 'idle',
+  'unchecked:true:false': 'invalid',
+  'unchecked:false:true': 'active',
+  'unchecked:true:true': 'invalid-active',
+  'checked:false:false': 'checked',
+  'checked:true:false': 'checked-invalid',
+  'checked:false:true': 'checked-active',
+  'checked:true:true': 'checked-invalid-active',
+  'indeterminate:false:false': 'indeterminate',
+  'indeterminate:true:false': 'indeterminate-invalid',
+  'indeterminate:false:true': 'indeterminate-active',
+  'indeterminate:true:true': 'indeterminate-invalid-active',
+} as const;
+
 export interface CheckboxIndicatorProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useCheckboxStyleContext();
-    const computedClassName = cn(checkboxIndicatorVariants({ size }), className);
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const {
+      isChecked,
+      isDisabled,
+      isHovered,
+      isInvalid,
+      isReadOnly,
+      isPressed,
+      isFocused,
+      isIndeterminate,
+      isFocusVisible,
+    } = useCheckboxContext();
+
+    const checkState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
+    const fieldState =
+      INDICATOR_STATES[
+        `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
+      ];
+
+    const computedClassName = cn(checkboxIndicatorVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <CheckboxPrimitive.Indicator
-        ref={ref as any}
+      <Comp
+        ref={ref}
         className={computedClassName}
         style={style}
         {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'checkbox-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+            focused: isFocused,
+            indeterminate: isIndeterminate,
+            fieldState,
+          }),
+        )}
       >
         {children}
-      </CheckboxPrimitive.Indicator>
+      </Comp>
     );
   },
 );
@@ -92,43 +134,74 @@ const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
 CheckboxIndicator.displayName = 'Checkbox.Indicator';
 
 // =============================================================================
-// CHECKBOX ICON
+// CHECKBOX ICON (styled-only, reads context for conditional mount)
 // =============================================================================
 
 export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
 
 const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
-  const { size } = useCheckboxStyleContext();
-  const computedClassName = cn(checkboxIconVariants({ size }), className);
-
-  return <Icon className={computedClassName} style={style} {...props} />;
+  const computedClassName = cn(checkboxIconVariants(), className);
+
+  return (
+    <Icon
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'checkbox-icon' }))}
+    />
+  );
 };
 
 CheckboxIcon.displayName = 'Checkbox.Icon';
 
+// Internal helper that reads context for conditional rendering
+const CheckboxIconSlot = ({
+  isIndeterminate: isIndeterminateProp,
+}: {
+  isIndeterminate?: boolean;
+}) => {
+  const { isChecked, isIndeterminate } = useCheckboxContext();
+  const showIcon = isChecked || isIndeterminateProp || isIndeterminate;
+
+  if (!showIcon) return null;
+
+  return (
+    <CheckboxIcon as={isIndeterminate || isIndeterminateProp ? CheckIndeterminateSmall : Check} />
+  );
+};
+
 // =============================================================================
-// CHECKBOX LABEL
+// CHECKBOX LABEL (styled-only)
 // =============================================================================
 
 export interface CheckboxLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useCheckboxStyleContext();
-    const computedClassName = cn(checkboxLabelVariants({ size }), className);
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { isDisabled } = useCheckboxContext();
+    const computedClassName = cn(checkboxLabelVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <CheckboxPrimitive.Label
-        ref={ref as any}
+      <Comp
+        ref={ref}
         className={computedClassName}
         style={style}
         {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'checkbox-label',
+            disabled: isDisabled,
+          }),
+        )}
       >
         {children}
-      </CheckboxPrimitive.Label>
+      </Comp>
     );
   },
 );
@@ -136,7 +209,7 @@ const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
 CheckboxLabel.displayName = 'Checkbox.Label';
 
 // =============================================================================
-// CHECKBOX GROUP
+// CHECKBOX GROUP (wraps the primitive)
 // =============================================================================
 
 export interface CheckboxGroupProps extends ViewProps {
@@ -169,8 +242,8 @@ const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
     const computedClassName = cn(checkboxGroupVariants({ direction }), className);
 
     return (
-      <CheckboxPrimitive.Group
-        ref={ref as any}
+      <CheckboxGroupPrimitive
+        ref={ref}
         className={computedClassName}
         style={style}
         value={value ?? []}
@@ -178,10 +251,10 @@ const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         isReadOnly={isReadOnly}
-        {...viewProps}
+        {...mergeDataAttributes(viewProps, dataAttributes({ slot: 'checkbox-group' }))}
       >
         {children}
-      </CheckboxPrimitive.Group>
+      </CheckboxGroupPrimitive>
     );
   },
 );