@cdx-ui/primitives 0.0.1-beta.16 → 0.0.1-beta.160

package/src/tooltip/TooltipRoot.tsx

@@ -0,0 +1,187 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { TooltipProvider } from './context';
+import type { ResolvedTooltipPlacement } from './getTooltipPosition';
+import type { ITooltipProps } from './types';
+
+export interface TooltipRootProps extends ITooltipProps {
+  asChild?: boolean;
+}
+
+export const TooltipRoot = forwardRef<ComponentRef<typeof View>, TooltipRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled = false,
+      enterDelay = 0,
+      leaveDelay = 0,
+      isOpen: isOpenProp,
+      defaultOpen = false,
+      onOpen,
+      onClose,
+      placement = 'top',
+      offset = 8,
+      trigger = 'hover',
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: isOpenProp,
+      defaultProp: defaultOpen,
+      onChange: (next) => {
+        if (next) {
+          onOpen?.();
+        } else {
+          onClose?.();
+        }
+      },
+    });
+
+    const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const leaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const triggerRef = useRef<ComponentRef<typeof View> | null>(null);
+    const [resolvedPlacement, setResolvedPlacement] = useState<ResolvedTooltipPlacement | null>(
+      null,
+    );
+
+    const clearTimers = useCallback(() => {
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = null;
+      }
+      if (leaveTimerRef.current) {
+        clearTimeout(leaveTimerRef.current);
+        leaveTimerRef.current = null;
+      }
+    }, []);
+
+    const setOpen = useCallback(
+      (nextOpen: boolean) => {
+        if (isDisabled && nextOpen) {
+          return;
+        }
+        setOpenState(nextOpen);
+      },
+      [isDisabled, setOpenState],
+    );
+
+    const requestOpen = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+
+      clearTimers();
+
+      if (leaveTimerRef.current) {
+        clearTimeout(leaveTimerRef.current);
+        leaveTimerRef.current = null;
+      }
+
+      if (enterDelay <= 0) {
+        setOpen(true);
+        return;
+      }
+
+      enterTimerRef.current = setTimeout(() => {
+        setOpen(true);
+      }, enterDelay);
+    }, [clearTimers, enterDelay, isDisabled, setOpen]);
+
+    const requestClose = useCallback(() => {
+      clearTimers();
+
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = null;
+      }
+
+      if (leaveDelay <= 0) {
+        setOpen(false);
+        return;
+      }
+
+      leaveTimerRef.current = setTimeout(() => {
+        setOpen(false);
+      }, leaveDelay);
+    }, [clearTimers, leaveDelay, setOpen]);
+
+    useEffect(() => clearTimers, [clearTimers]);
+
+    const reactId = useId();
+    const triggerId = `tooltip-trigger-${reactId}`;
+    const contentId = `tooltip-content-${reactId}`;
+
+    const contextValue = useMemo(
+      () => ({
+        open: open ?? false,
+        setOpen,
+        requestOpen,
+        requestClose,
+        clearTimers,
+        isDisabled,
+        enterDelay,
+        leaveDelay,
+        placement,
+        offset,
+        trigger,
+        triggerRef,
+        contentId,
+        triggerId,
+        resolvedPlacement,
+        setResolvedPlacement,
+      }),
+      [
+        clearTimers,
+        contentId,
+        enterDelay,
+        isDisabled,
+        leaveDelay,
+        offset,
+        open,
+        placement,
+        requestClose,
+        requestOpen,
+        resolvedPlacement,
+        setOpen,
+        trigger,
+        triggerId,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <TooltipProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(props as ViewProps)}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              state: open ? 'open' : 'closed',
+              disabled: isDisabled,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </TooltipProvider>
+    );
+  },
+);
+
+TooltipRoot.displayName = 'TooltipRoot';

package/src/tooltip/TooltipTrigger.tsx

