metabinaries 1.3.3

package/src/templates/ui-4.js

@@ -0,0 +1,1025 @@
+// UI Components Part 4 - Checkbox, Collapsible, Command, Dialog, Drawer, DropdownMenu, Popover, ScrollArea, Select, Separator, Sheet
+
+export const uiTemplates4 = {
+  'components/ui/checkbox.tsx': `'use client';
+
+import * as React from 'react';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+export interface CheckboxProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange'
+> {
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    return (
+      <button
+        type='button'
+        role='checkbox'
+        aria-checked={checked}
+        onClick={() => onCheckedChange?.(!checked)}
+        className={cn(
+          'h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'flex items-center justify-center transition-colors',
+          checked && 'bg-primary text-primary-foreground',
+          className
+        )}
+        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {checked && <Check className='h-3 w-3' />}
+      </button>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };`,
+
+  'components/ui/collapsible.tsx': `'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot='collapsible-trigger'
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot='collapsible-content'
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };`,
+
+  'components/ui/popover.tsx': `'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden',
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };`,
+
+  'components/ui/scroll-area.tsx': `'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot='scroll-area'
+      className={cn('relative overflow-hidden', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot='scroll-area-viewport'
+        className='h-full w-full rounded-[inherit]'
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot='scroll-area-scrollbar'
+      orientation={orientation}
+      className={cn(
+        'flex touch-none transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent p-[1px]',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot='scroll-area-thumb'
+        className='bg-border relative flex-1 rounded-full'
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };`,
+
+  'components/ui/separator.tsx': `'use client';
+
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '@/lib/utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot='separator-root'
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };`,
+
+  'components/ui/dialog.tsx': `'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot='dialog-overlay'
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot='dialog-content'
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg]:size-4'>
+          <XIcon />
+          <span className='sr-only'>Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-header'
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-footer'
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot='dialog-title'
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot='dialog-description'
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};`,
+
+  'components/ui/confirmation-dialog.tsx': `'use client';
+
+import * as React from 'react';
+import {
+  AlertTriangle,
+  Trash2,
+  Edit,
+  Info,
+  CheckCircle,
+  Loader2,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+
+// Confirmation dialog variants
+export type ConfirmVariant = 'danger' | 'warning' | 'info' | 'success';
+
+// Variant configurations
+const variantConfig = {
+  danger: {
+    icon: Trash2,
+    iconColor: 'text-red-500',
+    iconBg: 'bg-red-50 dark:bg-red-900/20',
+    confirmButton: 'destructive',
+  },
+  warning: {
+    icon: AlertTriangle,
+    iconColor: 'text-amber-500',
+    iconBg: 'bg-amber-50 dark:bg-amber-900/20',
+    confirmButton: 'default',
+  },
+  info: {
+    icon: Info,
+    iconColor: 'text-blue-500',
+    iconBg: 'bg-blue-50 dark:bg-blue-900/20',
+    confirmButton: 'default',
+  },
+  success: {
+    icon: CheckCircle,
+    iconColor: 'text-green-500',
+    iconBg: 'bg-green-50 dark:bg-green-900/20',
+    confirmButton: 'default',
+  },
+};
+
+export interface ConfirmationDialogProps {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Dialog title */
+  title: string;
+  /** Dialog description/message */
+  description: string;
+  /** Confirm button text */
+  confirmText?: string;
+  /** Cancel button text */
+  cancelText?: string;
+  /** Optional text that must be typed to enable confirmation */
+  requiredConfirmationText?: string;
+  /** Label for the confirmation input */
+  confirmationInputLabel?: string;
+  /** Callback when confirmed */
+  onConfirm: () => void | Promise<void>;
+  /** Callback when cancelled */
+  onCancel?: () => void;
+  /** Dialog variant - affects styling */
+  variant?: ConfirmVariant;
+  /** Whether the confirm action is loading */
+  isLoading?: boolean;
+  /** Custom icon component */
+  icon?: React.ComponentType<{ className?: string }>;
+  /** Whether to show the icon */
+  showIcon?: boolean;
+}
+
+export function ConfirmationDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  requiredConfirmationText,
+  confirmationInputLabel,
+  onConfirm,
+  onCancel,
+  variant = 'danger',
+  isLoading = false,
+  icon,
+  showIcon = true,
+}: ConfirmationDialogProps) {
+  const [inputValue, setInputValue] = React.useState('');
+  const config = variantConfig[variant];
+  const IconComponent = icon || config.icon;
+
+  const isConfirmDisabled =
+    isLoading ||
+    (!!requiredConfirmationText &&
+      inputValue.toLowerCase() !== requiredConfirmationText.toLowerCase());
+
+  // Reset input when dialog opens/closes
+  React.useEffect(() => {
+    if (!open) {
+      setInputValue('');
+    }
+  }, [open]);
+
+  const handleConfirm = async () => {
+    if (isConfirmDisabled) return;
+    await onConfirm();
+    onOpenChange(false);
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='sm:max-w-[420px] p-0 overflow-hidden border-zinc-200 dark:border-zinc-800 shadow-2xl'>
+        <div className='p-6 pt-8 space-y-6'>
+          <DialogHeader className='flex flex-col items-center text-center sm:text-center space-y-4'>
+            {showIcon && (
+              <div
+                className={cn(
+                  'rounded-2xl p-4 w-fit mx-auto transition-colors duration-300',
+                  config.iconBg
+                )}
+              >
+                <IconComponent className={cn('size-8', config.iconColor)} />
+              </div>
+            )}
+            <div className='space-y-2'>
+              <DialogTitle className='text-xl font-bold tracking-tight text-center'>
+                {title}
+              </DialogTitle>
+              <DialogDescription className='text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed max-w-[320px] mx-auto text-center'>
+                {description}
+              </DialogDescription>
+            </div>
+          </DialogHeader>
+
+          {requiredConfirmationText && (
+            <div className='space-y-3 px-2'>
+              <Label className='text-xs font-semibold tracking-wider text-zinc-500 dark:text-zinc-400'>
+                {confirmationInputLabel ||
+                  \`Type "\${requiredConfirmationText}" to confirm\`}
+              </Label>
+              <Input
+                value={inputValue}
+                onChange={e => setInputValue(e.target.value)}
+                placeholder={requiredConfirmationText}
+                className='h-12 text-center font-medium border-2 focus-visible:ring-0 focus-visible:border-black dark:focus-visible:border-white transition-all'
+                autoFocus
+              />
+            </div>
+          )}
+
+          <DialogFooter className='flex flex-col sm:flex-row gap-3 sm:justify-stretch mt-2'>
+            <Button
+              variant='outline'
+              onClick={handleCancel}
+              disabled={isLoading}
+              className='flex-1 h-11 border-zinc-200 dark:border-zinc-800 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-all'
+            >
+              {cancelText}
+            </Button>
+            <Button
+              variant={variant === 'danger' ? 'destructive' : 'default'}
+              onClick={handleConfirm}
+              disabled={isConfirmDisabled}
+              className={cn(
+                'flex-1 h-11 font-semibold transition-all',
+                variant === 'danger' &&
+                !isConfirmDisabled &&
+                'bg-red-600 hover:bg-red-700'
+              )}
+            >
+              {isLoading ? (
+                <div className='flex items-center gap-2'>
+                  <Loader2 className='size-4 animate-spin' />
+                  <span>Processing...</span>
+                </div>
+              ) : (
+                confirmText
+              )}
+            </Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ============================================
+// Preset Confirmation Dialogs
+// ============================================
+
+export interface DeleteConfirmationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  itemName?: string;
+  isLoading?: boolean;
+  /** Optional text that must be typed to enable deletion (e.g. 'DELETE') */
+  requiredConfirmationText?: string;
+}
+
+/**
+ * Delete Confirmation Dialog
+ * Pre-configured for delete actions
+ */
+export function DeleteConfirmation({
+  open,
+  onOpenChange,
+  onConfirm,
+  itemName = 'this item',
+  isLoading,
+  requiredConfirmationText,
+}: DeleteConfirmationProps) {
+  return (
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title='Delete Confirmation'
+      description={\`Are you sure you want to delete \${itemName}? This action cannot be undone.\`}
+      confirmText='Delete'
+      cancelText='Cancel'
+      requiredConfirmationText={requiredConfirmationText}
+      onConfirm={onConfirm}
+      variant='danger'
+      isLoading={isLoading}
+      icon={Trash2}
+    />
+  );
+}
+
+export interface EditConfirmationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  message?: string;
+  isLoading?: boolean;
+}
+
+/**
+ * Edit Confirmation Dialog
+ * Pre-configured for confirming edits/changes
+ */
+export function EditConfirmation({
+  open,
+  onOpenChange,
+  onConfirm,
+  message = 'Are you sure you want to save these changes?',
+  isLoading,
+}: EditConfirmationProps) {
+  return (
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title='Confirm Changes'
+      description={message}
+      confirmText='Save Changes'
+      cancelText='Cancel'
+      onConfirm={onConfirm}
+      variant='warning'
+      isLoading={isLoading}
+      icon={Edit}
+    />
+  );
+}
+
+export interface UnsavedChangesConfirmationProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void | Promise<void>;
+  onCancel?: () => void;
+}
+
+/**
+ * Unsaved Changes Confirmation Dialog
+ * Used when navigating away with unsaved changes
+ */
+export function UnsavedChangesConfirmation({
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel,
+}: UnsavedChangesConfirmationProps) {
+  return (
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title='Unsaved Changes'
+      description='You have unsaved changes. Are you sure you want to leave? Your changes will be lost.'
+      confirmText='Leave'
+      cancelText='Stay'
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      variant='warning'
+      icon={AlertTriangle}
+    />
+  );
+}
+
+// ============================================
+// Hook for easier usage
+// ============================================
+
+export interface UseConfirmationReturn {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  confirm: () => Promise<boolean>;
+  ConfirmDialog: React.FC<
+    Omit<ConfirmationDialogProps, 'open' | 'onOpenChange' | 'onConfirm'>
+  >;
+}
+
+/**
+ * Hook for managing confirmation dialog state
+ *
+ * @example
+ * \`\`\`tsx
+ * const { confirm, ConfirmDialog } = useConfirmation();
+ *
+ * const handleDelete = async () => {
+ *   const confirmed = await confirm();
+ *   if (confirmed) {
+ *     await deleteItem();
+ *   }
+ * };
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleDelete}>Delete</button>
+ *     <ConfirmDialog
+ *       title="Delete Item"
+ *       description="Are you sure?"
+ *       variant="danger"
+ *     />
+ *   </>
+ * );
+ * \`\`\`
+ */
+export function useConfirmation(): UseConfirmationReturn {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const resolveRef = React.useRef<(value: boolean) => void>(() => {
+    return;
+  });
+
+  const open = React.useCallback(() => setIsOpen(true), []);
+  const close = React.useCallback(() => setIsOpen(false), []);
+
+  const confirm = React.useCallback(() => {
+    setIsOpen(true);
+    return new Promise<boolean>(resolve => {
+      resolveRef.current = resolve;
+    });
+  }, []);
+
+  const handleConfirm = React.useCallback(() => {
+    resolveRef.current?.(true);
+    setIsOpen(false);
+  }, []);
+
+  const handleCancel = React.useCallback(() => {
+    resolveRef.current?.(false);
+    setIsOpen(false);
+  }, []);
+
+  const ConfirmDialog: React.FC<
+    Omit<ConfirmationDialogProps, 'open' | 'onOpenChange' | 'onConfirm'>
+  > = React.useCallback(
+    props => (
+      <ConfirmationDialog
+        {...props}
+        open={isOpen}
+        onOpenChange={open => {
+          if (!open) handleCancel();
+        }}
+        onConfirm={handleConfirm}
+        onCancel={handleCancel}
+      />
+    ),
+    [isOpen, handleConfirm, handleCancel]
+  );
+
+  return {
+    isOpen,
+    open,
+    close,
+    confirm,
+    ConfirmDialog,
+  };
+}`,
+
+
+  'components/ui/dropdown-menu.tsx': `'use client';
+
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  CircleIcon,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot='dropdown-menu-trigger'
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot='dropdown-menu-content'
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot='dropdown-menu-item'
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot='dropdown-menu-checkbox-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className='absolute left-2 flex size-3.5 items-center justify-center'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className='size-4' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot='dropdown-menu-radio-group'
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot='dropdown-menu-radio-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className='absolute left-2 flex size-3.5 items-center justify-center'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className='fill-current size-2' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot='dropdown-menu-label'
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-semibold data-[inset=true]:pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot='dropdown-menu-separator'
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='dropdown-menu-shortcut'
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest opacity-60',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot='dropdown-menu-sub-trigger'
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset=true]:pl-8',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className='ml-auto size-4' />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot='dropdown-menu-sub-content'
+      className={cn(
+        'bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};`,
+
+};