flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/rating/index.js

@@ -0,0 +1,11 @@
+import AdvancedRating from "./AdvancedRating.svelte";
+import Heart from "./Heart.svelte";
+import Rating from "./Rating.svelte";
+import RatingComment from "./RatingComment.svelte";
+import Review from "./Review.svelte";
+import ScoreRating from "./ScoreRating.svelte";
+import Star from "./Star.svelte";
+import Thumbup from "./Thumbup.svelte";
+import CustomIcon from "./CustomIcon.svelte";
+import { advancedrating, rating, review, scorerating } from "./theme";
+export { AdvancedRating, advancedrating, Heart, Rating, rating, RatingComment, Review, review, ScoreRating, scorerating, Star, Thumbup, CustomIcon };

package/dist/rating/theme.d.ts

@@ -0,0 +1,202 @@
+export declare const advancedrating: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+    div2: string;
+    div3: string;
+    span2: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            span?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            span2?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    span: string;
+    div2: string;
+    div3: string;
+    span2: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    span: string;
+    div2: string;
+    div3: string;
+    span2: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const rating: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    p: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    p: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    p: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const review: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const scorerating: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/rating/theme.js

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const advancedrating = tv({
+    // divClass = 'flex items-center mt-4', spanClass = 'text-sm font-medium text-gray-600 dark:text-gray-500', div2Class = 'mx-4 w-2/4 h-5 bg-gray-200 rounded-sm dark:bg-gray-700', div3Class = 'h-5 bg-yellow-400 rounded-sm', span2Class = 'text-sm font-medium text-gray-600 dark:text-gray-500',
+    slots: {
+        base: "flex items-center mt-4",
+        span: "text-sm font-medium text-gray-600 dark:text-gray-500",
+        div2: "mx-4 w-2/4 h-5 bg-gray-200 rounded-sm dark:bg-gray-700",
+        div3: "h-5 bg-yellow-400 rounded-sm",
+        span2: "text-sm font-medium text-gray-600 dark:text-gray-500"
+    }
+});
+export const rating = tv({
+    slots: {
+        base: "flex items-center",
+        p: "ms-2 text-sm font-bold text-gray-900 dark:text-white"
+    }
+});
+export const review = tv({
+    slots: {
+        article: "md:grid md:grid-cols-3 md:gap-8",
+        div: "mb-6 flex items-center space-x-4 rtl:space-x-reverse",
+        div2: "space-y-1 font-medium dark:text-white",
+        div3: "flex items-center text-sm text-gray-500 dark:text-gray-400",
+        img: "h-10 w-10 rounded-full",
+        ul: "space-y-4 text-sm text-gray-500 dark:text-gray-400",
+        li: "flex items-center"
+    }
+});
+export const scorerating = tv({
+    slots: {
+        desc1: "bg-primary-100 w-8 text-primary-800 text-sm font-semibold inline-flex items-center p-1.5 rounded-sm dark:bg-primary-200 dark:text-primary-800",
+        desc2: "ms-2 font-medium text-gray-900 dark:text-white",
+        desc3: "mx-2 w-1 h-1 mx-2 bg-gray-900 rounded-full dark:bg-gray-500",
+        desc3span: "text-sm w-24 font-medium text-gray-500 dark:text-gray-400",
+        desc3p: "text-sm w-24 font-medium text-gray-500 dark:text-gray-400",
+        link: "ms-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500",
+        bar: "bg-primary-600 h-2.5 rounded-sm dark:bg-primary-500"
+    }
+});

package/dist/rating/type.d.ts

