@cdx-ui/primitives 0.0.1-beta.17 → 0.0.1-beta.171

package/src/avatar/AvatarRoot.tsx

@@ -0,0 +1,39 @@
+import type React from 'react';
+import { forwardRef, useMemo, useState } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { AvatarProvider } from './context';
+import type { IAvatarProps, IAvatarContextValue } from './types';
+
+export interface AvatarRootProps extends IAvatarProps {
+  asChild?: boolean;
+}
+
+export const AvatarRoot = forwardRef<React.ComponentRef<typeof View>, AvatarRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageError, setImageError] = useState(false);
+
+    const contextValue = useMemo<IAvatarContextValue>(
+      () => ({ imageLoaded, imageError, setImageLoaded, setImageError }),
+      [imageLoaded, imageError],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <AvatarProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          role={props.role || 'img'}
+          accessibilityRole="image"
+          {...(props as ViewProps)}
+        >
+          {children}
+        </Comp>
+      </AvatarProvider>
+    );
+  },
+);
+
+AvatarRoot.displayName = 'AvatarRoot';

package/src/avatar/index.ts

@@ -1,43 +1,3 @@
-import type React from 'react';
-import { createAvatarBadge } from './createAvatarBadge';
-import { createAvatarIcon } from './createAvatarIcon';
-import { createAvatarText } from './createAvatarText';
-import { createAvatarImage } from './createAvatarImage';
-import { createAvatarRoot } from './createAvatarRoot';
-import type { IAvatarComponentType } from './types';
-
-export type {
-  IAvatarBadgeProps,
-  IAvatarComponentType,
-  IAvatarIconProps,
-  IAvatarTextProps,
-  IAvatarImageProps,
-  IAvatarProps,
-} from './types';
-
-export function createAvatar<Root, Image, Text, Icon, Badge>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Image: React.ComponentType<Image>;
-  Text: React.ComponentType<Text>;
-  Icon: React.ComponentType<Icon>;
-  Badge: React.ComponentType<Badge>;
-}) {
-  const Avatar = createAvatarRoot(BaseComponents.Root);
-  const AvatarImage = createAvatarImage(BaseComponents.Image);
-  const Text = createAvatarText(BaseComponents.Text);
-  const AvatarIcon = createAvatarIcon(BaseComponents.Icon);
-  const Badge = createAvatarBadge(BaseComponents.Badge);
-
-  Avatar.displayName = 'AvatarPrimitive';
-  AvatarImage.displayName = 'AvatarPrimitive.Image';
-  Text.displayName = 'AvatarPrimitive.Text';
-  AvatarIcon.displayName = 'AvatarPrimitive.Icon';
-  Badge.displayName = 'AvatarPrimitive.Badge';
-
-  return Object.assign(Avatar, {
-    Image: AvatarImage,
-    Text,
-    Icon: AvatarIcon,
-    Badge,
-  }) as unknown as IAvatarComponentType<Root, Image, Text, Icon, Badge>;
-}
+export type { IAvatarContextValue, IAvatarImageProps, IAvatarProps } from './types';
+export { useAvatarContext } from './context';
+export { AvatarRoot, type AvatarRootProps } from './AvatarRoot';

package/src/avatar/types.ts

@@ -1,4 +1,4 @@
-import type { ImageProps, TextProps, ViewProps } from 'react-native';
+import type { ImageProps, ViewProps } from 'react-native';
 
 // =============================================================================
 // AVATAR ROOT
@@ -19,31 +19,6 @@ export interface IAvatarImageProps extends Omit<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
 // =============================================================================
@@ -54,24 +29,3 @@ export interface IAvatarContextValue {
   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/breadcrumbs/BreadcrumbsRoot.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { BreadcrumbsProvider } from './context';
+import type { IBreadcrumbsProps } from './types';
+
+export interface BreadcrumbsRootProps extends IBreadcrumbsProps {
+  asChild?: boolean;
+}
+
+export const BreadcrumbsRoot = forwardRef<ComponentRef<typeof View>, BreadcrumbsRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled = false,
+      isUnderlined = false,
+      color = 'neutral',
+      accessibilityLabel = 'Breadcrumb',
+      ...props
+    },
+    ref,
+  ) => {
+    const contextValue = useMemo(
+      () => ({
+        isDisabled,
+        isUnderlined,
+        color,
+      }),
+      [color, isDisabled, isUnderlined],
+    );
+
+    const Comp = asChild ? Slot : View;
+    const a11yProps =
+      Platform.OS === 'web'
+        ? ({
+            accessibilityRole: 'navigation' as const,
+            'aria-label': accessibilityLabel,
+            'aria-disabled': isDisabled || undefined,
+          } as const)
+        : ({
+            accessibilityLabel,
+          } as const);
+
+    return (
+      <BreadcrumbsProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...a11yProps}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({ slot: 'breadcrumbs', disabled: isDisabled }),
+          )}
+        >
+          {children}
+        </Comp>
+      </BreadcrumbsProvider>
+    );
+  },
+);
+
+BreadcrumbsRoot.displayName = 'BreadcrumbsRoot';

