@pajohns/flowbite-svelte 0.1.0

package/dist/device-mockups/theme.d.ts

@@ -0,0 +1,377 @@
+import type { Classes } from "../theme/themeUtils";
+import { type VariantProps } from "tailwind-variants";
+export type AndroidVariants = VariantProps<typeof android> & Classes<typeof android>;
+declare const android: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DefaultMockupVariants = VariantProps<typeof defaultMockup> & Classes<typeof defaultMockup>;
+declare const defaultMockup: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DesktopVariants = VariantProps<typeof desktop> & Classes<typeof desktop>;
+declare const desktop: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inner: string;
+    bot: string;
+    botUnder: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botUnder?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inner: string;
+    bot: string;
+    botUnder: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    inner: string;
+    bot: string;
+    botUnder: string;
+}, undefined, unknown, unknown, undefined>>;
+export type IosVariants = VariantProps<typeof ios> & Classes<typeof ios>;
+declare const ios: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    slot: string;
+    top: string;
+    leftTop: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+export type LaptopVariants = VariantProps<typeof laptop> & Classes<typeof laptop>;
+declare const laptop: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            inner?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            botCen?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    inner: string;
+    bot: string;
+    botCen: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SmartwatchVariants = VariantProps<typeof smartwatch> & Classes<typeof smartwatch>;
+declare const smartwatch: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            top?: import("tailwind-merge").ClassNameValue;
+            bot?: import("tailwind-merge").ClassNameValue;
+            rightTop?: import("tailwind-merge").ClassNameValue;
+            rightBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    slot: string;
+    rightTop: string;
+    rightBot: string;
+    top: string;
+    bot: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TabletVariants = VariantProps<typeof tablet> & Classes<typeof tablet>;
+declare const tablet: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            slot?: import("tailwind-merge").ClassNameValue;
+            right?: import("tailwind-merge").ClassNameValue;
+            leftTop?: import("tailwind-merge").ClassNameValue;
+            leftMid?: import("tailwind-merge").ClassNameValue;
+            leftBot?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    slot: string;
+    leftTop: string;
+    leftMid: string;
+    leftBot: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;
+export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/device-mockups/theme.js

