flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/mega-menu/index.js

@@ -0,0 +1,3 @@
+import MegaMenu from "./MegaMenu.svelte";
+import { megamenu } from "./theme";
+export { MegaMenu, megamenu };

package/dist/mega-menu/theme.d.ts

@@ -0,0 +1,22 @@
+export declare const megamenu: import("tailwind-variants").TVReturnType<{
+    full: {};
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    footerDiv: string;
+}, undefined, {
+    full: {};
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    footerDiv: string;
+}, import("tailwind-variants").TVReturnType<{
+    full: {};
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    footerDiv: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/mega-menu/theme.js

@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+export const megamenu = tv({
+    slots: {
+        base: "w-full border rounded-lg",
+        div: "flex flex-col md:flex-row p-4 max-w-(--breakpoint-md) justify-center mx-auto mt-2",
+        ul: "grid grid-flow-row gap-y-4 md:gap-x-0 auto-col-max auto-row-max grid-cols-2 md:grid-cols-3 text-sm font-medium",
+        footerDiv: "md:w-1/3 mt-4 md:mt-0"
+    },
+    variants: {
+        full: {}
+    }
+});

package/dist/mega-menu/type.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { LinkType } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+interface MegaMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: Snippet<[{
+        item: LinkType;
+        index: number;
+    }]>;
+    footer?: Snippet;
+    items?: LinkType[];
+    full?: boolean;
+    ulClass?: string;
+    open: boolean;
+    divClass?: string;
+    footerClass?: string;
+    headerClass?: string;
+}
+export { type MegaMenuProps };

package/dist/mega-menu/type.js

@@ -0,0 +1 @@
+export {};

package/dist/modal/Modal.svelte

@@ -1,130 +1,81 @@
-<script>import { twMerge } from "tailwind-merge";
-import Frame from "../utils/Frame.svelte";
-import { createEventDispatcher } from "svelte";
-import CloseButton from "../utils/CloseButton.svelte";
-import focusTrap from "../utils/focusTrap";
-export let open = false;
-export let title = "";
-export let size = "md";
-export let color = "default";
-export let placement = "center";
-export let autoclose = false;
-export let outsideclose = false;
-export let dismissable = true;
-export let backdropClass = "fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80";
-export let classBackdrop = void 0;
-export let dialogClass = "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex";
-export let classDialog = void 0;
-export let defaultClass = "relative flex flex-col mx-auto";
-export let headerClass = "flex justify-between items-center p-4 md:p-5 rounded-t-lg";
-export let classHeader = void 0;
-export let bodyClass = "p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain";
-export let classBody = void 0;
-export let footerClass = "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg";
-export let classFooter = void 0;
-const dispatch = createEventDispatcher();
-$: dispatch(open ? "open" : "close");
-function prepareFocus(node) {
-  const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
-  let n;
-  while (n = walker.nextNode()) {
-    if (n instanceof HTMLElement) {
-      const el = n;
-      const [x, y] = isScrollable(el);
-      if (x || y) el.tabIndex = 0;
-    }
-  }
-  node.focus();
-}
-const getPlacementClasses = (placement2) => {
-  switch (placement2) {
-    case "top-left":
-      return ["justify-start", "items-start"];
-    case "top-center":
-      return ["justify-center", "items-start"];
-    case "top-right":
-      return ["justify-end", "items-start"];
-    case "center-left":
-      return ["justify-start", "items-center"];
-    case "center":
-      return ["justify-center", "items-center"];
-    case "center-right":
-      return ["justify-end", "items-center"];
-    case "bottom-left":
-      return ["justify-start", "items-end"];
-    case "bottom-center":
-      return ["justify-center", "items-end"];
-    case "bottom-right":
-      return ["justify-end", "items-end"];
-    default:
-      return ["justify-center", "items-center"];
+<script lang="ts">
+  import type { ParamsType } from "../types";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { type ModalProps as Props, modal } from ".";
+  import { fade } from "svelte/transition";
+  import { sineIn } from "svelte/easing";
+  import clsx from "clsx";
+
+  // TODO: missing focus trap
+
+  let { children, header, footer, title, open = $bindable(false), dismissable = true, divClass, contentClass, closeBtnClass, h3Class, headerClass, bodyClass, footerClass, outsideClose = true, size = "md", backdrop = true, backdropClass, placement, class: className, params = { duration: 100, easing: sineIn }, transition = fade, rounded, ...restProps }: Props = $props();
+
+  const {
+    base,
+    div,
+    content,
+    backdrop: backdropCls,
+    header: headerCls,
+    footer: footerCls,
+    body,
+    closeBtn,
+    h3
+  } = $derived(
+    modal({
+      placement,
+      size,
+      backdrop,
+      rounded
+    })
+  );
+
+  function closeModal(ev: KeyboardEvent | MouseEvent) {
+    if (ev instanceof KeyboardEvent && ev.key !== "Escape") return;
+    open = false;
   }
-};
-const sizes = {
-  xs: "max-w-md",
-  sm: "max-w-lg",
-  md: "max-w-2xl",
-  lg: "max-w-4xl",
-  xl: "max-w-7xl"
-};
-const onAutoClose = (e) => {
-  const target = e.target;
-  if (autoclose && target?.tagName === "BUTTON") hide(e);
-};
-const onOutsideClose = (e) => {
-  const target = e.target;
-  if (outsideclose && target === e.currentTarget) hide(e);
-};
-const hide = (e) => {
-  e.preventDefault();
-  open = false;
-};
-const isScrollable = (e) => [e.scrollWidth > e.clientWidth && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowY) >= 0];
-function handleKeys(e) {
-  if (e.key === "Escape" && dismissable) return hide(e);
-}
-$: backdropCls = twMerge(backdropClass, classBackdrop);
-$: dialogCls = twMerge(dialogClass, classDialog, getPlacementClasses(placement));
-$: frameCls = twMerge(defaultClass, "w-full divide-y", $$props.class);
-$: headerCls = twMerge(headerClass, classHeader);
-$: bodyCls = twMerge(bodyClass, classBody);
-$: footerCls = twMerge(footerClass, classFooter);
 </script>
 