package/src/breadcrumbs/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { BreadcrumbsContextValue } from './types';
+
+export const [BreadcrumbsProvider, useBreadcrumbsContext] =
+  createContext<BreadcrumbsContextValue>('BreadcrumbsContext');

package/src/breadcrumbs/index.ts

@@ -0,0 +1,8 @@
+export { BreadcrumbsRoot, type BreadcrumbsRootProps } from './BreadcrumbsRoot';
+export { useBreadcrumbsContext } from './context';
+export {
+  breadcrumbColorOptions,
+  type BreadcrumbColor,
+  type BreadcrumbsContextValue,
+  type IBreadcrumbsProps,
+} from './types';

package/src/breadcrumbs/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export const breadcrumbColorOptions = [
+  'neutral',
+  'action',
+  'danger',
+  'warning',
+  'success',
+  'info',
+] as const;
+
+export type BreadcrumbColor = (typeof breadcrumbColorOptions)[number];
+
+export interface IBreadcrumbsProps extends ViewProps {
+  readonly isDisabled?: boolean;
+  readonly isUnderlined?: boolean;
+  readonly color?: BreadcrumbColor;
+  /**
+   * Accessible name for the breadcrumb navigation landmark.
+   * @default `Breadcrumb`
+   */
+  readonly accessibilityLabel?: string;
+  readonly children?: ReactNode;
+}
+
+export interface BreadcrumbsContextValue {
+  readonly isDisabled: boolean;
+  readonly isUnderlined: boolean;
+  readonly color: BreadcrumbColor;
+}

package/src/button/ButtonRoot.tsx

@@ -0,0 +1,155 @@
+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 type { InteractionState } from '../types';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ButtonProvider } from './context';
+import type { IButtonProps } from './types';
+
+export interface ButtonRootProps extends Omit<IButtonProps, 'children'> {
+  asChild?: boolean;
+  children?: ((state: InteractionState) => React.ReactNode) | React.ReactNode;
+}
+
+export const ButtonRoot = forwardRef<React.ComponentRef<typeof Pressable>, ButtonRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps: pressableProps, isPressed: isActive } = usePress({
+      isDisabled,
+    });
+    const { isHovered, hoverProps } = useHover();
+
+    const contextValue = useMemo(() => {
+      return {
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isActiveProp || isActive,
+        disabled: !!isDisabled,
+        focusVisible: isFocusVisibleProp || isFocusVisible,
+      };
+    }, [
+      isHovered,
+      isHoveredProp,
+      isFocused,
+      isFocusedProp,
+      isActive,
+      isActiveProp,
+      isDisabled,
+      isFocusVisible,
+      isFocusVisibleProp,
+    ]);
+
+    if (asChild) {
+      // Dedicated asChild path: composing Button onto a child (e.g. `<Link>`) must not
+      // force `role="button"` or leak ButtonRoot's internal usePress/useHover/useFocus
+      // handlers onto it — doing so overrides the child's own role and behavior (DEVEX-6442).
+      // The hooks above still run unconditionally (rules of hooks) so ButtonProvider can
+      // expose interaction state to sub-components, but their handler props are
+      // intentionally not spread onto the child here.
+      const { onPress, ...restProps } = props;
+
+      const slotProps: Record<string, unknown> = {
+        ...restProps,
+        disabled: isDisabled,
+      };
+
+      // Only pass onPress when Button itself was given one — preserves the child's own
+      // handler (e.g. Link's navigation onPress) when Button has none of its own.
+      if (onPress) {
+        slotProps.onPress = onPress;
+      }
+
+      return (
+        <ButtonProvider value={contextValue}>
+          <Slot
+            ref={ref}
+            {...(slotProps as PressableProps)}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                hover: isHoveredProp || isHovered,
+                focus: isFocusedProp || isFocused,
+                active: isActiveProp || isActive,
+                disabled: !!isDisabled,
+                focusVisible: isFocusVisibleProp || isFocusVisible,
+              }),
+            )}
+          >
+            {typeof children === 'function' ? children(contextValue) : children}
+          </Slot>
+        </ButtonProvider>
+      );
+    }
+
+    return (
+      <ButtonProvider value={contextValue}>
+        <Pressable
+          ref={ref}
+          role={props?.role || 'button'}
+          disabled={isDisabled}
+          {...(props as PressableProps)}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: isHoveredProp || isHovered,
+              focus: isFocusedProp || isFocused,
+              active: isActiveProp || isActive,
+              disabled: !!isDisabled,
+              focusVisible: isFocusVisibleProp || isFocusVisible,
+            }),
+          )}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressableProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressableProps.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({
+                hover: isHoveredProp || isHovered,
+                focus: isFocusedProp || isFocused,
+                active: isActiveProp || isActive,
+                disabled: !!isDisabled,
+                focusVisible: isFocusVisibleProp || isFocusVisible,
+              })
+            : children}
+        </Pressable>
+      </ButtonProvider>
+    );
+  },
+);
+
+ButtonRoot.displayName = 'ButtonRoot';

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export type { IButtonProps } from './types';
+export { useButtonContext } from './context';
+export { ButtonRoot, type ButtonRootProps } from './ButtonRoot';

