80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
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} />
|
|
}
|