@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Dialog/__tests__/Dialog.accessibility.test.tsx

@@ -1,521 +0,0 @@
-/**
- * @file Dialog Accessibility Tests
- * @description Comprehensive accessibility tests for Dialog component with enhanced features
- */
-
-import React, { useState } from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../__tests__/shared';
-import {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-  type DialogSize,
-} from '../Dialog';
-import { Button } from '../../Button/Button';
-import { Input } from '../../Input/Input';
-
-// Extend expect with axe matchers
-expect.extend(toHaveNoViolations);
-
-// Mock Radix UI for consistent testing
-vi.mock('@radix-ui/react-dialog', () => ({
-  Root: ({ children, open = false, onOpenChange }: { children: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void }) => (
-    <div data-testid="dialog-root" data-open={String(open)} role="none">
-      {open && children}
-    </div>
-  ),
-  Trigger: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }>(({ children, onClick, asChild, ...props }, ref) => {
-    // If asChild is true, don't render a button wrapper
-    if (asChild) {
-      return <>{children}</>;
-    }
-    return (
-      <button ref={ref} onClick={onClick} {...props}>
-        {children}
-      </button>
-    );
-  }),
-  Portal: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="dialog-portal">{children}</div>
-  ),
-  Overlay: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-    <div ref={ref} className={className} data-testid="dialog-overlay" aria-hidden="true" {...props} />
-  )),
-  Content: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & {
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    onPointerDownOutside?: (event: Event) => void;
-  }>(({ children, className, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
-    // For accessibility, always provide aria-labelledby since our dialogs should have titles
-    return (
-      <div 
-        ref={ref} 
-        className={className} 
-        role="dialog" 
-        aria-modal="true"
-        aria-labelledby="dialog-title"
-        tabIndex={-1}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }),
-  Title: React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ children, className, ...props }, ref) => (
-    <h2 ref={ref} id="dialog-title" className={className} {...props}>
-      {children}
-    </h2>
-  )),
-  Description: React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ children, className, ...props }, ref) => (
-    <p ref={ref} className={className} {...props}>
-      {children}
-    </p>
-  )),
-  Close: React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }>(({ children, className, onClick, asChild, ...props }, ref) => {
-    // If asChild is true, don't render a button wrapper
-    if (asChild) {
-      return <>{children}</>;
-    }
-    return (
-      <button ref={ref} className={className} onClick={onClick} aria-label="Close dialog" {...props}>
-        {children}
-      </button>
-    );
-  }),
-}));
-
-// Test component that uses Dialog with state management
-const DialogTestComponent = ({ 
-  isOpen = false, 
-  size = 'md',
-  showCloseButton = true,
-  preventCloseOnEscape = false,
-  preventCloseOnOutsideClick = false,
-  children,
-  ...dialogProps 
-}: { 
-  isOpen?: boolean;
-  size?: DialogSize;
-  showCloseButton?: boolean;
-  preventCloseOnEscape?: boolean;
-  preventCloseOnOutsideClick?: boolean;
-  children?: React.ReactNode;
-} & Omit<React.ComponentProps<typeof Dialog>, 'children'>) => {
-  const [open, setOpen] = useState(isOpen);
-  
-  return (
-    <Dialog open={open} onOpenChange={setOpen} {...dialogProps}>
-      <DialogTrigger asChild>
-        <Button>Open Dialog</Button>
-      </DialogTrigger>
-      <DialogContent 
-        size={size}
-        showCloseButton={showCloseButton}
-        preventCloseOnEscape={preventCloseOnEscape}
-        preventCloseOnOutsideClick={preventCloseOnOutsideClick}
-      >
-        <DialogHeader>
-          <DialogTitle>Dialog Title</DialogTitle>
-          <DialogDescription>
-            This is a dialog description that explains what the dialog is for.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <Input placeholder="Enter your name" aria-label="Name input" />
-          <Input placeholder="Enter your email" aria-label="Email input" type="email" />
-        </div>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button type="submit">Save changes</Button>
-        </DialogFooter>
-        {children}
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-describe('Dialog Accessibility', () => {
-  beforeEach(() => {
-    // Mock console.log to reduce noise
-    vi.spyOn(console, 'log').mockImplementation(() => {});
-  });
-
-  describe('ARIA Attributes and Roles', () => {
-    it('should have proper ARIA attributes when open', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      // Wait for dialog to render
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-      
-      // Check role
-      expect(dialog).toHaveAttribute('role', 'dialog');
-      
-      // Check aria-modal
-      expect(dialog).toHaveAttribute('aria-modal', 'true');
-      
-      // Check tabindex for focus management
-      expect(dialog).toHaveAttribute('tabindex', '-1');
-    });
-
-    it('should have proper backdrop ARIA attributes', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByTestId('dialog-overlay')).toBeInTheDocument();
-      });
-
-      const backdrop = screen.getByTestId('dialog-overlay');
-      expect(backdrop).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    it('should maintain proper heading hierarchy with DialogTitle', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const title = screen.getByText('Dialog Title');
-      expect(title.tagName).toBe('H2');
-    });
-
-    it('should have proper close button accessibility', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} showCloseButton={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Look for close button with aria-label
-      const closeButtons = screen.getAllByLabelText('Close dialog');
-      expect(closeButtons.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('should focus the dialog when opened', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-        // In our mock setup, we can't test actual focus behavior
-        // but we can verify the dialog is focusable
-        expect(dialog).toHaveAttribute('tabindex', '-1');
-      });
-    });
-
-    it('should trap focus within dialog', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const nameInput = screen.getByLabelText('Name input');
-      const emailInput = screen.getByLabelText('Email input');
-      const cancelButton = screen.getByText('Cancel');
-      const saveButton = screen.getByText('Save changes');
-
-      // Test that all focusable elements are accessible
-      nameInput.focus();
-      expect(document.activeElement).toBe(nameInput);
-
-      emailInput.focus();
-      expect(document.activeElement).toBe(emailInput);
-
-      cancelButton.focus();
-      expect(document.activeElement).toBe(cancelButton);
-
-      saveButton.focus();
-      expect(document.activeElement).toBe(saveButton);
-    });
-
-    it('should handle focus management with no close button', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} showCloseButton={false} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Should still maintain focus management without close button
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toHaveAttribute('tabindex', '-1');
-
-      // Should still be able to focus on other interactive elements
-      const nameInput = screen.getByLabelText('Name input');
-      nameInput.focus();
-      expect(document.activeElement).toBe(nameInput);
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('should close dialog with Escape key by default', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-      
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Press Escape
-      fireEvent.keyDown(document, { key: 'Escape' });
-      
-      // Note: In real implementation, this would close the dialog
-      // Here we're testing that the event handler is properly set up
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
-    });
-
-    it('should prevent closing with Escape when preventCloseOnEscape is true', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} preventCloseOnEscape={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Press Escape - should not close
-      fireEvent.keyDown(document, { key: 'Escape' });
-      
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
-    });
-  });
-
-  describe('Size Variants Accessibility', () => {
-    it('should maintain accessibility across all size variants', async () => {
-      const sizes: DialogSize[] = ['sm', 'md', 'lg', 'xl', 'full'];
-      
-      for (const size of sizes) {
-        const { unmount } = renderWithProviders(<DialogTestComponent isOpen={true} size={size} />);
-        
-        await waitFor(() => {
-          expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toHaveAttribute('role', 'dialog');
-        expect(dialog).toHaveAttribute('aria-modal', 'true');
-        
-        unmount();
-      }
-    });
-
-    it('should handle full-screen dialog accessibility', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} size="full" />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-      
-      // Should maintain proper ARIA attributes even in full-screen mode
-      expect(dialog).toHaveAttribute('role', 'dialog');
-      expect(dialog).toHaveAttribute('aria-modal', 'true');
-      expect(dialog).toHaveAttribute('tabindex', '-1');
-    });
-  });
-
-  describe('Screen Reader Compatibility', () => {
-    it('should announce dialog content to screen readers', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Title should be accessible to screen readers
-      expect(screen.getByText('Dialog Title')).toBeInTheDocument();
-      
-      // Description should be accessible to screen readers
-      expect(screen.getByText('This is a dialog description that explains what the dialog is for.')).toBeInTheDocument();
-    });
-
-    it('should provide proper labels for form controls', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Form inputs should have proper labels
-      expect(screen.getByLabelText('Name input')).toBeInTheDocument();
-      expect(screen.getByLabelText('Email input')).toBeInTheDocument();
-    });
-
-    it('should handle screen reader announcements for close button', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} showCloseButton={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Close button should have screen reader text
-      const closeButtons = screen.getAllByLabelText('Close dialog');
-      expect(closeButtons.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Error Handling and Edge Cases', () => {
-    it('should handle dialog with minimal content gracefully', async () => {
-      const MinimalDialog = () => (
-        <Dialog open={true}>
-          <DialogContent>
-            <DialogTitle>Minimal Dialog</DialogTitle>
-          </DialogContent>
-        </Dialog>
-      );
-
-      renderWithProviders(<MinimalDialog />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toHaveAttribute('role', 'dialog');
-      expect(dialog).toHaveAttribute('aria-modal', 'true');
-    });
-
-    it('should handle dialog without title gracefully', async () => {
-      const NoTitleDialog = () => (
-        <Dialog open={true}>
-          <DialogContent>
-            <DialogDescription>Dialog without title</DialogDescription>
-          </DialogContent>
-        </Dialog>
-      );
-
-      renderWithProviders(<NoTitleDialog />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Should still be accessible even without title
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toHaveAttribute('role', 'dialog');
-      expect(dialog).toHaveAttribute('aria-modal', 'true');
-    });
-  });
-
-  describe('Custom Styling Accessibility', () => {
-    it('should maintain accessibility with custom overlay styling', async () => {
-      renderWithProviders(
-        <DialogTestComponent 
-          isOpen={true} 
-          // Custom overlay styling should not affect accessibility
-        />
-      );
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const overlay = screen.getByTestId('dialog-overlay');
-      expect(overlay).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    it('should maintain focus management with custom content styling', async () => {
-      renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Custom styling should not interfere with focus management
-      const dialog = screen.getByRole('dialog');
-      expect(dialog).toHaveAttribute('tabindex', '-1');
-    });
-  });
-
-  describe('Axe Accessibility Testing', () => {
-    it('should not have any accessibility violations', async () => {
-      const { container } = renderWithProviders(<DialogTestComponent isOpen={true} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should not have accessibility violations with full-screen dialog', async () => {
-      const { container } = renderWithProviders(<DialogTestComponent isOpen={true} size="full" />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should not have accessibility violations without close button', async () => {
-      const { container } = renderWithProviders(<DialogTestComponent isOpen={true} showCloseButton={false} />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-  });
-
-  describe('Integration with Form Elements', () => {
-    it('should maintain proper form accessibility within dialog', async () => {
-      const FormDialog = () => (
-        <Dialog open={true}>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Form Dialog</DialogTitle>
-              <DialogDescription>Fill out this form</DialogDescription>
-            </DialogHeader>
-            <form role="form">
-              <div className="grid gap-4 py-4">
-                <div>
-                  <label htmlFor="name">Name</label>
-                  <Input id="name" placeholder="Enter your name" />
-                </div>
-                <div>
-                  <label htmlFor="email">Email</label>
-                  <Input id="email" type="email" placeholder="Enter your email" />
-                </div>
-              </div>
-              <DialogFooter>
-                <Button type="submit">Submit</Button>
-              </DialogFooter>
-            </form>
-          </DialogContent>
-        </Dialog>
-      );
-
-      renderWithProviders(<FormDialog />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('dialog')).toBeInTheDocument();
-      });
-
-      // Form elements should be properly associated with labels
-      expect(screen.getByLabelText('Name')).toBeInTheDocument();
-      expect(screen.getByLabelText('Email')).toBeInTheDocument();
-      
-      // Form should be accessible
-      expect(screen.getByRole('form', { hidden: true })).toBeInTheDocument();
-    });
-  });
-}); 

package/src/components/Dialog/__tests__/Dialog.auto-size.example.tsx

@@ -1,157 +0,0 @@
-/**
- * @file Dialog Auto Size Example
- * @package @jmruthers/pace-core
- * @module Components/Dialog/Examples
- * @since 0.4.32
- * 
- * Example demonstrating the new auto-size functionality for Dialog components.
- * This shows how to use size="auto" to make dialogs automatically adjust their width to fit content.
- */
-
-import React from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogTrigger } from '../Dialog';
-import { Button } from '../../Button/Button';
-
-/**
- * Example: Auto-sizing dialog for data tables
- * This dialog will automatically adjust its width to fit the table content
- */
-export function AutoSizeDataTableDialog() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Import Recipe Data</Button>
-      </DialogTrigger>
-      <DialogContent size="auto">
-        <DialogHeader>
-          <DialogTitle>Import Recipe Data</DialogTitle>
-          <DialogDescription>
-            Upload a CSV file with recipe data. The file must contain exactly these columns: 
-            dish_code, dish_name, mealtype_name, diettype_name, item_name, item_brand, 
-            recipe_qtypp, recipe_uptake. The import will replace all existing recipe data 
-            for dishes that appear in the file. Empty brand fields will be skipped.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogBody>
-          <div className="space-y-4">
-            {/* File selection area */}
-            <div className="border-2 border-dashed border-main-300 rounded-lg p-8 text-center">
-              <div className="text-main-600 mb-2">Selected: cake_dish.csv</div>
-              <div className="text-main-500 text-sm">File selected, processing preview...</div>
-              <Button className="mt-4">Select Recipe File</Button>
-            </div>
-            
-            {/* Data preview table */}
-            <div>
-              <h4 className="font-medium mb-2">Preview (first 5 rows)</h4>
-              <div className="overflow-x-auto">
-                <table className="w-full border border-main-200 rounded-md">
-                  <thead className="bg-main-50">
-                    <tr>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">dish_code</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">dish_name</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">mealtype_name</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">diettype_name</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">item_name</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">item_brand</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">recipe_qtypp</th>
-                      <th className="px-3 py-2 text-left text-sm font-medium border-b border-main-200">recipe_uptake</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">BBQ</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">BBQ hamburgers and potato salad</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Dinner</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Standard</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Lettuce iceberg shredded</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100"></td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">35</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">1</td>
-                    </tr>
-                    <tr>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">BBQ</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">BBQ hamburgers and potato salad</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Dinner</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Standard</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Sauce tomato GF</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">Masterfoods</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">30</td>
-                      <td className="px-3 py-2 text-sm border-b border-main-100">0.75</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        </DialogBody>
-        <DialogFooter>
-          <div className="flex justify-between items-center w-full">
-            <span className="text-sm text-main-600">Total rows to import: 281</span>
-            <div className="flex gap-2">
-              <Button variant="outline">Cancel</Button>
-              <Button>Import Recipes</Button>
-            </div>
-          </div>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-/**
- * Example: Auto-sizing dialog for forms
- * This dialog will automatically adjust its width to fit the form content
- */
-export function AutoSizeFormDialog() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button>Create User</Button>
-      </DialogTrigger>
-      <DialogContent size="auto">
-        <DialogHeader>
-          <DialogTitle>Create New User</DialogTitle>
-          <DialogDescription>
-            Fill out the form below to create a new user account.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogBody>
-          <form className="space-y-4 min-w-96">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium mb-1">First Name</label>
-                <input className="w-full px-3 py-2 border border-main-200 rounded-md" />
-              </div>
-              <div>
-                <label className="block text-sm font-medium mb-1">Last Name</label>
-                <input className="w-full px-3 py-2 border border-main-200 rounded-md" />
-              </div>
-            </div>
-            <div>
-              <label className="block text-sm font-medium mb-1">Email</label>
-              <input type="email" className="w-full px-3 py-2 border border-main-200 rounded-md" />
-            </div>
-            <div>
-              <label className="block text-sm font-medium mb-1">Role</label>
-              <select className="w-full px-3 py-2 border border-main-200 rounded-md">
-                <option>User</option>
-                <option>Admin</option>
-                <option>Manager</option>
-              </select>
-            </div>
-          </form>
-        </DialogBody>
-        <DialogFooter>
-          <Button variant="outline">Cancel</Button>
-          <Button>Create User</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default {
-  AutoSizeDataTableDialog,
-  AutoSizeFormDialog,
-};