@@ -0,0 +1,160 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import { Platform, Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useTooltipContext } from './context';
+import type { ITooltipTriggerProps } from './types';
+
+export interface TooltipTriggerProps extends ITooltipTriggerProps {}
+
+export const TooltipTrigger = forwardRef<ComponentRef<typeof Pressable>, TooltipTriggerProps>(
+  (
+    {
+      asChild = true,
+      children,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      onLongPress,
+      onPress,
+      onLayout,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      open,
+      setOpen,
+      requestOpen,
+      requestClose,
+      isDisabled,
+      trigger,
+      triggerRef,
+      contentId,
+      triggerId,
+    } = useTooltipContext();
+
+    const mergedRef = mergeRefs(ref, triggerRef);
+    const { hoverProps, isHovered } = useHover({}, mergedRef);
+    const { focusProps, isFocused } = useFocus();
+
+    const handleOpen = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+      requestOpen();
+    }, [isDisabled, requestOpen]);
+
+    const handleClose = useCallback(() => {
+      requestClose();
+    }, [requestClose]);
+
+    const isWeb = Platform.OS === 'web';
+    const usesLongPressOnNative = !isWeb && (trigger === 'hover' || trigger === 'focus');
+    const usesClickToggle = trigger === 'click';
+
+    const handlePress = composeEventHandlers(onPress, () => {
+      if (!usesClickToggle || isDisabled) {
+        return;
+      }
+      setOpen(!open);
+    });
+
+    const handleHoverIn = composeEventHandlers(
+      composeEventHandlers(onHoverIn, hoverProps.onHoverIn),
+      () => {
+        if (isWeb && trigger === 'hover') {
+          handleOpen();
+        }
+      },
+    );
+
+    const handleHoverOut = composeEventHandlers(
+      composeEventHandlers(onHoverOut, hoverProps.onHoverOut),
+      () => {
+        if (isWeb && trigger === 'hover') {
+          handleClose();
+        }
+      },
+    );
+
+    const handleFocus = composeEventHandlers(
+      composeEventHandlers(onFocus, focusProps.onFocus),
+      () => {
+        if (!isWeb) {
+          return;
+        }
+        if (trigger === 'focus' || trigger === 'hover') {
+          handleOpen();
+        }
+      },
+    );
+
+    const handleBlur = composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur), () => {
+      if (!isWeb) {
+        return;
+      }
+      if (trigger === 'focus' || trigger === 'hover') {
+        handleClose();
+      }
+    });
+
+    const handleLongPress = composeEventHandlers(onLongPress, () => {
+      if (usesLongPressOnNative) {
+        handleOpen();
+      }
+    });
+
+    const webHoverProps =
+      isWeb && trigger === 'hover'
+        ? ({
+            onPointerEnter: handleHoverIn,
+            onPointerLeave: handleHoverOut,
+          } as const)
+        : {};
+
+    const webA11yProps = isWeb
+      ? ({
+          id: triggerId,
+          'aria-describedby': open ? contentId : undefined,
+          ...(trigger === 'click' ? { 'aria-expanded': open } : {}),
+        } as const)
+      : {};
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={mergedRef}
+        disabled={isDisabled}
+        {...(props as PressableProps)}
+        {...webA11yProps}
+        {...focusProps}
+        {...webHoverProps}
+        onLayout={onLayout}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            triggerHover: isHovered,
+            triggerFocus: isFocused,
+            disabled: isDisabled,
+          }),
+        )}
+        onHoverIn={handleHoverIn}
+        onHoverOut={handleHoverOut}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onLongPress={handleLongPress}
+        onPress={handlePress}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TooltipTrigger.displayName = 'TooltipTrigger';

package/src/tooltip/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { TooltipContextValue } from './types';
+
+export const [TooltipProvider, useTooltipContext] =
+  createContext<TooltipContextValue>('TooltipContext');

package/src/tooltip/getTooltipPosition.ts

