flowbite-svelte 0.48.4 → 1.0.0-next.2

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

@@ -1,44 +1,35 @@
 import { SvelteComponentTyped } from "svelte";
-import NavContainer from './NavContainer.svelte';
 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;
-    } & {
-        fluid?: boolean;
-        navContainerClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {
-            hidden: boolean;
-            toggle: () => void;
-            NavContainer: typeof NavContainer;
-        };
-    };
+    slots: {};
 };
-export type NavbarProps = typeof __propDef.props;
+type NavbarProps_ = typeof __propDef.props;
+export { NavbarProps_ as NavbarProps };
 export type NavbarEvents = typeof __propDef.events;
 export type NavbarSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let fluid: $$Props['fluid'] = false;
- * @prop export let navContainerClass: string= '';
+ * @props: children: any;
+ * @props:navSlotBlock: any;
+ * @props:navSlotHiddenTop: any;
+ * @props:navSlotHiddenBottom: any;
+ * @props:toggleNav: any;
+ * @props:closeNav: any = ();
+ * @props:navStatus: any;
+ * @props:fluid: any;
+ * @props:brand: any;
+ * @props:hamburgerMenu: any = true;
+ * @props:breakPoint: any = "md";
+ * @props:class: string;
+ * @props:divClass: any;
+ * @props:btnClass: any;
+ * @props:div2Class: any;
+ * @props:activeClass: any;
+ * @props:nonActiveClass: any;
  */
