@cdx-ui/components 0.0.1-beta.99 → 0.1.0

package/src/components/Dialog/index.tsx

@@ -1,22 +1,55 @@
-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,
+  MODAL_OVERLAY_Z_INDEX,
   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 +61,7 @@ import {
   dialogHeaderVariants,
   dialogOverlayVariants,
   dialogPopupVariants,
+  dialogPortalVariants,
   dialogTextVariants,
   dialogTitleIconVariants,
   dialogTitleVariants,
@@ -35,6 +69,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 +82,12 @@ const SCOPE = 'DIALOG';
 
 const useDialogStyleContext = () => useStyleContext(SCOPE) as DialogVariantProps;
 
+// =============================================================================
+// ANIMATED PRIMITIVES
+// =============================================================================
+
+const AnimatedOverlay = Animated.createAnimatedComponent(DialogOverlayPrimitive);
+
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
@@ -50,28 +95,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 +167,262 @@ 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;
+  /**
+   * Stacking order for the portal overlay layer (backdrop + popup panel).
+   * Defaults to {@link MODAL_OVERLAY_Z_INDEX} (10000).
+   */
+  zIndex?: number;
 }
 
 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,
+      zIndex = MODAL_OVERLAY_Z_INDEX,
+      ...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}
+                  style={{ zIndex }}
+                  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>
     );
   },
 );
@@ -168,27 +461,69 @@ const DialogHeader = forwardRef<View, DialogHeaderProps>(
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE (styled-only sub-slot with appearance variants)
+// STYLED TITLE (styled-only sub-slot with severity variants)
 // =============================================================================
 
-const APPEARANCE_ICON_MAP = {
+export type DialogTitleSeverity = 'neutral' | 'danger' | 'warning' | 'success';
+
+/** @deprecated Use `severity` prop instead of `appearance`. */
+export type DialogTitleAppearance = 'default' | 'danger' | 'warning' | 'success';
+
+let hasWarnedDialogAppearanceProp = false;
+let hasWarnedDialogDefaultSeverity = false;
+
+const SEVERITY_ICON_MAP = {
   danger: EmergencyHome,
   warning: Warning,
   success: CheckCircle,
 } as const;
 
-export interface DialogTitleProps extends TextProps, DialogTitleVariantProps {
+export interface DialogTitleProps extends TextProps, Omit<DialogTitleVariantProps, 'severity'> {
   asChild?: boolean;
+  /**
+   * Severity level that controls the status icon and color treatment.
+   * @default 'neutral'
+   */
+  severity?:
+    | DialogTitleSeverity
+    /** @deprecated Use `'neutral'` instead. */
+    | 'default';
+  /**
+   * @deprecated Use `severity` prop instead.
+   */
+  appearance?: DialogTitleAppearance;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogTitle = forwardRef<Text, DialogTitleProps>(
-  ({ asChild, appearance = 'default', className, children, style, ...props }, ref) => {
-    const computedClassName = cn(dialogTitleVariants({ appearance }), className);
+  ({ asChild, severity: severityProp, appearance, className, children, style, ...props }, ref) => {
+    useEffect(() => {
+      if (__DEV__ && appearance !== undefined && !hasWarnedDialogAppearanceProp) {
+        hasWarnedDialogAppearanceProp = true;
+        console.warn(
+          '[Dialog.Title] The `appearance` prop is deprecated and will be removed in a future major release. Use `severity` instead.',
+        );
+      }
+    }, [appearance]);
+
+    const rawSeverity = severityProp ?? appearance ?? 'neutral';
+
+    useEffect(() => {
+      if (__DEV__ && rawSeverity === 'default' && !hasWarnedDialogDefaultSeverity) {
+        hasWarnedDialogDefaultSeverity = true;
+        console.warn(
+          '[Dialog.Title] The `default` severity value is deprecated and will be removed in a future major release. Use `neutral` instead.',
+        );
+      }
+    }, [rawSeverity]);
+
+    const severity: DialogTitleSeverity = rawSeverity === 'default' ? 'neutral' : rawSeverity;
+
+    const computedClassName = cn(dialogTitleVariants({ severity }), className);
     const IconComponent =
-      appearance && appearance in APPEARANCE_ICON_MAP
-        ? APPEARANCE_ICON_MAP[appearance as keyof typeof APPEARANCE_ICON_MAP]
+      severity && severity in SEVERITY_ICON_MAP
+        ? SEVERITY_ICON_MAP[severity as keyof typeof SEVERITY_ICON_MAP]
         : null;
     const Comp = asChild ? Slot : Text;
 
@@ -207,7 +542,7 @@ const DialogTitle = forwardRef<Text, DialogTitleProps>(
     if (IconComponent) {
       return (
         <View className="flex-row items-center gap-1">
-          <Icon as={IconComponent} className={dialogTitleIconVariants({ appearance })} />
+          <Icon as={IconComponent} className={dialogTitleIconVariants({ severity })} />
           {titleElement}
         </View>
       );
@@ -408,3 +743,20 @@ export const Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose,
 }) as DialogCompoundComponent;
+
+export { MODAL_OVERLAY_Z_INDEX };
+
+// =============================================================================
+// INTERNAL STYLES
+// =============================================================================
+
+const internalStyles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Dialog/styles.ts

@@ -1,10 +1,22 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
+
+// ── Portal container ────────────────────────────────────────
+
+export const dialogPortalVariants = cva(['flex-1', 'absolute inset-0', 'web:fixed']);
 
 // ── 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 +26,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: {
@@ -43,15 +60,15 @@ export const dialogHeaderVariants = cva([
 
 export const dialogTitleVariants = cva(['heading-sm', 'text-content-primary'], {
   variants: {
-    appearance: {
-      default: '',
+    severity: {
+      neutral: '',
       danger: '',
       warning: '',
       success: '',
     },
   },
   defaultVariants: {
-    appearance: 'default',
+    severity: 'neutral',
   },
 });
 
@@ -59,15 +76,15 @@ export const dialogTitleVariants = cva(['heading-sm', 'text-content-primary'], {
 
 export const dialogTitleIconVariants = cva(['size-5'], {
   variants: {
-    appearance: {
-      default: '',
+    severity: {
+      neutral: '',
       danger: 'text-content-danger',
       warning: 'text-content-warning',
       success: 'text-content-success',
     },
   },
   defaultVariants: {
-    appearance: 'default',
+    severity: 'neutral',
   },
 });
 

package/src/components/Divider/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const dividerRootVariants = cva('relative', {
   variants: {

package/src/components/Field/styles.ts

@@ -1,5 +1,5 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_OPACITY } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_OPACITY } from '../../styles/constants';
 
 export const fieldRootVariants = cva(['group flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
 

package/src/components/Form/styles.ts

@@ -1,3 +1,3 @@
-import { cva } from 'class-variance-authority';
+import { cva } from '@cdx-ui/utils';
 
 export const formRootVariants = cva(['flex-col gap-4']);

package/src/components/Heading/styles.ts

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const headingStyle = cva(
   [