@cdx-ui/primitives 0.0.1-alpha.1

package/src/button/createButtonSpinner.tsx

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useButtonContext } from './context';
+import type { IButtonSpinnerProps } from './types';
+
+export const createButtonSpinner = <T,>(BaseButtonSpinner: React.ComponentType<T>) =>
+  forwardRef<unknown, IButtonSpinnerProps>((props, ref) => {
+    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+
+    return (
+      <BaseButtonSpinner
+        {...(props as T)}
+        tabIndex={0}
+        aria-label="loading"
+        ref={ref}
+        {...dataAttributes({ hover, focus, active, disabled, focusVisible })}
+      />
+    );
+  });

package/src/button/createButtonText.tsx

@@ -0,0 +1,22 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useButtonContext } from './context';
+import type { IButtonTextProps } from './types';
+
+// TODO: Rename to ButtonLabel
+
+export const createButtonText = <T,>(BaseButtonText: React.ComponentType<T>) =>
+  forwardRef<unknown, IButtonTextProps>(({ children, ...props }, ref) => {
+    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+
+    return (
+      <BaseButtonText
+        ref={ref}
+        {...(props as T)}
+        {...dataAttributes({ hover, focus, active, disabled, focusVisible })}
+      >
+        {children}
+      </BaseButtonText>
+    );
+  });

package/src/button/index.tsx

@@ -0,0 +1,53 @@
+import type React from 'react';
+import { createButtonRoot } from './createButtonRoot';
+import { createButtonGroup } from './createButtonGroup';
+import { createButtonIcon } from './createButtonIcon';
+import { createButtonSpinner } from './createButtonSpinner';
+import { createButtonText } from './createButtonText';
+import type { IButtonComponentType } from './types';
+
+export type { IButtonProps } from './types';
+
+export function createButton<
+  ButtonProps,
+  TextProps,
+  GroupProps,
+  SpinnerProps,
+  IconProps,
+  ButtonRef = unknown,
+  TextRef = unknown,
+>({
+  Root,
+  Text,
+  Group,
+  Spinner,
+  Icon,
+}: {
+  Root: React.ComponentType<ButtonProps>;
+  Text: React.ComponentType<TextProps>;
+  Group: React.ComponentType<GroupProps>;
+  Spinner: React.ComponentType<SpinnerProps>;
+  Icon: React.ComponentType<IconProps>;
+}) {
+  const Button = createButtonRoot(Root) as any;
+  Button.Text = createButtonText(Text);
+  Button.Group = createButtonGroup(Group);
+  Button.Spinner = createButtonSpinner(Spinner);
+  Button.Icon = createButtonIcon(Icon);
+
+  Button.displayName = 'Button';
+  Button.Text.displayName = 'Button.Text';
+  Button.Group.displayName = 'Button.Group';
+  Button.Spinner.displayName = 'Button.Spinner';
+  Button.Icon.displayName = 'Button.Icon';
+
+  return Button as IButtonComponentType<
+    ButtonProps,
+    GroupProps,
+    SpinnerProps,
+    TextProps,
+    IconProps,
+    ButtonRef,
+    TextRef
+  >;
+}

package/src/button/types.ts