+<svelte:window onkeydown={open ? closeModal : undefined} />
+
 {#if open}
-  <!-- backdrop -->
-  <div class={backdropCls}></div>
-  <!-- dialog -->
-  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={dialogCls} tabindex="-1" aria-modal="true" role="dialog">
-    <div class="flex relative {sizes[size]} w-full max-h-full">
-      <!-- Modal content -->
-      <Frame rounded shadow {...$$restProps} class={frameCls} {color}>
-        <!-- Modal header -->
-        {#if $$slots.header || title}
-          <Frame class={headerCls} {color}>
-            <slot name="header">
-              <h3 class="text-xl font-semibold {color === 'default' ? '' : 'text-gray-900 dark:text-white'} p-0">
+  {#if backdrop && outsideClose}
+    <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={closeModal}></div>
+  {:else if backdrop && !outsideClose}
+    <div role="presentation" class={backdropCls({ class: backdropClass })}></div>
+  {:else if !backdrop && outsideClose}
+    <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeModal}></div>
+  {:else if !backdrop && !outsideClose}
+    <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
+  {/if}
+  <div {...restProps} class={base({ class: clsx(className) })} transition:transition={params as ParamsType} tabindex="-1">
+    <div class={div({ class: divClass })}>
+      <div class={content({ class: contentClass })}>
+        {#if title || header}
+          <div class={headerCls({ class: headerClass })}>
+            {#if title}
+              <h3 class={h3({ class: h3Class })}>
                 {title}
               </h3>
-            </slot>
-            {#if dismissable}<CloseButton name="Close modal" {color} on:click={hide} />{/if}
-          </Frame>
+            {:else if header}
+              {@render header()}
+            {/if}
+            {#if dismissable}
+              <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })} />
+            {/if}
+          </div>
         {/if}
-        <!-- Modal body -->
-        <div class={bodyCls} role="document" on:keydown|stopPropagation={handleKeys} on:wheel|stopPropagation|passive>
-          {#if dismissable && !$$slots.header && !title}
-            <CloseButton name="Close modal" class="absolute top-3 end-2.5" {color} on:click={hide} />
+        <div class={body({ class: bodyClass })}>
+          {#if dismissable && !title && !header}
+            <CloseButton onclick={closeModal} class={closeBtn({ class: closeBtnClass })} />
           {/if}
-          <slot></slot>
+          {@render children()}
         </div>
-        <!-- Modal footer -->
-        {#if $$slots.footer}
-          <Frame class={footerCls} {color}>
-            <slot name="footer"></slot>
-          </Frame>
+        {#if footer}
+          <div class={footerCls({ class: footerClass })}>
+            {@render footer()}
+          </div>
         {/if}
-      </Frame>
+      </div>
     </div>
   </div>
 {/if}
@@ -133,23 +84,27 @@ $: footerCls = twMerge(footerClass, classFooter);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let open: $$Props['open'] = false;
-@prop export let title: $$Props['title'] = '';
-@prop export let size: NonNullable<$$Props['size']> = 'md';
-@prop export let color: $$Props['color'] = 'default';
-@prop export let placement: NonNullable<$$Props['placement']> = 'center';
-@prop export let autoclose: $$Props['autoclose'] = false;
-@prop export let outsideclose: $$Props['outsideclose'] = false;
-@prop export let dismissable: $$Props['dismissable'] = true;
-@prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80';
-@prop export let classBackdrop: $$Props['classBackdrop'] = undefined;
-@prop export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
-@prop export let classDialog: $$Props['classDialog'] = undefined;
-@prop export let defaultClass: $$Props['defaultClass'] = 'relative flex flex-col mx-auto';
-@prop export let headerClass: $$Props['headerClass'] = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
-@prop export let classHeader: $$Props['classHeader'] = undefined;
-@prop export let bodyClass: $$Props['bodyClass'] = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
-@prop export let classBody: $$Props['classBody'] = undefined;
-@prop export let footerClass: $$Props['footerClass'] = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
-@prop export let classFooter: $$Props['classFooter'] = undefined;
+@props: children: any;
+@props:header: any;
+@props:footer: any;
+@props:title: any;
+@props:open: any = $bindable(false);
+@props:dismissable: any = true;
+@props:divClass: any;
+@props:contentClass: any;
+@props:closeBtnClass: any;
+@props:h3Class: any;
+@props:headerClass: any;
+@props:bodyClass: any;
+@props:footerClass: any;
+@props:outsideClose: any = true;
+@props:size: any = "md";
+@props:backdrop: any = true;
+@props:backdropClass: any;
+@props:placement: any;
+@props:class: string;
+@props:params: any = { duration: 100;
+@props:easing: any;
+@props:transition: any = fade;
+@props:rounded: any;
 -->

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

@@ -1,77 +1,41 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Dismissable, SizeType } from '../types';
-import type { ModalPlacementType } from '../types';
 declare const __propDef: {
-    props: import("svelte/elements").HTMLAttributes<HTMLElement> & {
-        tag?: string;
-        color?: import("../utils/Frame.svelte").FrameColor;
-        rounded?: boolean;
-        border?: boolean;
-        shadow?: boolean;
-        node?: HTMLElement | undefined;
-        use?: import("svelte/action").Action<HTMLElement, any>;
-        options?: object;
-        class?: string;
-        role?: string;
-        open?: boolean;
-        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
-        params?: any;
-    } & Dismissable & {
-        open?: boolean;
-        title?: string;
-        size?: SizeType;
-        placement?: ModalPlacementType;
-        autoclose?: boolean;
-        outsideclose?: boolean;
-        backdropClass?: string;
-        classBackdrop?: string;
-        dialogClass?: string;
-        classDialog?: string;
-        defaultClass?: string;
-        headerClass?: string;
-        classHeader?: string;
-        bodyClass?: string;
-        classBody?: string;
-        footerClass?: string;
-        classFooter?: string;
-    };
+    props: Record<string, never>;
     events: {
-        wheel: WheelEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        header: {};
-        default: {};
-        footer: {};
-    };
+    slots: {};
 };
-export type ModalProps = typeof __propDef.props;
+type ModalProps_ = typeof __propDef.props;
+export { ModalProps_ as ModalProps };
 export type ModalEvents = typeof __propDef.events;
 export type ModalSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let open: $$Props['open'] = false;
- * @prop export let title: $$Props['title'] = '';
- * @prop export let size: NonNullable<$$Props['size']> = 'md';
- * @prop export let color: $$Props['color'] = 'default';
- * @prop export let placement: NonNullable<$$Props['placement']> = 'center';
- * @prop export let autoclose: $$Props['autoclose'] = false;
- * @prop export let outsideclose: $$Props['outsideclose'] = false;
- * @prop export let dismissable: $$Props['dismissable'] = true;
- * @prop export let backdropClass: $$Props['backdropClass'] = 'fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80';
- * @prop export let classBackdrop: $$Props['classBackdrop'] = undefined;
- * @prop export let dialogClass: $$Props['dialogClass'] = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
- * @prop export let classDialog: $$Props['classDialog'] = undefined;
- * @prop export let defaultClass: $$Props['defaultClass'] = 'relative flex flex-col mx-auto';
- * @prop export let headerClass: $$Props['headerClass'] = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
- * @prop export let classHeader: $$Props['classHeader'] = undefined;
- * @prop export let bodyClass: $$Props['bodyClass'] = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
- * @prop export let classBody: $$Props['classBody'] = undefined;
- * @prop export let footerClass: $$Props['footerClass'] = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
- * @prop export let classFooter: $$Props['classFooter'] = undefined;
+ * @props: children: any;
+ * @props:header: any;
+ * @props:footer: any;
+ * @props:title: any;
+ * @props:open: any = $bindable(false);
+ * @props:dismissable: any = true;
+ * @props:divClass: any;
+ * @props:contentClass: any;
+ * @props:closeBtnClass: any;
+ * @props:h3Class: any;
+ * @props:headerClass: any;
+ * @props:bodyClass: any;
+ * @props:footerClass: any;
+ * @props:outsideClose: any = true;
+ * @props:size: any = "md";
+ * @props:backdrop: any = true;
+ * @props:backdropClass: any;
+ * @props:placement: any;
+ * @props:class: string;
+ * @props:params: any = { duration: 100;
+ * @props:easing: any;
+ * @props:transition: any = fade;
+ * @props:rounded: any;
  */
-export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
+export default class Modal extends SvelteComponentTyped<ModalProps_, ModalEvents, ModalSlots> {
 }
-export {};

package/dist/modal/index.d.ts

@@ -0,0 +1,4 @@
+import type { ModalProps } from "./type";
+import Modal from "./Modal.svelte";
+import { modal } from "./theme";
+export { Modal, modal, type ModalProps };

package/dist/modal/index.js

@@ -0,0 +1,3 @@
+import Modal from "./Modal.svelte";
+import { modal } from "./theme";
+export { Modal, modal };

package/dist/modal/theme.d.ts

@@ -0,0 +1,228 @@
+import { type VariantProps } from "tailwind-variants";
+export type ModalVariants = VariantProps<typeof modal>;
+export declare const modal: import("tailwind-variants").TVReturnType<{
+    placement: {
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+    };
+    size: {
+        xs: {
+            div: string;
+        };
+        sm: {
+            div: string;
+        };
+        md: {
+            div: string;
+        };
+        lg: {
+            div: string;
+        };
+        xl: {
+            div: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+    rounded: {
+        true: {
+            content: string;
+        };
+    };
+    shadow: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    div: string;
+    content: string;
+    backdrop: string;
+    header: string;
+    footer: string;
+    body: string;
+    closeBtn: string;
+    h3: string;
+}, undefined, {
+    placement: {
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+    };
+    size: {
+        xs: {
+            div: string;
+        };
+        sm: {
+            div: string;
+        };
+        md: {
+            div: string;
+        };
+        lg: {
+            div: string;
+        };
+        xl: {
+            div: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+    rounded: {
+        true: {
+            content: string;
+        };
+    };
+    shadow: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    div: string;
+    content: string;
+    backdrop: string;
+    header: string;
+    footer: string;
+    body: string;
+    closeBtn: string;
+    h3: string;
+}, import("tailwind-variants").TVReturnType<{
+    placement: {
+        "top-left": {
+            base: string;
+        };
+        "top-center": {
+            base: string;
+        };
+        "top-right": {
+            base: string;
+        };
+        "center-left": {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        "center-right": {
+            base: string;
+        };
+        "bottom-left": {
+            base: string;
+        };
+        "bottom-center": {
+            base: string;
+        };
+        "bottom-right": {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+    };
+    size: {
+        xs: {
+            div: string;
+        };
+        sm: {
+            div: string;
+        };
+        md: {
+            div: string;
+        };
+        lg: {
+            div: string;
+        };
+        xl: {
+            div: string;
+        };
+    };
+    backdrop: {
+        true: {
+            backdrop: string;
+        };
+    };
+    rounded: {
+        true: {
+            content: string;
+        };
+    };
+    shadow: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    div: string;
+    content: string;
+    backdrop: string;
+    header: string;
+    footer: string;
+    body: string;
+    closeBtn: string;
+    h3: string;
+}, undefined, unknown, unknown, undefined>>;