flowbite-svelte 0.36.5 → 0.37.2

package/dist/typography/A.svelte.d.ts

@@ -16,6 +16,37 @@ declare const __propDef: {
 export type AProps = typeof __propDef.props;
 export type AEvents = typeof __propDef.events;
 export type ASlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Link](https://flowbite-svelte.com/docs/typography/link)
+ * - Setup
+ * - Default link
+ * - Button
+ * - Paragraph
+ * - Icon link
+ * - CTA link
+ * - Card link
+ * - Image link
+ * ## Props
+ * @prop italic: boolean = false;
+ * @prop underline: boolean = false;
+ * @prop linethrough: boolean = false;
+ * @prop uppercase: boolean = false;
+ * @prop gradient: boolean = false;
+ * @prop highlight: boolean = false;
+ * @prop highlightClass: string = 'text-blue-600 dark:text-blue-500';
+ * @prop decorationClass: string = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+ * @prop gradientClass: string =
+ *   'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+ * ## Example
+ * ```
+ * <script>
+ *   import { A } from 'flowbite-svelte';
+ * </script>
+ *
+ * <A class="font-medium hover:underline">Read more</A>
+ * ```
+ */
 export default class A extends SvelteComponentTyped<AProps, AEvents, ASlots> {
 }
 export {};

package/dist/typography/A.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"A.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/A.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC5C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC9C,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE5C,MAAM,CAAC,OAAO,OAAO,CAAE,SAAQ,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;CAC3E"}
+{"version":3,"file":"A.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/A.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC5C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC9C,MAAM,MAAM,MAAM,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,CAAE,SAAQ,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC;CAC3E"}

package/dist/typography/Blockquote.svelte

@@ -42,3 +42,36 @@ const sizes = {
   )}>
   <slot />
 </blockquote>
