flowbite-svelte 0.48.4 → 1.0.0-next.2

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

@@ -1,37 +1,21 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLButtonAttributes & {
-        itemName: string;
-        active: boolean;
-        defaultClass: string;
-        activeClass: string;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type BottomNavHeaderItemProps = typeof __propDef.props;
+type BottomNavHeaderItemProps_ = typeof __propDef.props;
+export { BottomNavHeaderItemProps_ as BottomNavHeaderItemProps };
 export type BottomNavHeaderItemEvents = typeof __propDef.events;
 export type BottomNavHeaderItemSlots = typeof __propDef.slots;
 /**
  * [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;
  */
-export default class BottomNavHeaderItem extends SvelteComponentTyped<BottomNavHeaderItemProps, BottomNavHeaderItemEvents, BottomNavHeaderItemSlots> {
+export default class BottomNavHeaderItem extends SvelteComponentTyped<BottomNavHeaderItemProps_, BottomNavHeaderItemEvents, BottomNavHeaderItemSlots> {
 }
-export {};

package/dist/bottom-navigation/BottomNavItem.svelte

@@ -1,63 +1,78 @@
-<script>import { getContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-export let btnName = "";
-export let appBtnPosition = "middle";
-export let activeClass = void 0;
-export let href = "";
-export let exact = true;
-export let spanClass = "";
-const navType = getContext("navType");
-const context = getContext("bottomNavType") ?? {};
-const activeUrlStore = getContext("activeUrl");
-let navUrl = "";
-activeUrlStore.subscribe((value) => {
-  navUrl = value;
-});
-$: active = navUrl && exact ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
-const btnClasses = {
-  default: "inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  border: "inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x text-gray-500 dark:text-gray-400  hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600",
-  application: "",
-  pagination: "inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  group: "inline-flex flex-col items-center justify-center p-4 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  card: "inline-flex flex-col items-center justify-center px-5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  meeting: "",
-  video: ""
-};
-const spanClasses = {
-  default: "text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500",
-  border: "text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500",
-  application: "sr-only",
-  pagination: "sr-only",
-  group: "sr-only",
-  card: "text-sm text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500",
-  meeting: "",
-  video: ""
-};
-const appBtnClasses = {
-  left: "inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  middle: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
-  right: "inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group"
-};
-let btnClass;
-$: btnClass = twMerge(btnClasses[navType], appBtnClasses[appBtnPosition], active && (activeClass ?? context.activeClass), $$props.btnClass);
-let spanCls;
-$: spanCls = twMerge(spanClasses[navType], active && (activeClass ?? context.activeClass), spanClass);
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import { type BottomNavItemProps as Props, type BottomNavContextType, type BottomNavVariantType, bottomNavItem } from "./index";
+  import { twMerge } from "tailwind-merge";
+
+  let { children, btnName, appBtnPosition = "middle", target, activeClass, href = "", btnClass, spanClass, ...restProps }: Props = $props();
+
+  const navType: BottomNavVariantType = getContext("navType");
+  const context = getContext<BottomNavContextType>("bottomNavType") ?? {};
+
+  let active: boolean = $state(false);
+
+  const activeUrlStore = getContext("activeUrl") as { subscribe: (callback: (value: string) => void) => void };
+
+  let navUrl = $state("");
+  activeUrlStore.subscribe((value) => {
+    navUrl = value;
+  });
+
+  const { base, span } = bottomNavItem({ navType, appBtnPosition });
+
+  $effect(() => {
+    active = navUrl ? href === navUrl : navUrl ? navUrl.startsWith(href) : false;
+  });
+
+  function getCommonClass() {
+    return twMerge(base({ class: btnClass }), active && (activeClass ?? context.activeClass));
+  }
+
+  function getSpanClass() {
+    return twMerge(span({ class: spanClass }), active && (activeClass ?? context.activeClass));
+  }
+
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  const commonProps: Record<string, any> = $derived({
+    "aria-label": btnName,
+    class: getCommonClass(),
+    ...restProps
+  });
+
+  const anchorProps: HTMLAnchorAttributes = $derived({
+    ...commonProps,
+    href,
+    target
+  });
+
+  const buttonProps: HTMLButtonAttributes = $derived({
+    ...commonProps,
+    type: "button" as const
+  });
 </script>
 
-<svelte:element this={href ? 'a' : 'button'} aria-label={btnName} {href} role={href ? 'link' : 'button'} {...$$restProps} class={btnClass} on:click on:change on:keydown on:keyup on:focus on:blur on:mouseenter on:mouseleave>
-  <slot />
-  <span class={spanCls}>{btnName}</span>
-</svelte:element>
+{#if href}
+  <a {...anchorProps}>
+    {@render children()}
+    <span class={getSpanClass()}>{btnName}</span>
+  </a>
+{:else}
+  <button {...buttonProps}>
+    {@render children()}
+    <span class={getSpanClass()}>{btnName}</span>
+  </button>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnName: $$Props['btnName'] = '';
-@prop export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
-@prop export let activeClass: $$Props['activeClass'] = undefined;
-@prop export let href: string = '';
-@prop export let exact: $$Props['exact'] = true;
-@prop export let spanClass: $$Props['spanClass'] = '';
+@props: children: any;
+@props:btnName: any;
+@props:appBtnPosition: any = "middle";
+@props:target: any;
+@props:activeClass: any;
+@props:href: any = "";
+@props:btnClass: any;
+@props:spanClass: any;
 -->

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

@@ -1,52 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: ({
-        btnName?: string;
-        appBtnPosition?: "left" | "middle" | "right";
-        activeClass?: string;
-        exact?: boolean;
-        spanClass?: string;
-    } & Omit<HTMLAnchorAttributes, "type"> & {
-        href?: string | undefined;
-    }) | ({
-        btnName?: string;
-        appBtnPosition?: "left" | "middle" | "right";
-        activeClass?: string;
-        exact?: boolean;
-        spanClass?: string;
-    } & HTMLButtonAttributes & {
-        disabled?: HTMLButtonAttributes["disabled"];
-    });
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type BottomNavItemProps = typeof __propDef.props;
+type BottomNavItemProps_ = typeof __propDef.props;
+export { BottomNavItemProps_ as BottomNavItemProps };
 export type BottomNavItemEvents = typeof __propDef.events;
 export type BottomNavItemSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnName: $$Props['btnName'] = '';
- * @prop export let appBtnPosition: NonNullable<$$Props['appBtnPosition']> = 'middle';
- * @prop export let activeClass: $$Props['activeClass'] = undefined;
- * @prop export let href: string = '';
- * @prop export let exact: $$Props['exact'] = true;
- * @prop export let spanClass: $$Props['spanClass'] = '';
+ * @props: children: any;
+ * @props:btnName: any;
+ * @props:appBtnPosition: any = "middle";
+ * @props:target: any;
+ * @props:activeClass: any;
+ * @props:href: any = "";
+ * @props:btnClass: any;
+ * @props:spanClass: any;
  */
-export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps, BottomNavItemEvents, BottomNavItemSlots> {
+export default class BottomNavItem extends SvelteComponentTyped<BottomNavItemProps_, BottomNavItemEvents, BottomNavItemSlots> {
 }
-export {};

package/dist/bottom-navigation/index.d.ts

@@ -0,0 +1,7 @@
+import type { BottomNavProps, BottomNavItemProps, BottomNavContextType, BottomNavVariantType, BottomNavHeaderProps, BottomNavHeaderItemProps } from "./type";
+import BottomNav from "./BottomNav.svelte";
+import BottomNavItem from "./BottomNavItem.svelte";
+import BottomNavHeaderItem from "./BottomNavHeaderItem.svelte";
+import BottomNavHeader from "./BottomNavHeader.svelte";
+import { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from "./theme";
+export { BottomNav, BottomNavItem, bottomNav, bottomNavItem, BottomNavHeader, bottomnavheader, BottomNavHeaderItem, bottomnavheaderitem, type BottomNavProps, type BottomNavItemProps, type BottomNavContextType, type BottomNavVariantType, type BottomNavHeaderProps, type BottomNavHeaderItemProps };

package/dist/bottom-navigation/index.js

@@ -0,0 +1,6 @@
+import BottomNav from "./BottomNav.svelte";
+import BottomNavItem from "./BottomNavItem.svelte";
+import BottomNavHeaderItem from "./BottomNavHeaderItem.svelte";
+import BottomNavHeader from "./BottomNavHeader.svelte";
+import { bottomNav, bottomNavItem, bottomnavheader, bottomnavheaderitem } from "./theme";
+export { BottomNav, BottomNavItem, bottomNav, bottomNavItem, BottomNavHeader, bottomnavheader, BottomNavHeaderItem, bottomnavheaderitem };

package/dist/bottom-navigation/theme.d.ts

@@ -0,0 +1,343 @@
+export declare const bottomNav: import("tailwind-variants").TVReturnType<{
+    position: {
+        static: {
+            outer: string;
+        };
+        fixed: {
+            outer: string;
+        };
+        absolute: {
+            outer: string;
+        };
+        relative: {
+            outer: string;
+        };
+        sticky: {
+            outer: string;
+        };
+    };
+    navType: {
+        default: {
+            outer: string;
+        };
+        border: {
+            outer: string;
+        };
+        application: {
+            outer: string;
+        };
+        pagination: {
+            outer: string;
+        };
+        group: {
+            outer: string;
+        };
+        card: {
+            outer: string;
+        };
+        meeting: {
+            outer: string;
+            inner: string;
+        };
+        video: {
+            outer: string;
+            inner: string;
+        };
+    };
+}, {
+    outer: string;
+    inner: string;
+}, undefined, {
+    position: {
+        static: {
+            outer: string;
+        };
+        fixed: {
+            outer: string;
+        };
+        absolute: {
+            outer: string;
+        };
+        relative: {
+            outer: string;
+        };
+        sticky: {
+            outer: string;
+        };
+    };
+    navType: {
+        default: {
+            outer: string;
+        };
+        border: {
+            outer: string;
+        };
+        application: {
+            outer: string;
+        };
+        pagination: {
+            outer: string;
+        };
+        group: {
+            outer: string;
+        };
+        card: {
+            outer: string;
+        };
+        meeting: {
+            outer: string;
+            inner: string;
+        };
+        video: {
+            outer: string;
+            inner: string;
+        };
+    };
+}, {
+    outer: string;
+    inner: string;
+}, import("tailwind-variants").TVReturnType<{
+    position: {
+        static: {
+            outer: string;
+        };
+        fixed: {
+            outer: string;
+        };
+        absolute: {
+            outer: string;
+        };
+        relative: {
+            outer: string;
+        };
+        sticky: {
+            outer: string;
+        };
+    };
+    navType: {
+        default: {
+            outer: string;
+        };
+        border: {
+            outer: string;
+        };
+        application: {
+            outer: string;
+        };
+        pagination: {
+            outer: string;
+        };
+        group: {
+            outer: string;
+        };
+        card: {
+            outer: string;
+        };
+        meeting: {
+            outer: string;
+            inner: string;
+        };
+        video: {
+            outer: string;
+            inner: string;
+        };
+    };
+}, {
+    outer: string;
+    inner: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const bottomNavItem: import("tailwind-variants").TVReturnType<{
+    navType: {
+        default: {
+            base: string;
+            span: string;
+        };
+        border: {
+            base: string;
+            span: string;
+        };
+        application: {
+            base: string;
+            span: string;
+        };
+        pagination: {
+            base: string;
+            span: string;
+        };
+        group: {
+            base: string;
+            span: string;
+        };
+        card: {
+            base: string;
+            span: string;
+        };
+        meeting: {
+            base: string;
+            span: string;
+        };
+        video: {
+            base: string;
+            span: string;
+        };
+    };
+    appBtnPosition: {
+        left: {
+            base: string;
+        };
+        middle: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, undefined, {
+    navType: {
+        default: {
+            base: string;
+            span: string;
+        };
+        border: {
+            base: string;
+            span: string;
+        };
+        application: {
+            base: string;
+            span: string;
+        };
+        pagination: {
+            base: string;
+            span: string;
+        };
+        group: {
+            base: string;
+            span: string;
+        };
+        card: {
+            base: string;
+            span: string;
+        };
+        meeting: {
+            base: string;
+            span: string;
+        };
+        video: {
+            base: string;
+            span: string;
+        };
+    };
+    appBtnPosition: {
+        left: {
+            base: string;
+        };
+        middle: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, import("tailwind-variants").TVReturnType<{
+    navType: {
+        default: {
+            base: string;
+            span: string;
+        };
+        border: {
+            base: string;
+            span: string;
+        };
+        application: {
+            base: string;
+            span: string;
+        };
+        pagination: {
+            base: string;
+            span: string;
+        };
+        group: {
+            base: string;
+            span: string;
+        };
+        card: {
+            base: string;
+            span: string;
+        };
+        meeting: {
+            base: string;
+            span: string;
+        };
+        video: {
+            base: string;
+            span: string;
+        };
+    };
+    appBtnPosition: {
+        left: {
+            base: string;
+        };
+        middle: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    span: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const bottomnavheader: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    innerDiv: string;
+    outerDiv: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            innerDiv?: import("tailwind-merge").ClassNameValue;
+            outerDiv?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    innerDiv: string;
+    outerDiv: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    innerDiv: string;
+    outerDiv: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const bottomnavheaderitem: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", {
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+        false: string;
+    };
+}, undefined, "px-5 py-1.5 text-xs font-medium rounded-lg", unknown, unknown, undefined>>;