@popgrids/ui 0.0.20 → 0.0.21

package/dist/dialog.cjs

@@ -4,30 +4,395 @@ var dialog = require('@base-ui/react/dialog');
 var icons = require('@untitledui/icons');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var button = require('@base-ui/react/button');
+var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var loaderVariants = classVarianceAuthority.cva("flex shrink-0 items-center justify-center", {
+  variants: {
+    theme: {
+      default: "[--loader-foreground:var(--foreground)] [--loader-background:var(--foreground)]",
+      reversed: "[--loader-foreground:var(--background)] [--loader-background:var(--foreground)]",
+      black: "[--loader-foreground:var(--color-brand-midnight-900)] [--loader-background:var(--color-grayscale-300)]",
+      white: "[--loader-foreground:var(--color-grayscale-300)] [--loader-background:var(--color-brand-midnight-900)]"
+    },
+    variant: {
+      spinner: "size-5 motion-reduce:animate-none",
+      loader: "relative flex h-[13px] w-[23px] motion-reduce:animate-none"
+    }
+  },
+  defaultVariants: {
+    theme: "default",
+    variant: "spinner"
+  }
+});
+var spinnerFgVariants = classVarianceAuthority.cva("", {
+  variants: {
+    theme: {
+      default: "fill-foreground opacity-[0.06]",
+      reversed: "fill-white opacity-10",
+      black: "fill-black opacity-[0.04]",
+      white: "fill-white opacity-[0.04]"
+    }
+  }
+});
+var spinnerBgVariants = classVarianceAuthority.cva("", {
+  variants: {
+    theme: {
+      default: "fill-foreground",
+      reversed: "fill-background",
+      black: "fill-black opacity-[0.98]",
+      white: "fill-white opacity-[0.98]"
+    }
+  }
+});
+function Loader({
+  theme = "default",
+  variant = "spinner",
+  className,
+  style,
+  ...props
+}) {
+  const dotCount = 21;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "loader",
+      className: cn(
+        loaderVariants({ theme, variant }),
+        variant === "spinner" && "animate-spin",
+        className
+      ),
+      ...props,
+      children: variant === "spinner" ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Loading spinner" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#pop_loader_clip_path)", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: spinnerFgVariants({ theme }),
+                  d: "M20 10C20 15.5137 15.5137 20 10 20C4.48628 20 6.78126e-07 15.5137 4.37114e-07 10C1.96101e-07 4.48627 4.48627 3.50301e-07 10 1.09288e-07C15.5137 -1.31724e-07 20 4.48627 20 10ZM2.35294 10C2.35294 14.2196 5.78039 17.6471 10 17.6471C14.2196 17.6471 17.6471 14.2196 17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294C5.78039 2.35294 2.35294 5.78039 2.35294 10Z"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: spinnerBgVariants({ theme }),
+                  d: "M20 10L17.6471 10C17.6471 5.78039 14.2196 2.35294 10 2.35294L10 7.10315e-07C15.5137 4.69302e-07 20 4.48627 20 10Z"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "pop_loader_clip_path", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                width: "20",
+                height: "20",
+                fill: "white",
+                transform: "translate(8.74228e-07 20) rotate(-90)"
+              }
+            ) }) })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: dotCount }, (_, index) => {
+        const delaySeconds = index * 0.035;
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: Dots are static and ordered
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "bg-grayscale-200 dark:bg-grayscale-700 animate-loader-wave absolute top-0 size-[3px] rounded-full motion-reduce:animate-none",
+              style: {
+                left: `${index}px`,
+                animationDelay: `${delaySeconds}s`
+              }
+            },
+            index
+          )
+        );
+      }) })
+    }
+  );
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex relative items-center gap-1.5 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 text-foreground bg-background group/button outline-none focus-visible:border-ring-3 focus-visible:ring-ring/60 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      align: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      collapsed: {
+        false: null,
+        true: "min-w-10 max-w-10 justify-center"
+      },
+      outline: {
+        false: null,
+        true: ""
+      },
+      hasLeading: {
+        false: null
+      },
+      theme: {
+        base: "bg-foreground text-background",
+        brand: "bg-primary-foreground text-primary",
+        error: ""
+      },
+      hasTrailing: {
+        false: null
+      },
+      variant: {
+        default: "hover:bg-background/90",
+        outline: "backdrop-blur-lg ",
+        primary: "bg-primary-foreground/0 backdrop-blur-lg text-primary",
+        secondary: "bg-secondary-foreground/0 backdrop-blur-lg text-secondary",
+        tertiary: "bg-background/0 backdrop-blur-lg [--foreground:var(--color-text-text-default)]"
+      },
+      pill: {
+        false: "rounded-xs",
+        true: "rounded-full"
+      },
+      size: {
+        default: "h-10 min-h-10 px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-[18px]",
+        lg: "h-12 min-h-12 text-base [&_svg:not([class*='size-'])]:size-[20px]"
+      }
+    },
+    defaultVariants: {
+      align: "center",
+      outline: false,
+      pill: false,
+      size: "default",
+      theme: "brand",
+      variant: "default"
+    },
+    compoundVariants: [
+      {
+        pill: true,
+        size: "default",
+        class: "min-w-10 min-h-10 px-4"
+      },
+      {
+        pill: true,
+        collapsed: true,
+        class: "max-w-10"
+      },
+      {
+        pill: true,
+        size: "lg",
+        class: "min-w-12 min-h-12 px-4"
+      },
+      {
+        pill: true,
+        size: "lg",
+        collapsed: true,
+        class: "max-w-[54px] max-h-12"
+      },
+      {
+        collapsed: false,
+        size: "default",
+        align: "left",
+        pill: false,
+        class: "pr-3 pl-2"
+      },
+      {
+        align: "center",
+        collapsed: false,
+        size: "default",
+        pill: false,
+        class: "px-3"
+      },
+      {
+        hasLeading: true,
+        pill: false,
+        align: "left",
+        size: "default",
+        class: "pr-3 pl-2"
+      },
+      {
+        collapsed: false,
+        size: "default",
+        pill: true,
+        class: "px-4"
+      },
+      {
+        size: "lg",
+        pill: true,
+        collapsed: false,
+        class: "px-4"
+      },
+      {
+        variant: "primary",
+        outline: false,
+        theme: "base",
+        class: "bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
+      },
+      {
+        variant: "primary",
+        outline: true,
+        theme: "base",
+        class: "ring ring-foreground bg-background/0 text-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
+      },
+      {
+        variant: "primary",
+        outline: true,
+        theme: "brand",
+        class: "ring ring-primary-foreground bg-background/0 text-primary-foreground hover:ring-2 active:ring active:bg-background/1 disabled:outline-none disabled:bg-background/0 focus-visible:ring focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-background/1"
+      },
+      {
+        variant: "primary",
+        theme: "brand",
+        outline: false,
+        class: "bg-primary-foreground text-primary hover:bg-primary-foreground hover:text-primary active:bg-primary-foreground active:text-primary focus-visible:bg-primary-foreground focus-visible:text-primary"
+      },
+      {
+        variant: "primary",
+        theme: "error",
+        class: "bg-destructive text-black"
+      },
+      {
+        variant: "secondary",
+        outline: false,
+        theme: "base",
+        class: "bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md"
+      },
+      {
+        variant: "secondary",
+        outline: true,
+        theme: "base",
+        class: "bg-background/0 text-foreground ring ring-foreground/0 hover:ring-foreground active:ring-foreground/0 disabled:ring-foreground/0 backdrop-blur-lg focus-visible:backdrop-blur-md"
+      },
+      {
+        variant: "tertiary",
+        outline: false,
+        theme: "base",
+        class: "bg-background/0 text-foreground backdrop-blur-lg focus-visible:backdrop-blur-md dark:text-white"
+      },
+      {
+        variant: "tertiary",
+        theme: "error",
+        class: "bg-transparent backdrop-blur-lg text-error-600"
+      }
+    ]
+  }
+);
+var tintVariants = classVarianceAuthority.cva(
+  "before:content-[''] before:absolute before:inset-0 before:transition-all before:rounded-[inherit] before:pointer-events-none",
+  {
+    variants: {
+      outline: {
+        false: null
+      },
+      variant: {
+        default: "",
+        outline: "",
+        primary: "before:bg-tint-700-reversed/0 hover:before:bg-tint-700-reversed active:before:bg-tint-700-reversed/0 disabled:before:bg-tint-900-default focus-visible:before:bg-tint-700-reversed/0",
+        secondary: "before:bg-tint-900-default hover:before:bg-tint-800-default active:before:bg-tint-900-default disabled:before:bg-tint-900-default focus-visible:before:bg-tint-800-default",
+        tertiary: "before:bg-tint-950-reversed hover:before:bg-tint-900-default active:before:bg-tint-950-reversed disabled:before:bg-tint-950-reversed focus-visible:before:bg-tint-950-reversed"
+      }
+    },
+    defaultVariants: {
+      outline: false,
+      variant: "default"
+    },
+    compoundVariants: [
+      {
+        outline: true,
+        variant: "primary",
+        class: "before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed"
+      },
+      {
+        outline: true,
+        variant: "secondary",
+        class: "before:bg-tint-950-reversed hover:before:bg-tint-950-reversed active:before:bg-tint-950-reversed disabled:before:bg-tint-900-default focus-visible:before:bg-tint-950-reversed"
+      }
+    ]
+  }
+);
+function Button({
+  align = "center",
+  children,
+  className,
+  collapsed = false,
+  leading,
+  outline = false,
+  pill = false,
+  loading = false,
+  loadingElement,
+  size = "default",
+  theme = "brand",
+  trailing,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      "data-slot": "button",
+      className: cn(
+        buttonVariants({
+          variant,
+          size,
+          align,
+          outline,
+          collapsed,
+          pill,
+          className,
+          hasLeading: !!leading,
+          theme,
+          hasTrailing: !!trailing
+        }),
+        tintVariants({ variant, outline })
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        loading && (loadingElement || /* @__PURE__ */ jsxRuntime.jsx(Loader, { className: "absolute inset-0 m-auto", variant: "spinner", theme: "reversed" })),
+        leading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("group-aria-busy/button:opacity-0 transition-opacity", { "opacity-0": loading }), children: leading }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("min-w-[18px] truncate relative transition-opacity", { "opacity-0": loading }), children }),
+        trailing && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("group-aria-busy/button:opacity-0 transition-opacity", {
+              "opacity-0": loading,
+              "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
+            }),
+            children: trailing
+          }
+        )
+      ] })
+    }
+  );
+}
 function DialogRoot(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogTrigger(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogClose(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
-function DialogBackdrop({
+function DialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Backdrop,
     {
+      "data-slot": "dialog-overlay",
       className: cn(
         "fixed inset-0 min-h-dvh bg-[rgb(0_0_32/0.01)] opacity-0 backdrop-blur-sm transition-[opacity,backdrop-filter] duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute dark:bg-[rgb(255_255_255/0.01)] dark:opacity-70",
         "data-closed:opacity-0 data-open:opacity-100",
@@ -44,6 +409,7 @@ function DialogViewport({
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Viewport,
     {
+      "data-slot": "dialog-viewport",
       className: cn(
         "fixed inset-0 flex items-center justify-center overflow-hidden py-6 [@media(min-height:600px)]:pt-8 [@media(min-height:600px)]:pb-12",
         className
@@ -52,55 +418,87 @@ function DialogViewport({
     }
   );
 }
-function DialogPopup({
+function DialogContent({
   className,
   children,
   bottom = false,
   showCloseButton = true,
+  closePosition = "top-left",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogBackdrop, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Popup, { className: "group/popup pointer-events-none flex h-full max-h-full min-h-0 w-full max-w-full justify-center overflow-hidden transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0", children: [
-      showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
-        DialogClose,
-        {
-          className: "pointer-events-auto fixed top-[15px] left-5 z-50",
-          "aria-label": "Close",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "before:bg-tint-700-reversed relative block before:absolute before:-inset-1.5 before:rounded-full before:backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary-foreground text-background relative z-10 flex size-10 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(icons.XClose, { className: "size-[18px]" }) }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "bg-background pointer-events-auto fixed top-1/2 left-1/2 flex h-full max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl shadow-2xl transition-all",
+  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      dialog.Dialog.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: "group/popup pointer-events-none flex h-full max-h-full min-h-0 w-full max-w-full justify-center overflow-hidden transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        children: [
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+            DialogClose,
             {
-              "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom,
-              "group-data-open/popup:slide-in-from-bottom group-data-closed/popup:slide-out-to-bottom group-data-starting-style/popup-scale-100 group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out top-auto bottom-0 h-full translate-y-0 rounded-b-none group-data-closed/popup:duration-200 group-data-closed/popup:ease-[cubic-bezier(1,0,0.72,0.32)] group-data-ending-style/popup:translate-y-full group-data-open/popup:duration-300 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-full": bottom
-            },
-            className
+              className: cn("pointer-events-auto fixed top-[15px] z-50 transition-all", { "left-5": closePosition === "top-left", "right-5": closePosition === "top-right", "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom, " group-data-starting-style/popup-scale-[0.96] group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out group-data-closed/popup:duration-200 group-data-closed/popup:ease-[cubic-bezier(1,0,0.72,0.32)] group-data-ending-style/popup:translate-y-1/2 group-data-open/popup:duration-pop-hover group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-1/2": bottom }),
+              "aria-label": "Close",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "before:bg-tint-700-reversed relative block before:absolute before:-inset-1.5 before:rounded-full before:backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-primary-foreground text-background relative z-10 flex size-10 items-center justify-center rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(icons.XClose, { className: "size-[18px]" }) }) })
+              ]
+            }
           ),
-          ...props,
-          children
-        }
-      )
-    ] })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "bg-background pointer-events-auto fixed top-1/2 left-1/2 flex h-full max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl shadow-2xl transition-all",
+                {
+                  "group-data-closed/popup:duration-pop-hover group-data-open/popup:duration-pop-hover group-data-open/popup:ease-pop-hover group-data-closed/popup:ease-out group-data-ending-style/popup:scale-[0.96] group-data-ending-style/popup:opacity-0 group-data-starting-style/popup:scale-[0.96] group-data-starting-style/popup:opacity-0": !bottom,
+                  "group-data-open/popup:slide-in-from-bottom group-data-closed/popup:slide-out-to-bottom group-data-starting-style/popup-scale-100 group-data-ending-style/popup-scale-100 group-data-open/popup:animate-in group-data-closed/popup:animate-out top-auto bottom-0 h-full translate-y-0 rounded-b-none group-data-closed/popup:duration-200 group-data-closed/popup:ease-[cubic-bezier(1,0,0.72,0.32)] group-data-ending-style/popup:translate-y-full group-data-open/popup:duration-300 group-data-open/popup:ease-[cubic-bezier(0.32,0.72,0,1)] group-data-starting-style/popup:translate-y-full": bottom
+                },
+                className
+              ),
+              ...props,
+              children
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
 }
-function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row", className), ...props });
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row", className),
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", theme: "base" }), children: "Close" })
+      ]
+    }
+  );
 }
 function DialogTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Title,
     {
+      "data-slot": "dialog-title",
       className: cn("text-lg leading-none font-semibold", className),
       ...props
     }
@@ -113,6 +511,7 @@ function DialogDescription({
   return /* @__PURE__ */ jsxRuntime.jsx(
     dialog.Dialog.Description,
     {
+      "data-slot": "dialog-description",
       className: cn("text-muted-foreground text-sm", className),
       ...props
     }
@@ -122,6 +521,7 @@ function DialogBody({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-slot": "dialog-body",
       className: cn("flex shrink-0 grow basis-0 flex-col items-start self-stretch", className),
       ...props,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 grow basis-0 flex-col items-start gap-10 self-stretch overflow-auto p-4", children })
@@ -130,13 +530,13 @@ function DialogBody({ className, children, ...props }) {
 }
 
 exports.Dialog = DialogRoot;
-exports.DialogBackdrop = DialogBackdrop;
 exports.DialogBody = DialogBody;
 exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
 exports.DialogHeader = DialogHeader;
-exports.DialogPopup = DialogPopup;
+exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;