flowbite-svelte 0.36.5 → 0.37.1

package/dist/forms/Search.svelte

@@ -55,3 +55,42 @@ const sizes = {
     </div>
   {/if}
 </Wrapper>
+
+<!--
+  @component
+  ## Feature
+  [Go to Search Input](https://flowbite-svelte.com/docs/forms/search-input)
+  - Setup
+  - Search bar example
+  - Simple search input
+  - Voice Search
+  - Events
+  - Example
+  ## Props
+  @prop size: FormSizeType = 'lg';
+  @prop placeholder: string = 'Search';
+  @prop value: string | number = '';
+  ## Event
+  - on:blur
+  - on:change
+  - on:input
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  - on:paste
+  ## Example
+  ```
+  <script>
+    import { Search, Button } from 'flowbite-svelte'
+  </script>
+
+  <Search >
+    <Button>Search</Button>
+  </Search>
+  ```
+-->

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

@@ -30,6 +30,43 @@ declare const __propDef: {
 export type SearchProps = typeof __propDef.props;
 export type SearchEvents = typeof __propDef.events;
 export type SearchSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Search Input](https://flowbite-svelte.com/docs/forms/search-input)
+ * - Setup
+ * - Search bar example
+ * - Simple search input
+ * - Voice Search
+ * - Events
+ * - Example
+ * ## Props
+ * @prop size: FormSizeType = 'lg';
+ * @prop placeholder: string = 'Search';
+ * @prop value: string | number = '';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:input
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * - on:paste
+ * ## Example
+ * ```
+ * <script>
+ *   import { Search, Button } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Search >
+ *   <Button>Search</Button>
+ * </Search>
+ * ```
+ */
 export default class Search extends SvelteComponentTyped<SearchProps, SearchEvents, SearchSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Search.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAoC/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,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":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Search.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAuC/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/forms/Select.svelte

@@ -27,3 +27,40 @@ $: selectClass = classNames(common, underline ? underlineClass : defaultClass, s
     <slot />
   {/each}
 </select>
+
+<!--
+  @component
+  ## Feature
+  [Go to Select](https://flowbite-svelte.com/docs/forms/select)
+  - Setup
+  - Select input example
+  - Disabled state
+  - Underline select
+  - Select with dropdown
+  - Sizes
+  - Custom options
+  ## Props
+  @prop items: SelectOptionType[] = [];
+  @prop value: string | number;
+  @prop placeholder: string = 'Choose option ...';
+  @prop underline: boolean = false;
+  @prop size: 'sm' | 'md' | 'lg' = 'md';
+  @prop defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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 underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer'; 
+  ## Example
+  ```
+  <script>
+    import { Select, Label } from 'flowbite-svelte';
+    let selected;
+    let countries = [
+      {value:"us", name: "United States"},
+      {value:"ca", name: "Canada"},
+      {value:"fr", name: "France"},
+    ]
+  </script>
+  
+  <Label>Select an option
+    <Select class="mt-2" items={countries} bind:value={selected} />
+  </Label>
+  ```
+-->

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

@@ -25,6 +25,41 @@ declare const __propDef: {
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Select](https://flowbite-svelte.com/docs/forms/select)
+ * - Setup
+ * - Select input example
+ * - Disabled state
+ * - Underline select
+ * - Select with dropdown
+ * - Sizes
+ * - Custom options
+ * ## Props
+ * @prop items: SelectOptionType[] = [];
+ * @prop value: string | number;
+ * @prop placeholder: string = 'Choose option ...';
+ * @prop underline: boolean = false;
+ * @prop size: 'sm' | 'md' | 'lg' = 'md';
+ * @prop defaultClass: string = 'text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 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 underlineClass: string = 'text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Select, Label } from 'flowbite-svelte';
+ *   let selected;
+ *   let countries = [
+ *     {value:"us", name: "United States"},
+ *     {value:"ca", name: "Canada"},
+ *     {value:"fr", name: "France"},
+ *   ]
+ * </script>
+ *
+ * <Label>Select an option
+ *   <Select class="mt-2" items={countries} bind:value={selected} />
+ * </Label>
+ * ```
+ */
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Select.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAiDjD,QAAA,MAAM,SAAS;;;;eADmM,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;;;CACnJ,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":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Select.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAmDjD,QAAA,MAAM,SAAS;;;;eADmM,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;;;CACnJ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/forms/Textarea.svelte

@@ -47,3 +47,39 @@ $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots
     </div>
   {/if}
 </Wrapper>
+
+<!--
+  @component
+  ## Feature
+  [Go to Textarea](https://flowbite-svelte.com/docs/forms/textarea)
+  - Setup
+  - Textarea example
+  - WYSIWYG Editor
+  - Comment box
+  - Chatroom input
+  ## Props
+  @prop value: string = '';
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:contextmenu
+  - on:focus
+  - on:input
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  - on:paste
+  ## Example
+  ```
+  <script>
+    import { Textarea, Label } from 'flowbite-svelte'
+  </script>
+
+  <Label for="textarea-id" class="mb-2">Your message</Label>
+  <Textarea id="textarea-id" placeholder="Your message" rows="4" name="message"/>
+  ```
+-->

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

@@ -29,6 +29,40 @@ declare const __propDef: {
 export type TextareaProps = typeof __propDef.props;
 export type TextareaEvents = typeof __propDef.events;
 export type TextareaSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Textarea](https://flowbite-svelte.com/docs/forms/textarea)
+ * - Setup
+ * - Textarea example
+ * - WYSIWYG Editor
+ * - Comment box
+ * - Chatroom input
+ * ## Props
+ * @prop value: string = '';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:contextmenu
+ * - on:focus
+ * - on:input
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * - on:paste
+ * ## Example
+ * ```
+ * <script>
+ *   import { Textarea, Label } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Label for="textarea-id" class="mb-2">Your message</Label>
+ * <Textarea id="textarea-id" placeholder="Your message" rows="4" name="message"/>
+ * ```
+ */
 export default class Textarea extends SvelteComponentTyped<TextareaProps, TextareaEvents, TextareaSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Textarea.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/Toggle.svelte

@@ -5,10 +5,13 @@ export let size = 'default';
 export let group = [];
 export let value = '';
 export let checked = undefined;
+export let customSize = '';
 // tinted if put in component having its own background
 let background = getContext('background');
 const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
 const colors = {
+    primary: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600',
+    secondary: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600',
     red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600',
     green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600',
     purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
@@ -20,7 +23,8 @@ const colors = {
 const sizes = {
     small: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4',
     default: 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5',
-    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6'
+    large: 'w-14 h-7 after:top-0.5 after:left-[4px]  after:h-6 after:w-6',
+    custom: customSize
 };
 let divClass;
 $: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
@@ -30,3 +34,30 @@ $: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray
   <span class={divClass} />
   <slot />
 </Checkbox>
+
+<!--
+  @component
+  ## Feature
+  [Go to Toggle](https://flowbite-svelte.com/docs/forms/toggle)
+  - Setup
+  - Toggle examples
+  - Colors
+  - Sizes
+  ## Props
+  @prop size: 'small' | 'default' | 'large' | 'custom' = 'default';
+  @prop group: (string | number)[] = [];
+  @prop value: string | number = '';
+  @prop checked: boolean | undefined = undefined;
+  @prop customSize: string = '';
+  ## Example
+  ```
+  <script>
+    import { Toggle } from 'flowbite-svelte'
+  </script>
+
+  <Toggle>Toggle me</Toggle>
+  <Toggle checked={true}>Checked toggle</Toggle>
+  <Toggle disabled>Disabled toggle</Toggle>
+  <Toggle checked disabled>Disabled checked</Toggle>
+  ```
+-->

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

@@ -2,10 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: "default" | "large" | "small" | undefined;
+        size?: "default" | "custom" | "large" | "small" | undefined;
         group?: (string | number)[] | undefined;
         value?: string | number | undefined;
         checked?: boolean | undefined;
+        customSize?: string | undefined;
     };
     events: {
         click: MouseEvent;
@@ -20,6 +21,31 @@ declare const __propDef: {
 export type ToggleProps = typeof __propDef.props;
 export type ToggleEvents = typeof __propDef.events;
 export type ToggleSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Toggle](https://flowbite-svelte.com/docs/forms/toggle)
+ * - Setup
+ * - Toggle examples
+ * - Colors
+ * - Sizes
+ * ## Props
+ * @prop size: 'small' | 'default' | 'large' | 'custom' = 'default';
+ * @prop group: (string | number)[] = [];
+ * @prop value: string | number = '';
+ * @prop checked: boolean | undefined = undefined;
+ * @prop customSize: string = '';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Toggle } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Toggle>Toggle me</Toggle>
+ * <Toggle checked={true}>Checked toggle</Toggle>
+ * <Toggle disabled>Disabled toggle</Toggle>
+ * <Toggle checked disabled>Disabled checked</Toggle>
+ * ```
+ */
 export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }
 export {};

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

@@ -47,3 +47,40 @@ const handleVoiceBtn = () => {
         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;AA0CD,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>
+      <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 {};