@@ -0,0 +1,80 @@
+import { Platform, type ViewStyle } from 'react-native';
+import type { AnchorLayout } from '../overlay/useAnchorPosition';
+import {
+  getAnchoredOverlayPosition,
+  OVERLAY_PLACEMENTS,
+  type OverlayAlign,
+  type OverlayPlacement,
+  type OverlaySide,
+  type ResolvedOverlayPlacement,
+} from '../overlay/getAnchoredOverlayPosition';
+
+export const TOOLTIP_PLACEMENTS = OVERLAY_PLACEMENTS;
+
+export type TooltipPlacement = OverlayPlacement;
+export type TooltipTriggerMode = 'hover' | 'focus' | 'click';
+export type TooltipSide = OverlaySide;
+export type TooltipAlign = OverlayAlign;
+export type ResolvedTooltipPlacement = Readonly<ResolvedOverlayPlacement>;
+
+export const TOOLTIP_Z_INDEX = 9999;
+
+function getCompatibilityTransform({
+  side,
+  align,
+}: ResolvedTooltipPlacement): ViewStyle['transform'] {
+  if (side === 'top') {
+    return align === 'center'
+      ? ([{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'])
+      : align === 'end'
+        ? ([{ translateX: '-100%' }, { translateY: '-100%' }] as ViewStyle['transform'])
+        : ([{ translateY: '-100%' }] as ViewStyle['transform']);
+  }
+
+  if (side === 'bottom') {
+    return align === 'center'
+      ? ([{ translateX: '-50%' }] as ViewStyle['transform'])
+      : align === 'end'
+        ? ([{ translateX: '-100%' }] as ViewStyle['transform'])
+        : undefined;
+  }
+
+  if (side === 'left') {
+    return align === 'center'
+      ? ([{ translateX: '-100%' }, { translateY: '-50%' }] as ViewStyle['transform'])
+      : align === 'end'
+        ? ([{ translateX: '-100%' }, { translateY: '-100%' }] as ViewStyle['transform'])
+        : ([{ translateX: '-100%' }] as ViewStyle['transform']);
+  }
+
+  return align === 'center'
+    ? ([{ translateY: '-50%' }] as ViewStyle['transform'])
+    : align === 'end'
+      ? ([{ translateY: '-100%' }] as ViewStyle['transform'])
+      : undefined;
+}
+
+export function getTooltipAnchorStyle(
+  anchor: AnchorLayout,
+  placement: TooltipPlacement,
+  offset: number,
+  viewport: { width: number; height: number },
+): { style: ViewStyle; resolved: ResolvedTooltipPlacement } {
+  const result = getAnchoredOverlayPosition(anchor, { width: 0, height: 0 }, viewport, {
+    placement,
+    offset,
+    collisionBehavior: 'none',
+  });
+  const resolved = result.resolvedPlacement;
+  const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
+  return {
+    style: {
+      position,
+      left: result.style.left,
+      top: result.style.top,
+      zIndex: TOOLTIP_Z_INDEX,
+      transform: getCompatibilityTransform(resolved),
+    },
+    resolved,
+  };
+}

package/src/tooltip/index.ts

@@ -0,0 +1,19 @@
+export { TooltipProvider, useTooltipContext } from './context';
+export { TooltipRoot, type TooltipRootProps } from './TooltipRoot';
+export { TooltipTrigger, type TooltipTriggerProps } from './TooltipTrigger';
+export { TooltipContent, type TooltipContentProps } from './TooltipContent';
+export {
+  TOOLTIP_PLACEMENTS,
+  getTooltipAnchorStyle,
+  type TooltipPlacement,
+  type TooltipTriggerMode,
+  type TooltipSide,
+  type TooltipAlign,
+  type ResolvedTooltipPlacement,
+} from './getTooltipPosition';
+export type {
+  ITooltipProps,
+  ITooltipTriggerProps,
+  ITooltipContentProps,
+  TooltipContextValue,
+} from './types';

package/src/tooltip/types.ts

@@ -0,0 +1,85 @@
+import type { ComponentRef, ReactNode, RefObject } from 'react';
+import type { PressableProps, View, ViewProps } from 'react-native';
+import type {
+  ResolvedTooltipPlacement,
+  TooltipPlacement,
+  TooltipTriggerMode,
+} from './getTooltipPosition';
+
+export interface ITooltipProps extends Omit<ViewProps, 'children'> {
+  readonly children?: ReactNode;
+  readonly isDisabled?: boolean;
+  /**
+   * Milliseconds to wait before showing the tooltip.
+   * @default `0`
+   */
+  readonly enterDelay?: number;
+  /**
+   * Milliseconds to wait before hiding the tooltip.
+   * @default `0`
+   */
+  readonly leaveDelay?: number;
+  /**
+   * Controlled open state.
+   */
+  readonly isOpen?: boolean;
+  /**
+   * Uncontrolled initial open state.
+   * @default `false`
+   */
+  readonly defaultOpen?: boolean;
+  /**
+   * Called when the tooltip opens.
+   */
+  readonly onOpen?: () => void;
+  /**
+   * Called when the tooltip closes.
+   */
+  readonly onClose?: () => void;
+  /**
+   * Preferred placement relative to the trigger.
+   * @default `'top'`
+   */
+  readonly placement?: TooltipPlacement;
+  /**
+   * Distance in pixels between the tooltip and the trigger.
+   * @default `8`
+   */
+  readonly offset?: number;
+  /**
+   * Interaction that opens the tooltip. On web, `hover` opens on hover and focus; on native, long press.
+   * `focus` opens on focus (web) or long press (native). `click` toggles on press — on web, dismisses on outside click or Escape.
+   * @default `'hover'`
+   */
+  readonly trigger?: TooltipTriggerMode;
+}
+
+export interface TooltipContextValue {
+  readonly open: boolean;
+  readonly setOpen: (open: boolean) => void;
+  readonly requestOpen: () => void;
+  readonly requestClose: () => void;
+  readonly clearTimers: () => void;
+  readonly isDisabled: boolean;
+  readonly enterDelay: number;
+  readonly leaveDelay: number;
+  readonly placement: TooltipPlacement;
+  readonly offset: number;
+  readonly trigger: TooltipTriggerMode;
+  readonly triggerRef: RefObject<ComponentRef<typeof View> | null>;
+  readonly contentId: string;
+  readonly triggerId: string;
+  readonly resolvedPlacement: ResolvedTooltipPlacement | null;
+  readonly setResolvedPlacement: (placement: ResolvedTooltipPlacement) => void;
+}
+
+export interface ITooltipTriggerProps extends PressableProps {
+  /** When true, merges trigger props onto the single child element. */
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface ITooltipContentProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}

package/src/uniwind.d.ts

@@ -1,3 +1,4 @@
 declare module 'uniwind' {
   export function useCSSVariable(name: string): string | number | undefined;
+  export function useCSSVariable(names: readonly string[]): (string | number | undefined)[];
 }

package/src/utils/accessibleLabel.ts

@@ -0,0 +1,22 @@
+export interface AccessibleLabelProps {
+  accessibilityLabel?: string;
+  'aria-label'?: string;
+}
+
+export function resolveAccessibleLabel({
+  accessibilityLabel,
+  'aria-label': ariaLabel,
+}: AccessibleLabelProps): string | undefined {
+  return accessibilityLabel ?? ariaLabel;
+}
+
+export function accessibleLabelAttributes(label: string | undefined) {
+  if (label === undefined) {
+    return {};
+  }
+
+  return {
+    accessibilityLabel: label,
+    'aria-label': label,
+  };
+}

package/src/utils/assignRef.ts

@@ -0,0 +1,11 @@
+import type { ForwardedRef } from 'react';
+
+export function assignRef<T>(ref: ForwardedRef<T>, value: T | null) {
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}

package/src/utils/createPortal.ts

@@ -10,8 +10,10 @@ type CreatePortalFn = (children: React.ReactNode, container: Element) => React.R
  * `react-dom`, which would cause a build error on native platforms.
  */
 export const createPortalFn: CreatePortalFn | undefined = (() => {
-  if (Platform.OS !== 'web') return undefined;
   try {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
     // eslint-disable-next-line @typescript-eslint/no-require-imports
     return (require('react-dom') as { createPortal: CreatePortalFn }).createPortal;
   } catch {

package/src/utils/createPortal.web.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+import { createPortal } from 'react-dom';
+
+type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+
+/**
+ * Web implementation — statically imports `ReactDOM.createPortal`.
+ *
+ * The base (`.ts`) module resolves `react-dom` lazily via `require` so native
+ * bundles never reference it. That `require` is `undefined` in browser ESM
+ * bundles that don't transform mixed CommonJS/ESM (e.g. the docs site's Vite
+ * build), so the base module silently resolves `createPortalFn` to `undefined`
+ * there. That forces `OverlayContainer` onto its native `Modal` + Reanimated
+ * layout-animation path, leaving web overlays (Select, DatePicker) stuck at
+ * opacity 0. A static ESM import guarantees `createPortalFn` resolves on web
+ * regardless of the bundler's CommonJS interop.
+ */
+export const createPortalFn: CreatePortalFn = createPortal;

package/src/utils/dataAttributes.ts

@@ -1,28 +1,10 @@
 /**
- * Produces platform-specific props for data attributes.
+ * Produces `data-*` props for native platforms (consumed by Uniwind).
+ * Web (.web.ts): returns a `dataSet` object consumed by React Native Web instead.
  *
- * Native: individual `data-*` props consumed by Uniwind.
- * Web (.web.ts): a `dataSet` object consumed by React Native Web.
- *
- * Boolean values serialize to `"true"` / `"false"` strings.
- * String values pass through as-is.
- * Undefined values are omitted.
+ * Delegates to `domDataAttributes` so the conversion logic has a single source of truth.
  */
-
-type DataAttributeValue = boolean | string | undefined;
-
-function camelToKebab(str: string): string {
-  return str.replaceAll(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
-}
-
-export function dataAttributes(attrs: Record<string, DataAttributeValue>): Record<string, string> {
-  const result: Record<string, string> = {};
-  for (const key in attrs) {
-    const value = attrs[key];
-    if (value === undefined) {
-      continue;
-    }
-    result[`data-${camelToKebab(key)}`] = typeof value === 'boolean' ? String(value) : value;
-  }
-  return result;
-}
+export {
+  domDataAttributes as dataAttributes,
+  mergeDomDataAttributes as mergeDataAttributes,
+} from './domDataAttributes';

package/src/utils/dataAttributes.web.ts

@@ -22,3 +22,27 @@ export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
   }
   return { dataSet };
 }
+
+/**
+ * Merges multiple sources of data attributes into a single `{ dataSet }` prop
+ * on web. Each source may be a `dataAttributes()` output (`{ dataSet: {...} }`)
+ * or any props object that contains a `dataSet` key — other keys are ignored.
+ * Later sources override earlier sources on inner-key conflicts.
+ *
+ * Required when an element receives data attributes from more than one source:
+ * a plain prop spread merges by replacing the `dataSet` key entirely, so e.g.
+ * `{...dataAttributes({ slot })} {...dataAttributes({ hover })}` keeps only the
+ * second `dataSet`. Use `mergeDataAttributes(...)` to combine them safely.
+ */
+export function mergeDataAttributes(
+  ...sources: ({ dataSet?: Record<string, unknown> } | Record<string, unknown> | undefined)[]
+): { dataSet: Record<string, unknown> } {
+  const dataSet: Record<string, unknown> = {};
+  for (const source of sources) {
+    if (!source) continue;
+    const sourceDataSet = (source as { dataSet?: Record<string, unknown> }).dataSet;
+    if (!sourceDataSet) continue;
+    Object.assign(dataSet, sourceDataSet);
+  }
+  return { dataSet };
+}