@cdx-ui/components 0.0.1-beta.112 → 0.0.1-beta.113

package/src/animation/hooks/usePopupRootAnimation.ts

@@ -0,0 +1,27 @@
+import { useSharedValue } from 'react-native-reanimated';
+import type { AnimationRootDisableAll } from '../types';
+import { useCombinedAnimationDisabledState } from './useCombinedAnimationDisabledState';
+
+export interface UsePopupRootAnimationOptions {
+  animation?: AnimationRootDisableAll;
+}
+
+/**
+ * Root animation hook for popup-like components (Dialog, Select, BottomSheet, Popover, etc.)
+ * Manages component state transitions and animation coordination via a shared
+ * `progress` value: 0 = idle/closed, 1 = fully open, 2 = dismissed.
+ */
+export function usePopupRootAnimation(options: UsePopupRootAnimationOptions) {
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(options.animation);
+
+  const progress = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const isGestureReleaseAnimationRunning = useSharedValue(false);
+
+  return {
+    isAllAnimationsDisabled,
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+  };
+}

package/src/components/AlertDialog/index.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { Slot, useDialog } from '@cdx-ui/primitives';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { Button, type ButtonProps } from '../Button';
-import { Dialog, type DialogRootProps } from '../Dialog';
+import { Dialog, type DialogRootProps, type DialogPopupProps } from '../Dialog';
 
 // =============================================================================
 // ALERT DIALOG ROOT (Dialog with non-dismissible defaults + alertdialog role)
@@ -35,6 +35,19 @@ const AlertDialogRoot = forwardRef<View, AlertDialogRootProps>(
 );
 AlertDialogRoot.displayName = 'AlertDialog';
 
+// =============================================================================
+// ALERT DIALOG POPUP (swipe disabled by default)
+// =============================================================================
+
+export interface AlertDialogPopupProps extends DialogPopupProps {}
+
+const AlertDialogPopup = forwardRef<View, AlertDialogPopupProps>(
+  ({ isSwipeable = false, ...props }, ref) => (
+    <Dialog.Popup ref={ref} isSwipeable={isSwipeable} {...props} />
+  ),
+);
+AlertDialogPopup.displayName = 'AlertDialog.Popup';
+
 // =============================================================================
 // ALERT DIALOG ACTION
 // =============================================================================
@@ -98,7 +111,7 @@ AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
   Trigger: typeof Dialog.Trigger;
-  Popup: typeof Dialog.Popup;
+  Popup: typeof AlertDialogPopup;
   Header: typeof Dialog.Header;
   Title: typeof Dialog.Title;
   Description: typeof Dialog.Description;
