@cdx-ui/primitives 0.0.1-alpha.1 → 0.0.1-alpha.10

package/src/checkbox/useCheckboxRoot.ts

@@ -0,0 +1,85 @@
+import { useContext, useRef } from 'react';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useCheckbox } from '@react-native-aria/checkbox';
+import { useHover } from '@react-native-aria/interactions';
+import { useToggleState } from '@react-stately/toggle';
+import { CheckboxGroupContext } from './context';
+import type { ICheckboxProps } from './types';
+
+interface UseCheckboxRootOptions {
+  useInputRefForAria?: boolean;
+}
+
+export function useCheckboxRoot(
+  props: ICheckboxProps,
+  ref?: React.Ref<unknown>,
+  { useInputRefForAria = false }: UseCheckboxRootOptions = {},
+) {
+  const formControlContext = useFormControlContext();
+
+  const { isInvalid, isReadOnly, isIndeterminate, ...combinedProps } = {
+    ...formControlContext,
+    ...props,
+  };
+
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+
+  const state = useToggleState({
+    ...combinedProps,
+    defaultSelected: props.defaultIsChecked,
+    isSelected: props.isChecked,
+  });
+
+  const rootRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const mergedRootRef = mergeRefs(ref as any, rootRef as any);
+  const ariaLabel = combinedProps['aria-label'] || combinedProps.value || 'Checkbox';
+
+  const groupToggleState = useToggleState(
+    checkboxGroupContext
+      ? {
+          isReadOnly: isReadOnly || checkboxGroupContext.state.isReadOnly,
+          isSelected: checkboxGroupContext.state.isSelected(combinedProps.value),
+          onChange(isSelected: boolean) {
+            if (isSelected) {
+              checkboxGroupContext.state.addValue(combinedProps.value);
+            } else {
+              checkboxGroupContext.state.removeValue(combinedProps.value);
+            }
+            combinedProps.onChange?.(isSelected);
+          },
+        }
+      : { isSelected: false },
+  );
+
+  const { inputProps: groupItemInputProps } = useCheckbox(
+    {
+      ...combinedProps,
+      'aria-label': ariaLabel,
+      ...(checkboxGroupContext && {
+        isReadOnly: isReadOnly || checkboxGroupContext.state.isReadOnly,
+        isDisabled: combinedProps.isDisabled || checkboxGroupContext.state.isDisabled,
+      }),
+    } as any,
+    checkboxGroupContext ? groupToggleState : state,
+    (useInputRefForAria ? inputRef : rootRef) as any,
+  );
+
+  const { checked: isChecked, disabled: isDisabled } = groupItemInputProps;
+
+  const { hoverProps, isHovered } = useHover({}, rootRef);
+
+  return {
+    combinedProps,
+    isInvalid,
+    isReadOnly,
+    isIndeterminate,
+    groupItemInputProps,
+    isChecked,
+    isDisabled,
+    isHovered,
+    hoverProps,
+    mergedRef: mergedRootRef,
+    inputRef,
+  };
+}

package/src/index.ts

@@ -1,4 +1,7 @@
 export * from './button';
+export * from './checkbox';
 export * from './input';
+export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
-export { OverlayInsetsProvider, type EdgeInsets } from './overlay';
+export * from './switch';
+export type { InteractionState } from './types';

package/src/select/types.ts

@@ -1,16 +1,8 @@
 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 type { InteractionState };
 
 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;
+}