flowbite-svelte 0.36.5 → 0.37.2

package/dist/device-mockup/Ios.svelte

@@ -1,10 +1,38 @@
-<script>export let iosTop = 'w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute';
-export let iosLeftTop = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let iosLeftBot = 'h-[46px] w-[3px] bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let iosRight = 'h-[64px] w-[3px] bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+<script>export let iosTop;
+export let iosLeftTop;
+export let iosLeftBot;
+export let iosRight;
 </script>
 
 <div class={iosTop} />
 <div class={iosLeftTop} />
 <div class={iosLeftBot} />
 <div class={iosRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop iosTop: string;
+  @prop iosLeftTop: string;
+  @prop iosLeftBot: string;
+  @prop iosRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="ios">
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png"
+      class="dark:hidden w-[272px] h-[572px]"
+      alt="ios example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png"
+      class="hidden dark:block w-[272px] h-[572px]"
+      alt="ios example 2" />
+  </DeviceMockup>
+  ```
+-->

package/dist/device-mockup/Ios.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        iosTop?: string | undefined;
-        iosLeftTop?: string | undefined;
-        iosLeftBot?: string | undefined;
-        iosRight?: string | undefined;
+        iosTop: string;
+        iosLeftTop: string;
+        iosLeftBot: string;
+        iosRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +14,32 @@ declare const __propDef: {
 export type IosProps = typeof __propDef.props;
 export type IosEvents = typeof __propDef.events;
 export type IosSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop iosTop: string;
+ * @prop iosLeftTop: string;
+ * @prop iosLeftBot: string;
+ * @prop iosRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="ios">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png"
+ *     class="dark:hidden w-[272px] h-[572px]"
+ *     alt="ios example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png"
+ *     class="hidden dark:block w-[272px] h-[572px]"
+ *     alt="ios example 2" />
+ * </DeviceMockup>
+ * ```
+ */
 export default class Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
 }
 export {};

package/dist/device-mockup/Ios.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}
+{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;gBADqG,MAAM;oBAAc,MAAM;oBAAc,MAAM;kBAAY,MAAM;;;;;;CAC7H,CAAC;AACxD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}

package/dist/device-mockup/Smartwatch.svelte

@@ -1,6 +1,32 @@
-<script>export let smartRightTop = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
-export let smartRightBot = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+<script>export let smartRightTop;
+export let smartRightBot;
 </script>
 
 <div class={smartRightTop} />
 <div class={smartRightBot} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop smartRightTop: string;
+  @prop smartRightBot: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="smartwatch">
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image.png"
+      class="dark:hidden h-[193px] w-[188px"
+      alt="smartwatch example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image-dark.png"
+      class="hidden dark:block h-[193px] w-[188px]"
+      alt="smartwatch example 2" />
+  </DeviceMockup>
+  ```
+-->

package/dist/device-mockup/Smartwatch.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        smartRightTop?: string | undefined;
-        smartRightBot?: string | undefined;
+        smartRightTop: string;
+        smartRightBot: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -12,6 +12,30 @@ declare const __propDef: {
 export type SmartwatchProps = typeof __propDef.props;
 export type SmartwatchEvents = typeof __propDef.events;
 export type SmartwatchSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop smartRightTop: string;
+ * @prop smartRightBot: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="smartwatch">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image.png"
+ *     class="dark:hidden h-[193px] w-[188px"
+ *     alt="smartwatch example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image-dark.png"
+ *     class="hidden dark:block h-[193px] w-[188px]"
+ *     alt="smartwatch example 2" />
+ * </DeviceMockup>
+ * ```
+ */
 export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps, SmartwatchEvents, SmartwatchSlots> {
 }
 export {};

package/dist/device-mockup/Smartwatch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Smartwatch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Smartwatch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;;CAAwC,CAAC;AACxD,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":"Smartwatch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Smartwatch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;uBADkF,MAAM;uBAAiB,MAAM;;;;;;CACvE,CAAC;AACxD,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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/device-mockup/Tablet.svelte