@@ -0,0 +1,76 @@
+import { tv } from "tailwind-variants";
+// Android
+const android = tv({
+    slots: {
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-xl h-[600px] w-[300px] shadow-xl",
+        slot: "rounded-xl overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
+        leftTop: "h-[32px] w-[3px] bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftMid: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// DefaultMockup
+const defaultMockup = tv({
+    slots: {
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px]",
+        slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftTop: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// Desktop
+const desktop = tv({
+    slots: {
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[16px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]",
+        inner: "rounded-xl overflow-hidden h-[140px] md:h-[262px]",
+        bot: "relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl h-[24px] max-w-[301px] md:h-[42px] md:max-w-[512px]",
+        botUnder: "relative mx-auto bg-gray-800 rounded-b-xl h-[55px] max-w-[83px] md:h-[95px] md:max-w-[142px]"
+    }
+});
+// ios
+const ios = tv({
+    slots: {
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl",
+        slot: "rounded-[2rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800",
+        top: "w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute",
+        leftTop: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+// laptop
+const laptop = tv({
+    slots: {
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[8px] rounded-t-xl h-[172px] max-w-[301px] md:h-[294px] md:max-w-[512px]",
+        inner: "rounded-lg overflow-hidden h-[156px] md:h-[278px] bg-white dark:bg-gray-800",
+        bot: "relative mx-auto bg-gray-900 dark:bg-gray-700 rounded-b-xl rounded-t-sm h-[17px] max-w-[351px] md:h-[21px] md:max-w-[597px]",
+        botCen: "absolute left-1/2 top-0 -translate-x-1/2 rounded-b-xl w-[56px] h-[5px] md:w-[96px] md:h-[8px] bg-gray-800"
+    }
+});
+// smartwatch
+const smartwatch = tv({
+    slots: {
+        base: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-t-[2.5rem] h-[63px] max-w-[133px]",
+        slot: "rounded-[2rem] overflow-hidden h-[193px] w-[188px]",
+        rightTop: "h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg",
+        rightBot: "h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg",
+        top: "relative mx-auto border-gray-900 dark:bg-gray-800 dark:border-gray-800 border-[10px] rounded-[2.5rem] h-[213px] w-[208px]",
+        bot: "relative mx-auto bg-gray-800 dark:bg-gray-700 rounded-b-[2.5rem] h-[63px] max-w-[133px]"
+    }
+});
+// tablet
+const tablet = tv({
+    slots: {
+        base: "relative mx-auto border-gray-800 dark:border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[454px] max-w-[341px] md:h-[682px] md:max-w-[512px]",
+        slot: "rounded-[2rem] overflow-hidden h-[426px] md:h-[654px] bg-white dark:bg-gray-800",
+        leftTop: "h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg",
+        leftMid: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg",
+        leftBot: "h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg",
+        right: "h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"
+    }
+});
+export { android, defaultMockup, desktop, ios, laptop, smartwatch, tablet };

package/dist/dialog/Dialog.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import type { DialogProps, ParamsType } from "..";
+  import { trapFocus } from "../utils/actions";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { createDismissableContext } from "../utils/dismissable";
+  import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
+  import { dialog } from "./theme";
+
+  let {
+    children,
+    onaction = () => true,
+    oncancel,
+    onsubmit,
+    ontoggle,
+    form = false,
+    modal = true,
+    autoclose = false,
+    focustrap = false,
+    open = $bindable(false),
+    permanent = false,
+    dismissable = true,
+    outsideclose = true,
+    class: className,
+    classes,
+    transition = fade,
+    transitionParams,
+    ...restProps
+  }: DialogProps = $props();
+
+  const paramsOptions = $derived(transitionParams ?? { duration: 100, easing: sineIn });
+
+  let { base, form: formCls, close: closeCls } = dialog();
+
+  const close = () => (open = false);
+
+  // Prefer requestClose when available to trigger a cancellable "cancel" event; otherwise synthesize it.
+  const cancel = (dlg: HTMLDialogElement) => {
+    if (typeof dlg.requestClose === "function") return dlg.requestClose();
+    dlg.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
+  };
+
+  function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
+    if (ev.target !== ev.currentTarget) {
+      return; // ignore if not on dialog
+    }
+
+    // this event gets called when user canceled the dialog:
+    // pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+    oncancel?.(ev);
+    if (ev.defaultPrevented) return;
+
+    ev.preventDefault(); // prevent anyway, we need clean close
+    if (!permanent) close();
+  }
+
+  function _onclick(ev: MouseEvent & { currentTarget: HTMLDialogElement }) {
+    const dlg: HTMLDialogElement = ev.currentTarget;
+    if (ev.target === dlg) {
+      // click outside - backdrop is dialog
+      const rect = dlg.getBoundingClientRect(),
+        clickedInContent = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
+
+      if (outsideclose && !clickedInContent) {
+        return cancel(dlg);
+      }
+    }
+
+    if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
+      return close();
+    }
+  }
+
+  function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+    onsubmit?.(ev);
+    if (ev.defaultPrevented) return;
+
+    // When dialog contains the <form method="dialog"> and when child with type="submit" was pressed
+    if (!(ev.target instanceof HTMLFormElement) || ev.target.method !== "dialog") {
+      return;
+    }
+
+    ev.preventDefault(); // stop dialog.close()
+
+    const dlg: HTMLDialogElement = ev.currentTarget;
+
+    if (ev.submitter && "value" in ev.submitter) {
+      // this is done by the system but after the submit event
+      dlg.returnValue = String(ev.submitter.value ?? "");
+    }
+
+    if (!dlg.returnValue) {
+      return cancel(dlg); // if no action - treat that as cancel
+    }
+
+    if (typeof onaction === "function") {
+      const result = onaction({ action: dlg.returnValue, data: new FormData(ev.target) });
+      // explicit false from onaction blocks the form closing
+      if (result === false) return;
+    }
+
+    close();
+  }
+
+  function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
+    ontoggle?.(ev);
+    open = ev.newState === "open"; // for cases when toggle by other means
+  }
+
+  function init(dlg: HTMLDialogElement) {
+    if (modal) dlg.showModal();
+    else dlg.show();
+
+    // Custom focus management
+    queueMicrotask(() => {
+      const autofocusEl = dlg.querySelector<HTMLElement>("[data-autofocus]") ?? dlg.querySelector<HTMLElement>('input, textarea, select, button:not([aria-label="Close"])');
+
+      if (autofocusEl) {
+        autofocusEl.focus();
+      } else {
+        dlg.focus(); // fallback
+      }
+    });
+
+    return () => dlg.close();
+  }
+
+  const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
+
+  let ref: HTMLDialogElement | undefined = $state(undefined);
+
+  function close_handler() {
+    if (form) {
+      // dialog/form mechanism will close the dialog
+      return;
+    }
+
+    ref?.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true }));
+  }
+
+  createDismissableContext(close_handler);
+</script>
+
+{#snippet content()}
+  {@render children?.()}
+  {#if dismissable && !permanent}
+    <CloseButton type="submit" formnovalidate class={closeCls({ class: clsx(classes?.close) })} />
+  {/if}
+{/snippet}
+
+{#if open}
+  <dialog
+    {@attach init}
+    bind:this={ref}
+    use:focusTrap
+    tabindex="-1"
+    onsubmit={_onsubmit}
+    oncancel={_oncancel}
+    onclick={_onclick}
+    ontoggle={_ontoggle}
+    transition:transition|global={paramsOptions as ParamsType}
+    {...restProps}
+    class={base({ class: clsx(className) })}
+  >
+    {#if form}
+      <form method="dialog" class={formCls({ class: clsx(classes?.form) })}>
+        {@render content()}
+      </form>
+    {:else}
+      {@render content()}
+    {/if}
+  </dialog>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+## Props
+@prop children
+@prop onaction = ()
+@prop oncancel
+@prop onsubmit
+@prop ontoggle
+@prop form = false
+@prop modal = true
+@prop autoclose = false
+@prop focustrap = false
+@prop open = $bindable(false)
+@prop permanent = false
+@prop dismissable = true
+@prop outsideclose = true
+@prop class: className
+@prop classes
+@prop transition = fade
+@prop transitionParams
+@prop ...restProps
+-->

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

@@ -0,0 +1,28 @@
+import type { DialogProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [DialogProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L662)
+ * ## Props
+ * @prop children
+ * @prop onaction = ()
+ * @prop oncancel
+ * @prop onsubmit
+ * @prop ontoggle
+ * @prop form = false
+ * @prop modal = true
+ * @prop autoclose = false
+ * @prop focustrap = false
+ * @prop open = $bindable(false)
+ * @prop permanent = false
+ * @prop dismissable = true
+ * @prop outsideclose = true
+ * @prop class: className
+ * @prop classes
+ * @prop transition = fade
+ * @prop transitionParams
+ * @prop ...restProps
+ */
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog } from "./Dialog.svelte";
+export { dialog } from "./theme";

package/dist/dialog/index.js

@@ -0,0 +1,2 @@
+export { default as Dialog } from "./Dialog.svelte";
+export { dialog } from "./theme";