@@ -0,0 +1,108 @@
+import type { Snippet, Component } from "svelte";
+import type { SVGAttributes, HTMLAttributes } from "svelte/elements";
+type RatingItem = {
+    label: string | null | undefined;
+    rating: number;
+};
+interface AdvancedRatingProps {
+    rating?: Snippet;
+    globalText?: Snippet;
+    ratings: RatingItem[];
+    divClass?: string;
+    spanClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    span2Class?: string;
+    unit?: string;
+}
+interface RatingProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    text?: Snippet;
+    size?: number;
+    total?: number;
+    rating?: number;
+    icon?: Component;
+    count?: boolean;
+    pClass?: string;
+}
+interface RatingCommentProps {
+    children: Snippet;
+    evaluation?: Snippet;
+    helpfullink?: string;
+    abuselink?: string;
+    comment: {
+        id?: string;
+        user: {
+            name?: string;
+            img: {
+                src: string | undefined | null;
+                alt?: string;
+            };
+            joined?: string;
+        };
+        total?: number;
+        rating: number;
+        heading?: string;
+        address?: string;
+        datetime?: string;
+    };
+}
+type ReviewType = {
+    name?: string;
+    imgSrc?: string;
+    imgAlt?: string;
+    address?: string;
+    reviewDate?: string;
+    title?: string;
+    rating?: number;
+    item1?: string;
+    item2?: string;
+    item3?: string;
+};
+interface ReviewProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    address?: Snippet;
+    item1?: Snippet;
+    item2?: Snippet;
+    item3?: Snippet;
+    review?: ReviewType;
+    articleClass?: string;
+    divClass?: string;
+    div2Class?: string;
+    div3Class?: string;
+    imgClass?: string;
+    ulClass?: string;
+    liClass?: string;
+}
+interface ScoreRatingProps {
+    ratings?: {
+        label: string | undefined | null;
+        rating: number;
+    }[];
+    ratings2?: {
+        label: string | undefined | null;
+        rating: number;
+    }[];
+    headerLabel?: {
+        desc1?: string;
+        desc2?: string;
+        desc3?: string;
+        link?: {
+            label: string | undefined | null;
+            url: string;
+        };
+    };
+}
+interface RatingIconProps extends SVGAttributes<SVGSVGElement> {
+    fillPercent?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    size?: number;
+    ariaLabel?: string;
+    role?: string;
+    svgClass?: string;
+    iconIndex?: number;
+    groupId?: string;
+    pathd?: string;
+}
+export type { AdvancedRatingProps, RatingProps, RatingCommentProps, ReviewProps, ScoreRatingProps, RatingIconProps };

package/dist/rating/type.js

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

package/dist/sidebar/Sidebar.svelte

@@ -1,32 +1,96 @@
-<script context="module"></script>
-
-<script>import { setContext } from "svelte";
-import { twMerge } from "tailwind-merge";
-import { writable } from "svelte/store";
-export let activeUrl = "";
-export let asideClass = "w-64";
-export let nonActiveClass = "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
-export let activeClass = "flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
-export let ariaLabel = "Sidebar";
-const activeUrlStore = writable("");
-setContext("sidebarContext", { activeClass, nonActiveClass });
-$: {
-  activeUrlStore.set(activeUrl);
-}
-setContext("activeUrl", activeUrlStore);
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { fly } from "svelte/transition";
+  import { writable } from "svelte/store";
+  import { sineIn } from "svelte/easing";
+  import { type SidebarProps as Props, sidebar, type SidebarCtxType } from ".";
+  import clsx from "clsx";
+
+  let { children, isOpen = false, closeSidebar, isSingle = true, breakpoint = "md", position = "fixed", activateClickOutside = true, backdrop = true, backdropClass, transition = fly, params, divClass, ariaLabel, nonActiveClass, activeClass, activeUrl = "", class: className, ...restProps }: Props = $props();
+
+  const breakpointValues = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  };
+
+  let innerWidth: number = $state(-1);
+  let isLargeScreen = $derived(innerWidth >= breakpointValues[breakpoint]);
+
+  const initialPosition = position;
+
+  $effect(() => {
+    // position = isLargeScreen ? "static" : initialPosition;
+  });
+
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+
+  const { base, active, nonactive, div, backdrop: backdropCls } = $derived(sidebar({ isOpen, breakpoint, position, backdrop }));
+
+  let sidebarCtx: SidebarCtxType = {
+    get closeSidebar() {
+      return closeSidebar;
+    },
+    get activeClass() {
+      return active({ class: activeClass });
+    },
+    get nonActiveClass() {
+      return nonactive({ class: nonActiveClass });
+    },
+    isSingle
+  };
+
+  let transitionParams = params ? params : { x: -320, duration: 200, easing: sineIn };
+
+  setContext("sidebarContext", sidebarCtx);
 </script>
 