@@ -0,0 +1,85 @@
+import type { PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export interface InteractionState {
+  hover: boolean;
+  focus: boolean;
+  active: boolean;
+  disabled?: boolean;
+  focusVisible: boolean;
+}
+
+export interface InterfaceButtonProps extends PressableProps {
+  /**
+   * If true, the button will be in hovered state.
+   */
+  isHovered?: boolean;
+  /**
+   * If true, the button will be in pressed state.
+   */
+  isActive?: boolean;
+  /**
+   * If true, the button will be focused.
+   */
+  isFocused?: boolean;
+  /**
+   * If true, the button focus ring will be visible.
+   */
+  isFocusVisible?: boolean;
+  /**
+   * If true, the button will be disabled.
+   */
+  isDisabled?: boolean;
+}
+
+export interface IButtonGroupProps {
+  /**
+   * The direction of the Stack Items.
+   * @default row
+   */
+  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  /**
+   *
+   */
+  children: ReactElement | ReactElement[];
+
+  /**
+   * If true, the button will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * If true, button will be atttached together.
+   */
+  isAttached?: boolean;
+  reversed?: boolean;
+  isReversed?: boolean;
+}
+
+export type IButtonComponentType<
+  ButtonProps,
+  GroupProps,
+  SpinnerProps,
+  TextProps,
+  IconProps,
+  ButtonRef = unknown,
+  TextRef = unknown,
+> = React.ForwardRefExoticComponent<
+  PropsWithoutRef<ButtonProps & IButtonProps> & RefAttributes<ButtonRef>
+> & {
+  Group: React.ForwardRefExoticComponent<
+    RefAttributes<unknown> & PropsWithoutRef<GroupProps & IButtonGroupProps>
+  >;
+  Spinner: React.ForwardRefExoticComponent<
+    PropsWithoutRef<SpinnerProps> & React.RefAttributes<unknown>
+  >;
+  Text: React.ForwardRefExoticComponent<React.RefAttributes<TextRef> & PropsWithoutRef<TextProps>>;
+  Icon: React.ForwardRefExoticComponent<React.RefAttributes<unknown> & PropsWithoutRef<IconProps>>;
+};
+
+export interface IButtonTextProps extends ViewProps {
+  children?: ReactNode;
+}
+
+export interface IButtonSpinnerProps extends ViewProps {}
+
+export type IButtonProps = InterfaceButtonProps;

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './input';
+export * from './select';
+export { OverlayInsetsProvider, type EdgeInsets } from './overlay';

package/src/input/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { InputContext } from './types';
+
+export const [InputProvider, useInputContext] = createContext<InputContext>('InputContext');

package/src/input/createInputField.tsx

@@ -0,0 +1,104 @@
+import type React from 'react';
+import { forwardRef, useMemo } from 'react';
+import {
+  type BlurEvent,
+  type FocusEvent,
+  Platform,
+  type TextInputKeyPressEvent,
+} from 'react-native';
+import { mergeRefs, useFormControl } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useInputContext } from './context';
+import type { IInputProps } from './types';
+
+export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        children,
+        onKeyPress,
+        type = 'text',
+        'aria-label': ariaLabel = 'Input Field',
+        secureTextEntry,
+        editable,
+        disabled,
+        ...props
+      }: IInputProps,
+      ref?: any,
+    ) => {
+      const {
+        isDisabled,
+        isReadOnly,
+        isFocused,
+        isInvalid,
+        setIsFocused,
+        isHovered,
+        isFocusVisible,
+        inputFieldRef,
+        isRequired,
+      } = useInputContext();
+
+      const inputProps = useFormControl({
+        isDisabled: props.isDisabled || disabled,
+        isInvalid: props.isInvalid,
+        isReadOnly: props.isReadOnly,
+        isRequired: props.isRequired,
+        id: props.id,
+      });
+
+      const handleFocus = (focusState: boolean, callback: any) => {
+        setIsFocused(focusState);
+        callback();
+      };
+
+      const mergedRef = mergeRefs(ref, inputFieldRef);
+
+      const isEffectivelyDisabled = isDisabled || inputProps.disabled;
+
+      const editableProp = useMemo(() => {
+        if (editable !== undefined) {
+          return editable;
+        }
+        return !(isDisabled || inputProps.disabled || isReadOnly);
+      }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
+
+      return (
+        <BaseInputField
+          {...(props as T)}
+          type={type}
+          {...dataAttributes({
+            focus: isFocused,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            required: isRequired,
+            hover: isHovered,
+            focusVisible: isFocusVisible,
+            disabled: isEffectivelyDisabled,
+          })}
+          disabled={isEffectivelyDisabled}
+          secureTextEntry={secureTextEntry || type === 'password'}
+          accessible
+          aria-label={ariaLabel}
+          aria-required={isRequired || inputProps.required}
+          aria-invalid={isInvalid || inputProps['aria-invalid']}
+          aria-disabled={isEffectivelyDisabled}
+          aria-selected={Platform.OS !== 'web' ? isFocused : undefined}
+          accessibilityElementsHidden={isEffectivelyDisabled}
+          readOnly={!editableProp}
+          onKeyPress={(e: TextInputKeyPressEvent) => {
+            e.persist();
+            onKeyPress?.(e);
+          }}
+          onFocus={(e: FocusEvent) => {
+            handleFocus(true, () => props?.onFocus?.(e));
+          }}
+          onBlur={(e: BlurEvent) => {
+            handleFocus(false, () => props?.onBlur?.(e));
+          }}
+          ref={mergedRef}
+        >
+          {children}
+        </BaseInputField>
+      );
+    },
+  );