@@ -112,7 +125,7 @@ type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
 
 export const AlertDialog = Object.assign(AlertDialogRoot, {
   Trigger: Dialog.Trigger,
-  Popup: Dialog.Popup,
+  Popup: AlertDialogPopup,
   Header: Dialog.Header,
   Title: Dialog.Title,
   Description: Dialog.Description,

package/src/components/Dialog/animation.ts

@@ -0,0 +1,13 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { createContext } from '@cdx-ui/utils';
+
+export interface DialogAnimationContextValue {
+  progress: SharedValue<number>;
+  isDragging: SharedValue<boolean>;
+  isGestureReleaseAnimationRunning: SharedValue<boolean>;
+}
+
+export const [DialogAnimationProvider, useDialogAnimation] =
+  createContext<DialogAnimationContextValue>('DialogAnimationContext', {
+    strict: false,
+  });

package/src/components/Dialog/index.tsx

@@ -1,22 +1,54 @@
-import { forwardRef, useMemo, type ReactNode } from 'react';
-import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import {
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue } from 'react-native-reanimated';
 import { CheckCircle, Close as CloseIcon, EmergencyHome, Warning } from '@cdx-ui/icons';
 import {
   DialogClose as DialogClosePrimitive,
-  DialogPopup as DialogPopupPrimitive,
+  DialogContent as DialogContentPrimitive,
+  DialogOverlay as DialogOverlayPrimitive,
+  DialogPortal as DialogPortalPrimitive,
   DialogRoot as DialogRootPrimitive,
   DialogTrigger as DialogTriggerPrimitive,
+  FullWindowOverlay,
   Slot,
   dataAttributes,
   mergeDataAttributes,
   useDialog,
   type IDialogCloseProps,
-  type IDialogPopupProps,
+  type IDialogContentProps,
   type IDialogRootProps,
   type IDialogTriggerProps,
 } from '@cdx-ui/primitives';
-import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { cn, mergeRefs, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  usePopupDialogContentAnimation,
+  usePopupOverlayAnimation,
+  usePopupRootAnimation,
+  type AnimationRootDisableAll,
+} from '../../animation';
+import {
+  AnimationSettingsProvider,
+  useAnimationSettings,
+} from '../../providers/animation-settings';
 import { Icon } from '../Icon';
+import { DialogAnimationProvider, useDialogAnimation } from './animation';
 import {
   type DialogTitleVariantProps,
   type DialogVariantProps,
@@ -28,6 +60,7 @@ import {
   dialogHeaderVariants,
   dialogOverlayVariants,
   dialogPopupVariants,
+  dialogPortalVariants,
   dialogTextVariants,
   dialogTitleIconVariants,
   dialogTitleVariants,
@@ -35,6 +68,11 @@ import {
 
 export { useDialog } from '@cdx-ui/primitives';
 
+const IS_WEB = Platform.OS === 'web';
+const WEB_TRANSITION_SAFETY_MS = 300;
+
+type DialogDataState = 'entering' | 'open' | 'closed';
+
 // =============================================================================
 // STYLE CONTEXT
 // =============================================================================
@@ -43,6 +81,12 @@ const SCOPE = 'DIALOG';
 
 const useDialogStyleContext = () => useStyleContext(SCOPE) as DialogVariantProps;
 
+// =============================================================================
+// ANIMATED PRIMITIVES
+// =============================================================================
+
+const AnimatedOverlay = Animated.createAnimatedComponent(DialogOverlayPrimitive);
+
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
@@ -50,28 +94,46 @@ const useDialogStyleContext = () => useStyleContext(SCOPE) as DialogVariantProps
 export interface DialogRootProps
   extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps, DialogVariantProps {
   className?: string;
+  animation?: AnimationRootDisableAll;
 }
 
 const DialogRoot = forwardRef<View, DialogRootProps>(
-  ({ size = 'md', fullBleed = false, className, children, style, ...props }, ref) => {
+  ({ size = 'md', fullBleed = false, animation, className, children, style, ...props }, ref) => {
     const parent = useParentContext();
     const ctx = useMemo(
       () => ({ ...parent, [SCOPE]: { size, fullBleed } }),
       [parent, size, fullBleed],
     );
 
+    const { progress, isDragging, isGestureReleaseAnimationRunning, isAllAnimationsDisabled } =
+      usePopupRootAnimation({ animation });
+
+    const animationContextValue = useMemo(
+      () => ({ progress, isDragging, isGestureReleaseAnimationRunning }),
+      [progress, isDragging, isGestureReleaseAnimationRunning],
+    );
+
+    const animationSettingsContextValue = useMemo(
+      () => ({ isAllAnimationsDisabled }),
+      [isAllAnimationsDisabled],
+    );
+
     return (
-      <ParentContext.Provider value={ctx}>
-        <DialogRootPrimitive
-          ref={ref}
-          className={className}
-          style={style}
-          {...props}
-          {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog' }))}
-        >
-          {children}
-        </DialogRootPrimitive>
-      </ParentContext.Provider>
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <DialogAnimationProvider value={animationContextValue}>
+          <ParentContext.Provider value={ctx}>
+            <DialogRootPrimitive
+              ref={ref}
+              className={className}
+              style={style}
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog' }))}
+            >
+              {children}
+            </DialogRootPrimitive>
+          </ParentContext.Provider>
+        </DialogAnimationProvider>
+      </AnimationSettingsProvider>
     );
   },
 );
@@ -104,32 +166,255 @@ const DialogTrigger = forwardRef<View, DialogTriggerProps>(
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED POPUP
+// STYLED POPUP (portal + overlay + content composition)
 // =============================================================================
 
-export interface DialogPopupProps extends IDialogPopupProps, Pick<DialogVariantProps, 'size'> {
+export interface DialogPopupProps
+  extends Omit<IDialogContentProps, 'asChild'>, Pick<DialogVariantProps, 'size'> {
   className?: string;
   children?: ReactNode;
+  disableFullWindowOverlay?: boolean;
+  isSwipeable?: boolean;
 }
 
 const DialogPopup = forwardRef<View, DialogPopupProps>(
-  ({ size: sizeProp, className, children, style, ...props }, ref) => {
+  (
+    {
+      size: sizeProp,
+      className,
+      children,
+      style,
+      forceMount = false,
+      avoidKeyboard = true,
+      keyboardVerticalOffset = 0,
+      disableFullWindowOverlay = false,
+      isSwipeable = true,
+      ...props
+    },
+    ref,
+  ) => {
     const { size: contextSize } = useDialogStyleContext();
     const size = sizeProp ?? contextSize;
-    const computedClassName = cn(dialogPopupVariants({ size }), className);
+    const { open, onOpenChange } = useDialog();
+    const parentContext = useParentContext();
+
+    const animationContext = useDialogAnimation();
+    const parentAnimationSettings = useAnimationSettings();
+
+    const fallbackProgress = useSharedValue(0);
+    const fallbackIsDragging = useSharedValue(false);
+    const fallbackIsGestureReleaseAnimationRunning = useSharedValue(false);
+
+    const progress = animationContext?.progress ?? fallbackProgress;
+    const isDragging = animationContext?.isDragging ?? fallbackIsDragging;
+    const isGestureReleaseAnimationRunning =
+      animationContext?.isGestureReleaseAnimationRunning ??
+      fallbackIsGestureReleaseAnimationRunning;
+
+    const {
+      rContainerStyle,
+      entering: overlayEntering,
+      exiting: overlayExiting,
+    } = usePopupOverlayAnimation({
+      progress,
+      isDragging,
+      isGestureReleaseAnimationRunning,
+    });
+
+    const {
+      contentY,
+      contentHeight,
+      panGesture,
+      rDragContainerStyle,
+      entering: contentEntering,
+      exiting: contentExiting,
+    } = usePopupDialogContentAnimation({
+      isOpen: open,
+      progress,
+      isDragging,
+      isGestureReleaseAnimationRunning,
+      onOpenChange,
+      isSwipeable,
+    });
+
+    const dragContainerRef = useRef<View>(null);
+
+    useLayoutEffect(() => {
+      if (!open || IS_WEB) return;
+      dragContainerRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+        contentY.set(pageY);
+        contentHeight.set(height);
+      });
+    }, [open, contentY, contentHeight]);
+
+    // ---- Web enter/exit lifecycle ----
+    // Mirrors the Toast pattern: mount → 'entering' → (rAF) → 'open' → (close)
+    // → 'closed' → (transitionend) → unmount.
+    //
+    // Critical: `isExiting` is derived synchronously (via ref tracking the previous
+    // `open` value) so the component stays mounted in the SAME render that sees
+    // `open` go false — if we used useEffect the component would return null before
+    // the effect fires.
+    //
+    // The transitionend listener targets the popup element (via popupRef) instead of
+    // the portal wrapper. CSS exit transitions live on the overlay and popup children,
+    // not the wrapper — listening on the wrapper would unmount on the first bubbled
+    // event, potentially cutting the other child's animation short.
+    const wrapperRef = useRef<View | null>(null);
+    const popupRef = useRef<View | null>(null);
+    const prevOpenRef = useRef(open);
+    const [isExiting, setIsExiting] = useState(false);
+    const [webState, setWebState] = useState<DialogDataState>(open ? 'entering' : 'closed');
+
+    // Detect open → false transition synchronously during render
+    if (IS_WEB && prevOpenRef.current && !open && !isExiting) {
+      setIsExiting(true);
+      setWebState('closed');
+    }
+    // Detect closed → open transition synchronously during render
+    if (IS_WEB && !prevOpenRef.current && open) {
+      setIsExiting(false);
+      setWebState('entering');
+    }
+    prevOpenRef.current = open;
+
+    // Entrance: commit 'entering' on first paint, then transition to 'open'
+    useEffect(() => {
+      if (!IS_WEB || !open) return;
+      const raf = requestAnimationFrame(() => {
+        setWebState('open');
+      });
+      return () => cancelAnimationFrame(raf);
+    }, [open]);
+
+    // Exit: wait for CSS transition to finish, then unmount.
+    // Listens on the popup element directly — its exit transitions (opacity +
+    // transform) are at least as long as the overlay's, so when the popup
+    // finishes both children are done animating.
+    useEffect(() => {
+      if (!IS_WEB || !isExiting) return;
+
+      const node = popupRef.current as unknown as HTMLElement | null;
+      let done = false;
+
+      const finish = () => {
+        if (done) return;
+        done = true;
+        setIsExiting(false);
+      };
+
+      const safetyTimer = setTimeout(finish, WEB_TRANSITION_SAFETY_MS);
+
+      if (!node || typeof node.addEventListener !== 'function') {
+        return () => {
+          clearTimeout(safetyTimer);
+        };
+      }
+
+      const handler = (event: Event) => {
+        if (event.target !== node) return;
+        const propertyName = (event as unknown as { propertyName?: string }).propertyName ?? '';
+        if (propertyName === 'opacity' || propertyName === 'transform') {
+          finish();
+        }
+      };
+      node.addEventListener('transitionend', handler);
+
+      return () => {
+        clearTimeout(safetyTimer);
+        node.removeEventListener('transitionend', handler);
+      };
+    }, [isExiting]);
+
+    const dataState: DialogDataState = webState;
+    const shouldMount = IS_WEB ? open || isExiting : open;
+
+    if (!forceMount && !shouldMount) {
+      return null;
+    }
+
+    const portalClassName = cn(dialogPortalVariants());
     const overlayClassName = cn(dialogOverlayVariants());
+    const popupClassName = cn(dialogPopupVariants({ size }), className);
+
+    const keyboardBehavior = avoidKeyboard
+      ? Platform.select<'padding' | 'height'>({ ios: 'padding', default: 'height' })
+      : undefined;
 
     return (
-      <DialogPopupPrimitive
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        overlayClassName={overlayClassName}
-        {...props}
-        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-popup' }))}
-      >
-        {children}
-      </DialogPopupPrimitive>
+      <DialogPortalPrimitive forceMount>
+        <ParentContext.Provider value={parentContext}>
+          <AnimationSettingsProvider value={parentAnimationSettings}>
+            <DialogAnimationProvider value={animationContext}>
+              <FullWindowOverlay
+                disableFullWindowOverlay={disableFullWindowOverlay}
+                unstable_accessibilityContainerViewIsModal
+              >
+                <Animated.View
+                  ref={wrapperRef}
+                  className={portalClassName}
+                  pointerEvents="box-none"
+                  {...(IS_WEB ? dataAttributes({ state: dataState }) : undefined)}
+                >
+                  {/* Overlay */}
+                  <Animated.View
+                    entering={overlayEntering}
+                    exiting={overlayExiting}
+                    style={StyleSheet.absoluteFill}
+                  >
+                    <AnimatedOverlay
+                      forceMount
+                      className={overlayClassName}
+                      style={IS_WEB ? undefined : rContainerStyle}
+                      {...(IS_WEB ? dataAttributes({ state: dataState }) : undefined)}
+                    />
+                  </Animated.View>
+
+                  {/* Content with gesture + animation */}
+                  <GestureDetector gesture={panGesture}>
+                    <Animated.View
+                      ref={dragContainerRef}
+                      style={internalStyles.fill}
+                      pointerEvents="box-none"
+                      entering={contentEntering}
+                      exiting={contentExiting}
+                    >
+                      <Animated.View
+                        style={
+                          IS_WEB ? internalStyles.fill : [internalStyles.fill, rDragContainerStyle]
+                        }
+                        pointerEvents="box-none"
+                      >
+                        <KeyboardAvoidingView
+                          style={internalStyles.center}
+                          pointerEvents="box-none"
+                          behavior={keyboardBehavior}
+                          keyboardVerticalOffset={keyboardVerticalOffset}
+                        >
+                          <DialogContentPrimitive
+                            ref={mergeRefs(ref, popupRef)}
+                            forceMount
+                            className={popupClassName}
+                            style={style}
+                            {...props}
+                            {...mergeDataAttributes(
+                              props,
+                              dataAttributes({ slot: 'dialog-popup' }),
+                              IS_WEB ? dataAttributes({ state: dataState }) : undefined,
+                            )}
+                          >
+                            {children}
+                          </DialogContentPrimitive>
+                        </KeyboardAvoidingView>
+                      </Animated.View>
+                    </Animated.View>
+                  </GestureDetector>
+                </Animated.View>
+              </FullWindowOverlay>
+            </DialogAnimationProvider>
+          </AnimationSettingsProvider>
+        </ParentContext.Provider>
+      </DialogPortalPrimitive>
     );
   },
 );
@@ -408,3 +693,18 @@ export const Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose,
 }) as DialogCompoundComponent;
+
+// =============================================================================
+// INTERNAL STYLES
+// =============================================================================
+
+const internalStyles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Dialog/styles.ts

@@ -2,9 +2,25 @@ import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/constants';
 
+// ── Portal container ────────────────────────────────────────
+
+export const dialogPortalVariants = cva([
+  'flex-1',
+  'absolute inset-0',
+  'web:fixed web:inset-0 web:z-50',
+]);
+
 // ── Overlay ─────────────────────────────────────────────────
 
-export const dialogOverlayVariants = cva(['absolute inset-0', 'bg-surface-backdrop']);
+export const dialogOverlayVariants = cva([
+  'absolute inset-0',
+  'bg-surface-backdrop',
+  'web:transition-opacity web:duration-200 web:ease-out',
+  'web:data-[state=entering]:opacity-0',
+  'web:data-[state=open]:opacity-100',
+  'web:data-[state=closed]:opacity-0 web:data-[state=closed]:duration-150',
+  'web:motion-reduce:transition-none web:motion-reduce:duration-0',
+]);
 
 // ── Popup (renamed from dialogContentVariants) ──────────────
 
@@ -14,6 +30,11 @@ export const dialogPopupVariants = cva(
     'rounded-lg',
     Platform.select({ web: 'shadow-lg', default: '' }),
     'max-h-[85vh] overflow-hidden',
+    'web:transition-[opacity,transform] web:duration-200 web:ease-out',
+    'web:data-[state=entering]:opacity-0 web:data-[state=entering]:scale-[0.96]',
+    'web:data-[state=open]:opacity-100 web:data-[state=open]:scale-100',
+    'web:data-[state=closed]:opacity-0 web:data-[state=closed]:scale-[0.96] web:data-[state=closed]:duration-150',
+    'web:motion-reduce:transition-none web:motion-reduce:duration-0',
   ],
   {
     variants: {