@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.71

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,45 +24,56 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const OtpRoot = withStyleContext(HStack, SCOPE);
-
 const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
-const OtpStyledCell = forwardRef<View, InputProps>(
-  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
-    const { size, variant } = useOtpInputStyleContext();
+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>
+  );
+});
+
+OtpStyledCell.displayName = 'OtpInput.Cell';
+
+/**
+ * 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 (
-      <Input
+      <OtpInputField
         ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(otpCellVariants({ size }), className)}
         {...props}
-      >
-        {children}
-      </Input>
+        onFocus={(e) => {
+          setIsFocused?.(true);
+          props.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocused?.(false);
+          props.onBlur?.(e);
+        }}
+      />
     );
   },
 );
 
-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} />;
-});
-
 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']>;
@@ -61,17 +81,80 @@ export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInpu
 }
 
 export const OtpInput = forwardRef<View, OtpInputProps>(
-  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+  (
+    {
+      variant = 'outline',
+      size = 'default',
+      fullWidth = true,
+      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 cells: React.ReactElement[] = [];
+    for (let i = 0; i < cellCount; i++) {
+      cells.push(
+        <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
+          <OtpStyledCell>
+            <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>
     );
   },
 );

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,26 @@ 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 (
+        typeof process !== 'undefined' &&
+        process.env.NODE_ENV !== 'production' &&
+        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 +81,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 +97,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 +113,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>;