@cdx-ui/components 0.0.1-beta.142 → 0.0.1-beta.144

package/src/components/Checkbox/styles.ts

@@ -8,6 +8,7 @@ export const checkboxRootVariants = cva([
   'flex-row items-center gap-2.5',
   DISABLED_OPACITY,
   DISABLED_CURSOR,
+  'data-[readonly=true]:cursor-default',
   // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
   'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
 ]);
@@ -33,6 +34,12 @@ export const checkboxIndicatorVariants = cva([
   'data-[invalid=true]:border-stroke-danger',
   Platform.select({
     web: [
+      // Read-only — compound selectors evaluate correctly on web.
+      'data-[readonly=true]:bg-surface-secondary',
+      'data-[readonly=true]:data-[checked=true]:border-stroke-action',
+      'data-[readonly=true]:data-[indeterminate=true]:border-stroke-action',
+      'data-[readonly=true]:data-[checked=true]:bg-surface-secondary',
+      'data-[readonly=true]:data-[indeterminate=true]:bg-surface-secondary',
       // Invalid bg — compound selectors evaluate correctly on web.
       'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong',
       'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong',
@@ -63,13 +70,24 @@ export const checkboxIndicatorVariants = cva([
       'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
       'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active',
       'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-surface-danger-strong-active',
-      // Focus ring
+      // Focus ring — applies to read-only as well (focusable + aria-readonly).
       'web:data-[focus-visible=true]:outline-none',
       'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
     ].join(' '),
     default: [
       // Native: Uniwind only evaluates the last data-[] condition in a compound chain.
       // Use single-condition data-[field-state=...] selectors (emitted by CheckboxIndicator).
+      // Read-only — derived field-state encodes check × readonly (no active/hover on readonly).
+      'data-[field-state=readonly-unchecked]:bg-surface-secondary',
+      'data-[field-state=readonly-checked]:bg-surface-secondary',
+      'data-[field-state=readonly-checked]:border-stroke-action',
+      'data-[field-state=readonly-indeterminate]:bg-surface-secondary',
+      'data-[field-state=readonly-indeterminate]:border-stroke-action',
+      'data-[field-state=readonly-unchecked-invalid]:bg-surface-secondary',
+      'data-[field-state=readonly-checked-invalid]:bg-surface-secondary',
+      'data-[field-state=readonly-checked-invalid]:border-stroke-action',
+      'data-[field-state=readonly-indeterminate-invalid]:bg-surface-secondary',
+      'data-[field-state=readonly-indeterminate-invalid]:border-stroke-action',
       // checked/indeterminate + invalid → danger bg
       'data-[field-state=checked-invalid]:bg-surface-danger-strong',
       'data-[field-state=indeterminate-invalid]:bg-surface-danger-strong',
@@ -90,11 +108,16 @@ export const checkboxIndicatorVariants = cva([
   }),
 ]);
 
-export const checkboxIconVariants = cva(['text-white', 'h-5 w-5']);
+export const checkboxIconVariants = cva([
+  'text-white',
+  'data-[readonly=true]:text-content-action',
+  'h-5 w-5',
+]);
 
 export const checkboxLabelVariants = cva([
   'text-content-primary text-base',
   'data-[disabled=true]:text-content-tertiary',
+  'data-[readonly=true]:cursor-default',
 ]);
 
 export const checkboxGroupVariants = cva([], {

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,94 @@
+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 {}
+
+export interface ProgressCircleIndicatorProps
+  extends ViewProps, ProgressCircleIndicatorVariantProps {}
+
+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/index.ts

@@ -32,6 +32,7 @@ export * from './OtpInput';
 export * from './Link';
 export * from './ListItem';
 export * from './ProgressBar';
+export * from './ProgressCircle';
 export * from './Skeleton';
 export * from './ProgressSegmented';
 export * from './Radio';