@jmruthers/pace-core 0.2.6 → 0.4.1

package/src/components/Dialog/README.md

@@ -1,804 +0,0 @@
-# Dialog Component
-
-A comprehensive, accessible dialog component system built on top of Radix UI primitives with enhanced features for modern web applications.
-
-## Features
-
-### 🎯 **Core Features**
-- **Semantic HTML Structure** - Uses native `<dialog>` element with proper header, main, footer elements
-- **Accessibility First** - WCAG 2.1 AA compliant with full screen reader support
-- **Focus Management** - Automatic focus trapping and restoration
-- **Keyboard Navigation** - Escape to close, Tab for focus management
-- **Responsive Design** - Adapts to all screen sizes with smart constraints
-
-### 🚀 **Advanced Features**
-- **Smart Height Management** - Automatic viewport-based height constraints
-- **Scrollable Content** - Long content scrolls while keeping headers/footers visible
-- **Sticky Headers/Footers** - Important UI elements remain accessible during scrolling
-- **Multiple Size Variants** - sm, md, lg, xl, full, auto sizing options
-- **Custom Dimensions** - Fine-grained control over width and height
-- **Configurable Close Behavior** - Control escape key and outside click behavior
-- **Smooth Animations** - Polished transitions and micro-interactions
-- **HTML Content Rendering** - Safe HTML content with automatic sanitization
-
-## Quick Start
-
-```tsx
-import { 
-  Dialog, 
-  DialogTrigger, 
-  DialogContent, 
-  DialogHeader, 
-  DialogTitle, 
-  DialogDescription,
-  DialogBody,
-  DialogFooter,
-  Button 
-} from '@jmruthers/pace-core';
-
-// Basic dialog
-<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">
-        <p>Your content goes here...</p>
-      </section>
-    </DialogBody>
-    <DialogFooter>
-      <Button variant="outline">Cancel</Button>
-      <Button>Save changes</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-## HTML Content Rendering
-
-The Dialog components support rich HTML content rendering with automatic sanitization. This is perfect for formatted instructions, feature announcements, error details, or any HTML that needs to be displayed in dialogs.
-
-> **🎯 Key Features:**
-> - **Rich HTML Rendering**: Full HTML support with proper styling
-> - **Safe Sanitization**: Automatic XSS protection
-> - **Prose Styling**: Typography classes for readable content
-> - **Fallback Support**: Graceful degradation if HTML fails
-
-### Quick Start
-
-#### Basic HTML Content
-
-```tsx
-<Dialog>
-  <DialogContent>
-    <DialogHeader>
-      <DialogTitle htmlContent="<h2>Import Instructions</h2>" allowHtml={true} />
-    </DialogHeader>
-    <DialogBody 
-      htmlContent="<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}
-    >
-      {/* Fallback content if HTML rendering fails */}
-      <div className="text-red-500">
-        HTML content failed to render. This is fallback content.
-      </div>
-    </DialogBody>
-  </DialogContent>
-</Dialog>
-```
-
-#### Rich HTML Content with Styling
-
-```tsx
-<DialogBody 
-  htmlContent={`
-    <div class="space-y-4">
-      <div class="bg-blue-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-blue-900 mb-2">📋 Required Format</h3>
-        <p class="text-sm text-blue-800 mb-2">Your CSV file must include these columns:</p>
-        <ul class="text-sm text-blue-700 list-disc list-inside ml-2">
-          <li><code>name</code> - Full name of the person</li>
-          <li><code>email</code> - Valid email address</li>
-          <li><code>phone</code> - Phone number (optional)</li>
-        </ul>
-      </div>
-      
-      <div class="bg-green-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-green-900 mb-2">✅ Example Data</h3>
-        <pre class="text-xs text-green-700 bg-white p-2 rounded border">
-name,email,phone
-John Doe,john@example.com,555-0123
-Jane Smith,jane@example.com,
-        </pre>
-      </div>
-      
-      <div class="bg-yellow-50 p-3 rounded-lg">
-        <p class="text-sm text-yellow-800">
-          <strong>⚠️ Important:</strong> Make sure your CSV file is properly formatted.
-        </p>
-      </div>
-    </div>
-  `}
-  allowHtml={true}
-/>
-```
-
-### Configuration Options
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `htmlContent` | `string` | `undefined` | HTML string to render |
-| `allowHtml` | `boolean` | `true` | Enable/disable HTML rendering |
-| `strictSanitization` | `boolean` | `true` | Use strict HTML sanitization |
-| `logWarnings` | `boolean` | `false` | Log sanitization warnings to console |
-
-### Supported HTML Elements
-
-**Allowed HTML Elements:**
-- Text formatting: `p`, `div`, `span`, `h1`-`h6`, `strong`, `em`, `b`, `i`, `u`, `s`, `mark`, `small`, `sub`, `sup`
-- Lists: `ul`, `ol`, `li`, `dl`, `dt`, `dd`
-- Code: `pre`, `code`, `kbd`, `samp`
-- Links: `a` (with href validation)
-- Tables: `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`
-- Media: `img` (with src validation)
-- Layout: `section`, `article`, `aside`, `header`, `footer`, `main`, `nav`
-- Interactive: `details`, `summary`
-
-**Removed Elements:**
-- Scripts: `script`, `iframe`, `object`, `embed`
-- Forms: `form`, `input`, `button`
-- Event handlers: `onclick`, `onload`, etc.
-- Dangerous protocols: `javascript:`, `data:`
-
-### Styling and Typography
-
-HTML content is automatically styled with prose classes for optimal readability:
-
-```css
-/* Applied automatically to HTML content */
-.prose {
-  color: inherit;
-  max-width: none;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.prose p {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.prose ul, .prose ol {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  padding-left: 1.5rem;
-}
-
-.prose code {
-  background-color: rgb(243 244 246);
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.25rem;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  background-color: rgb(243 244 246);
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-}
-```
-
-### Complete Examples
-
-#### Import Instructions Dialog
-
-```tsx
-function ImportInstructionsDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const importInstructions = `
-    <div class="space-y-4">
-      <p class="text-sm text-gray-600 mb-4">
-        Upload a CSV file with dish or recipe data. The system will automatically detect the format based on your column headers.
-      </p>
-      
-      <div class="bg-blue-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-blue-900 mb-2">🍽️ Dish Format (3 columns)</h3>
-        <p class="text-sm text-blue-800 mb-2">Perfect for importing basic dish information:</p>
-        <div class="space-y-1">
-          <p class="text-sm"><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code></p>
-          <p class="text-sm"><strong>Optional:</strong> <code>dish_description</code></p>
-        </div>
-        <div class="mt-2">
-          <p class="text-xs text-blue-700"><strong>Examples:</strong></p>
-          <ul class="text-xs text-blue-700 list-disc list-inside ml-2">
-            <li><code>dish_code</code>: BBQ, PC, CTY</li>
-            <li><code>dish_name</code>: BBQ hamburgers and potato salad</li>
-            <li><code>mealtype_name</code>: Breakfast, Lunch, Dinner</li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="bg-green-50 p-4 rounded-lg">
-        <h3 class="font-semibold text-green-900 mb-2">📋 Recipe Format (8 columns)</h3>
-        <p class="text-sm text-green-800 mb-2">Perfect for importing detailed recipe ingredients:</p>
-        <div class="space-y-1">
-          <p class="text-sm"><strong>Required:</strong> <code>dish_code</code>, <code>dish_name</code>, <code>mealtype_name</code>, <code>diettype_name</code>, <code>item_name</code>, <code>recipe_qtypp</code>, <code>recipe_uptake</code></p>
-          <p class="text-sm"><strong>Optional:</strong> <code>item_brand</code></p>
-        </div>
-        <div class="mt-2">
-          <p class="text-xs text-green-700"><strong>Examples:</strong></p>
-          <ul class="text-xs text-green-700 list-disc list-inside ml-2">
-            <li><code>dish_code</code>: BBQ</li>
-            <li><code>dish_name</code>: BBQ hamburgers and potato salad</li>
-            <li><code>mealtype_name</code>: Dinner</li>
-            <li><code>diettype_name</code>: Standard, Gluten Free, Vegan</li>
-            <li><code>item_name</code>: Lettuce iceberg shredded</li>
-            <li><code>item_brand</code>: Masterfoods, Coles</li>
-            <li><code>recipe_qtypp</code>: 35, 1.66</li>
-            <li><code>recipe_uptake</code>: 1.0, 0.75</li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="bg-yellow-50 p-3 rounded-lg">
-        <p class="text-sm text-yellow-800"><strong>⚠️ Important:</strong> Recipe imports will replace all existing recipe data for dishes in the file.</p>
-      </div>
-    </div>
-  `;
-
-  return (
-    <>
-      <Button onClick={() => setIsOpen(true)}>
-        Show Import Instructions
-      </Button>
-
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent size="lg">
-          <DialogHeader>
-            <DialogTitle htmlContent="<h2>Import Dishes or Recipes</h2>" allowHtml={true} />
-          </DialogHeader>
-
-          <DialogBody 
-            htmlContent={importInstructions}
-            allowHtml={true}
-            strictSanitization={true}
-            logWarnings={true}
-          >
-            {/* Fallback content if HTML rendering fails */}
-            <div className="text-red-500">
-              HTML content failed to render. This is fallback content.
-            </div>
-          </DialogBody>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={() => setIsOpen(false)}>
-              Import Data
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
-```
-
-### Mixed Content
-
-You can mix HTML content with React children:
-
-```tsx
-<DialogBody>
-  <div className="space-y-4">
-    <h3>React Content</h3>
-    <p>This is rendered using React children.</p>
-  </div>
-  <DialogBody 
-    htmlContent="<h3>HTML Content</h3><p>This is rendered from HTML string.</p>"
-    allowHtml={true}
-  />
-</DialogBody>
-```
-
-### Best Practices
-
-#### 1. HTML Content Structure
-- Use semantic HTML elements (`h1`-`h6`, `p`, `ul`, `ol`, etc.)
-- Keep content well-structured and accessible
-- Use proper heading hierarchy
-- Include meaningful alt text for images
-
-#### 2. Security
-- Always use `strictSanitization: true` for user-generated content
-- Never trust user input without sanitization
-- Test with malicious HTML to ensure proper filtering
-- Use `logWarnings: true` in development to catch issues
-
-#### 3. Styling
-- Use Tailwind CSS classes for consistent styling
-- Leverage the automatic prose styling
-- Test on different screen sizes
-- Ensure good contrast and readability
-
-#### 4. Fallback Content
-- Always provide meaningful fallback content
-- Test with HTML disabled to ensure graceful degradation
-- Use clear error messages for failed rendering
-
-### Troubleshooting
-
-**Common Issues:**
-
-1. **HTML not rendering:**
-   - Check that `allowHtml={true}` is set
-   - Verify HTML content is valid
-   - Check console for sanitization warnings
-   - Ensure content is not empty or undefined
-
-2. **Styling not applied:**
-   - Verify Tailwind CSS classes are available
-   - Check for CSS conflicts
-   - Ensure proper class names are used
-   - Test with browser dev tools
-
-3. **Content being stripped:**
-   - Check sanitization settings
-   - Verify HTML elements are allowed
-   - Review console warnings
-   - Test with simpler HTML first
-
-**Debug Tips:**
-1. **Enable logging**: Set `logWarnings={true}` to see sanitization warnings
-2. **Test fallback**: Disable `allowHtml` to test fallback content
-3. **Check console**: Look for JavaScript errors or warnings
-4. **Validate HTML**: Use HTML validators to check content
-5. **Test sanitization**: Try with malicious HTML to verify security
-
-## API Reference
-
-### DialogContent Props
-
-The main content container with enhanced features:
-
-```typescript
-interface DialogContentProps {
-  /** Dialog size variant */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
-  
-  /** 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;
-}
-```
-
-### DialogHeader Props
-
-Semantic header container with optional sticky behavior:
-
-```typescript
-interface DialogHeaderProps {
-  /** Whether this header should be sticky when scrolling is enabled */
-  sticky?: boolean;
-}
-```
-
-### DialogFooter Props
-
-Semantic footer container with optional sticky behavior:
-
-```typescript
-interface DialogFooterProps {
-  /** Whether this footer should be sticky when scrolling is enabled */
-  sticky?: boolean;
-}
-```
-
-### DialogBody Props
-
-Semantic main content area with scrollable functionality and HTML content support:
-
-```typescript
-interface DialogBodyProps {
-  /** 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;
-}
-```
-
-### DialogTitle Props
-
-Dialog title with optional HTML content support:
-
-```typescript
-interface DialogTitleProps {
-  /** HTML content to render as title (will be sanitized for security) */
-  htmlContent?: string;
-  /** Whether to allow HTML content rendering (default: true) */
-  allowHtml?: boolean;
-}
-```
-
-### DialogDescription Props
-
-Dialog description with optional HTML content support:
-
-```typescript
-interface DialogDescriptionProps {
-  /** HTML content to render as description (will be sanitized for security) */
-  htmlContent?: string;
-  /** Whether to allow HTML content rendering (default: true) */
-  allowHtml?: boolean;
-}
-```
-
-## Examples
-
-### Basic Dialog
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Open Dialog</Button>
-  </DialogTrigger>
-  <DialogContent size="md">
-    <DialogHeader>
-      <DialogTitle>Basic Dialog</DialogTitle>
-      <DialogDescription>
-        This is a standard dialog without scrolling enabled.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <section className="py-4">
-        <p>Simple content that fits nicely in the dialog.</p>
-      </section>
-    </DialogBody>
-    <DialogFooter>
-      <Button variant="outline">Cancel</Button>
-      <Button>Save</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-### Scrollable Dialog with Sticky Header/Footer
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Scrollable Dialog</Button>
-  </DialogTrigger>
-  <DialogContent 
-    size="lg" 
-    enableScrolling={true}
-    maxHeightPercent={80}
-  >
-    <DialogHeader sticky={true}>
-      <DialogTitle>Scrollable Dialog</DialogTitle>
-      <DialogDescription>
-        This dialog has lots of content and will scroll if needed.
-        The header stays sticky at the top.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <div className="space-y-4">
-        {Array.from({ length: 50 }, (_, i) => (
-          <div key={i} className="p-4 border rounded-lg">
-            <h4>Content Section {i + 1}</h4>
-            <p>This is content that will scroll...</p>
-          </div>
-        ))}
-      </div>
-    </DialogBody>
-    <DialogFooter sticky={true}>
-      <Button variant="outline">Cancel</Button>
-      <Button>Save Changes</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-### Custom Height Dialog
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Custom Height</Button>
-  </DialogTrigger>
-  <DialogContent 
-    size="xl" 
-    enableScrolling={true}
-    maxHeight="400px"
-  >
-    <DialogHeader>
-      <DialogTitle>Custom Height Dialog</DialogTitle>
-      <DialogDescription>
-        This dialog has a fixed maximum height of 400px.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <div className="space-y-4">
-        {/* Long content that will scroll */}
-      </div>
-    </DialogBody>
-    <DialogFooter>
-      <Button>Done</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-### Auto-Sizing Dialog
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Auto Size</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
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Full Screen</Button>
-  </DialogTrigger>
-  <DialogContent size="full" enableScrolling={true}>
-    <DialogHeader sticky={true}>
-      <DialogTitle>Full Screen Dialog</DialogTitle>
-      <DialogDescription>
-        This dialog takes up the full screen on mobile and large size on desktop.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <div className="space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <h3>Left Column</h3>
-            {/* Content */}
-          </div>
-          <div className="space-y-4">
-            <h3>Right Column</h3>
-            {/* Content */}
-          </div>
-        </div>
-      </div>
-    </DialogBody>
-    <DialogFooter sticky={true}>
-      <Button variant="outline">Cancel</Button>
-      <Button>Save All Changes</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-### Dialog with Custom Dimensions
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Custom Dimensions</Button>
-  </DialogTrigger>
-  <DialogContent 
-    maxWidth="800px"
-    maxHeight="600px"
-    minWidth="400px"
-    enableScrolling={true}
-  >
-    <DialogHeader>
-      <DialogTitle>Custom Dimensions</DialogTitle>
-      <DialogDescription>
-        This dialog has custom width and height constraints.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      {/* Content */}
-    </DialogBody>
-    <DialogFooter>
-      <Button>Save</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-### Dialog with Prevented Close Actions
-
-```tsx
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Important Dialog</Button>
-  </DialogTrigger>
-  <DialogContent 
-    size="lg"
-    preventCloseOnEscape={true}
-    preventCloseOnOutsideClick={true}
-    showCloseButton={false}
-  >
-    <DialogHeader>
-      <DialogTitle>Important Action Required</DialogTitle>
-      <DialogDescription>
-        This dialog cannot be closed accidentally.
-      </DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <p>Please complete the action below to continue.</p>
-    </DialogBody>
-    <DialogFooter>
-      <Button onClick={() => {/* handle action */}}>
-        Complete Action
-      </Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-## Size Variants
-
-| Size | Max Width | Use Case |
-|------|-----------|----------|
-| `sm` | 384px | Simple confirmations, alerts |
-| `md` | 448px | Standard forms, basic content |
-| `lg` | 512px | Complex forms, detailed content |
-| `xl` | 576px | Large forms, data tables |
-| `full` | 100% | Full screen experiences |
-| `auto` | Content-based | Dynamic content sizing |
-
-## Accessibility
-
-### WCAG 2.1 AA Compliance
-- **Semantic HTML** - Uses proper `<dialog>`, `<header>`, `<main>`, `<footer>` elements
-- **Focus Management** - Automatic focus trapping and restoration
-- **Keyboard Navigation** - Full keyboard support with proper tab order
-- **Screen Reader Support** - Complete ARIA attributes and announcements
-- **Landmark Navigation** - Proper semantic structure for screen reader navigation
-
-### Keyboard Shortcuts
-- **Escape** - Close dialog (configurable)
-- **Tab** - Navigate through focusable elements
-- **Shift + Tab** - Navigate backwards through focusable elements
-
-### Screen Reader Features
-- Dialog state announcements
-- Focus restoration when closed
-- Scrollable regions properly announced
-- Complete semantic landmark structure
-
-## Performance
-
-### Optimizations
-- **Efficient Focus Management** - Minimal DOM queries and updates
-- **Optimized Animations** - Hardware-accelerated transitions
-- **Memory Leak Prevention** - Proper cleanup of event listeners
-- **Conditional Rendering** - Only renders when needed
-- **Optimized Scroll Handling** - Debounced resize events
-
-### Best Practices
-- Use `enableScrolling={true}` for content that might overflow
-- Set appropriate `maxHeightPercent` to prevent viewport overflow
-- Use sticky headers/footers for important UI elements
-- Consider `size="auto"` for dynamic content
-
-## Dependencies
-
-- **@radix-ui/react-dialog** - Core dialog functionality and accessibility
-- **lucide-react** - Close button icon
-- **React 18+** - Hooks and refs
-- **Tailwind CSS** - Styling and animations
-
-## Migration from Basic Dialogs
-
-If you're upgrading from a basic dialog implementation:
-
-```tsx
-// Before: Basic dialog
-<Dialog>
-  <DialogTrigger>Open</DialogTrigger>
-  <DialogContent>
-    <DialogTitle>Title</DialogTitle>
-    <div>Content</div>
-    <DialogFooter>Actions</DialogFooter>
-  </DialogContent>
-</Dialog>
-
-// After: Enhanced dialog with semantic structure
-<Dialog>
-  <DialogTrigger asChild>
-    <Button>Open</Button>
-  </DialogTrigger>
-  <DialogContent size="lg" enableScrolling={true}>
-    <DialogHeader>
-      <DialogTitle>Title</DialogTitle>
-      <DialogDescription>Description</DialogDescription>
-    </DialogHeader>
-    <DialogBody>
-      <section>Content</section>
-    </DialogBody>
-    <DialogFooter>
-      Actions
-    </DialogFooter>
-  </DialogContent>
-</Dialog>
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Content not scrolling** - Ensure `enableScrolling={true}` is set
-2. **Header/footer not sticky** - Add `sticky={true}` to header/footer props
-3. **Dialog too tall** - Use `maxHeightPercent` or `maxHeight` props
-4. **Focus issues** - Ensure proper semantic structure with DialogBody
-
-### Debug Tips
-
-- Use browser dev tools to inspect the semantic structure
-- Test with keyboard navigation
-- Verify screen reader announcements
-- Check responsive behavior at different screen sizes