@cdx-ui/primitives 0.0.1-beta.9 → 0.0.1-beta.90

package/src/input/InputRoot.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useCallback, useMemo, useRef, useState, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { InputProvider } from './context';
+import type { IInputRootProps, InputContext } from './types';
+
+export type InputRootProps = IInputRootProps;
+
+export const InputRoot = forwardRef<ComponentRef<typeof View>, InputRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isHovered: isHoveredProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<ComponentRef<typeof View> | null>(null);
+    const inputFieldRef = useRef(null);
+
+    const [isFocused, setIsFocused] = useState(false);
+    const handleFocus = useCallback((focusState: boolean, callback: () => void) => {
+      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;
+
+    // TODO: Remove is prefix from props (align with ButtonRoot)
+    const contextValue = useMemo<InputContext>(
+      () => ({
+        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,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <InputProvider value={contextValue}>
+        <Comp
+          ref={mergeRefs(inputRef, ref)}
+          {...(rest as ViewProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              hover: resolvedHovered,
+              focus: resolvedFocused,
+              disabled: resolvedDisabled,
+              invalid: resolvedInvalid,
+              readonly: resolvedReadOnly,
+              required: resolvedRequired,
+              focusVisible: resolvedFocusVisible,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </InputProvider>
+    );
+  },
+);
+
+InputRoot.displayName = 'InputRoot';

package/src/input/index.tsx

@@ -1,38 +1,4 @@
-import type React from 'react';
-import { createInputField } from './createInputField';
-import { createInputRoot } from './createInputRoot';
-import { createInputSlot } from './createInputSlot';
-import type { IInputComponentType } from './types';
-
-export type {
-  IInputFieldProps,
-  IInputIconProps,
-  IInputProps,
-  IInputRootProps,
-  IInputSlotProps,
-} from './types';
-
-export function createInput<
-  RootProps,
-  SlotProps,
-  FieldProps,
-  RootRef = unknown,
-  FieldRef = unknown,
->(BaseComponents: {
-  Root: React.ComponentType<RootProps>;
-  Slot: React.ComponentType<SlotProps>;
-  Field: React.ComponentType<FieldProps>;
-}) {
-  const Input = createInputRoot(BaseComponents.Root);
-  const Slot = createInputSlot(BaseComponents.Slot);
-  const Field = createInputField(BaseComponents.Field);
-
-  Input.displayName = 'InputPrimitive';
-  Slot.displayName = 'InputPrimitive.Slot';
-  Field.displayName = 'InputPrimitive.Field';
-
-  return Object.assign(Input, {
-    Slot,
-    Field,
-  }) as IInputComponentType<RootProps, SlotProps, FieldProps, RootRef, FieldRef>;
-}
+export type { IInputFieldProps, IInputProps, IInputRootProps, IInputSlotProps } from './types';
+export { useInputContext } from './context';
+export { InputRoot, type InputRootProps } from './InputRoot';
+export { InputField, type InputFieldProps } from './InputField';

package/src/input/types.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { TextInputProps, ViewProps } from 'react-native';
 
 export interface InputContext {
@@ -7,48 +8,35 @@ export interface InputContext {
   isRequired?: boolean;
   isHovered?: boolean;
   isFocused?: boolean;
-  handleFocus?: any;
+  handleFocus?: (focusState: boolean, callback: () => void) => void;
   isFocusVisible?: boolean;
   isFullWidth?: boolean;
   inputRef?: any;
-  setIsFocused?: any;
+  setIsFocused?: (focused: boolean) => void;
   inputFieldRef?: any;
 }
 
 export interface IInputFieldProps {
-  /**
-   * If true, the input will indicate an error.
-   */
+  /** If true, the input will indicate an error. */
   isInvalid?: boolean;
-  /**
-   * 	If true, the input will be disabled.
-   */
+  /** If true, the input will be disabled. */
   isDisabled?: boolean;
-  /**
-   * 	If true, the input will be hovered.
-   */
+  /** If true, the input will be hovered. */
   isHovered?: boolean;
-
-  /**
-   * 	If true, the input will be focused.
-   */
+  /** If true, the input will be focused. */
   isFocused?: boolean;
-  /**
-   * This will set aria-required="true" on web when passed in formcontrol.
-   */
+  /** Sets `aria-required="true"` on web when passed in form control. */
   isRequired?: boolean;
-  /**
-   * If true, prevents the value of the input from being edited.
-   */
+  /** 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
-   */
+  /** If true, the input element will span the full width of its parent. */
   isFullWidth?: boolean;
 }
-export interface IInputRootProps extends IInputFieldProps {
-  children?: React.ReactNode;
+
+export interface IInputRootProps extends ViewProps, IInputFieldProps {
+  children?: ReactNode;
   isFocusVisible?: boolean;
+  asChild?: boolean;
 }
 
 interface IInputBaseProps extends TextInputProps {
@@ -57,6 +45,12 @@ interface IInputBaseProps extends TextInputProps {
   isInvalid?: boolean;
   isReadOnly?: boolean;
   isRequired?: boolean;
+  /**
+   * Render the consumer's child element in place of the default host. The
+   * primitive merges its wired behavior (focus/blur, ARIA props, refs) onto
+   * the child. When set, the `type="file"` web branch is bypassed.
+   */
+  asChild?: boolean;
 }
 
 interface IInputTextProps extends IInputBaseProps {
@@ -76,34 +70,8 @@ interface IInputFileProps extends IInputBaseProps {
 }
 
 export type IInputProps = IInputTextProps | IInputFileProps;
-export interface IInputIconProps extends ViewProps {
-  children?: React.ReactNode;
-}
 
 export interface IInputSlotProps extends ViewProps {
-  children?: React.ReactNode;
-  onPress?: () => void;
+  children?: ReactNode;
   isDisabled?: boolean;
-  /**
-   * If true, the input will be focused on press.
-   * @default true
-   */
-  focusOnPress?: boolean;
 }
-
-export type IInputComponentType<
-  RootProps,
-  SlotProps,
-  FieldProps,
-  RootRef = unknown,
-  FieldRef = unknown,
-> = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<RootProps & IInputFieldProps> & React.RefAttributes<RootRef>
-> & {
-  Slot: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<SlotProps & IInputSlotProps> & React.RefAttributes<unknown>
-  >;
-  Field: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<FieldProps & IInputProps> & React.RefAttributes<FieldRef>
-  >;
-};

package/src/link/LinkRoot.tsx

@@ -0,0 +1,108 @@
+import type React from 'react';
+import { forwardRef, useMemo } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { LinkInteractionProvider, type LinkInteractionState } from './context';
+import { useLink } from './useLink';
+import type { ILinkProps } from './types';
+
+export interface LinkRootProps extends Omit<ILinkProps, 'children'> {
+  asChild?: boolean;
+  children?: ((state: LinkInteractionState) => React.ReactNode) | React.ReactNode;
+}
+
+export const LinkRoot = forwardRef<React.ComponentRef<typeof Pressable>, LinkRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isHovered: isHoveredProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      isVisited: isVisitedProp,
+      href,
+      onPress,
+      action,
+      webProps,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps, isPressed } = usePress({});
+    const { isHovered, hoverProps } = useHover();
+
+    const { linkProps } = useLink({
+      href,
+      onPress,
+      action,
+      webProps,
+    });
+
+    const hover = isHoveredProp || isHovered;
+    const visited = isVisitedProp ?? false;
+    const focusVisible = isFocusVisibleProp || isFocusVisible;
+
+    const contextValue = useMemo(
+      () => ({
+        hover,
+        visited,
+        focusVisible,
+      }),
+      [hover, visited, focusVisible],
+    );
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <LinkInteractionProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...linkProps}
+          {...(props as PressableProps)}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover,
+              focus: isFocusedProp || isFocused,
+              active: isPressedProp || isPressed,
+              focusVisible,
+              visited,
+            }),
+          )}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(
+              props?.onFocus as (...args: unknown[]) => unknown,
+              focusProps.onFocus,
+            ),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(
+              props?.onBlur as (...args: unknown[]) => unknown,
+              focusProps.onBlur,
+            ),
+            focusRingProps.onBlur,
+          )}
+        >
+          {typeof children === 'function' ? children(contextValue) : children}
+        </Comp>
+      </LinkInteractionProvider>
+    );
+  },
+);
+
+LinkRoot.displayName = 'LinkRoot';

