@cdx-ui/primitives 0.0.1-beta.18 → 0.0.1-beta.181

package/src/tile/TileGroup.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { TileGroupContextProvider } from './context';
+import type { ITileGroupProps, TileGroupType } from './types';
+
+/**
+ * Internal widening of the public discriminated union: the runtime accepts any value
+ * shape and reads `type` to decide branch behavior. The public API stays narrow.
+ */
+type WidenedTileGroupProps = ViewProps & {
+  asChild?: boolean;
+  type: TileGroupType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  max?: number;
+  isDisabled?: boolean;
+  'aria-label'?: string;
+};
+
+export type TileGroupProps = ITileGroupProps;
+
+export const TileGroup = forwardRef<ComponentRef<typeof View>, TileGroupProps>((props, ref) => {
+  const {
+    asChild = false,
+    children,
+    type,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    max: maxProp,
+    isDisabled = false,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props as WidenedTileGroupProps;
+
+  const max = maxProp ?? Number.POSITIVE_INFINITY;
+
+  const defaultProp =
+    defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
+
+  const [state, setState] = useControllableState<string | string[] | undefined>({
+    prop: valueProp,
+    defaultProp,
+    onChange: (next) => {
+      if (next !== undefined) {
+        onValueChange?.(next);
+      }
+    },
+  });
+
+  const isSelected = useCallback(
+    (tileValue: string) => {
+      if (type === 'single') {
+        return state === tileValue;
+      }
+      return Array.isArray(state) && state.includes(tileValue);
+    },
+    [type, state],
+  );
+
+  const isTileDisabledByGroup = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return true;
+      }
+      if (type !== 'multiple') {
+        return false;
+      }
+      const arr = Array.isArray(state) ? state : [];
+      if (arr.length < max) {
+        return false;
+      }
+      return !arr.includes(tileValue);
+    },
+    [isDisabled, type, state, max],
+  );
+
+  const toggleValue = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single') {
+        if (state === tileValue) {
+          return;
+        }
+        setState(tileValue);
+        return;
+      }
+      const arr = Array.isArray(state) ? [...state] : [];
+      const idx = arr.indexOf(tileValue);
+      if (idx >= 0) {
+        arr.splice(idx, 1);
+        setState(arr);
+      } else if (arr.length < max) {
+        arr.push(tileValue);
+        setState(arr);
+      }
+    },
+    [isDisabled, type, state, setState, max],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      type,
+      value: state,
+      toggleValue,
+      isSelected,
+      isTileDisabledByGroup,
+      isGroupDisabled: isDisabled,
+      max,
+    }),
+    [type, state, toggleValue, isSelected, isTileDisabledByGroup, isDisabled, max],
+  );
+
+  const role = type === 'single' ? 'radiogroup' : 'group';
+  const Comp = asChild ? Slot : View;
+
+  return (
+    <TileGroupContextProvider value={contextValue}>
+      <Comp
+        ref={ref}
+        role={role}
+        {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
+        {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
+        {...(rest as ViewProps)}
+      >
+        {children}
+      </Comp>
+    </TileGroupContextProvider>
+  );
+});
+
+TileGroup.displayName = 'TileGroup';

