@cdx-ui/primitives 0.0.1-beta.1 → 0.0.1-beta.100

package/src/select/useSelectTrigger.web.ts

@@ -0,0 +1,280 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type RefCallback,
+} from 'react';
+import { type GestureResponderEvent } from 'react-native';
+import {
+  composeEventHandlers,
+  mergeRefs,
+  useFormControlContext,
+  useReportFormControlLabelFocus,
+  type Focusable,
+} from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { useSelectContext } from './context';
+import type {
+  SelectTriggerAriaProps,
+  SelectTriggerDataAttrValues,
+  SelectTriggerHandlers,
+  UseSelectTriggerOptions,
+  UseSelectTriggerReturn,
+} from './useSelectTrigger';
+
+const FIELD_STATES = {
+  'false:false': 'idle',
+  'false:true': 'invalid',
+  'true:false': 'focused',
+  'true:true': 'focused-invalid',
+} as const;
+
+/**
+ * Web variant — drops `useHover` and `useFocusRing` per the trigger-prune todo:
+ * neither emitted attribute has a consumer in `selectTriggerVariants`, and the
+ * web `useHover` re-renders on every pointer enter/leave. Hover is expressed via
+ * CSS `:hover` chains in CVA, not a JS tracker.
+ *
+ * The label-focus bridge is only registered when the host loses native
+ * label association — i.e. when `asChild` substitutes the rendered `<button>`
+ * with a non-labelable element. Otherwise `<label htmlFor>` handles the focus
+ * relationship natively.
+ */
+export function useSelectTrigger(
+  forwardedRef: ForwardedRef<unknown>,
+  options: UseSelectTriggerOptions,
+): UseSelectTriggerReturn {
+  const {
+    asChild,
+    isHovered: isHoveredProp,
+    isActive: isActiveProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    isDisabled: isDisabledProp,
+    ariaDescribedBy: ariaDescribedByProp,
+    onPress: consumerOnPress,
+    onPressIn: consumerOnPressIn,
+    onPressOut: consumerOnPressOut,
+    onHoverIn: consumerOnHoverIn,
+    onHoverOut: consumerOnHoverOut,
+    onFocus: consumerOnFocus,
+    onBlur: consumerOnBlur,
+    onKeyDown: consumerOnKeyDown,
+  } = options;
+
+  const {
+    open,
+    setOpen,
+    disabled: contextDisabled,
+    required: contextRequired,
+    invalid: contextInvalid,
+    readOnly: contextReadOnly,
+    triggerId,
+    contentId,
+    triggerRef,
+    activeValue,
+    accessibilityLabel,
+    ariaDescribedBy: ariaDescribedByFromField,
+  } = useSelectContext();
+
+  const field = useFormControlContext();
+
+  const disabled = contextDisabled || !!isDisabledProp;
+
+  const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+  const { isFocused, focusProps } = useFocus() as {
+    isFocused: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const [triggerFocused, setTriggerFocused] = useState(false);
+
+  const handlePress = useCallback(
+    (_e: GestureResponderEvent) => {
+      if (!disabled) {
+        setOpen(!open);
+      }
+    },
+    [disabled, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp': {
+          e.preventDefault();
+          setOpen(true);
+          break;
+        }
+      }
+    },
+    [disabled, setOpen],
+  );
+
+  const isLabelActive = Boolean(
+    (isFocusedProp || isFocused || triggerFocused || open) && !disabled,
+  );
+
+  useReportFormControlLabelFocus(isLabelActive);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setTriggerFocused(false);
+    }
+  }, [open]);
+
+  const interactionState = useMemo<InteractionState>(
+    () => ({
+      hover: !!isHoveredProp,
+      focus: !!(isFocusedProp || isFocused || open),
+      active: !!(isActiveProp || isActive),
+      disabled: !!disabled,
+      focusVisible: !!isFocusVisibleProp,
+    }),
+    [
+      isHoveredProp,
+      isFocusedProp,
+      isFocused,
+      isActiveProp,
+      isActive,
+      disabled,
+      isFocusVisibleProp,
+      open,
+    ],
+  );
+
+  /**
+   * `<button>` is HTML-labelable so `<label htmlFor>` works natively — no JS bridge needed.
+   * When `asChild` substitutes the host with a non-labelable element (e.g. `<div role="button">`),
+   * the bridge fills the gap so `Form.Label` can still focus the trigger via `field.inputRef`.
+   */
+  const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+  labelFocusGateRef.current = {
+    disabled: !!disabled,
+    readOnly: !!contextReadOnly,
+  };
+
+  const labelFocusBridge = useMemo<Focusable>(
+    () => ({
+      focus() {
+        const { disabled: isOff, readOnly: isRO } = labelFocusGateRef.current;
+        if (isOff || isRO) {
+          return;
+        }
+        const node = triggerRef.current as { focus?: () => void } | null;
+        if (node != null && typeof node.focus === 'function') {
+          node.focus();
+        }
+        setOpen(true);
+      },
+    }),
+    [setOpen, triggerRef],
+  );
+
+  const shouldMountLabelFocusBridge = !!asChild;
+
+  useLayoutEffect(() => {
+    if (!shouldMountLabelFocusBridge || !field.inputRef) {
+      return;
+    }
+    const r = field.inputRef;
+    r.current = labelFocusBridge;
+    return () => {
+      if (r.current === labelFocusBridge) {
+        r.current = null;
+      }
+    };
+  }, [shouldMountLabelFocusBridge, field.inputRef, labelFocusBridge]);
+
+  const mergedRef = mergeRefs(forwardedRef, triggerRef) as RefCallback<unknown>;
+
+  const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp].filter(Boolean).join(' ');
+
+  const ariaProps: SelectTriggerAriaProps = {
+    role: 'combobox',
+    'aria-label': accessibilityLabel,
+    'aria-haspopup': 'listbox',
+    'aria-expanded': open,
+    'aria-controls': contentId,
+    'aria-activedescendant': open && activeValue ? `${contentId}-option-${activeValue}` : undefined,
+    'aria-required': contextRequired || undefined,
+    'aria-invalid': contextInvalid || undefined,
+    'aria-readonly': contextReadOnly || undefined,
+    'aria-describedby': ariaDescribedBy || undefined,
+    id: triggerId,
+    disabled,
+  };
+
+  const fieldState =
+    FIELD_STATES[
+      `${interactionState.focus ? 'true' : 'false'}:${contextInvalid ? 'true' : 'false'}`
+    ];
+
+  const dataAttrValues: SelectTriggerDataAttrValues = {
+    focus: interactionState.focus,
+    active: interactionState.active,
+    disabled: interactionState.disabled,
+    required: !!contextRequired,
+    invalid: !!contextInvalid,
+    readonly: !!contextReadOnly,
+    state: open ? 'open' : 'closed',
+    fieldState,
+  };
+
+  const handlers: SelectTriggerHandlers = {
+    onPress: composeEventHandlers(consumerOnPress, handlePress) as SelectTriggerHandlers['onPress'],
+    onPressIn: composeEventHandlers(
+      consumerOnPressIn,
+      pressProps.onPressIn,
+    ) as SelectTriggerHandlers['onPressIn'],
+    onPressOut: composeEventHandlers(
+      consumerOnPressOut,
+      pressProps.onPressOut,
+    ) as SelectTriggerHandlers['onPressOut'],
+    onHoverIn: consumerOnHoverIn ?? (() => undefined),
+    onHoverOut: consumerOnHoverOut ?? (() => undefined),
+    onFocus: composeEventHandlers(composeEventHandlers(consumerOnFocus, focusProps.onFocus), () =>
+      setTriggerFocused(true),
+    ),
+    onBlur: composeEventHandlers(composeEventHandlers(consumerOnBlur, focusProps.onBlur), () =>
+      setTriggerFocused(false),
+    ),
+    onKeyDown: composeEventHandlers(
+      consumerOnKeyDown,
+      handleKeyDown,
+    ) as SelectTriggerHandlers['onKeyDown'],
+  };
+
+  return {
+    ariaProps,
+    dataAttrValues,
+    interactionState,
+    mergedRef,
+    handlers,
+    isLabelActive,
+    open,
+    labelFocusBridge,
+  };
+}
+
+export type {
+  SelectTriggerAriaProps,
+  SelectTriggerDataAttrValues,
+  SelectTriggerHandlers,
+  UseSelectTriggerOptions,
+  UseSelectTriggerReturn,
+};

