flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/nav/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-none 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 dark:text-white",
+        inactiveLink: "block py-2 px-3 text-gray-900 rounded 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-screen-xl",
+                toggleButton: "md:hidden",
+                menuContainer: "md:block md:w-auto"
+            },
+            lg: {
+                container: "max-w-screen-xl",
+                toggleButton: "lg:hidden",
+                menuContainer: "lg:block lg:w-auto"
+            },
+            xl: {
+                container: "max-w-screen-xl",
+                toggleButton: "xl:hidden",
+                menuContainer: "xl:block xl:w-auto"
+            },
+            xxl: {
+                container: "w-full",
+                toggleButton: "2xl:hidden",
+                menuContainer: "2xl:block 2xl:w-auto"
+            }
+        },
+        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 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-none 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/nav/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/nav/type.js

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

package/dist/pagination/Pagination.svelte

@@ -1,55 +1,60 @@
-<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>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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;
 -->

package/dist/pagination/Pagination.svelte.d.ts

@@ -1,51 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-import type { LinkType } from '../types';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLUListElement> & {
-        pages: LinkType[];
-        activeClass?: string;
-        normalClass?: string;
-        ulClass?: string;
-        table?: boolean;
-        large?: boolean;
-        ariaLabel?: string;
-    };
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-        previous: CustomEvent<any>;
-        next: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        prev: {};
-        next: {};
-    };
-};
-export type PaginationProps = typeof __propDef.props;
-export type PaginationEvents = typeof __propDef.events;
-export type PaginationSlots = typeof __propDef.slots;
+import { type PaginationProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.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;
  */
-export default class Pagination extends SvelteComponentTyped<PaginationProps, PaginationEvents, PaginationSlots> {
-}
-export {};
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/pagination/PaginationItem.svelte

@@ -1,36 +1,35 @@
-<script>import { twMerge } from "tailwind-merge";
-import { getContext } from "svelte";
-export let href = void 0;
-export let active = false;
-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 large = false;
-const group = getContext("group");
-const table = getContext("table");
-let defaultClass;
-$: defaultClass = twMerge(
-  "flex items-center font-medium",
-  large ? "h-10 px-4 text-base" : "h-8 px-3 text-sm",
-  group ? "" : table ? "rounded" : "rounded-lg",
-  // table || 'border border-gray-300 dark:border-gray-700 dark:bg-gray-800',
-  table ? "" : "border",
-  active ? activeClass : normalClass,
-  $$props.class
-);
+<script lang="ts">
+  import { paginationItem, type PaginationItemProps as Props } from ".";
+  import { getContext } from "svelte";
+
+  let { children, size, class: className, href, active, ...restProps }: Props = $props();
+
+  const group = getContext<boolean>("group");
+  const table = getContext<boolean>("table");
+  const paginationClass = $derived(paginationItem({ size, active, group, table, className }));
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<svelte:element this={href ? 'a' : 'button'} {href} class={defaultClass} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover role={href ? 'button' : undefined}>
-  <slot />
-</svelte:element>
+{#if href}
+  <a {href} {...restProps} class={paginationClass}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </a>
+{:else}
+  <button {...restProps} class={paginationClass}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </button>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let href: $$Props['href'] = undefined;
-@prop export let active: $$Props['active'] = false;
-@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 large: $$Props['large'] = false;
+@props: children: any;
+@props:size: any;
+@props:class: string;
+@props:href: any;
+@props:active: any;
 -->

package/dist/pagination/PaginationItem.svelte.d.ts

@@ -1,43 +1,13 @@
-import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        href?: string;
-        active?: boolean;
-        activeClass?: string;
-        normalClass?: string;
-        large?: boolean;
-    } & (HTMLAnchorAttributes | HTMLButtonAttributes);
-    events: {
-        blur: FocusEvent;
-        change: Event;
-        click: MouseEvent;
-        focus: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mouseover: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type PaginationItemProps_ = typeof __propDef.props;
-export { PaginationItemProps_ as PaginationItemProps };
-export type PaginationItemEvents = typeof __propDef.events;
-export type PaginationItemSlots = typeof __propDef.slots;
+import { type PaginationItemProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let href: $$Props['href'] = undefined;
- * @prop export let active: $$Props['active'] = false;
- * @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 large: $$Props['large'] = false;
+ * @props: children: any;
+ * @props:size: any;
+ * @props:class: string;
+ * @props:href: any;
+ * @props:active: any;
  */
-export default class PaginationItem extends SvelteComponentTyped<PaginationItemProps_, PaginationItemEvents, PaginationItemSlots> {
-}
+declare const PaginationItem: import("svelte").Component<Props, {}, "">;
+type PaginationItem = ReturnType<typeof PaginationItem>;
+export default PaginationItem;

package/dist/pagination/index.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationItemProps, PaginationProps, PaginationItemSpecificProps } from "./type";
+import { paginationItem, pagination } from "./theme";
+import Pagination from "./Pagination.svelte";
+import PaginationItem from "./PaginationItem.svelte";
+export { Pagination, PaginationItem, paginationItem, pagination, type PaginationItemProps, type PaginationProps, type PaginationItemSpecificProps };

package/dist/pagination/index.js

@@ -0,0 +1,4 @@
+import { paginationItem, pagination } from "./theme";
+import Pagination from "./Pagination.svelte";
+import PaginationItem from "./PaginationItem.svelte";
+export { Pagination, PaginationItem, paginationItem, pagination };