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

package/src/components/Radio/index.tsx

@@ -0,0 +1,191 @@
+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';
+
+    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
+// =============================================================================
+
+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';
+
+// TODO: Add hover, active, and focus-visible styles based on Figma
+
+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',
+  'border-stroke-primary',
+  'data-[checked=false]:border-slate-300',
+  'bg-surface-primary',
+  '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',
+      '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',
+    ].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',
+]);
+
+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/index.ts

@@ -13,8 +13,10 @@ export * from './Image';
 export * from './Input';
 export * from './OtpInput';
 export * from './Link';
+export * from './ListItem';
 export * from './ProgressBar';
 export * from './ProgressSegmented';
+export * from './Radio';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';

package/src/styles/primitives.ts

@@ -1,6 +1,5 @@
 // packages/components/src/styles/primitives.ts
 // Semantic constants for CDX UI component styling.
-// See docs/visual-revamp-plan.md for rationale and usage.
 
 // ─── Colors ──────────────────────────────────────────────
 // Surface & background