Initial commit

frontend/src/components/ui/Dialog.tsx

@@ -0,0 +1,79 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
+import {
+  Overlay,
+  OverlayClose,
+  OverlayContent,
+  OverlayDescription,
+  OverlayFooter,
+  OverlayHeader,
+  OverlayTitle,
+  OverlayTrigger,
+} from './Overlay'
+
+/* Dialog is a thin skin over the shared Overlay primitive — all behavior
+   (focus trap, Escape, scroll lock, focus restore, aria wiring) lives there. */
+
+export type DialogProps = {
+  children: ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function Dialog(props: DialogProps) {
+  return <Overlay {...props} />
+}
+
+export function DialogTrigger(props: Parameters<typeof OverlayTrigger>[0]) {
+  return <OverlayTrigger {...props} />
+}
+
+export function DialogContent({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <OverlayContent
+      backdropClassName="dialog-backdrop"
+      panelClassName="dialog-panel"
+      closeButtonLabel="Close dialog"
+      className={className}
+    >
+      {children}
+    </OverlayContent>
+  )
+}
+
+export function DialogHeader({ className, style, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const defaultStyle: CSSProperties = { marginBottom: 'var(--space-4)', ...style }
+  return <OverlayHeader className={className} style={defaultStyle} {...props} />
+}
+
+export function DialogTitle({ className, style, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  const defaultStyle: CSSProperties = {
+    margin: 0,
+    fontSize: 'var(--text-xl)',
+    fontWeight: 700,
+    color: 'var(--foreground)',
+    letterSpacing: '-0.03em',
+    ...style,
+  }
+  return <OverlayTitle className={className} style={defaultStyle} {...props} />
+}
+
+export function DialogDescription({ className, style, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  const defaultStyle: CSSProperties = {
+    margin: 0,
+    fontSize: 'var(--text-sm)',
+    color: 'var(--muted-foreground)',
+    lineHeight: 1.5,
+    ...style,
+  }
+  return <OverlayDescription className={className} style={defaultStyle} {...props} />
+}
+
+export function DialogFooter({ className, style, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const defaultStyle: CSSProperties = { marginTop: 'var(--space-6)', ...style }
+  return <OverlayFooter className={className} style={defaultStyle} {...props} />
+}
+
+export function DialogClose(props: Parameters<typeof OverlayClose>[0]) {
+  return <OverlayClose {...props} />
+}