-<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label={ariaLabel}>
-  <slot />
-</aside>
+<svelte:window bind:innerWidth />
+
+{#if isOpen || isLargeScreen}
+  {#if isOpen}
+    {#if backdrop && activateClickOutside}
+      <div role="presentation" class={backdropCls({ class: backdropClass })} onclick={closeSidebar}></div>
+    {:else if backdrop && !activateClickOutside}
+      <div role="presentation" class={backdropCls({ class: backdropClass })}></div>
+    {:else if !backdrop && activateClickOutside}
+      <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full" onclick={closeSidebar}></div>
+    {:else if !backdrop && !activateClickOutside}
+      <div role="presentation" class="fixed start-0 top-0 z-50 h-full w-full"></div>
+    {/if}
+  {/if}
+  <aside transition:transition={transitionParams} {...restProps} class={base({ class: clsx(className) })} aria-label={ariaLabel}>
+    <div class={div({ class: divClass })}>
+      {@render children()}
+    </div>
+  </aside>
+{/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
-@prop export let asideClass: $$Props['asideClass'] = 'w-64';
-@prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
-@prop export let activeClass: NonNullable<$$Props['activeClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
-@prop export let ariaLabel: $$Props['ariaLabel'] = 'Sidebar';
+@props: children: any;
+@props:isOpen: any = false;
+@props:closeSidebar: any;
+@props:isSingle: any = true;
+@props:breakpoint: any = "md";
+@props:position: any = "fixed";
+@props:activateClickOutside: any = true;
+@props:backdrop: any = true;
+@props:backdropClass: any;
+@props:transition: any = fly;
+@props:params: any;
+@props:divClass: any;
+@props:ariaLabel: any;
+@props:nonActiveClass: any;
+@props:activeClass: any;
+@props:activeUrl: any = "";
+@props:class: string;
 -->

package/dist/sidebar/Sidebar.svelte.d.ts

@@ -1,36 +1,35 @@
 import { SvelteComponentTyped } from "svelte";
-export type SidebarType = {
-    activeClass: string;
-    nonActiveClass: string;
-};
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLElement> & {
-        activeUrl?: string;
-        asideClass?: string;
-        nonActiveClass?: string;
-        activeClass?: string;
-        ariaLabel?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
-export type SidebarProps = typeof __propDef.props;
+type SidebarProps_ = typeof __propDef.props;
+export { SidebarProps_ as SidebarProps };
 export type SidebarEvents = typeof __propDef.events;
 export type SidebarSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let activeUrl: NonNullable<$$Props['activeUrl']> = '';
- * @prop export let asideClass: $$Props['asideClass'] = 'w-64';
- * @prop export let nonActiveClass: NonNullable<$$Props['nonActiveClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
- * @prop export let activeClass: NonNullable<$$Props['activeClass']> = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
- * @prop export let ariaLabel: $$Props['ariaLabel'] = 'Sidebar';
+ * @props: children: any;
+ * @props:isOpen: any = false;
+ * @props:closeSidebar: any;
+ * @props:isSingle: any = true;
+ * @props:breakpoint: any = "md";
+ * @props:position: any = "fixed";
+ * @props:activateClickOutside: any = true;
+ * @props:backdrop: any = true;
+ * @props:backdropClass: any;
+ * @props:transition: any = fly;
+ * @props:params: any;
+ * @props:divClass: any;
+ * @props:ariaLabel: any;
+ * @props:nonActiveClass: any;
+ * @props:activeClass: any;
+ * @props:activeUrl: any = "";
+ * @props:class: string;
  */
-export default class Sidebar extends SvelteComponentTyped<SidebarProps, SidebarEvents, SidebarSlots> {
+export default class Sidebar extends SvelteComponentTyped<SidebarProps_, SidebarEvents, SidebarSlots> {
 }
-export {};

package/dist/sidebar/SidebarBrand.svelte

@@ -1,21 +1,27 @@
-<script>import { twMerge } from "tailwind-merge";
-export let site;
-export let aClass = "flex items-center ps-2.5 mb-5";
-export let imgClass = "h-6 me-3 sm:h-7";
-export let spanClass = "self-center text-xl font-semibold whitespace-nowrap dark:text-white";
+<script lang="ts">
+  import { type SidebarBrandProps as Props, sitebarbrand } from ".";
+
+  let { children, site, imgClass, spanClass, class: className, ...restProps }: Props = $props();
+
+  const { base, img, span } = $derived(sitebarbrand());
 </script>
 
-<a {...$$restProps} href={site.href} class={twMerge(aClass, $$props.class)}>
-  <img src={site.img} class={imgClass} alt={site.name} />
-  <span class={spanClass}>{site.name}</span>
+<a {...restProps} href={site?.href ? site.href : "/"} class={base({ className })}>
+  {#if site}
+    <img src={site.img} class={img({ class: imgClass })} alt={site.name} />
+    <span class={span({ class: spanClass })}>{site.name}</span>
+  {:else if children}
+    {@render children()}
+  {/if}
 </a>
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let site: $$Props['site'];
-@prop export let aClass: $$Props['aClass'] = 'flex items-center ps-2.5 mb-5';
-@prop export let imgClass: $$Props['imgClass'] = 'h-6 me-3 sm:h-7';
-@prop export let spanClass: $$Props['spanClass'] = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+@props: children: any;
+@props:site: any;
+@props:imgClass: any;
+@props:spanClass: any;
+@props:class: string;
 -->

package/dist/sidebar/SidebarBrand.svelte.d.ts

@@ -1,29 +1,23 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAnchorAttributes } from 'svelte/elements';
-import type { SiteType } from '../types';
 declare const __propDef: {
-    props: HTMLAnchorAttributes & {
-        site: SiteType;
-        aClass?: string;
-        imgClass?: string;
-        spanClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type SidebarBrandProps = typeof __propDef.props;
+type SidebarBrandProps_ = typeof __propDef.props;
+export { SidebarBrandProps_ as SidebarBrandProps };
 export type SidebarBrandEvents = typeof __propDef.events;
 export type SidebarBrandSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let site: $$Props['site'];
- * @prop export let aClass: $$Props['aClass'] = 'flex items-center ps-2.5 mb-5';
- * @prop export let imgClass: $$Props['imgClass'] = 'h-6 me-3 sm:h-7';
- * @prop export let spanClass: $$Props['spanClass'] = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+ * @props: children: any;
+ * @props:site: any;
+ * @props:imgClass: any;
+ * @props:spanClass: any;
+ * @props:class: string;
  */
-export default class SidebarBrand extends SvelteComponentTyped<SidebarBrandProps, SidebarBrandEvents, SidebarBrandSlots> {
+export default class SidebarBrand extends SvelteComponentTyped<SidebarBrandProps_, SidebarBrandEvents, SidebarBrandSlots> {
 }
-export {};

package/dist/sidebar/SidebarButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { type SidebarButtonProps as Props, sidebarbutton } from ".";
+  let { breakpoint = "md", class: className, ...restProps }: Props = $props();
+
+  const base = $derived(sidebarbutton({ breakpoint, className }));
+</script>
+
+<button {...restProps} type="button" class={base}>
+  <span class="sr-only">Open sidebar</span>
+  <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+    <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+  </svg>
+</button>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@props: breakpoint: any = "md";
+@props:class: string;
+-->

package/dist/sidebar/SidebarButton.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SidebarButtonProps_ = typeof __propDef.props;
+export { SidebarButtonProps_ as SidebarButtonProps };
+export type SidebarButtonEvents = typeof __propDef.events;
+export type SidebarButtonSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @props: breakpoint: any = "md";
+ * @props:class: string;
+ */
+export default class SidebarButton extends SvelteComponentTyped<SidebarButtonProps_, SidebarButtonEvents, SidebarButtonSlots> {
+}