package/src/tile/TileRoot.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, useControllableState } 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 { TileProvider, useOptionalTileGroupContext } from './context';
+import type { ITileProps, ITilePressablePassthrough } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignSelf: 'stretch' as const,
+  alignItems: 'center' as const,
+};
+
+export interface TileRootProps extends ITileProps {}
+
+export const TileRoot = forwardRef<ComponentRef<typeof Pressable>, TileRootProps>(
+  (
+    {
+      asChild = false,
+      value,
+      disabled: disabledProp = false,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useOptionalTileGroupContext();
+
+    const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
+      prop: controlledSelected,
+      defaultProp: defaultSelected ?? false,
+      onChange: (next) => {
+        onSelectedChange?.(next);
+      },
+    });
+
+    const isSelected = group ? group.isSelected(value) : standaloneSelected;
+    const disabledByGroup = group ? group.isTileDisabledByGroup(value) : false;
+    const isDisabled = disabledByGroup || disabledProp;
+    const cannotToggle = isDisabled;
+
+    const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled: cannotToggle });
+    const { hoverProps, isHovered } = useHover();
+
+    // Standalone tiles use checkbox semantics (independent on/off toggle).
+    const selectionType = group ? group.type : 'multiple';
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+        ...(selectionType === 'single' ? { selected: isSelected } : { checked: isSelected }),
+      }),
+      [isDisabled, isSelected, selectionType],
+    );
+
+    const tileContext = useMemo(
+      () => ({ value, isSelected, isDisabled, selectionType }),
+      [value, isSelected, isDisabled, selectionType],
+    );
+
+    const passthrough = rest as ITilePressablePassthrough;
+
+    const composedOnPress = composeEventHandlers(onPress, () => {
+      if (cannotToggle) {
+        return;
+      }
+      if (group) {
+        group.toggleValue(value);
+      } else {
+        setStandaloneSelected(!standaloneSelected);
+      }
+    });
+
+    const role = selectionType === 'single' ? 'radio' : 'checkbox';
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <TileProvider value={tileContext}>
+        <Comp
+          ref={ref}
+          accessibilityRole={role}
+          role={role}
+          accessibilityState={accessibilityState}
+          aria-checked={isSelected}
+          {...(isDisabled ? { 'aria-disabled': true as const } : {})}
+          disabled={isDisabled}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              state: isSelected ? 'selected' : 'unselected',
+              disabled: isDisabled,
+              active: isPressed,
+              hover: isHovered,
+              focus: isFocused,
+              focusVisible: isFocusVisible,
+            }),
+          )}
+          style={[rowStyle, style]}
+          onPress={isDisabled ? undefined : composedOnPress}
+          onPressIn={composeEventHandlers(passthrough.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(passthrough.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(passthrough.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(passthrough.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </TileProvider>
+    );
+  },
+);
+
+TileRoot.displayName = 'TileRoot';

package/src/tile/index.ts

@@ -1,19 +1,5 @@
-import type React from 'react';
-import { createTileContent } from './createTileContent';
-import { createTileDescription } from './createTileDescription';
-import { createTileGroup } from './createTileGroup';
-import { createTileIndicator } from './createTileIndicator';
-import { createTileLeadingSlot } from './createTileLeadingSlot';
-import { createTileRoot } from './createTileRoot';
-import { createTileTitle } from './createTileTitle';
-import { createTileTrailingSlot } from './createTileTrailingSlot';
-import type { ITileComponentType } from './types';
-
 export type {
-  ITileComponentType,
-  ITileContentProps,
   ITileContextValue,
-  ITileDescriptionProps,
   ITileGroupMultipleProps,
   ITileGroupProps,
   ITileGroupSingleProps,
@@ -22,67 +8,11 @@ export type {
   ITileLeadingSlotProps,
   ITilePressablePassthrough,
   ITileProps,
-  ITileTitleProps,
   ITileTrailingSlotProps,
   TileGroupType,
   TileGroupValue,
 } from './types';
 
 export { TileProvider, useTileContext } from './context';
-
-export function createTile<
-  Pressable,
-  Leading,
-  Content,
-  Title,
-  Description,
-  Indicator,
-  TrailingSlot,
-  Group,
->(BaseComponents: {
-  Pressable: React.ComponentType<Pressable>;
-  LeadingSlot: React.ComponentType<Leading>;
-  Content: React.ComponentType<Content>;
-  Title: React.ComponentType<Title>;
-  Description: React.ComponentType<Description>;
-  Indicator: React.ComponentType<Indicator>;
-  TrailingSlot: React.ComponentType<TrailingSlot>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Tile = createTileRoot(BaseComponents.Pressable);
-  const Group = createTileGroup(BaseComponents.Group);
-  const LeadingSlot = createTileLeadingSlot(BaseComponents.LeadingSlot);
-  const Content = createTileContent(BaseComponents.Content);
-  const Title = createTileTitle(BaseComponents.Title);
-  const Description = createTileDescription(BaseComponents.Description);
-  const Indicator = createTileIndicator(BaseComponents.Indicator);
-  const TrailingSlot = createTileTrailingSlot(BaseComponents.TrailingSlot);
-
-  Tile.displayName = 'TilePrimitive';
-  Group.displayName = 'TilePrimitive.Group';
-  LeadingSlot.displayName = 'TilePrimitive.LeadingSlot';
-  Content.displayName = 'TilePrimitive.Content';
-  Title.displayName = 'TilePrimitive.Title';
-  Description.displayName = 'TilePrimitive.Description';
-  Indicator.displayName = 'TilePrimitive.Indicator';
-  TrailingSlot.displayName = 'TilePrimitive.TrailingSlot';
-
-  return Object.assign(Tile, {
-    Group,
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Indicator,
-    TrailingSlot,
-  }) as ITileComponentType<
-    Pressable,
-    Leading,
-    Content,
-    Title,
-    Description,
-    Indicator,
-    TrailingSlot,
-    Group
-  >;
-}
+export { TileRoot, type TileRootProps } from './TileRoot';
+export { TileGroup, type TileGroupProps } from './TileGroup';

package/src/tile/types.ts

@@ -1,12 +1,12 @@
-import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
-import type { PressableProps, TextProps, ViewProps } from 'react-native';
-import type { WithStyleContextProps } from '@cdx-ui/utils';
+import type { PressableProps, ViewProps } from 'react-native';
 
 export type TileGroupType = 'single' | 'multiple';
 
 export type TileGroupValue = string | string[] | undefined;
 
-interface ITileGroupBaseProps extends ViewProps, WithStyleContextProps {
+interface ITileGroupBaseProps extends ViewProps {
+  /** Merge group props onto a single child instead of rendering the default View. */
+  asChild?: boolean;
   /** Disables the whole group. */
   isDisabled?: boolean;
   /** Accessible name for the group (radiogroup / group). */
@@ -68,8 +68,9 @@ export type ITilePressablePassthrough = Partial<
   Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
 >;
 
-export interface ITileProps
-  extends PressableProps, ITilePressablePassthrough, WithStyleContextProps {
+export interface ITileProps extends PressableProps, ITilePressablePassthrough {
+  /** Merge tile props onto a single child instead of rendering the default Pressable. */
+  asChild?: boolean;
   /**
    * Identifies this tile within `Tile.Group`. Must be unique within the group.
    * Standalone tiles still require a value (useful for form submission, analytics, etc.).
@@ -103,9 +104,6 @@ export interface ITileLeadingSlotProps extends ViewProps {
   'aria-hidden'?: boolean;
 }
 
-export type ITileContentProps = ViewProps;
-export type ITileTitleProps = TextProps;
-export type ITileDescriptionProps = TextProps;
 export interface ITileIndicatorProps extends ViewProps {
   /**
    * Explicit indicator visual. When inside a `Tile.Group`, auto-infers from `type`
@@ -114,7 +112,6 @@ export interface ITileIndicatorProps extends ViewProps {
    * a radio-style visual is needed.
    */
   indicatorType?: 'radio' | 'checkbox';
-  children?: ReactNode;
 }
 
 /**
@@ -122,32 +119,3 @@ export interface ITileIndicatorProps extends ViewProps {
  * is **not** the radio/checkbox selection affordance. For that, use `Tile.Indicator`.
  */
 export type ITileTrailingSlotProps = ViewProps;
-
-export type ITileComponentType<
-  RootRef,
-  LeadingSlot,
-  Content,
-  Title,
-  Description,
-  Indicator,
-  TrailingSlot,
-  Group,
-> = ForwardRefExoticComponent<RefAttributes<RootRef> & ITileProps> & {
-  Group: ForwardRefExoticComponent<RefAttributes<Group> & PropsWithoutRef<Group> & ITileGroupProps>;
-  LeadingSlot: ForwardRefExoticComponent<
-    RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & ITileLeadingSlotProps
-  >;
-  Content: ForwardRefExoticComponent<
-    RefAttributes<Content> & PropsWithoutRef<Content> & ITileContentProps
-  >;
-  Title: ForwardRefExoticComponent<RefAttributes<Title> & PropsWithoutRef<Title> & ITileTitleProps>;
-  Description: ForwardRefExoticComponent<
-    RefAttributes<Description> & PropsWithoutRef<Description> & ITileDescriptionProps
-  >;
-  Indicator: ForwardRefExoticComponent<
-    RefAttributes<Indicator> & PropsWithoutRef<Indicator> & ITileIndicatorProps
-  >;
-  TrailingSlot: ForwardRefExoticComponent<
-    RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & ITileTrailingSlotProps
-  >;
-};

package/src/toast/ToastRoot.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, useId } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { ToastProvider } from './context';
+import type { IToastProps } from './types';
+
+export interface ToastRootProps extends IToastProps {
+  asChild?: boolean;
+}
+
+export const ToastRoot = forwardRef<View, ToastRootProps>(
+  ({ asChild, id, role = 'status', ...viewProps }, ref) => {
+    const generatedId = useId();
+    const nativeID = id || generatedId;
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ToastProvider value={{ nativeID }}>
+        <Comp
+          ref={ref}
+          role={role}
+          {...(Platform.OS !== 'web' && {
+            'aria-live': role === 'alert' ? 'assertive' : 'polite',
+            'aria-atomic': true,
+          })}
+          {...(Platform.OS === 'web' &&
+            role === 'alert' && {
+              'aria-live': 'assertive',
+            })}
+          nativeID={nativeID}
+          {...viewProps}
+        />
+      </ToastProvider>
+    );
+  },
+);
+
+ToastRoot.displayName = 'ToastRoot';

package/src/toast/context.tsx

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

package/src/toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToastContext } from './context';
+export { ToastRoot, type ToastRootProps } from './ToastRoot';

package/src/toast/types.ts

@@ -0,0 +1,17 @@
+import type { ViewProps } from 'react-native';
+
+export interface IToastContextValue {
+  /** Unique identifier for the toast */
+  nativeID: string;
+}
+
+export interface IToastProps extends ViewProps {
+  /** Unique identifier for the toast */
+  id?: string;
+  /**
+   * ARIA role for the toast element.
+   * Use `'alert'` for urgent/danger toasts that require assertive announcements.
+   * @default 'status'
+   */
+  role?: 'status' | 'alert';
+}

package/src/tooltip/TooltipContent.tsx

@@ -0,0 +1,117 @@
+import { forwardRef, useCallback, useLayoutEffect, type ComponentRef } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { Portal } from '../portal';
+import { useAnchoredOverlay, useDismissOverlay, useEscapeKey } from '../overlay';
+import { createPortalFn } from '../utils/createPortal';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { TooltipProvider, useTooltipContext } from './context';
+import { TOOLTIP_Z_INDEX } from './getTooltipPosition';
+import type { ITooltipContentProps } from './types';
+
+export interface TooltipContentProps extends ITooltipContentProps {}
+
+export const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipContentProps>(
+  ({ asChild, children, onLayout, ...props }, ref) => {
+    const contextValue = useTooltipContext();
+    const {
+      open,
+      setOpen,
+      isDisabled,
+      placement,
+      offset,
+      trigger,
+      triggerRef,
+      contentId,
+      resolvedPlacement,
+      setResolvedPlacement,
+    } = contextValue;
+
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: overlayStyle,
+      position,
+    } = useAnchoredOverlay(triggerRef, open && !isDisabled, {
+      placement,
+      offset,
+      collisionBehavior: 'none',
+      width: 'content',
+    });
+    const mergedRef = mergeRefs(ref, floatingRef);
+
+    const handleDismiss = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+
+    const shouldDismissOnInteraction =
+      trigger === 'click' && Platform.OS === 'web' && open && !isDisabled;
+
+    useDismissOverlay(shouldDismissOnInteraction, floatingRef, [triggerRef], handleDismiss);
+    useEscapeKey(shouldDismissOnInteraction, handleDismiss);
+
+    useLayoutEffect(() => {
+      if (
+        position &&
+        (resolvedPlacement?.side !== position.resolvedPlacement.side ||
+          resolvedPlacement.align !== position.resolvedPlacement.align)
+      ) {
+        setResolvedPlacement(position.resolvedPlacement);
+      }
+    }, [position, resolvedPlacement, setResolvedPlacement]);
+
+    if (!open || isDisabled) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+    const webProps =
+      Platform.OS === 'web'
+        ? ({
+            id: contentId,
+            role: 'tooltip',
+          } as const)
+        : ({
+            accessibilityRole: 'text' as const,
+            accessibilityLiveRegion: 'polite' as const,
+          } as const);
+
+    const popup = (
+      <TooltipProvider value={contextValue}>
+        <View pointerEvents="none" style={[overlayStyle, { zIndex: TOOLTIP_Z_INDEX }]}>
+          <Comp
+            ref={mergedRef}
+            onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+            {...props}
+            {...webProps}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                side: position?.resolvedPlacement.side,
+                align: position?.resolvedPlacement.align,
+                state: 'open',
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </View>
+      </TooltipProvider>
+    );
+
+    if (Platform.OS === 'web' && createPortalFn && typeof document !== 'undefined') {
+      return createPortalFn(popup, document.body);
+    }
+
+    return (
+      <Portal name={contentId}>
+        <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
+          {popup}
+        </View>
+      </Portal>
+    );
+  },
+);
+
+TooltipContent.displayName = 'TooltipContent';