package/src/button/types.ts

@@ -1,21 +1,24 @@
-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 {
   /**
    * If true, the button will be in hovered state.
+   * @internal
    */
   isHovered?: boolean;
   /**
    * If true, the button will be in pressed state.
+   * @internal
    */
   isActive?: boolean;
   /**
    * If true, the button will be focused.
+   * @internal
    */
   isFocused?: boolean;
   /**
    * If true, the button focus ring will be visible.
+   * @internal
    */
   isFocusVisible?: boolean;
   /**
@@ -24,54 +27,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/calendar/CalendarGrid.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+
+export interface CalendarGridProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const CalendarGrid = forwardRef<ComponentRef<typeof View>, CalendarGridProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        accessibilityRole="none"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'calendar-grid' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+CalendarGrid.displayName = 'CalendarGrid';

package/src/calendar/CalendarRoot.tsx

@@ -0,0 +1,138 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  todayMonthId,
+  toMonthId,
+  resolveDateComponentLabels,
+  type DateId,
+  type MonthId,
+} from '@cdx-ui/formatters';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { accessibleLabelAttributes, resolveAccessibleLabel } from '../utils/accessibleLabel';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CalendarContext, type CalendarView } from './context';
+import type { ICalendarProps } from './types';
+
+export interface CalendarRootProps extends ICalendarProps, Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const CalendarRoot = forwardRef<ComponentRef<typeof View>, CalendarRootProps>(
+  (
+    {
+      asChild,
+      children,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      monthId: monthIdProp,
+      defaultMonthId,
+      onMonthIdChange,
+      minValue,
+      maxValue,
+      disabled = false,
+      locale = 'en-US',
+      labels: labelsProp,
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const accessibilityLabel = resolveAccessibleLabel({
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+    });
+    const [value, setValue] = useControllableState<DateId | undefined>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const [monthId, setMonthId] = useControllableState<MonthId>({
+      prop: monthIdProp,
+      defaultProp: defaultMonthId ?? (value ? toMonthId(value) : todayMonthId()),
+      onChange: onMonthIdChange,
+    });
+
+    const prevValueRef = useRef(value);
+    useEffect(() => {
+      if (monthIdProp !== undefined) {
+        prevValueRef.current = value;
+        return;
+      }
+      if (value === undefined || prevValueRef.current === value) {
+        prevValueRef.current = value;
+        return;
+      }
+      prevValueRef.current = value;
+      setMonthId(toMonthId(value));
+    }, [monthIdProp, setMonthId, value]);
+
+    const [view, setViewState] = useState<CalendarView>('month');
+
+    const setView = useCallback((next: CalendarView) => {
+      setViewState(next);
+    }, []);
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onValueChange: setValue,
+        monthId: monthId ?? todayMonthId(),
+        onMonthIdChange: setMonthId,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        view,
+        setView,
+      }),
+      [
+        value,
+        setValue,
+        monthId,
+        setMonthId,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        view,
+        setView,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <CalendarContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          accessibilityRole="none"
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ disabled }))}
+          {...accessibleLabelAttributes(accessibilityLabel)}
+        >
+          {children}
+        </Comp>
+      </CalendarContext.Provider>
+    );
+  },
+);
+
+CalendarRoot.displayName = 'CalendarRoot';