package/src/input/createInputIcon.tsx

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

package/src/input/createInputRoot.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { InputProvider } from './context';
+import type { IInputRootProps } from './types';
+
+// TODO: Does this need useControllableState?
+
+export const createInputRoot = <T,>(BaseInput: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        children,
+        isReadOnly,
+        isDisabled,
+        isInvalid,
+        isRequired,
+        isHovered: isHoveredProp,
+        isFocused: isFocusedProp,
+        isFocusVisible: isFocusVisibleProp,
+        ...props
+      }: IInputRootProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const inputRef = React.useRef(null);
+      const inputFieldRef = React.useRef(null);
+
+      const [isFocused, setIsFocused] = React.useState(false);
+      const handleFocus = useCallback((focusState: boolean, callback: any) => {
+        setIsFocused(focusState);
+        callback();
+      }, []);
+
+      const inputProps = useFormControlContext();
+      const { isHovered } = useHover({}, inputRef);
+      const { isFocusVisible } = useFocusRing();
+
+      const resolvedDisabled = isDisabled || inputProps.isDisabled;
+      const resolvedInvalid = isInvalid || inputProps.isInvalid;
+      const resolvedReadOnly = isReadOnly || inputProps.isReadOnly;
+      const resolvedRequired = isRequired || inputProps.isRequired;
+      const resolvedHovered = isHoveredProp || isHovered;
+      const resolvedFocused = isFocusedProp || isFocused;
+      const resolvedFocusVisible = isFocusVisibleProp || isFocusVisible;
+
+      const contextValue = useMemo(
+        () => ({
+          isDisabled: resolvedDisabled,
+          isInvalid: resolvedInvalid,
+          isHovered: resolvedHovered,
+          isFocused: resolvedFocused,
+          isFocusVisible: resolvedFocusVisible,
+          isReadOnly: resolvedReadOnly,
+          isRequired: resolvedRequired,
+          inputRef,
+          handleFocus,
+          setIsFocused,
+          inputFieldRef,
+        }),
+        [
+          resolvedDisabled,
+          resolvedInvalid,
+          resolvedHovered,
+          resolvedFocused,
+          resolvedFocusVisible,
+          resolvedReadOnly,
+          resolvedRequired,
+          handleFocus,
+        ],
+      );
+
+      return (
+        <BaseInput
+          {...dataAttributes({
+            hover: resolvedHovered,
+            focus: resolvedFocused,
+            disabled: resolvedDisabled,
+            invalid: resolvedInvalid,
+            readonly: resolvedReadOnly,
+            required: resolvedRequired,
+            focusVisible: resolvedFocusVisible,
+          })}
+          {...(props as T)}
+          ref={mergeRefs(inputRef, ref as any)} // TODO: Somehow utils and primitives package are resolving to different versions of react (@types/react?)
+        >
+          <InputProvider value={contextValue}>{children}</InputProvider>
+        </BaseInput>
+      );
+    },
+  );

