flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/modal/theme.d.ts

@@ -0,0 +1,486 @@
+export declare const modal: import("tailwind-variants").TVReturnType<{
+    position: {
+        "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, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        "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;
+        };
+    };
+}, {
+    position: {
+        "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;
+        };
+    };
+}>, {
+    position: {
+        "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<{
+    position: {
+        "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, import("tailwind-variants/dist/config").TVConfig<{
+    position: {
+        "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;
+        };
+    };
+}, {
+    position: {
+        "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;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/modal/theme.js

@@ -0,0 +1,48 @@
+import { tv } from "tailwind-variants";
+export const modal = tv({
+    slots: {
+        base: "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex pointer-events-none",
+        div: "flex relative w-full max-h-full",
+        content: "w-full divide-y text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-800 divide-gray-300 dark:divide-gray-800 bg-white dark:bg-gray-800 pointer-events-auto",
+        backdrop: "fixed inset-0 z-50 bg-gray-900 bg-opacity-50 dark:bg-opacity-80 pointer-events-auto",
+        header: "flex justify-between items-center p-4 md:p-5 rounded-t-lg",
+        footer: "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg",
+        body: "p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain",
+        closeBtn: "absolute top-3 end-2.5",
+        h3: "text-xl font-semibold text-gray-900 dark:text-white p-0"
+    },
+    variants: {
+        // position: {
+        //   fixed: { base: 'fixed' },
+        //   absolute: { base: 'absolute' }
+        // },
+        position: {
+            "top-left": { base: "justify-start items-start" },
+            "top-center": { base: "justify-center items-start" },
+            "top-right": { base: "justify-end items-start" },
+            "center-left": { base: "justify-start items-center" },
+            center: { base: "justify-center items-center" },
+            "center-right": { base: "justify-end items-center" },
+            "bottom-left": { base: "justify-start items-end" },
+            "bottom-center": { base: "justify-center items-end" },
+            "bottom-right": { base: "justify-end items-end" },
+            default: { base: "justify-center items-center" }
+        },
+        size: {
+            xs: { div: "max-w-md" },
+            sm: { div: "max-w-lg" },
+            md: { div: "max-w-2xl" },
+            lg: { div: "max-w-4xl" },
+            xl: { div: "max-w-7xl" }
+        },
+        backdrop: {
+            true: { backdrop: "bg-gray-900 bg-opacity-75" }
+        },
+        rounded: {
+            true: { content: "rounded" }
+        },
+        shadow: {
+            true: { content: "shadow-md" }
+        }
+    }
+});

package/dist/modal/type.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TransitionFunc, ParamsType } from "../types";
+type WidthType = "md" | "sm" | "lg" | "xl" | "xs" | undefined;
+type PosisionType = "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | "default" | undefined;
+interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    title?: string;
+    modalStatus: boolean;
+    dismissable?: boolean;
+    closeModal?: () => void;
+    closeBtnClass?: string;
+    h3Class?: string;
+    divClass?: string;
+    headerClass?: string;
+    contentClass?: string;
+    bodyClass?: string;
+    footerClass?: string;
+    outsideClose?: boolean;
+    position?: PosisionType;
+    size?: WidthType;
+    backdrop?: boolean;
+    backdropClass?: string;
+    rounded?: boolean;
+    class?: string;
+    params?: ParamsType;
+    transition?: TransitionFunc;
+}
+export { type ModalProps };

package/dist/modal/type.js

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

package/dist/nav/NavBrand.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { type NavBrandProps as Props, navbrand } from ".";
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+
+  let { children, siteName, closeNav, aClass, spanClass, ...restProps }: Props = $props();
+
+  const context = getContext<navbarType>("navbarContext");
+  closeNav = context.closeNav ?? closeNav;
+
+  const { base, span } = $derived(navbrand());
+</script>
+
+<a href="/" onclick={closeNav} {...restProps} class={base({ class: aClass })}>
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if siteName}
+    <span class={span({ class: spanClass })}>{siteName}</span>
+  {/if}
+</a>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: children: any;
+@props:siteName: any;
+@props:closeNav: any;
+@props:aClass: any;
+@props:spanClass: any;
+-->

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

@@ -0,0 +1,13 @@
+import { type NavBrandProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: children: any;
+ * @props:siteName: any;
+ * @props:closeNav: any;
+ * @props:aClass: any;
+ * @props:spanClass: any;
+ */
+declare const NavBrand: import("svelte").Component<Props, {}, "">;
+type NavBrand = ReturnType<typeof NavBrand>;
+export default NavBrand;

package/dist/nav/NavHamburger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+  import { navhamburger, type NavHamburgerProps as Props } from ".";
+
+  let { toggleNav, class: className, ...restProps }: Props = $props();
+
+  let breakPoint;
+  const context = getContext<navbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+  const toggleButton = $derived(navhamburger({ breakPoint, className }));
+  // const handletoggleNav = () => {
+  //   toggleNav();
+  //   console.log('toggleNav clicked')
+  // }
+</script>
+
+<button onclick={toggleNav} type="button" {...restProps} class={toggleButton}>
+  <span class="sr-only">Open main menu</span>
+  <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+  </svg>
+</button>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: toggleNav: any;
+@props:class: string;
+-->

package/dist/nav/NavHamburger.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type NavHamburgerProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: toggleNav: any;
+ * @props:class: string;
+ */
+declare const NavHamburger: import("svelte").Component<Props, {}, "">;
+type NavHamburger = ReturnType<typeof NavHamburger>;
+export default NavHamburger;

package/dist/nav/NavLi.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { navbarType } from "../types";
+  import { type NavLiProps as Props, navLi } from ".";
+
+  let { closeNav, href, children, aClass, class: className, ...restProps }: Props = $props();
+
+  let breakPoint: navbarType["breakPoint"];
+
+  const context = getContext<navbarType>("navbarContext");
+  breakPoint = context.breakPoint ?? "md";
+  closeNav = context.closeNav ?? closeNav;
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  // let currentUrl = $state();
+  let isActive = $derived(navUrl ? href === navUrl : false);
+  $effect(() => {
+    $inspect("navUrl: ", navUrl);
+  });
+
+  const { base, link } = $derived(navLi({ active: isActive, breakPoint }));
+</script>
+
+<li class={base({ class: className })}>
+  <a {href} onclick={closeNav} {...restProps} aria-current={isActive} class={link({ class: aClass })}>
+    {@render children()}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://preview.flowbite-svelte.com/)
+## Props
+@props: closeNav: any;
+@props:href: any;
+@props:children: any;
+@props:aClass: any;
+@props:class: string;
+-->

package/dist/nav/NavLi.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type NavLiProps as Props } from ".";
+/**
+ * [Go to docs](https://preview.flowbite-svelte.com/)
+ * ## Props
+ * @props: closeNav: any;
+ * @props:href: any;
+ * @props:children: any;
+ * @props:aClass: any;
+ * @props:class: string;
+ */
+declare const NavLi: import("svelte").Component<Props, {}, "">;
+type NavLi = ReturnType<typeof NavLi>;
+export default NavLi;