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

package/src/button/types.ts

@@ -1,5 +1,4 @@
-import type { PropsWithoutRef, ReactElement, ReactNode, RefAttributes } from 'react';
-import type { PressableProps, ViewProps } from 'react-native';
+import type { PressableProps } from 'react-native';
 
 export interface InterfaceButtonProps extends PressableProps {
   /**
@@ -24,54 +23,4 @@ export interface InterfaceButtonProps extends PressableProps {
   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/checkbox/CheckboxGroup.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useCheckboxGroup } from '@react-native-aria/checkbox';
+import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { Slot } from '../slot';
+import { CheckboxGroupContext } from './context';
+import type { ICheckboxGroupProps } from './types';
+
+export interface CheckboxGroupRootProps extends ICheckboxGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const CheckboxGroup = forwardRef<View, CheckboxGroupRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const state = useCheckboxGroupState({
+      ...props,
+      validationState: props.isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { groupProps } = useCheckboxGroup(
+      {
+        ...props,
+        'aria-label': props['aria-label'],
+      },
+      state,
+    );
+
+    const formControlContext = useFormControlContext();
+
+    const contextValue = useMemo(
+      () => ({ state: { ...formControlContext, ...state } }),
+      [formControlContext, state],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <CheckboxGroupContext.Provider value={contextValue}>
+        <Comp {...groupProps} className={className} style={style} ref={ref}>
+          {children}
+        </Comp>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

package/src/checkbox/CheckboxRoot.tsx

@@ -0,0 +1,102 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      hoverProps,
+      mergedRef,
+    } = useCheckboxRoot(props, ref);
+
+    const { focusProps, isFocused } = useFocus();
+
+    const { pressProps, isPressed } = usePress({
+      isDisabled: isDisabled || isDisabledProp,
+    });
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...(combinedProps as PressableProps)}
+          {...groupItemInputProps}
+          ref={mergedRef}
+          role="checkbox"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked || isCheckedProp,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              indeterminate: isIndeterminate || isIndeterminateProp,
+              focusVisible: isFocusVisibleProp,
+            }),
+          )}
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(composeEventHandlers(onFocus, focusProps.onFocus))}
+          onBlur={composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur))}
+        >
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/CheckboxRoot.web.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useFocusRing } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      mergedRef,
+      inputRef,
+    } = useCheckboxRoot(props, ref, { useInputRefForAria: true });
+
+    const { focusProps, isFocusVisible } = useFocusRing();
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          {...(combinedProps as PressableProps)}
+          ref={mergedRef}
+          tabIndex={-1}
+          role="label"
+          // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+          accessibilityRole="label"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked || isCheckedProp,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              indeterminate: isIndeterminate || isIndeterminateProp,
+              focusVisible: isFocusVisible,
+            }),
+          )}
+        >
+          <VisuallyHidden>
+            <input {...groupItemInputProps} {...focusProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/index.ts

@@ -1,43 +1,5 @@
-import type React from 'react';
-import { createCheckboxGroup } from './createCheckboxGroup';
-import { createCheckboxIcon } from './createCheckboxIcon';
-import { createCheckboxIndicator } from './createCheckboxIndicator';
-import { createCheckboxLabel } from './createCheckboxLabel';
-import { createCheckboxRoot } from './createCheckboxRoot';
-import type { ICheckboxComponentType } from './types';
+export type { ICheckboxContextValue, ICheckboxGroupProps, ICheckboxProps } from './types';
 
-export type {
-  ICheckboxComponentType,
-  ICheckboxGroupProps,
-  ICheckboxIconProps,
-  ICheckboxIndicatorProps,
-  ICheckboxLabelProps,
-  ICheckboxProps,
-} from './types';
-
-export function createCheckbox<Root, Indicator, Icon, Label, Group>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Indicator: React.ComponentType<Indicator>;
-  Icon: React.ComponentType<Icon>;
-  Label: React.ComponentType<Label>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Checkbox = createCheckboxRoot(BaseComponents.Root);
-  const Indicator = createCheckboxIndicator(BaseComponents.Indicator);
-  const Icon = createCheckboxIcon(BaseComponents.Icon);
-  const Label = createCheckboxLabel(BaseComponents.Label);
-  const Group = createCheckboxGroup(BaseComponents.Group);
-
-  Checkbox.displayName = 'CheckboxPrimitive';
-  Indicator.displayName = 'CheckboxPrimitive.Indicator';
-  Icon.displayName = 'CheckboxPrimitive.Icon';
-  Label.displayName = 'CheckboxPrimitive.Label';
-  Group.displayName = 'CheckboxPrimitive.Group';
-
-  return Object.assign(Checkbox, {
-    Indicator,
-    Icon,
-    Label,
-    Group,
-  }) as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
-}
+export { useCheckboxContext } from './context';
+export { CheckboxRoot, type CheckboxRootProps } from './CheckboxRoot';
+export { CheckboxGroup, type CheckboxGroupRootProps } from './CheckboxGroup';

package/src/checkbox/types.ts

@@ -1,4 +1,5 @@
 import type { PressableProps } from 'react-native';
+
 export interface InterfaceCheckbox extends PressableProps {
   value: string;
   onChange?: (isSelected: boolean) => void;
@@ -27,38 +28,6 @@ export interface ICheckboxGroupProps {
   'aria-label'?: string;
 }
 
-export type ICheckboxComponentType<Root, Indicator, Icon, Label, Group> =
-  React.ForwardRefExoticComponent<
-    React.RefAttributes<Root> & React.PropsWithoutRef<Root> & InterfaceCheckbox
-  > & {
-    Indicator: React.ForwardRefExoticComponent<
-      React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & ICheckboxIndicatorProps
-    >;
-    Icon: React.ForwardRefExoticComponent<
-      React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & ICheckboxIconProps
-    >;
-    Label: React.ForwardRefExoticComponent<
-      React.RefAttributes<Label> & React.PropsWithoutRef<Label> & ICheckboxLabelProps
-    >;
-    Group: React.ForwardRefExoticComponent<
-      React.RefAttributes<Group> & React.PropsWithoutRef<Group> & ICheckboxGroupProps
-    >;
-  };
-
-export interface ICheckboxIndicatorProps {
-  children?: React.ReactNode;
-}
-
-export interface ICheckboxIconProps {
-  children?: React.ReactNode;
-  /** Render the icon even when unchecked */
-  forceMount?: boolean;
-}
-
-export interface ICheckboxLabelProps {
-  children?: React.ReactNode;
-}
-
 export type ICheckboxProps = InterfaceCheckbox;
 
 export interface ICheckboxContextValue {

package/src/chip/ChipRoot.tsx

@@ -0,0 +1,168 @@
+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 { ChipProvider } from './context';
+import type { IChipPressablePassthrough, IChipProps } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  alignSelf: 'flex-start' as const,
+};
+
+export interface ChipRootProps extends IChipProps {}
+
+export const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipRootProps>(
+  (
+    {
+      asChild = false,
+      children,
+      onPress,
+      disabled = false,
+      accessibilityRole,
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const asChildInteractive = asChild && React.isValidElement(children);
+    const isPressableRoot = !!onPress && !asChildInteractive;
+
+    const pressState = usePress({
+      isDisabled: !isPressableRoot || disabled,
+    });
+    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 }>).props.disabled;
+    const resolvedDisabled = disabled || childDisabled;
+
+    const contextValue = useMemo<InteractionState>(
+      () => ({
+        hover: isPressableRoot ? isHovered : false,
+        focus: isPressableRoot ? isFocused : false,
+        active: isPressableRoot ? isPressed : false,
+        disabled: resolvedDisabled,
+        focusVisible: isPressableRoot ? isFocusVisible : false,
+      }),
+      [isPressableRoot, isHovered, isFocused, isPressed, resolvedDisabled, isFocusVisible],
+    );
+
+    if (asChildInteractive) {
+      const slotMergeProps: Record<string, unknown> = {
+        ...restProps,
+        ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+        disabled: resolvedDisabled,
+        style: [rowStyle, 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).
+      if (!resolvedDisabled && onPress) {
+        slotMergeProps.onPress = onPress;
+      }
+
+      return (
+        <ChipProvider 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>
+        </ChipProvider>
+      );
+    }
+
+    if (isPressableRoot) {
+      const {
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        onHoverIn: onHoverInProp,
+        onHoverOut: onHoverOutProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+      } = restProps as IChipPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Pressable
+            {...(restProps as PressableProps)}
+            ref={ref}
+            accessibilityRole={accessibilityRole ?? 'button'}
+            {...(disabled && { accessibilityState: { disabled: true } })}
+            disabled={disabled}
+            style={[rowStyle, style]}
+            onPress={disabled ? 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,
+              }),
+            )}
+          >
+            {children}
+          </Pressable>
+        </ChipProvider>
+      );
+    }
+
+    return (
+      <ChipProvider value={contextValue}>
+        <View
+          {...(restProps as ViewProps)}
+          ref={ref}
+          style={[rowStyle, style]}
+          {...mergeDataAttributes(
+            restProps,
+            disabled ? dataAttributes({ disabled: true }) : undefined,
+          )}
+        >
+          {children}
+        </View>
+      </ChipProvider>
+    );
+  },
+);
+
+ChipRoot.displayName = 'ChipRoot';

