@cdx-ui/components 0.0.1-beta.17 → 0.0.1-beta.171

package/src/components/ProgressSegmented/index.tsx

@@ -10,12 +10,22 @@ import {
 export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
   /** Current step (1-based index into the segment count) */
   readonly step: number;
-  /** Total number of segments */
-  readonly total?: number;
+  /**
+   * 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;
   /** 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 +33,7 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
   (
     {
       step,
-      total = 5,
+      segments,
       isStepComplete = false,
       getAccessibilityText,
       className,
@@ -32,10 +42,12 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
     },
     ref,
   ) => {
-    const clampedStep = Math.max(0, Math.min(step, total));
+    const segmentCount = segments ?? 5;
 
-    const segments = useMemo(() => {
-      return Array.from({ length: total }, (_, index) => {
+    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 +59,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 +75,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>

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/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 '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+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

@@ -1,6 +1,14 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
-import { createRadio, dataAttributes, type IRadioProps } from '@cdx-ui/primitives';
+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,
@@ -10,43 +18,6 @@ import {
   radioRootVariants,
 } from './styles';
 
-// =============================================================================
-// STYLED INDICATOR BASE
-// =============================================================================
-
-const RadioIndicatorBase = forwardRef<View, ViewProps & { className?: string }>(
-  ({ className, children, style, ...props }, ref) => {
-    // On web, data attributes arrive as `dataSet: { checked: true }`.
-    // On native, they arrive as individual `data-checked: "true"` props.
-    const ds = (props as any).dataSet;
-    const isChecked = ds ? ds.checked === true : (props as any)['data-checked'] === 'true';
-    const isInvalid = ds ? ds.invalid === true : (props as any)['data-invalid'] === 'true';
-
-    return (
-      <View ref={ref} className={cn(radioIndicatorVariants(), className)} style={style} {...props}>
-        <View
-          className={cn(radioInnerDotVariants())}
-          {...dataAttributes({ checked: isChecked, invalid: isInvalid })}
-        />
-        {children}
-      </View>
-    );
-  },
-);
-
-RadioIndicatorBase.displayName = 'Radio.IndicatorBase';
-
-// =============================================================================
-// PRIMITIVE ASSEMBLY
-// =============================================================================
-
-const RadioPrimitive = createRadio({
-  Root: Pressable,
-  Indicator: RadioIndicatorBase,
-  Label: Text,
-  Group: View,
-});
-
 // =============================================================================
 // RADIO ROOT
 // =============================================================================
@@ -60,29 +31,89 @@ const RadioRoot = forwardRef<View, RadioProps>(({ className, children, style, ..
   const computedClassName = cn(radioRootVariants(), className);
 
   return (
-    <RadioPrimitive ref={ref as any} className={computedClassName} style={style} {...props}>
+    <RadioRootPrimitive
+      ref={ref}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'radio' }))}
+    >
+      <RadioIndicator />
       {children}
-    </RadioPrimitive>
+    </RadioRootPrimitive>
   );
 });
 
 RadioRoot.displayName = 'Radio';
 
 // =============================================================================
-// RADIO INDICATOR
+// 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;
   children?: ReactNode;
 }
 
 const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    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;
+
     return (
-      <RadioPrimitive.Indicator ref={ref as any} className={className} style={style} {...props}>
+      <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,
+            fieldState,
+          }),
+        )}
+      >
+        <View
+          className={cn(radioInnerDotVariants())}
+          {...dataAttributes({
+            checked: isChecked,
+            invalid: isInvalid,
+            hover: isHovered,
+            fieldState,
+          })}
+        />
         {children}
-      </RadioPrimitive.Indicator>
+      </Comp>
     );
   },
 );
@@ -90,22 +121,30 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
 RadioIndicator.displayName = 'Radio.Indicator';
 
 // =============================================================================
-// RADIO LABEL
+// RADIO LABEL (styled-only)
 // =============================================================================
 
 export interface RadioLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const RadioLabel = forwardRef<Text, RadioLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(radioLabelVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <RadioPrimitive.Label ref={ref as any} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'radio-label' }))}
+      >
         {children}
-      </RadioPrimitive.Label>
+      </Comp>
     );
   },
 );
@@ -113,7 +152,7 @@ const RadioLabel = forwardRef<Text, RadioLabelProps>(
 RadioLabel.displayName = 'Radio.Label';
 
 // =============================================================================
-// RADIO GROUP
+// RADIO GROUP (wraps the primitive)
 // =============================================================================
 
 export interface RadioGroupProps extends ViewProps {
@@ -128,6 +167,8 @@ export interface RadioGroupProps extends ViewProps {
   isReadOnly?: boolean;
   direction?: 'column' | 'row';
   name?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
 
 const RadioGroup = forwardRef<View, RadioGroupProps>(
@@ -152,8 +193,8 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(
     const computedClassName = cn(radioGroupVariants({ direction }), className);
 
     return (
-      <RadioPrimitive.Group
-        ref={ref as any}
+      <RadioGroupPrimitive
+        ref={ref}
         className={computedClassName}
         style={style}
         value={value}
@@ -164,10 +205,12 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(
         isRequired={isRequired}
         isReadOnly={isReadOnly}
         name={name}
+        direction={direction}
         {...viewProps}
+        {...mergeDataAttributes(viewProps, dataAttributes({ slot: 'radio-group' }))}
       >
         {children}
-      </RadioPrimitive.Group>
+      </RadioGroupPrimitive>
     );
   },
 );

package/src/components/Radio/styles.ts

@@ -1,13 +1,14 @@
 import { Platform } from 'react-native';
-import { cva } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
-
-// TODO: Add hover, active, and focus-visible styles based on Figma
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
 export const radioRootVariants = cva([
   'flex-row items-center gap-2',
   'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
   DISABLED_CURSOR,
+  // Suppress default :focus-visible outline on the role="radio" Pressable;
+  // focus ring is drawn on the indicator instead of wrapping the whole control.
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
 ]);
 
 export const radioIndicatorVariants = cva([
@@ -15,25 +16,37 @@ export const radioIndicatorVariants = cva([
   'rounded-[var(--border-radius-round)]',
   'border-[length:var(--border-width-selected)]',
   'h-5 w-5',
-  'border-stroke-primary',
-  'data-[checked=false]:border-slate-300',
   'bg-surface-primary',
+  'data-[checked=false]:border-content-secondary',
   'data-[checked=true]:border-stroke-action',
   'data-[invalid=true]:border-stroke-danger',
-  'data-[checked=true]:data-[invalid=true]:border-stroke-danger',
   Platform.select({
     web: [
       TRANSITION_COLORS,
-      'data-[hover=true]:data-[checked=false]:border-slate-400',
-      'data-[hover=true]:data-[checked=false]:bg-slate-50',
+      'group',
+      // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
+      'data-[hover=true]:data-[checked=false]:bg-content-secondary/[0.08]',
+      // Hover — unchecked + invalid (overlay uses danger token)
+      'data-[hover=true]:data-[invalid=true]:data-[checked=false]:bg-surface-danger-strong/[0.08]',
+      'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:border-surface-danger-strong-hover',
+      // Active — CSS :active (web root does not track press via data-active).
+      // data-[hover=true] guard ensures active beats hover by specificity (0,3,0 > 0,2,0).
+      'web:active:data-[hover=true]:data-[checked=false]:border-stroke-hover',
+      'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:border-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
       'web:data-[focus-visible=true]:outline-none',
-      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-offset-2',
-      'web:data-[focus-visible=true]:data-[checked=false]:ring-slate-400/50',
-      'web:data-[focus-visible=true]:data-[checked=true]:ring-stroke-focus',
-      'data-[invalid=true]:data-[hover=true]:border-stroke-danger',
-      'web:data-[invalid=true]:data-[focus-visible=true]:ring-stroke-danger',
+      '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 RadioIndicator).
+      'data-[field-state=active]:border-stroke-hover',
+      'data-[field-state=invalid-active]:border-surface-danger-strong-active',
+      'data-[field-state=checked-active]:border-surface-action-strong-active',
+      'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active',
     ].join(' '),
-    default: '',
   }),
 ]);
 
@@ -44,6 +57,19 @@ export const radioInnerDotVariants = cva([
   'data-[checked=true]:scale-100',
   'bg-surface-action-strong',
   'data-[invalid=true]:bg-surface-danger-strong',
+  Platform.select({
+    web: [
+      'data-[hover=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+      // Active via group-active on indicator (inner dot is not the :active target).
+      'web:group-active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
+      'web:group-active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+    ].join(' '),
+    default: [
+      'data-[field-state=checked-active]:bg-surface-action-strong-active',
+      'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
+    ].join(' '),
+  }),
 ]);
 
 export const radioLabelVariants = cva(['body-md', 'text-content-primary']);