@jmruthers/pace-core 0.2.6 → 0.4.1

package/src/components/Dialog/Dialog.tsx

@@ -1,782 +0,0 @@
-/**
- * @file Dialog Component System
- * @package @jmruthers/pace-core
- * @module Components/Dialog
- * @since 0.1.0
- *
- * A comprehensive dialog component system built on top of Radix UI primitives.
- * Provides accessible modal dialogs with focus management and keyboard navigation.
- * Uses semantic HTML elements including native <dialog> element for maximum accessibility.
- *
- * Features:
- * - Semantic HTML structure (native <dialog>, header, main, footer elements)
- * - Focus trapping within dialog content
- * - Keyboard navigation (Escape to close, Tab for focus management)
- * - Screen reader support with proper ARIA attributes
- * - Native dialog element with enhanced styling
- * - Complete semantic landmark structure for accessibility
- * - Smooth animations and transitions
- * - Customizable styling and positioning
- * - Multiple size variants (sm, md, lg, xl, full, auto)
- * - Responsive design with smart height management
- * - Automatic height constraints based on viewport
- * - Scrollable content areas when content overflows
- * - Sticky headers/footers with scrollable body
- * - Overlay backdrop with customization
- * - Close button with accessibility (optional)
- * - Header, footer, title, and description components
- * - Configurable close behaviors
- *
- * @example
- * ```tsx
- * // Basic dialog with semantic structure
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Open Dialog</Button>
- *   </DialogTrigger>
- *   <DialogContent size="lg">
- *     <DialogHeader>
- *       <DialogTitle>Edit Profile</DialogTitle>
- *       <DialogDescription>
- *         Make changes to your profile here. Click save when you're done.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section className="space-y-4">
- *         <div className="grid grid-cols-4 items-center gap-4">
- *           <Label htmlFor="name" className="text-right">Name</Label>
- *           <Input id="name" defaultValue="John Doe" className="col-span-3" />
- *         </div>
- *       </section>
- *     </DialogBody>
- *     <DialogFooter>
- *       <Button type="submit">Save changes</Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * 
- * // Dialog with semantic scrolling content
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Scrollable Dialog</Button>
- *   </DialogTrigger>
- *   <DialogContent 
- *     size="lg" 
- *     enableScrolling={true}
- *     maxHeightPercent={80}
- *   >
- *     <DialogHeader>
- *       <DialogTitle>Large Content Dialog</DialogTitle>
- *       <DialogDescription>
- *         This dialog has lots of content and will scroll if needed.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section className="space-y-4">
- *         {Array.from({ length: 50 }, (_, i) => (
- *           <article key={i}>
- *             <h4>Content Item {i + 1}</h4>
- *             <p>This is semantic content within the dialog body.</p>
- *           </article>
- *         ))}
- *       </section>
- *     </DialogBody>
- *     <DialogFooter>
- *       <Button>Save</Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * 
- * // Auto-sizing dialog that fits content
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Auto Size Dialog</Button>
- *   </DialogTrigger>
- *   <DialogContent size="auto">
- *     <DialogHeader>
- *       <DialogTitle>Auto-Sized Dialog</DialogTitle>
- *       <DialogDescription>
- *         This dialog automatically adjusts its width to fit the content.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section>
- *         <p>Content that determines the dialog width...</p>
- *       </section>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * 
- * // Full-screen dialog with semantic structure
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button>Full Screen</Button>
- *   </DialogTrigger>
- *   <DialogContent size="full">
- *     <DialogHeader>
- *       <DialogTitle>Full Screen Dialog</DialogTitle>
- *     </DialogHeader>
- *     <DialogBody>
- *       <section>
- *         <p>Full screen content with semantic structure...</p>
- *       </section>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Uses semantic HTML structure (dialog, header, main, footer)
- * - Native dialog element with enhanced ARIA attributes via Radix UI
- * - Focus trapping within dialog content
- * - Keyboard navigation support
- * - Screen reader announcements
- * - Focus restoration when closed
- * - Escape key to close (configurable)
- * - Tab key focus management
- * - Close button with screen reader text (optional)
- * - Scrollable regions properly announced to screen readers
- * - Complete semantic landmark structure for screen reader navigation
- *
- * @performance
- * - Efficient focus management
- * - Optimized animations
- * - Memory leak prevention
- * - Conditional rendering
- * - Optimized scroll handling
- *
- * @dependencies
- * - @radix-ui/react-dialog - Core dialog functionality
- * - lucide-react - Icons
- * - React 18+ - Hooks and refs
- * - Tailwind CSS - Styling and animations
- */
-
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'lucide-react';
-import { cn } from '../../utils/cn';
-import { renderSafeHtml } from './utils/safeHtml';
-import { useState, useEffect } from 'react';
-import { debounce } from 'lodash';
-
-/**
- * Dialog size variants
- * @public
- */
-export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
-
-/**
- * Props for the Dialog root component
- * @public
- */
-export interface DialogProps extends DialogPrimitive.DialogProps {}
-
-/**
- * Props for the DialogTrigger component
- * @public
- */
-export interface DialogTriggerProps extends DialogPrimitive.DialogTriggerProps {}
-
-/**
- * Enhanced props for the DialogContent component with size variants and customization
- * Uses semantic HTML dialog element with Radix UI accessibility features
- * @public
- */
-export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  /** Dialog size variant */
-  size?: DialogSize;
-  /** Whether to show the close button */
-  showCloseButton?: boolean;
-  /** Custom className for the overlay */
-  overlayClassName?: string;
-  /** Whether to prevent closing on escape key */
-  preventCloseOnEscape?: boolean;
-  /** Whether to prevent closing on outside click */
-  preventCloseOnOutsideClick?: boolean;
-  /** Maximum height as percentage of viewport height (0-100) */
-  maxHeightPercent?: number;
-  /** Maximum width as percentage of viewport width (0-100) */
-  maxWidthPercent?: number;
-  /** Enable smart scrolling with sticky header/footer */
-  enableScrolling?: boolean;
-  /** Custom max height in CSS units (overrides maxHeightPercent) */
-  maxHeight?: string;
-  /** Custom max width in CSS units (overrides maxWidthPercent and size) */
-  maxWidth?: string;
-  /** Minimum height in CSS units */
-  minHeight?: string;
-  /** Minimum width in CSS units */
-  minWidth?: string;
-}
-
-/**
- * Props for the DialogOverlay component
- * @public
- */
-export interface DialogOverlayProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {}
-
-/**
- * Props for the DialogHeader component (semantic header element)
- * @public
- */
-export interface DialogHeaderProps extends React.HTMLAttributes<HTMLElement> {
-  /** Whether this header should be sticky when scrolling is enabled */
-  sticky?: boolean;
-}
-
-/**
- * Props for the DialogFooter component (semantic footer element)
- * @public
- */
-export interface DialogFooterProps extends React.HTMLAttributes<HTMLElement> {
-  /** Whether this footer should be sticky when scrolling is enabled */
-  sticky?: boolean;
-}
-
-/**
- * Props for the DialogBody component (semantic main element)
- * @public
- */
-export interface DialogBodyProps extends React.HTMLAttributes<HTMLElement> {
-  /** Custom max height for the scrollable area */
-  maxHeight?: string;
-  /** HTML content to render (will be sanitized for security) */
-  htmlContent?: string;
-  /** Whether to allow HTML content rendering (default: true) */
-  allowHtml?: boolean;
-  /** Whether to use strict HTML sanitization (default: true) */
-  strictSanitization?: boolean;
-  /** Whether to log HTML sanitization warnings to console (default: false) */
-  logWarnings?: boolean;
-}
-
-/**
- * Props for the DialogTitle component
- * @public
- */
-export interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
-  /** HTML content to render as title (will be sanitized for security) */
-  htmlContent?: string;
-  /** Whether to allow HTML content rendering (default: true) */
-  allowHtml?: boolean;
-}
-
-/**
- * Props for the DialogDescription component
- * @public
- */
-export interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
-  /** HTML content to render as description (will be sanitized for security) */
-  htmlContent?: string;
-  /** Whether to allow HTML content rendering (default: true) */
-  allowHtml?: boolean;
-}
-
-// Size mapping for dialog variants
-const sizeClasses = {
-  sm: 'max-w-sm',
-  md: 'max-w-md', 
-  lg: 'max-w-lg',
-  xl: 'max-w-xl',
-  full: 'max-w-full h-full',
-  auto: 'max-w-none w-auto min-w-0'
-};
-
-// Root Dialog components from Radix
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-
-// DialogOverlay component
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  DialogOverlayProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-main-950/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-/**
- * Custom hook for managing smart dialog dimensions
- * Handles responsive sizing and viewport-based constraints
- */
-const useSmartDimensions = ({
-  maxHeightPercent,
-  maxWidthPercent,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-  enableScrolling = false,
-}: {
-  maxHeightPercent?: number;
-  maxWidthPercent?: number;
-  maxHeight?: string;
-  maxWidth?: string;
-  minHeight?: string;
-  minWidth?: string;
-  enableScrolling?: boolean;
-}) => {
-  const [dimensions, setDimensions] = useState<React.CSSProperties>({});
-
-  useEffect(() => {
-    if (!maxHeightPercent && !maxWidthPercent && !maxHeight && !maxWidth && !minHeight && !minWidth) {
-      return;
-    }
-
-    const updateDimensions = () => {
-      const result: React.CSSProperties = {};
-
-      // Handle height constraints
-      if (maxHeightPercent && typeof maxHeightPercent === 'number') {
-        const constrainedHeight = Math.min(maxHeightPercent, 95); // Cap at 95% to ensure some margin
-        result.maxHeight = `${constrainedHeight}vh`;
-      } else if (maxHeight) {
-        result.maxHeight = maxHeight;
-      }
-
-      // Handle width constraints  
-      if (maxWidthPercent && typeof maxWidthPercent === 'number') {
-        const constrainedWidth = Math.min(maxWidthPercent, 95); // Cap at 95% to ensure some margin
-        result.maxWidth = `${constrainedWidth}vw`;
-      } else if (maxWidth) {
-        result.maxWidth = maxWidth;
-      }
-
-      // Include minHeight/minWidth if provided
-      if (minHeight) {
-        result.minHeight = minHeight;
-      }
-      if (minWidth) {
-        result.minWidth = minWidth;
-      }
-
-      setDimensions(result);
-    };
-
-    // Debounced resize handler
-    const debouncedUpdate = debounce(updateDimensions, 100);
-    
-    // Initial calculation
-    updateDimensions();
-    
-    // Listen for resize events
-    window.addEventListener('resize', debouncedUpdate);
-    
-    return () => {
-      window.removeEventListener('resize', debouncedUpdate);
-      debouncedUpdate.cancel();
-    };
-  }, [maxHeightPercent, maxWidthPercent, maxHeight, maxWidth, minHeight, minWidth, enableScrolling]);
-
-  // Only return dimensions if we have something to constrain
-  const result: React.CSSProperties = {};
-
-  // Handle height constraints
-  if (maxHeightPercent && typeof maxHeightPercent === 'number') {
-    const constrainedHeight = Math.min(maxHeightPercent, 95);
-    result.maxHeight = `${constrainedHeight}vh`;
-  } else if (maxHeight) {
-    result.maxHeight = maxHeight;
-  }
-
-  // Handle width constraints
-  if (maxWidthPercent && typeof maxWidthPercent === 'number') {
-    const constrainedWidth = Math.min(maxWidthPercent, 95);
-    result.maxWidth = `${constrainedWidth}vw`;
-  } else if (maxWidth) {
-    result.maxWidth = maxWidth;
-  }
-
-  // Include minHeight/minWidth if provided
-  if (minHeight) {
-    result.minHeight = minHeight;
-  }
-  if (minWidth) {
-    result.minWidth = minWidth;
-  }
-
-  return result;
-};
-
-/**
- * DialogContent component
- * The main content container using semantic HTML <dialog> element with enhanced features
- * Built on Radix UI primitives for accessibility while providing semantic structure
- * 
- * @param props - Content configuration and styling
- * @param ref - Forwarded ref to the dialog element
- * @returns JSX.Element - The semantic dialog content with overlay and optional close button
- * 
- * @example
- * ```tsx
- * <DialogContent size="lg" enableScrolling={true} maxHeightPercent={80}>
- *   <DialogHeader>
- *     <DialogTitle>Scrollable Dialog</DialogTitle>
- *     <DialogDescription>This dialog will scroll if content overflows.</DialogDescription>
- *   </DialogHeader>
- *   <DialogBody>
- *     <section>Large amount of semantic content here...</section>
- *   </DialogBody>
- *   <DialogFooter>
- *     <Button>Save</Button>
- *   </DialogFooter>
- * </DialogContent>
- * ```
- */
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(({ 
-  className, 
-  children, 
-  size = 'md',
-  showCloseButton = true,
-  overlayClassName,
-  preventCloseOnEscape = false,
-  preventCloseOnOutsideClick = false,
-  maxHeightPercent,
-  maxWidthPercent,
-  enableScrolling = false,
-  maxHeight,
-  maxWidth,
-  minHeight,
-  minWidth,
-  style,
-  ...props 
-}, ref) => {
-  const smartDimensions = useSmartDimensions({ 
-    maxHeightPercent, 
-    maxWidthPercent,
-    maxHeight, 
-    maxWidth,
-    minHeight,
-    minWidth,
-    enableScrolling 
-  });
-
-  const handleEscapeKeyDown = React.useCallback((event: KeyboardEvent) => {
-    if (preventCloseOnEscape) {
-      event.preventDefault();
-    }
-  }, [preventCloseOnEscape]);
-
-  const handlePointerDownOutside = React.useCallback((event: Event) => {
-    if (preventCloseOnOutsideClick) {
-      event.preventDefault();
-    }
-  }, [preventCloseOnOutsideClick]);
-
-  // Merge smart dimensions with provided style
-  const mergedStyle = React.useMemo(() => {
-    // If no smart dimensions are active, just return the provided style
-    if (Object.keys(smartDimensions).length === 0) {
-      return style;
-    }
-
-    // Start with smart dimensions
-    const finalStyle: React.CSSProperties = { ...smartDimensions, ...style };
-    
-    // If not using smart width and no maxWidth override, don't include maxWidth
-    if (!maxWidth && !maxWidthPercent) {
-      const { maxWidth: _, ...styleWithoutMaxWidth } = finalStyle;
-      return styleWithoutMaxWidth;
-    }
-    
-    return finalStyle;
-  }, [smartDimensions, style, maxWidth, maxWidthPercent]);
-
-  return (
-    <DialogPortal>
-      <DialogOverlay className={overlayClassName} />
-      <DialogPrimitive.Content
-        ref={ref}
-        onEscapeKeyDown={preventCloseOnEscape ? handleEscapeKeyDown : undefined}
-        onPointerDownOutside={handlePointerDownOutside}
-        className={cn(
-          'fixed left-[50%] top-[50%] z-50 w-full translate-x-[-50%] translate-y-[-50%] border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          // Reset native dialog styles that interfere with our custom styling
-          'm-0 p-0 max-w-none max-h-none w-auto h-auto border-0 bg-transparent outline-none',
-          // Apply our custom styling
-          'border bg-background shadow-lg',
-          // Only apply size classes if not using smart width
-          !maxWidth && !maxWidthPercent && sizeClasses[size],
-          // Auto size gets special handling for content fitting
-          size === 'auto' && 'w-fit max-w-[90vw] sm:max-w-[80vw]',
-          // Layout classes based on scrolling mode
-          enableScrolling ? 'flex flex-col' : 'grid gap-4 p-6',
-          // Full screen handling
-          size === 'full' && 'sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] left-0 top-0 translate-x-0 translate-y-0 h-full rounded-none sm:h-auto sm:rounded-lg',
-          // Overflow handling for scrolling mode
-          enableScrolling && 'overflow-hidden',
-          className
-        )}
-        style={mergedStyle}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close className="absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-            <X className="h-4 w-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-/**
- * DialogHeader component
- * Semantic header container for dialog title and description with optional sticky behavior
- * 
- * @param props - Header configuration and styling
- * @returns JSX.Element - The dialog header container using semantic <header> element
- * 
- * @example
- * ```tsx
- * <DialogHeader sticky={true}>
- *   <DialogTitle>Sticky Header</DialogTitle>
- *   <DialogDescription>This header stays visible while scrolling.</DialogDescription>
- * </DialogHeader>
- * ```
- */
-const DialogHeader = ({
-  className,
-  sticky = false,
-  ...props
-}: DialogHeaderProps) => (
-  <header
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
-      sticky ? 'sticky top-0 z-10 bg-background p-6 pb-4 border-b' : 'p-6 pb-4',
-      className
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-/**
- * DialogBody component
- * Semantic main content area for dialog body content with scrollable functionality
- * Supports both React children and safe HTML content rendering
- * 
- * @param props - Body configuration and styling
- * @returns JSX.Element - The scrollable dialog body container using semantic <main> element
- * 
- * @example
- * ```tsx
- * // Using React children
- * <DialogBody>
- *   <section className="space-y-4">
- *     <h4>Content Title</h4>
- *     <p>Long content that will scroll...</p>
- *   </section>
- * </DialogBody>
- * 
- * // Using HTML content
- * <DialogBody 
- *   htmlContent="<h2>Import Instructions</h2><p>Upload a CSV file with the following format:</p><ul><li>Required columns: name, email</li><li>Optional columns: phone, address</li></ul>"
- *   allowHtml={true}
- * />
- * ```
- */
-const DialogBody = ({
-  className,
-  maxHeight,
-  style,
-  htmlContent,
-  allowHtml = true,
-  strictSanitization = true,
-  logWarnings = false,
-  children,
-  ...props
-}: DialogBodyProps) => {
-  const mergedStyle = React.useMemo(() => {
-    return {
-      ...(maxHeight && { maxHeight }),
-      ...style,
-    };
-  }, [maxHeight, style]);
-
-  // Process HTML content if provided
-  const processedHtmlContent = React.useMemo(() => {
-    if (!htmlContent || !allowHtml) {
-      return null;
-    }
-
-    console.log('🔍 Dialog HTML Debug:', {
-      originalHtml: htmlContent,
-      allowHtml,
-      strictSanitization,
-      logWarnings
-    });
-
-    const result = renderSafeHtml(htmlContent, {
-      strict: strictSanitization,
-      logWarnings
-    });
-
-    console.log('🔍 Dialog HTML Result:', {
-      sanitizedHtml: result.html,
-      isValid: result.isValid,
-      warnings: result.warnings
-    });
-
-    return result.html;
-  }, [htmlContent, allowHtml, strictSanitization, logWarnings]);
-
-  return (
-    <main
-      className={cn(
-        'flex-1 overflow-y-auto px-6 py-2',
-        className
-      )}
-      style={mergedStyle}
-      aria-label="Dialog main content"
-      tabIndex={-1}
-      {...props}
-    >
-      {processedHtmlContent ? (
-        <div 
-          dangerouslySetInnerHTML={{ __html: processedHtmlContent }}
-          className="prose prose-sm max-w-none"
-        />
-      ) : (
-        <div>
-          <div className="text-red-500 mb-2">
-            No HTML content processed. Showing children instead.
-          </div>
-          {children}
-        </div>
-      )}
-    </main>
-  );
-};
-DialogBody.displayName = 'DialogBody';
-
-/**
- * DialogFooter component
- * Semantic footer container for dialog action buttons with optional sticky behavior
- * 
- * @param props - Footer configuration and styling
- * @returns JSX.Element - The dialog footer container using semantic <footer> element
- * 
- * @example
- * ```tsx
- * <DialogFooter sticky={true}>
- *   <Button variant="outline">Cancel</Button>
- *   <Button>Save changes</Button>
- * </DialogFooter>
- * ```
- */
-const DialogFooter = ({
-  className,
-  sticky = false,
-  ...props
-}: DialogFooterProps) => (
-  <footer
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      sticky ? 'sticky bottom-0 z-10 bg-background p-6 pt-4 border-t' : 'p-6 pt-4',
-      className
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  DialogTitleProps
->(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
-  const processedHtmlContent = React.useMemo(() => {
-    if (!htmlContent || !allowHtml) {
-      return null;
-    }
-
-    const result = renderSafeHtml(htmlContent, {
-      strict: true,
-      logWarnings: false
-    });
-
-    return result.html;
-  }, [htmlContent, allowHtml]);
-
-  return (
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        className
-      )}
-      {...props}
-    >
-      {processedHtmlContent ? (
-        <span dangerouslySetInnerHTML={{ __html: processedHtmlContent }} />
-      ) : (
-        children
-      )}
-    </DialogPrimitive.Title>
-  );
-});
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  DialogDescriptionProps
->(({ className, htmlContent, allowHtml = true, children, ...props }, ref) => {
-  const processedHtmlContent = React.useMemo(() => {
-    if (!htmlContent || !allowHtml) {
-      return null;
-    }
-
-    const result = renderSafeHtml(htmlContent, {
-      strict: true,
-      logWarnings: false
-    });
-
-    return result.html;
-  }, [htmlContent, allowHtml]);
-
-  return (
-    <DialogPrimitive.Description
-      ref={ref}
-      className={cn('text-sm text-muted-foreground', className)}
-      {...props}
-    >
-      {processedHtmlContent ? (
-        <span dangerouslySetInnerHTML={{ __html: processedHtmlContent }} />
-      ) : (
-        children
-      )}
-    </DialogPrimitive.Description>
-  );
-});
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};