@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.120

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,
+  };
+}

package/src/tile/TileGroup.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { TileGroupContextProvider } from './context';
+import type { ITileGroupProps, TileGroupType } from './types';
+
+/**
+ * Internal widening of the public discriminated union: the runtime accepts any value
+ * shape and reads `type` to decide branch behavior. The public API stays narrow.
+ */
+type WidenedTileGroupProps = ViewProps & {
+  asChild?: boolean;
+  type: TileGroupType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  max?: number;
+  isDisabled?: boolean;
+  'aria-label'?: string;
+};
+
+export type TileGroupProps = ITileGroupProps;
+
+export const TileGroup = forwardRef<ComponentRef<typeof View>, TileGroupProps>((props, ref) => {
+  const {
+    asChild = false,
+    children,
+    type,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    max: maxProp,
+    isDisabled = false,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props as WidenedTileGroupProps;
+
+  const max = maxProp ?? Number.POSITIVE_INFINITY;
+
+  const defaultProp =
+    defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
+
+  const [state, setState] = useControllableState<string | string[] | undefined>({
+    prop: valueProp,
+    defaultProp,
+    onChange: (next) => {
+      if (next !== undefined) {
+        onValueChange?.(next);
+      }
+    },
+  });
+
+  const isSelected = useCallback(
+    (tileValue: string) => {
+      if (type === 'single') {
+        return state === tileValue;
+      }
+      return Array.isArray(state) && state.includes(tileValue);
+    },
+    [type, state],
+  );
+
+  const isTileDisabledByGroup = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return true;
+      }
+      if (type !== 'multiple') {
+        return false;
+      }
+      const arr = Array.isArray(state) ? state : [];
+      if (arr.length < max) {
+        return false;
+      }
+      return !arr.includes(tileValue);
+    },
+    [isDisabled, type, state, max],
+  );
+
+  const toggleValue = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single') {
+        if (state === tileValue) {
+          return;
+        }
+        setState(tileValue);
+        return;
+      }
+      const arr = Array.isArray(state) ? [...state] : [];
+      const idx = arr.indexOf(tileValue);
+      if (idx >= 0) {
+        arr.splice(idx, 1);
+        setState(arr);
+      } else if (arr.length < max) {
+        arr.push(tileValue);
+        setState(arr);
+      }
+    },
+    [isDisabled, type, state, setState, max],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      type,
+      value: state,
+      toggleValue,
+      isSelected,
+      isTileDisabledByGroup,
+      isGroupDisabled: isDisabled,
+      max,
+    }),
+    [type, state, toggleValue, isSelected, isTileDisabledByGroup, isDisabled, max],
+  );
+
+  const role = type === 'single' ? 'radiogroup' : 'group';
+  const Comp = asChild ? Slot : View;
+
+  return (
+    <TileGroupContextProvider value={contextValue}>
+      <Comp
+        ref={ref}
+        role={role}
+        {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
+        {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
+        {...(rest as ViewProps)}
+      >
+        {children}
+      </Comp>
+    </TileGroupContextProvider>
+  );
+});
+
+TileGroup.displayName = 'TileGroup';

package/src/tile/TileRoot.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { TileProvider, useOptionalTileGroupContext } from './context';
+import type { ITileProps, ITilePressablePassthrough } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignSelf: 'stretch' as const,
+  alignItems: 'center' as const,
+};
+
+export interface TileRootProps extends ITileProps {}
+
+export const TileRoot = forwardRef<ComponentRef<typeof Pressable>, TileRootProps>(
+  (
+    {
+      asChild = false,
+      value,
+      disabled: disabledProp = false,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useOptionalTileGroupContext();
+
+    const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
+      prop: controlledSelected,
+      defaultProp: defaultSelected ?? false,
+      onChange: (next) => {
+        onSelectedChange?.(next);
+      },
+    });
+
+    const isSelected = group ? group.isSelected(value) : standaloneSelected;
+    const disabledByGroup = group ? group.isTileDisabledByGroup(value) : false;
+    const isDisabled = disabledByGroup || disabledProp;
+    const cannotToggle = isDisabled;
+
+    const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled: cannotToggle });
+    const { hoverProps, isHovered } = useHover();
+
+    // Standalone tiles use checkbox semantics (independent on/off toggle).
+    const selectionType = group ? group.type : 'multiple';
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+        ...(selectionType === 'single' ? { selected: isSelected } : { checked: isSelected }),
+      }),
+      [isDisabled, isSelected, selectionType],
+    );
+
+    const tileContext = useMemo(
+      () => ({ value, isSelected, isDisabled, selectionType }),
+      [value, isSelected, isDisabled, selectionType],
+    );
+
+    const passthrough = rest as ITilePressablePassthrough;
+
+    const composedOnPress = composeEventHandlers(onPress, () => {
+      if (cannotToggle) {
+        return;
+      }
+      if (group) {
+        group.toggleValue(value);
+      } else {
+        setStandaloneSelected(!standaloneSelected);
+      }
+    });
+
+    const role = selectionType === 'single' ? 'radio' : 'checkbox';
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <TileProvider value={tileContext}>
+        <Comp
+          ref={ref}
+          accessibilityRole={role}
+          role={role}
+          accessibilityState={accessibilityState}
+          aria-checked={isSelected}
+          {...(isDisabled ? { 'aria-disabled': true as const } : {})}
+          disabled={isDisabled}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              state: isSelected ? 'selected' : 'unselected',
+              disabled: isDisabled,
+              active: isPressed,
+              hover: isHovered,
+              focus: isFocused,
+              focusVisible: isFocusVisible,
+            }),
+          )}
+          style={[rowStyle, style]}
+          onPress={isDisabled ? undefined : composedOnPress}
+          onPressIn={composeEventHandlers(passthrough.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(passthrough.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(passthrough.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(passthrough.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </TileProvider>
+    );
+  },
+);
+
+TileRoot.displayName = 'TileRoot';

package/src/tile/context.tsx

@@ -0,0 +1,23 @@
+import { createContext as createReactContext, useContext } from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ITileContextValue, ITileGroupContextValue } from './types';
+
+// Per-tile subtree (selection-aware slots, indicator, etc.)
+export const [TileProvider, useTileContext] = createContext<ITileContextValue>('TileContext');
+
+// Per-group subtree (optional — standalone tiles have no provider)
+const TileGroupContext = createReactContext<ITileGroupContextValue | null>(null);
+
+export const TileGroupContextProvider = TileGroupContext.Provider;
+
+export function useTileGroupContext(): ITileGroupContextValue {
+  const ctx = useContext(TileGroupContext);
+  if (!ctx) {
+    throw new Error('Tile must be used within Tile.Group');
+  }
+  return ctx;
+}
+
+export function useOptionalTileGroupContext(): ITileGroupContextValue | null {
+  return useContext(TileGroupContext);
+}

package/src/tile/index.ts

@@ -0,0 +1,18 @@
+export type {
+  ITileContextValue,
+  ITileGroupMultipleProps,
+  ITileGroupProps,
+  ITileGroupSingleProps,
+  ITileGroupContextValue,
+  ITileIndicatorProps,
+  ITileLeadingSlotProps,
+  ITilePressablePassthrough,
+  ITileProps,
+  ITileTrailingSlotProps,
+  TileGroupType,
+  TileGroupValue,
+} from './types';
+
+export { TileProvider, useTileContext } from './context';
+export { TileRoot, type TileRootProps } from './TileRoot';
+export { TileGroup, type TileGroupProps } from './TileGroup';