flowbite-svelte 0.36.4 → 0.37.1

package/README.md

@@ -1,4 +1,4 @@
-# FLOWBITE-SVELTE 
+# FLOWBITE-SVELTE
 
 [![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
 [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte)
@@ -510,4 +510,4 @@ View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/mai
 
 ## License
 
-Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).
+Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).

package/dist/accordion/Accordion.svelte

@@ -16,13 +16,47 @@ const ctx = {
     selected: multiple ? undefined : writable()
 };
 setContext('ctx', ctx);
-let frameClass = classNames(defaultClass, 
-// 'divide-y divide-gray-200 dark:divide-gray-700',
-// 'border-l border-r border-gray-200 dark:border-gray-700',
-// 'rounded-t-xl',
-$$props.class);
+let frameClass = classNames(defaultClass, $$props.class);
 </script>
 
 <Frame {...$$restProps} class={frameClass} color="none">
   <slot />
 </Frame>
+
+<!--
+  @component
+  ## Features
+  [Accordion](https://flowbite-svelte.com/docs/components/accordion)
+  - Default accordion
+  - Always open
+  - Color option
+  - Flush accordion
+  - Arrow style
+  - Icon Accordion
+  - Multiple mode
+  - Custom transitions
+  ## Props
+  @prop multiple: boolean = false;
+  @prop flush: boolean = false;
+  @prop activeClasses: string = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
+  @prop inactiveClasses: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+  @prop defaultClass: string = 'text-gray-500 dark:text-gray-400';
+  ## Example
+  ```
+  <script>
+    import { AccordionItem, Accordion } from 'flowbite-svelte'
+  </script>
+
+  <Accordion>
+    <AccordionItem>
+      <span slot="header">My Header 1</span>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+    </AccordionItem>
+    <AccordionItem>
+      <span slot="header">My Header 2</span>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>\
+    </AccordionItem>
+  </Accordion>
+  ```
+
+-->

package/dist/accordion/Accordion.svelte.d.ts

@@ -265,6 +265,41 @@ declare const __propDef: {
 export type AccordionProps = typeof __propDef.props;
 export type AccordionEvents = typeof __propDef.events;
 export type AccordionSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Accordion](https://flowbite-svelte.com/docs/components/accordion)
+ * - Default accordion
+ * - Always open
+ * - Color option
+ * - Flush accordion
+ * - Arrow style
+ * - Icon Accordion
+ * - Multiple mode
+ * - Custom transitions
+ * ## Props
+ * @prop multiple: boolean = false;
+ * @prop flush: boolean = false;
+ * @prop activeClasses: string = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
+ * @prop inactiveClasses: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
+ * @prop defaultClass: string = 'text-gray-500 dark:text-gray-400';
+ * ## Example
+ * ```
+ * <script>
+ *   import { AccordionItem, Accordion } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Accordion>
+ *   <AccordionItem>
+ *     <span slot="header">My Header 1</span>
+ *     <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+ *   </AccordionItem>
+ *   <AccordionItem>
+ *     <span slot="header">My Header 2</span>
+ *     <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>\
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
 export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
 }
 export {};

package/dist/accordion/Accordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC7B;AAsDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/Accordion.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC7B;AAkDH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/accordion/AccordionItem.svelte

@@ -68,3 +68,32 @@ $: buttonClass = classNames(defaultClass, ctx.flush || borderClass, borderBottom
     </div>
   </div>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Accordion page](https://flowbite-svelte.com/docs/components/accordion)
+  - Default bottom navigation
+  - Menu items with border
+  - Application bar example
+  - Example with pagination
+  - Button group bottom bar
+  - Card with bottom bar
+
+  ## Props
+  @prop open: boolean = false;
+  @prop activeClasses: string | undefined = undefined;
+  @prop inactiveClasses: string | undefined = undefined;
+  @prop defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
+  @prop transitionType: TransitionTypes = 'slide';
+  @prop transitionParams: TransitionParamTypes = {};
+  @prop paddingFlush: string = 'py-5';
+  @prop paddingDefault: string = 'p-5';
+  @prop textFlushOpen: string = 'text-gray-900 dark:text-white';
+  @prop textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
+  @prop borderClass: string = 'border-l border-r group-first:border-t';
+  @prop borderOpenClass: string = 'border-l border-r';
+  @prop borderBottomClass: string = 'border-b';
+  @prop borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
+
+-->

package/dist/accordion/AccordionItem.svelte.d.ts

@@ -31,6 +31,32 @@ declare const __propDef: {
 export type AccordionItemProps = typeof __propDef.props;
 export type AccordionItemEvents = typeof __propDef.events;
 export type AccordionItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Accordion page](https://flowbite-svelte.com/docs/components/accordion)
+ * - Default bottom navigation
+ * - Menu items with border
+ * - Application bar example
+ * - Example with pagination
+ * - Button group bottom bar
+ * - Card with bottom bar
+ *
+ * ## Props
+ * @prop open: boolean = false;
+ * @prop activeClasses: string | undefined = undefined;
+ * @prop inactiveClasses: string | undefined = undefined;
+ * @prop defaultClass: string = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700';
+ * @prop transitionType: TransitionTypes = 'slide';
+ * @prop transitionParams: TransitionParamTypes = {};
+ * @prop paddingFlush: string = 'py-5';
+ * @prop paddingDefault: string = 'p-5';
+ * @prop textFlushOpen: string = 'text-gray-900 dark:text-white';
+ * @prop textFlushDefault: string = 'text-gray-500 dark:text-gray-400';
+ * @prop borderClass: string = 'border-l border-r group-first:border-t';
+ * @prop borderOpenClass: string = 'border-l border-r';
+ * @prop borderBottomClass: string = 'border-b';
+ * @prop borderSharedClass: string = 'border-gray-200 dark:border-gray-700';
+ */
 export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
 }
 export {};

package/dist/accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAOD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAgGtE,QAAA,MAAM,SAAS;;;;wBADqe,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CAC9d,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/accordion/AccordionItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAOD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAkGtE,QAAA,MAAM,SAAS;;;;wBADqe,MAAM,GAAG,SAAS;0BAAoB,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;;CAC9d,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/alerts/Alert.svelte

@@ -2,9 +2,9 @@
 import { createEventDispatcher } from 'svelte';
 import CloseButton from '../utils/CloseButton.svelte';
 import Frame from '../utils/Frame.svelte';
-const dispatch = createEventDispatcher();
 export let dismissable = false;
 export let accent = false;
+const dispatch = createEventDispatcher();
 let hidden = false;
 const handleHide = () => {
     hidden = !hidden;
@@ -45,3 +45,43 @@ $: {
   </div>
   <slot name="extra" />
 </Frame>
+
+<!--
+  @component
+  ## Features
+  [Go to Alert](https://flowbite-svelte.com/docs/components/alert)
+  - Default alert
+  - Alerts with icon
+  - Bordered alerts
+  - Alerts with list
+  - Dismissable alerts
+  - Border accent
+  - Additional content
+  - Custom color
+  ## Props
+  @prop dismissable: boolean = false;
+  @prop accent: boolean = false;
+  ## Event
+  - on:click
+  - on:change
+  - on:keydown
+  - on:keyup
+  - on:focus
+  - on:blur
+  - on:mouseenter
+  - on:mouseleave 
+
+  ## Example
+  ```
+  <script>
+  import {Alert} from "flowbite-svelte";
+  </script>
+
+  <Alert>
+    <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
+  </Alert>
+  <Alert color="red">
+    <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
+  </Alert>
+  ```
+-->

package/dist/alerts/Alert.svelte.d.ts

@@ -267,6 +267,44 @@ declare const __propDef: {
 export type AlertProps = typeof __propDef.props;
 export type AlertEvents = typeof __propDef.events;
 export type AlertSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Alert](https://flowbite-svelte.com/docs/components/alert)
+ * - Default alert
+ * - Alerts with icon
+ * - Bordered alerts
+ * - Alerts with list
+ * - Dismissable alerts
+ * - Border accent
+ * - Additional content
+ * - Custom color
+ * ## Props
+ * @prop dismissable: boolean = false;
+ * @prop accent: boolean = false;
+ * ## Event
+ * - on:click
+ * - on:change
+ * - on:keydown
+ * - on:keyup
+ * - on:focus
+ * - on:blur
+ * - on:mouseenter
+ * - on:mouseleave
+ *
+ * ## Example
+ * ```
+ * <script>
+ * import {Alert} from "flowbite-svelte";
+ * </script>
+ *
+ * <Alert>
+ *   <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
+ * </Alert>
+ * <Alert color="red">
+ *   <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
+ * </Alert>
+ * ```
+ */
 export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
 }
 export {};

package/dist/alerts/Alert.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/alerts/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,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":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/alerts/Alert.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2DD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/avatar/Avatar.svelte

@@ -39,3 +39,38 @@ $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1
 {:else}
   <img {alt} {src} {...$$restProps} class={avatarClass} />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Avatar](https://flowbite-svelte.com/docs/components/avatar)
+  - Bordered
+  - Placeholder
+  - Placeholder initials
+  - Avatar tooltip
+  - Dot indicator
+  - Stacked
+  - Avatar text
+  - User dropdown
+  - Sizes
+  ## Props
+  @prop src: string = '';
+  @prop href: string | undefined = undefined;
+  @prop rounded: boolean = false;
+  @prop border: boolean = false;
+  @prop stacked: boolean = false;
+  @prop dot: object | undefined = undefined;
+  @prop alt: string = '';
+  @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+  ## Example
+  ```
+  <script>
+    import { Avatar } from "flowbite-svelte"
+  </script>
+
+  <div class="flex space-x-4">
+    <Avatar src="/images/profile-picture-2.webp"/>
+    <Avatar src="/images/profile-picture-2.webp" rounded/>
+  </div>
+  ```
+-->

package/dist/avatar/Avatar.svelte.d.ts

@@ -21,6 +21,39 @@ declare const __propDef: {
 export type AvatarProps = typeof __propDef.props;
 export type AvatarEvents = typeof __propDef.events;
 export type AvatarSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Avatar](https://flowbite-svelte.com/docs/components/avatar)
+ * - Bordered
+ * - Placeholder
+ * - Placeholder initials
+ * - Avatar tooltip
+ * - Dot indicator
+ * - Stacked
+ * - Avatar text
+ * - User dropdown
+ * - Sizes
+ * ## Props
+ * @prop src: string = '';
+ * @prop href: string | undefined = undefined;
+ * @prop rounded: boolean = false;
+ * @prop border: boolean = false;
+ * @prop stacked: boolean = false;
+ * @prop dot: object | undefined = undefined;
+ * @prop alt: string = '';
+ * @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Avatar } from "flowbite-svelte"
+ * </script>
+ *
+ * <div class="flex space-x-4">
+ *   <Avatar src="/images/profile-picture-2.webp"/>
+ *   <Avatar src="/images/profile-picture-2.webp" rounded/>
+ * </div>
+ * ```
+ */
 export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
 }
 export {};

package/dist/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Avatar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;;eAD4I,MAAM,GAAG,SAAS;;;;cAAgE,MAAM,GAAG,SAAS;;;;;;;;;;CACjL,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":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Avatar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6DD,QAAA,MAAM,SAAS;;;;eAD4I,MAAM,GAAG,SAAS;;;;cAAgE,MAAM,GAAG,SAAS;;;;;;;;;;CACjL,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/avatar/Placeholder.svelte

@@ -2,14 +2,16 @@
 </script>
 
 <svg
-	class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
-	fill="currentColor"
-	viewBox="0 0 16 16"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		fill-rule="evenodd"
-		d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-		clip-rule="evenodd"
-	/>
+  class="text-gray-400 bg-gray-100 dark:bg-gray-600 {rounded ? 'rounded' : 'rounded-full'}"
+  fill="currentColor"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
 </svg>
+
+<!--
+  @component
+  ## Features
+  [Go to Avatar](https://flowbite-svelte.com/docs/components/avatar)
+  @prop rounded: boolean = false;
+-->

package/dist/avatar/Placeholder.svelte.d.ts

@@ -11,6 +11,11 @@ declare const __propDef: {
 export type PlaceholderProps = typeof __propDef.props;
 export type PlaceholderEvents = typeof __propDef.events;
 export type PlaceholderSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Avatar](https://flowbite-svelte.com/docs/components/avatar)
+ * @prop rounded: boolean = false;
+ */
 export default class Placeholder extends SvelteComponentTyped<PlaceholderProps, PlaceholderEvents, PlaceholderSlots> {
 }
 export {};

package/dist/avatar/Placeholder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Placeholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAWD,QAAA,MAAM,SAAS;;;;;;;;CAAwC,CAAC;AACxD,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":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/avatar/Placeholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;CAAwC,CAAC;AACxD,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;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/badges/Badge.svelte

@@ -94,3 +94,36 @@ const handleHide = () => {
     </slot>
   {/if}
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Badge](https://flowbite-svelte.com/docs/components/badge)
+  - Default badge
+  - Large badges
+  - Bordered badge
+  - Pills badge
+  - Badges as links
+  - Badges with icon
+  - Notification badge
+  - Button with badge
+  - Badge with icon only
+  - Dismissable badges
+  ## Props
+  @prop color: 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'blue';
+  @prop large: boolean = false;
+  @prop border: boolean = false;
+  @prop href: string | undefined = undefined;
+  @prop rounded: boolean = false;
+  @prop index: boolean = false;
+  @prop dismissable: boolean = false;
+  ## Example
+  ```
+  <script>
+    import { Badge } from 'flowbite-svelte';
+  </script>
+  
+  <Badge>Default</Badge>
+  <Badge color="dark">Dark</Badge>
+  ```
+-->

package/dist/badges/Badge.svelte.d.ts

@@ -25,6 +25,37 @@ declare const __propDef: {
 export type BadgeProps = typeof __propDef.props;
 export type BadgeEvents = typeof __propDef.events;
 export type BadgeSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Badge](https://flowbite-svelte.com/docs/components/badge)
+ * - Default badge
+ * - Large badges
+ * - Bordered badge
+ * - Pills badge
+ * - Badges as links
+ * - Badges with icon
+ * - Notification badge
+ * - Button with badge
+ * - Badge with icon only
+ * - Dismissable badges
+ * ## Props
+ * @prop color: 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none' = 'blue';
+ * @prop large: boolean = false;
+ * @prop border: boolean = false;
+ * @prop href: string | undefined = undefined;
+ * @prop rounded: boolean = false;
+ * @prop index: boolean = false;
+ * @prop dismissable: boolean = false;
+ * ## Example
+ * ```
+ * <script>
+ *   import { Badge } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Badge>Default</Badge>
+ * <Badge color="dark">Dark</Badge>
+ * ```
+ */
 export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
 }
 export {};

package/dist/badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/badges/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4HD,QAAA,MAAM,SAAS;;;;;;eADsQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CACzN,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":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/badges/Badge.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8HD,QAAA,MAAM,SAAS;;;;;;eADsQ,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;CACzN,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/banner/Banner.svelte

@@ -31,26 +31,72 @@ $: handleHide = () => {
 </script>
 
 {#if show}
-  <div {id} tabindex="-1" class={divClass} {...$$restProps} >
+  <div {id} tabindex="-1" class={divClass} {...$$restProps}>
     <slot name="header" />
     <div class={div2Class}>
-        <slot />
+      <slot />
     </div>
     {#if dismissable}
-    <div class="flex items-center">
-      <CloseButton
-        class="-mx-1.5 -my-1.5"
-        color={$$restProps.color}
-        on:click={handleHide}
-        on:click
-        on:change
-        on:keydown
-        on:keyup
-        on:focus
-        on:blur
-        on:mouseenter
-        on:mouseleave />
-    </div>
+      <div class="flex items-center">
+        <CloseButton
+          class="-mx-1.5 -my-1.5"
+          color={$$restProps.color}
+          on:click={handleHide}
+          on:click
+          on:change
+          on:keydown
+          on:keyup
+          on:focus
+          on:blur
+          on:mouseenter
+          on:mouseleave />
+      </div>
     {/if}
   </div>
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Banner](https://flowbite-svelte.com/docs/components/banner)
+  - Setup
+  - Default sticky banner
+  - Bottom banner position
+  - Marketing CTA banner
+  - Newsletter sign-up banner
+  - Informational banner
+  ## Props
+  @prop id: string = 'sticky-banner';
+  @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+  @prop dismissable: boolean = true;
+  @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' | 'custom' = 'default';
+  @prop divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+  @prop insideDiv: string = 'flex';
+  ## Event
+  - on:click
+  - on:change
+  - on:keydown
+  - on:keyup
+  - on:focus
+  - on:blur
+  - on:mouseenter
+  - on:mouseleave
+  ## Example
+  ```
+  <script>
+    import { Banner } from "flowbite-svelte"
+  </script>
+
+  <Banner id="default-banner" position="absolute">
+    <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
+      <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
+          <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path>
+          </svg>
+          <span class="sr-only">Light bulb</span>
+      </span>
+      <span>New brand identity has been launched for the <a href="https://flowbite.com" class="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
+    </p>
+  </Banner>
+  ```
+-->

package/dist/banner/Banner.svelte.d.ts

@@ -29,6 +29,50 @@ declare const __propDef: {
 export type BannerProps = typeof __propDef.props;
 export type BannerEvents = typeof __propDef.events;
 export type BannerSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Banner](https://flowbite-svelte.com/docs/components/banner)
+ * - Setup
+ * - Default sticky banner
+ * - Bottom banner position
+ * - Marketing CTA banner
+ * - Newsletter sign-up banner
+ * - Informational banner
+ * ## Props
+ * @prop id: string = 'sticky-banner';
+ * @prop position: 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky' = 'sticky';
+ * @prop dismissable: boolean = true;
+ * @prop bannerType: 'default' | 'bottom' | 'cta' | 'signup' | 'info' | 'custom' = 'default';
+ * @prop divDefault: string = 'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600';
+ * @prop insideDiv: string = 'flex';
+ * ## Event
+ * - on:click
+ * - on:change
+ * - on:keydown
+ * - on:keyup
+ * - on:focus
+ * - on:blur
+ * - on:mouseenter
+ * - on:mouseleave
+ * ## Example
+ * ```
+ * <script>
+ *   import { Banner } from "flowbite-svelte"
+ * </script>
+ *
+ * <Banner id="default-banner" position="absolute">
+ *   <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">
+ *     <span class="inline-flex p-1 mr-3 bg-gray-200 rounded-full dark:bg-gray-600">
+ *         <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+ *             <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z"></path>
+ *         </svg>
+ *         <span class="sr-only">Light bulb</span>
+ *     </span>
+ *     <span>New brand identity has been launched for the <a href="https://flowbite.com" class="inline font-medium text-blue-600 underline dark:text-blue-500 underline-offset-2 decoration-600 dark:decoration-500 decoration-solid hover:no-underline">Flowbite Library</a></span>
+ *   </p>
+ * </Banner>
+ * ```
+ */
 export default class Banner extends SvelteComponentTyped<BannerProps, BannerEvents, BannerSlots> {
 }
 export {};

package/dist/banner/Banner.svelte.d.ts.map

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