package/src/slot/index.tsx

@@ -0,0 +1,162 @@
+/* https://rn-primitives.vercel.app/slot */
+
+import * as React from 'react';
+import {
+  type PressableStateCallbackType,
+  type ImageStyle as RNImageStyle,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+} from 'react-native';
+
+export function Slot<T extends React.ElementType>(props: React.ComponentPropsWithRef<T>) {
+  const { children, ref: forwardedRef, ...restOfProps } = props;
+
+  if (!React.isValidElement(children)) {
+    console.log('Slot - Invalid asChild element', children);
+    return null;
+  }
+
+  if (isTextChildren(children)) {
+    console.log('Slot - Text children are not supported', children);
+    return null;
+  }
+
+  const childrenProps = (children.props as Record<string, any>) ?? {};
+
+  if (children.type === React.Fragment) {
+    return (
+      <>
+        {React.Children.toArray(childrenProps.children).map((child): any =>
+          React.isValidElement(child)
+            ? Slot({ ...restOfProps, ref: forwardedRef, children: child })
+            : child,
+        )}
+      </>
+    );
+  }
+
+  const { ref: childRef, ...childProps } = childrenProps;
+
+  return React.cloneElement(children, {
+    ...mergeProps(restOfProps, childProps),
+    ref: forwardedRef ? composeRefs(forwardedRef, childRef) : childRef,
+  } as unknown as Partial<React.ComponentPropsWithRef<T>>);
+}
+
+Slot.displayName = 'Slot';
+
+// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+function setRef<T>(ref: React.Ref<T> | undefined, value: T | null): (() => void) | void {
+  if (typeof ref === 'function') {
+    const cleanup = ref(value);
+
+    if (typeof cleanup === 'function') {
+      return cleanup;
+    }
+
+    return;
+  }
+
+  if (ref != null) {
+    ref.current = value;
+    return () => {
+      ref.current = null;
+    };
+  }
+}
+
+function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
+  let cleanups: (() => void)[] = [];
+
+  return (node) => {
+    cleanups.forEach((cleanup) => cleanup());
+    cleanups = [];
+
+    if (node == null) {
+      refs.forEach((ref) => {
+        if (typeof ref === 'function') {
+          ref(null);
+        } else if (ref != null) {
+          ref.current = null;
+        }
+      });
+      return;
+    }
+
+    cleanups = refs
+      .map((ref) => setRef(ref, node))
+      .filter((cleanup): cleanup is () => void => cleanup != null);
+  };
+}
+
+type AnyProps = Record<string, any>;
+
+// TODO: Compare with mergeProps from @react-aria/utils
+function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = combineStyles(slotPropValue, childPropValue);
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}
+
+type PressableStyle = RNPressableProps['style'];
+type ImageStyle = StyleProp<RNImageStyle>;
+type Style = PressableStyle | ImageStyle;
+
+function combineStyles(slotStyle?: Style, childValue?: Style) {
+  if (typeof slotStyle === 'function' && typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return [slotStyle(state), childValue(state)];
+    };
+  }
+  if (typeof slotStyle === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return childValue ? [slotStyle(state), childValue] : slotStyle(state);
+    };
+  }
+  if (typeof childValue === 'function') {
+    return (state: PressableStateCallbackType) => {
+      return slotStyle ? [slotStyle, childValue(state)] : childValue(state);
+    };
+  }
+
+  if (slotStyle && childValue) {
+    return [slotStyle, childValue];
+  }
+
+  return slotStyle ?? childValue;
+}
+
+export function isTextChildren(
+  children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode),
+) {
+  return Array.isArray(children)
+    ? children.every((child) => typeof child === 'string')
+    : typeof children === 'string';
+}

