@cdx-ui/components 0.0.1-beta.99 → 0.1.0

package/src/components/OtpInput/index.tsx

@@ -24,53 +24,65 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as Partial<InputVariantProps>;
 
-const OtpStyledCell = forwardRef<
-  View,
-  ViewProps & { className?: string; children?: React.ReactNode }
->(({ className, children, ...props }, ref: ForwardedRef<View>) => {
-  const { size, variant } = useOtpInputStyleContext();
-  return (
-    <Input
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(otpCellVariants({ size }), className)}
-      {...props}
-    >
-      {children}
-    </Input>
-  );
-});
+export interface OtpInputCellProps extends ViewProps, InputVariantProps {
+  className?: string;
+  children?: React.ReactNode;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
+
+const OtpStyledCell = forwardRef<View, OtpInputCellProps>(
+  (
+    { className, children, variant: variantProp, size: sizeProp, ...props },
+    ref: ForwardedRef<View>,
+  ) => {
+    const context = useOtpInputStyleContext();
+    const variant = variantProp ?? context.variant ?? 'outline';
+    const size = sizeProp ?? context.size ?? 'default';
+    return (
+      <Input
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(otpCellVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </Input>
+    );
+  },
+);
 
 OtpStyledCell.displayName = 'OtpInput.Cell';
 
+export type OtpInputFieldStyledProps = OtpInputFieldProps & { className?: string };
+
 /**
  * Bridges OtpInputField focus/blur events to the parent Input's context so
  * InputRoot emits `data-focus=true` and the `border-stroke-action` CSS activates.
  * The primitive OtpInputField doesn't know about InputContext — that coupling
  * belongs here in the styled layer.
  */
-const OtpStyledField = forwardRef<TextInput, OtpInputFieldProps & { className?: string }>(
-  (props, ref) => {
-    const { setIsFocused } = useInputContext();
-    return (
-      <OtpInputField
-        ref={ref}
-        {...props}
-        onFocus={(e) => {
-          setIsFocused?.(true);
-          props.onFocus?.(e);
-        }}
-        onBlur={(e) => {
-          setIsFocused?.(false);
-          props.onBlur?.(e);
-        }}
-      />
-    );
-  },
-);
+const OtpStyledField = forwardRef<TextInput, OtpInputFieldStyledProps>((props, ref) => {
+  const { setIsFocused } = useInputContext();
+  return (
+    <OtpInputField
+      ref={ref}
+      {...props}
+      onFocus={(e) => {
+        setIsFocused?.(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused?.(false);
+        props.onBlur?.(e);
+      }}
+    />
+  );
+});
 
 OtpStyledField.displayName = 'OtpInput.Field';
 
@@ -80,12 +92,12 @@ export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInpu
   className?: string;
 }
 
-export const OtpInput = forwardRef<View, OtpInputProps>(
+const OtpInputRoot = forwardRef<View, OtpInputProps>(
   (
     {
       variant = 'outline',
-      size = 'default',
-      fullWidth = true,
+      size,
+      fullWidth,
       className,
       style,
       cellCount,
@@ -130,11 +142,21 @@ export const OtpInput = forwardRef<View, OtpInputProps>(
 
     const fieldClassName = cn(inputFieldVariants({ size }), otpFieldVariants({ size }));
 
+    const {
+      isDisabled: resolvedDisabled,
+      isInvalid: resolvedInvalid,
+      isReadOnly: resolvedReadOnly,
+    } = otpContext;
+
     const cells: React.ReactElement[] = [];
     for (let i = 0; i < cellCount; i++) {
       cells.push(
         <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
-          <OtpStyledCell>
+          <OtpStyledCell
+            isDisabled={resolvedDisabled}
+            isInvalid={resolvedInvalid}
+            isReadOnly={resolvedReadOnly}
+          >
             <OtpStyledField className={fieldClassName} />
           </OtpStyledCell>
         </OtpCellIndexProvider>,
@@ -159,4 +181,14 @@ export const OtpInput = forwardRef<View, OtpInputProps>(
   },
 );
 
-OtpInput.displayName = 'OtpInput';
+OtpInputRoot.displayName = 'OtpInput';
+
+type OtpInputCompoundComponent = typeof OtpInputRoot & {
+  Cell: typeof OtpStyledCell;
+  Field: typeof OtpStyledField;
+};
+
+export const OtpInput = Object.assign(OtpInputRoot, {
+  Cell: OtpStyledCell,
+  Field: OtpStyledField,
+}) as OtpInputCompoundComponent;

package/src/components/OtpInput/styles.ts

@@ -1,6 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
-export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
+export const otpRootVariants = cva('flex-row items-stretch gap-2', {
   variants: {
     size: {
       default: '',
@@ -13,28 +13,35 @@ export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
   },
   defaultVariants: {
     size: 'default',
-    fullWidth: true,
+    fullWidth: false,
   },
 });
 
 /** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
-export const otpCellVariants = cva('shrink-0 justify-center', {
-  variants: {
-    size: {
-      default: 'w-12 min-w-12 max-w-12 px-1',
-      small: 'w-10 min-w-10 max-w-10 px-0.5',
+export const otpCellVariants = cva(
+  [
+    'shrink-0 justify-center gap-0',
+    // Figma read-only: surface-secondary + stroke-primary + opacity-disabled (text stays content-primary).
+    'data-[readonly=true]:opacity-[var(--opacity-disabled)]',
+  ],
+  {
+    variants: {
+      size: {
+        default: ['w-11 min-w-11 max-w-11 pl-2 pr-2', 'h-14 min-h-14'],
+        small: ['w-9 min-w-9 max-w-9 pl-1.5 pr-1.5', 'h-10 min-h-10'],
+      },
+    },
+    defaultVariants: {
+      size: 'default',
     },
   },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+);
 
-export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums', {
+export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums font-medium', {
   variants: {
     size: {
       default: 'text-xl leading-6',
-      small: 'text-base leading-5',
+      small: 'text-lg leading-[calc(var(--spacing-5)+var(--spacing-0-5))]',
     },
   },
   defaultVariants: {

package/src/components/ProgressBar/styles.ts

@@ -1,7 +1,7 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const progressBarTrackVariants = cva([
-  'w-full flex-row overflow-hidden rounded-full bg-surface-action-tint h-1',
+  'w-full flex-row overflow-hidden rounded-full bg-surface-action-subtle h-1',
 ]);
 
 export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);

package/src/components/ProgressCircle/ProgressCircleRing.tsx

@@ -0,0 +1,105 @@
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { Circle, Svg } from 'react-native-svg';
+import { useProgressContext } from '@cdx-ui/primitives';
+import { PROGRESS_CIRCLE_DIMENSIONS, type ProgressCircleSize } from './styles';
+import { useProgressCircleColors } from './useProgressCircleColors';
+
+const INDETERMINATE_ARC_RATIO = 0.25;
+const ROTATION_DURATION_MS = 1000;
+
+export interface ProgressCircleRingProps {
+  readonly size?: ProgressCircleSize;
+  readonly color?: 'default' | 'inherit';
+}
+
+export function ProgressCircleRing({ size = 'large', color = 'default' }: ProgressCircleRingProps) {
+  const { percent, state } = useProgressContext();
+  const ringColors = useProgressCircleColors(color);
+  const rotation = useSharedValue(0);
+  const { size: dimension, strokeWidth } = PROGRESS_CIRCLE_DIMENSIONS[size];
+  const radius = (dimension - strokeWidth) / 2;
+  const center = dimension / 2;
+  const circumference = 2 * Math.PI * radius;
+  const isIndeterminate = state === 'indeterminate';
+
+  useEffect(() => {
+    if (!isIndeterminate) {
+      rotation.set(0);
+      return;
+    }
+
+    rotation.set(
+      withRepeat(
+        withTiming(360, {
+          duration: ROTATION_DURATION_MS,
+          easing: Easing.linear,
+        }),
+        -1,
+        false,
+      ),
+    );
+  }, [isIndeterminate, rotation]);
+
+  const animatedStyle = useAnimatedStyle(
+    () => ({
+      transform: [{ rotate: `${String(rotation.get())}deg` }],
+    }),
+    [rotation],
+  );
+
+  const progressLength = isIndeterminate
+    ? circumference * INDETERMINATE_ARC_RATIO
+    : (circumference * percent) / 100;
+  const gapLength = circumference - progressLength;
+
+  const ring = (
+    <Svg
+      width={dimension}
+      height={dimension}
+      viewBox={`0 0 ${String(dimension)} ${String(dimension)}`}
+    >
+      <Circle
+        cx={center}
+        cy={center}
+        r={radius}
+        stroke={ringColors.track}
+        strokeWidth={strokeWidth}
+        fill="none"
+        opacity={ringColors.trackOpacity}
+      />
+      {progressLength > 0 ? (
+        <Circle
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke={ringColors.indicator}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={`${String(progressLength)} ${String(gapLength)}`}
+          strokeLinecap="round"
+          rotation={-90}
+          origin={`${String(center)}, ${String(center)}`}
+        />
+      ) : null}
+    </Svg>
+  );
+
+  if (isIndeterminate) {
+    const inheritClass = color === 'inherit' ? 'text-inherit' : undefined;
+    return (
+      <Animated.View style={animatedStyle} className={inheritClass}>
+        <View className={inheritClass}>{ring}</View>
+      </Animated.View>
+    );
+  }
+
+  return ring;
+}

package/src/components/ProgressCircle/index.tsx

@@ -0,0 +1,110 @@
+import { createContext, forwardRef, useContext, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  ProgressBarRoot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IProgressProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { ProgressCircleRing } from './ProgressCircleRing';
+import {
+  progressCircleIndicatorVariants,
+  progressCircleRootVariants,
+  type ProgressCircleIndicatorVariantProps,
+  type ProgressCircleRootVariantProps,
+  type ProgressCircleSize,
+} from './styles';
+
+type ProgressCircleColor = NonNullable<ProgressCircleRootVariantProps['color']>;
+
+interface ProgressCircleStyleContextValue {
+  readonly size: ProgressCircleSize;
+  readonly color: ProgressCircleColor;
+}
+
+const ProgressCircleStyleContext = createContext<ProgressCircleStyleContextValue>({
+  size: 'large',
+  color: 'default',
+});
+
+export interface ProgressCircleProps extends IProgressProps, ProgressCircleRootVariantProps {
+  /**
+   * Stroke color. `inherit` uses `currentColor` with the track at 24% opacity.
+   * Inherited by `ProgressCircle.Indicator` unless overridden.
+   * @default 'default'
+   */
+  color?: ProgressCircleRootVariantProps['color'];
+}
+
+export interface ProgressCircleIndicatorProps
+  extends ViewProps, ProgressCircleIndicatorVariantProps {
+  /**
+   * Overrides the size inherited from `ProgressCircle`.
+   */
+  size?: ProgressCircleIndicatorVariantProps['size'];
+  /**
+   * Overrides the color inherited from `ProgressCircle`.
+   */
+  color?: ProgressCircleIndicatorVariantProps['color'];
+}
+
+const ProgressCircleRootComponent = forwardRef<View, ProgressCircleProps>(
+  ({ className, style, size = 'large', color = 'default', children, ...props }, ref) => {
+    const rootClass = cn(progressCircleRootVariants({ size, color }), className);
+    const styleContext = useMemo(
+      () => ({
+        size: size ?? 'large',
+        color: color ?? 'default',
+      }),
+      [size, color],
+    );
+
+    return (
+      <ProgressCircleStyleContext.Provider value={styleContext}>
+        <ProgressBarRoot
+          ref={ref}
+          className={rootClass}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'progress-circle' }))}
+        >
+          {children}
+        </ProgressBarRoot>
+      </ProgressCircleStyleContext.Provider>
+    );
+  },
+);
+
+ProgressCircleRootComponent.displayName = 'ProgressCircle';
+
+const ProgressCircleIndicatorComponent = forwardRef<View, ProgressCircleIndicatorProps>(
+  ({ className, style, size: sizeProp, color: colorProp, ...props }, ref) => {
+    const { size: contextSize, color: contextColor } = useContext(ProgressCircleStyleContext);
+    const size = sizeProp ?? contextSize;
+    const color = colorProp ?? contextColor;
+    const indicatorClass = cn(progressCircleIndicatorVariants({ size, color }), className);
+
+    return (
+      <View
+        ref={ref}
+        className={indicatorClass}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'progress-circle-indicator' }))}
+      >
+        <ProgressCircleRing size={size} color={color} />
+      </View>
+    );
+  },
+);
+
+ProgressCircleIndicatorComponent.displayName = 'ProgressCircle.Indicator';
+
+type ProgressCircleCompoundComponent = typeof ProgressCircleRootComponent & {
+  Indicator: typeof ProgressCircleIndicatorComponent;
+};
+
+export const ProgressCircle = Object.assign(ProgressCircleRootComponent, {
+  Indicator: ProgressCircleIndicatorComponent,
+}) as ProgressCircleCompoundComponent;