package/src/chip/context.tsx

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

package/src/chip/index.ts

@@ -0,0 +1,3 @@
+export type { IChipPressablePassthrough, IChipProps, InterfaceChipProps } from './types';
+export { useChipContext } from './context';
+export { ChipRoot, type ChipRootProps } from './ChipRoot';

package/src/chip/types.ts

@@ -0,0 +1,20 @@
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type IChipPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface InterfaceChipProps extends ViewProps, IChipPressablePassthrough {
+  /**
+   * When set (and `asChild` is not used with a valid element), root renders as pressable.
+   */
+  onPress?: PressableProps['onPress'];
+  /** Disables press handling when the root is pressable. */
+  disabled?: boolean;
+  /**
+   * Merge interaction props onto a single child instead of rendering the default pressable root.
+   */
+  asChild?: boolean;
+}
+
+export type IChipProps = InterfaceChipProps;

package/src/dialog/DialogClose.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useDialog } from './context';
+import type { IDialogCloseProps } from './types';
+
+export interface DialogCloseProps extends IDialogCloseProps {}
+
+export const DialogClose = forwardRef<ComponentRef<typeof Pressable>, DialogCloseProps>(
+  ({ asChild = false, children, onPress, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp ref={ref} {...(props as PressableProps)} onPress={handlePress}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogClose.displayName = 'DialogClose';