flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/banner/theme.d.ts

@@ -0,0 +1,317 @@
+declare const banner: import("tailwind-variants").TVReturnType<{
+    position: {
+        static: {
+            base: string;
+        };
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        relative: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+    bannerType: {
+        default: {
+            base: string;
+            insideDiv: string;
+        };
+        bottom: {
+            base: string;
+            insideDiv: string;
+        };
+        cta: {
+            base: string;
+            insideDiv: string;
+        };
+        signup: {
+            base: string;
+            insideDiv: string;
+        };
+        info: {
+            base: string;
+            insideDiv: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    insideDiv: string;
+}, undefined, {
+    position: {
+        static: {
+            base: string;
+        };
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        relative: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+    bannerType: {
+        default: {
+            base: string;
+            insideDiv: string;
+        };
+        bottom: {
+            base: string;
+            insideDiv: string;
+        };
+        cta: {
+            base: string;
+            insideDiv: string;
+        };
+        signup: {
+            base: string;
+            insideDiv: string;
+        };
+        info: {
+            base: string;
+            insideDiv: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    insideDiv: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        static: {
+            base: string;
+        };
+        fixed: {
+            base: string;
+        };
+        absolute: {
+            base: string;
+        };
+        relative: {
+            base: string;
+        };
+        sticky: {
+            base: string;
+        };
+    };
+    bannerType: {
+        default: {
+            base: string;
+            insideDiv: string;
+        };
+        bottom: {
+            base: string;
+            insideDiv: string;
+        };
+        cta: {
+            base: string;
+            insideDiv: string;
+        };
+        signup: {
+            base: string;
+            insideDiv: string;
+        };
+        info: {
+            base: string;
+            insideDiv: string;
+        };
+    };
+    color: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        gray: {
+            base: string;
+        };
+        red: {
+            base: string;
+        };
+        orange: {
+            base: string;
+        };
+        amber: {
+            base: string;
+        };
+        yellow: {
+            base: string;
+        };
+        lime: {
+            base: string;
+        };
+        green: {
+            base: string;
+        };
+        emerald: {
+            base: string;
+        };
+        teal: {
+            base: string;
+        };
+        cyan: {
+            base: string;
+        };
+        sky: {
+            base: string;
+        };
+        blue: {
+            base: string;
+        };
+        indigo: {
+            base: string;
+        };
+        violet: {
+            base: string;
+        };
+        purple: {
+            base: string;
+        };
+        fuchsia: {
+            base: string;
+        };
+        pink: {
+            base: string;
+        };
+        rose: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    insideDiv: string;
+}, undefined, unknown, unknown, undefined>>;
+export { banner };

package/dist/banner/theme.js

@@ -0,0 +1,68 @@
+import { tv } from "tailwind-variants";
+const banner = tv({
+    slots: {
+        base: "z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600",
+        insideDiv: "flex items-center"
+    },
+    variants: {
+        position: {
+            // "static" | "fixed" | "absolute" | "relative" | "sticky"
+            static: { base: "static" },
+            fixed: { base: "fixed" },
+            absolute: { base: "absolute" },
+            relative: { base: "relative" },
+            sticky: { base: "sticky" }
+        },
+        bannerType: {
+            // "default" | "bottom" | "cta" | "signup" | "info"
+            default: {
+                base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
+                insideDiv: "mx-auto"
+            },
+            bottom: {
+                base: "bottom-0 start-0 w-full border-t border-gray-200 bg-gray-50",
+                insideDiv: "mx-auto"
+            },
+            cta: {
+                base: "flex-col md:flex-row w-[calc(100%-2rem)] -translate-x-1/2 rtl:translate-x-1/2 bg-white border border-gray-100 rounded-lg shadow-xs lg:max-w-7xl start-1/2 top-6",
+                insideDiv: "flex-col items-start mb-3 me-4 md:items-center md:flex-row md:mb-0"
+            },
+            signup: {
+                base: "top-0 start-0 w-full border-b border-gray-200 bg-gray-50",
+                insideDiv: "shrink-0 w-full mx-auto sm:w-auto"
+            },
+            info: {
+                base: "top-0 start-0 flex-col w-full border-b border-gray-200 md:flex-row bg-gray-50",
+                insideDiv: "shrink-0"
+            }
+        },
+        color: {
+            // 'primary' secondary, | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: { base: "bg-primary-50 dark:bg-primary-900" },
+            secondary: { base: "bg-secondary-50 dark:bg-secondary-900" },
+            gray: { base: "bg-gray-50 dark:bg-gray-700" },
+            red: { base: "bg-red-50 dark:bg-red-900" },
+            orange: { base: "bg-orange-50 dark:bg-orange-900" },
+            amber: { base: "bg-amber-50 dark:bg-amber-900" },
+            yellow: { base: "bg-yellow-50 dark:bg-yellow-900" },
+            lime: { base: "bg-lime-50 dark:bg-lime-900" },
+            green: { base: "bg-green-50 dark:bg-green-900" },
+            emerald: { base: "bg-emerald-50 dark:bg-emerald-900" },
+            teal: { base: "bg-teal-50 dark:bg-teal-900" },
+            cyan: { base: "bg-cyan-50 dark:bg-cyan-900" },
+            sky: { base: "bg-sky-50 dark:bg-sky-900" },
+            blue: { base: "bg-blue-50 dark:bg-blue-900" },
+            indigo: { base: "bg-indigo-50 dark:bg-indigo-900" },
+            violet: { base: "bg-violet-50 dark:bg-violet-900" },
+            purple: { base: "bg-purple-50 dark:bg-purple-900" },
+            fuchsia: { base: "bg-fuchsia-50 dark:bg-fuchsia-900" },
+            pink: { base: "bg-pink-50 dark:bg-pink-900" },
+            rose: { base: "bg-rose-50 dark:bg-rose-900" }
+        }
+    },
+    defaultVariants: {
+        position: "sticky",
+        bannerType: "default"
+    }
+});
+export { banner };

package/dist/banner/type.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { TransitionFunc } from "../types";
+import type { HTMLAttributes } from "svelte/elements";
+type ColorVariants = "primary" | "secondary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+type TypeVariants = "default" | "bottom" | "cta" | "signup" | "info";
+type PositionVariants = "static" | "fixed" | "absolute" | "relative" | "sticky";
+interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+    header?: Snippet;
+    bannerStatus?: boolean;
+    position?: PositionVariants;
+    dismissable?: boolean;
+    color?: ColorVariants;
+    bannerType?: TypeVariants;
+    divClass?: string;
+    innerClass?: string;
+    transition?: TransitionFunc;
+    params?: object;
+}
+export { type BannerProps };

package/dist/banner/type.js

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

package/dist/bottom-navigation/BottomNav.svelte

@@ -1,54 +1,35 @@
-<script context="module"></script>
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { twMerge } from "tailwind-merge";
+  import { writable } from "svelte/store";
+  import { type BottomNavProps as Props, type BottomNavContextType, bottomNav } from "./index";
 
-<script>import { setContext } from "svelte";
-import { writable } from "svelte/store";
-import { twMerge } from "tailwind-merge";
-export let activeUrl = "";
-export let position = "fixed";
-export let navType = "default";
-export let outerClass = "w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600";
-export let innerClass = "grid h-full max-w-lg mx-auto";
-export let activeClass = "text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900";
-export let classActive = "";
-export let classOuter = "";
-export let classInner = "";
-let activeCls = "";
-const activeUrlStore = writable("");
-activeCls = twMerge(activeClass, classActive);
-setContext("navType", navType);
-setContext("bottomNavType", { activeClass: activeCls });
-$: {
-  activeUrlStore.set(activeUrl);
-}
-setContext("activeUrl", activeUrlStore);
-const outerDivClasses = {
-  default: "bottom-0 start-0 h-16 bg-white border-t",
-  border: "bottom-0 start-0 h-16 bg-white border-t",
-  application: "h-16 max-w-lg -translate-x-1/2 rtl:translate-x-1/2 bg-white border rounded-full bottom-4 start-1/2",
-  pagination: "bottom-0 h-16 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2",
-  group: "bottom-0 -translate-x-1/2 rtl:translate-x-1/2 bg-white border-t start-1/2",
-  card: "bottom-0 start-0 h-16 bg-white border-t",
-  meeting: "bottom-0 start-0 grid h-16 grid-cols-1 px-8 bg-white border-t md:grid-cols-3",
-  video: "bottom-0 start-0 grid h-24 grid-cols-1 px-8 bg-white border-t md:grid-cols-3"
-};
-const innerDivClasses = {
-  default: "",
-  border: "",
-  application: "",
-  pagination: "",
-  group: "",
-  card: "",
-  meeting: "flex items-center justify-center mx-auto",
-  video: "flex items-center w-full"
-};
-$: outerCls = twMerge(position, outerClass, outerDivClasses[navType], classOuter);
-$: innerCls = twMerge(innerClass, innerDivClasses[navType], classInner);
+  let { children, header, position = "fixed", navType = "default", outerClass, innerClass, activeClass, activeUrl = "", ...restProps }: Props = $props();
+
+  const activeCls = twMerge("text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900", activeClass);
+
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+  setContext("navType", navType);
+  setContext<BottomNavContextType>("bottomNavType", { activeClass: activeCls });
+
+  // $inspect('position: ', position);
+  const { outer, inner } = bottomNav({ position, navType });
+  const outerCls = $derived(outer({ class: outerClass }));
+  const innerCls = $derived(inner({ class: innerClass }));
+
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
 </script>
 
-<div {...$$restProps} class={outerCls}>
-  <slot name="header" />
+<div {...restProps} class={outerCls}>
+  {#if header}
+    {@render header()}
+  {/if}
+
   <div class={innerCls}>
-    <slot />
+    {@render children()}
   </div>
 </div>
 
@@ -56,13 +37,12 @@ $: innerCls = twMerge(innerClass, innerDivClasses[navType], classInner);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activeUrl: $$Props['activeUrl'] = '';
-@prop export let position: $$Props['position'] = 'fixed';
-@prop export let navType: NonNullable<$$Props['navType']> = 'default';
-@prop export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
-@prop export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
-@prop export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
-@prop export let classActive: $$Props['classActive'] = '';
-@prop export let classOuter: $$Props['classOuter'] = '';
-@prop export let classInner: $$Props['classInner'] = '';
+@props: children: any;
+@props:header: any;
+@props:position: any = "fixed";
+@props:navType: any = "default";
+@props:outerClass: any;
+@props:innerClass: any;
+@props:activeClass: any;
+@props:activeUrl: any = "";
 -->

package/dist/bottom-navigation/BottomNav.svelte.d.ts

@@ -1,46 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-export type BottomNavType = {
-    activeClass: string;
-    btnClass?: string;
-    spanClass?: string;
-};
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        activeUrl: string;
-        position?: "static" | "fixed" | "absolute" | "relative" | "sticky";
-        navType?: "default" | "border" | "application" | "pagination" | "group" | "card" | "meeting" | "video";
-        outerClass?: string;
-        innerClass?: string;
-        activeClass?: string;
-        classActive?: string;
-        classOuter?: string;
-        classInner?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        header: {};
-        default: {};
-    };
+    slots: {};
 };
-export type BottomNavProps = typeof __propDef.props;
+type BottomNavProps_ = typeof __propDef.props;
+export { BottomNavProps_ as BottomNavProps };
 export type BottomNavEvents = typeof __propDef.events;
 export type BottomNavSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activeUrl: $$Props['activeUrl'] = '';
- * @prop export let position: $$Props['position'] = 'fixed';
- * @prop export let navType: NonNullable<$$Props['navType']> = 'default';
- * @prop export let outerClass: $$Props['outerClass'] = 'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600';
- * @prop export let innerClass: $$Props['innerClass'] = 'grid h-full max-w-lg mx-auto';
- * @prop export let activeClass: $$Props['activeClass'] = 'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900';
- * @prop export let classActive: $$Props['classActive'] = '';
- * @prop export let classOuter: $$Props['classOuter'] = '';
- * @prop export let classInner: $$Props['classInner'] = '';
+ * @props: children: any;
+ * @props:header: any;
+ * @props:position: any = "fixed";
+ * @props:navType: any = "default";
+ * @props:outerClass: any;
+ * @props:innerClass: any;
+ * @props:activeClass: any;
+ * @props:activeUrl: any = "";
  */
-export default class BottomNav extends SvelteComponentTyped<BottomNavProps, BottomNavEvents, BottomNavSlots> {
+export default class BottomNav extends SvelteComponentTyped<BottomNavProps_, BottomNavEvents, BottomNavSlots> {
 }
-export {};

package/dist/bottom-navigation/BottomNavHeader.svelte

@@ -1,13 +1,13 @@
-<script>import { twMerge } from "tailwind-merge";
-export let outerClass = "w-full";
-export let innerClass = "grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600";
-export let classOuter = "";
-export let classInner = "";
+<script lang="ts">
+  import { type BottomNavHeaderProps as Props, bottomnavheader } from ".";
+
+  let { children, outerClass, innerClass, ...restProps }: Props = $props();
+  const { innerDiv, outerDiv } = $derived(bottomnavheader());
 </script>
 
-<div {...$$restProps} class={twMerge(outerClass, classOuter)} >
-  <div class={twMerge(innerClass, classInner)} role="group">
-    <slot />
+<div {...restProps} class={outerDiv({ class: outerClass })}>
+  <div class={innerDiv({ class: innerClass })} role="group">
+    {@render children()}
   </div>
 </div>
 
@@ -15,8 +15,7 @@ export let classInner = "";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let outerClass: $$Props['outerClass'] = 'w-full';
-@prop export let innerClass: $$Props['innerClass'] = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
-@prop export let classOuter: $$Props['classOuter'] = '';
-@prop export let classInner: $$Props['classInner'] = '';
+@props: children: any;
+@props:outerClass: any;
+@props:innerClass: any;
 -->

package/dist/bottom-navigation/BottomNavHeader.svelte.d.ts

@@ -1,30 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        outerClass?: string;
-        innerClass?: string;
-        classOuter?: string;
-        classInner?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type BottomNavHeaderProps = typeof __propDef.props;
+type BottomNavHeaderProps_ = typeof __propDef.props;
+export { BottomNavHeaderProps_ as BottomNavHeaderProps };
 export type BottomNavHeaderEvents = typeof __propDef.events;
 export type BottomNavHeaderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let outerClass: $$Props['outerClass'] = 'w-full';
- * @prop export let innerClass: $$Props['innerClass'] = 'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600';
- * @prop export let classOuter: $$Props['classOuter'] = '';
- * @prop export let classInner: $$Props['classInner'] = '';
+ * @props: children: any;
+ * @props:outerClass: any;
+ * @props:innerClass: any;
  */
-export default class BottomNavHeader extends SvelteComponentTyped<BottomNavHeaderProps, BottomNavHeaderEvents, BottomNavHeaderSlots> {
+export default class BottomNavHeader extends SvelteComponentTyped<BottomNavHeaderProps_, BottomNavHeaderEvents, BottomNavHeaderSlots> {
 }
-export {};

package/dist/bottom-navigation/BottomNavHeaderItem.svelte

@@ -1,12 +1,10 @@
-<script>import { twMerge } from "tailwind-merge";
-export let itemName = "";
-export let active = false;
-export let defaultClass = "px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg";
-export let activeClass = "px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg";
-$: btnClass = active ? activeClass : defaultClass;
+<script lang="ts">
+  import { type BottomNavHeaderItemProps as Props, bottomnavheaderitem } from ".";
+  let { itemName, active, class: className, ...restProps }: Props = $props();
+  let base = $derived(bottomnavheaderitem({ active, className }));
 </script>
 
-<button class={twMerge(btnClass, $$props.class)} {...$$restProps} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
+<button {...restProps} class={base}>
   {itemName}
 </button>
 
@@ -14,8 +12,7 @@ $: btnClass = active ? activeClass : defaultClass;
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let itemName: $$Props['itemName'] = '';
-@prop export let active: $$Props['active'] = false;
-@prop export let defaultClass: $$Props['defaultClass'] = 'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg';
-@prop export let activeClass: $$Props['activeClass'] = 'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg';
+@props: itemName: any;
+@props:active: any;
+@props:class: string;
 -->