package/src/components/ProgressCircle/styles.ts

@@ -0,0 +1,47 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const progressCircleRootVariants = cva(['items-center justify-center'], {
+  variants: {
+    size: {
+      large: 'size-[32px]',
+      small: 'size-[24px]',
+    },
+    color: {
+      default: '',
+      inherit: 'text-inherit',
+    },
+  },
+  defaultVariants: {
+    size: 'large',
+    color: 'default',
+  },
+});
+
+export const progressCircleIndicatorVariants = cva(['size-full items-center justify-center'], {
+  variants: {
+    size: {
+      large: '',
+      small: '',
+    },
+    color: {
+      default: '',
+      inherit: 'text-inherit',
+    },
+  },
+  defaultVariants: {
+    size: 'large',
+    color: 'default',
+  },
+});
+
+export type ProgressCircleRootVariantProps = VariantProps<typeof progressCircleRootVariants>;
+export type ProgressCircleIndicatorVariantProps = VariantProps<
+  typeof progressCircleIndicatorVariants
+>;
+
+export const PROGRESS_CIRCLE_DIMENSIONS = {
+  large: { size: 32, strokeWidth: 3 },
+  small: { size: 24, strokeWidth: 2 },
+} as const;
+
+export type ProgressCircleSize = keyof typeof PROGRESS_CIRCLE_DIMENSIONS;

