@kopexa/theme 1.7.7 → 2.0.0

package/dist/components/autocomplete.js

@@ -0,0 +1,173 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/autocomplete.ts
+var autocomplete_exports = {};
+__export(autocomplete_exports, {
+  autocomplete: () => autocomplete
+});
+module.exports = __toCommonJS(autocomplete_exports);
+var import_tailwind_variants2 = require("tailwind-variants");
+
+// src/utils/classes.ts
+var focusVisibleClasses = [
+  "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2"
+  //"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+];
+var popoverContentClasses = [
+  "bg-popover text-popover-foreground z-50",
+  "rounded-md border p-4 shadow-md outline-hidden"
+];
+var inputClasses = {
+  radius: {
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg"
+  },
+  height: {
+    sm: "h-7 min-h-7",
+    md: "h-8.5 min-h-8.5",
+    lg: "h-10 min-h-10"
+  }
+};
+
+// src/components/input.ts
+var import_tailwind_variants = require("tailwind-variants");
+var passwordInput = (0, import_tailwind_variants.tv)({
+  slots: {
+    button: "focus:outline-hidden",
+    icon: "pointer-events-none text-muted-foreground"
+  }
+});
+var input = (0, import_tailwind_variants.tv)({
+  base: [
+    "w-full inline-flex bg-background text-foreground",
+    "border-input border",
+    "shadow-xs placeholder:text-muted-foreground",
+    ...focusVisibleClasses,
+    "disabled:cursor-not-allowed disabled:opacity-60",
+    "[&[readonly]]:bg-muted/80 [&[readonly]]:cursor-not-allowed",
+    "w-full font-normal outline-hidden focus-visible:outline-hidden",
+    "data-[has-start-content=true]:ps-1.5",
+    "data-[has-end-content=true]:pe-1.5",
+    "file:cursor-pointer file:bg-transparent file:border-0",
+    "autofill:bg-transparent bg-clip-text",
+    // legacy
+    "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+    "flex",
+    // file
+    "file:text-foreground file:inline-flex file:text-sm file:font-medium",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  variants: {
+    size: {
+      sm: [
+        inputClasses.radius.sm,
+        inputClasses.height.sm,
+        "px-2.5  [&_svg]:size-4",
+        "text-sm file:h-6"
+      ],
+      md: [
+        inputClasses.radius.md,
+        inputClasses.height.md,
+        "px-3 [&_svg]:size-4",
+        "text-base md:text-sm file:h-8"
+      ],
+      lg: [
+        inputClasses.radius.lg,
+        inputClasses.height.md,
+        "px-4 [&_svg]:size-4",
+        "text-base file:h-10"
+      ]
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/components/autocomplete.ts
+var autocomplete = (0, import_tailwind_variants2.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"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  autocomplete
+});

package/dist/components/autocomplete.mjs

@@ -0,0 +1,8 @@
+import {
+  autocomplete
+} from "../chunk-Z7D56R5U.mjs";
+import "../chunk-IHW4FWFB.mjs";
+import "../chunk-5DOB3IBE.mjs";
+export {
+  autocomplete
+};

package/dist/components/avatar.mjs

@@ -1,8 +1,8 @@
 import {
   avatar
-} from "../chunk-JQ74U2S3.mjs";
-import "../chunk-UEMJVVVF.mjs";
+} from "../chunk-YH6TDPK7.mjs";
 import "../chunk-WSEO3MLK.mjs";
+import "../chunk-5DOB3IBE.mjs";
 export {
   avatar
 };

package/dist/components/button.d.mts

@@ -46,6 +46,11 @@ declare const button: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    spacing: {
+        default: string;
+        between: string;
+        start: string;
+    };
 }, undefined, string[], {
     variant: {
         solid: string;
@@ -74,6 +79,11 @@ declare const button: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    spacing: {
+        default: string;
+        between: string;
+        start: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
@@ -102,6 +112,11 @@ declare const button: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    spacing: {
+        default: string;
+        between: string;
+        start: string;
+    };
 }, undefined, string[], unknown, unknown, undefined>>;
 type ButtonVariantProps = VariantProps<typeof button>;
 

package/dist/components/button.d.ts

@@ -46,6 +46,11 @@ declare const button: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    spacing: {
+        default: string;
+        between: string;
+        start: string;
+    };
 }, undefined, string[], {
     variant: {
         solid: string;
@@ -74,6 +79,11 @@ declare const button: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    spacing: {
+        default: string;
+        between: string;
+        start: string;
+    };
 }, undefined, tailwind_variants.TVReturnType<{
     variant: {
         solid: string;
@@ -102,6 +112,11 @@ declare const button: tailwind_variants.TVReturnType<{
         true: string;
         false: string;
     };
+    spacing: {
+        default: string;
+        between: string;
+        start: string;
+    };
 }, undefined, string[], unknown, unknown, undefined>>;
 type ButtonVariantProps = VariantProps<typeof button>;
 

package/dist/components/button.js

@@ -92,6 +92,7 @@ var button = (0, import_tailwind_variants.tv)({
     ...focusVisibleClasses,
     // shadcn below
     "disabled:pointer-events-none disabled:opacity-50",
+    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
     "shrink-0 [&_svg]:shrink-0",
     "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     "text-sm font-medium"
@@ -99,14 +100,14 @@ var button = (0, import_tailwind_variants.tv)({
   variants: {
     variant: {
       solid: "shadow-xs",
-      ghost: "data-[active-state=on]:bg-accent/70",
+      ghost: "data-[active-state=on]:bg-primary/10",
       outline: "border-1 bg-transparent",
       link: ""
     },
     size: {
-      sm: "px-3 min-w-16 h-8 text-xs gap-2 rounded-sm has-[>svg]:px-2.5 [&_svg]:size-3",
-      md: "px-4 min-w-20 h-10 text-sm gap-2 rounded-md has-[>svg]:px-3 [&_svg]:size-4",
-      lg: "px-6 min-w-24 h-12 text-base gap-3 rounded-lg has-[>svg]:px-4 [&_svg]:size-4"
+      sm: "px-3 min-w-16 h-7 text-xs gap-2 rounded-sm has-[>svg]:px-2.5 [&_svg]:size-3",
+      md: "px-4 min-w-20 h-8.5 text-sm gap-2 rounded-sm has-[>svg]:px-3 [&_svg]:size-4",
+      lg: "px-6 min-w-24 h-10 text-base gap-3 rounded-lg has-[>svg]:px-4 [&_svg]:size-4"
     },
     color: {
       primary: "",
@@ -123,10 +124,15 @@ var button = (0, import_tailwind_variants.tv)({
     isIconOnly: {
       true: "px-0 !gap-0",
       false: "[&>svg]:max-w-[theme(spacing.8)]"
+    },
+    spacing: {
+      default: "",
+      between: "justify-between",
+      start: "justify-start"
     }
   },
   defaultVariants: {
-    size: "sm",
+    size: "md",
     variant: "solid",
     color: "primary",
     fullWidth: false,
@@ -193,7 +199,7 @@ var button = (0, import_tailwind_variants.tv)({
     {
       variant: "ghost",
       color: "default",
-      class: colorVariants.ghost.default
+      class: [colorVariants.ghost.default, "hover:bg-accent/50"]
     },
     // outline color
     {

package/dist/components/button.mjs

@@ -1,8 +1,8 @@
 import {
   button
-} from "../chunk-U32YEQZ5.mjs";
-import "../chunk-UEMJVVVF.mjs";
+} from "../chunk-IHITEH7V.mjs";
 import "../chunk-WSEO3MLK.mjs";
+import "../chunk-5DOB3IBE.mjs";
 export {
   button
 };

package/dist/components/chip.d.mts

@@ -11,6 +11,7 @@ declare const chip: tailwind_variants.TVReturnType<{
             root: string;
         };
         flat: {};
+        ghost: {};
     };
     color: {
         default: {
@@ -127,6 +128,7 @@ declare const chip: tailwind_variants.TVReturnType<{
             root: string;
         };
         flat: {};
+        ghost: {};
     };
     color: {
         default: {
@@ -243,6 +245,7 @@ declare const chip: tailwind_variants.TVReturnType<{
             root: string;
         };
         flat: {};
+        ghost: {};
     };
     color: {
         default: {

package/dist/components/chip.d.ts

@@ -11,6 +11,7 @@ declare const chip: tailwind_variants.TVReturnType<{
             root: string;
         };
         flat: {};
+        ghost: {};
     };
     color: {
         default: {
@@ -127,6 +128,7 @@ declare const chip: tailwind_variants.TVReturnType<{
             root: string;
         };
         flat: {};
+        ghost: {};
     };
     color: {
         default: {
@@ -243,6 +245,7 @@ declare const chip: tailwind_variants.TVReturnType<{
             root: string;
         };
         flat: {};
+        ghost: {};
     };
     color: {
         default: {

package/dist/components/chip.js

@@ -88,7 +88,8 @@ var chip = (0, import_tailwind_variants.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",
@@ -109,7 +110,8 @@ var chip = (0, import_tailwind_variants.tv)({
       faded: {
         root: "border-2"
       },
-      flat: {}
+      flat: {},
+      ghost: {}
     },
     color: {
       default: {

package/dist/components/chip.mjs

@@ -1,6 +1,6 @@
 import {
   chip
-} from "../chunk-JHKTRIIA.mjs";
+} from "../chunk-RQYYDG26.mjs";
 import "../chunk-WSEO3MLK.mjs";
 export {
   chip

package/dist/components/color-highlight-button.d.mts

@@ -0,0 +1,36 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const colorHighlightButton: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            button?: tailwind_merge.ClassNameValue;
+            mark?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            button?: tailwind_merge.ClassNameValue;
+            mark?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    mark: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            button?: tailwind_merge.ClassNameValue;
+            mark?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    mark: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    button: string[];
+    mark: string[];
+}, undefined, unknown, unknown, undefined>>;
+
+export { colorHighlightButton };

package/dist/components/color-highlight-button.d.ts

@@ -0,0 +1,36 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const colorHighlightButton: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            button?: tailwind_merge.ClassNameValue;
+            mark?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            button?: tailwind_merge.ClassNameValue;
+            mark?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    mark: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            button?: tailwind_merge.ClassNameValue;
+            mark?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    mark: string[];
+}, tailwind_variants.TVReturnType<unknown, {
+    button: string[];
+    mark: string[];
+}, undefined, unknown, unknown, undefined>>;
+
+export { colorHighlightButton };

package/dist/components/color-highlight-button.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/color-highlight-button.ts
+var color_highlight_button_exports = {};
+__export(color_highlight_button_exports, {
+  colorHighlightButton: () => colorHighlightButton
+});
+module.exports = __toCommonJS(color_highlight_button_exports);
+var import_tailwind_variants = require("tailwind-variants");
+var colorHighlightButton = (0, import_tailwind_variants.tv)({
+  slots: {
+    button: [
+      "relative min-w-none",
+      "hover:bg-",
+      "size-5 bg-[var(--highlight-color)]"
+    ],
+    mark: [
+      "absolute size- left-0 top-0",
+      "border border-[var(--highlight-color)]",
+      "rounded-[inherit] box-border brightness-95 mix-blend-multiply",
+      "data-[active-state=on]:brightness-140"
+    ]
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  colorHighlightButton
+});

package/dist/components/color-highlight-button.mjs

@@ -0,0 +1,6 @@
+import {
+  colorHighlightButton
+} from "../chunk-CPERWXKN.mjs";
+export {
+  colorHighlightButton
+};

package/dist/components/command.d.mts

@@ -10,12 +10,12 @@ declare const command: tailwind_variants.TVReturnType<{
             header?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
-            group?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-            inputIcon?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             list?: tailwind_merge.ClassNameValue;
             empty?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            inputWrapper?: tailwind_merge.ClassNameValue;
+            inputIcon?: tailwind_merge.ClassNameValue;
             separator?: tailwind_merge.ClassNameValue;
             shortcut?: tailwind_merge.ClassNameValue;
         };
@@ -28,12 +28,12 @@ declare const command: tailwind_variants.TVReturnType<{
             header?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
-            group?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-            inputIcon?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             list?: tailwind_merge.ClassNameValue;
             empty?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            inputWrapper?: tailwind_merge.ClassNameValue;
+            inputIcon?: tailwind_merge.ClassNameValue;
             separator?: tailwind_merge.ClassNameValue;
             shortcut?: tailwind_merge.ClassNameValue;
         };
@@ -60,12 +60,12 @@ declare const command: tailwind_variants.TVReturnType<{
             header?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
-            group?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-            inputIcon?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             list?: tailwind_merge.ClassNameValue;
             empty?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            inputWrapper?: tailwind_merge.ClassNameValue;
+            inputIcon?: tailwind_merge.ClassNameValue;
             separator?: tailwind_merge.ClassNameValue;
             shortcut?: tailwind_merge.ClassNameValue;
         };

package/dist/components/command.d.ts

@@ -10,12 +10,12 @@ declare const command: tailwind_variants.TVReturnType<{
             header?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
-            group?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-            inputIcon?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             list?: tailwind_merge.ClassNameValue;
             empty?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            inputWrapper?: tailwind_merge.ClassNameValue;
+            inputIcon?: tailwind_merge.ClassNameValue;
             separator?: tailwind_merge.ClassNameValue;
             shortcut?: tailwind_merge.ClassNameValue;
         };
@@ -28,12 +28,12 @@ declare const command: tailwind_variants.TVReturnType<{
             header?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
-            group?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-            inputIcon?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             list?: tailwind_merge.ClassNameValue;
             empty?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            inputWrapper?: tailwind_merge.ClassNameValue;
+            inputIcon?: tailwind_merge.ClassNameValue;
             separator?: tailwind_merge.ClassNameValue;
             shortcut?: tailwind_merge.ClassNameValue;
         };
@@ -60,12 +60,12 @@ declare const command: tailwind_variants.TVReturnType<{
             header?: tailwind_merge.ClassNameValue;
             title?: tailwind_merge.ClassNameValue;
             description?: tailwind_merge.ClassNameValue;
-            group?: tailwind_merge.ClassNameValue;
-            inputWrapper?: tailwind_merge.ClassNameValue;
-            inputIcon?: tailwind_merge.ClassNameValue;
             input?: tailwind_merge.ClassNameValue;
             list?: tailwind_merge.ClassNameValue;
             empty?: tailwind_merge.ClassNameValue;
+            group?: tailwind_merge.ClassNameValue;
+            inputWrapper?: tailwind_merge.ClassNameValue;
+            inputIcon?: tailwind_merge.ClassNameValue;
             separator?: tailwind_merge.ClassNameValue;
             shortcut?: tailwind_merge.ClassNameValue;
         };

package/dist/components/dialog.js

@@ -27,19 +27,17 @@ var import_tailwind_variants = require("tailwind-variants");
 var dialog = (0, import_tailwind_variants.tv)({
   slots: {
     overlay: [
-      "fixed inset-0 z-50 bg-black/25",
-      "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 bg-black/25 [backdrop-filter:blur(4px)]",
+      "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0"
     ],
     content: [
       "flex flex-col",
-      "bg-background fixed top-[50%] left-[50%] z-50",
+      "bg-background fixed top-[50%] left-[50%]",
       "w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-      "border shadow-lg",
-      "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",
-      "duration-200 sm:max-w-lg"
+      "border shadow-lg transition-all",
+      "data-[ending-style]:scale-90 data-[ending-style]:opacity-0",
+      "data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
+      "duration-150 sm:max-w-lg"
     ],
     close: [
       "ring-offset-background focus:ring-ring",

package/dist/components/dialog.mjs

@@ -1,6 +1,6 @@
 import {
   dialog
-} from "../chunk-MWG2OZMD.mjs";
+} from "../chunk-LAJQAXSV.mjs";
 export {
   dialog
 };