package/src/link/context.tsx

@@ -0,0 +1,10 @@
+import { createContext } from '@cdx-ui/utils';
+
+export interface LinkInteractionState {
+  hover: boolean;
+  visited: boolean;
+  focusVisible: boolean;
+}
+
+export const [LinkInteractionProvider, useLinkInteractionContext] =
+  createContext<LinkInteractionState>('LinkInteractionContext');

package/src/link/index.tsx

@@ -1,4 +1,6 @@
-export { createLink } from './createLink';
+export { LinkRoot, type LinkRootProps } from './LinkRoot';
+export { LinkInteractionProvider, useLinkInteractionContext } from './context';
+export type { LinkInteractionState } from './context';
 export { LinkProvider } from './LinkProvider';
 export type { LinkConfig } from './LinkProvider';
 export { useLink } from './useLink';

package/src/link/types.ts

@@ -32,6 +32,7 @@ export interface ILinkProps extends PressableProps {
   isHovered?: boolean;
   isFocused?: boolean;
   isFocusVisible?: boolean;
+  isVisited?: boolean;
   /**
    * HTML anchor attributes applied only on web. Ignored on native platforms.
    * `target`, `rel`, and `download` are forwarded via react-native-web's `hrefAttrs`.

package/src/list-item/ListItemRoot.tsx

@@ -0,0 +1,183 @@
+import React, { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { composeEventHandlers } 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 { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ListItemProvider } from './context';
+import type { IListItemPressablePassthrough, IListItemProps, ListItemCrossAlign } from './types';
+
+function rowStyleForCrossAlign(crossAlign: ListItemCrossAlign) {
+  return {
+    flexDirection: 'row' as const,
+    alignSelf: 'stretch' as const,
+    alignItems: crossAlign === 'start' ? ('flex-start' as const) : ('center' as const),
+  };
+}
+
+export interface ListItemRootProps extends IListItemProps {}
+
+export const ListItemRoot = forwardRef<ComponentRef<typeof View>, ListItemRootProps>(
+  (
+    {
+      asChild = false,
+      children,
+      onPress,
+      crossAlign = 'center',
+      isDisabled = false,
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const asChildInteractive = asChild && React.isValidElement(children);
+    const isPressableRoot = !!onPress && !asChildInteractive;
+
+    const pressState = usePress({
+      isDisabled: !isPressableRoot || isDisabled,
+    });
+    const isPressed = pressState.isPressed;
+    const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    const { hoverProps, isHovered } = useHover();
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+
+    const childDisabled =
+      asChildInteractive &&
+      !!(
+        (children as React.ReactElement<{ disabled?: boolean; isDisabled?: boolean }>).props
+          .isDisabled ??
+        (children as React.ReactElement<{ disabled?: boolean; isDisabled?: boolean }>).props
+          .disabled
+      );
+    const resolvedDisabled = isDisabled || childDisabled;
+
+    const contextValue = useMemo<InteractionState>(
+      () => ({
+        hover: isPressableRoot ? isHovered : false,
+        focus: isPressableRoot ? isFocused : false,
+        active: isPressableRoot ? isPressed : false,
+        disabled: isPressableRoot ? isDisabled : resolvedDisabled,
+        focusVisible: isPressableRoot ? isFocusVisible : false,
+      }),
+      [
+        isPressableRoot,
+        isHovered,
+        isFocused,
+        isPressed,
+        isDisabled,
+        resolvedDisabled,
+        isFocusVisible,
+      ],
+    );
+
+    if (asChildInteractive) {
+      const slotMergeProps: Record<string, unknown> = {
+        ...restProps,
+        ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+        disabled: resolvedDisabled,
+        style: [rowStyleForCrossAlign(crossAlign), style],
+      };
+
+      // Only set onPress when we have a parent handler to compose. Slot merges this
+      // with the child's own onPress (child first, then ours). When there is no parent
+      // onPress, omitting it preserves the child's internal handler (e.g. Link's useLink).
+      // When disabled, `disabled` prop suppresses press events on the child.
+      if (!resolvedDisabled && onPress) {
+        slotMergeProps.onPress = onPress;
+      }
+
+      return (
+        <ListItemProvider value={contextValue}>
+          <Slot
+            ref={ref as React.Ref<View>}
+            {...(slotMergeProps as PressableProps)}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: false,
+                hover: false,
+                focus: false,
+                focusVisible: false,
+                disabled: resolvedDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Slot>
+        </ListItemProvider>
+      );
+    }
+
+    if (isPressableRoot) {
+      const {
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        onHoverIn: onHoverInProp,
+        onHoverOut: onHoverOutProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+      } = restProps as IListItemPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+      return (
+        <ListItemProvider value={contextValue}>
+          <Pressable
+            {...(restProps as PressableProps)}
+            ref={ref}
+            {...(isDisabled && { accessibilityState: { disabled: true } })}
+            disabled={isDisabled}
+            style={[rowStyleForCrossAlign(crossAlign), style]}
+            onPress={isDisabled ? undefined : onPress}
+            onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
+            onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
+            onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
+            onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+            onFocus={composeEventHandlers(
+              composeEventHandlers(onFocusProp, focusProps.onFocus),
+              focusRingProps.onFocus,
+            )}
+            onBlur={composeEventHandlers(
+              composeEventHandlers(onBlurProp, focusProps.onBlur),
+              focusRingProps.onBlur,
+            )}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: isPressed,
+                hover: isHovered,
+                focus: isFocused,
+                focusVisible: isFocusVisible,
+                disabled: isDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Pressable>
+        </ListItemProvider>
+      );
+    }
+
+    return (
+      <ListItemProvider value={contextValue}>
+        <View
+          {...(restProps as ViewProps)}
+          ref={ref}
+          style={[rowStyleForCrossAlign(crossAlign), style]}
+          {...mergeDataAttributes(
+            restProps,
+            isDisabled ? dataAttributes({ disabled: true }) : undefined,
+          )}
+        >
+          {children}
+        </View>
+      </ListItemProvider>
+    );
+  },
+);
+
+ListItemRoot.displayName = 'ListItemRoot';

package/src/list-item/context.tsx

@@ -1,5 +1,5 @@
 import { createContext } from '@cdx-ui/utils';
-import type { IListItemContextValue } from './types';
+import type { InteractionState } from '../types';
 
 export const [ListItemProvider, useListItemContext] =
-  createContext<IListItemContextValue>('ListItemContext');
+  createContext<InteractionState>('ListItemContext');

package/src/list-item/index.ts

@@ -1,88 +1,9 @@
-import type React from 'react';
-import { createListItemContent } from './createListItemContent';
-import { createListItemDescription } from './createListItemDescription';
-import { createListItemLeadingSlot } from './createListItemLeadingSlot';
-import { createListItemMeta } from './createListItemMeta';
-import { createListItemRoot } from './createListItemRoot';
-import { createListItemSectionHeader } from './createListItemSectionHeader';
-import { createListItemTitle } from './createListItemTitle';
-import { createListItemTrailingSlot } from './createListItemTrailingSlot';
-import type { IListItemComponentType } from './types';
-
 export type {
-  IListItemComponentType,
-  IListItemContentProps,
-  IListItemContextValue,
-  IListItemDescriptionProps,
-  IListItemLeadingSlotProps,
-  IListItemMetaProps,
   IListItemPressablePassthrough,
   IListItemProps,
-  IListItemSectionHeaderProps,
-  IListItemTitleProps,
-  IListItemTrailingSlotProps,
   ListItemCrossAlign,
   ListItemSize,
-  ListItemSurface,
 } from './types';
 
 export { ListItemProvider, useListItemContext } from './context';
-
-export function createListItem<
-  ViewComponent,
-  PressableComponent,
-  LeadingSlot,
-  Content,
-  Title,
-  Description,
-  Meta,
-  TrailingSlot,
-  SectionHeader,
->(BaseComponents: {
-  View: React.ComponentType<ViewComponent>;
-  Pressable: React.ComponentType<PressableComponent>;
-  LeadingSlot: React.ComponentType<LeadingSlot>;
-  Content: React.ComponentType<Content>;
-  Title: React.ComponentType<Title>;
-  Description: React.ComponentType<Description>;
-  Meta: React.ComponentType<Meta>;
-  TrailingSlot: React.ComponentType<TrailingSlot>;
-  SectionHeader: React.ComponentType<SectionHeader>;
-}) {
-  const ListItem = createListItemRoot(BaseComponents.View, BaseComponents.Pressable);
-  const LeadingSlot = createListItemLeadingSlot(BaseComponents.LeadingSlot);
-  const Content = createListItemContent(BaseComponents.Content);
-  const Title = createListItemTitle(BaseComponents.Title);
-  const Description = createListItemDescription(BaseComponents.Description);
-  const Meta = createListItemMeta(BaseComponents.Meta);
-  const TrailingSlot = createListItemTrailingSlot(BaseComponents.TrailingSlot);
-  const SectionHeader = createListItemSectionHeader(BaseComponents.SectionHeader);
-
-  ListItem.displayName = 'ListItemPrimitive';
-  LeadingSlot.displayName = 'ListItemPrimitive.LeadingSlot';
-  Content.displayName = 'ListItemPrimitive.Content';
-  Title.displayName = 'ListItemPrimitive.Title';
-  Description.displayName = 'ListItemPrimitive.Description';
-  Meta.displayName = 'ListItemPrimitive.Meta';
-  TrailingSlot.displayName = 'ListItemPrimitive.TrailingSlot';
-  SectionHeader.displayName = 'ListItemPrimitive.SectionHeader';
-
-  return Object.assign(ListItem, {
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Meta,
-    TrailingSlot,
-    SectionHeader,
-  }) as IListItemComponentType<
-    ViewComponent | PressableComponent,
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Meta,
-    TrailingSlot,
-    SectionHeader
-  >;
-}
+export { ListItemRoot, type ListItemRootProps } from './ListItemRoot';