flowbite-svelte 0.36.4 → 0.37.1

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

@@ -16,6 +16,24 @@ declare const __propDef: {
 export type LabelProps = typeof __propDef.props;
 export type LabelEvents = typeof __propDef.events;
 export type LabelSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Label](https://flowbite-svelte.com/docs/utilities/label)
+ * ## Props
+ * @prop color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
+ * @prop defaultClass: string = 'text-sm font-medium block';
+ * @prop show: boolean = true;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Label, Checkbox } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Label color="red" class="mt-4 flex items-center font-bold italic">
+ *   <Checkbox class="mr-2" /> Your Label
+ * </Label>
+ * ```
+ */
 export default class Label extends SvelteComponentTyped<LabelProps, LabelEvents, LabelSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Label.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Label.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Label.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/NumberInput.svelte

@@ -21,3 +21,25 @@ export let value = 0;
     on:paste
     on:input />
 </Input>
+
+<!--
+  @component
+  ## Feature
+  [Go to Number Input](https://flowbite-svelte.com/docs/forms/input-field#Number_input)
+  ## Props
+  @prop value: number = 0;
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:contextmenu
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseover
+  - on:mouseenter
+  - on:mouseleave
+  - on:paste
+  - on:input 
+-->

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

@@ -26,6 +26,26 @@ declare const __propDef: {
 export type NumberInputProps = typeof __propDef.props;
 export type NumberInputEvents = typeof __propDef.events;
 export type NumberInputSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Number Input](https://flowbite-svelte.com/docs/forms/input-field#Number_input)
+ * ## Props
+ * @prop value: number = 0;
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:contextmenu
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseover
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:paste
+ * - on:input
+ */
 export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/NumberInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,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":"NumberInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/NumberInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/forms/Radio.svelte

@@ -1,6 +1,8 @@
 <script context="module">// this part is shared between Radio and Checkbox
 import classNames from 'classnames';
 const colorClasses = {
+    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
+    secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
     red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
     green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
     purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
@@ -43,3 +45,49 @@ let background = getContext('background');
     {...$$restProps}
     class={inputClass(custom, color, false, background, $$slots.default || $$props.class)} /><slot />
 </Label>
+
+<!--
+  @component
+  ## Feature
+  [Go to Radio](https://flowbite-svelte.com/docs/forms/radio)
+  - Setup
+  - Radio examples
+  - Disabled state
+  - Alternative syntax
+  - Radio with a link
+  - Helper text
+  - Bordered
+  - Radio list group
+  - Horizontal list group
+  - Radio in dropdown
+  - Inline layout
+  - Colors
+  - Advanced layout
+  ## Props
+  @prop color: FormColorType = 'blue';
+  @prop custom: boolean = false;
+  @prop inline: boolean = false;
+  @prop group: number | string = '';
+  @prop value: number | string = '';
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  - on:paste
+  ## Example
+  ```
+  <script>
+    import { Radio } from 'flowbite-svelte'
+  </script>
+
+  <Radio name="example">Default radio</Radio>
+  <Radio name="example">Checked state</Radio>
+  ```
+-->

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

@@ -33,6 +33,50 @@ declare const __propDef: {
 export type RadioProps = typeof __propDef.props;
 export type RadioEvents = typeof __propDef.events;
 export type RadioSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Radio](https://flowbite-svelte.com/docs/forms/radio)
+ * - Setup
+ * - Radio examples
+ * - Disabled state
+ * - Alternative syntax
+ * - Radio with a link
+ * - Helper text
+ * - Bordered
+ * - Radio list group
+ * - Horizontal list group
+ * - Radio in dropdown
+ * - Inline layout
+ * - Colors
+ * - Advanced layout
+ * ## Props
+ * @prop color: FormColorType = 'blue';
+ * @prop custom: boolean = false;
+ * @prop inline: boolean = false;
+ * @prop group: number | string = '';
+ * @prop value: number | string = '';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * - on:paste
+ * ## Example
+ * ```
+ * <script>
+ *   import { Radio } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Radio name="example">Default radio</Radio>
+ * <Radio name="example">Checked state</Radio>
+ * ```
+ */
 export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACW,CAAC;AAE1E,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,GAAG,OAAO,WAU3B,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA0B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Radio.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgBC,eAAO,MAAM,UAAU,WAAY,OAAO,cAAc,MAAM,WACW,CAAC;AAE1E,eAAO,MAAM,UAAU,WACb,OAAO,SACR,aAAa,WACX,OAAO,UACR,OAAO,cACH,MAAM,GAAG,OAAO,WAU3B,CAAC;AAIN,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA4B9C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/RadioInline.svelte

@@ -1,3 +1,12 @@
 <div class="flex">
-	<slot />
+  <slot />
 </div>
+
+<!--
+  @component
+  ## Feature
+  [Go to ](https://flowbite-svelte.com/docs/components/)
+
+  ## Props
+  
+-->

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

@@ -1,6 +1,12 @@
 /** @typedef {typeof __propDef.props}  RadioInlineProps */
 /** @typedef {typeof __propDef.events}  RadioInlineEvents */
 /** @typedef {typeof __propDef.slots}  RadioInlineSlots */
+/**
+ * ## Feature
+ * [Go to ](https://flowbite-svelte.com/docs/components/)
+ *
+ * ## Props
+ */
 export default class RadioInline extends SvelteComponentTyped<{
     [x: string]: never;
 }, {

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

@@ -1 +1 @@
-{"version":3,"file":"RadioInline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/RadioInline.svelte.js"],"names":[],"mappings":"AASA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;;;CACC;+BALa,OAAO,UAAU,KAAK;gCACtB,OAAO,UAAU,MAAM;+BACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;;;EAA8E"}
+{"version":3,"file":"RadioInline.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/RadioInline.svelte.js"],"names":[],"mappings":"AAWA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;GAKG;AACH;;;;;;;CACC;+BAXa,OAAO,UAAU,KAAK;gCACtB,OAAO,UAAU,MAAM;+BACvB,OAAO,UAAU,KAAK;qCAbC,QAAQ;AAU7C;;;;;;;;;;EAA8E"}

package/dist/forms/Range.svelte

@@ -20,3 +20,26 @@ $: inputClass = classNames('w-full bg-gray-200 rounded-lg appearance-none cursor
   on:keydown
   on:keypress
   on:keyup />
+
+<!--
+  @component
+  ## Feature
+  [Go to Range](https://flowbite-svelte.com/docs/forms/range)
+  - Setup
+  - Range slider example
+  - Disabled state
+  - Binding value
+  - Min and max
+  - Steps
+  - Sizes
+  - Unknown attributes
+  ## Props
+  @prop value: number;
+  @prop size: 'sm' | 'md' | 'lg' = 'md';
+  ## Event
+  - on:change
+  - on:click
+  - on:keydown
+  - on:keypress
+  - on:keyup
+-->

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

@@ -19,6 +19,27 @@ declare const __propDef: {
 export type RangeProps = typeof __propDef.props;
 export type RangeEvents = typeof __propDef.events;
 export type RangeSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Range](https://flowbite-svelte.com/docs/forms/range)
+ * - Setup
+ * - Range slider example
+ * - Disabled state
+ * - Binding value
+ * - Min and max
+ * - Steps
+ * - Sizes
+ * - Unknown attributes
+ * ## Props
+ * @prop value: number;
+ * @prop size: 'sm' | 'md' | 'lg' = 'md';
+ * ## Event
+ * - on:change
+ * - on:click
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ */
 export default class Range extends SvelteComponentTyped<RangeProps, RangeEvents, RangeSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Range.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Range.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0BD,QAAA,MAAM,SAAS;;;eADwC,MAAM;;;;;;;;;;;;;CACiB,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Range.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Range.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;eADwC,MAAM;;;;;;;;;;;;;CACiB,CAAC;AAC/E,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

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 {};