flowbite-svelte 0.44.8 → 0.44.9

package/src/lib/ratings/AdvancedRating.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  export let ratings: { label: string; rating: number }[] = [];
+  export let divClass: string = 'flex items-center mt-4';
+  export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
+  export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
+  export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+  export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
+  export let unit: string = '%';
+
+  let divCls: string = twMerge(divClass, $$props.classDiv);
+  let labelCls: string = twMerge(labelClass, $$props.classLabel);
+  let ratingDivCls: string = twMerge(ratingDivClass, $$props.classRatingDiv);
+  let ratingCls: string = twMerge(ratingClass, $$props.classRating);
+  let rightLabelCls: string = twMerge(rightLabelClass, $$props.classRightLabel);
+</script>
+
+{#if $$slots.rating}
+  <slot name="rating" />
+{/if}
+{#if $$slots.globalText}
+  <slot name="globalText" />
+{/if}
+{#each ratings as { label, rating }}
+  <div class={divCls}>
+    <span class={labelCls}>{label}</span>
+    <div class={ratingDivCls}>
+      <div class={ratingCls} style="width: {rating}%" />
+    </div>
+    <span class={rightLabelCls}>{rating}{unit}</span>
+  </div>
+{/each}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let ratings: { label: string;
+@prop export let divClass: string = 'flex items-center mt-4';
+@prop export let labelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
+@prop export let ratingDivClass: string = 'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700';
+@prop export let ratingClass: string = 'h-5 bg-yellow-400 rounded';
+@prop export let rightLabelClass: string = 'text-sm font-medium text-gray-600 dark:text-gray-500';
+@prop export let unit: string = '%';
+-->

package/src/lib/ratings/Heart.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let fillPercent: number = 100;
+  export let fillColor: string = '#ff0000';
+  export let strokeColor: string = '#ff0000';
+  export let size: number = 24;
+  export let ariaLabel: string = 'heart';
+  export let id: string = 'heart';
+  export let role = 'img';
+</script>
+
+<svg width={size} height={size} class={$$props.class} {...$$restProps} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
+  <defs>
+    <linearGradient {id}>
+      {#if fillPercent !== 100}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color="transparent" />
+        <stop offset="100%" stop-color="transparent" />
+      {:else}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
+      {/if}
+    </linearGradient>
+  </defs>
+  <path fill="url(#{id})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let fillPercent: number = 100;
+@prop export let fillColor: string = '#ff0000';
+@prop export let strokeColor: string = '#ff0000';
+@prop export let size: number = 24;
+@prop export let ariaLabel: string = 'heart';
+@prop export let id: string = 'heart';
+@prop export let role = 'img';
+-->

package/src/lib/ratings/Rating.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import Star from './Star.svelte';
+  import { twMerge } from 'tailwind-merge';
+  import generateId from '../utils/generateId.js';
+  import type { ComponentType } from 'svelte';
+
+  export let divClass: string = 'flex items-center';
+  export let size: number = 24;
+  export let total: number = 5;
+  export let rating: number = 4;
+  export let partialId: string = 'partialStar' + generateId();
+  export let icon: ComponentType = Star;
+  export let count: boolean = false;
+
+  // generate unique id for full star and gray star
+  const fullStarId: string = generateId();
+  const grayStarId: string = generateId();
+  let fullStars: number = Math.floor(rating);
+  let rateDiffence = rating - fullStars;
+  let percentRating = Math.round(rateDiffence * 100);
+  let grayStars: number = total - (fullStars + Math.ceil(rateDiffence));
+  // console.log(fullStars, grayStars, rateDiffence, percentRating)
+</script>
+
+<div class={twMerge(divClass, $$props.class)}>
+  {#if count}
+    <svelte:component this={icon} fillPercent={100} {size} />
+    <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
+    <slot />
+  {:else}
+    {#each Array(fullStars) as star}
+      <svelte:component this={icon} {size} fillPercent={100} id={fullStarId} />
+    {/each}
+    {#if percentRating}
+      <svelte:component this={icon} {size} fillPercent={percentRating} id={partialId} />
+    {/if}
+    {#each Array(grayStars) as star}
+      <svelte:component this={icon} {size} fillPercent={0} id={grayStarId} />
+    {/each}
+    {#if $$slots.text}
+      <slot name="text" />
+    {/if}
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divClass: string = 'flex items-center';
+@prop export let size: number = 24;
+@prop export let total: number = 5;
+@prop export let rating: number = 4;
+@prop export let partialId: string = 'partialStar' + generateId();
+@prop export let icon: ComponentType = Star;
+@prop export let count: boolean = false;
+-->

package/src/lib/ratings/RatingComment.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import Button from '../buttons/Button.svelte';
+  import Rating from './Rating.svelte';
+  // default is floor
+  export let ceil: boolean = false;
+  export let helpfullink: string = '';
+  export let abuselink: string = '';
+  export let comment: {
+    id: string;
+    user: {
+      name: string;
+      img: {
+        src: string;
+        alt: string;
+      };
+      joined: string;
+    };
+    total: number;
+    rating: number;
+    heading: string;
+    address: string;
+    datetime: string;
+  };
+
+  let roundedRating: number = ceil ? Math.ceil(comment.rating) : Math.floor(comment.rating);
+  let grayStars: number = comment.total - roundedRating;
+</script>
+
+<article>
+  <div class="flex items-center mb-4 space-x-4">
+    <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
+    <div class="space-y-1 font-medium dark:text-white">
+      <p>
+        {comment.user.name}
+        <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400">
+          {comment.user.joined}
+        </time>
+      </p>
+    </div>
+  </div>
+  <div class="flex items-center mb-1">
+    <Rating total={comment.total} rating={comment.rating}>
+      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+        {comment.rating} out of {comment.total}
+      </p>
+    </Rating>
+    {#if comment.heading}
+      <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
+        {comment.heading}
+      </h3>
+    {/if}
+  </div>
+  {#if comment.address || comment.datetime}
+    <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
+      <p>Reviewed in {comment.address} on {comment.datetime}</p>
+    </footer>
+  {/if}
+  <slot />
+  <aside>
+    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      <slot name="evaluation" />
+    </p>
+    {#if helpfullink || abuselink}
+      <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
+        {#if helpfullink}
+          <Button size="xs" href="/" color="dark">Helpful</Button>
+        {/if}
+        {#if abuselink}
+          <a href={abuselink} class="pl-4 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> Report abuse </a>
+        {/if}
+      </div>
+    {/if}
+  </aside>
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let ceil: boolean = false;
+@prop export let helpfullink: string = '';
+@prop export let abuselink: string = '';
+@prop export let comment: {
+    id: string;
+-->

package/src/lib/ratings/Review.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type { ReviewType } from '../types';
+  import { twMerge } from 'tailwind-merge';
+
+  export let review: ReviewType;
+  export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+  export let divClass: string = 'flex items-center mb-6 space-x-4';
+  export let imgClass: string = 'w-10 h-10 rounded-full';
+  export let ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+  export let liClass: string = 'flex items-center';
+</script>
+
+<article class={twMerge(articleClass, $$props.classArticle)}>
+  <div>
+    <div class={twMerge(divClass, $$props.classDiv)}>
+      <img class={twMerge(imgClass, $$props.classImg)} src={review.imgSrc} alt={review.imgAlt} />
+      <div class="space-y-1 font-medium dark:text-white">
+        <p>{review.name}</p>
+        {#if review.address}
+          <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
+            <slot name="address" />
+          </div>
+        {/if}
+      </div>
+    </div>
+    {#if $$slots.item1 || $$slots.item2 || $$slots.item3}
+      <ul class={twMerge(ulClass, $$props.classUl)}>
+        {#if $$slots.item1}
+          <li class={twMerge(liClass, $$props.classLi)}>
+            <slot name="item1" />
+          </li>
+        {/if}
+        {#if $$slots.item2}
+          <li class={twMerge(liClass, $$props.classLi)}>
+            <slot name="item2" />
+          </li>
+        {/if}
+        {#if $$slots.item3}
+          <li class={twMerge(liClass, $$props.classLi)}>
+            <slot name="item3" />
+          </li>
+        {/if}
+      </ul>
+    {/if}
+  </div>
+  <div class="col-span-2 mt-6 md:mt-0">
+    <div class="flex items-start mb-5">
+      <div class="pr-4">
+        {#if review.reviewDate}
+          <footer>
+            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+              Reviewed: {review.reviewDate}
+            </p>
+          </footer>
+        {/if}
+        <h4 class="text-xl font-bold text-gray-900 dark:text-white">
+          {review.title}
+        </h4>
+      </div>
+      <p class="bg-primary-700 text-white text-sm font-semibold inline-flex items-center p-1.5 rounded">
+        {review.rating}
+      </p>
+    </div>
+    <slot />
+  </div>
+</article>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let review: ReviewType;
+@prop export let articleClass: string = 'md:gap-8 md:grid md:grid-cols-3';
+@prop export let divClass: string = 'flex items-center mb-6 space-x-4';
+@prop export let imgClass: string = 'w-10 h-10 rounded-full';
+@prop export let ulClass: string = 'space-y-4 text-sm text-gray-500 dark:text-gray-400';
+@prop export let liClass: string = 'flex items-center';
+-->

package/src/lib/ratings/ScoreRating.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  export let ratings: { label: string; rating: number }[] = [];
+  export let ratings2: { label: string; rating: number }[] = [];
+  export let headerLabel: {
+    desc1: string;
+    desc2: string;
+    desc3: string;
+    link: { label: string; url: string };
+  };
+  export let desc1Class: string = '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';
+  export let desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+  export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
+  export let desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+  export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+  export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+</script>
+
+<div class="flex items-center mb-5">
+  {#if headerLabel.desc1}
+    <p class={desc1Class}>{headerLabel.desc1}</p>
+  {/if}
+  {#if headerLabel.desc2}
+    <p class={desc2Class}>{headerLabel.desc2}</p>
+  {/if}
+  {#if headerLabel.desc3}
+    <span class={desc3spanClass} />
+    <p class={desc3pClass}>{headerLabel.desc3}</p>
+  {/if}
+  {#if headerLabel.link}
+    <a href={headerLabel.link.url} class={linkClass}>{headerLabel.link.label}</a>
+  {/if}
+</div>
+<div class="gap-8 sm:grid sm:grid-cols-2">
+  <div>
+    {#each ratings as { label, rating }}
+      <dl>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
+        <dd class="flex items-center mb-3">
+          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
+            <div class={barColor} style="width: {rating * 10}%" />
+          </div>
+          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+        </dd>
+      </dl>
+    {/each}
+  </div>
+  <div>
+    {#each ratings2 as { label, rating }}
+      <dl>
+        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</dt>
+        <dd class="flex items-center mb-3">
+          <div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
+            <div class={barColor} style="width: {rating * 10}%" />
+          </div>
+          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{rating}</span>
+        </dd>
+      </dl>
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let ratings: { label: string;
+@prop export let ratings2: { label: string;
+@prop export let headerLabel: {
+    desc1: string;
+@prop export let desc1Class: string = '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';
+@prop export let desc2Class: string = 'ml-2 w-24 font-medium text-gray-900 dark:text-white';
+@prop export let desc3spanClass: string = 'mx-2 w-1 h-1 bg-gray-900 rounded-full dark:bg-gray-500';
+@prop export let desc3pClass: string = 'text-sm  w-24 font-medium text-gray-500 dark:text-gray-400';
+@prop export let linkClass: string = 'ml-auto w-32 text-sm font-medium text-primary-600 hover:underline dark:text-primary-500';
+@prop export let barColor: string = 'bg-primary-600 h-2.5 rounded dark:bg-primary-500';
+-->

package/src/lib/ratings/Star.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import generateId from '$lib/utils/generateId';
+
+  export let fillPercent: number = 100;
+  export let fillColor: string = '#F5CA14';
+  export let strokeColor: string = '#F5CA14';
+  export let size: number = 24;
+  export let ariaLabel: string = 'star';
+  export let id: string = generateId();
+  export let role = 'img';
+</script>
+
+<svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="100 100 120 120" {role} on:click>
+  <defs>
+    <linearGradient {id}>
+      {#if fillPercent !== 100}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color="transparent" />
+        <stop offset="100%" stop-color="transparent" />
+      {:else}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
+      {/if}
+    </linearGradient>
+  </defs>
+  <g fill="url(#{id})" stroke={strokeColor} stroke-width="2">
+    <polygon
+      points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180, 
+    203.042, 152.639, 176.756, 148.820, 165.000, 125.000, 
+    153.244, 148.820, 126.958, 152.639, 145.979, 171.180,
+    141.489, 197.361, 165.000, 185.000" />
+  </g>
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let fillPercent: number = 100;
+@prop export let fillColor: string = '#F5CA14';
+@prop export let strokeColor: string = '#F5CA14';
+@prop export let size: number = 24;
+@prop export let ariaLabel: string = 'star';
+@prop export let id: string = generateId();
+@prop export let role = 'img';
+-->

package/src/lib/ratings/Thumbup.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export let fillPercent: number = 100;
+  export let fillColor: string = '#00b500';
+  export let strokeColor: string = '#00b500';
+  export let size: number = 24;
+  export let ariaLabel: string = 'thumbup';
+  export let id: string = 'thumbup';
+  export let role = 'img';
+</script>
+
+<svg width={size} height={size} {...$$restProps} class={$$props.class} aria-label={ariaLabel} viewBox="0 0 24 24" {role} stroke-width="1.5" stroke="currentColor" fill="none" on:click>
+  <defs>
+    <linearGradient {id}>
+      {#if fillPercent !== 100}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color={fillColor} />
+        <stop offset="{fillPercent}%" stop-color="transparent" />
+        <stop offset="100%" stop-color="transparent" />
+      {:else}
+        <stop offset="0%" stop-color={fillColor} />
+        <stop offset="100%" stop-color={fillColor} />
+      {/if}
+    </linearGradient>
+  </defs>
+  <path fill="url(#{id})" stroke={strokeColor} stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" />
+</svg>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let fillPercent: number = 100;
+@prop export let fillColor: string = '#00b500';
+@prop export let strokeColor: string = '#00b500';
+@prop export let size: number = 24;
+@prop export let ariaLabel: string = 'thumbup';
+@prop export let id: string = 'thumbup';
+@prop export let role = 'img';
+-->

package/src/lib/sidebars/Sidebar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+  export type SidebarType = {
+    activeClass: string;
+    nonActiveClass: string;
+  };
+</script>
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { writable } from 'svelte/store';
+
+  const activeUrlStore = writable('');
+
+  export let activeUrl: string = '';
+  export let asideClass: string = 'w-64';
+  export let nonActiveClass: string = '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: string = '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';
+
+  setContext<SidebarType>('sidebarContext', { activeClass, nonActiveClass });
+
+  $: {
+    activeUrlStore.set(activeUrl);
+  }
+  setContext('activeUrl', activeUrlStore);
+</script>
+
+<aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label="Sidebar">
+  <slot />
+</aside>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let activeUrl: string = '';
+@prop export let asideClass: string = 'w-64';
+@prop export let nonActiveClass: string = '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: string = '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';
+-->

package/src/lib/sidebars/SidebarBrand.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import type { SiteType } from '../types';
+
+  export let site: SiteType;
+  export let aClass: string = 'flex items-center pl-2.5 mb-5';
+  export let imgClass: string = 'h-6 mr-3 sm:h-7';
+  export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+</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>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let site: SiteType;
+@prop export let aClass: string = 'flex items-center pl-2.5 mb-5';
+@prop export let imgClass: string = 'h-6 mr-3 sm:h-7';
+@prop export let spanClass: string = 'self-center text-xl font-semibold whitespace-nowrap dark:text-white';
+-->

package/src/lib/sidebars/SidebarCta.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
+  export let divClass: string = 'flex items-center mb-3';
+  export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+  export let label: string = '';
+</script>
+
+<div {...$$restProps} id="dropdown-cta" class={twMerge(divWrapperClass, $$props.class)} role="alert">
+  <div class={divClass}>
+    <span class={spanClass}>{label}</span>
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+  </div>
+  <slot />
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let divWrapperClass: string = 'p-4 mt-6 bg-primary-50 rounded-lg dark:bg-primary-900';
+@prop export let divClass: string = 'flex items-center mb-3';
+@prop export let spanClass: string = 'bg-primary-100 text-primary-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-900';
+@prop export let label: string = '';
+-->

package/src/lib/sidebars/SidebarDropdownItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  export let href: string = '';
+  export let label: string = '';
+  export let activeClass: string = 'flex items-center p-2 pl-11 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 active: boolean = false;
+</script>
+
+<li>
+  <a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={twMerge(active ? activeClass : aClass, $$props.class)}>
+    {label}
+  </a>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let aClass: string = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+@prop export let href: string = '';
+@prop export let label: string = '';
+@prop export let activeClass: string = 'flex items-center p-2 pl-11 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 active: boolean = false;
+-->

package/src/lib/sidebars/SidebarDropdownWrapper.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { fade, blur, fly, slide } from 'svelte/transition';
+  import type { TransitionTypes, TransitionParamTypes } from '../types';
+
+  export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  export let label: string = '';
+  export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+  export let ulClass: string = 'py-2 space-y-2';
+  export let transitionType: TransitionTypes = 'slide';
+  export let transitionParams: TransitionParamTypes = {};
+
+  // make a custom transition function that returns the desired transition
+  const multiple = (node: HTMLElement, params: any) => {
+    switch (transitionType) {
+      case 'blur':
+        return blur(node, params);
+      case 'fly':
+        return fly(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return slide(node, params);
+    }
+  };
+
+  export let isOpen = false;
+  const handleDropdown = () => {
+    isOpen = !isOpen;
+  };
+</script>
+
+<li>
+  <button {...$$restProps} on:click={() => handleDropdown()} type="button" class={twMerge(btnClass, $$props.class)} aria-controls="sidebar-dropdown">
+    <slot name="icon" />
+    <span class={spanClass}>{label}</span>
+    {#if isOpen}
+      {#if $$slots.arrowup}
+        <slot name="arrowup" />
+      {:else}
+        <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
+        </svg>
+      {/if}
+    {:else if $$slots.arrowdown}
+      <slot name="arrowdown" />
+    {:else}
+      <svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
+      </svg>
+    {/if}
+  </button>
+  {#if isOpen}
+    <ul class={ulClass} transition:multiple={transitionParams}>
+      <slot />
+    </ul>
+  {/if}
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+@prop export let label: string = '';
+@prop export let spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+@prop export let ulClass: string = 'py-2 space-y-2';
+@prop export let transitionType: TransitionTypes = 'slide';
+@prop export let transitionParams: TransitionParamTypes = {};
+@prop export let isOpen = false;
+-->