package/src/switch/index.ts

@@ -1,16 +1,7 @@
-import type React from 'react';
-import { createSwitchRoot } from './createSwitchRoot';
-import type { ISwitchComponentType } from './types';
-
-export type { ISwitchProps, ISwitchComponentType, IInterfaceSwitchProps } from './types';
-
-export function createSwitch<T, R = unknown>({
-  Root,
-}: {
-  Root: React.ComponentType<T>;
-}): ISwitchComponentType<T, R> {
-  const Switch = createSwitchRoot(Root);
-
-  Switch.displayName = 'Switch';
-  return Switch as ISwitchComponentType<T, R>;
-}
+export type {
+  ISwitchProps,
+  IInterfaceSwitchProps,
+  IUseSwitchReturn,
+  IUseSwitchState,
+} from './types';
+export { useSwitch } from './useSwitch';

package/src/switch/types.ts

@@ -1,4 +1,5 @@
-import type React from 'react';
+import type { RefObject } from 'react';
+import type { useHover } from '@react-native-aria/interactions';
 
 export interface IInterfaceSwitchProps {
   /**
@@ -22,21 +23,45 @@ export interface IInterfaceSwitchProps {
    */
   disabled?: boolean;
   /**
-   * If true, the checkbox will be initially checked.
+   * If true, the switch will be initially checked.
    */
   defaultValue?: boolean;
   /**
    * If true, set the switch to the invalid state.
    */
   isInvalid?: boolean;
-  /**
-   * If true, the switch will be hovered.
-   */
-  isHovered?: boolean;
 }
 
