@cdx-ui/components 0.0.1-beta.65 → 0.0.1-beta.67

package/src/components/Radio/index.tsx

@@ -1,6 +1,14 @@
 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 { Text, type TextProps, View, type ViewProps } from 'react-native';
+import {
+  RadioRoot as RadioRootPrimitive,
+  RadioGroup as RadioGroupPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useRadioContext,
+  type IRadioProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import {
   radioGroupVariants,
@@ -10,44 +18,6 @@ import {
   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
 // =============================================================================
@@ -61,29 +31,69 @@ const RadioRoot = forwardRef<View, RadioProps>(({ className, children, style, ..
   const computedClassName = cn(radioRootVariants(), className);
 
   return (
-    <RadioPrimitive ref={ref as any} className={computedClassName} style={style} {...props}>
+    <RadioRootPrimitive
+      ref={ref}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'radio' }))}
+    >
+      <RadioIndicator />
       {children}
-    </RadioPrimitive>
+    </RadioRootPrimitive>
   );
 });
 
 RadioRoot.displayName = 'Radio';
 
 // =============================================================================
-// RADIO INDICATOR
+// RADIO INDICATOR (styled-only, reads context for data-* styling)
 // =============================================================================
 
 export interface RadioIndicatorProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
+      useRadioContext();
+
+    const computedClassName = cn(radioIndicatorVariants(), className);
+    const Comp = asChild ? Slot : View;
+
     return (
-      <RadioPrimitive.Indicator ref={ref as any} className={className} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'radio-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+          }),
+        )}
+      >
+        <View
+          className={cn(radioInnerDotVariants())}
+          {...dataAttributes({
+            checked: isChecked,
+            invalid: isInvalid,
+            hover: isHovered,
+          })}
+        />
         {children}
-      </RadioPrimitive.Indicator>
+      </Comp>
     );
   },
 );
@@ -91,22 +101,30 @@ const RadioIndicator = forwardRef<View, RadioIndicatorProps>(
 RadioIndicator.displayName = 'Radio.Indicator';
 
 // =============================================================================
-// RADIO LABEL
+// RADIO LABEL (styled-only)
 // =============================================================================
 
 export interface RadioLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const RadioLabel = forwardRef<Text, RadioLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(radioLabelVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <RadioPrimitive.Label ref={ref as any} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'radio-label' }))}
+      >
         {children}
-      </RadioPrimitive.Label>
+      </Comp>
     );
   },
 );
