flowbite-svelte 0.36.4 → 0.37.1

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8D9C,QAAA,MAAM,SAAS;;;;;;;;kBADkO,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;CACtL,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":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Checkbox.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA+D9C,QAAA,MAAM,SAAS;;;;;;;;kBADkO,OAAO,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;CACtL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/Dropzone.svelte

@@ -25,5 +25,45 @@ function keydown(ev) {
   on:dragover
   on:drop>
   <slot />
-  <input {...$$restProps} bind:value bind:files bind:this={input} type="file" class="hidden" on:change on:click />
+  <input
+    {...$$restProps}
+    bind:value
+    bind:files
+    bind:this={input}
+    type="file"
+    class="hidden"
+    on:change
+    on:click />
 </label>
+
+<!--
+  @component
+  ## Feature
+  [Go to File Input](https://flowbite-svelte.com/docs/forms/file-input)
+  ## Props
+  @prop value: string = '';
+  @prop files: FileList | undefined = undefined;
+  @prop defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
+  ## Event
+  - on:focus
+  - on:blur
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  - on:dragenter
+  - on:dragleave
+  - on:dragover
+  - on:drop
+  ## Example
+  ```
+  <script>
+    import { Dropzone } from 'flowbite-svelte'
+  </script>
+  
+  <Dropzone id='dropzone'>
+    <svg aria-hidden="true" class="mb-3 w-10 h-10 text-gray-400" 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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+    <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+    <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+  </Dropzone>
+  ```
+-->

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

@@ -28,6 +28,36 @@ declare const __propDef: {
 export type DropzoneProps = typeof __propDef.props;
 export type DropzoneEvents = typeof __propDef.events;
 export type DropzoneSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to File Input](https://flowbite-svelte.com/docs/forms/file-input)
+ * ## Props
+ * @prop value: string = '';
+ * @prop files: FileList | undefined = undefined;
+ * @prop defaultClass: string = 'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
+ * ## Event
+ * - on:focus
+ * - on:blur
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * - on:dragenter
+ * - on:dragleave
+ * - on:dragover
+ * - on:drop
+ * ## Example
+ * ```
+ * <script>
+ *   import { Dropzone } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Dropzone id='dropzone'>
+ *   <svg aria-hidden="true" class="mb-3 w-10 h-10 text-gray-400" 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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
+ *   <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+ *   <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
+ * </Dropzone>
+ * ```
+ */
 export default class Dropzone extends SvelteComponentTyped<DropzoneProps, DropzoneEvents, DropzoneSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Dropzone.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;;gBADwF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC7C,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":"Dropzone.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Dropzone.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8BD,QAAA,MAAM,SAAS;;;;gBADwF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAC7C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/forms/Fileupload.svelte

@@ -23,3 +23,38 @@ export let inputClass = 'border !p-0 dark:text-gray-400';
     bind:files
     {...props} />
 </Input>
+
+<!--
+  @component
+  ## Feature
+  [Go to File Input](https://flowbite-svelte.com/docs/forms/file-input)
+  ## Props
+  @prop value: string = '';
+  @prop files: FileList | undefined = undefined;
+  @prop inputClass: string = 'border !p-0 dark:text-gray-400';
+  ## Event
+  - on:change
+  - on:keyup
+  - on:keydown
+  - on:keypress
+  - on:focus
+  - on:blur
+  - on:click
+  - on:mouseover
+  - on:mouseenter
+  - on:mouseleave
+  - on:paste
+  ## Example
+  ```
+  <script>
+    import { Fileupload, Label } from 'flowbite-svelte'
+    let value;
+  </script>
+
+  <Label class="space-y-2 mb-2">
+    <span>Upload file</span>
+    <Fileupload bind:value/>
+  </Label>
+  <Label>File: {value }</Label>
+  ```
+-->

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

@@ -26,6 +26,39 @@ declare const __propDef: {
 export type FileuploadProps = typeof __propDef.props;
 export type FileuploadEvents = typeof __propDef.events;
 export type FileuploadSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to File Input](https://flowbite-svelte.com/docs/forms/file-input)
+ * ## Props
+ * @prop value: string = '';
+ * @prop files: FileList | undefined = undefined;
+ * @prop inputClass: string = 'border !p-0 dark:text-gray-400';
+ * ## Event
+ * - on:change
+ * - on:keyup
+ * - on:keydown
+ * - on:keypress
+ * - on:focus
+ * - on:blur
+ * - on:click
+ * - on:mouseover
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:paste
+ * ## Example
+ * ```
+ * <script>
+ *   import { Fileupload, Label } from 'flowbite-svelte'
+ *   let value;
+ * </script>
+ *
+ * <Label class="space-y-2 mb-2">
+ *   <span>Upload file</span>
+ *   <Fileupload bind:value/>
+ * </Label>
+ * <Label>File: {value }</Label>
+ * ```
+ */
 export default class Fileupload extends SvelteComponentTyped<FileuploadProps, FileuploadEvents, FileuploadSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Fileupload.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Fileupload.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;gBADoF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACzC,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":"Fileupload.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Fileupload.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;gBADoF,QAAQ,GAAG,SAAS;;;;;;;;;;;;;;;;;;;CACzC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/forms/FloatingLabelInput.svelte

@@ -69,45 +69,79 @@ function setType(node, _type) {
         }
     };
 }
-;
 </script>
 
 <div class={divClasses[style]}>
-	<input
-		{id}
-		{...$$restProps}
-		bind:value
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:input
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		on:paste
-		use:setType={type}
-		placeholder=" "
-		class={classNames(
-			inputClasses[style],
-			inputColorClasses[color],
-			inputSizes[style][size],
-			$$props.class
-		)}
-	/>
+  <input
+    {id}
+    {...$$restProps}
+    bind:value
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:input
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    use:setType={type}
+    placeholder=" "
+    class={classNames(
+      inputClasses[style],
+      inputColorClasses[color],
+      inputSizes[style][size],
+      $$props.class
+    )} />
 
-	<label
-		for={id}
-		class={classNames(
-			labelClasses[style],
-			labelColorClasses[color],
-			labelSizes[style][size],
-			$$props.labelClass
-		)}
-	>
-		{label}
-	</label>
+  <label
+    for={id}
+    class={classNames(
+      labelClasses[style],
+      labelColorClasses[color],
+      labelSizes[style][size],
+      $$props.labelClass
+    )}>
+    {label}
+  </label>
 </div>
+
+<!--
+  @component
+  ## Feature
+  [Go to Floating Label](https://flowbite-svelte.com/docs/forms/floating-label)
+  ## Props
+  @prop id: string = generateId();
+  @prop style: 'filled' | 'outlined' | 'standard' = 'standard';
+  @prop type: InputType = 'text';
+  @prop size: 'small' | 'default' = 'default';
+  @prop color: 'base' | 'green' | 'red' = 'base';
+  @prop value: string = '';
+  @prop label: string = '';  
+  ## Event
+  - on:blur
+  - on:change
+  - on:click
+  - on:focus
+  - on:input
+  - on:keydown
+  - on:keypress
+  - on:keyup
+  - on:mouseenter
+  - on:mouseleave
+  - on:mouseover
+  - on:paste
+  ## Example
+  ```
+  <script>
+    import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+  </script>
+
+  <div id="exampleWrapper" class="grid gap-6 items-end w-full md:grid-cols-3">
+    <FloatingLabelInput style="filled" id="floating_filled" name="floating_filled" type="text" label="Floating filled"/>
+  </div>
+  ```
+-->

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

@@ -32,6 +32,41 @@ declare const __propDef: {
 export type FloatingLabelInputProps = typeof __propDef.props;
 export type FloatingLabelInputEvents = typeof __propDef.events;
 export type FloatingLabelInputSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Floating Label](https://flowbite-svelte.com/docs/forms/floating-label)
+ * ## Props
+ * @prop id: string = generateId();
+ * @prop style: 'filled' | 'outlined' | 'standard' = 'standard';
+ * @prop type: InputType = 'text';
+ * @prop size: 'small' | 'default' = 'default';
+ * @prop color: 'base' | 'green' | 'red' = 'base';
+ * @prop value: string = '';
+ * @prop label: string = '';
+ * ## Event
+ * - on:blur
+ * - on:change
+ * - on:click
+ * - on:focus
+ * - on:input
+ * - on:keydown
+ * - on:keypress
+ * - on:keyup
+ * - on:mouseenter
+ * - on:mouseleave
+ * - on:mouseover
+ * - on:paste
+ * ## Example
+ * ```
+ * <script>
+ *   import { FloatingLabelInput, Helper } from 'flowbite-svelte';
+ * </script>
+ *
+ * <div id="exampleWrapper" class="grid gap-6 items-end w-full md:grid-cols-3">
+ *   <FloatingLabelInput style="filled" id="floating_filled" name="floating_filled" type="text" label="Floating filled"/>
+ * </div>
+ * ```
+ */
 export default class FloatingLabelInput extends SvelteComponentTyped<FloatingLabelInputProps, FloatingLabelInputEvents, FloatingLabelInputSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiH1C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAkH1C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/forms/Helper.svelte

@@ -10,5 +10,20 @@ const colorClasses = {
 </script>
 
 <p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
-	<slot />
+  <slot />
 </p>
+
+<!--
+  @component
+  ## Feature
+  [Go to Forms](https://flowbite-svelte.com/docs/components/forms)
+  ## Props
+  @prop helperClass: string = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+  @prop color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
+  ## Example
+  ```
+    <Helper class="mt-2" color="green">
+      <span class="font-medium">Well done!</span> Some success message.
+    </Helper>
+  ```
+-->

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

@@ -15,6 +15,19 @@ declare const __propDef: {
 export type HelperProps = typeof __propDef.props;
 export type HelperEvents = typeof __propDef.events;
 export type HelperSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Forms](https://flowbite-svelte.com/docs/components/forms)
+ * ## Props
+ * @prop helperClass: string = 'text-xs font-normal text-gray-500 dark:text-gray-300';
+ * @prop color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
+ * ## Example
+ * ```
+ *   <Helper class="mt-2" color="green">
+ *     <span class="font-medium">Well done!</span> Some success message.
+ *   </Helper>
+ * ```
+ */
 export default class Helper extends SvelteComponentTyped<HelperProps, HelperEvents, HelperSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Helper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Helper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,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":"Helper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Helper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,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;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/forms/Input.svelte

@@ -81,3 +81,62 @@ let floatClass = 'flex absolute inset-y-0 items-center text-gray-500 dark:text-g
     <div class="{floatClass} right-0 pr-2.5"><slot name="right" /></div>
   {/if}
 </Wrapper>
+
+<!--
+  @component
+  ## Feature
+  [Go to Input Fields](https://flowbite-svelte.com/docs/forms/input-field)
+  - Setup
+  - Input fields
+  - Input sizes
+  - Disabled state
+  - Validation
+  - Input with icon
+  - Input group
+  - Icon click handler
+  - Helper text
+  - Number input
+  - Search input
+  - Dropdown
+  - Advanced usage
+  ## Props
+  @prop type: InputType = 'text';
+  @prop value: any = '';
+  @prop size: FormSizeType | undefined = undefined;
+  @prop defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+  @prop color: 'base' | 'green' | 'red' = 'base';
+  ## 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
+  ## Example
+  ```
+  <form>
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+      <div>
+        <Label for="first_name" class="mb-2">First name</Label>
+        <Input type="text" id="first_name" placeholder="John" required  />
+      </div>
+      <div>
+        <Label for="last_name" class="mb-2">Last name</Label>
+        <Input type="text" id="last_name" placeholder="Doe" required />
+      </div>
+      <div>
+        <Label for="company" class="mb-2">Company</Label>
+        <Input type="text" id="company" placeholder="Flowbite" required />
+      </div>
+    </div>
+    <Button type="submit">Submit</Button>
+  </form>
+  ```
+-->

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

@@ -41,6 +41,63 @@ declare const __propDef: {
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Input Fields](https://flowbite-svelte.com/docs/forms/input-field)
+ * - Setup
+ * - Input fields
+ * - Input sizes
+ * - Disabled state
+ * - Validation
+ * - Input with icon
+ * - Input group
+ * - Icon click handler
+ * - Helper text
+ * - Number input
+ * - Search input
+ * - Dropdown
+ * - Advanced usage
+ * ## Props
+ * @prop type: InputType = 'text';
+ * @prop value: any = '';
+ * @prop size: FormSizeType | undefined = undefined;
+ * @prop defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
+ * @prop color: 'base' | 'green' | 'red' = 'base';
+ * ## 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
+ * ## Example
+ * ```
+ * <form>
+ *   <div class="grid gap-6 mb-6 md:grid-cols-2">
+ *     <div>
+ *       <Label for="first_name" class="mb-2">First name</Label>
+ *       <Input type="text" id="first_name" placeholder="John" required  />
+ *     </div>
+ *     <div>
+ *       <Label for="last_name" class="mb-2">Last name</Label>
+ *       <Input type="text" id="last_name" placeholder="Doe" required />
+ *     </div>
+ *     <div>
+ *       <Label for="company" class="mb-2">Company</Label>
+ *       <Input type="text" id="company" placeholder="Flowbite" required />
+ *     </div>
+ *   </div>
+ *   <Button type="submit">Submit</Button>
+ * </form>
+ * ```
+ */
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA8F1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,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":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/Input.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,sBAEpC;AAMH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgG1C,QAAA,MAAM,SAAS;;;;gBADoH,GAAG;eAAS,YAAY,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACzF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/forms/InputAddon.svelte

@@ -27,3 +27,21 @@ $: divClass = classNames(textSizes[_size], prefixPadding[_size], background ? bo
 <div {...$$restProps} class={divClass}>
   <slot />
 </div>
+
+<!--
+  @component
+  ## Feature
+  [Go to Input Fields](https://flowbite-svelte.com/docs/forms/input-field)
+  ## Props
+  @prop size: 'sm' | 'md' | 'lg' | undefined = undefined;
+  ## Example
+  ```
+  <div>
+    <Label class="mb-2" for="input-addon-sm">Small additional text</Label>
+    <ButtonGroup class="w-full" size="sm">
+      <InputAddon>@</InputAddon>
+      <Input id="input-addon-sm" type="email" placeholder="elonmusk" />
+    </ButtonGroup>
+  </div>
+  ```
+-->

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

@@ -14,6 +14,22 @@ declare const __propDef: {
 export type InputAddonProps = typeof __propDef.props;
 export type InputAddonEvents = typeof __propDef.events;
 export type InputAddonSlots = typeof __propDef.slots;
+/**
+ * ## Feature
+ * [Go to Input Fields](https://flowbite-svelte.com/docs/forms/input-field)
+ * ## Props
+ * @prop size: 'sm' | 'md' | 'lg' | undefined = undefined;
+ * ## Example
+ * ```
+ * <div>
+ *   <Label class="mb-2" for="input-addon-sm">Small additional text</Label>
+ *   <ButtonGroup class="w-full" size="sm">
+ *     <InputAddon>@</InputAddon>
+ *     <Input id="input-addon-sm" type="email" placeholder="elonmusk" />
+ *   </ButtonGroup>
+ * </div>
+ * ```
+ */
 export default class InputAddon extends SvelteComponentTyped<InputAddonProps, InputAddonEvents, InputAddonSlots> {
 }
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"InputAddon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/InputAddon.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;eADyB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS;;;;;;;;CACQ,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":"InputAddon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/InputAddon.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;eADyB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS;;;;;;;;CACQ,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;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/forms/Label.svelte

@@ -23,3 +23,23 @@ $: labelClass = classNames(defaultClass, colorClasses[color], $$props.class);
 {:else}
   <slot />
 {/if}
+
+<!--
+  @component
+  ## 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>
+  ```
+-->