@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

package/src/components/Checkbox/index.tsx

@@ -1,11 +1,18 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
 import { Check, CheckIndeterminateSmall } from '@cdx-ui/icons';
-import { createCheckbox, type ICheckboxProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import {
+  CheckboxRoot as CheckboxRootPrimitive,
+  CheckboxGroup as CheckboxGroupPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useCheckboxContext,
+  type ICheckboxProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
 import {
-  type CheckboxVariantProps,
   checkboxGroupVariants,
   checkboxIconVariants,
   checkboxIndicatorVariants,
@@ -13,49 +20,33 @@ import {
   checkboxRootVariants,
 } from './styles';
 
-const SCOPE = 'CHECKBOX';
-
-const Root = withStyleContext(Pressable, SCOPE);
-
-const useCheckboxStyleContext = () => useStyleContext(SCOPE) as CheckboxVariantProps;
-
-const CheckboxPrimitive = createCheckbox({
-  Root,
-  Indicator: View,
-  Icon: View,
-  Label: Text,
-  Group: View,
-});
-
 // =============================================================================
 // CHECKBOX ROOT
 // =============================================================================
 
-export interface CheckboxProps extends ICheckboxProps, CheckboxVariantProps {
+export interface CheckboxProps extends ICheckboxProps {
   className?: string;
   children?: ReactNode;
 }
 
 const CheckboxRoot = forwardRef<View, CheckboxProps>(
-  ({ size = 'default', className, isIndeterminate, children, style, ...props }, ref) => {
-    const computedClassName = cn(checkboxRootVariants({ size }), className);
+  ({ className, isIndeterminate, children, style, ...props }, ref) => {
+    const computedClassName = cn(checkboxRootVariants(), className);
 
     return (
-      <CheckboxPrimitive
+      <CheckboxRootPrimitive
         ref={ref as any}
         className={computedClassName}
         isIndeterminate={isIndeterminate}
         style={style}
-        context={{ size }}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'checkbox' }))}
       >
         <CheckboxIndicator>
-          <CheckboxPrimitive.Icon>
-            <CheckboxIcon as={isIndeterminate ? CheckIndeterminateSmall : Check} />
-          </CheckboxPrimitive.Icon>
+          <CheckboxIconSlot isIndeterminate={isIndeterminate} />
         </CheckboxIndicator>
         {children}
-      </CheckboxPrimitive>
+      </CheckboxRootPrimitive>
     );
   },
 );
@@ -63,28 +54,80 @@ const CheckboxRoot = forwardRef<View, CheckboxProps>(
 CheckboxRoot.displayName = 'Checkbox';
 
 // =============================================================================
-// CHECKBOX INDICATOR
+// CHECKBOX INDICATOR (styled-only, reads context for data-* styling)
 // =============================================================================
 
+/** Compound check × 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',
+  'indeterminate:false:false': 'indeterminate',
+  'indeterminate:true:false': 'indeterminate-invalid',
+  'indeterminate:false:true': 'indeterminate-active',
+  'indeterminate:true:true': 'indeterminate-invalid-active',
+} as const;
+
 export interface CheckboxIndicatorProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useCheckboxStyleContext();
-    const computedClassName = cn(checkboxIndicatorVariants({ size }), className);
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const {
+      isChecked,
+      isDisabled,
+      isHovered,
+      isInvalid,
+      isReadOnly,
+      isPressed,
+      isFocused,
+      isIndeterminate,
+      isFocusVisible,
+    } = useCheckboxContext();
+
+    const checkState = isIndeterminate ? 'indeterminate' : isChecked ? 'checked' : 'unchecked';
+    const fieldState = isReadOnly
+      ? (`readonly-${checkState}${isInvalid ? '-invalid' : ''}` as const)
+      : INDICATOR_STATES[
+          `${checkState}:${isInvalid ? 'true' : 'false'}:${isPressed ? 'true' : 'false'}`
+        ];
+
+    const computedClassName = cn(checkboxIndicatorVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <CheckboxPrimitive.Indicator
-        ref={ref as any}
+      <Comp
+        ref={ref}
         className={computedClassName}
         style={style}
         {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'checkbox-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+            focused: isFocused,
+            indeterminate: isIndeterminate,
+            fieldState,
+          }),
+        )}
       >
         {children}
-      </CheckboxPrimitive.Indicator>
+      </Comp>
     );
   },
 );
@@ -92,43 +135,82 @@ const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
 CheckboxIndicator.displayName = 'Checkbox.Indicator';
 
 // =============================================================================
-// CHECKBOX ICON
+// CHECKBOX ICON (styled-only, reads context for conditional mount)
 // =============================================================================
 
 export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
 
 const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
-  const { size } = useCheckboxStyleContext();
-  const computedClassName = cn(checkboxIconVariants({ size }), className);
-
-  return <Icon className={computedClassName} style={style} {...props} />;
+  const { isReadOnly } = useCheckboxContext();
+  const computedClassName = cn(checkboxIconVariants(), className);
+
+  return (
+    <Icon
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(
+        props,
+        dataAttributes({
+          slot: 'checkbox-icon',
+          readonly: isReadOnly,
+        }),
+      )}
+    />
+  );
 };
 
 CheckboxIcon.displayName = 'Checkbox.Icon';
 
+// Internal helper that reads context for conditional rendering
+const CheckboxIconSlot = ({
+  isIndeterminate: isIndeterminateProp,
+}: {
+  isIndeterminate?: boolean;
+}) => {
+  const { isChecked, isIndeterminate } = useCheckboxContext();
+  const showIcon = isChecked || isIndeterminateProp || isIndeterminate;
+
+  if (!showIcon) return null;
+
+  return (
+    <CheckboxIcon as={isIndeterminate || isIndeterminateProp ? CheckIndeterminateSmall : Check} />
+  );
+};
+
 // =============================================================================
-// CHECKBOX LABEL
+// CHECKBOX LABEL (styled-only)
 // =============================================================================
 
 export interface CheckboxLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useCheckboxStyleContext();
-    const computedClassName = cn(checkboxLabelVariants({ size }), className);
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { isDisabled, isReadOnly } = useCheckboxContext();
+    const computedClassName = cn(checkboxLabelVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <CheckboxPrimitive.Label
-        ref={ref as any}
+      <Comp
+        ref={ref}
         className={computedClassName}
         style={style}
         {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'checkbox-label',
+            disabled: isDisabled,
+            readonly: isReadOnly,
+          }),
+        )}
       >
         {children}
-      </CheckboxPrimitive.Label>
+      </Comp>
     );
   },
 );
@@ -136,7 +218,7 @@ const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
 CheckboxLabel.displayName = 'Checkbox.Label';
 
 // =============================================================================
-// CHECKBOX GROUP
+// CHECKBOX GROUP (wraps the primitive)
 // =============================================================================
 
 export interface CheckboxGroupProps extends ViewProps {
@@ -148,6 +230,8 @@ export interface CheckboxGroupProps extends ViewProps {
   isInvalid?: boolean;
   isReadOnly?: boolean;
   direction?: 'column' | 'row';
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
 
 const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
@@ -169,8 +253,8 @@ const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
     const computedClassName = cn(checkboxGroupVariants({ direction }), className);
 
     return (
-      <CheckboxPrimitive.Group
-        ref={ref as any}
+      <CheckboxGroupPrimitive
+        ref={ref}
         className={computedClassName}
         style={style}
         value={value ?? []}
@@ -179,9 +263,10 @@ const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
         isInvalid={isInvalid}
         isReadOnly={isReadOnly}
         {...viewProps}
+        {...mergeDataAttributes(viewProps, dataAttributes({ slot: 'checkbox-group' }))}
       >
         {children}
-      </CheckboxPrimitive.Group>
+      </CheckboxGroupPrimitive>
     );
   },
 );

package/src/components/Checkbox/styles.ts

@@ -1,90 +1,124 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import {
-  COLOR_TEXT_PRIMARY,
-  DISABLED_CURSOR,
-  DISABLED_OPACITY,
-  TRANSITION_COLORS,
-} from '../../styles/primitives';
+import { cva } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, DISABLED_OPACITY, TRANSITION_COLORS } from '../../styles/constants';
 
-export const checkboxRootVariants = cva(
-  ['flex-row items-center', DISABLED_OPACITY, DISABLED_CURSOR],
-  {
-    variants: {
-      size: {
-        small: 'gap-2',
-        default: 'gap-2.5',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
+// TODO: Handle text wrapping in the label
 
-export const checkboxIndicatorVariants = cva(
-  [
-    'items-center justify-center',
-    'rounded',
-    'border-2',
-    'border-stroke-secondary',
-    'bg-surface-primary',
-    'data-[checked=true]:bg-surface-action-strong data-[checked=true]:border-stroke-action',
-    'data-[indeterminate=true]:bg-surface-action-strong data-[indeterminate=true]:border-stroke-action',
-    'data-[disabled=true]:opacity-50',
-    'data-[invalid=true]:border-stroke-danger',
-    'data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong data-[checked=true]:data-[invalid=true]:border-stroke-danger',
-    'data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong data-[indeterminate=true]:data-[invalid=true]:border-stroke-danger',
-    Platform.select({
-      web: [
-        TRANSITION_COLORS,
-        'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:border-slate-400 data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-slate-50',
-        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
-        'data-[invalid=true]:data-[hover=true]:border-red-400',
-        'data-[invalid=true]:data-[focus-visible=true]:ring-red-400/50',
-      ].join(' '),
-      default: '',
-    }),
-  ],
-  {
-    variants: {
-      size: {
-        small: 'h-4 w-4',
-        default: 'h-5 w-5',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
+export const checkboxRootVariants = cva([
+  'flex-row items-center gap-2.5',
+  DISABLED_OPACITY,
+  DISABLED_CURSOR,
+  'data-[readonly=true]:cursor-default',
+  // Suppress stray outline on the Pressable/label wrapper; focus ring is drawn on Checkbox.Indicator (Radio pattern).
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+]);
 
-export const checkboxIconVariants = cva(['text-white'], {
-  variants: {
-    size: {
-      small: 'h-3 w-3',
-      default: 'h-3.5 w-3.5',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const checkboxIndicatorVariants = cva([
+  'items-center justify-center',
+  'h-5 w-5',
+  'rounded',
+  'border-2 border-solid',
+  'data-[disabled=true]:opacity-50',
+  // Background — layered by specificity. checked=false acts as an explicit reset so the base bg
+  // reasserts when transitioning from checked/indeterminate on native (where absent attributes
+  // break data-[attr=false] selectors).
+  // IMPORTANT: On native (Uniwind), only the LAST data-[] condition in a compound chain is
+  // effectively evaluated. Place the most discriminating condition last to avoid false matches.
+  'data-[checked=false]:bg-surface-primary',
+  'data-[checked=true]:bg-surface-action-strong',
+  'data-[indeterminate=true]:bg-surface-action-strong',
+  // Border — invalid (later) beats checked/indeterminate.
+  'data-[checked=false]:border-content-secondary',
+  'data-[checked=true]:border-stroke-action',
+  'data-[indeterminate=true]:border-stroke-action',
+  'data-[invalid=true]:border-stroke-danger',
+  Platform.select({
+    web: [
+      // Read-only — compound selectors evaluate correctly on web.
+      'data-[readonly=true]:bg-surface-secondary',
+      'data-[readonly=true]:data-[checked=true]:border-stroke-action',
+      'data-[readonly=true]:data-[indeterminate=true]:border-stroke-action',
+      'data-[readonly=true]:data-[checked=true]:bg-surface-secondary',
+      'data-[readonly=true]:data-[indeterminate=true]:bg-surface-secondary',
+      // Invalid bg — compound selectors evaluate correctly on web.
+      'data-[invalid=true]:data-[checked=true]:bg-surface-danger-strong',
+      'data-[invalid=true]:data-[indeterminate=true]:bg-surface-danger-strong',
+      TRANSITION_COLORS,
+      // Hover — unchecked (Figma: border unchanged, bg overlay at opacity/hover)
+      'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-content-secondary/[0.08]',
+      // Hover — unchecked + invalid (overlay uses danger token)
+      'data-[hover=true]:data-[invalid=true]:data-[checked=false]:data-[indeterminate=false]:bg-surface-danger-strong/[0.08]',
+      // Hover — checked / indeterminate (bg + border darken together)
+      'data-[hover=true]:data-[checked=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[checked=true]:border-surface-action-strong-hover',
+      'data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-hover',
+      'data-[hover=true]:data-[indeterminate=true]:border-surface-action-strong-hover',
+      'data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+      'data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-hover',
+      'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-hover',
+      'data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-surface-danger-strong-hover',
+      // Active — CSS :active pseudo-class (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).
+      // Unchecked — border only (Radio pattern)
+      'web:active:data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:border-stroke-hover',
+      'web:active:data-[hover=true]:data-[invalid=true]:data-[checked=false]:data-[indeterminate=false]:border-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:bg-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:border-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:bg-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:border-surface-action-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[checked=true]:data-[invalid=true]:border-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:bg-surface-danger-strong-active',
+      'web:active:data-[hover=true]:data-[indeterminate=true]:data-[invalid=true]:border-surface-danger-strong-active',
+      // Focus ring — applies to read-only as well (focusable + aria-readonly).
+      'web:data-[focus-visible=true]:outline-none',
+      '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 CheckboxIndicator).
+      // Read-only — derived field-state encodes check × readonly (no active/hover on readonly).
+      'data-[field-state=readonly-unchecked]:bg-surface-secondary',
+      'data-[field-state=readonly-checked]:bg-surface-secondary',
+      'data-[field-state=readonly-checked]:border-stroke-action',
+      'data-[field-state=readonly-indeterminate]:bg-surface-secondary',
+      'data-[field-state=readonly-indeterminate]:border-stroke-action',
+      'data-[field-state=readonly-unchecked-invalid]:bg-surface-secondary',
+      'data-[field-state=readonly-checked-invalid]:bg-surface-secondary',
+      'data-[field-state=readonly-checked-invalid]:border-stroke-action',
+      'data-[field-state=readonly-indeterminate-invalid]:bg-surface-secondary',
+      'data-[field-state=readonly-indeterminate-invalid]:border-stroke-action',
+      // checked/indeterminate + invalid → danger bg
+      'data-[field-state=checked-invalid]:bg-surface-danger-strong',
+      'data-[field-state=indeterminate-invalid]:bg-surface-danger-strong',
+      // unchecked + active → border only (Radio pattern)
+      'data-[field-state=active]:border-stroke-hover',
+      'data-[field-state=invalid-active]:border-surface-danger-strong-active',
+      // checked/indeterminate + active → action active bg + matching border
+      'data-[field-state=checked-active]:bg-surface-action-strong-active',
+      'data-[field-state=checked-active]:border-surface-action-strong-active',
+      'data-[field-state=indeterminate-active]:bg-surface-action-strong-active',
+      'data-[field-state=indeterminate-active]:border-surface-action-strong-active',
+      // checked/indeterminate + invalid + active → danger active bg + matching border
+      'data-[field-state=checked-invalid-active]:bg-surface-danger-strong-active',
+      'data-[field-state=checked-invalid-active]:border-surface-danger-strong-active',
+      'data-[field-state=indeterminate-invalid-active]:bg-surface-danger-strong-active',
+      'data-[field-state=indeterminate-invalid-active]:border-surface-danger-strong-active',
+    ].join(' '),
+  }),
+]);
 
-export const checkboxLabelVariants = cva(
-  [COLOR_TEXT_PRIMARY, 'data-[disabled=true]:text-slate-400'],
-  {
-    variants: {
-      size: {
-        small: 'text-sm',
-        default: 'text-base',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
+export const checkboxIconVariants = cva([
+  'text-white',
+  'data-[readonly=true]:text-content-action',
+  'h-5 w-5',
+]);
+
+export const checkboxLabelVariants = cva([
+  'text-content-primary text-base',
+  'data-[disabled=true]:text-content-tertiary',
+  'data-[readonly=true]:cursor-default',
+]);
 
 export const checkboxGroupVariants = cva([], {
   variants: {
@@ -97,5 +131,3 @@ export const checkboxGroupVariants = cva([], {
     direction: 'column',
   },
 });
-
-export type CheckboxVariantProps = VariantProps<typeof checkboxRootVariants>;