@cdx-ui/primitives 0.0.1-alpha.2 → 0.0.1-alpha.21

package/src/select/context.tsx

@@ -1,56 +1,21 @@
-import { createContext, useContext } from 'react';
-import type { InteractionState, SelectContextValue, SelectItemInteractionState } from './types';
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+import type { SelectContextValue, SelectItemInteractionState } from './types';
 
-const defaultContextValue: SelectContextValue = {
-  open: false,
-  items: [],
-  setOpen: () => {},
-  value: undefined,
-  onValueChange: () => {},
-  disabled: false,
-  required: false,
-  invalid: false,
-  readOnly: false,
-  native: false,
-  triggerRef: { current: null },
-  contentId: '',
-  triggerId: '',
-  activeValue: undefined,
-  setActiveValue: () => {}, // TODO: Is this needed? At the very least it could be moved to SelectContent
-  accessibilityLabel: undefined,
-};
-
-export const SelectContext = createContext<SelectContextValue>(defaultContextValue);
-
-export const useSelectContext = () => useContext(SelectContext);
+export const [SelectProvider, useSelectContext] =
+  createContext<SelectContextValue>('SelectContext');
 
 /**
  * Propagates the trigger's interaction state (hover, focus, active, etc.) to
  * child components like SelectValue and SelectIcon so they can apply matching
  * data-attribute styles.
  */
-export const SelectTriggerContext = createContext<InteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-});
-
-export const useSelectTriggerContext = () => useContext(SelectTriggerContext);
+export const [SelectTriggerProvider, useSelectTriggerContext] =
+  createContext<InteractionState>('SelectTriggerContext');
 
 /**
  * Propagates the item's interaction and selection state (hover, focus, active,
  * highlighted, checked, etc.) to child components like SelectItemLabel.
  */
-export const SelectItemContext = createContext<SelectItemInteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-  highlighted: false,
-  checked: false,
-});
-
-export const useSelectItemContext = () => useContext(SelectItemContext);
+export const [SelectItemProvider, useSelectItemContext] =
+  createContext<SelectItemInteractionState>('SelectItemContext');

package/src/select/createSelectItem.tsx

@@ -4,7 +4,7 @@ import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { dataAttributes } from '../utils/dataAttributes';
-import { SelectItemContext, useSelectContext } from './context';
+import { SelectItemProvider, useSelectContext } from './context';
 import type { ISelectItemProps } from './types';
 
 export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
@@ -74,7 +74,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
       );
 
       return (
-        <SelectItemContext.Provider value={interactionState}>
+        <SelectItemProvider value={interactionState}>
           <BaseItem
             ref={ref}
             role="option"
@@ -115,7 +115,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
           >
             {children}
           </BaseItem>
-        </SelectItemContext.Provider>
+        </SelectItemProvider>
       );
     },
   );

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>) =>
@@ -110,7 +110,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
       );
 
       return (
-        <SelectContext.Provider value={contextValue}>
+        <SelectProvider value={contextValue}>
           <BaseRoot
             ref={ref}
             {...(props as T)}
@@ -124,7 +124,7 @@ export const createSelectRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
           >
             {children}
           </BaseRoot>
-        </SelectContext.Provider>
+        </SelectProvider>
       );
     },
   );

package/src/select/createSelectTrigger.tsx

@@ -4,8 +4,9 @@ import { type GestureResponderEvent, Platform } from 'react-native';
 import { composeEventHandlers, mergeRefs } 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>) =>
@@ -20,21 +21,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
         isDisabled: isDisabledProp,
         ...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,
     ) => {
@@ -122,7 +109,7 @@ export const createSelectTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
           : {};
 
       return (
-        <SelectTriggerContext.Provider value={interactionState}>
+        <SelectTriggerProvider value={interactionState}>
           <BaseTrigger
             ref={mergedRef}
             role="combobox"
@@ -172,21 +159,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;

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/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>
-    );
-  });