@cdx-ui/components 0.0.1-beta.3 → 0.0.1-beta.31

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/Text/{styles.tsx → 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: '',
     }),
   ],

package/src/components/Tile/index.tsx

@@ -0,0 +1,296 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  createTile,
+  type ITileGroupMultipleProps,
+  type ITileGroupSingleProps,
+  type ITileIndicatorProps,
+  type ITileLeadingSlotProps,
+  type ITileProps,
+  type ITileTrailingSlotProps,
+  useTileContext,
+} from '@cdx-ui/primitives';
+import { Check } from '@cdx-ui/icons';
+import { dataAttributes } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { checkboxIndicatorVariants, checkboxIconVariants } from '../Checkbox/styles';
+import { Icon } from '../Icon';
+import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
+import {
+  tileContentVariants,
+  tileDescriptionVariants,
+  tileGroupVariants,
+  tileIndicatorVariants,
+  tileLeadingSlotVariants,
+  tileRootVariants,
+  tileTitleVariants,
+  tileTrailingSlotVariants,
+  type TileGroupVariantProps,
+  type TileVariantProps,
+} from './styles';
+
+const TILE_SCOPE = 'TILE';
+const TILE_GROUP_SCOPE = 'TILE_GROUP';
+
+const RootPressable = withStyleContext(Pressable, TILE_SCOPE);
+const GroupView = withStyleContext(View, TILE_GROUP_SCOPE);
+
+interface TileGroupStyleContext {
+  shape?: TileVariantProps['shape'];
+}
+
+const useTileGroupStyleContext = (): TileGroupStyleContext => {
+  // `useStyleContext` types the result as a `Record`, but at runtime the value is
+  // `undefined` when no provider is in scope (e.g. standalone Tile). Cast through
+  // `unknown` to acknowledge that.
+  const ctx = useStyleContext(TILE_GROUP_SCOPE) as unknown as TileGroupStyleContext | undefined;
+  return ctx ?? {};
+};
+
+const TilePrimitive = createTile({
+  Pressable: RootPressable,
+  Group: GroupView,
+  LeadingSlot: View,
+  Content: View,
+  Title: Text,
+  Description: Text,
+  Indicator: View,
+  TrailingSlot: View,
+});
+
+// =============================================================================
+// TILE GROUP
+// =============================================================================
+
+/**
+ * Discriminated union mirroring `ITileGroupProps`, with `className` and layout variants added at
+ * the styled layer. Distributing the intersection across each branch keeps `interface … extends`
+ * ergonomics and avoids tripping `@typescript-eslint` on `(union) & { ... }`.
+ *
+ * `direction` and `spacing` constrain the group layout to the three supported patterns:
+ * - `direction="column"` + `spacing="default"` — vertical stack with gaps (default).
+ * - `direction="column"` + `spacing="none"` — tight vertical stack (rows touch).
+ * - `direction="row"` + `spacing="default"` — side-by-side horizontal layout.
+ *
+ * `shape` (when set) is propagated to child `Tile`s via `withStyleContext`, matching the
+ * Avatar size-propagation pattern. A per-tile `shape` prop overrides the inherited value.
+ */
+export interface TileGroupSingleProps extends ITileGroupSingleProps, TileGroupVariantProps {
+  className?: string;
+  /** Visual shape inherited by child `Tile`s. Per-tile `shape` overrides this. */
+  shape?: TileVariantProps['shape'];
+}
+export interface TileGroupMultipleProps extends ITileGroupMultipleProps, TileGroupVariantProps {
+  className?: string;
+  /** Visual shape inherited by child `Tile`s. Per-tile `shape` overrides this. */
+  shape?: TileVariantProps['shape'];
+}
+export type TileGroupProps = TileGroupSingleProps | TileGroupMultipleProps;
+
+const TileGroup = forwardRef<View, TileGroupProps>(
+  ({ className, style, children, direction, spacing, shape, ...props }, ref) => (
+    <TilePrimitive.Group
+      ref={ref as never}
+      className={cn(tileGroupVariants({ direction, spacing }), className)}
+      style={style}
+      context={{ shape }}
+      {...props}
+    >
+      {children}
+    </TilePrimitive.Group>
+  ),
+);
+
+TileGroup.displayName = 'Tile.Group';
+
+// =============================================================================
+// TILE ROOT
+// =============================================================================
+
+export interface TileProps extends ITileProps, TileVariantProps {
+  className?: string;
+}
+
+const TileRoot = forwardRef<View, TileProps>(
+  ({ shape: shapeProp, showSeparator, className, style, context, ...props }, ref) => {
+    const { shape: inheritedShape } = useTileGroupStyleContext();
+    const shape = shapeProp ?? inheritedShape ?? 'card';
+    const computedClassName = cn(tileRootVariants({ shape, showSeparator }), className);
+
+    return (
+      <TilePrimitive
+        ref={ref as never}
+        className={computedClassName}
+        context={{ ...context, shape }}
+        style={style}
+        {...props}
+      />
+    );
+  },
+);
+
+TileRoot.displayName = 'Tile';
+
+// =============================================================================
+// SLOTS
+// =============================================================================
+
+export interface TileLeadingSlotProps extends ITileLeadingSlotProps {
+  className?: string;
+}
+
+const TileLeadingSlot = forwardRef<View, TileLeadingSlotProps>(
+  ({ className, style, ...props }, ref) => (
+    <TilePrimitive.LeadingSlot
+      ref={ref as never}
+      className={cn(tileLeadingSlotVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+TileLeadingSlot.displayName = 'Tile.LeadingSlot';
+
+export interface TileContentProps extends ViewProps {
+  className?: string;
+}
+
+const TileContent = forwardRef<View, TileContentProps>(({ className, style, ...props }, ref) => (
+  <TilePrimitive.Content
+    ref={ref as never}
+    className={cn(tileContentVariants(), className)}
+    style={style}
+    {...props}
+  />
+));
+
+TileContent.displayName = 'Tile.Content';
+
+export interface TileTitleProps extends TextProps {
+  className?: string;
+}
+
+const TileTitle = forwardRef<Text, TileTitleProps>(
+  ({ className, style, numberOfLines = 1, ...props }, ref) => (
+    <TilePrimitive.Title
+      ref={ref as never}
+      className={cn(tileTitleVariants(), className)}
+      style={style}
+      numberOfLines={numberOfLines}
+      {...props}
+    />
+  ),
+);
+
+TileTitle.displayName = 'Tile.Title';
+
+export interface TileDescriptionProps extends TextProps {
+  className?: string;
+}
+
+const TileDescription = forwardRef<Text, TileDescriptionProps>(
+  ({ className, style, ...props }, ref) => (
+    <TilePrimitive.Description
+      ref={ref as never}
+      className={cn(tileDescriptionVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+TileDescription.displayName = 'Tile.Description';
+
+/**
+ * Decorative selection affordance. Renders pure CVA-styled Views — no interactive hooks,
+ * no nested Pressable, zero runtime overhead. The Tile root owns the press target and
+ * ARIA role; this subtree is `aria-hidden` via `createTileIndicator`.
+ *
+ * The visual is inferred from the tile context: `single` (radio semantics) → radio ring,
+ * `multiple` (checkbox semantics) → checkbox square. An explicit `indicatorType` prop
+ * overrides — primarily for standalone tiles that want a radio-style visual.
+ */
+function TileIndicatorVisual({ indicatorType }: { indicatorType?: 'radio' | 'checkbox' }) {
+  const { isSelected, isDisabled, selectionType } = useTileContext();
+  const effectiveType: 'radio' | 'checkbox' =
+    indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
+  const stateAttrs = dataAttributes({ checked: isSelected, disabled: isDisabled });
+
+  if (effectiveType === 'radio') {
+    return (
+      <View className={radioIndicatorVariants()} {...stateAttrs}>
+        <View
+          className={radioInnerDotVariants()}
+          {...dataAttributes({ checked: isSelected, invalid: false })}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View className={cn(checkboxIndicatorVariants())} {...stateAttrs}>
+      {isSelected && <Icon as={Check} className={checkboxIconVariants()} />}
+    </View>
+  );
+}
+
+export interface TileIndicatorProps extends ITileIndicatorProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const TileIndicator = forwardRef<View, TileIndicatorProps>(
+  ({ className, children, style, indicatorType, ...props }, ref) => (
+    <TilePrimitive.Indicator
+      ref={ref as never}
+      className={cn(tileIndicatorVariants(), className)}
+      style={style}
+      indicatorType={indicatorType}
+      {...props}
+    >
+      {children ?? <TileIndicatorVisual indicatorType={indicatorType} />}
+    </TilePrimitive.Indicator>
+  ),
+);
+
+TileIndicator.displayName = 'Tile.Indicator';
+
+export interface TileTrailingSlotProps extends ITileTrailingSlotProps {
+  className?: string;
+}
+
+const TileTrailingSlot = forwardRef<View, TileTrailingSlotProps>(
+  ({ className, style, ...props }, ref) => (
+    <TilePrimitive.TrailingSlot
+      ref={ref as never}
+      className={cn(tileTrailingSlotVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+TileTrailingSlot.displayName = 'Tile.TrailingSlot';
+
+type TileCompound = typeof TileRoot & {
+  Group: typeof TileGroup;
+  LeadingSlot: typeof TileLeadingSlot;
+  Content: typeof TileContent;
+  Title: typeof TileTitle;
+  Description: typeof TileDescription;
+  Indicator: typeof TileIndicator;
+  TrailingSlot: typeof TileTrailingSlot;
+};
+
+export const Tile = Object.assign(TileRoot, {
+  Group: TileGroup,
+  LeadingSlot: TileLeadingSlot,
+  Content: TileContent,
+  Title: TileTitle,
+  Description: TileDescription,
+  Indicator: TileIndicator,
+  TrailingSlot: TileTrailingSlot,
+}) as TileCompound;
+
+export { useTileContext };

package/src/components/Tile/styles.ts

@@ -0,0 +1,82 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+export const tileGroupVariants = cva(['flex w-full'], {
+  variants: {
+    direction: {
+      column: 'flex-col',
+      row: 'flex-row',
+    },
+    spacing: {
+      default: 'gap-2',
+      none: 'gap-0',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    spacing: 'default',
+  },
+});
+
+export type TileGroupVariantProps = VariantProps<typeof tileGroupVariants>;
+
+export const tileRootVariants = cva(
+  [
+    'flex-row self-stretch gap-3 px-4 py-3',
+    'data-[disabled=true]:opacity-50',
+    TRANSITION_COLORS,
+    Platform.select({
+      web: [
+        'outline-none',
+        'data-[hover=true]:data-[disabled=false]:bg-surface-action-tint-hover',
+        'data-[active=true]:data-[disabled=false]:data-[hover=true]:bg-surface-action-tint-active',
+        'data-[hover=true]:data-[disabled=false]:data-[state=unselected]:border-stroke-action',
+        'focus-visible:data-[disabled=false]:ring-2 focus-visible:data-[disabled=false]:ring-stroke-focus focus-visible:data-[disabled=false]:ring-offset-2',
+      ].join(' '),
+      default: [
+        'data-[active=true]:bg-surface-action-tint-hover',
+        'data-[active=true]:border-stroke-action',
+      ].join(' '),
+    }),
+  ],
+  {
+    variants: {
+      shape: {
+        flat: 'rounded-none border-0 bg-transparent',
+        card: [
+          'rounded-xl border-1 border-solid',
+          'border-stroke-secondary',
+          'bg-surface-primary',
+          'data-[state=selected]:border-stroke-action',
+          'data-[state=selected]:border-1.5',
+          'data-[state=selected]:bg-surface-action-tint',
+        ].join(' '),
+      },
+      showSeparator: {
+        true: [
+          'border-b border-solid border-stroke-secondary! native:data-[active=true]:border-stroke-secondary', // Override border-stroke-action on hover
+        ],
+        false: '',
+      },
+    },
+    defaultVariants: {
+      shape: 'card',
+      showSeparator: false,
+    },
+  },
+);
+
+export const tileLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const tileTrailingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export const tileContentVariants = cva(['min-w-0 flex-1 flex-col gap-0.5 no-underline']);
+
+export const tileTitleVariants = cva(['text-base font-medium text-content-primary no-underline']);
+
+export const tileDescriptionVariants = cva(['text-sm text-content-secondary no-underline']);
+
+export const tileIndicatorVariants = cva(['flex shrink-0 items-center justify-center']);
+
+export type TileVariantProps = VariantProps<typeof tileRootVariants>;

package/src/components/index.ts

@@ -13,11 +13,14 @@ 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';
+export * from './Tile';
 export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';