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

package/src/input/index.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { createInputField } from './createInputField';
 import { createInputIcon } from './createInputIcon';
 import { createInputRoot } from './createInputRoot';
@@ -12,40 +13,32 @@ export type {
   IInputSlotProps,
 } from './types';
 
-export const createInput = <
+export function createInput<
   RootProps,
   IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
   FieldRef = unknown,
->({
-  Root,
-  Icon,
-  Slot,
-  Field,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<RootProps>;
   Icon: React.ComponentType<IconProps>;
   Slot: React.ComponentType<SlotProps>;
   Field: React.ComponentType<FieldProps>;
-}) => {
-  const Input = createInputRoot(Root) as any;
-  Input.Icon = createInputIcon(Icon);
-  Input.Slot = createInputSlot(Slot);
-  Input.Field = createInputField(Field);
+}) {
+  const Input = createInputRoot(BaseComponents.Root);
+  const Icon = createInputIcon(BaseComponents.Icon);
+  const Slot = createInputSlot(BaseComponents.Slot);
+  const Field = createInputField(BaseComponents.Field);
 
-  Input.displayName = 'Input';
-  Input.Icon.displayName = 'Input.Icon';
-  Input.Slot.displayName = 'Input.Slot';
-  Input.Field.displayName = 'Input.Field';
+  Input.displayName = 'InputPrimitive';
+  Icon.displayName = 'InputPrimitive.Icon';
+  Slot.displayName = 'InputPrimitive.Slot';
+  Field.displayName = 'InputPrimitive.Field';
 
-  return Input as IInputComponentType<
-    RootProps,
-    IconProps,
-    SlotProps,
-    FieldProps,
-    RootRef,
-    FieldRef
-  >;
-};
+  return Object.assign(Input, {
+    Icon,
+    Slot,
+    Field,
+  }) as IInputComponentType<RootProps, IconProps, SlotProps, FieldProps, RootRef, FieldRef>;
+}

package/src/select/context.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
-import type { InteractionState, SelectContextValue, SelectItemInteractionState } from './types';
+import type { InteractionState } from '../types';
+import type { SelectContextValue, SelectItemInteractionState } from './types';
 
 const defaultContextValue: SelectContextValue = {
   open: false,

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