@cdx-ui/primitives 0.0.1-alpha.4 → 0.0.1-alpha.41

package/src/select/createSelectRoot.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { forwardRef, useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useControllableState, useFormControl } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectContext } from './context';
+import { SelectProvider } from './context';
 import type { ISelectProps } from './types';
 
 export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
@@ -68,9 +68,11 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
       const [activeValue, setActiveValue] = useState<string | undefined>(undefined);
 
       const triggerRef = useRef<any>(null);
-      const id = useId();
-      const triggerId = `select-trigger-${id}`;
-      const contentId = `select-content-${id}`;
+      const reactId = useId();
+      /** Align with `useFormControl` default id (`${field.id}-input`) when inside `Form.Field`. */
+      const triggerId = formControlProps.id ?? `select-trigger-${reactId}`;
+      const contentId = `select-content-${reactId}`;
+      const ariaDescribedBy = formControlProps['aria-describedby'];
 
       const contextValue = useMemo(
         () => ({
@@ -90,6 +92,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           activeValue,
           setActiveValue,
           accessibilityLabel,
+          ariaDescribedBy,
         }),
         [
           open,
@@ -106,11 +109,12 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           triggerId,
           activeValue,
           accessibilityLabel,
+          ariaDescribedBy,
         ],
       );
 
       return (
-        <SelectContext.Provider value={contextValue}>
+        <SelectProvider value={contextValue}>
           <BaseRoot
             ref={ref}
             {...(props as T)}
@@ -124,7 +128,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           >
             {children}
           </BaseRoot>
-        </SelectContext.Provider>
+        </SelectProvider>
       );
     },
   );

package/src/select/createSelectTrigger.tsx

@@ -1,11 +1,12 @@
 import type React from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
-import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { composeEventHandlers, mergeRefs, useFormControlContext } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectTriggerContext, useSelectContext } from './context';
+import { SelectTriggerProvider, useSelectContext } from './context';
 import type { ISelectTriggerProps } from './types';
 
 export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
@@ -18,23 +19,10 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         isFocused: isFocusedProp,
         isFocusVisible: isFocusVisibleProp,
         isDisabled: isDisabledProp,
+        'aria-describedby': ariaDescribedByProp,
         ...props
       }: Omit<ISelectTriggerProps, 'children'> & {
-        children?:
-          | (({
-              hovered,
-              pressed,
-              focused,
-              focusVisible,
-              disabled,
-            }: {
-              hovered?: boolean;
-              pressed?: boolean;
-              focused?: boolean;
-              focusVisible?: boolean;
-              disabled?: boolean;
-            }) => React.ReactNode)
-          | React.ReactNode;
+        children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
       },
       ref?: any,
     ) => {
@@ -50,8 +38,11 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         triggerRef,
         activeValue,
         accessibilityLabel,
+        ariaDescribedBy: ariaDescribedByFromField,
       } = useSelectContext();
 
+      const field = useFormControlContext();
+
       const disabled = contextDisabled || !!isDisabledProp;
 
       const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();
@@ -63,7 +54,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
 
       const handlePress = useCallback(
         (e: GestureResponderEvent | KeyboardEvent) => {
-          if (e.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
+          if (e?.type === 'keyup' && (e as KeyboardEvent).key === 'Enter') {
             return;
           }
           if (!disabled) {
@@ -114,7 +105,53 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         ],
       );
 
-      const mergedRef = mergeRefs(ref, triggerRef);
+      /**
+       * Native: `Pressable` has no usable programmatic `.focus()` (unlike `TextInput`).
+       * `Form.Label` calls `focusInput()` → we register a bridge on `field.inputRef` that tries
+       * native focus, then opens the list (expected “tap label” behavior for a select).
+       */
+      const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+      labelFocusGateRef.current = {
+        disabled: !!disabled,
+        readOnly: !!contextReadOnly,
+      };
+
+      const labelFocusBridge = useMemo(
+        () => ({
+          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],
+      );
+
+      useLayoutEffect(() => {
+        if (Platform.OS === 'web' || !field.inputRef) {
+          return;
+        }
+        const r = field.inputRef;
+        r.current = labelFocusBridge as unknown as typeof r.current;
+        return () => {
+          if (r.current === labelFocusBridge) {
+            r.current = null;
+          }
+        };
+      }, [field.inputRef, labelFocusBridge]);
+
+      const mergedRef =
+        Platform.OS === 'web' ? mergeRefs(ref, triggerRef) : mergeRefs(ref, triggerRef);
+
+      const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp]
+        .filter(Boolean)
+        .join(' ');
 
       const webKeyboardProps =
         Platform.OS === 'web'
@@ -122,7 +159,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
           : {};
 
       return (
-        <SelectTriggerContext.Provider value={interactionState}>
+        <SelectTriggerProvider value={interactionState}>
           <BaseTrigger
             ref={mergedRef}
             role="combobox"
@@ -136,7 +173,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             aria-required={contextRequired || undefined}
             aria-invalid={contextInvalid || undefined}
             aria-readonly={contextReadOnly || undefined}
-            id={triggerId}
+            aria-describedby={ariaDescribedBy || undefined}
             {...dataAttributes({
               hover: interactionState.hover,
               focus: interactionState.focus,
@@ -151,6 +188,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             })}
             disabled={disabled}
             {...(props as T)}
+            id={triggerId}
             onPress={composeEventHandlers(props?.onPress, handlePress)}
             onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
             onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
@@ -172,21 +210,9 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
             )}
             {...webKeyboardProps}
           >
-            {/* TODO: Align render-function children convention with Button — Button
-                passes raw hook values (isHovered, isFocused, etc.) while this
-                passes merged interaction state (isHoveredProp || isHovered). Pick
-                one convention and apply to both. */}
-            {typeof children === 'function'
-              ? children({
-                  hovered: interactionState.hover,
-                  focused: interactionState.focus,
-                  pressed: interactionState.active,
-                  disabled: interactionState.disabled,
-                  focusVisible: interactionState.focusVisible,
-                })
-              : children}
+            {typeof children === 'function' ? children(interactionState) : children}
           </BaseTrigger>
-        </SelectTriggerContext.Provider>
+        </SelectTriggerProvider>
       );
     },
   );