package/src/input/createInputSlot.tsx

@@ -0,0 +1,39 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { useFormControl } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useInputContext } from './context';
+import type { IInputSlotProps } from './types';
+
+export const createInputSlot = <T,>(BaseInputSlot: React.ComponentType<T>) =>
+  forwardRef<unknown, IInputSlotProps>(
+    ({ children, onPress, focusOnPress = true, ...props }, ref) => {
+      const { inputFieldRef, isDisabled } = useInputContext();
+
+      const handleFocus = () => {
+        focusOnPress && inputFieldRef.current?.focus();
+      };
+
+      const inputProps = useFormControl({
+        isDisabled: props.isDisabled,
+      });
+
+      return (
+        <BaseInputSlot
+          {...dataAttributes({
+            disabled: isDisabled || inputProps.disabled,
+          })}
+          onPress={() => {
+            onPress?.();
+            handleFocus();
+          }}
+          accessibilityElementsHidden={true}
+          tabIndex={-1}
+          ref={ref}
+          {...(props as T)}
+        >
+          {children}
+        </BaseInputSlot>
+      );
+    },
+  );

package/src/input/index.tsx

@@ -0,0 +1,51 @@
+import { createInputField } from './createInputField';
+import { createInputIcon } from './createInputIcon';
+import { createInputRoot } from './createInputRoot';
+import { createInputSlot } from './createInputSlot';
+import type { IInputComponentType } from './types';
+
+export type {
+  IInputFieldProps,
+  IInputIconProps,
+  IInputProps,
+  IInputRootProps,
+  IInputSlotProps,
+} from './types';
+
+export const createInput = <
+  RootProps,
+  IconProps,
+  SlotProps,
+  FieldProps,
+  RootRef = unknown,
+  FieldRef = unknown,
+>({
+  Root,
+  Icon,
+  Slot,
+  Field,
+}: {
+  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);
+
+  Input.displayName = 'Input';
+  Input.Icon.displayName = 'Input.Icon';
+  Input.Slot.displayName = 'Input.Slot';
+  Input.Field.displayName = 'Input.Field';
+
+  return Input as IInputComponentType<
+    RootProps,
+    IconProps,
+    SlotProps,
+    FieldProps,
+    RootRef,
+    FieldRef
+  >;
+};

package/src/input/types.ts

@@ -0,0 +1,113 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+
+export interface InputContext {
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  handleFocus?: any;
+  isFocusVisible?: boolean;
+  isFullWidth?: boolean;
+  inputRef?: any;
+  setIsFocused?: any;
+  inputFieldRef?: any;
+}
+
+export interface IInputFieldProps {
+  /**
+   * If true, the input will indicate an error.
+   */
+  isInvalid?: boolean;
+  /**
+   * 	If true, the input will be disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * 	If true, the input will be hovered.
+   */
+  isHovered?: boolean;
+
+  /**
+   * 	If true, the input will be focused.
+   */
+  isFocused?: boolean;
+  /**
+   * This will set aria-required="true" on web when passed in formcontrol.
+   */
+  isRequired?: boolean;
+  /**
+   * If true, prevents the value of the input from being edited.
+   */
+  isReadOnly?: boolean;
+  /**
+   * If true, the input element will span the full width of its parent
+   */
+  isFullWidth?: boolean;
+}
+export interface IInputRootProps extends IInputFieldProps {
+  children?: React.ReactNode;
+  isFocusVisible?: boolean;
+}
+
+interface IInputBaseProps extends TextInputProps {
+  disabled?: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+}
+
+interface IInputTextProps extends IInputBaseProps {
+  type?: 'text' | 'password';
+}
+
+interface IInputFileProps extends IInputBaseProps {
+  type: 'file';
+  /** @platform web — Accepted file types, e.g. "image/*", ".pdf,.doc" */
+  accept?: string;
+  /** @platform web — Allow selecting multiple files */
+  multiple?: boolean;
+  /** @platform web — Preferred capture source on mobile web: "user" (front) or "environment" (rear) */
+  capture?: 'user' | 'environment';
+  /** @platform web — Called when the user selects files */
+  onFiles?: (files: File[]) => void;
+}
+
+export type IInputProps = IInputTextProps | IInputFileProps;
+export interface IInputIconProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+export interface IInputSlotProps extends ViewProps {
+  children?: React.ReactNode;
+  onPress?: () => void;
+  isDisabled?: boolean;
+  /**
+   * If true, the input will be focused on press.
+   * @default true
+   */
+  focusOnPress?: boolean;
+}
+
+export type IInputComponentType<
+  RootProps,
+  IconProps,
+  SlotProps,
+  FieldProps,
+  RootRef = unknown,
+  FieldRef = unknown,
+> = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<RootProps & IInputFieldProps> & React.RefAttributes<RootRef>
+> & {
+  Icon: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<IconProps> & React.RefAttributes<unknown>
+  >;
+  Slot: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<SlotProps & IInputSlotProps> & React.RefAttributes<unknown>
+  >;
+  Field: React.ForwardRefExoticComponent<
+    React.PropsWithoutRef<FieldProps & IInputProps> & React.RefAttributes<FieldRef>
+  >;
+};