@@ -114,7 +132,7 @@ const RadioLabel = forwardRef<Text, RadioLabelProps>(
 RadioLabel.displayName = 'Radio.Label';
 
 // =============================================================================
-// RADIO GROUP
+// RADIO GROUP (wraps the primitive)
 // =============================================================================
 
 export interface RadioGroupProps extends ViewProps {
@@ -129,6 +147,8 @@ export interface RadioGroupProps extends ViewProps {
   isReadOnly?: boolean;
   direction?: 'column' | 'row';
   name?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
 
 const RadioGroup = forwardRef<View, RadioGroupProps>(
@@ -153,8 +173,8 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(
     const computedClassName = cn(radioGroupVariants({ direction }), className);
 
     return (
-      <RadioPrimitive.Group
-        ref={ref as any}
+      <RadioGroupPrimitive
+        ref={ref}
         className={computedClassName}
         style={style}
         value={value}
@@ -165,10 +185,12 @@ const RadioGroup = forwardRef<View, RadioGroupProps>(
         isRequired={isRequired}
         isReadOnly={isReadOnly}
         name={name}
+        direction={direction}
         {...viewProps}
+        {...mergeDataAttributes(viewProps, dataAttributes({ slot: 'radio-group' }))}
       >
         {children}
-      </RadioPrimitive.Group>
+      </RadioGroupPrimitive>
     );
   },
 );

package/src/components/Select/index.tsx

@@ -1,8 +1,16 @@
-import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
-import { KeyboardArrowDown } from '@cdx-ui/icons';
+import { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@cdx-ui/icons';
 import {
-  createSelect,
+  SelectContent as SelectContentPrimitive,
+  SelectItem as SelectItemPrimitive,
+  SelectRoot as SelectRootPrimitive,
+  SelectTrigger as SelectTriggerPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useSelectContext,
+  useSelectItemContext,
   type ISelectContentProps,
   type ISelectItemLabelProps,
   type ISelectItemProps,
@@ -10,9 +18,9 @@ import {
   type ISelectTriggerProps,
   type ISelectValueProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
-import { SelectTriggerHost } from './SelectTriggerHost';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type SelectVariantProps,
   selectContentVariants,
@@ -25,22 +33,10 @@ import {
 
 const SCOPE = 'SELECT';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps;
 
-const SelectPrimitive = createSelect({
-  Root,
-  Trigger: SelectTriggerHost,
-  Value: Text,
-  Icon: View,
-  Content: View,
-  Item: Pressable,
-  ItemLabel: Text,
-});
-
 // =============================================================================
-// STYLED ROOT COMPONENT
+// STYLED ROOT
 // =============================================================================
 
 export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps {
@@ -49,16 +45,21 @@ export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps
 
 const SelectRoot = forwardRef<View, SelectProps>(
   ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
     return (
-      <SelectPrimitive
-        ref={ref}
-        className={className}
-        style={style}
-        context={{ variant, size }}
-        {...props}
-      >
-        {children}
-      </SelectPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <SelectRootPrimitive
+          ref={ref}
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'select' }))}
+        >
+          {children}
+        </SelectRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -66,25 +67,57 @@ const SelectRoot = forwardRef<View, SelectProps>(
 SelectRoot.displayName = 'Select';
 
 // =============================================================================
-// STYLED TRIGGER COMPONENT
+// STYLED TRIGGER
 // =============================================================================
 
 export interface SelectTriggerProps extends ISelectTriggerProps {
+  /**
+   * Substitute the rendered trigger element with the single child. The child must
+   * be another Forge primitive (IconButton, Chip, Button) — anything whose
+   * underlying Pressable accepts Pressable-shaped handlers. When set, the
+   * auto-injected arrow indicator is skipped and `selectTriggerVariants` is not
+   * applied so the substituted component's own appearance wins.
+   *
+   * On web, `<label htmlFor>` association is preserved via a `focus()` bridge
+   * registered by the primitive.
+   *
+   * NOTE — `data-slot` overlap: the substituted component's own `data-slot`
+   * (e.g. `button`, `icon-button`, `chip`) may win on the merged element.
+   * Selectors that need guaranteed `select-trigger` access should wrap the
+   * trigger instead of relying on `data-slot`.
+   */
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectTrigger = forwardRef<View, SelectTriggerProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { open } = useSelectContext();
     const { variant, size } = useSelectStyleContext();
 
-    const computedClassName = cn(selectTriggerVariants({ variant, size }), className);
+    const computedClassName = asChild
+      ? className
+      : cn(selectTriggerVariants({ variant, size }), className);
 
     return (
-      <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-        <SelectIcon as={KeyboardArrowDown} />
-      </SelectPrimitive.Trigger>
+      <SelectTriggerPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-trigger' }))}
+      >
+        {asChild ? (
+          children
+        ) : (
+          <>
+            {children}
+            <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+          </>
+        )}
+      </SelectTriggerPrimitive>
     );
   },
 );
@@ -92,58 +125,115 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
 SelectTrigger.displayName = 'Select.Trigger';
 
 // =============================================================================
-// STYLED VALUE COMPONENT
+// STYLED VALUE (styled-only)
 // =============================================================================
 
 export interface SelectValueProps extends TextProps, ISelectValueProps {
+  asChild?: boolean;
   className?: string;
 }
 
-const SelectValue = forwardRef<Text, SelectValueProps>(({ className, style, ...props }, ref) => {
-  const { size } = useSelectStyleContext();
+const SelectValue = forwardRef<Text, SelectValueProps>(
+  ({ asChild, className, style, placeholder, children, ...props }, ref) => {
+    const { size } = useSelectStyleContext();
+    const { value, items, invalid } = useSelectContext();
 
-  const computedClassName = cn(selectValueVariants({ size }), className);
+    const hasValue = value !== undefined && value !== '';
+    const showPlaceholder = !hasValue;
+    const displayText = hasValue ? items.find((item) => item.value === value)?.label : placeholder;
 
-  return <SelectPrimitive.Value ref={ref} className={computedClassName} style={style} {...props} />;
-});
+    const computedClassName = cn(selectValueVariants({ size }), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'select-value',
+            placeholder: showPlaceholder,
+            invalid,
+          }),
+        )}
+      >
+        {children ?? displayText}
+      </Comp>
+    );
+  },
+);
 
 SelectValue.displayName = 'Select.Value';
 
 // =============================================================================
-// STYLED ICON COMPONENT
+// STYLED ICON (styled-only, reads context for state=open / invalid)
 // =============================================================================
 
-export interface SelectIconProps extends Omit<IconProps, 'children'> {}
+export interface SelectIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing padding logically (RTL-aware).
+   * Omit to apply the symmetric baseline gap.
+   */
+  position?: IconSlotPosition;
+}
 
-const SelectIcon = ({ className, style, as: IconComponent, ...props }: SelectIconProps) => {
+const SelectIcon = ({ asChild, className, style, as, position, ...props }: SelectIconProps) => {
   const { size } = useSelectStyleContext();
+  const { invalid } = useSelectContext();
 
   const computedClassName = cn(selectIconVariants({ size }), className);
-  const iconSizeClass = size === 'small' ? 'size-4' : 'size-5';
 
-  return (
-    <SelectPrimitive.Icon className={computedClassName} style={style}>
-      <Icon as={IconComponent} className={iconSizeClass} {...props} />
-    </SelectPrimitive.Icon>
+  const slotData = mergeDataAttributes(
+    props,
+    dataAttributes({ slot: 'select-icon', invalid }),
+    positionToDataIcon(position),
   );
+
+  if (asChild) {
+    return <Slot className={computedClassName} style={style} {...props} {...slotData} />;
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} {...slotData} />;
 };
 
 SelectIcon.displayName = 'Select.Icon';
 
 // =============================================================================
-// STYLED CONTENT COMPONENT
+// STYLED CONTENT
 // =============================================================================
 
 export interface SelectContentProps extends ViewProps, ISelectContentProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const SelectContent = forwardRef<View, SelectContentProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, ...props }, ref) => {
     const computedClassName = cn(selectContentVariants(), className);
 
     return (
-      <SelectPrimitive.Content ref={ref} className={computedClassName} style={style} {...props} />
+      <SelectContentPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
+      />
     );
   },
 );
@@ -151,24 +241,32 @@ const SelectContent = forwardRef<View, SelectContentProps>(
 SelectContent.displayName = 'Select.Content';
 
 // =============================================================================
-// STYLED ITEM COMPONENT
+// STYLED ITEM
 // =============================================================================
 
 export interface SelectItemProps extends ISelectItemProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectItem = forwardRef<View, SelectItemProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { size } = useSelectStyleContext();
 
     const computedClassName = cn(selectItemVariants({ size }), className);
 
     return (
-      <SelectPrimitive.Item ref={ref} className={computedClassName} style={style} {...props}>
+      <SelectItemPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'select-item' }))}
+      >
         {children}