package/src/select/types.ts

@@ -1,16 +1,7 @@
 import type { PropsWithoutRef, ReactNode, RefAttributes, RefObject } from 'react';
 import type { PressableProps, ViewProps } from 'react-native';
 import type { EntryOrExitLayoutType } from 'react-native-reanimated';
-
-// TODO: Consolidate with button/types.ts
-
-export interface InteractionState {
-  hover: boolean;
-  focus: boolean;
-  active: boolean;
-  disabled: boolean;
-  focusVisible: boolean;
-}
+import type { InteractionState } from '../types';
 
 export interface SelectItemInteractionState extends InteractionState {
   highlighted: boolean;
@@ -40,6 +31,8 @@ export interface ISelectTriggerProps extends PressableProps {
   isFocused?: boolean;
   isFocusVisible?: boolean;
   isDisabled?: boolean;
+  /** @platform web — merged with form field helper/error ids */
+  'aria-describedby'?: string;
 }
 
 export interface ISelectValueProps {
@@ -97,6 +90,8 @@ export interface SelectContextValue {
   activeValue: string | undefined;
   setActiveValue: (value: string | undefined) => void;
   accessibilityLabel: string | undefined;
+  /** From `Form.Field` via `useFormControl` on the select root (helper/error `aria-describedby`). */
+  ariaDescribedBy?: string;
 }
 
 export type ISelectComponentType<

package/src/switch/createSwitchRoot.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from 'react';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import { useFormControlContext, mergeRefs } from '@cdx-ui/utils';
+import type { ISwitchProps } from './types';
+
+type MergeableRef = Parameters<typeof mergeRefs>[0];
+
+export const createSwitchRoot = <T, R = unknown>(BaseSwitch: React.ComponentType<T>) =>
+  forwardRef<R, ISwitchProps>(
+    (
+      {
+        disabled,
+        isDisabled,
+        isChecked,
+        isInvalid,
+        defaultValue,
+        value,
+        onValueChange,
+        ...props
+      }: ISwitchProps,
+      ref: React.ForwardedRef<R>,
+    ) => {
+      const formControlContext = useFormControlContext();
+      const combinedProps = { ...formControlContext, ...props };
+      const controlledValue = value ?? isChecked;
+      const state = useToggleState({
+        defaultSelected: defaultValue ?? false,
+        isSelected: controlledValue,
+        onChange: onValueChange,
+      });
+
+      const checked = controlledValue ?? state.isSelected;
+
+      const _ref = React.useRef(null);
+      const { isHovered } = useHover({}, _ref);
+      const { isFocusVisible, focusProps } = useFocusRing();
+
+      const mergedRef = mergeRefs(ref as MergeableRef, _ref);
+
+      const isDisabledResolved = disabled || isDisabled || combinedProps.isDisabled;
+      const isInvalidResolved = isInvalid || combinedProps.isInvalid;
+
+      return (
+        <BaseSwitch
+          states={{
+            hover: isHovered,
+            disabled: isDisabledResolved,
+            invalid: isInvalidResolved,
+            checked,
+            focusVisible: isFocusVisible,
+          }}
+          dataSet={{
+            hover: isHovered ? 'true' : 'false',
+            disabled: isDisabledResolved ? 'true' : 'false',
+            invalid: isInvalidResolved ? 'true' : 'false',
+            checked: checked ? 'true' : 'false',
+            'focus-visible': isFocusVisible ? 'true' : 'false',
+          }}
+          disabled={isDisabledResolved}
+          {...focusProps}
+          onValueChange={(val: boolean) => {
+            state.setSelected(val);
+          }}
+          value={checked}
+          {...(combinedProps as T)}
+          ref={mergedRef as React.Ref<R>}
+        />
+      );
+    },
+  );

package/src/switch/index.ts

@@ -0,0 +1,16 @@
+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>;
+}

package/src/switch/types.ts

@@ -0,0 +1,42 @@
+import type React from 'react';
+
+export interface IInterfaceSwitchProps {
+  /**
+   * Callback invoked when the switch value changes.
+   */
+  onValueChange?: (value: boolean) => void;
+  /**
+   * If true, set the Switch to the checked state.
+   */
+  isChecked?: boolean;
+  /**
+   * The current value of the switch.
+   */
+  value?: boolean;
+  /**
+   * If true, the switch will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, the switch will be disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If true, the checkbox 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;

package/src/types.ts

@@ -0,0 +1,7 @@
+export interface InteractionState {
+  hover: boolean;
+  focus: boolean;
+  active: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+}

package/src/utils/createPortal.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { Platform } from 'react-native';
+
+type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+
+/**
+ * A reference to `ReactDOM.createPortal` on web, `undefined` on native.
+ *
+ * Loaded lazily via `require` so that native bundles never reference
+ * `react-dom`, which would cause a build error on native platforms.
+ */
+export const createPortalFn: CreatePortalFn | undefined = (() => {
+  if (Platform.OS !== 'web') return undefined;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return (require('react-dom') as { createPortal: CreatePortalFn }).createPortal;
+  } catch {
+    return undefined;
+  }
+})();

package/src/utils/dataAttributes.web.ts

@@ -17,10 +17,8 @@ export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
   const dataSet: Record<string, boolean | string> = {};
   for (const key in attrs) {
     const value = attrs[key];
-    if (value === undefined) {
-      continue;
-    }
-    dataSet[key] = value;
+
+    dataSet[key] = value ?? false;
   }
   return { dataSet };
 }

