@pajohns/flowbite-svelte 0.1.3 → 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/Modal.svelte

@@ -23,98 +23,50 @@
     footerClass,
     size = "md",
     placement,
-    class: classNameProp,
+    class: className,
     classes,
     transitionParams,
     transition = fade,
     fullscreen = false,
-    // Custom passm8 props
-    zIndexLayer,
-    toggle,
-    classDialog,
-    classBody,
-    classHeader,
-    classFooter,
-    className,
-    centered = false,
-    returnFocusAfterClose = true,
-    onclose,
-    onopen,
     ...restProps
   }: ModalProps = $props();
 
-  // Handle className alias for class
-  const resolvedClassName = $derived(classNameProp ?? className);
-
-  // Handle centered as alias for placement="center"
-  const resolvedPlacement = $derived(centered ? "center" : placement);
-
-  // Handle class aliases (classBody -> bodyClass, etc.)
-  const resolvedBodyClass = $derived(bodyClass ?? classBody);
-  const resolvedHeaderClass = $derived(headerClass ?? classHeader);
-  const resolvedFooterClass = $derived(footerClass ?? classFooter);
-
   warnThemeDeprecation(
     "Modal",
-    untrack(() => ({ headerClass: resolvedHeaderClass, bodyClass: resolvedBodyClass, footerClass: resolvedFooterClass, closeBtnClass })),
+    untrack(() => ({ headerClass, bodyClass, footerClass, closeBtnClass })),
     { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" }
   );
 
-  const styling = $derived(classes ?? { header: resolvedHeaderClass, body: resolvedBodyClass, footer: resolvedFooterClass, close: closeBtnClass });
+  const styling = $derived(classes ?? { header: headerClass, body: bodyClass, footer: footerClass, close: closeBtnClass });
 
   const theme = $derived(getTheme("modal"));
 
   const paramsDefault = { duration: 100, easing: sineIn };
   const paramsOptions = $derived(transitionParams ?? paramsDefault);
 
-  const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement: resolvedPlacement, size }));
-
-  // Z-index layer styling
-  const zIndexStyle = $derived(zIndexLayer ? `z-index: ${zIndexLayer * 10};` : undefined);
-
-  // Track open state changes for callbacks
-  let prevOpen = $state(open);
-  $effect(() => {
-    if (open !== prevOpen) {
-      if (open) {
-        onopen?.();
-      } else {
-        onclose?.();
-      }
-      prevOpen = open;
-    }
-  });
-
-  // Handle toggle prop - if provided, use it to close the modal
-  function handleCancel() {
-    if (toggle) {
-      toggle();
-    }
-  }
+  const { base, header: headerCls, footer: footerCls, body } = $derived(modalStyle({ placement, size }));
 </script>
 
 <Dialog
   bind:open
   {transition}
-  dismissable={dismissable && !title && !permanent}
+  dismissable={dismissable && !title && !header && !permanent}
   transitionParams={paramsOptions}
   {classes}
   {permanent}
-  oncancel={toggle ? handleCancel : undefined}
   {...restProps}
-  class={base({ fullscreen, class: clsx(theme?.base, resolvedClassName, classDialog) })}
-  style={zIndexStyle}
+  class={base({ fullscreen, class: clsx(theme?.base, className) })}
 >
   {#if title || header}
     <div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
       {#if title}
         <h3>{title}</h3>
-        {#if dismissable && !permanent}
-          <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
-        {/if}
       {:else if header}
         {@render header()}
       {/if}
+      {#if dismissable && !permanent}
+        <CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+      {/if}
     </div>
   {/if}
   <div class={body({ class: clsx(theme?.body, styling.body) })}>
@@ -151,16 +103,5 @@
 @prop transitionParams
 @prop transition = fade
 @prop fullscreen = false
-@prop zIndexLayer - Controls z-index layering (multiplied by 10)
-@prop toggle - Function to toggle modal open/close state
-@prop classDialog - Additional class for the dialog element
-@prop classBody - Alias for bodyClass
-@prop classHeader - Alias for headerClass
-@prop classFooter - Alias for footerClass
-@prop className - Alias for class
-@prop centered - Shorthand for placement="center"
-@prop returnFocusAfterClose - Whether to return focus after close (default: true)
-@prop onclose - Callback when modal closes
-@prop onopen - Callback when modal opens
 @prop ...restProps
 -->

package/dist/modal/Modal.svelte.d.ts

@@ -22,17 +22,6 @@ import type { ModalProps } from "..";
  * @prop transitionParams
  * @prop transition = fade
  * @prop fullscreen = false
- * @prop zIndexLayer - Controls z-index layering (multiplied by 10)
- * @prop toggle - Function to toggle modal open/close state
- * @prop classDialog - Additional class for the dialog element
- * @prop classBody - Alias for bodyClass
- * @prop classHeader - Alias for headerClass
- * @prop classFooter - Alias for footerClass
- * @prop className - Alias for class
- * @prop centered - Shorthand for placement="center"
- * @prop returnFocusAfterClose - Whether to return focus after close (default: true)
- * @prop onclose - Callback when modal closes
- * @prop onopen - Callback when modal opens
  * @prop ...restProps
  */
 declare const Modal: import("svelte").Component<ModalProps, {}, "open">;

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. */
@@ -975,17 +977,6 @@ export interface ModalProps extends ModalVariants, Omit<DialogProps, "classes">
     footerClass?: ClassValue;
     closeBtnClass?: ClassValue;
     fullscreen?: boolean;
-    zIndexLayer?: number;
-    toggle?: () => void;
-    classDialog?: ClassValue;
-    classBody?: ClassValue;
-    classHeader?: ClassValue;
-    classFooter?: ClassValue;
-    className?: ClassValue;
-    centered?: boolean;
-    returnFocusAfterClose?: boolean;
-    onclose?: () => void;
-    onopen?: () => void;
 }
 export interface MenuProps extends SVGAttributes<SVGSVGElement> {
     size?: string;

package/package.json

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