package/src/components/ProgressCircle/useProgressCircleColors.ts

@@ -0,0 +1,33 @@
+import { useCSSVariable } from 'uniwind';
+
+/** Light-theme fallbacks when Uniwind CSS context is unavailable (e.g. Jest). */
+const FALLBACKS = {
+  track: '#e8eefc',
+  indicator: '#346099',
+} as const;
+
+function toColor(value: string | number | undefined, fallback: string): string {
+  if (typeof value === 'string' && value.length > 0) {
+    return value;
+  }
+  return fallback;
+}
+
+export function useProgressCircleColors(color: 'default' | 'inherit') {
+  const trackToken = useCSSVariable('--color-surface-action-subtle');
+  const indicatorToken = useCSSVariable('--color-surface-action-strong');
+
+  if (color === 'inherit') {
+    return {
+      track: 'currentColor',
+      indicator: 'currentColor',
+      trackOpacity: 0.24,
+    };
+  }
+
+  return {
+    track: toColor(trackToken, FALLBACKS.track),
+    indicator: toColor(indicatorToken, FALLBACKS.indicator),
+    trackOpacity: 1,
+  };
+}

package/src/components/ProgressSegmented/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import {
@@ -7,8 +7,6 @@ import {
   type ProgressSegmentedVariants,
 } from './styles';
 
-/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
-/* eslint-disable @typescript-eslint/no-deprecated */
 export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
   /** Current step (1-based index into the segment count) */
   readonly step: number;
@@ -17,11 +15,6 @@ export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVari
    * system file); the prop accepts any positive integer for backward compatibility.
    */
   readonly segments?: number;
