Dialog

1'use client'
2 
3import * as React from 'react'
4import * as DialogPrimitive from '@radix-ui/react-dialog'
5import { cn } from '@/lib/utils'
6 
7const Dialog        = DialogPrimitive.Root
8const DialogTrigger = DialogPrimitive.Trigger
9const DialogPortal  = DialogPrimitive.Portal
10const DialogClose   = DialogPrimitive.Close
11 
12/* ── Overlay ── */
13const DialogOverlay = React.forwardRef<
14  React.ElementRef<typeof DialogPrimitive.Overlay>,
15  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
16>(({ className, ...props }, ref) => (
17  <DialogPrimitive.Overlay
18    ref={ref}
19    className={cn(
20      'fixed inset-0 z-50',
21      'data-[state=open]:animate-in data-[state=closed]:animate-out',
22      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
23      className
24    )}
25    style={{ background: 'rgba(7, 5, 15, 0.88)' }}
26    {...props}
27  />
28))
29DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
30 
31/* ── Content ── */
32const DialogContent = React.forwardRef<
33  React.ElementRef<typeof DialogPrimitive.Content>,
34  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35>(({ className, children, ...props }, ref) => (
36  <DialogPortal>
37    <DialogOverlay />
38    <DialogPrimitive.Content
39      ref={ref}
40      className={cn(
41        'fixed left-[50%] top-[50%] z-50',
42        'translate-x-[-50%] translate-y-[-50%]',
43        'w-full max-w-lg',
44        'border border-[var(--border)]',
45        'bg-[var(--surface-raised)]',
46        'rounded-none',
47        'shadow-[var(--glow-green)]',
48        'focus:outline-none',
49        'data-[state=open]:animate-in data-[state=closed]:animate-out',
50        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
51        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
52        className
53      )}
54      style={{ clipPath: 'var(--clip-corner-md)' }}
55      {...props}
56    >
57      {children}
58      <DialogPrimitive.Close
59        style={{
60          position:   'absolute',
61          right:      '0.75rem',
62          top:        '0.75rem',
63          background: 'transparent',
64          border:     'none',
65          color:      'var(--text-muted)',
66          cursor:     'pointer',
67          fontSize:   '0.8rem',
68          padding:    '2px 4px',
69          lineHeight: 1,
70          transition: 'color 0.15s',
71          fontFamily: 'var(--font-mono)',
72        }}
73        onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--color-red)')}
74// … truncated