+
+<!--
+  @component
+  ## Features
+  [Go to Blockquote](https://flowbite-svelte.com/docs/typography/blockquote)
+  - Default blockquote
+  - Solid background
+  - Blockquote icon
+  - Paragraph context
+  - User testimonial
+  - User Review
+  - Alignment
+  - Sizes 
+  ## Props
+  @prop border: boolean = false;
+  @prop italic: boolean = true;
+  @prop borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
+  @prop bgClass: string = 'bg-gray-50 dark:bg-gray-800';
+  @prop bg: boolean = false;
+  @prop baseClass: string = 'font-semibold text-gray-900 dark:text-white';
+  @prop alignment: 'left' | 'center' | 'right' = 'left';
+  @prop size: BlockQuoteType = 'lg';
+  ## Example
+  ```
+  <script>
+    import { Blockquote } from 'flowbite-svelte'
+  </script>
+
+  <Blockquote size='xl'>
+  "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
+  </Blockquote>
+  ```
+-->

package/dist/typography/Blockquote.svelte.d.ts

@@ -22,6 +22,37 @@ declare const __propDef: {
 export type BlockquoteProps = typeof __propDef.props;
 export type BlockquoteEvents = typeof __propDef.events;
 export type BlockquoteSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Blockquote](https://flowbite-svelte.com/docs/typography/blockquote)
+ * - Default blockquote
+ * - Solid background
+ * - Blockquote icon
+ * - Paragraph context
+ * - User testimonial
+ * - User Review
+ * - Alignment
+ * - Sizes
+ * ## Props
+ * @prop border: boolean = false;
+ * @prop italic: boolean = true;
+ * @prop borderClass: string = 'border-l-4 border-gray-300 dark:border-gray-500';
+ * @prop bgClass: string = 'bg-gray-50 dark:bg-gray-800';
+ * @prop bg: boolean = false;
+ * @prop baseClass: string = 'font-semibold text-gray-900 dark:text-white';
+ * @prop alignment: 'left' | 'center' | 'right' = 'left';
+ * @prop size: BlockQuoteType = 'lg';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Blockquote } from 'flowbite-svelte'
+ * </script>
+ *
+ * <Blockquote size='xl'>
+ * "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
+ * </Blockquote>
+ * ```
+ */
 export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
 }
 export {};

package/dist/typography/Blockquote.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Blockquote.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAkD/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,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":"Blockquote.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Blockquote.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAoD/C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/typography/DescriptionList.svelte

@@ -8,3 +8,45 @@ let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
 <svelte:element this={tag} {...$$restProps} class={classDesc}>
   <slot />
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Description List](https://flowbite-svelte.com/docs/typography/list#Description_List)
+  - Setup
+  - Unordored list
+  - Icons
+  - Nested
+  - Unstyled
+  - Ordered list
+  - Nested
+  - Description List
+  - List with icon
+  - Advanced layout
+  - Horizontal List
+  ## Props
+  @prop tag: 'dt' | 'dd';
+  @prop dtClass: string = 'text-gray-500 md:text-lg dark:text-gray-400';
+  @prop ddClass: string = 'text-lg font-semibold';
+  ## Example
+  ```
+  <script>
+    import { List, Li, DescriptionList } from 'flowbite-svelte';
+  </script>
+  
+  <List tag="dl" color="text-gray-900 dark:text-white divide-y divide-gray-200  dark:divide-gray-700">
+    <div class="flex flex-col pb-3">
+      <DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
+      <DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
+    </div>
+    <div class="flex flex-col pb-3">
+      <DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
+      <DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
+    </div>
+    <div class="flex flex-col pb-3">
+      <DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
+      <DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
+    </div>
+  </List>
+  ```
+-->

package/dist/typography/DescriptionList.svelte.d.ts

@@ -16,6 +16,46 @@ declare const __propDef: {
 export type DescriptionListProps = typeof __propDef.props;
 export type DescriptionListEvents = typeof __propDef.events;
 export type DescriptionListSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Description List](https://flowbite-svelte.com/docs/typography/list#Description_List)
+ * - Setup
+ * - Unordored list
+ * - Icons
+ * - Nested
+ * - Unstyled
+ * - Ordered list
+ * - Nested
+ * - Description List
+ * - List with icon
+ * - Advanced layout
+ * - Horizontal List
+ * ## Props
+ * @prop tag: 'dt' | 'dd';
+ * @prop dtClass: string = 'text-gray-500 md:text-lg dark:text-gray-400';
+ * @prop ddClass: string = 'text-lg font-semibold';
+ * ## Example
+ * ```
+ * <script>
+ *   import { List, Li, DescriptionList } from 'flowbite-svelte';
+ * </script>
+ *
+ * <List tag="dl" color="text-gray-900 dark:text-white divide-y divide-gray-200  dark:divide-gray-700">
+ *   <div class="flex flex-col pb-3">
+ *     <DescriptionList tag="dt" class="mb-1">Email address</DescriptionList>
+ *     <DescriptionList tag="dd">yourname@flowbite.com</DescriptionList>
+ *   </div>
+ *   <div class="flex flex-col pb-3">
+ *     <DescriptionList tag="dt" class="mb-1">Home address</DescriptionList>
+ *     <DescriptionList tag="dd">92 Miles Drive, Newark, NJ 07103, California, USA</DescriptionList>
+ *   </div>
+ *   <div class="flex flex-col pb-3">
+ *     <DescriptionList tag="dt" class="mb-1">Phone number</DescriptionList>
+ *     <DescriptionList tag="dd">+00 123 456 789 / +12 345 678</DescriptionList>
+ *   </div>
+ * </List>
+ * ```
+ */
 export default class DescriptionList extends SvelteComponentTyped<DescriptionListProps, DescriptionListEvents, DescriptionListSlots> {
 }
 export {};

package/dist/typography/DescriptionList.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DescriptionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/DescriptionList.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;aAD2D,IAAI,GAAG,IAAI;;;;;;;;;;CACP,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":"DescriptionList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/DescriptionList.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;aAD2D,IAAI,GAAG,IAAI;;;;;;;;;;CACP,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/typography/Heading.svelte

@@ -18,3 +18,38 @@ const textSizes = {
   class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
   <slot />
 </svelte:element>
+
+<!--
+  @component
+  ## Features
+  [Go to Heading](https://flowbite-svelte.com/docs/typography/heading)
+  - Setup
+  - Default heading
+  - Second-level heading
+  - Highlighted heading
+  - Heading mark
+  - Heading gradient
+  - Heading underline
+  - Breadcrumb context
+  - Badge context
+  - Secondary text
+  - Sizes  
+  ## Props
+  @prop tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
+  @prop color: string = 'text-gray-900 dark:text-white';
+  @prop customSize: string = '';
+  ## Example
+  ```
+  <script>
+    import {  Heading, P, Button } from 'flowbite-svelte'
+  </script>
+  
+  <div  class="text-center">
+    <Heading tag="h1" class="mb-4" customSize="text-4xl font-extrabold  md:text-5xl lg:text-6xl">We invest in the world’s potential</Heading>
+    <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
+    <Button href="/">Learn more 
+    <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </Button>
+  </div>
+  ```
+-->

package/dist/typography/Heading.svelte.d.ts

@@ -16,6 +16,39 @@ declare const __propDef: {
 export type HeadingProps = typeof __propDef.props;
 export type HeadingEvents = typeof __propDef.events;
 export type HeadingSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Heading](https://flowbite-svelte.com/docs/typography/heading)
+ * - Setup
+ * - Default heading
+ * - Second-level heading
+ * - Highlighted heading
+ * - Heading mark
+ * - Heading gradient
+ * - Heading underline
+ * - Breadcrumb context
+ * - Badge context
+ * - Secondary text
+ * - Sizes
+ * ## Props
+ * @prop tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h1';
+ * @prop color: string = 'text-gray-900 dark:text-white';
+ * @prop customSize: string = '';
+ * ## Example
+ * ```
+ * <script>
+ *   import {  Heading, P, Button } from 'flowbite-svelte'
+ * </script>
+ *
+ * <div  class="text-center">
+ *   <Heading tag="h1" class="mb-4" customSize="text-4xl font-extrabold  md:text-5xl lg:text-6xl">We invest in the world’s potential</Heading>
+ *   <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</P>
+ *   <Button href="/">Learn more
+ *   <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+ *   </Button>
+ * </div>
+ * ```
+ */
 export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
 }
 export {};

package/dist/typography/Heading.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Heading.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Heading.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/typography/Hr.svelte

@@ -22,3 +22,34 @@ let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass)
 {:else}
   <hr class={horizontalClass} />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Horizontal Line](https://flowbite-svelte.com/docs/typography/hr)
+  - Setup
+  - Default HR
+  - Trimmed
+  - Icon HR
+  - HR with text
+  - HR shape
+  ## Props
+  @prop icon: boolean = false;
+  @prop width: string = 'w-full';
+  @prop height: string = 'h-px';
+  @prop divClass: string = 'inline-flex justify-center items-center w-full';
+  @prop hrClass: string = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
+  @prop iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
+  @prop textSpanClass: string = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
+  @prop middleBgColor: string = 'dark:bg-gray-900';
+  ## Example
+  ```
+  <script>
+    import { Hr, P } from 'flowbite-svelte'
+  </script>
+  
+  <P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
+  <Hr class="my-8" height="h-px" />
+  <P>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
+  ```
+-->

package/dist/typography/Hr.svelte.d.ts

@@ -21,6 +21,35 @@ declare const __propDef: {
 export type HrProps = typeof __propDef.props;
 export type HrEvents = typeof __propDef.events;
 export type HrSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Horizontal Line](https://flowbite-svelte.com/docs/typography/hr)
+ * - Setup
+ * - Default HR
+ * - Trimmed
+ * - Icon HR
+ * - HR with text
+ * - HR shape
+ * ## Props
+ * @prop icon: boolean = false;
+ * @prop width: string = 'w-full';
+ * @prop height: string = 'h-px';
+ * @prop divClass: string = 'inline-flex justify-center items-center w-full';
+ * @prop hrClass: string = 'bg-gray-200 rounded border-0 dark:bg-gray-700';
+ * @prop iconDivClass: string = 'absolute left-1/2 px-4 bg-white -translate-x-1/2 ';
+ * @prop textSpanClass: string = 'absolute left-1/2 px-3 font-medium text-gray-900 bg-white -translate-x-1/2 dark:text-white ';
+ * @prop middleBgColor: string = 'dark:bg-gray-900';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Hr, P } from 'flowbite-svelte'
+ * </script>
+ *
+ * <P>Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</P>
+ * <Hr class="my-8" height="h-px" />
+ * <P>Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</P>
+ * ```
+ */
 export default class Hr extends SvelteComponentTyped<HrProps, HrEvents, HrSlots> {
 }
 export {};

package/dist/typography/Hr.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hr.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Hr.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7C,MAAM,CAAC,OAAO,OAAO,EAAG,SAAQ,oBAAoB,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;CAC/E"}
+{"version":3,"file":"Hr.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Hr.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoCD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7C,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,EAAG,SAAQ,oBAAoB,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;CAC/E"}

package/dist/typography/Img.svelte

@@ -24,3 +24,38 @@ export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray
     {srcset}
     {alt} />
 {/if}
+
+<!--
+  @component
+  ## Features
+  [Go to Images](https://flowbite-svelte.com/docs/typography/image)
+  - Setup
+  - Default image
+  - Image caption
+  - Rounded corners
+  - Image shadow
+  - Retina-ready
+  - Image card
+  - Image effects
+  - Alignment
+  - Sizes
+  ## Props
+  @prop caption: string | undefined = undefined;
+  @prop src: string | undefined = undefined;
+  @prop srcset: string | undefined = undefined;
+  @prop size: string = 'max-w-full';
+  @prop alignment: string = '';
+  @prop imgClass: string = 'h-auto';
+  @prop figClass: string = 'max-w-lg';
+  @prop alt: string = '';
+  @prop effect: string = '';
+  @prop captionClass: string = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';  
+  ## Example
+  ```
+  <script>
+    import { Img } from 'flowbite-svelte';
+  </script>
+  
+  <Img src="/images/examples/image-1@2x.jpg" alt="sample 1"/>
+  ```
+-->

package/dist/typography/Img.svelte.d.ts

@@ -21,6 +21,39 @@ declare const __propDef: {
 export type ImgProps = typeof __propDef.props;
 export type ImgEvents = typeof __propDef.events;
 export type ImgSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Images](https://flowbite-svelte.com/docs/typography/image)
+ * - Setup
+ * - Default image
+ * - Image caption
+ * - Rounded corners
+ * - Image shadow
+ * - Retina-ready
+ * - Image card
+ * - Image effects
+ * - Alignment
+ * - Sizes
+ * ## Props
+ * @prop caption: string | undefined = undefined;
+ * @prop src: string | undefined = undefined;
+ * @prop srcset: string | undefined = undefined;
+ * @prop size: string = 'max-w-full';
+ * @prop alignment: string = '';
+ * @prop imgClass: string = 'h-auto';
+ * @prop figClass: string = 'max-w-lg';
+ * @prop alt: string = '';
+ * @prop effect: string = '';
+ * @prop captionClass: string = 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400';
+ * ## Example
+ * ```
+ * <script>
+ *   import { Img } from 'flowbite-svelte';
+ * </script>
+ *
+ * <Img src="/images/examples/image-1@2x.jpg" alt="sample 1"/>
+ * ```
+ */
 export default class Img extends SvelteComponentTyped<ImgProps, ImgEvents, ImgSlots> {
 }
 export {};

package/dist/typography/Img.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Img.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Img.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;kBADqM,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;iBAAW,MAAM,GAAG,SAAS;;;;;;;;;;;;;CAC/M,CAAC;AAC/E,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":"Img.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Img.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+BD,QAAA,MAAM,SAAS;;;kBADqM,MAAM,GAAG,SAAS;cAAQ,MAAM,GAAG,SAAS;iBAAW,MAAM,GAAG,SAAS;;;;;;;;;;;;;CAC/M,CAAC;AAC/E,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}

package/dist/typography/Layout.svelte

@@ -8,3 +8,53 @@ let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
 <div {...$$restProps} class={classDiv}>
   <slot />
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Paragraph Layout](https://flowbite-svelte.com/docs/typography/paragraph#Layout)
+  - Default paragraph
+  - Leading paragraph
+  - First letter
+  - Paragraph link
+  - Paragraph bold
+  - Paragraph underline
+  - Paragraph italic
+  - Paragraph popover
+  - Layout
+  - Text alignment
+  ## Props
+  @prop divClass: string = 'grid';
+  @prop cols: string = 'grid-cols-1 sm:grid-cols-2';
+  @prop gap: number;
+  ## Example
+  ```
+  <script>
+    import { P, Layout } from 'flowbite-svelte'
+  </script>
+  
+  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+    Track work across the enterprise through an open, collaborative platform. Link issues across
+    Jira and ingest data from other software development tools, so your IT support and operations
+    teams have richer contextual information to rapidly respond to requests, incidents, and changes.
+  </P>
+  <Layout gap={6}>
+    <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+      Track work across the enterprise through an open, collaborative platform. Link issues across
+      Jira and ingest data from other software development tools, so your IT support and operations
+      teams have richer contextual information to rapidly respond to requests, incidents, and
+      changes.
+    </P>
+    <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+      Deliver great service experiences fast - without the complexity of traditional ITSM
+      solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease,
+      with a complete audit trail for every change.
+    </P>
+  </Layout>
+  <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+    Deliver great service experiences fast - without the complexity of traditional ITSM
+    solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease,
+    with a complete audit trail for every change.
+  </P>
+  ```
+-->

package/dist/typography/Layout.svelte.d.ts

@@ -16,6 +16,54 @@ declare const __propDef: {
 export type LayoutProps = typeof __propDef.props;
 export type LayoutEvents = typeof __propDef.events;
 export type LayoutSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Paragraph Layout](https://flowbite-svelte.com/docs/typography/paragraph#Layout)
+ * - Default paragraph
+ * - Leading paragraph
+ * - First letter
+ * - Paragraph link
+ * - Paragraph bold
+ * - Paragraph underline
+ * - Paragraph italic
+ * - Paragraph popover
+ * - Layout
+ * - Text alignment
+ * ## Props
+ * @prop divClass: string = 'grid';
+ * @prop cols: string = 'grid-cols-1 sm:grid-cols-2';
+ * @prop gap: number;
+ * ## Example
+ * ```
+ * <script>
+ *   import { P, Layout } from 'flowbite-svelte'
+ * </script>
+ *
+ * <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+ *   Track work across the enterprise through an open, collaborative platform. Link issues across
+ *   Jira and ingest data from other software development tools, so your IT support and operations
+ *   teams have richer contextual information to rapidly respond to requests, incidents, and changes.
+ * </P>
+ * <Layout gap={6}>
+ *   <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+ *     Track work across the enterprise through an open, collaborative platform. Link issues across
+ *     Jira and ingest data from other software development tools, so your IT support and operations
+ *     teams have richer contextual information to rapidly respond to requests, incidents, and
+ *     changes.
+ *   </P>
+ *   <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+ *     Deliver great service experiences fast - without the complexity of traditional ITSM
+ *     solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease,
+ *     with a complete audit trail for every change.
+ *   </P>
+ * </Layout>
+ * <P class="mb-3" weight="light" color="text-gray-500 dark:text-gray-400">
+ *   Deliver great service experiences fast - without the complexity of traditional ITSM
+ *   solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease,
+ *   with a complete audit trail for every change.
+ * </P>
+ * ```
+ */
 export default class Layout extends SvelteComponentTyped<LayoutProps, LayoutEvents, LayoutSlots> {
 }
 export {};

package/dist/typography/Layout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Layout.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkBD,QAAA,MAAM,SAAS;;;;;aADyF,MAAM;;;;;;;;CAChC,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":"Layout.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/typography/Layout.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoBD,QAAA,MAAM,SAAS;;;;;aADyF,MAAM;;;;;;;;CAChC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/typography/Li.svelte

@@ -7,3 +7,39 @@ let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
 <li {...$$restProps} class={classLi}>
   <slot />
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to List](https://flowbite-svelte.com/docs/typography/list)
+  - Setup
+  - Unordored list
+  - Icons
+  - Nested
+  - Unstyled
+  - Ordered list
+  - Nested
+  - Description List
+  - List with icon
+  - Advanced layout
+  - Horizontal List
+  ## Props
+  @prop icon: boolean = false;
+  @prop liClass: string = '';
+  ## Example
+  ```
+  <script>
+    import { Li, List, Heading } from 'flowbite-svelte';
+  </script>
+  
+  <Heading
+    tag="h2"
+    customSize="text-lg font-semibold"
+    class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Password requirements</Heading>
+  <List tag="ul" class="space-y-1">
+    <Li>At least 10 characters (and up to 100 characters)</Li>
+    <Li>At least one lowercase character</Li>
+    <Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
+  </List>
+  ```
+-->