@@ -1,10 +1,38 @@
-<script>export let tabletLeftTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
-export let tabletLeftMid = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
-export let tabletLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
-export let tabletRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+<script>export let tabletLeftTop;
+export let tabletLeftMid;
+export let tabletLeftBot;
+export let tabletRight;
 </script>
 
 <div class={tabletLeftTop} />
 <div class={tabletLeftMid} />
 <div class={tabletLeftBot} />
 <div class={tabletRight} />
+
+<!--
+  @component
+  ## Features
+  [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+  ## Props
+  @prop tabletLeftTop: string;
+  @prop tabletLeftMid: string;
+  @prop tabletLeftBot: string;
+  @prop tabletRight: string;
+  ## Example
+  ```
+  <script>
+    import { DeviceMockup } from 'flowbite-svelte';
+  </script>
+
+  <DeviceMockup device="tablet">
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image.png"
+      class="dark:hidden h-[426px] md:h-[654px]"
+      alt="tablet example 1" />
+    <img
+      src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image-dark.png"
+      class="hidden dark:block h-[426px] md:h-[654px]"
+      alt="tablet example 2" />
+  </DeviceMockup>
+  ```
+-->

package/dist/device-mockup/Tablet.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        tabletLeftTop?: string | undefined;
-        tabletLeftMid?: string | undefined;
-        tabletLeftBot?: string | undefined;
-        tabletRight?: string | undefined;
+        tabletLeftTop: string;
+        tabletLeftMid: string;
+        tabletLeftBot: string;
+        tabletRight: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +14,32 @@ declare const __propDef: {
 export type TabletProps = typeof __propDef.props;
 export type TabletEvents = typeof __propDef.events;
 export type TabletSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Device Mockups](https://flowbite-svelte.com/docs/components/device-mockups)
+ * ## Props
+ * @prop tabletLeftTop: string;
+ * @prop tabletLeftMid: string;
+ * @prop tabletLeftBot: string;
+ * @prop tabletRight: string;
+ * ## Example
+ * ```
+ * <script>
+ *   import { DeviceMockup } from 'flowbite-svelte';
+ * </script>
+ *
+ * <DeviceMockup device="tablet">
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image.png"
+ *     class="dark:hidden h-[426px] md:h-[654px]"
+ *     alt="tablet example 1" />
+ *   <img
+ *     src="https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image-dark.png"
+ *     class="hidden dark:block h-[426px] md:h-[654px]"
+ *     alt="tablet example 2" />
+ * </DeviceMockup>
+ * ```
+ */
 export default class Tablet extends SvelteComponentTyped<TabletProps, TabletEvents, TabletSlots> {
 }
 export {};

package/dist/device-mockup/Tablet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tablet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Tablet.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,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":"Tablet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Tablet.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;uBAD4I,MAAM;uBAAiB,MAAM;uBAAiB,MAAM;qBAAe,MAAM;;;;;;CAC7K,CAAC;AACxD,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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/drawer/Drawer.svelte

@@ -72,3 +72,75 @@ let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backd
     </div>
   {/if}
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Drawer](https://flowbite-svelte.com/docs/components/drawer)
+  - Set up
+  - Default drawer
+  - Drawer navigation
+  - Contact form
+  - Form elements
+  - Placement
+  - Backdrop
+  - Position
+  - Disabling outside click and backdrop
+  - Disabling only outside click
+  ## Props
+  @prop activateClickOutside: boolean = true;
+  @prop hidden: boolean = true;
+  @prop position: 'fixed' | 'absolute' = 'fixed';
+  @prop leftOffset: string = 'inset-y-0 left-0';
+  @prop rightOffset: string = 'inset-y-0 right-0';
+  @prop topOffset: string = 'inset-x-0 top-0';
+  @prop bottomOffset: string = 'inset-x-0 bottom-0';
+  @prop width: string = 'w-80';
+  @prop backdrop: boolean = true;
+  @prop bgColor: string = 'bg-gray-900';
+  @prop bgOpacity: string = 'bg-opacity-75';
+  @prop placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+  @prop id: string = 'drawer-example';
+  @prop divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+  @prop transitionParams: drawerTransitionParamTypes = {};
+  @prop transitionType: drawerTransitionTypes = 'fly';
+  ## Example
+  ```
+  <script>
+    import { Drawer, Button, CloseButton } from 'flowbite-svelte';
+    import { sineIn } from 'svelte/easing';
+    let hidden1 = true; 
+    let transitionParams = {
+      x: -320,
+      duration: 200,
+      easing: sineIn
+    };
+  </script>
+
+  <div class="text-center">
+    <Button on:click={() => (hidden1 = false)}>Show drawer</Button>
+  </div>
+
+  <Drawer transitionType="fly" {transitionParams} bind:hidden={hidden1} id='sidebar1'>
+  <div class='flex items-center'>
+    <h5
+      id="drawer-label"
+      class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+      <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
+    </h5>
+    <CloseButton on:click={() => (hidden1 = true)} class='mb-4 dark:text-white'/>
+      </div>
+    <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
+      Supercharge your hiring by taking advantage of our <a
+        href="/"
+        class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
+      Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
+      job board.
+    </p>
+    <div class="grid grid-cols-2 gap-4">
+      <Button color="light" href="/">Learn more</Button>
+      <Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
+    </div>
+  </Drawer>
+  ```
+-->

package/dist/drawer/Drawer.svelte.d.ts

@@ -32,6 +32,76 @@ declare const __propDef: {
 export type DrawerProps = typeof __propDef.props;
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Drawer](https://flowbite-svelte.com/docs/components/drawer)
+ * - Set up
+ * - Default drawer
+ * - Drawer navigation
+ * - Contact form
+ * - Form elements
+ * - Placement
+ * - Backdrop
+ * - Position
+ * - Disabling outside click and backdrop
+ * - Disabling only outside click
+ * ## Props
+ * @prop activateClickOutside: boolean = true;
+ * @prop hidden: boolean = true;
+ * @prop position: 'fixed' | 'absolute' = 'fixed';
+ * @prop leftOffset: string = 'inset-y-0 left-0';
+ * @prop rightOffset: string = 'inset-y-0 right-0';
+ * @prop topOffset: string = 'inset-x-0 top-0';
+ * @prop bottomOffset: string = 'inset-x-0 bottom-0';
+ * @prop width: string = 'w-80';
+ * @prop backdrop: boolean = true;
+ * @prop bgColor: string = 'bg-gray-900';
+ * @prop bgOpacity: string = 'bg-opacity-75';
+ * @prop placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+ * @prop id: string = 'drawer-example';
+ * @prop divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+ * @prop transitionParams: drawerTransitionParamTypes = {};
+ * @prop transitionType: drawerTransitionTypes = 'fly';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Drawer, Button, CloseButton } from 'flowbite-svelte';
+ *   import { sineIn } from 'svelte/easing';
+ *   let hidden1 = true;
+ *   let transitionParams = {
+ *     x: -320,
+ *     duration: 200,
+ *     easing: sineIn
+ *   };
+ * </script>
+ *
+ * <div class="text-center">
+ *   <Button on:click={() => (hidden1 = false)}>Show drawer</Button>
+ * </div>
+ *
+ * <Drawer transitionType="fly" {transitionParams} bind:hidden={hidden1} id='sidebar1'>
+ * <div class='flex items-center'>
+ *   <h5
+ *     id="drawer-label"
+ *     class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+ *     <svg class="w-5 h-5 mr-2" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>Info
+ *   </h5>
+ *   <CloseButton on:click={() => (hidden1 = true)} class='mb-4 dark:text-white'/>
+ *     </div>
+ *   <p class="mb-6 text-sm text-gray-500 dark:text-gray-400">
+ *     Supercharge your hiring by taking advantage of our <a
+ *       href="/"
+ *       class="text-blue-600 underline dark:text-blue-500 hover:no-underline">limited-time sale</a> for
+ *     Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design
+ *     job board.
+ *   </p>
+ *   <div class="grid grid-cols-2 gap-4">
+ *     <Button color="light" href="/">Learn more</Button>
+ *     <Button href="/" >Get access <svg class="w-4 h-4 ml-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></Button>
+ *   </div>
+ * </Drawer>
+ * ```
+ */
 export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
 }
 export {};

package/dist/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/drawer/Drawer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA6ElF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;yBAD6wB,qBAAqB;;;;;;;;;;CACnuB,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":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/drawer/Drawer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AA+ElF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;yBAD6wB,qBAAqB;;;;;;;;;;CACnuB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/dropdowns/Dropdown.svelte

@@ -2,6 +2,9 @@
 import Popper from '../utils/Popper.svelte';
 export let open = false;
 export let frameClass = '';
+export let headerClass = 'py-1 overflow-hidden rounded-t';
+export let ulClass = 'py-1 w-44';
+export let footerClass = 'py-1 overflow-hidden rounded-b';
 $: {
     // set default values
     $$restProps.arrow = $$restProps.arrow ?? false;
@@ -17,16 +20,67 @@ $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', fr
 
 <Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
   {#if $$slots.header}
-    <div class="py-1 overflow-hidden rounded-t">
+    <div class={headerClass}>
       <slot name="header" />
     </div>
   {/if}
-  <ul class={$$props.class ?? 'py-1 w-44'}>
+  <ul class={$$props.class ?? { ulClass }}>
     <slot />
   </ul>
   {#if $$slots.footer}
-    <div class="py-1 overflow-hidden rounded-b">
+    <div class={footerClass}>
       <slot name="footer" />
     </div>
   {/if}
 </Popper>
+
+<!--
+  @component
+  ## Features
+  [Go to Dropdown](https://flowbite-svelte.com/docs/components/dropdown)
+  - Setup
+  - Examples
+  - Dropdown divider
+  - Dropdown header
+  - Multi-level dropdown
+  - Programatic open/close
+  - Dropdown with checkbox
+  - Background hover
+  - Helper text
+  - Dropdown with radio
+  - Background hover
+  - Helper text
+  - Dropdown with toggle switch
+  - Dropdown navbar
+  - Dropdown with scrolling
+  - Dropdown with search
+  - Menu icon
+  - Notification bell
+  - User avatar
+  - Avatar with name
+  - Sizes
+  - Placement
+  - Double placement
+  - Events
+  ## Props
+  @prop open: boolean = false;
+  @prop frameClass: string = '';
+  @prop headerClass: string = 'py-1 overflow-hidden rounded-t';
+  @prop ulClass: string = 'py-1 w-44';
+  @prop footerClass: string = 'py-1 overflow-hidden rounded-b';
+  ## Example
+  ```
+  <script>
+    import { Button, Dropdown, DropdownItem, Chevron } from 'flowbite-svelte'
+  </script>
+  
+  <Button><Chevron>Dropdown button</Chevron></Button>
+  <Dropdown >
+    <DropdownItem>Dashboard</DropdownItem>
+    <DropdownItem>Settings</DropdownItem>
+    <DropdownItem>Earnings</DropdownItem>
+    <DropdownItem>Sign out</DropdownItem>
+  </Dropdown>
+  ```
+
+-->

package/dist/dropdowns/Dropdown.svelte.d.ts

@@ -4,6 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         open?: boolean | undefined;
         frameClass?: string | undefined;
+        headerClass?: string | undefined;
+        ulClass?: string | undefined;
+        footerClass?: string | undefined;
     };
     events: {
         show: CustomEvent<any>;
@@ -19,6 +22,54 @@ declare const __propDef: {
 export type DropdownProps = typeof __propDef.props;
 export type DropdownEvents = typeof __propDef.events;
 export type DropdownSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Dropdown](https://flowbite-svelte.com/docs/components/dropdown)
+ * - Setup
+ * - Examples
+ * - Dropdown divider
+ * - Dropdown header
+ * - Multi-level dropdown
+ * - Programatic open/close
+ * - Dropdown with checkbox
+ * - Background hover
+ * - Helper text
+ * - Dropdown with radio
+ * - Background hover
+ * - Helper text
+ * - Dropdown with toggle switch
+ * - Dropdown navbar
+ * - Dropdown with scrolling
+ * - Dropdown with search
+ * - Menu icon
+ * - Notification bell
+ * - User avatar
+ * - Avatar with name
+ * - Sizes
+ * - Placement
+ * - Double placement
+ * - Events
+ * ## Props
+ * @prop open: boolean = false;
+ * @prop frameClass: string = '';
+ * @prop headerClass: string = 'py-1 overflow-hidden rounded-t';
+ * @prop ulClass: string = 'py-1 w-44';
+ * @prop footerClass: string = 'py-1 overflow-hidden rounded-b';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Button, Dropdown, DropdownItem, Chevron } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Button><Chevron>Dropdown button</Chevron></Button>
+ * <Dropdown >
+ *   <DropdownItem>Dashboard</DropdownItem>
+ *   <DropdownItem>Settings</DropdownItem>
+ *   <DropdownItem>Earnings</DropdownItem>
+ *   <DropdownItem>Sign out</DropdownItem>
+ * </Dropdown>
+ * ```
+ */
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
 }
 export {};

package/dist/dropdowns/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,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":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgDD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/dropdowns/DropdownDivider.svelte

@@ -3,3 +3,11 @@ export let divClass = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)} />
+
+<!--
+  @component
+  ## Features
+  [Go to Dropdown](https://flowbite-svelte.com/docs/components/dropdown)
+  ## Props
+  @prop  divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+-->

package/dist/dropdowns/DropdownDivider.svelte.d.ts

@@ -12,6 +12,12 @@ declare const __propDef: {
 export type DropdownDividerProps = typeof __propDef.props;
 export type DropdownDividerEvents = typeof __propDef.events;
 export type DropdownDividerSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Dropdown](https://flowbite-svelte.com/docs/components/dropdown)
+ * ## Props
+ * @prop  divClass: string = 'my-1 h-px bg-gray-100 dark:bg-gray-600';
+ */
 export default class DropdownDivider extends SvelteComponentTyped<DropdownDividerProps, DropdownDividerEvents, DropdownDividerSlots> {
 }
 export {};

package/dist/dropdowns/DropdownDivider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownDivider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownDivider.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAYD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"DropdownDivider.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownDivider.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/dropdowns/DropdownHeader.svelte

@@ -1,7 +1,6 @@
 <script>import classNames from 'classnames';
 import DropdownDivider from './DropdownDivider.svelte';
 export let divClass = 'py-2 px-4 text-gray-700 dark:text-white';
-// 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
 export let divider = true;
 </script>
 
@@ -11,3 +10,12 @@ export let divider = true;
 {#if divider}
   <DropdownDivider />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Dropdown](https://flowbite-svelte.com/docs/components/dropdown)
+  ## Props
+  @prop divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
+  @prop divider: boolean = true;
+-->

package/dist/dropdowns/DropdownHeader.svelte.d.ts

@@ -15,6 +15,13 @@ declare const __propDef: {
 export type DropdownHeaderProps = typeof __propDef.props;
 export type DropdownHeaderEvents = typeof __propDef.events;
 export type DropdownHeaderSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Dropdown](https://flowbite-svelte.com/docs/components/dropdown)
+ * ## Props
+ * @prop divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
+ * @prop divider: boolean = true;
+ */
 export default class DropdownHeader extends SvelteComponentTyped<DropdownHeaderProps, DropdownHeaderEvents, DropdownHeaderSlots> {
 }
 export {};