@cdx-ui/components 0.0.1-beta.1 → 0.0.1-beta.100

package/src/components/OtpInput/styles.ts

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
-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/ProgressSegmented/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import {
@@ -7,15 +7,32 @@ 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;
-  /** Total number of segments */
+  /**
+   * Number of segments in the bar. Matches the Figma `segments` variant (2–6 in the design
+   * 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;
-  /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
-  readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
+  /**
+   * Returns the accessibility value text announced by screen readers. Receives the clamped
+   * step, segment count, and whether the step is complete.
+   */
+  readonly getAccessibilityText?: (
+    step: number,
+    segmentCount: number,
+    isStepComplete: boolean,
+  ) => string;
   readonly className?: string;
 }
 
@@ -23,7 +40,8 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
   (
     {
       step,
-      total = 5,
+      segments,
+      total,
       isStepComplete = false,
       getAccessibilityText,
       className,
@@ -32,10 +50,21 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
     },
     ref,
   ) => {
-    const clampedStep = Math.max(0, Math.min(step, total));
+    const segmentCount = segments ?? total ?? 5;
 
-    const segments = useMemo(() => {
-      return Array.from({ length: total }, (_, index) => {
+    // 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 clampedStep = Math.max(0, Math.min(step, segmentCount));
+
+    const segmentStates = useMemo(() => {
+      return Array.from({ length: segmentCount }, (_, index) => {
         const segmentIndex = index + 1;
         let state: 'complete' | 'incomplete' | 'inprogress' = 'incomplete';
 
@@ -47,13 +76,13 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
 
         return state;
       });
-    }, [total, clampedStep, isStepComplete]);
+    }, [segmentCount, clampedStep, isStepComplete]);
 
-    let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
+    let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
     if (getAccessibilityText) {
-      accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
+      accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
     } else if (isStepComplete) {
-      accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
+      accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
     }
 
     return (
@@ -63,14 +92,14 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
         accessibilityLabel={accessibilityLabel}
         accessibilityValue={{
           min: 0,
-          max: total,
+          max: segmentCount,
           now: clampedStep,
           text: accessibilityText,
         }}
         className={cn(progressSegmentedVariants(), className)}
         {...props}
       >
-        {segments.map((state, index) => (
+        {segmentStates.map((state, index) => (
           <View key={index} className={cn(segmentVariants({ state }))} />
         ))}
       </View>
@@ -79,3 +108,5 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
 );
 
 ProgressSegmented.displayName = 'ProgressSegmented';
+
+/* eslint-enable @typescript-eslint/no-deprecated */

package/src/components/QuickActionButton/index.tsx

@@ -0,0 +1,161 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
+import {
+  ButtonRoot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IButtonProps,
+  useButtonContext,
+} from '@cdx-ui/primitives';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import {
+  quickActionButtonGlyphVariants,
+  quickActionButtonIndicatorVariants,
+  quickActionButtonLabelVariants,
+  quickActionButtonRootVariants,
+  type QuickActionButtonVariantProps,
+} from './styles';
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface QuickActionButtonProps extends PressableProps, IButtonProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonRoot = forwardRef<View, QuickActionButtonProps>(
+  ({ className, style, children, accessibilityRole = 'button', ...props }, ref) => (
+    <ButtonRoot
+      ref={ref}
+      accessibilityRole={accessibilityRole}
+      className={cn(quickActionButtonRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'quick-action-button' }))}
+    >
+      {children}
+    </ButtonRoot>
+  ),
+);
+QuickActionButtonRoot.displayName = 'QuickActionButton';
+
+// =============================================================================
+// INDICATOR
+// Circular container. Auto-rendered by `QuickActionButton.Icon` in standard usage.
+// Exposed as a compound member for Code Connect parity and custom compositions.
+// =============================================================================
+
+export interface QuickActionButtonIndicatorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonIndicator = forwardRef<View, QuickActionButtonIndicatorProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+    return (
+      <View
+        ref={ref}
+        className={cn(quickActionButtonIndicatorVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'quick-action-button-indicator',
+            hover,
+            focus,
+            active,
+            disabled,
+            focusVisible,
+          }),
+        )}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+QuickActionButtonIndicator.displayName = 'QuickActionButton.Indicator';
+
+// =============================================================================
+// ICON
+// Renders the Indicator circle + icon glyph as one convenient sub-component.
+// This is the primary way consumers add the icon to a QuickActionButton.
+// =============================================================================
+
+export interface QuickActionButtonIconProps {
+  /** Forge icon component to render inside the circular indicator. */
+  as: ForgeIcon;
+  /** Applied to the icon glyph, not the indicator circle. */
+  className?: IconProps['className'];
+  /** Applied to the indicator circle wrapper. */
+  indicatorClassName?: string;
+}
+
+function QuickActionButtonIcon({
+  as: IconComponent,
+  className,
+  indicatorClassName,
+}: QuickActionButtonIconProps) {
+  return (
+    <QuickActionButtonIndicator className={indicatorClassName}>
+      <Icon as={IconComponent} className={cn(quickActionButtonGlyphVariants(), className)} />
+    </QuickActionButtonIndicator>
+  );
+}
+QuickActionButtonIcon.displayName = 'QuickActionButton.Icon';
+
+// =============================================================================
+// LABEL
+// =============================================================================
+
+export interface QuickActionButtonLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonLabel = forwardRef<Text, QuickActionButtonLabelProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { disabled } = useButtonContext();
+    return (
+      <Text
+        ref={ref}
+        numberOfLines={2}
+        ellipsizeMode="tail"
+        className={cn(quickActionButtonLabelVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'quick-action-button-label', disabled }),
+        )}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+QuickActionButtonLabel.displayName = 'QuickActionButton.Label';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type QuickActionButtonCompoundComponent = typeof QuickActionButtonRoot & {
+  Indicator: typeof QuickActionButtonIndicator;
+  Icon: typeof QuickActionButtonIcon;
+  Label: typeof QuickActionButtonLabel;
+};
+
+export const QuickActionButton = Object.assign(QuickActionButtonRoot, {
+  Indicator: QuickActionButtonIndicator,
+  Icon: QuickActionButtonIcon,
+  Label: QuickActionButtonLabel,
+}) as QuickActionButtonCompoundComponent;
+
+export type { QuickActionButtonVariantProps };

package/src/components/QuickActionButton/styles.ts

@@ -0,0 +1,42 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+export const quickActionButtonRootVariants = cva([
+  'flex flex-col items-center gap-2',
+  'min-w-[60px] max-w-20',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  DISABLED_CURSOR,
+]);
+
+export const quickActionButtonIndicatorVariants = cva([
+  'flex items-center justify-center shrink-0',
+  'h-[60px] w-[60px] min-h-[60px] min-w-[60px] p-2',
+  'rounded-[var(--border-radius-round)]',
+  'border border-stroke-secondary',
+  'bg-surface-primary',
+  'overflow-hidden',
+  TRANSITION_COLORS,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  Platform.select({
+    default: 'data-[active=true]:bg-surface-primary-active',
+    web: [
+      'data-[hover=true]:bg-surface-primary-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+      'web:data-[focus-visible=true]:ring-2',
+      'web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)]',
+      'web:data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+  }),
+]);
+
+export const quickActionButtonGlyphVariants = cva(['size-6', 'text-content-action']);
+
+export const quickActionButtonLabelVariants = cva([
+  'body-sm font-medium',
+  'text-content-primary text-center',
+  'w-full min-w-0 max-w-20 self-center',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+]);
+
+export type QuickActionButtonVariantProps = VariantProps<typeof quickActionButtonRootVariants>;

package/src/components/Radio/index.tsx

@@ -0,0 +1,214 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
+import {
+  RadioRoot as RadioRootPrimitive,
+  RadioGroup as RadioGroupPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useRadioContext,
+  type IRadioProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  radioGroupVariants,
+  radioIndicatorVariants,
+  radioInnerDotVariants,
+  radioLabelVariants,
+  radioRootVariants,
+} from './styles';
+
+// =============================================================================
+// RADIO ROOT
+// =============================================================================
+
+export interface RadioProps extends IRadioProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const RadioRoot = forwardRef<View, RadioProps>(({ className, children, style, ...props }, ref) => {
+  const computedClassName = cn(radioRootVariants(), className);
+
+  return (
+    <RadioRootPrimitive
+      ref={ref}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'radio' }))}
+    >
+      <RadioIndicator />
+      {children}
+    </RadioRootPrimitive>
+  );
+});
+
+RadioRoot.displayName = 'Radio';
+
+// =============================================================================
+// RADIO INDICATOR (styled-only, reads context for data-* styling)
+// =============================================================================
+
+export interface RadioIndicatorProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
+      useRadioContext();
+
+    const computedClassName = cn(radioIndicatorVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'radio-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+          }),
+        )}
+      >
+        <View
+          className={cn(radioInnerDotVariants())}
+          {...dataAttributes({
+            checked: isChecked,
+            invalid: isInvalid,
+            hover: isHovered,
+          })}
+        />
+        {children}
+      </Comp>
+    );
+  },
+);
+
+RadioIndicator.displayName = 'Radio.Indicator';
+
+// =============================================================================
+// RADIO LABEL (styled-only)
+// =============================================================================
+
+export interface RadioLabelProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const RadioLabel = forwardRef<Text, RadioLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(radioLabelVariants(), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'radio-label' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+RadioLabel.displayName = 'Radio.Label';
+
+// =============================================================================
+// RADIO GROUP (wraps the primitive)
+// =============================================================================
+
+export interface RadioGroupProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  direction?: 'column' | 'row';
+  name?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+const RadioGroup = forwardRef<View, RadioGroupProps>(
+  (
+    {
+      className,
+      children,
+      style,
+      direction = 'column',
+      value,
+      defaultValue,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      name,
+      ...viewProps
+    },
+    ref,
+  ) => {
+    const computedClassName = cn(radioGroupVariants({ direction }), className);
+
+    return (
+      <RadioGroupPrimitive
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+        isReadOnly={isReadOnly}
+        name={name}
+        direction={direction}
+        {...viewProps}
+        {...mergeDataAttributes(viewProps, dataAttributes({ slot: 'radio-group' }))}
+      >
+        {children}
+      </RadioGroupPrimitive>
+    );
+  },
+);
+
+RadioGroup.displayName = 'Radio.Group';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type RadioCompoundComponent = typeof RadioRoot & {
+  Indicator: typeof RadioIndicator;
+  Label: typeof RadioLabel;
+  Group: typeof RadioGroup;
+};
+
+export const Radio = Object.assign(RadioRoot, {
+  Indicator: RadioIndicator,
+  Label: RadioLabel,
+  Group: RadioGroup,
+}) as RadioCompoundComponent;