-      </SelectPrimitive.Item>
+      </SelectItemPrimitive>
     );
   },
 );
@@ -176,21 +274,38 @@ const SelectItem = forwardRef<View, SelectItemProps>(
 SelectItem.displayName = 'Select.Item';
 
 // =============================================================================
-// STYLED ITEM LABEL COMPONENT
+// STYLED ITEM LABEL (styled-only, reads item context for checked state)
 // =============================================================================
 
 export interface SelectItemLabelProps extends TextProps, ISelectItemLabelProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const SelectItemLabel = forwardRef<Text, SelectItemLabelProps>(
-  ({ className, style, ...props }, ref) => {
+  ({ asChild, className, style, children, ...props }, ref) => {
     const { size } = useSelectStyleContext();
+    const { checked } = useSelectItemContext();
 
     const computedClassName = cn(selectItemLabelVariants({ size }), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <SelectPrimitive.ItemLabel ref={ref} className={computedClassName} style={style} {...props} />
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'select-item-label',
+            state: checked ? 'checked' : 'unchecked',
+          }),
+        )}
+      >
+        {children}
+      </Comp>
     );
   },
 );

package/src/components/Select/styles.ts

@@ -16,7 +16,7 @@ export const selectTriggerVariants = cva(
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
     'data-[readonly=true]:bg-surface-secondary',
-    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    'web:hover: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',
@@ -83,7 +83,6 @@ export const selectIconVariants = cva(
     'shrink-0 items-center justify-center self-center',
     'text-content-tertiary',
     'data-[invalid=true]:text-content-danger',
-    'data-[state=open]:rotate-180',
   ],
   {
     variants: {

package/src/components/Switch/BaseSwitch.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
-import { Switch as RNSwitch, type SwitchProps } from 'react-native';
-import { cn } from '@cdx-ui/utils';
+import { Switch as RNSwitch, type SwitchProps as RNSwitchProps } from 'react-native';
+import { mergeDataAttributes, type IUseSwitchReturn } from '@cdx-ui/primitives';
+import { cn, composeEventHandlers } from '@cdx-ui/utils';
 import {
   switchIosBgVariants,
   switchThumbColorVariants,
@@ -8,29 +9,50 @@ import {
   switchTrackOnVariants,
 } from './styles';
 
-export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
-  states?: Record<string, boolean | undefined>;
-  dataSet?: Record<string, string>;
+export interface BaseSwitchProps extends Omit<
+  RNSwitchProps,
+  | 'value'
+  | 'disabled'
+  | 'onValueChange'
+  | 'thumbColor'
+  | 'trackColor'
+  | 'ios_backgroundColor'
+  | 'className'
+> {
+  switchState: IUseSwitchReturn;
   className?: string;
-  size?: string;
+  size?: string | null;
 }
 
+/**
+ * Native host for `Switch`. Renders `RNSwitch` with Uniwind className passthrough
+ * derived from the resolved interaction state in `switchState`.
+ *
+ * All state/a11y/interaction machinery lives in the `useSwitch` hook; this file
+ * is pure rendering (Standard 3: primitives must not carry styling machinery).
+ */
 export const BaseSwitch = forwardRef<RNSwitch, BaseSwitchProps>(
-  ({ states, className, disabled, value, ...props }, ref) => {
-    const isChecked = value ?? states?.checked ?? false;
-    const isDisabled = disabled ?? states?.disabled ?? false;
-    const isInvalid = states?.invalid ?? false;
-
+  ({ switchState, className, size: _size, onFocus, onBlur, ...props }, ref) => {
     const uniwindProps: Record<string, string | undefined> = {
       className,
-      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
-      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
-      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
-      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
+      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled: switchState.isDisabled })),
+      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid: switchState.isInvalid })),
+      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid: switchState.isInvalid })),
+      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid: switchState.isInvalid })),
     };
 
     return (
-      <RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
+      <RNSwitch
+        ref={ref}
+        value={switchState.checked}
+        disabled={switchState.isDisabled}
+        onValueChange={switchState.setChecked}
+        onFocus={composeEventHandlers(onFocus, switchState.focusProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, switchState.focusProps.onBlur)}
+        {...uniwindProps}
+        {...props}
+        {...mergeDataAttributes(props, switchState.dataAttrs)}
+      />
     );
   },
 );