@cdx-ui/primitives 0.0.1-alpha.9 → 0.0.1-beta.1

package/src/avatar/types.ts

@@ -0,0 +1,77 @@
+import type { ImageProps, TextProps, ViewProps } from 'react-native';
+
+// =============================================================================
+// AVATAR ROOT
+// =============================================================================
+
+export interface IAvatarProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// AVATAR IMAGE
+// =============================================================================
+
+export interface IAvatarImageProps extends Omit<ImageProps, 'source'> {
+  /** Image source — URI string or RN ImageSourcePropType */
+  src?: string;
+  source?: ImageProps['source'];
+  alt?: string;
+}
+
+// =============================================================================
+// AVATAR FALLBACK TEXT
+// =============================================================================
+
+export interface IAvatarTextProps extends TextProps {
+  /** Full name — initials will be derived automatically */
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// AVATAR ICON (fallback icon — hidden when image loads)
+// =============================================================================
+
+export interface IAvatarIconProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// AVATAR BADGE
+// =============================================================================
+
+export interface IAvatarBadgeProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+// =============================================================================
+// CONTEXT
+// =============================================================================
+
+export interface IAvatarContextValue {
+  imageLoaded: boolean;
+  imageError: boolean;
+  setImageLoaded: (loaded: boolean) => void;
+  setImageError: (error: boolean) => void;
+}
+
+// =============================================================================
+// COMPOUND COMPONENT TYPE
+// =============================================================================
+
+export type IAvatarComponentType<Root, Image, Text, Icon, Badge> = React.ForwardRefExoticComponent<
+  React.RefAttributes<Root> & React.PropsWithoutRef<Root> & IAvatarProps
+> & {
+  Image: React.ForwardRefExoticComponent<
+    React.RefAttributes<Image> & React.PropsWithoutRef<Image> & IAvatarImageProps
+  >;
+  Text: React.ForwardRefExoticComponent<
+    React.RefAttributes<Text> & React.PropsWithoutRef<Text> & IAvatarTextProps
+  >;
+  Icon: React.ForwardRefExoticComponent<
+    React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & IAvatarIconProps
+  >;
+  Badge: React.ForwardRefExoticComponent<
+    React.RefAttributes<Badge> & React.PropsWithoutRef<Badge> & IAvatarBadgeProps
+  >;
+};

package/src/button/index.tsx

@@ -1,12 +1,13 @@
 import type React from 'react';
-import { createButtonRoot } from './createButtonRoot';
 import { createButtonGroup } from './createButtonGroup';
 import { createButtonIcon } from './createButtonIcon';
+import { createButtonRoot } from './createButtonRoot';
 import { createButtonSpinner } from './createButtonSpinner';
 import { createButtonText } from './createButtonText';
 import type { IButtonComponentType } from './types';
 
 export type { IButtonProps } from './types';
+export { useButtonContext } from './context';
 
 export function createButton<
   ButtonProps,
@@ -16,32 +17,31 @@ export function createButton<
   IconProps,
   ButtonRef = unknown,
   TextRef = unknown,
->({
-  Root,
-  Text,
-  Group,
-  Spinner,
-  Icon,
-}: {
+>(BaseComponents: {
   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);
+  const Button = createButtonRoot(BaseComponents.Root);
+  const Text = createButtonText(BaseComponents.Text);
+  const Group = createButtonGroup(BaseComponents.Group);
+  const Spinner = createButtonSpinner(BaseComponents.Spinner);
+  const Icon = createButtonIcon(BaseComponents.Icon);
 
-  Button.displayName = 'Button';
-  Button.Text.displayName = 'Button.Text';
-  Button.Group.displayName = 'Button.Group';
-  Button.Spinner.displayName = 'Button.Spinner';
-  Button.Icon.displayName = 'Button.Icon';
+  Button.displayName = 'ButtonPrimitive';
+  Text.displayName = 'ButtonPrimitive.Text';
+  Group.displayName = 'ButtonPrimitive.Group';
+  Spinner.displayName = 'ButtonPrimitive.Spinner';
+  Icon.displayName = 'ButtonPrimitive.Icon';
 
-  return Button as IButtonComponentType<
+  return Object.assign(Button, {
+    Text,
+    Group,
+    Spinner,
+    Icon,
+  }) as IButtonComponentType<
     ButtonProps,
     GroupProps,
     SpinnerProps,

package/src/checkbox/createCheckboxIcon.tsx

@@ -4,9 +4,9 @@ import type { ICheckboxIconProps } from './types';
 
 export const createCheckboxIcon = <T,>(BaseCheckboxIcon: React.ComponentType<T>) =>
   forwardRef<unknown, ICheckboxIconProps>(({ children, forceMount = false, ...props }, ref) => {
-    const { isChecked } = useCheckboxContext();
+    const { isChecked, isIndeterminate } = useCheckboxContext();
 
-    if (forceMount || isChecked) {
+    if (forceMount || isChecked || isIndeterminate) {
       return (
         <BaseCheckboxIcon {...(props as T)} ref={ref}>
           {children}

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -6,6 +6,8 @@ import { CheckboxProvider } from './context';
 import type { ICheckboxProps } from './types';
 import { useCheckboxRoot } from './useCheckboxRoot';
 
+// TODO: Label is taking focus on keyboard navigation
+
 export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
   forwardRef(({ children, ...props }: ICheckboxProps, ref?: React.Ref<T>) => {
     const {

package/src/checkbox/index.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { createCheckboxGroup } from './createCheckboxGroup';
 import { createCheckboxIcon } from './createCheckboxIcon';
 import { createCheckboxIndicator } from './createCheckboxIndicator';
@@ -14,30 +15,29 @@ export type {
   ICheckboxProps,
 } from './types';
 
-export const createCheckbox = <Root, Indicator, Icon, Label, Group>({
-  Root,
-  Indicator,
-  Icon,
-  Label,
-  Group,
-}: {
+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(Root) as any;
-  Checkbox.Indicator = createCheckboxIndicator(Indicator);
-  Checkbox.Icon = createCheckboxIcon(Icon);
-  Checkbox.Label = createCheckboxLabel(Label);
-  Checkbox.Group = createCheckboxGroup(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 = 'Checkbox';
-  Checkbox.Indicator.displayName = 'Checkbox.Indicator';
-  Checkbox.Icon.displayName = 'Checkbox.Icon';
-  Checkbox.Label.displayName = 'Checkbox.Label';
-  Checkbox.Group.displayName = 'Checkbox.Group';
+  Checkbox.displayName = 'CheckboxPrimitive';
+  Indicator.displayName = 'CheckboxPrimitive.Indicator';
+  Icon.displayName = 'CheckboxPrimitive.Icon';
+  Label.displayName = 'CheckboxPrimitive.Label';
+  Group.displayName = 'CheckboxPrimitive.Group';
 
-  return Checkbox as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
-};
+  return Object.assign(Checkbox, {
+    Indicator,
+    Icon,
+    Label,
+    Group,
+  }) as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
+}

package/src/dialog/context.tsx

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

package/src/dialog/createDialogBody.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogBodyProps } from './types';
+
+export const createDialogBody = <T,>(BaseBody: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogBodyProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseBody ref={ref} {...(props as T)}>
+        {children}
+      </BaseBody>
+    );
+  });

package/src/dialog/createDialogClose.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import type { IDialogCloseProps } from './types';
+import { useDialog } from './context';
+
+export const createDialogClose = <T,>(BaseClose: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogCloseProps>(
+    ({ asChild = false, children, onPress, ...props }, ref) => {
+      const { onOpenChange } = useDialog();
+
+      const handlePress = (e?: any) => {
+        onPress?.(e);
+        onOpenChange(false);
+      };
+
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+          onPress: handlePress,
+        });
+      }
+
+      return (
+        <BaseClose ref={ref} {...(props as T)} onPress={handlePress}>
+          {children}
+        </BaseClose>
+      );
+    },
+  );

package/src/dialog/createDialogContent.tsx

@@ -0,0 +1,122 @@
+import type React from 'react';
+import { forwardRef, useCallback } from 'react';
+import { Modal, Platform, StyleSheet, View } from 'react-native';
+import { FocusScope } from '@react-native-aria/focus';
+import { useEscapeKey } from '../overlay';
+import { createPortalFn } from '../utils/createPortal';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogContentProps } from './types';
+
+export const createDialogContent = <ContentProps, OverlayProps>(
+  BaseContent: React.ComponentType<ContentProps>,
+  BaseOverlay: React.ComponentType<OverlayProps>,
+) =>
+  forwardRef(({ children, forceMount = false, ...props }: IDialogContentProps, ref?: any) => {
+    const { open, onOpenChange, closeOnBackdropPress, closeOnEscKey, nativeID, role } = useDialog();
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    useEscapeKey(open && closeOnEscKey, handleClose);
+
+    if (!(open || forceMount)) {
+      return null;
+    }
+
+    const overlayProps = {
+      ...(closeOnBackdropPress ? { onPress: handleClose } : {}),
+      accessible: false,
+      importantForAccessibility: 'no-hide-descendants' as const,
+      ...dataAttributes({ slot: 'dialog-overlay' }),
+    };
+
+    const contentSlotAttrs = dataAttributes({
+      slot: 'dialog-content',
+      state: open ? 'open' : 'closed',
+    });
+
+    const ariaProps = {
+      role,
+      'aria-modal': true,
+      'aria-labelledby': `${nativeID}-title`,
+      'aria-describedby': `${nativeID}-description`,
+    };
+
+    if (Platform.OS === 'web' && createPortalFn) {
+      return createPortalFn(
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View
+            style={{
+              position: 'fixed' as any,
+              inset: 0 as any,
+              zIndex: 50,
+              display: 'flex' as any,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <BaseOverlay {...(overlayProps as any)} />
+            <BaseContent
+              ref={ref}
+              {...contentSlotAttrs}
+              {...(props as ContentProps)}
+              {...ariaProps}
+            >
+              {children}
+            </BaseContent>
+          </View>
+        </FocusScope>,
+        document.body,
+      );
+    }
+
+    // Native layout uses two layers to support both backdrop dismiss and
+    // scrollable body content. The overlay Pressable fills the Modal via
+    // absolute positioning and handles backdrop taps. A second absolute-fill
+    // View with pointerEvents="box-none" centers the content panel — "box-none"
+    // lets taps outside the panel pass through to the overlay while allowing
+    // the panel and its children to receive touches normally.
+    //
+    // Critically, the content panel must NOT claim the JS touch responder
+    // (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
+    // blockNativeResponder, which suppresses the native UIScrollView /
+    // ScrollView pan gesture recognizer and breaks any ScrollView inside
+    // Dialog.Body.
+    //
+    // Static StyleSheet used here because these are structural layout concerns
+    // of the primitive's modal chrome — not themeable styles. They must remain
+    // stable regardless of the styled layer's className.
+    return (
+      <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View style={styles.fill}>
+            <BaseOverlay {...(overlayProps as any)} />
+            <View style={styles.center} pointerEvents="box-none">
+              <BaseContent
+                ref={ref}
+                {...contentSlotAttrs}
+                {...(props as ContentProps)}
+                {...ariaProps}
+              >
+                {children}
+              </BaseContent>
+            </View>
+          </View>
+        </FocusScope>
+      </Modal>
+    );
+  });
+
+// Structural layout for the native Modal chrome. These are not themeable —
+// they position the overlay and centering layers that the primitive manages
+// internally. Matches the pattern in OverlayContainer.tsx.
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  center: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/dialog/createDialogDescription.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogDescriptionProps } from './types';
+
+export const createDialogDescription = <T,>(BaseDescription: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogDescriptionProps>(({ children, ...props }, ref) => {
+    const { nativeID } = useDialog();
+
+    return (
+      <BaseDescription
+        ref={ref}
+        nativeID={`${nativeID}-description`}
+        {...(props as T)}
+        {...dataAttributes({ slot: 'dialog-description' })}
+      >
+        {children}
+      </BaseDescription>
+    );
+  });

package/src/dialog/createDialogFooter.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogFooterProps } from './types';
+
+export const createDialogFooter = <T,>(BaseFooter: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogFooterProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseFooter ref={ref} {...(props as T)}>
+        {children}
+      </BaseFooter>
+    );
+  });

package/src/dialog/createDialogHeader.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogHeaderProps } from './types';
+
+export const createDialogHeader = <T,>(BaseHeader: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogHeaderProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseHeader ref={ref} {...(props as T)}>
+        {children}
+      </BaseHeader>
+    );
+  });

package/src/dialog/createDialogRoot.tsx

@@ -0,0 +1,66 @@
+import type React from 'react';
+import { forwardRef, useCallback, useId, useMemo } from 'react';
+import { useControllableState } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import { DialogProvider } from './context';
+import type { IDialogRootProps } from './types';
+
+export const createDialogRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        open: openProp,
+        onOpenChange,
+        defaultOpen = false,
+        closeOnBackdropPress = true,
+        closeOnEscKey = true,
+        role = 'dialog',
+        children,
+        ...props
+      }: IDialogRootProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const [open, setOpenState] = useControllableState<boolean>({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+      });
+
+      const setOpen = useCallback(
+        (newOpen: boolean) => {
+          setOpenState(newOpen);
+        },
+        [setOpenState],
+      );
+
+      const id = useId();
+      const nativeID = `dialog-${id}`;
+
+      const contextValue = useMemo(
+        () => ({
+          open: open ?? false,
+          onOpenChange: setOpen,
+          closeOnBackdropPress,
+          closeOnEscKey,
+          nativeID,
+          role,
+        }),
+        [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
+      );
+
+      return (
+        <DialogProvider value={contextValue}>
+          <BaseRoot
+            ref={ref}
+            {...(props as T)}
+            {...dataAttributes({
+              slot: 'dialog',
+              state: open ? 'open' : 'closed',
+            })}
+          >
+            {children}
+          </BaseRoot>
+        </DialogProvider>
+      );
+    },
+  );

package/src/dialog/createDialogTitle.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogTitleProps } from './types';
+
+export const createDialogTitle = <T,>(BaseTitle: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogTitleProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseTitle ref={ref} {...(props as T)}>
+        {children}
+      </BaseTitle>
+    );
+  });