-export default class Navbar extends SvelteComponentTyped<NavbarProps, NavbarEvents, NavbarSlots> {
+export default class Navbar extends SvelteComponentTyped<NavbarProps_, NavbarEvents, NavbarSlots> {
 }
-export {};

package/dist/navbar/index.d.ts

@@ -0,0 +1,8 @@
+import type { NavbarProps, NavBrandProps, NavLiProps, NavUlProps, NavHamburgerProps } from "./type";
+import Navbar from "./Navbar.svelte";
+import NavBrand from "./NavBrand.svelte";
+import NavLi from "./NavLi.svelte";
+import NavUl from "./NavUl.svelte";
+import NavHamburger from "./NavHamburger.svelte";
+import { navbar, navUl, navbrand, navLi, navhamburger } from "./theme";
+export { Navbar, navbar, type NavbarProps, NavBrand, navbrand, type NavBrandProps, NavLi, navLi, type NavLiProps, NavUl, navUl, type NavUlProps, NavHamburger, navhamburger, type NavHamburgerProps };

package/dist/navbar/index.js

@@ -0,0 +1,7 @@
+import Navbar from "./Navbar.svelte";
+import NavBrand from "./NavBrand.svelte";
+import NavLi from "./NavLi.svelte";
+import NavUl from "./NavUl.svelte";
+import NavHamburger from "./NavHamburger.svelte";
+import { navbar, navUl, navbrand, navLi, navhamburger } from "./theme";
+export { Navbar, navbar, NavBrand, navbrand, NavLi, navLi, NavUl, navUl, NavHamburger, navhamburger };

package/dist/navbar/theme.d.ts

@@ -0,0 +1,300 @@
+export declare const navbar: import("tailwind-variants").TVReturnType<{
+    fluid: {
+        true: {
+            container: string;
+        };
+        false: {
+            container: string;
+        };
+    };
+    breakPoint: {
+        md: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        lg: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        xl: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        xxl: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+    };
+    navStatus: {
+        true: {
+            menuContainer: string;
+        };
+        false: {
+            menuContainer: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    toggleButton: string;
+    menuContainer: string;
+    activeLink: string;
+    inactiveLink: string;
+}, undefined, {
+    fluid: {
+        true: {
+            container: string;
+        };
+        false: {
+            container: string;
+        };
+    };
+    breakPoint: {
+        md: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        lg: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        xl: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        xxl: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+    };
+    navStatus: {
+        true: {
+            menuContainer: string;
+        };
+        false: {
+            menuContainer: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    toggleButton: string;
+    menuContainer: string;
+    activeLink: string;
+    inactiveLink: string;
+}, import("tailwind-variants").TVReturnType<{
+    fluid: {
+        true: {
+            container: string;
+        };
+        false: {
+            container: string;
+        };
+    };
+    breakPoint: {
+        md: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        lg: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        xl: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+        xxl: {
+            container: string;
+            toggleButton: string;
+            menuContainer: string;
+        };
+    };
+    navStatus: {
+        true: {
+            menuContainer: string;
+        };
+        false: {
+            menuContainer: string;
+        };
+    };
+}, {
+    base: string;
+    container: string;
+    toggleButton: string;
+    menuContainer: string;
+    activeLink: string;
+    inactiveLink: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const navUl: import("tailwind-variants").TVReturnType<{
+    breakPoint: {
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+}, undefined, "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700", {
+    breakPoint: {
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    breakPoint: {
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+}, undefined, "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700", unknown, unknown, undefined>>;
+export declare const navbrand: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    span: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const navLi: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            link: string;
+        };
+    };
+    breakPoint: {
+        md: {
+            link: string;
+        };
+        lg: {
+            link: string;
+        };
+        xl: {
+            link: string;
+        };
+        xxl: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    link: string;
+}, undefined, {
+    active: {
+        true: {
+            link: string;
+        };
+    };
+    breakPoint: {
+        md: {
+            link: string;
+        };
+        lg: {
+            link: string;
+        };
+        xl: {
+            link: string;
+        };
+        xxl: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    link: string;
+}, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: {
+            link: string;
+        };
+    };
+    breakPoint: {
+        md: {
+            link: string;
+        };
+        lg: {
+            link: string;
+        };
+        xl: {
+            link: string;
+        };
+        xxl: {
+            link: string;
+        };
+    };
+}, {
+    base: string;
+    link: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const navcontainer: import("tailwind-variants").TVReturnType<{
+    fluid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "mx-auto flex flex-wrap justify-between items-center", {
+    fluid: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fluid: {
+        true: string;
+        false: string;
+    };
+}, undefined, "mx-auto flex flex-wrap justify-between items-center", unknown, unknown, undefined>>;
+export declare const navhamburger: import("tailwind-variants").TVReturnType<{
+    breakPoint: {
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", {
+    breakPoint: {
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    breakPoint: {
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+}, undefined, "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600", unknown, unknown, undefined>>;

package/dist/navbar/theme.js

@@ -0,0 +1,154 @@
+import { tv } from "tailwind-variants";
+export const navbar = tv({
+    slots: {
+        base: "bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 border-gray-100 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full",
+        container: "mx-auto flex flex-wrap items-center justify-between",
+        toggleButton: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+        menuContainer: "w-full",
+        activeLink: "block py-2 px-3 text-white bg-primary-700 rounded-sm dark:text-white",
+        inactiveLink: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+    },
+    variants: {
+        fluid: {
+            true: {
+                container: "w-full!"
+            },
+            false: {
+                container: "container"
+            }
+        },
+        breakPoint: {
+            md: {
+                container: "max-w-(--breakpoint-xl)",
+                toggleButton: "md:hidden",
+                menuContainer: "md:flex items-center md:w-auto"
+            },
+            lg: {
+                container: "max-w-(--breakpoint-xl)",
+                toggleButton: "lg:hidden",
+                menuContainer: "lg:flex items-center lg:w-auto"
+            },
+            xl: {
+                container: "max-w-(--breakpoint-xl)",
+                toggleButton: "xl:hidden",
+                menuContainer: "xl:flex items-center xl:w-auto"
+            },
+            xxl: {
+                container: "w-full",
+                toggleButton: "2xl:hidden",
+                menuContainer: "2xl:flex items-center"
+            }
+        },
+        navStatus: {
+            true: {
+                menuContainer: "block"
+            },
+            false: {
+                menuContainer: "hidden"
+            }
+        }
+    },
+    defaultVariants: {
+        fluid: false,
+        breakPoint: "md",
+        navStatus: false
+    }
+});
+export const navUl = tv({
+    base: "font-medium flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-transparent rtl:space-x-reverse dark:bg-gray-800 dark:border-gray-700",
+    variants: {
+        breakPoint: {
+            md: "md:mt-0 md:flex-row md:space-x-8 md:border-0 md:p-0 md:dark:bg-gray-900",
+            lg: "lg:mt-0 lg:flex-row lg:space-x-8 lg:border-0 lg:p-0 lg:dark:bg-gray-900",
+            xl: "xl:mt-0 xl:flex-row xl:space-x-8 xl:border-0 lg:p-0 xl:dark:bg-gray-900",
+            xxl: "2xl:mt-0 2xl:flex-row 2xl:space-x-8 2xl:border-0 2xl:p-0 2xl:dark:bg-gray-900"
+        }
+    }
+});
+export const navbrand = tv({
+    slots: {
+        base: "flex items-center space-x-3 rtl:space-x-reverse",
+        span: "self-center whitespace-nowrap text-2xl font-semibold text-primary-900 dark:text-white sm:text-3xl"
+    }
+});
+export const navLi = tv({
+    slots: {
+        base: "list-none",
+        link: "block py-2 pl-3 pr-4 text-gray-900 rounded-sm hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white"
+    },
+    variants: {
+        active: {
+            true: {
+                link: "bg-primary-700 text-white"
+            }
+        },
+        breakPoint: {
+            md: {
+                link: "md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 md:dark:hover:text-primary-500 md:dark:hover:bg-transparent"
+            },
+            lg: {
+                link: "lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 lg:dark:hover:text-primary-500 lg:dark:hover:bg-transparent"
+            },
+            xl: {
+                link: "xl:hover:bg-transparent xl:border-0 xl:hover:text-primary-700 xl:p-0 xl:dark:hover:text-primary-500 xl:dark:hover:bg-transparent"
+            },
+            xxl: {
+                link: "2xl:hover:bg-transparent 2xl:border-0 2xl:hover:text-primary-700 2xl:p-0 2xl:dark:hover:text-primary-500 2xl:dark:hover:bg-transparent"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            active: true,
+            breakPoint: "md",
+            class: {
+                link: "md:bg-transparent md:text-primary-700 md:p-0 md:dark:text-primary-500"
+            }
+        },
+        {
+            active: true,
+            breakPoint: "lg",
+            class: {
+                link: "lg:bg-transparent lg:text-primary-700 lg:p-0 lg:dark:text-primary-500"
+            }
+        },
+        {
+            active: true,
+            breakPoint: "xl",
+            class: {
+                link: "xl:bg-transparent xl:text-primary-700 xl:p-0 xl:dark:text-primary-500"
+            }
+        },
+        {
+            active: true,
+            breakPoint: "xxl",
+            class: {
+                link: "2xl:bg-transparent 2xl:text-primary-700 2xl:p-0 2xl:dark:text-primary-500"
+            }
+        }
+    ],
+    defaultVariants: {
+        breakPoint: "md",
+        active: false
+    }
+});
+export const navcontainer = tv({
+    base: "mx-auto flex flex-wrap justify-between items-center",
+    variants: {
+        fluid: {
+            true: "w-full",
+            false: "container"
+        }
+    }
+});
+export const navhamburger = tv({
+    base: "inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+    variants: {
+        breakPoint: {
+            md: "md:hidden",
+            lg: "lg:hidden",
+            xl: "xl:hidden",
+            xxl: "2xl:hidden"
+        }
+    }
+});

package/dist/navbar/type.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { NavbarType } from "../types";
+interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    navSlotBlock?: Snippet;
+    navSlotHiddenTop?: Snippet;
+    navSlotHiddenBottom?: Snippet;
+    toggleNav?: () => void;
+    closeNav?: () => void;
+    navStatus?: boolean | undefined;
+    fluid?: boolean;
+    brand?: Snippet;
+    hamburgerMenu?: boolean;
+    breakPoint?: NavbarType["breakPoint"];
+    navClass?: string;
+    divClass?: string;
+    btnClass?: string;
+    div2Class?: string;
+    nonActiveClass?: string;
+    activeClass?: string;
+}
+interface NavBrandProps extends HTMLAnchorAttributes {
+    children?: Snippet;
+    siteName?: string | undefined | null;
+    closeNav?: () => void;
+    aClass?: string;
+    spanClass?: string;
+}
+interface NavUlProps extends HTMLAttributes<HTMLUListElement> {
+    children: Snippet;
+    class?: string;
+    activeUrl?: string;
+}
+interface NavLiProps extends HTMLAnchorAttributes {
+    children: Snippet;
+    closeNav?: () => void;
+    href?: string;
+    aClass?: string;
+    class?: string;
+}
+interface NavHamburgerProps extends HTMLAttributes<HTMLButtonElement> {
+    toggleNav: () => void;
+}
+export { type NavbarProps, type NavBrandProps, type NavLiProps, type NavUlProps, type NavHamburgerProps };

package/dist/navbar/type.js

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

package/dist/pagination/Pagination.svelte

@@ -1,43 +1,47 @@
-<script>import { twMerge } from "tailwind-merge";
-import { createEventDispatcher, setContext } from "svelte";
-import PaginationItem from "./PaginationItem.svelte";
-export let pages = [];
-export let activeClass = "text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white";
-export let normalClass = "text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white";
-export let ulClass = "inline-flex -space-x-px rtl:space-x-reverse items-center";
-export let table = false;
-export let large = false;
-export let ariaLabel = "Page navigation";
-const dispatch = createEventDispatcher();
-setContext("group", true);
-setContext("table", table);
-const previous = () => {
-  dispatch("previous");
-};
-const next = () => {
-  dispatch("next");
-};
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { type PaginationProps as Props, pagination, PaginationItem } from ".";
+
+  let { pages = [], previous, next, prevContent, nextContent, table, size, ariaLabel, ...restProps }: Props = $props();
+
+  setContext("group", true);
+  setContext("table", table);
+  setContext("size", size);
+
+  const paginationClass = $derived(pagination({ table, size }));
 </script>
 
 <nav aria-label={ariaLabel}>
-  <ul class={twMerge(ulClass, table && 'divide-x rtl:divide-x-reverse dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
-    <li>
-      <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-s-lg'}>
-        <slot name="prev">Previous</slot>
-      </PaginationItem>
-    </li>
-    {#each pages as { name, href, active }}
-      <li>
-        <PaginationItem {large} {active} {activeClass} {normalClass} {href} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+  <ul class={paginationClass}>
+    {#if typeof previous === "function"}
+      <li {...restProps}>
+        <PaginationItem {size} onclick={() => previous()} class={table ? "rounded-none rounded-l" : "rounded-none  rounded-s-lg"}>
+          {#if prevContent}
+            {@render prevContent()}
+          {:else}
+            Previous
+          {/if}
+        </PaginationItem>
+      </li>
+    {/if}
+    {#each pages as { name, href, active, size }}
+      <li {...restProps}>
+        <PaginationItem {size} {active} {href}>
           {name}
         </PaginationItem>
       </li>
     {/each}
-    <li>
-      <PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-e-lg'}>
-        <slot name="next">Next</slot>
-      </PaginationItem>
-    </li>
+    {#if typeof next === "function"}
+      <li {...restProps}>
+        <PaginationItem {size} onclick={() => next()} class={table ? "rounded-none rounded-r" : "rounded-none rounded-e-lg"}>
+          {#if nextContent}
+            {@render nextContent()}
+          {:else}
+            Next
+          {/if}
+        </PaginationItem>
+      </li>
+    {/if}
   </ul>
 </nav>
 
@@ -45,11 +49,12 @@ const next = () => {
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let pages: $$Props['pages'] = [];
-@prop export let activeClass: $$Props['activeClass'] = 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white';
-@prop export let normalClass: $$Props['normalClass'] = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white';
-@prop export let ulClass: $$Props['ulClass'] = 'inline-flex -space-x-px rtl:space-x-reverse items-center';
-@prop export let table: NonNullable<$$Props['table']> = false;
-@prop export let large: $$Props['large'] = false;
-@prop export let ariaLabel: $$Props['ariaLabel'] = 'Page navigation';
+@props: pages: any = [];
+@props:previous: any;
+@props:next: any;
+@props:prevContent: any;
+@props:nextContent: any;
+@props:table: any;
+@props:size: any;
+@props:ariaLabel: any;
 -->