@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

package/src/components/OtpInput/index.tsx

@@ -1,11 +1,20 @@
-import type { ComponentProps, ComponentRef, ForwardedRef } from 'react';
-import { forwardRef } from 'react';
-import type { View } from 'react-native';
-import { createOtpInput, type IOtpInputRootProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { HStack } from '../Stack/HStack';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { View, type TextInput, type ViewProps } from 'react-native';
+import {
+  OtpCellIndexProvider,
+  OtpInputField,
+  OtpInputProvider,
+  dataAttributes,
+  mergeDataAttributes,
+  useInputContext,
+  useOtpInput,
+  type IOtpInputRootProps,
+  type OtpInputFieldProps,
+} from '@cdx-ui/primitives';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Input, type InputProps } from '../Input';
-import type { InputVariantProps } from '../Input/styles';
+import { type InputVariantProps, inputFieldVariants } from '../Input/styles';
 import {
   otpCellVariants,
   otpFieldVariants,
@@ -15,13 +24,24 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const OtpRoot = withStyleContext(HStack, SCOPE);
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as Partial<InputVariantProps>;
 
-const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+export interface OtpInputCellProps extends ViewProps, InputVariantProps {
+  className?: string;
+  children?: React.ReactNode;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
 
-const OtpStyledCell = forwardRef<View, InputProps>(
-  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
-    const { size, variant } = useOtpInputStyleContext();
+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}
@@ -38,42 +58,137 @@ const OtpStyledCell = forwardRef<View, InputProps>(
 
 OtpStyledCell.displayName = 'OtpInput.Cell';
 
-const OtpStyledField = forwardRef<
-  ComponentRef<typeof Input.Field>,
-  ComponentProps<typeof Input.Field>
->(({ className, ...props }, ref) => {
-  const { size } = useOtpInputStyleContext();
-  return <Input.Field ref={ref} className={cn(otpFieldVariants({ size }), className)} {...props} />;
+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, 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';
 
-const OtpPrimitive = createOtpInput({
-  Root: OtpRoot,
-  Cell: OtpStyledCell,
-  Field: OtpStyledField,
-});
-
 export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
   variant?: NonNullable<InputProps['variant']>;
   size?: NonNullable<InputProps['size']>;
   className?: string;
 }
 
-export const OtpInput = forwardRef<View, OtpInputProps>(
-  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+const OtpInputRoot = forwardRef<View, OtpInputProps>(
+  (
+    {
+      variant = 'outline',
+      size,
+      fullWidth,
+      className,
+      style,
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const otpContext = useOtpInput({
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+    });
+
     const rootClassName = cn(otpRootVariants({ size, fullWidth }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
+    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
+            isDisabled={resolvedDisabled}
+            isInvalid={resolvedInvalid}
+            isReadOnly={resolvedReadOnly}
+          >
+            <OtpStyledField className={fieldClassName} />
+          </OtpStyledCell>
+        </OtpCellIndexProvider>,
+      );
+    }
+
     return (
-      <OtpPrimitive
-        ref={ref}
-        className={rootClassName}
-        style={style}
-        context={{ variant, size }}
-        {...rest}
-      />
+      <ParentContext.Provider value={ctx}>
+        <OtpInputProvider value={otpContext}>
+          <View
+            ref={ref}
+            className={rootClassName}
+            style={style}
+            {...rest}
+            {...mergeDataAttributes(rest, dataAttributes({ slot: 'otp-input' }))}
+          >
+            {cells}
+          </View>
+        </OtpInputProvider>
+      </ParentContext.Provider>
     );
   },
 );
 
-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/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
+import { ProgressBarRoot, ProgressBarIndicator, type IProgressProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import {
   progressBarIndicatorVariants,
@@ -8,11 +8,6 @@ import {
   type ProgressBarTrackVariantProps,
 } from './styles';
 
-const ProgressPrimitive = createProgress({
-  Root: View,
-  Indicator: View,
-});
-
 export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
   readonly className?: string;
 }
@@ -21,19 +16,19 @@ export interface ProgressBarIndicatorProps extends ViewProps {
   readonly className?: string;
 }
 
-const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
+const ProgressBarRootComponent = forwardRef<View, ProgressBarProps>(
   ({ className, style, ...props }, ref) => {
     const trackClass = cn(progressBarTrackVariants(), className);
 
-    return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
+    return <ProgressBarRoot ref={ref} className={trackClass} style={style} {...props} />;
   },
 );
 
-ProgressBarRoot.displayName = 'ProgressBar';
+ProgressBarRootComponent.displayName = 'ProgressBar';
 
-const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+const ProgressBarIndicatorComponent = forwardRef<View, ProgressBarIndicatorProps>(
   ({ className, style, ...props }, ref) => (
-    <ProgressPrimitive.Indicator
+    <ProgressBarIndicator
       ref={ref}
       className={cn(progressBarIndicatorVariants(), className)}
       style={style}
@@ -42,12 +37,12 @@ const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
   ),
 );
 
-ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
+ProgressBarIndicatorComponent.displayName = 'ProgressBar.Indicator';
 
-type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
-  Indicator: typeof ProgressBarIndicator;
+type ProgressBarCompoundComponent = typeof ProgressBarRootComponent & {
+  Indicator: typeof ProgressBarIndicatorComponent;
 };
 
-export const ProgressBar = Object.assign(ProgressBarRoot, {
-  Indicator: ProgressBarIndicator,
+export const ProgressBar = Object.assign(ProgressBarRootComponent, {
+  Indicator: ProgressBarIndicatorComponent,
 }) as ProgressBarCompoundComponent;

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,
+  };
+}