Lemma UI

1import * as React from "react"
2import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
3 
4import { cn } from "@/components/lemma/lib/utils"
5import { Button } from "@/components/lemma/ui/button"
6 
7function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
8  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
9}
10 
11function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
12  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
13}
14 
15function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
16  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
17}
18 
19function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
20  return (
21    <AlertDialogPrimitive.Backdrop
22      data-slot="alert-dialog-overlay"
23      className={cn(
24        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
25        className
26      )}
27      {...props}
28    />
29  )
30}
31 
32function AlertDialogContent({
33  className,
34  children,
35  ...props
36}: AlertDialogPrimitive.Popup.Props) {
37  return (
38    <AlertDialogPortal>
39      <AlertDialogOverlay />
40      <AlertDialogPrimitive.Popup
41        data-slot="alert-dialog-content"
42        className={cn(
43          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
44          className
45        )}
46        {...props}
47      >
48        {children}
49      </AlertDialogPrimitive.Popup>
50    </AlertDialogPortal>
51  )
52}
53 
54function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
55  return (
56    <div
57      data-slot="alert-dialog-header"
58      className={cn("flex flex-col gap-2", className)}
59      {...props}
60    />
61  )
62}
63 
64function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
65  return (
66    <div
67      data-slot="alert-dialog-footer"
68      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
69      {...props}
70    />
71  )
72}
73 
74// … truncated