@cdx-ui/components 0.0.1-beta.6 → 0.0.1-beta.61

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/Radio/index.tsx

@@ -0,0 +1,192 @@
+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 { cn } from '@cdx-ui/utils';
+import {
+  radioGroupVariants,
+  radioIndicatorVariants,
+  radioInnerDotVariants,
+  radioLabelVariants,
+  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';
+    const isHovered = ds ? ds.hover === true : (props as any)['data-hover'] === 'true';
+
+    return (
+      <View ref={ref} className={cn(radioIndicatorVariants(), className)} style={style} {...props}>
+        <View
+          className={cn(radioInnerDotVariants())}
+          {...dataAttributes({ checked: isChecked, invalid: isInvalid, hover: isHovered })}
+        />
+        {children}
+      </View>
+    );
+  },
+);
+
+RadioIndicatorBase.displayName = 'Radio.IndicatorBase';
+
+// =============================================================================
+// PRIMITIVE ASSEMBLY
+// =============================================================================
+
+const RadioPrimitive = createRadio({
+  Root: Pressable,
+  Indicator: RadioIndicatorBase,
+  Label: Text,
+  Group: View,
+});
+
+// =============================================================================
+// 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 (
+    <RadioPrimitive ref={ref as any} className={computedClassName} style={style} {...props}>
+      {children}
+    </RadioPrimitive>
+  );
+});
+
+RadioRoot.displayName = 'Radio';
+
+// =============================================================================
+// RADIO INDICATOR
+// =============================================================================
+
+export interface RadioIndicatorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    return (
+      <RadioPrimitive.Indicator ref={ref as any} className={className} style={style} {...props}>
+        {children}
+      </RadioPrimitive.Indicator>
+    );
+  },
+);
+
+RadioIndicator.displayName = 'Radio.Indicator';
+
+// =============================================================================
+// RADIO LABEL
+// =============================================================================
+
+export interface RadioLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const RadioLabel = forwardRef<Text, RadioLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(radioLabelVariants(), className);
+
+    return (
+      <RadioPrimitive.Label ref={ref as any} className={computedClassName} style={style} {...props}>
+        {children}
+      </RadioPrimitive.Label>
+    );
+  },
+);
+
+RadioLabel.displayName = 'Radio.Label';
+
+// =============================================================================
+// RADIO GROUP
+// =============================================================================
+
+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;
+}
+
+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 (
+      <RadioPrimitive.Group
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isRequired={isRequired}
+        isReadOnly={isReadOnly}
+        name={name}
+        {...viewProps}
+      >
+        {children}
+      </RadioPrimitive.Group>
+    );
+  },
+);
+
+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;

package/src/components/Radio/styles.ts

@@ -0,0 +1,59 @@
+import { Platform } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+export const radioRootVariants = cva([
+  'flex-row items-center gap-2',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_CURSOR,
+]);
+
+export const radioIndicatorVariants = cva([
+  'items-center justify-center',
+  'rounded-[var(--border-radius-round)]',
+  'border-[length:var(--border-width-selected)]',
+  'h-5 w-5',
+  '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=true]:border-surface-action-strong-hover',
+      'data-[hover=true]:data-[invalid=true]:border-surface-danger-strong-hover',
+      'web:data-[focus-visible=true]:outline-none',
+      '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(' '),
+    default: '',
+  }),
+]);
+
+export const radioInnerDotVariants = cva([
+  'rounded-[var(--border-radius-round)]',
+  'h-2.5 w-2.5',
+  'scale-0',
+  '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',
+    ].join(' '),
+    default: '',
+  }),
+]);
+
+export const radioLabelVariants = cva(['body-md', 'text-content-primary']);
+
+export const radioGroupVariants = cva([], {
+  variants: {
+    direction: {
+      column: 'gap-2',
+      row: 'flex-row gap-4',
+    },
+  },
+  defaultVariants: { direction: 'column' },
+});

package/src/components/ScopedTheme/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import { ScopedTheme as UniwindScopedTheme } from 'uniwind';
+
+export type ScopedThemeProps = ComponentProps<typeof UniwindScopedTheme>;
+
+/**
+ * Forces a specific theme on a component subtree, regardless of the application's
+ * global theme. Useful for marketing heroes, embedded widgets, or preview surfaces
+ * that must render in a fixed mode.
+ *
+ * Wraps Uniwind's `ScopedTheme` to keep `uniwind` an internal implementation detail.
+ *
+ * Web requires `@custom-variant dark (&:where(.dark, .dark *));` in the consuming
+ * app's `global.css`. See the Storybook story (`Theming/ScopedTheme`) for the full
+ * mechanism, light-vs-dark asymmetry, and dynamic-switch caveat.
+ */
+export const ScopedTheme = (props: ScopedThemeProps) => <UniwindScopedTheme {...props} />;

package/src/components/Select/SelectTriggerHost.web.tsx

@@ -1,8 +1,12 @@
 import React, { forwardRef } from 'react';
 import { StyleSheet } from 'react-native';
 import type { PressableProps } from 'react-native';
+import { domDataAttributes, type DomDataAttributeValue } from '@cdx-ui/primitives';
 
