flowbite-svelte 0.36.4 → 0.37.1

package/dist/forms/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwDD,QAAA,MAAM,SAAS;;;;;;kBADyK,OAAO,GAAG,SAAS;;;;;;;;;;;CAC7H,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Toggle.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+DD,QAAA,MAAM,SAAS;;;;;;kBAD6M,OAAO,GAAG,SAAS;;;;;;;;;;;;CACjK,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/forms/VoiceSearch.svelte

@@ -15,49 +15,72 @@ const handleVoiceBtn = () => {
 </script>
 
 <form class="flex items-center" on:submit>
-	<label for={id} class={labelClass}>Search</label>
-	<div class="relative w-full">
-		<div class={iconDivClass}>
-			<svg
-				class={iconClass}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</div>
-		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
-		<button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
-			<svg
-				class={voiceIconClass}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</button>
-	</div>
-	<button type="submit" class={btnClass}
-		><svg
-			class="mr-2 -ml-1 w-5 h-5"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			/></svg
-		>Search</button
-	>
+  <label for={id} class={labelClass}>Search</label>
+  <div class="relative w-full">
+    <div class={iconDivClass}>
+      <svg class={iconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+          clip-rule="evenodd" /></svg>
+    </div>
+    <input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
+    <button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
+      <svg class={voiceIconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
+          clip-rule="evenodd" /></svg>
+    </button>
+  </div>
+  <button type="submit" class={btnClass}
+    ><svg
+      class="mr-2 -ml-1 w-5 h-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg
+    >Search</button>
 </form>
+
+<!--
+  @component
+  ## Feature
+  [Go to Voice Search](https://flowbite-svelte.com/docs/forms/search-input#Voice_Search)
+  ## Props
+  @prop id: string = '';
+  @prop labelClass: string = 'sr-only';
+  @prop iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+  @prop iconDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+  @prop inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+  @prop btnClass: string = 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+  @prop voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
+  @prop voiceIconClass: string = 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
+  @prop placeholder: string = 'Search Mockups, Logos, Design Templates...';
+  ## Example
+  ```
+  <script>
+    import { Search, Button } from 'flowbite-svelte'
+    function handleVoiceBtn() {
+      alert('You clicked voice button');
+    }
+  </script>
+
+  <form class="flex gap-2">
+    <Search size='md' class="flex gap-2 items-center" placeholder="Search Mockups, Logos, Design Templates...">
+      <button type="button" on:click={handleVoiceBtn} class="outline-none">
+        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg>
+      </button>
+    </Search>
+    <Button size='sm'>
+      <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+      Search
+    </Button>
+  </form>
+  ```
+-->

package/dist/forms/VoiceSearch.svelte.d.ts

@@ -23,6 +23,41 @@ declare const __propDef: {
 export type VoiceSearchProps = typeof __propDef.props;
 export type VoiceSearchEvents = typeof __propDef.events;
 export type VoiceSearchSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Voice Search](https://flowbite-svelte.com/docs/forms/search-input#Voice_Search)
+ * ## Props
+ * @prop id: string = '';
+ * @prop labelClass: string = 'sr-only';
+ * @prop iconClass: string = 'w-5 h-5 text-gray-500 dark:text-gray-400';
+ * @prop iconDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none';
+ * @prop inputClass: string = 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
+ * @prop btnClass: string = 'inline-flex items-center py-2.5 px-3 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
+ * @prop voiceBtnClass: string = 'flex absolute inset-y-0 right-0 items-center pr-3';
+ * @prop voiceIconClass: string = 'w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white';
+ * @prop placeholder: string = 'Search Mockups, Logos, Design Templates...';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Search, Button } from 'flowbite-svelte'
+ *   function handleVoiceBtn() {
+ *     alert('You clicked voice button');
+ *   }
+ * </script>
+ *
+ * <form class="flex gap-2">
+ *   <Search size='md' class="flex gap-2 items-center" placeholder="Search Mockups, Logos, Design Templates...">
+ *     <button type="button" on:click={handleVoiceBtn} class="outline-none">
+ *       <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd"/></svg>
+ *     </button>
+ *   </Search>
+ *   <Button size='sm'>
+ *     <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+ *     Search
+ *   </Button>
+ * </form>
+ * ```
+ */
 export default class VoiceSearch extends SvelteComponentTyped<VoiceSearchProps, VoiceSearchEvents, VoiceSearchSlots> {
 }
 export {};

package/dist/forms/VoiceSearch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/VoiceSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"VoiceSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/VoiceSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/gallery/Gallery.svelte

@@ -1,5 +1,6 @@
 <script>import classNames from 'classnames';
 export let items = [];
+export let imgClass = 'h-auto max-w-full rounded-lg';
 $: divClass = classNames('grid', $$props.class);
 function init(node) {
     if (getComputedStyle(node).gap === 'normal')
@@ -10,9 +11,50 @@ function init(node) {
 <div {...$$restProps} class={divClass} use:init>
   {#each items as item}
     <slot {item}>
-      <div><img src={item.src} alt={item.alt} class='h-auto max-w-full rounded-lg' /></div>
-    </slot>  
+      <div><img src={item.src} alt={item.alt} class={imgClass} /></div>
+    </slot>
   {:else}
     <slot />
   {/each}
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to ](https://flowbite-svelte.com/docs/components/)
+  - Set up
+  - Default gallery
+  - Masonry grid
+  - Featured image
+  - Quad gallery
+  - Gallery with slider
+  - Gallery with tag filters
+  - Heterogeneous gallery
+  - Custom image rendering
+  ## Props
+  @prop items: ImgType[] = [];
+  @prop imgClass: string = 'h-auto max-w-full rounded-lg';
+  ## Example
+  ```
+  <script>
+    import { Gallery } from "flowbite-svelte";
+    const images = [
+      {alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg'},
+      {alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg'},
+      {alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg'},
+      {alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg'},
+      {alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg'},
+      {alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg'},
+      {alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg'},
+      {alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg'},
+      {alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg'},
+      {alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg'},
+      {alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg'},
+      {alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg'}
+    ]
+
+  </script>
+
+  <Gallery items={images} class="gap-4 grid-cols-2 md:grid-cols-3" />
+  ```
+-->

package/dist/gallery/Gallery.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         items?: ImgType[] | undefined;
+        imgClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -15,6 +16,45 @@ declare const __propDef: {
 export type GalleryProps = typeof __propDef.props;
 export type GalleryEvents = typeof __propDef.events;
 export type GallerySlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to ](https://flowbite-svelte.com/docs/components/)
+ * - Set up
+ * - Default gallery
+ * - Masonry grid
+ * - Featured image
+ * - Quad gallery
+ * - Gallery with slider
+ * - Gallery with tag filters
+ * - Heterogeneous gallery
+ * - Custom image rendering
+ * ## Props
+ * @prop items: ImgType[] = [];
+ * @prop imgClass: string = 'h-auto max-w-full rounded-lg';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Gallery } from "flowbite-svelte";
+ *   const images = [
+ *     {alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg'},
+ *     {alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg'},
+ *     {alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg'},
+ *     {alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg'},
+ *     {alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg'},
+ *     {alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg'},
+ *     {alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg'},
+ *     {alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg'},
+ *     {alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg'},
+ *     {alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg'},
+ *     {alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg'},
+ *     {alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg'}
+ *   ]
+ *
+ * </script>
+ *
+ * <Gallery items={images} class="gap-4 grid-cols-2 md:grid-cols-3" />
+ * ```
+ */
 export default class Gallery extends SvelteComponentTyped<GalleryProps, GalleryEvents, GallerySlots> {
 }
 export {};

package/dist/gallery/Gallery.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/gallery/Gallery.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA4B1C,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Gallery.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/gallery/Gallery.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AA+B1C,QAAA,MAAM,SAAS;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/indicators/Indicator.svelte

@@ -57,3 +57,34 @@ $: dotClass = classNames('flex-shrink-0', rounded ? 'rounded' : 'rounded-full',
 </script>
 
 <div class={dotClass}><slot /></div>
+
+<!--
+  @component
+  ## Features
+  [Go to Indicators](https://flowbite-svelte.com/docs/components/indicators)
+  - Setup
+  - Default indicator
+  - Legend indicator
+  - Indicator count
+  - Status indicator
+  - Badge indicator
+  - Stepper indicator
+  - Indicator position
+  ## Props
+  @prop color: IndicatorColorType = 'gray';
+  @prop rounded: boolean = false;
+  @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  @prop border: boolean = false;
+  @prop placement: IndicatorPlacementType = undefined;
+  @prop offset: boolean = true;
+  ## Example
+  ```
+  <script>
+    import { Indicator } from 'flowbite-svelte'
+  </script>
+  
+  <Indicator color="gray"/>
+  <Indicator color="dark"/>
+  <Indicator color="blue"/>
+  ```
+-->

package/dist/indicators/Indicator.svelte.d.ts

@@ -20,6 +20,35 @@ declare const __propDef: {
 export type IndicatorProps = typeof __propDef.props;
 export type IndicatorEvents = typeof __propDef.events;
 export type IndicatorSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Indicators](https://flowbite-svelte.com/docs/components/indicators)
+ * - Setup
+ * - Default indicator
+ * - Legend indicator
+ * - Indicator count
+ * - Status indicator
+ * - Badge indicator
+ * - Stepper indicator
+ * - Indicator position
+ * ## Props
+ * @prop color: IndicatorColorType = 'gray';
+ * @prop rounded: boolean = false;
+ * @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+ * @prop border: boolean = false;
+ * @prop placement: IndicatorPlacementType = undefined;
+ * @prop offset: boolean = true;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Indicator } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Indicator color="gray"/>
+ * <Indicator color="dark"/>
+ * <Indicator color="blue"/>
+ * ```
+ */
 export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
 }
 export {};

package/dist/indicators/Indicator.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAsF3E,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB;;;;;;;;;CAC1L,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Indicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/indicators/Indicator.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAwF3E,QAAA,MAAM,SAAS;;;;;;;oBADmO,sBAAsB;;;;;;;;;CAC1L,CAAC;AAC/E,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/kbd/ArrowKeyDown.svelte

@@ -3,13 +3,19 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyDown.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyDownProps = typeof __propDef.props;
 export type ArrowKeyDownEvents = typeof __propDef.events;
 export type ArrowKeyDownSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyDown extends SvelteComponentTyped<ArrowKeyDownProps, ArrowKeyDownEvents, ArrowKeyDownSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyDown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyDown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyDown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ArrowKeyDown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyDown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/kbd/ArrowKeyLeft.svelte

@@ -3,13 +3,19 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyLeft.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyLeftProps = typeof __propDef.props;
 export type ArrowKeyLeftEvents = typeof __propDef.events;
 export type ArrowKeyLeftSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyLeft extends SvelteComponentTyped<ArrowKeyLeftProps, ArrowKeyLeftEvents, ArrowKeyLeftSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyLeft.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyLeft.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyLeft.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"ArrowKeyLeft.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyLeft.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/kbd/ArrowKeyRight.svelte

@@ -3,13 +3,19 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyRight.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyRightProps = typeof __propDef.props;
 export type ArrowKeyRightEvents = typeof __propDef.events;
 export type ArrowKeyRightSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyRight extends SvelteComponentTyped<ArrowKeyRightProps, ArrowKeyRightEvents, ArrowKeyRightSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyRight.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyRight.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyRight.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ArrowKeyRight.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyRight.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/kbd/ArrowKeyUp.svelte

@@ -3,13 +3,19 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z" /></svg>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  ## Props
+  @prop svgClass: string = 'w-4 h-4';
+-->

package/dist/kbd/ArrowKeyUp.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type ArrowKeyUpProps = typeof __propDef.props;
 export type ArrowKeyUpEvents = typeof __propDef.events;
 export type ArrowKeyUpSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+ * ## Props
+ * @prop svgClass: string = 'w-4 h-4';
+ */
 export default class ArrowKeyUp extends SvelteComponentTyped<ArrowKeyUpProps, ArrowKeyUpEvents, ArrowKeyUpSlots> {
 }
 export {};

package/dist/kbd/ArrowKeyUp.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArrowKeyUp.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyUp.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"ArrowKeyUp.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/kbd/ArrowKeyUp.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/kbd/Kbd.svelte

@@ -3,5 +3,35 @@ export let kbdClass = 'text-xs font-semibold text-gray-800 bg-gray-100 border bo
 </script>
 
 <kbd class={classNames(kbdClass, $$props.class)}>
-	<slot />
+  <slot />
 </kbd>
+
+<!--
+  @component
+  ## Features
+  [Go to KBD](https://flowbite-svelte.com/docs/components/kbd)
+  - Setup
+  - Default KBD
+  - KBD inside text
+  - KBD inside table
+  - Arrow keys
+  - Letter keys
+  - Number keys
+  - Function keys
+  ## Props
+  @prop kbdClass: string = 'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+  ## Example
+  ```
+  <script>
+    import { Kbd } from 'flowbite-svelte'
+  </script>
+
+  <Kbd class='px-2 py-1.5'>Shift</Kbd>
+  <Kbd class='px-2 py-1.5'>Ctrl</Kbd>
+  <Kbd class='px-2 py-1.5'>Tab</Kbd>
+  <Kbd class='px-2 py-1.5'>Caps Lock</Kbd>
+  <Kbd class='px-2 py-1.5'>Esc</Kbd>
+  <Kbd class='px-4 py-1.5'>Spacebar</Kbd>
+  <Kbd class='px-2 py-1.5'>Enter</Kbd>
+  ```
+-->