package/src/overlay/OverlayContainer.tsx

@@ -0,0 +1,77 @@
+import type React from 'react';
+import {
+  Modal,
+  Platform,
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native';
+import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
+
+let createPortalFn:
+  | ((children: React.ReactNode, container: Element) => React.ReactPortal)
+  | undefined;
+if (Platform.OS === 'web') {
+  try {
+    createPortalFn = require('react-dom').createPortal;
+  } catch {}
+}
+
+export interface OverlayContainerProps {
+  onDismiss: () => void;
+  entering?: EntryOrExitLayoutType;
+  exiting?: EntryOrExitLayoutType;
+  style?: StyleProp<ViewStyle>;
+  children: React.ReactNode;
+}
+
+/**
+ * Cross-platform overlay container.
+ *
+ * - Web: renders children into a `createPortal` at `document.body` with
+ *   `position: fixed` and `zIndex: 50`.
+ * - Native: renders children inside a transparent `<Modal>` with a
+ *   backdrop `<Pressable>` that calls `onDismiss` on press.
+ *
+ * The consumer is responsible for not mounting this component when the
+ * overlay should be hidden.
+ */
+export function OverlayContainer({
+  onDismiss,
+  entering,
+  exiting,
+  style,
+  children,
+}: Readonly<OverlayContainerProps>) {
+  if (Platform.OS === 'web' && createPortalFn) {
+    return createPortalFn(
+      <Animated.View
+        entering={entering}
+        exiting={exiting}
+        style={[{ position: 'fixed' as any, zIndex: 50 }, style]}
+      >
+        {children}
+      </Animated.View>,
+      document.body,
+    );
+  }
+
+  return (
+    <Modal visible transparent animationType="none" statusBarTranslucent onRequestClose={onDismiss}>
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onDismiss}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
+      />
+      <Animated.View
+        entering={entering}
+        exiting={exiting}
+        style={[{ position: 'absolute' }, style]}
+      >
+        {children}
+      </Animated.View>
+    </Modal>
+  );
+}

package/src/overlay/index.ts

@@ -0,0 +1,10 @@
+export { OverlayContainer } from './OverlayContainer';
+export type { OverlayContainerProps } from './OverlayContainer';
+export { useAnchorPosition, type AnchorLayout } from './useAnchorPosition';
+export { useDismissOverlay } from './useDismissOverlay';
+export {
+  useOverlayPosition,
+  type OverlayPosition,
+  OverlayInsetsProvider,
+  type EdgeInsets,
+} from './useOverlayPosition';