@pajohns/flowbite-svelte 0.1.4 → 0.1.5

package/dist/dialog/Dialog.svelte

@@ -22,6 +22,7 @@
     permanent = false,
     dismissable = true,
     outsideclose = true,
+    animatedBackdrop = false,
     class: className,
     classes,
     transition = fade,
@@ -31,7 +32,7 @@
 
   const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
 
-  let { base, form: formCls, close: closeCls } = dialog();
+  const { base, form: formCls, close: closeCls, overlay: overlayCls } = $derived(dialog({ animatedBackdrop }));
 
   const close = () => (open = false);
 
@@ -150,6 +151,13 @@
 {/snippet}
 
 {#if open}
+  {#if animatedBackdrop}
+    <div
+      class={overlayCls({ class: clsx(classes?.overlay) })}
+      transition:fade|global={paramsOptions as ParamsType}
+      aria-hidden="true"
+    ></div>
+  {/if}
   <dialog
     {@attach init}
     bind:this={ref}
@@ -161,7 +169,7 @@
     ontoggle={_ontoggle}
     transition:transition|global={paramsOptions as ParamsType}
     {...restProps}
-    class={base({ class: clsx(className) })}
+    class={base({ animatedBackdrop, class: clsx(className) })}
   >
     {#if form}
       <form method="dialog" class={formCls({ class: clsx(classes?.form) })}>
@@ -192,6 +200,7 @@
 @prop permanent = false
 @prop dismissable = true
 @prop outsideclose = true
+@prop animatedBackdrop = false
 @prop class: className
 @prop classes
 @prop transition = fade

package/dist/dialog/Dialog.svelte.d.ts

@@ -17,6 +17,7 @@ import type { DialogProps } from "..";
  * @prop permanent = false
  * @prop dismissable = true
  * @prop outsideclose = true
+ * @prop animatedBackdrop = false
  * @prop class: className
  * @prop classes
  * @prop transition = fade

package/dist/dialog/theme.d.ts

@@ -1,16 +1,37 @@
 import { type VariantProps } from "tailwind-variants";
 import type { Classes } from "../theme/themeUtils";
 export type DialogVariants = VariantProps<typeof dialog> & Classes<typeof dialog>;
-export declare const dialog: import("tailwind-variants").TVReturnType<{}, {
+export declare const dialog: import("tailwind-variants").TVReturnType<{
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, undefined, {}, {
+    overlay: string;
+}, undefined, {
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, import("tailwind-variants").TVReturnType<{}, {
+    overlay: string;
+}, import("tailwind-variants").TVReturnType<{
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
+    overlay: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/dialog/theme.js

@@ -3,15 +3,15 @@ export const dialog = tv({
     slots: {
         base: "backdrop:bg-gray-900/50 open:flex flex-col bg-white dark:bg-gray-800",
         form: "flex flex-col w-full border-inherit dark:border-inherit divide-inherit dark:divide-inherit",
-        close: "absolute top-2.5 end-2.5"
+        close: "absolute top-2.5 end-2.5",
+        overlay: "fixed inset-0 z-40 bg-gray-900/50"
     },
     variants: {
-    // position: {
-    //     fixed: { base: "fixed" },
-    //     absolute: { base: "absolute" }
-    // },
+        animatedBackdrop: {
+            true: { base: "backdrop:bg-transparent" }
+        }
     },
     defaultVariants: {
-    // position: "fixed"
+        animatedBackdrop: false
     }
 });

package/dist/drawer/theme.d.ts

@@ -42,22 +42,50 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
     };
 }, {
     base: string;
-}, undefined, {}, {
+}, undefined, {
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, import("tailwind-variants").TVReturnType<{}, {
+    overlay: string;
+}, import("tailwind-variants").TVReturnType<{
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, undefined, {}, {
+    overlay: string;
+}, undefined, {
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, import("tailwind-variants").TVReturnType<{}, {
+    overlay: string;
+}, import("tailwind-variants").TVReturnType<{
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
+    overlay: string;
 }, undefined, unknown, unknown, undefined>>>;
 export type DrawerheadVariants = VariantProps<typeof drawerhead> & Classes<typeof drawerhead>;
 export declare const drawerhead: import("tailwind-variants").TVReturnType<{

package/dist/modal/theme.d.ts

@@ -63,20 +63,48 @@ export declare const modal: import("tailwind-variants").TVReturnType<{
     header: string;
     footer: string;
     body: string;
-}, undefined, {}, {
+}, undefined, {
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, import("tailwind-variants").TVReturnType<{}, {
+    overlay: string;
+}, import("tailwind-variants").TVReturnType<{
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, undefined, {}, {
+    overlay: string;
+}, undefined, {
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
-}, import("tailwind-variants").TVReturnType<{}, {
+    overlay: string;
+}, import("tailwind-variants").TVReturnType<{
+    animatedBackdrop: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     form: string;
     close: string;
+    overlay: string;
 }, undefined, unknown, unknown, undefined>>>;

package/dist/types.d.ts

@@ -542,6 +542,8 @@ export interface DialogProps extends DialogVariants, HTMLDialogAttributes {
     outsideclose?: boolean;
     transition?: TransitionFunc;
     transitionParams?: ParamsType;
+    /** When true, uses a custom overlay element instead of native ::backdrop for smooth fade in/out animations */
+    animatedBackdrop?: boolean;
 }
 export interface DrawerProps extends DrawerVariants, Omit<DialogProps, "hidden" | "classes" | "shifted"> {
     /** @deprecated Use `outsideclose` instead. Will be removed in next minor version. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pajohns/flowbite-svelte",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Webapps global fork of flow-bite-svelte with customisation changes",
   "main": "dist/index.js",
   "author": {