-export type ISwitchComponentType<T, R = unknown> = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<T & IInterfaceSwitchProps> & React.RefAttributes<R>
->;
-
 export type ISwitchProps = IInterfaceSwitchProps;
+
+export interface IUseSwitchState {
+  /** Resolved checked state (controlled value, falls back to internal toggle state). */
+  checked: boolean;
+  /** Resolved disabled state (prop, FormControl context, or `disabled` alias). */
+  isDisabled: boolean;
+  /** Resolved invalid state (prop or FormControl context). */
+  isInvalid: boolean;
+  /** True while a pointer is hovering the host element (web only). */
+  isHovered: boolean;
+  /** True when the host element has visible keyboard focus. */
+  isFocusVisible: boolean;
+}
+
+export interface IUseSwitchReturn extends IUseSwitchState {
+  /** Toggle the checked state. Pass to the host element's change/press handler. */
+  setChecked: (value: boolean) => void;
+  /** Hover interaction handlers from `@react-native-aria/interactions`. */
+  hoverProps: ReturnType<typeof useHover>['hoverProps'];
+  /**
+   * Focus-ring interaction handlers from `@react-native-aria/focus`.
+   *
+   * The native `useFocusRing` declares `focusProps: {}` in its types, but the
+   * runtime (and the web variant) emit `onFocus`/`onBlur`, so we widen the
+   * shape here for the styled-layer host to wire them safely.
+   */
+  focusProps: { onFocus?: () => void; onBlur?: () => void };
+  /** Platform-aware `data-*` attributes for interaction state (Standard 1). */
+  dataAttrs: Record<string, unknown>;
+  /** Ref to attach to the host element so the hover tracker can observe it. */
+  hostRef: RefObject<unknown>;
+}

package/src/switch/useSwitch.ts

@@ -0,0 +1,75 @@
+import { useCallback, useRef } from 'react';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ISwitchProps, IUseSwitchReturn } from './types';
+
+/**
+ * Headless behavioral primitive for `Switch`.
+ *
+ * Owns the controlled/uncontrolled toggle state, ARIA `role="switch"` semantics
+ * (consumers must wire `aria-checked`/`accessibilityRole` to the host element they
+ * render), and interaction tracking (hover, focus-visible). Surfaces a
+ * platform-aware `dataAttrs` object so the styled layer can emit interaction-state
+ * `data-*` attributes (Standard 1) without re-implementing the toggle machinery.
+ *
+ * Standards mapping (per `.cursor/plans/primitive_design_standards_0d0ca4b1.plan.md`):
+ *   - Standard 3 #1 — controlled state via `useToggleState`.
+ *   - Standard 3 #2 — `role="switch"` semantics (consumer wires to host).
+ *
+ * The styled layer renders the host element (`RNSwitch` on native, a custom
+ * `Pressable` + `View` toggle on web) and is the sole owner of className/styling
+ * machinery — primitives never carry Uniwind className passthrough.
+ */
+export function useSwitch(props: ISwitchProps = {}): IUseSwitchReturn {
+  const { disabled, isDisabled, isChecked, isInvalid, defaultValue, value, onValueChange } = props;
+
+  const formControlContext = useFormControlContext();
+  const controlledValue = value ?? isChecked;
+
+  const state = useToggleState({
+    defaultSelected: defaultValue ?? false,
+    isSelected: controlledValue,
+    onChange: onValueChange,
+  });
+
+  const checked = controlledValue ?? state.isSelected;
+
+  const hostRef = useRef<unknown>(null);
+  const { isHovered, hoverProps } = useHover({}, hostRef);
+  const { isFocusVisible, focusProps } = useFocusRing() as {
+    isFocusVisible: boolean;
+    focusProps: { onFocus?: () => void; onBlur?: () => void };
+  };
+
+  const isDisabledResolved = Boolean(disabled || isDisabled || formControlContext.isDisabled);
+  const isInvalidResolved = Boolean(isInvalid || formControlContext.isInvalid);
+
+  const setChecked = useCallback(
+    (next: boolean) => {
+      state.setSelected(next);
+    },
+    [state],
+  );
+
+  return {
+    checked,
+    isDisabled: isDisabledResolved,
+    isInvalid: isInvalidResolved,
+    isHovered,
+    isFocusVisible,
+    setChecked,
+    hoverProps,
+    focusProps,
+    dataAttrs: dataAttributes({
+      hover: isHovered,
+      disabled: isDisabledResolved,
+      invalid: isInvalidResolved,
+      checked,
+      focusVisible: isFocusVisible,
+    }),
+    hostRef,
+  };
+}