@pajohns/flowbite-svelte 0.1.0

package/dist/mega-menu/MegaMenu.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { megamenu } from "./theme";
+  import clsx from "clsx";
+  import type { MegaMenuProps } from "..";
+  import Popper from "../utils/Popper.svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { untrack } from "svelte";
+
+  let { children, extra, items = [], full, ulClass, isOpen = $bindable(false), class: className, extraClass, classes, ...restProps }: MegaMenuProps = $props();
+
+  warnThemeDeprecation(
+    "MegaMenu",
+    untrack(() => ({ ulClass, extraClass })),
+    { ulClass: "ul", extraClass: "extra" }
+  );
+
+  const styling = $derived(classes ?? { ul: ulClass, extra: extraClass });
+  const theme = $derived(getTheme("megamenu"));
+  const { base, div, ul, extra: extraCls } = $derived(megamenu({ full, hasExtra: !!extra }));
+</script>
+
+<Popper arrow={false} bind:isOpen trigger="click" placement="bottom" yOnly={full} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div class={div({ class: clsx(theme?.div, classes?.div) })}>
+    <ul class={ul({ class: clsx(theme?.ul, styling.ul) })}>
+      {#each items as item, index (item.name)}
+        <li>
+          {@render children({ item, index })}
+        </li>
+      {:else}
+        {@render children({ item: items[0], index: 0 })}
+      {/each}
+    </ul>
+    {#if full && extra}<div class={extraCls({ class: clsx(theme?.extra, styling.extra) })}>{@render extra()}</div>{/if}
+  </div>
+</Popper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
+## Props
+@prop children
+@prop extra
+@prop items = []
+@prop full
+@prop ulClass
+@prop isOpen = $bindable(false)
+@prop class: className
+@prop extraClass
+@prop classes
+@prop ...restProps
+-->

package/dist/mega-menu/MegaMenu.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { MegaMenuProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [MegaMenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1151)
+ * ## Props
+ * @prop children
+ * @prop extra
+ * @prop items = []
+ * @prop full
+ * @prop ulClass
+ * @prop isOpen = $bindable(false)
+ * @prop class: className
+ * @prop extraClass
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const MegaMenu: import("svelte").Component<MegaMenuProps, {}, "isOpen">;
+type MegaMenu = ReturnType<typeof MegaMenu>;
+export default MegaMenu;

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

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

package/dist/mega-menu/index.js

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

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

@@ -0,0 +1,46 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+export type MegaMenuVariants = VariantProps<typeof megamenu> & Classes<typeof megamenu>;
+export declare const megamenu: import("tailwind-variants").TVReturnType<{
+    full: {
+        true: {
+            base: string;
+        };
+    };
+    hasExtra: {
+        true: {};
+    };
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    extra: string;
+}, undefined, {
+    full: {
+        true: {
+            base: string;
+        };
+    };
+    hasExtra: {
+        true: {};
+    };
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    extra: string;
+}, import("tailwind-variants").TVReturnType<{
+    full: {
+        true: {
+            base: string;
+        };
+    };
+    hasExtra: {
+        true: {};
+    };
+}, {
+    base: string;
+    div: string;
+    ul: string;
+    extra: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/mega-menu/theme.js

@@ -0,0 +1,24 @@
+import { tv } from "tailwind-variants";
+export const megamenu = tv({
+    slots: {
+        base: "w-fit bg-white shadow-md dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-lg border border-gray-100 dark:border-gray-600 divide-gray-100 dark:divide-gray-600",
+        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",
+        extra: "md:w-1/3 mt-4 md:mt-0"
+    },
+    variants: {
+        full: {
+            true: { base: "border-y shadow-xs w-full ml-0 rounded-none" }
+        },
+        hasExtra: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        {
+            full: true,
+            hasExtra: true,
+            class: { ul: "grid-cols-2 md:w-2/3" }
+        }
+    ]
+});

package/dist/modal/Modal.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type { ModalProps } from "..";
+  import Dialog from "../dialog/Dialog.svelte";
+  import CloseButton from "../utils/CloseButton.svelte";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import clsx from "clsx";
+  import { sineIn } from "svelte/easing";
+  import { fade } from "svelte/transition";
+  import { modal as modalStyle } from "./theme";
+  import { untrack } from "svelte";
+
+  let {
+    children,
+    header,
+    footer,
+    title,
+    open = $bindable(false),
+    permanent = false,
+    dismissable = true,
+    closeBtnClass,
+    headerClass,
+    bodyClass,
+    footerClass,
+    size = "md",
+    placement,
+    class: className,
+    classes,
+    transitionParams,
+    transition = fade,
+    fullscreen = false,
+    ...restProps
+  }: ModalProps = $props();
+
+  warnThemeDeprecation(
+    "Modal",
+    untrack(() => ({ headerClass, bodyClass, footerClass, closeBtnClass })),
+    { bodyClass: "body", headerClass: "header", footerClass: "footer", closeBtnClass: "close" }
+  );
+
+  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, size }));
+</script>
+
+<Dialog
+  bind:open
+  {transition}
+  dismissable={dismissable && !title && !permanent}
+  transitionParams={paramsOptions}
+  {classes}
+  {permanent}
+  {...restProps}
+  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}
+    </div>
+  {/if}
+  <div class={body({ class: clsx(theme?.body, styling.body) })}>
+    {@render children?.()}
+  </div>
+  {#if footer}
+    <div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
+      {@render footer()}
+    </div>
+  {/if}
+</Dialog>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
+## Props
+@prop children
+@prop header
+@prop footer
+@prop title
+@prop open = $bindable(false)
+@prop permanent = false
+@prop dismissable = true
+@prop closeBtnClass
+@prop headerClass
+@prop bodyClass
+@prop footerClass
+@prop size = "md"
+@prop placement
+@prop class: className
+@prop classes
+@prop transitionParams
+@prop transition = fade
+@prop fullscreen = false
+@prop ...restProps
+-->

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

@@ -0,0 +1,29 @@
+import type { ModalProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ModalProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1162)
+ * ## Props
+ * @prop children
+ * @prop header
+ * @prop footer
+ * @prop title
+ * @prop open = $bindable(false)
+ * @prop permanent = false
+ * @prop dismissable = true
+ * @prop closeBtnClass
+ * @prop headerClass
+ * @prop bodyClass
+ * @prop footerClass
+ * @prop size = "md"
+ * @prop placement
+ * @prop class: className
+ * @prop classes
+ * @prop transitionParams
+ * @prop transition = fade
+ * @prop fullscreen = false
+ * @prop ...restProps
+ */
+declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/modal/index.d.ts

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

package/dist/modal/index.js

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

package/dist/modal/theme.d.ts

@@ -0,0 +1,82 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Classes } from "../theme/themeUtils";
+import { dialog } from "../dialog/theme";
+export type ModalVariants = VariantProps<typeof modal> & Classes<typeof modal> & Classes<typeof dialog>;
+export declare const modal: import("tailwind-variants").TVReturnType<{
+    fullscreen: {
+        true: {
+            base: string;
+        };
+    };
+    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;
+        };
+    };
+    size: {
+        none: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    form: string;
+    header: string;
+    footer: string;
+    body: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, {}, {
+    base: string;
+    form: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+    form: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>>;

package/dist/modal/theme.js

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+import { dialog } from "../dialog/theme";
+export const modal = tv({
+    extend: dialog,
+    slots: {
+        base: "w-full rounded-lg divide-y text-gray-500 dark:text-gray-400 border-gray-300 dark:border-gray-700 divide-gray-300 dark:divide-gray-700 bg-white dark:bg-gray-800 pointer-events-auto",
+        form: "rounded-lg divide-y",
+        header: "flex items-center p-4 md:p-5 justify-between rounded-t-lg shrink-0 text-xl font-semibold text-gray-900 dark:text-white",
+        footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg shrink-0",
+        body: "p-4 md:p-5 space-y-4 overflow-y-auto overscroll-contain"
+    },
+    variants: {
+        fullscreen: {
+            true: {
+                base: "fixed inset-0 w-screen h-screen max-w-none max-h-none m-0 p-0 border-none rounded-none bg-white dark:bg-gray-900"
+            }
+        },
+        placement: {
+            "top-left": { base: "mb-auto mr-auto" },
+            "top-center": { base: "mb-auto mx-auto" },
+            "top-right": { base: "mb-auto ml-auto" },
+            "center-left": { base: "my-auto mr-auto" },
+            center: { base: "my-auto mx-auto" },
+            "center-right": { base: "my-auto ml-auto" },
+            "bottom-left": { base: "mt-auto mr-auto" },
+            "bottom-center": { base: "mt-auto mx-auto" },
+            "bottom-right": { base: "mt-auto ml-auto" }
+        },
+        size: {
+            none: { base: "" },
+            xs: { base: "max-w-md" },
+            sm: { base: "max-w-lg" },
+            md: { base: "max-w-2xl" },
+            lg: { base: "max-w-4xl" },
+            xl: { base: "max-w-7xl" }
+        }
+    },
+    defaultVariants: {
+        placement: "center",
+        size: "md"
+    }
+});

package/dist/navbar/Menu.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { MenuProps } from "../types";
+  import clsx from "clsx";
+
+  let { size = "24", color = "currentColor", variation = "outline", ariaLabel = "bars 3", class: className, ...restProps }: MenuProps = $props();
+
+  let viewBox: string = $state("0 0 24 24");
+  let svgpath: string = $state("");
+  let svgoutline = $derived(`<path stroke="${color}" stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path> `);
+  let svgsolid = $derived(
+    `<path fill="${color}" clip-rule="evenodd" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"></path> `
+  );
+  $effect(() => {
+    switch (variation) {
+      case "outline":
+        svgpath = svgoutline;
+        viewBox = "0 0 24 24";
+        break;
+      case "solid":
+        svgpath = svgsolid;
+        viewBox = "0 0 24 24";
+        break;
+      default:
+        svgpath = svgoutline;
+        viewBox = "0 0 24 24";
+    }
+  });
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" role="button" tabindex="0" width={size} height={size} class={clsx(className)} {...restProps} aria-label={ariaLabel} fill="none" {viewBox} stroke-width="2">
+  {@html svgpath}
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
+## Props
+@prop size = "24"
+@prop color = "currentColor"
+@prop variation = "outline"
+@prop ariaLabel = "bars 3"
+@prop class: className
+@prop ...restProps
+-->

package/dist/navbar/Menu.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { MenuProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [MenuProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1173)
+ * ## Props
+ * @prop size = "24"
+ * @prop color = "currentColor"
+ * @prop variation = "outline"
+ * @prop ariaLabel = "bars 3"
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/navbar/NavBrand.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { navbarBrand } from "./theme";
+  import type { NavBrandProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, class: className, ...restProps }: NavBrandProps = $props();
+
+  const theme = $derived(getTheme("navbarBrand"));
+</script>
+
+<a {...restProps} class={navbarBrand({ class: clsx(theme, className) })}>
+  {@render children?.()}
+</a>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
+## Props
+@prop children
+@prop class: className
+@prop ...restProps
+-->

package/dist/navbar/NavBrand.svelte.d.ts

@@ -0,0 +1,12 @@
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [NavBrandProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1197)
+ * ## Props
+ * @prop children
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const NavBrand: import("svelte").Component<import("svelte/elements").HTMLAnchorAttributes, {}, "">;
+type NavBrand = ReturnType<typeof NavBrand>;
+export default NavBrand;

package/dist/navbar/NavContainer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { navbarContainer } from "./theme";
+  import type { NavContainerProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { children, fluid, class: className, ...restProps }: NavContainerProps = $props();
+
+  const theme = $derived(getTheme("navbarContainer"));
+</script>
+
+<div {...restProps} class={navbarContainer({ fluid, class: clsx(theme, className) })}>
+  {@render children?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1199)
+## Props
+@prop children
+@prop fluid
+@prop class: className
+@prop ...restProps
+-->

package/dist/navbar/NavContainer.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { NavContainerProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [NavContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1199)
+ * ## Props
+ * @prop children
+ * @prop fluid
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const NavContainer: import("svelte").Component<NavContainerProps, {}, "">;
+type NavContainer = ReturnType<typeof NavContainer>;
+export default NavContainer;

package/dist/navbar/NavHamburger.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import ToolbarButton from "../toolbar/ToolbarButton.svelte";
+  import Menu from "./Menu.svelte";
+  import { navbarHamburger } from "./theme";
+  import type { NavHamburgerProps } from "../types";
+  import type { MouseEventHandler } from "svelte/elements";
+  import { getTheme, warnThemeDeprecation } from "../theme/themeUtils";
+  import { getNavbarStateContext, getNavbarBreakpointContext } from "../context";
+  import { untrack } from "svelte";
+
+  let { children, onclick, menuClass, class: className, classes, name = "Open main menu", ...restProps }: NavHamburgerProps = $props();
+
+  warnThemeDeprecation(
+    "NavHamburger",
+    untrack(() => ({ menuClass })),
+    { menuClass: "menu" }
+  );
+
+  const styling = $derived(classes ?? { menu: menuClass });
+
+  const theme = $derived(getTheme("navbarHamburger"));
+  const navState = getNavbarStateContext();
+  const navBreakpoint = getNavbarBreakpointContext();
+  const { base, menu } = navbarHamburger({ breakpoint: navBreakpoint ?? "md" });
+
+  const toggle: MouseEventHandler<HTMLButtonElement> = () => {
+    if (!navState) return;
+    navState.hidden = !navState.hidden;
+  };
+</script>
+
+<ToolbarButton {name} onclick={onclick || toggle} {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <Menu class={menu({ class: clsx(theme?.menu, styling.menu) })} />
+</ToolbarButton>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[NavHamburgerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1203)
+## Props
+@prop children
+@prop onclick
+@prop menuClass
+@prop class: className
+@prop classes
+@prop name = "Open main menu"
+@prop ...restProps
+-->