package/src/dialog/createDialogTrigger.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import type { IDialogTriggerProps } from './types';
+import { useDialog } from './context';
+
+export const createDialogTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
+  forwardRef(
+    ({ asChild = false, children, onPress, ...props }: IDialogTriggerProps, ref?: React.Ref<T>) => {
+      const { onOpenChange } = useDialog();
+
+      const handlePress = (e?: any) => {
+        onPress?.(e);
+        onOpenChange(true);
+      };
+
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+          onPress: handlePress,
+        });
+      }
+
+      return (
+        <BaseTrigger ref={ref} {...(props as T)} onPress={handlePress}>
+          {children}
+        </BaseTrigger>
+      );
+    },
+  );

package/src/dialog/index.tsx

@@ -0,0 +1,93 @@
+import type React from 'react';
+import { createDialogRoot } from './createDialogRoot';
+import { createDialogTrigger } from './createDialogTrigger';
+import { createDialogContent } from './createDialogContent';
+import { createDialogHeader } from './createDialogHeader';
+import { createDialogTitle } from './createDialogTitle';
+import { createDialogDescription } from './createDialogDescription';
+import { createDialogBody } from './createDialogBody';
+import { createDialogFooter } from './createDialogFooter';
+import { createDialogClose } from './createDialogClose';
+import { DialogProvider, useDialog } from './context';
+import type { IDialogComponentType } from './types';
+
+export { DialogProvider, useDialog };
+export type {
+  IDialogContextType,
+  IDialogRootProps,
+  IDialogTriggerProps,
+  IDialogContentProps,
+  IDialogOverlayProps,
+  IDialogHeaderProps,
+  IDialogTitleProps,
+  IDialogDescriptionProps,
+  IDialogBodyProps,
+  IDialogFooterProps,
+  IDialogCloseProps,
+} from './types';
+
+export function createDialog<
+  RootProps,
+  TriggerProps,
+  ContentProps,
+  OverlayProps,
+  HeaderProps,
+  TitleProps,
+  DescriptionProps,
+  BodyProps,
+  FooterProps,
+  CloseProps,
+>(BaseComponents: {
+  Root: React.ComponentType<RootProps>;
+  Trigger: React.ComponentType<TriggerProps>;
+  Content: React.ComponentType<ContentProps>;
+  Overlay: React.ComponentType<OverlayProps>;
+  Header: React.ComponentType<HeaderProps>;
+  Title: React.ComponentType<TitleProps>;
+  Description: React.ComponentType<DescriptionProps>;
+  Body: React.ComponentType<BodyProps>;
+  Footer: React.ComponentType<FooterProps>;
+  Close: React.ComponentType<CloseProps>;
+}) {
+  const Root = createDialogRoot(BaseComponents.Root);
+  const Trigger = createDialogTrigger(BaseComponents.Trigger);
+  const Content = createDialogContent(BaseComponents.Content, BaseComponents.Overlay);
+  const Header = createDialogHeader(BaseComponents.Header);
+  const Title = createDialogTitle(BaseComponents.Title);
+  const Description = createDialogDescription(BaseComponents.Description);
+  const Body = createDialogBody(BaseComponents.Body);
+  const Footer = createDialogFooter(BaseComponents.Footer);
+  const Close = createDialogClose(BaseComponents.Close);
+
+  Root.displayName = 'DialogPrimitive.Root';
+  Trigger.displayName = 'DialogPrimitive.Trigger';
+  Content.displayName = 'DialogPrimitive.Content';
+  Header.displayName = 'DialogPrimitive.Header';
+  Title.displayName = 'DialogPrimitive.Title';
+  Description.displayName = 'DialogPrimitive.Description';
+  Body.displayName = 'DialogPrimitive.Body';
+  Footer.displayName = 'DialogPrimitive.Footer';
+  Close.displayName = 'DialogPrimitive.Close';
+
+  return Object.assign(Root, {
+    Root,
+    Trigger,
+    Content,
+    Header,
+    Title,
+    Description,
+    Body,
+    Footer,
+    Close,
+  }) as IDialogComponentType<
+    RootProps,
+    TriggerProps,
+    ContentProps,
+    HeaderProps,
+    TitleProps,
+    DescriptionProps,
+    BodyProps,
+    FooterProps,
+    CloseProps
+  >;
+}