-export type SelectTriggerHostProps = PressableProps & { className?: string };
+export type SelectTriggerHostProps = PressableProps & {
+  className?: string;
+  dataSet?: Record<string, DomDataAttributeValue>;
+};
 
 /** Props that must not be forwarded to a DOM `<button>`. */
 const OMIT = new Set<string>([
@@ -91,16 +95,19 @@ export const SelectTriggerHost = forwardRef<HTMLButtonElement, SelectTriggerHost
       style,
       className,
       testID,
+      dataSet,
       ...rest
     } = props;
 
     const domProps = filterDomProps(rest);
+    const dataAttrs = domDataAttributes(dataSet ?? {});
     const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
 
     return (
       <button
         ref={ref}
         {...domProps}
+        {...dataAttrs}
         type="button"
         disabled={!!disabled}
         className={typeof className === 'string' ? className : undefined}

package/src/components/Select/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
-import { ArrowDropDown } from '@cdx-ui/icons';
+import { KeyboardArrowDown } from '@cdx-ui/icons';
 import {
   createSelect,
   type ISelectContentProps,
@@ -83,7 +83,7 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
     return (
       <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-        <SelectIcon as={ArrowDropDown} />
+        <SelectIcon as={KeyboardArrowDown} />
       </SelectPrimitive.Trigger>
     );
   },
@@ -115,12 +115,17 @@ SelectValue.displayName = 'Select.Value';
 
 export interface SelectIconProps extends Omit<IconProps, 'children'> {}
 
-const SelectIcon = ({ className, style, ...props }: SelectIconProps) => {
+const SelectIcon = ({ className, style, as: IconComponent, ...props }: SelectIconProps) => {
   const { size } = useSelectStyleContext();
 
   const computedClassName = cn(selectIconVariants({ size }), className);
+  const iconSizeClass = size === 'small' ? 'size-4' : 'size-5';
 
-  return <Icon className={computedClassName} style={style} {...props} />;
+  return (
+    <SelectPrimitive.Icon className={computedClassName} style={style}>
+      <Icon as={IconComponent} className={iconSizeClass} {...props} />
+    </SelectPrimitive.Icon>
+  );
 };
 
 SelectIcon.displayName = 'Select.Icon';

package/src/components/Select/styles.ts

@@ -1,44 +1,29 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_BG_PRIMARY,
-  COLOR_BORDER_DEFAULT,
-  COLOR_TEXT_MUTED,
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  RADIUS_SM,
-  RADIUS_MD,
-  SHADOW_SM,
-  SHADOW_MD,
-  SIZE_SCALE,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
     'flex w-full min-w-0 flex-row items-center justify-between text-start',
-    RADIUS_SM,
-    SHADOW_SM,
+    'bg-surface-primary',
+    'border border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    DISABLED_OPACITY,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[state=open]:border-slate-900',
-    'data-[invalid=true]:border-red-500',
-    'data-[readonly=true]:bg-slate-50',
-    Platform.select({
-      default: 'data-[active=true]:border-slate-300',
-      web: [
-        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
-      ].join(' '),
-    }),
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    'data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'data-[focus=true]:data-[invalid=false]:border-stroke-action',
+    'data-[focus=true]:data-[invalid=true]:border-stroke-danger',
+    'data-[state=open]:border-[length:var(--border-width-focused)]',
+    'data-[state=open]:data-[invalid=false]:border-stroke-action',
+    'data-[state=open]:data-[invalid=true]:border-stroke-danger',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     variants: {
@@ -46,8 +31,20 @@ export const selectTriggerVariants = cva(
         outline: [],
       },
       size: {
-        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
-        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[state=open]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'data-[state=open]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
+        small: [
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+          'data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[state=open]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
+        ],
       },
     },
     defaultVariants: {
@@ -62,15 +59,15 @@ export const selectTriggerVariants = cva(
 export const selectValueVariants = cva(
   [
     'min-w-0 flex-1 text-start',
-    'data-[placeholder=true]:text-slate-400',
-    'data-[invalid=true]:text-red-600',
-    COLOR_TEXT_PRIMARY,
+    'text-content-primary',
+    'data-[placeholder=true]:text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
   ],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {
@@ -84,14 +81,15 @@ export const selectValueVariants = cva(
 export const selectIconVariants = cva(
   [
     'shrink-0 items-center justify-center self-center',
-    COLOR_TEXT_MUTED,
-    'data-[invalid=true]:text-red-500',
+    'text-content-tertiary',
+    'data-[invalid=true]:text-content-danger',
+    'data-[state=open]:rotate-180',
   ],
   {
     variants: {
       size: {
-        default: 'h-5 w-5',
-        small: 'h-4 w-4',
+        default: 'size-5',
+        small: 'size-4',
       },
     },
     defaultVariants: {
@@ -103,12 +101,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  COLOR_BG_PRIMARY,
-  `border ${COLOR_BORDER_DEFAULT}`,
+  'bg-surface-primary',
+  'border border-stroke-secondary',
   'overflow-hidden',
-  RADIUS_MD,
+  'rounded-xl',
   Platform.select({
-    web: SHADOW_MD,
+    web: 'shadow-sm',
     default: '',
   }),
   'max-h-60',
@@ -122,10 +120,10 @@ export const selectItemVariants = cva(
     'flex-row items-center',
     'transition-colors duration-100',
     'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
+    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-slate-100',
-      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
+      default: 'data-[active=true]:bg-surface-action-tint-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
     }),
   ],
   {
@@ -144,12 +142,12 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
+  ['text-content-primary', 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        default: SIZE_SCALE.default.text,
-        small: SIZE_SCALE.small.text,
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     defaultVariants: {

package/src/components/Text/styles.ts

@@ -3,9 +3,9 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 export const textStyle = cva(
   [
-    `text-content-primary font-normal`,
+    'text-content-primary',
     Platform.select({
-      web: 'font-sans my-0 bg-transparent display-inline no-underline',
+      web: 'font-body my-0 bg-transparent no-underline',
       default: '',
     }),
   ],