@kopexa/theme 1.7.7 → 2.1.0

package/dist/chunk-NFOF75HQ.mjs

@@ -0,0 +1,106 @@
+import {
+  focusVisibleClasses,
+  inputClasses
+} from "./chunk-5DOB3IBE.mjs";
+
+// src/components/select.ts
+import { tv } from "tailwind-variants";
+var select = tv({
+  slots: {
+    trigger: [
+      "border-input border w-full shadow-xs",
+      ...focusVisibleClasses,
+      "aria-expanded:outline-2 aria-expanded:outline-ring aria-expanded:outline-offset-2",
+      "group relative flex items-center justify-between gap-2 whitespace-nowrap select-none",
+      "transition-[color,box-shadow,border-color]",
+      "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+      "aria-invalid:border-destructive",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex",
+      "*:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground"
+    ],
+    triggerIcon: "opacity-60 transition-transform duration-200",
+    placeholder: "text-muted-foreground",
+    clear: [
+      "cursor-pointer absolute top-1/2 -translate-y-1/2 end-2",
+      "rounded-sm opacity-60 hover:opacity-100 transition-opacity",
+      "focus:outline-none focus:ring-0 focus:ring-offset-0",
+      "disabled:pointer-events-none data-[disabled]:pointer-events-none"
+    ],
+    content: [
+      "relative max-h-(--available-height) min-w-(--anchor-width) overflow-x-hidden overflow-y-auto",
+      "bg-popover text-popover-foreground",
+      "rounded-md border p-1 shadow-md",
+      "origin-[var(--transform-origin)]",
+      // radix styles
+      "data-[open]:animate-in data-[closed]:animate-out",
+      "data-[closed]:fade-out-0 data-[open]:fade-in-0",
+      "data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "data-[position=item-aligned]:[&_*[data-slot=select-item]]:min-w-[var(--anchor-width)]",
+      "data-[side=bottom]:mt-2 data-[side=top]:mb-2"
+    ],
+    item: [
+      "relative flex w-full items-center cursor-default select-none",
+      "rounded-sm py-1.5 text-sm outline-hidden",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+      "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+      "pe7 ps-2 data-[indicator-position=left]:ps-7 data-[indicator-position=left]:pe-2"
+    ],
+    indicatorContainer: [
+      "absolute flex h-3.5 w-3.5 items-center justify-center",
+      "data-[indicator-position=left]:start-2 data-[indicator-position=right]:end-2"
+    ],
+    indicatorIcon: ["size-4 text-primary"],
+    label: [
+      "text-muted-foreground py-1.5 text-xs font-medium",
+      "pe-7 ps-2 data-[indicator-position=left]:ps-7 data-[indicator-position=left]:pe-2"
+    ],
+    separator: ["bg-border pointer-events-none -mx-1 my-1 h-px"]
+  },
+  variants: {
+    size: {
+      sm: {
+        trigger: [
+          inputClasses.radius.sm,
+          inputClasses.height.sm,
+          // TODO
+          "px-2.5 text-xs gap-1",
+          "[&_[data-slot=select-icon]]:size-3.5 [&_[data-slot=select-icon]]:-me-0.75",
+          "[&_[data-slot=select-clear]>svg]:size-3 [&_[data-slot=select-clear]]:end-6"
+        ]
+      },
+      md: {
+        trigger: [
+          inputClasses.radius.md,
+          inputClasses.height.md,
+          // TODO
+          "px-3 text-[0.8125rem] leading-(--text-sm--line-height) gap-1 ",
+          "[&_[data-slot=select-icon]]:size-4 [&_[data-slot=select-icon]]:-me-1",
+          "[&_[data-slot=select-clear]>svg]:size-3.5 [&_[data-slot=select-clear]]:end-7"
+        ]
+      },
+      lg: {
+        trigger: [
+          inputClasses.radius.lg,
+          inputClasses.height.lg,
+          // TODO
+          "h-10 px-4 text-sm gap-1.5",
+          "	[&_[data-slot=select-icon]]:size-4 [&_[data-slot=select-icon]]:-me-1.25",
+          "	[&_[data-slot=select-clear]>svg]:size-3.5 [&_[data-slot=select-clear]]:end-8"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  select
+};

package/dist/chunk-NUEQ5FLX.mjs

@@ -0,0 +1,50 @@
+// src/components/editor-basic.ts
+import { tv } from "tailwind-variants";
+var editorBasic = tv({
+  slots: {
+    root: [
+      "grid grid-rows-[auto,1fr]",
+      "h-full min-h-0 w-full min-w-0",
+      "content-start isolate"
+    ],
+    toolbar: [
+      "row-start-1 row-end-2",
+      "flex items-center gap-0.5",
+      "sticky top-0 z-10"
+    ],
+    wrapper: [
+      "row-start-2 row-end-3",
+      "min-h-0 min-w-0",
+      "overflow-y-auto"
+      //	"h-[calc(100%-var(--spacing-editor-toolbar))]",
+    ],
+    content: [
+      "w-full min-w-0 h-full min-h-0",
+      "[&_.tiptap.ProseMirror]:py-4",
+      "[&_.tiptap.ProseMirror]:px-6"
+    ],
+    toolbarGroup: "flex items-center gap-0.5"
+  },
+  variants: {
+    variant: {
+      // rounded toolbar, muted background
+      default: {
+        wrapper: ["border rounded-md"],
+        toolbar: "rounded-md mb-2",
+        content: ""
+      },
+      // document style, eg. document editor, fullpage etc pp
+      document: {
+        wrapper: "size-full overflow-auto",
+        content: "size-full"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+export {
+  editorBasic
+};

package/dist/{chunk-JHKTRIIA.mjs → chunk-RQYYDG26.mjs}

@@ -15,7 +15,8 @@ var chip = tv({
       "justify-between",
       "box-border",
       "whitespace-nowrap",
-      "isolate"
+      "isolate",
+      "data-[active=true]:ring-2"
     ],
     content: "flex-1 text-inherit font-normal",
     indicator: "relative flex size-2 ml-1",
@@ -36,7 +37,8 @@ var chip = tv({
       faded: {
         root: "border-2"
       },
-      flat: {}
+      flat: {},
+      ghost: {}
     },
     color: {
       default: {

package/dist/chunk-SPQE7K66.mjs

@@ -0,0 +1,18 @@
+// src/components/scroll-area.ts
+import { tv } from "tailwind-variants";
+var scrollArea = tv({
+  slots: {
+    root: "relative",
+    viewport: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+    scrollbar: [
+      "flex touch-none p-px transition-[colors,opacity] select-none opacity-0 data-[hovering]:opacity-100 data-[scrolling]:opacity-100 duration-150 delay-300 data-[hovering]:duration-75 data-[scrolling]:duration-75 data-[hovering]:delay-0 data-[scrolling]:delay-0",
+      "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent",
+      "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent"
+    ],
+    thumb: "bg-border relative flex-1 rounded-full"
+  }
+});
+
+export {
+  scrollArea
+};

package/dist/chunk-TVC4THD6.mjs

@@ -0,0 +1,16 @@
+// src/components/editor-spinner.ts
+import { tv } from "tailwind-variants";
+var editorSpinner = tv({
+  slots: {
+    root: "size-full grow shrink flex items-center justify-center",
+    content: ["flex", "flex-col", "items-center", "justify-center", "gap-2"],
+    svg: ["animate-spin size-5"],
+    circle: ["opacity-25 stroke-current stroke-4"],
+    path: ["opacity-75 fill-current"],
+    text: "text-center text-sm text-muted-foreground"
+  }
+});
+
+export {
+  editorSpinner
+};

package/dist/chunk-URGRCBNW.mjs

@@ -0,0 +1,27 @@
+import {
+  popoverContentClasses
+} from "./chunk-5DOB3IBE.mjs";
+
+// src/components/slash-dropdown-menu.ts
+import { tv } from "tailwind-variants";
+var slashDropdownMenu = tv({
+  slots: {
+    card: [...popoverContentClasses, "p-0", "flex flex-col outline-none"],
+    body: ["p-1.5 flex-auto grow shrink overflow-y-auto w-full"],
+    cardItemGroup: [
+      "relative flex align-middle min-w-max",
+      "flex-col justify-center"
+    ],
+    cardGroupLabel: [
+      "text-xs font-bold text-muted-foreground capitalize",
+      "pt-3 pb-1 px-2"
+    ],
+    cardGroup: [
+      "flex relative align-middle max-w-max justify-center items-start flex-col"
+    ]
+  }
+});
+
+export {
+  slashDropdownMenu
+};

package/dist/chunk-VSVGOX3P.mjs

@@ -0,0 +1,48 @@
+// src/components/input-wrapper.ts
+import { tv } from "tailwind-variants";
+var inputWrapper = tv({
+  base: [
+    "flex items-center gap-1.5",
+    "has-[:focus-visible]:ring-ring/30",
+    "has-[:focus-visible]:border-ring",
+    "has-[:focus-visible]:outline-none",
+    "has-[:focus-visible]:ring-[3px]",
+    "[&_[data-slot=datefield]]:grow",
+    "[&_[data-slot=input]]:data-focus-within:ring-transparent",
+    "[&_[data-slot=input]]:data-focus-within:ring-0",
+    "[&_[data-slot=input]]:data-focus-within:border-0",
+    "[&_[data-slot=input]]:flex",
+    "[&_[data-slot=input]]:w-full",
+    "[&_[data-slot=input]]:outline-none",
+    "[&_[data-slot=input]]:transition-colors",
+    "[&_[data-slot=input]]:text-foreground",
+    "[&_[data-slot=input]]:placeholder:text-muted-foreground",
+    "[&_[data-slot=input]]:border-0 ",
+    "[&_[data-slot=input]]:bg-transparent",
+    "[&_[data-slot=input]]:p-0",
+    "[&_[data-slot=input]]:shadow-none",
+    "[&_[data-slot=input]]:focus-visible:ring-0",
+    "[&_[data-slot=input]]:h-auto ",
+    "[&_[data-slot=input]]:disabled:cursor-not-allowed",
+    "[&_[data-slot=input]]:disabled:opacity-50",
+    "[&_svg]:text-muted-foreground",
+    "has-[[aria-invalid=true]]:border-destructive/60 ",
+    "has-[[aria-invalid=true]]:ring-destructive/10 ",
+    "dark:has-[[aria-invalid=true]]:border-destructive",
+    "dark:has-[[aria-invalid=true]]:ring-destructive/20  "
+  ],
+  variants: {
+    size: {
+      sm: "gap-1.25 [&_svg:not([class*=size-])]:size-3.5",
+      md: "gap-1.5 [&_svg:not([class*=size-])]:size-4",
+      lg: "gap-1.5 [&_svg:not([class*=size-])]:size-4"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  inputWrapper
+};

package/dist/chunk-WQ446TVH.mjs

@@ -0,0 +1,39 @@
+// src/components/switch.ts
+import { tv } from "tailwind-variants";
+var switchVariants = tv({
+  slots: {
+    root: [
+      "peer data-[checked]:bg-primary data-[unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[unchecked]:bg-input/80",
+      "aria-invalid:border-destructive/60 aria-invalid:ring-destructive/10 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/20",
+      "inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px]",
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    ],
+    thumb: [
+      "bg-background dark:data-[unchecked]:bg-foreground dark:data-[checked]:bg-primary-foreground",
+      "pointer-events-none rounded-full ring-0 transition-transform flex items-center justify-center"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        root: "h-4 w-6",
+        thumb: "size-3 data-[checked]:translate-x-[calc(100%-2px)] data-[unchecked]:translate-x-0"
+      },
+      md: {
+        root: "h-5 w-8",
+        thumb: "size-4 data-[checked]:translate-x-[calc(100%-2px)] data-[unchecked]:translate-x-0"
+      },
+      lg: {
+        root: "h-6 w-10",
+        thumb: "size-5 data-[checked]:translate-x-[calc(100%-2px)] data-[unchecked]:translate-x-0"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  switchVariants
+};

package/dist/chunk-XGUDXC5P.mjs

@@ -0,0 +1,26 @@
+// src/components/alert-dialog.ts
+import { tv } from "tailwind-variants";
+var alertDialog = tv({
+  slots: {
+    overlay: [
+      "transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+      "fixed inset-0 bg-black/50 [backdrop-filter:blur(4px)]"
+    ],
+    content: [
+      "bg-background left-[50%] top-[50%] fixed",
+      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "transition-all duration-150",
+      "data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
+      "gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg"
+    ],
+    header: "flex flex-col gap-2 text-center sm:text-left",
+    footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+    title: "text-lg font-semibold",
+    description: "text-muted-foreground text-sm",
+    action: ""
+  }
+});
+
+export {
+  alertDialog
+};

package/dist/{chunk-755GJHKQ.mjs → chunk-XRKUQMGU.mjs}

@@ -1,6 +1,6 @@
 import {
   popoverContentClasses
-} from "./chunk-UEMJVVVF.mjs";
+} from "./chunk-5DOB3IBE.mjs";
 
 // src/components/hover-card.ts
 import { tv } from "tailwind-variants";

package/dist/{chunk-JQ74U2S3.mjs → chunk-YH6TDPK7.mjs}

@@ -1,10 +1,10 @@
-import {
-  focusVisibleClasses,
-  translateCenterClasses
-} from "./chunk-UEMJVVVF.mjs";
 import {
   colorVariants
 } from "./chunk-WSEO3MLK.mjs";
+import {
+  focusVisibleClasses,
+  translateCenterClasses
+} from "./chunk-5DOB3IBE.mjs";
 
 // src/components/avatar.ts
 import { tv } from "tailwind-variants";

package/dist/chunk-Z7D56R5U.mjs

@@ -0,0 +1,70 @@
+import {
+  input
+} from "./chunk-IHW4FWFB.mjs";
+import {
+  popoverContentClasses
+} from "./chunk-5DOB3IBE.mjs";
+
+// src/components/autocomplete.ts
+import { tv } from "tailwind-variants";
+var autocomplete = tv({
+  slots: {
+    input: input.base,
+    content: "",
+    positioner: "outline-none",
+    popup: [
+      ...popoverContentClasses,
+      "p-0 py-1 w-[var(--anchor-width)] max-h-[min(var(--available-height),23rem)] max-w-[var(--available-width)]",
+      "overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain bg-[canvas]",
+      "shadow-black/5",
+      "origin-[var(--transform-origin)] transition-[transform,scale,opacity] data-[ending-style]:scale-90",
+      "data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
+    ],
+    empty: ["px-2 py-1.5 text-sm text-muted-foreground empty:m-0 empty:p-0"],
+    list: "space-y-0.5",
+    item: [
+      "text-foreground relative flex cursor-default select-none items-center gap-2 rounded-md px-4 py-2 text-sm outline-hidden transition-colors",
+      "data-disabled:pointer-events-none data-disabled:opacity-50",
+      "[&_svg]:pointer-events-none [&_svg:not([role=img]):not([class*=text-])]:opacity-60 [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0",
+      "data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-foreground data-[highlighted]:before:absolute",
+      "data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-accent"
+    ],
+    clear: [
+      "absolute cursor-pointer top-1/2 -translate-y-1/2",
+      "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100",
+      "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+      "data-[disabled]:pointer-events-none",
+      "[&_svg]:size-3.5"
+    ],
+    control: "relative"
+  },
+  variants: {
+    size: {
+      sm: {
+        input: [
+          input.variants.size.sm,
+          "[&~[data-slot=autocomplete-clear]]:end-1.75"
+        ]
+      },
+      md: {
+        input: [
+          input.variants.size.md,
+          "[&~[data-slot=autocomplete-clear]]:end-2"
+        ]
+      },
+      lg: {
+        input: [
+          input.variants.size.lg,
+          "[&~[data-slot=autocomplete-clear]]:end-2.5"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  autocomplete
+};

package/dist/components/alert-dialog.d.mts

@@ -6,29 +6,29 @@ declare const alertDialog: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
-            overlay?: tailwind_merge.ClassNameValue;
             header?: tailwind_merge.ClassNameValue;
             footer?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
+            overlay?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
-            overlay?: tailwind_merge.ClassNameValue;
             header?: tailwind_merge.ClassNameValue;
             footer?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
+            overlay?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
-    overlay: string;
-    content: string;
+    overlay: string[];
+    content: string[];
     header: string;
     footer: string;
     title: string;
@@ -38,25 +38,25 @@ declare const alertDialog: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
-            overlay?: tailwind_merge.ClassNameValue;
             header?: tailwind_merge.ClassNameValue;
             footer?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
+            overlay?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
-    overlay: string;
-    content: string;
+    overlay: string[];
+    content: string[];
     header: string;
     footer: string;
     title: string;
     description: string;
     action: string;
 }, tailwind_variants.TVReturnType<unknown, {
-    overlay: string;
-    content: string;
+    overlay: string[];
+    content: string[];
     header: string;
     footer: string;
     title: string;

package/dist/components/alert-dialog.d.ts

@@ -6,29 +6,29 @@ declare const alertDialog: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
-            overlay?: tailwind_merge.ClassNameValue;
             header?: tailwind_merge.ClassNameValue;
             footer?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
+            overlay?: tailwind_merge.ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
-            overlay?: tailwind_merge.ClassNameValue;
             header?: tailwind_merge.ClassNameValue;
             footer?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
+            overlay?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
-    overlay: string;
-    content: string;
+    overlay: string[];
+    content: string[];
     header: string;
     footer: string;
     title: string;
@@ -38,25 +38,25 @@ declare const alertDialog: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_merge.ClassNameValue | {
             content?: tailwind_merge.ClassNameValue;
-            overlay?: tailwind_merge.ClassNameValue;
             header?: tailwind_merge.ClassNameValue;
             footer?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
             action?: tailwind_merge.ClassNameValue;
+            overlay?: tailwind_merge.ClassNameValue;
         };
     };
 } | {}, {
-    overlay: string;
-    content: string;
+    overlay: string[];
+    content: string[];
     header: string;
     footer: string;
     title: string;
     description: string;
     action: string;
 }, tailwind_variants.TVReturnType<unknown, {
-    overlay: string;
-    content: string;
+    overlay: string[];
+    content: string[];
     header: string;
     footer: string;
     title: string;

package/dist/components/alert-dialog.js

@@ -26,8 +26,17 @@ module.exports = __toCommonJS(alert_dialog_exports);
 var import_tailwind_variants = require("tailwind-variants");
 var alertDialog = (0, import_tailwind_variants.tv)({
   slots: {
-    overlay: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-    content: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+    overlay: [
+      "transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+      "fixed inset-0 bg-black/50 [backdrop-filter:blur(4px)]"
+    ],
+    content: [
+      "bg-background left-[50%] top-[50%] fixed",
+      "grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
+      "transition-all duration-150",
+      "data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
+      "gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg"
+    ],
     header: "flex flex-col gap-2 text-center sm:text-left",
     footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
     title: "text-lg font-semibold",

package/dist/components/alert-dialog.mjs

@@ -1,6 +1,6 @@
 import {
   alertDialog
-} from "../chunk-CPEP2RO4.mjs";
+} from "../chunk-XGUDXC5P.mjs";
 export {
   alertDialog
 };