package/lib/commonjs/input/createInputIcon.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createInputIcon = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const createInputIcon = BaseInputIcon => /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseInputIcon, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-exports.createInputIcon = createInputIcon;
-//# sourceMappingURL=createInputIcon.js.map

package/lib/commonjs/input/createInputIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_jsxRuntime","createInputIcon","BaseInputIcon","forwardRef","children","props","ref","jsx","exports"],"sourceRoot":"../../../src","sources":["input/createInputIcon.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAmC,IAAAC,WAAA,GAAAD,OAAA;AAG5B,MAAME,eAAe,GAAQC,aAAqC,iBACvE,IAAAC,iBAAU,EAA2B,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACpE,oBACE,IAAAN,WAAA,CAAAO,GAAA,EAACL,aAAa;IAACI,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAChCA;EAAQ,CACI,CAAC;AAEpB,CAAC,CAAC;AAACI,OAAA,CAAAP,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/module/input/createInputIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","jsx","_jsx","createInputIcon","BaseInputIcon","children","props","ref"],"sourceRoot":"../../../src","sources":["input/createInputIcon.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnC,OAAO,MAAMC,eAAe,GAAQC,aAAqC,iBACvEJ,UAAU,CAA2B,CAAC;EAAEK,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACpE,oBACEL,IAAA,CAACE,aAAa;IAACG,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAChCA;EAAQ,CACI,CAAC;AAEpB,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/input/createInputIcon.d.ts

@@ -1,4 +0,0 @@
-import type React from 'react';
-import type { IInputIconProps } from './types';
-export declare const createInputIcon: <T>(BaseInputIcon: React.ComponentType<T>) => React.ForwardRefExoticComponent<IInputIconProps & React.RefAttributes<unknown>>;
-//# sourceMappingURL=createInputIcon.d.ts.map

package/lib/typescript/input/createInputIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createInputIcon.d.ts","sourceRoot":"","sources":["../../../src/input/createInputIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,eAAe,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,oFAOrE,CAAC"}

package/src/input/createInputIcon.tsx

@@ -1,12 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import type { IInputIconProps } from './types';
-
-export const createInputIcon = <T,>(BaseInputIcon: React.ComponentType<T>) =>
-  forwardRef<unknown, IInputIconProps>(({ children, ...props }, ref) => {
-    return (
-      <BaseInputIcon ref={ref} {...(props as T)}>
-        {children}
-      </BaseInputIcon>
-    );
-  });