-  /**
-   * @deprecated Use {@link ProgressSegmentedProps.segments} instead. This alias will be removed
-   * in a future major release.
-   */
-  readonly total?: number;
   /** When true, the current step segment is marked as complete rather than in-progress */
   readonly isStepComplete?: boolean;
   /**
@@ -41,7 +34,6 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
     {
       step,
       segments,
-      total,
       isStepComplete = false,
       getAccessibilityText,
       className,
@@ -50,16 +42,7 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
     },
     ref,
   ) => {
-    const segmentCount = segments ?? total ?? 5;
-
-    // TODO: Remove this once the `total` prop is removed.
-    useEffect(() => {
-      if (__DEV__ && total !== undefined && segments === undefined) {
-        console.warn(
-          '[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.',
-        );
-      }
-    }, [total, segments]);
+    const segmentCount = segments ?? 5;
 
     const clampedStep = Math.max(0, Math.min(step, segmentCount));
 
@@ -108,5 +91,3 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
 );
 
 ProgressSegmented.displayName = 'ProgressSegmented';
-
-/* eslint-enable @typescript-eslint/no-deprecated */

package/src/components/ProgressSegmented/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const progressSegmentedVariants = cva(['flex-row gap-1 w-full rounded overflow-hidden']);
 
@@ -6,9 +6,9 @@ export const segmentVariants = cva(['flex-1 h-1'], {
   variants: {
     state: {
       complete: 'bg-surface-action-strong',
-      incomplete: 'bg-surface-action-tint',
+      incomplete: 'bg-surface-action-subtle',
       inprogress:
-        'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-tint to-50%',
+        'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-subtle to-50%',
     },
   },
   defaultVariants: {

package/src/components/QuickActionButton/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const quickActionButtonRootVariants = cva([
   'flex flex-col items-center gap-2',

package/src/components/Radio/index.tsx

@@ -50,6 +50,18 @@ RadioRoot.displayName = 'Radio';
 // RADIO INDICATOR (styled-only, reads context for data-* styling)
 // =============================================================================
 
+/** Compound checked × 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',
+} as const;
+
 export interface RadioIndicatorProps extends ViewProps {
   asChild?: boolean;
   className?: string;
@@ -61,6 +73,12 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
     const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
       useRadioContext();
 
+    const checkState = isChecked ? 'checked' : 'unchecked';
+    const fieldState =
+      INDICATOR_STATES[
+        `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
+      ];
+
     const computedClassName = cn(radioIndicatorVariants(), className);
     const Comp = asChild ? Slot : View;
 
@@ -81,6 +99,7 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
             invalid: isInvalid,
             readonly: isReadOnly,
             active: isPressed,
+            fieldState,
           }),
         )}
       >
@@ -90,6 +109,7 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
             checked: isChecked,
             invalid: isInvalid,
             hover: isHovered,
+            fieldState,
           })}
         />
         {children}