flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/rating/Thumbup.svelte.d.ts

@@ -1,36 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-import type { SVGAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: SVGAttributes<SVGSVGElement> & {
-        fillPercent?: number;
-        fillColor?: string;
-        strokeColor?: string;
-        size?: number;
-        ariaLabel?: string;
-        id?: string;
-        role?: string;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ThumbupProps = typeof __propDef.props;
-export type ThumbupEvents = typeof __propDef.events;
-export type ThumbupSlots = typeof __propDef.slots;
+import { type RatingIconProps as Props } from ".";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.flowbite-svelte.com/)
  * ## Props
- * @prop export let fillPercent: $$Props['fillPercent'] = 100;
- * @prop export let fillColor: $$Props['fillColor'] = '#00b500';
- * @prop export let strokeColor: $$Props['strokeColor'] = '#00b500';
- * @prop export let size: $$Props['size'] = 24;
- * @prop export let ariaLabel: $$Props['ariaLabel'] = 'thumbup';
- * @prop export let id: $$Props['id'] = 'thumbup';
- * @prop export let role: $$Props['role'] = 'img';
+ * @props: fillPercent: any = 100;
+ * @props:fillColor: any = "#00b500";
+ * @props:strokeColor: any = "#00b500";
+ * @props:size: any = 24;
+ * @props:ariaLabel: any = "thumbup";
+ * @props:iconIndex: any = 0;
+ * @props:groupId: any = "star";
+ * @props:role: any = "img";
+ * @props:svgClass: any;
  */
-export default class Thumbup extends SvelteComponentTyped<ThumbupProps, ThumbupEvents, ThumbupSlots> {
-}
-export {};
+declare const Thumbup: import("svelte").Component<Props, {}, "">;
+type Thumbup = ReturnType<typeof Thumbup>;
+export default Thumbup;

package/dist/rating/index.d.ts

@@ -0,0 +1,12 @@
+import type { AdvancedRatingProps, RatingProps, RatingCommentProps, ReviewProps, ScoreRatingProps, RatingIconProps } from "./type";
+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, type AdvancedRatingProps, type RatingProps, type RatingCommentProps, type ReviewProps, type ScoreRatingProps, type RatingIconProps };

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,284 @@
+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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [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;
+        };
+    };
+} | {}>, {
+    [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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [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;
+        };
+    };
+} | {}>, 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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            p?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export declare const review: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    article: string;
+    div: string;
+    div2: string;
+    div3: string;
+    img: string;
+    ul: string;
+    li: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: 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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            div?: import("tailwind-merge").ClassNameValue;
+            article?: import("tailwind-merge").ClassNameValue;
+            img?: import("tailwind-merge").ClassNameValue;
+            li?: import("tailwind-merge").ClassNameValue;
+            ul?: import("tailwind-merge").ClassNameValue;
+            div2?: import("tailwind-merge").ClassNameValue;
+            div3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, 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;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: 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;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    desc3span: string;
+    desc3p: string;
+    link: string;
+    bar: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: 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, import("tailwind-variants/dist/config").TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            desc1?: import("tailwind-merge").ClassNameValue;
+            desc2?: import("tailwind-merge").ClassNameValue;
+            desc3span?: import("tailwind-merge").ClassNameValue;
+            desc3p?: import("tailwind-merge").ClassNameValue;
+            bar?: import("tailwind-merge").ClassNameValue;
+            desc3?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}>, 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 dark:bg-gray-700', div3Class = 'h-5 bg-yellow-400 rounded', 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 dark:bg-gray-700",
+        div3: "h-5 bg-yellow-400 rounded",
+        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 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 dark:bg-primary-500"
+    }
+});

package/dist/rating/type.d.ts

@@ -0,0 +1,109 @@
+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 {
+    children?: Snippet;
+    text?: Snippet;
+    divClass?: string;
+    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,95 @@
-<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 ".";
+
+  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 isLargeScreen = $state(false);
+
+  const activeUrlStore = writable("");
+  setContext("activeUrl", activeUrlStore);
+  $effect(() => {
+    activeUrlStore.set(activeUrl);
+  });
+
+  function checkScreenSize() {
+    isLargeScreen = window.innerWidth >= breakpointValues[breakpoint];
+  }
+
+  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);
+  $effect(() => {
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  });
 </script>
 
-<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label={ariaLabel}>
-  <slot />
-</aside>
+{#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({ className })} aria-label={ariaLabel}>
+    <div class={div({ class: divClass })}>
+      {@render children()}
+    </div>
+  </aside>
+{/if}
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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;
 -->