flowbite-svelte 0.44.1 → 0.44.4

package/dist/buttons/Button.svelte

@@ -73,52 +73,14 @@ $: buttonClass = twMerge('text-center font-medium', group ? 'focus:ring-2' : 'fo
 </svelte:element>
 
 <!--
-  @component
-  ## Features
-  [Go to Button](https://flowbite-svelte.com/docs/components/button)
-  - Setup
-  - Default button
-  - Button with link
-  - Button pills
-  - Gradient monochrome
-  - Gradient duotone
-  - Gradient outline
-  - Colored shadows
-  - Outline buttons
-  - Button sizes
-  - Buttons with icon
-  - Button with label
-  - Icon buttons
-  - Loader
-  - Disabled  
-  ## Props
-  @prop pill: boolean = false;
-  @prop outline: boolean = false;
-  @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
-  @prop href: string | undefined = undefined;
-  @prop btnClass: string | undefined = undefined;
-  @prop type: ButtonType = 'button';
-  @prop color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
-  @prop shadow: boolean = false;
-  ## Event
-  - on:click
-  - on:change
-  - on:keydown
-  - on:keyup
-  - on:touchstart
-  - on:touchend
-  - on:touchcancel
-  - on:mouseenter
-  - on:mouseleave
-  ## Example
-  ```
-  <script>
-    import { Button } from 'flowbite-svelte';
-  </script>
-
-  <Button>Default</Button>
-  <Button color="alternative">Alternative</Button>
-  <Button color="dark">Dark</Button>
-  <Button color="light">Light</Button>  
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let pill: boolean = false;
+@prop export let outline: boolean = false;
+@prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+@prop export let href: string | undefined = undefined;
+@prop export let type: ButtonType = 'button';
+@prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+@prop export let shadow: boolean = false;
 -->

package/dist/buttons/Button.svelte.d.ts

@@ -32,53 +32,15 @@ export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Button](https://flowbite-svelte.com/docs/components/button)
- * - Setup
- * - Default button
- * - Button with link
- * - Button pills
- * - Gradient monochrome
- * - Gradient duotone
- * - Gradient outline
- * - Colored shadows
- * - Outline buttons
- * - Button sizes
- * - Buttons with icon
- * - Button with label
- * - Icon buttons
- * - Loader
- * - Disabled
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop pill: boolean = false;
- * @prop outline: boolean = false;
- * @prop size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
- * @prop href: string | undefined = undefined;
- * @prop btnClass: string | undefined = undefined;
- * @prop type: ButtonType = 'button';
- * @prop color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
- * @prop shadow: boolean = false;
- * ## Event
- * - on:click
- * - on:change
- * - on:keydown
- * - on:keyup
- * - on:touchstart
- * - on:touchend
- * - on:touchcancel
- * - on:mouseenter
- * - on:mouseleave
- * ## Example
- * ```
- * <script>
- *   import { Button } from 'flowbite-svelte';
- * </script>
- *
- * <Button>Default</Button>
- * <Button color="alternative">Alternative</Button>
- * <Button color="dark">Dark</Button>
- * <Button color="light">Light</Button>
- * ```
+ * @prop export let pill: boolean = false;
+ * @prop export let outline: boolean = false;
+ * @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = group ? 'sm' : 'md';
+ * @prop export let href: string | undefined = undefined;
+ * @prop export let type: ButtonType = 'button';
+ * @prop export let color: ButtonColor = group ? (outline ? 'dark' : 'alternative') : 'primary';
+ * @prop export let shadow: boolean = false;
  */
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }

package/dist/buttons/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA+F3C,QAAA,MAAM,SAAS;;;;;;eAD+L,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAClJ,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/Button.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA+F3C,QAAA,MAAM,SAAS;;;;;;eAD+L,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;;CAClJ,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;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/buttons/GradientButton.svelte

@@ -59,29 +59,9 @@ $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow
 {/if}
 
 <!--
-  @component
-  ## Features
-  [Go to Button](https://flowbite-svelte.com/docs/components/button)
-  @prop color: keyof typeof gradientClasses = 'blue';
-  @prop shadow: boolean = false;
-  ## Event
-  - on:click
-  - on:change
-  - on:keydown
-  - on:keyup
-  - on:touchstart
-  - on:touchend
-  - on:touchcancel
-  - on:mouseenter
-  - on:mouseleave
-  ## Example
-  ```
-  <script>
-    import { GradientButton } from 'flowbite-svelte';
-  </script>
-  
-  <GradientButton color="blue">Blue</GradientButton>
-  <GradientButton color="green">Green</GradientButton>
-  <GradientButton color="cyan">Cyan</GradientButton>
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: keyof typeof gradientClasses = 'blue';
+@prop export let shadow: boolean = false;
 -->

package/dist/buttons/GradientButton.svelte.d.ts

@@ -26,30 +26,10 @@ export type GradientButtonProps = typeof __propDef.props;
 export type GradientButtonEvents = typeof __propDef.events;
 export type GradientButtonSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Button](https://flowbite-svelte.com/docs/components/button)
- * @prop color: keyof typeof gradientClasses = 'blue';
- * @prop shadow: boolean = false;
- * ## Event
- * - on:click
- * - on:change
- * - on:keydown
- * - on:keyup
- * - on:touchstart
- * - on:touchend
- * - on:touchcancel
- * - on:mouseenter
- * - on:mouseleave
- * ## Example
- * ```
- * <script>
- *   import { GradientButton } from 'flowbite-svelte';
- * </script>
- *
- * <GradientButton color="blue">Blue</GradientButton>
- * <GradientButton color="green">Green</GradientButton>
- * <GradientButton color="cyan">Cyan</GradientButton>
- * ```
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let color: keyof typeof gradientClasses = 'blue';
+ * @prop export let shadow: boolean = false;
  */
 export default class GradientButton extends SvelteComponentTyped<GradientButtonProps, GradientButtonEvents, GradientButtonSlots> {
 }

package/dist/buttons/GradientButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GradientButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/GradientButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+ED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"GradientButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/buttons/GradientButton.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+ED,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/cards/Card.svelte

@@ -40,46 +40,13 @@ $: imgClass = twMerge(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && '
 </Frame>
 
 <!--
-  @component
-  ## Features
-  [Go to Card](https://flowbite-svelte.com/docs/components/card)
-  - Set up
-  - Default card
-  - Card with action button
-  - Card with link
-  - Card with image
-  - Horizontal card
-  - User profile card
-  - Card with form inputs
-  - E-commerce card
-  - Call to action card
-  - Card with list
-  - Pricing card
-  - Testimonial card
-  ## Props
-  @prop href: string | null | undefined = undefined;
-  @prop horizontal: boolean = false;
-  @prop reverse: boolean = false;
-  @prop img: string | undefined = undefined;
-  @prop padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
-  @prop size: SizeType = 'sm';
-  ## Event
-  - on:click
-  - on:focusin
-  - on:focusout
-  - on:mouseenter
-  - on:mouseleave
-  ## Example
-  ```
-  <script>
-    import { Card } from "flowbite-svelte";
-  </script>
-
-  <Card href="/cards">
-  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2023</h5>
-  <p class="font-normal text-gray-700 dark:text-gray-400 leading-tight">
-    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
-  </p>
-</Card>
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let href: string | null | undefined = undefined;
+@prop export let horizontal: boolean = false;
+@prop export let reverse: boolean = false;
+@prop export let img: string | undefined = undefined;
+@prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
+@prop export let size: SizeType = 'sm';
 -->

package/dist/cards/Card.svelte.d.ts

@@ -253,47 +253,14 @@ export type CardProps = typeof __propDef.props;
 export type CardEvents = typeof __propDef.events;
 export type CardSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Card](https://flowbite-svelte.com/docs/components/card)
- * - Set up
- * - Default card
- * - Card with action button
- * - Card with link
- * - Card with image
- * - Horizontal card
- * - User profile card
- * - Card with form inputs
- * - E-commerce card
- * - Call to action card
- * - Card with list
- * - Pricing card
- * - Testimonial card
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop href: string | null | undefined = undefined;
- * @prop horizontal: boolean = false;
- * @prop reverse: boolean = false;
- * @prop img: string | undefined = undefined;
- * @prop padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
- * @prop size: SizeType = 'sm';
- * ## Event
- * - on:click
- * - on:focusin
- * - on:focusout
- * - on:mouseenter
- * - on:mouseleave
- * ## Example
- * ```
- * <script>
- *   import { Card } from "flowbite-svelte";
- * </script>
- *
- * <Card href="/cards">
- * <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2023</h5>
- * <p class="font-normal text-gray-700 dark:text-gray-400 leading-tight">
- *   Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
- * </p>
- * </Card>
- * ```
+ * @prop export let href: string | null | undefined = undefined;
+ * @prop export let horizontal: boolean = false;
+ * @prop export let reverse: boolean = false;
+ * @prop export let img: string | undefined = undefined;
+ * @prop export let padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'lg';
+ * @prop export let size: SizeType = 'sm';
  */
 export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
 }

package/dist/cards/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/cards/Card.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAoE3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjD,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,oBAAoB,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC;CACvF"}

package/dist/carousels/Caption.svelte

@@ -8,12 +8,10 @@ export let pClass = 'text-gray-900 dark:text-white';
 </div>
 
 <!--
-  @component
-  ## Features
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-
-  ## Props
-  @prop caption: string = '';
-  @prop captionClass: string = '';
-  
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let caption: string = '';
+@prop export let captionClass: string = '';
+@prop export let pClass: string = 'text-gray-900 dark:text-white';
 -->

package/dist/carousels/Caption.svelte.d.ts

@@ -14,12 +14,11 @@ export type CaptionProps = typeof __propDef.props;
 export type CaptionEvents = typeof __propDef.events;
 export type CaptionSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
- *
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop caption: string = '';
- * @prop captionClass: string = '';
+ * @prop export let caption: string = '';
+ * @prop export let captionClass: string = '';
+ * @prop export let pClass: string = 'text-gray-900 dark:text-white';
  */
 export default class Caption extends SvelteComponentTyped<CaptionProps, CaptionEvents, CaptionSlots> {
 }

package/dist/carousels/Caption.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,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;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,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;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/carousels/Carousel.svelte

@@ -118,49 +118,25 @@ if (loop) {
 {/if}
 
 <!--
-  @component
-  ## Features
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  - Setup
-  - Default Carousel
-  - Loop
-  - Without thumbnails
-  - Without caption
-  - Without indicators
-  - Without slide controllers
-  - Custom slide controllers
-  - Carousel transition
-  - Loop
-  - Fly example
-  - Slide example
-  ## Props
-  @prop showIndicators: boolean = true;
-  @prop showCaptions: boolean = true;
-  @prop showThumbs: boolean = true;
-  @prop images: any[];
-  @prop slideControls: boolean = true;
-  @prop loop: boolean = false;
-  @prop duration: number = 2000;
-  @prop thumbClass: string = 'opacity-40';
-  ### Carousel
-  @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-  @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-  ### Caption
-  @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-  ### Indicator
-  @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-  ### Slide
-  @prop slideClass: string = '';
-  ## Example
-  ```
-  <script>
-    import { Carousel } from 'flowbite-svelte'
-    import { images } from './imageData/+server.js';
-  </script>
-
-  <div class="max-w-4xl">
-    <Carousel {images} />
-  </div>
-
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let id: string = 'default-carousel';
+@prop export let showIndicators: boolean = true;
+@prop export let showCaptions: boolean = true;
+@prop export let showThumbs: boolean = true;
+@prop export let images: any[];
+@prop export let slideControls: boolean = true;
+@prop export let loop: boolean = false;
+@prop export let duration: number = 2000;
+@prop export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+@prop export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+@prop export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+@prop export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+@prop export let slideClass: string = 'flex items-center justify-center h-full w-full';
+@prop export let imgFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
+@prop export let imgClass: string = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
+@prop export let thumbClass: string = 'opacity-40';
+@prop export let thumbDivClass: string = 'flex flex-row justify-center bg-gray-100 w-full';
+@prop export let thumbBtnClass: string = '';
 -->

package/dist/carousels/Carousel.svelte.d.ts

@@ -33,50 +33,26 @@ export type CarouselProps = typeof __propDef.props;
 export type CarouselEvents = typeof __propDef.events;
 export type CarouselSlots = typeof __propDef.slots;
 /**
- * ## Features
- * [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
- * - Setup
- * - Default Carousel
- * - Loop
- * - Without thumbnails
- * - Without caption
- * - Without indicators
- * - Without slide controllers
- * - Custom slide controllers
- * - Carousel transition
- * - Loop
- * - Fly example
- * - Slide example
+ * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop showIndicators: boolean = true;
- * @prop showCaptions: boolean = true;
- * @prop showThumbs: boolean = true;
- * @prop images: any[];
- * @prop slideControls: boolean = true;
- * @prop loop: boolean = false;
- * @prop duration: number = 2000;
- * @prop thumbClass: string = 'opacity-40';
- * ### Carousel
- * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
- * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
- * ### Caption
- * @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
- * ### Indicator
- * @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
- * ### Slide
- * @prop slideClass: string = '';
- * ## Example
- * ```
- * <script>
- *   import { Carousel } from 'flowbite-svelte'
- *   import { images } from './imageData/+server.js';
- * </script>
- *
- * <div class="max-w-4xl">
- *   <Carousel {images} />
- * </div>
- *
- * ```
+ * @prop export let id: string = 'default-carousel';
+ * @prop export let showIndicators: boolean = true;
+ * @prop export let showCaptions: boolean = true;
+ * @prop export let showThumbs: boolean = true;
+ * @prop export let images: any[];
+ * @prop export let slideControls: boolean = true;
+ * @prop export let loop: boolean = false;
+ * @prop export let duration: number = 2000;
+ * @prop export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+ * @prop export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+ * @prop export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+ * @prop export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+ * @prop export let slideClass: string = 'flex items-center justify-center h-full w-full';
+ * @prop export let imgFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
+ * @prop export let imgClass: string = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
+ * @prop export let thumbClass: string = 'opacity-40';
+ * @prop export let thumbDivClass: string = 'flex flex-row justify-center bg-gray-100 w-full';
+ * @prop export let thumbBtnClass: string = '';
  */
 export default class Carousel extends SvelteComponentTyped<CarouselProps, CarouselEvents, CarouselSlots> {
 }

package/dist/carousels/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+ID,QAAA,MAAM,SAAS;;;;;;;gBADoiB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;CAC1e,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"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+ID,QAAA,MAAM,SAAS;;;;;;;gBADoiB,GAAG,EAAE;;;;;;;;;;;;;;;;;;;;;;CAC1e,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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/carousels/CarouselTransition.svelte

@@ -146,48 +146,29 @@ if (loop) {
 {/if}
 
 <!--
-  @component
-  ## Features
-  [Go to Carousel](https://flowbite-svelte.com/docs/components/carousel)
-  - Setup
-  - Default Carousel
-  - Loop
-  - Without thumbnails
-  - Without caption
-  - Without indicators
-  - Without slide controllers
-  - Custom slide controllers
-  - Carousel transition
-  - Loop
-  - Fly example
-  - Slide example
-  ## Props
-  @prop showIndicators: boolean = true;
-  @prop showCaptions: boolean = true;
-  @prop showThumbs: boolean = true;
-  @prop images: any[];
-  @prop slideControls: boolean = true;
-  @prop transitionType: TransitionTypes = 'fade';
-  @prop transitionParams: TransitionParamTypes = {};
-  @prop loop: boolean = false;
-  @prop duration: number = 2000;
-  @prop thumbClass: string = 'opacity-40';
-  ### Carousel
-  @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
-  @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
-  ### Caption
-  @prop captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
-  ### Indicator
-  @prop indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
-  ## Example
-  ```
-  <script>
-    import { CarouselTransition } from 'flowbite-svelte'
-    import { images } from './imageData/+server.js';
-  </script>
-
-  <div class="max-w-4xl">
-    <CarouselTransition {images} transitionType="fade" transitionParams="{{delay: 300, duration: 500}}"/>
-  </div>
-  ```
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let id: string = 'default-transition-carousel';
+@prop export let showIndicators: boolean = true;
+@prop export let showCaptions: boolean = true;
+@prop export let showThumbs: boolean = true;
+@prop export let images: any[];
+@prop export let slideControls: boolean = true;
+@prop export let transitionType: TransitionTypes = 'fade';
+@prop export let transitionParams: TransitionParamTypes = {};
+@prop export let loop: boolean = false;
+@prop export let duration: number = 2000;
+@prop export let divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+@prop export let indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+@prop export let captionClass: string = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+@prop export let indicatorClass: string = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+@prop export let slideClass: string = '';
+@prop export let transitionDivClass: string = 'h-full w-full';
+@prop export let imgFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' = 'cover';
+@prop export let imgClass: string = `object-${imgFit} ${imgFit === 'cover' && 'w-full'} h-full`;
+@prop export let thumbClass: string = 'opacity-40';
+@prop export let thumbDivClass: string = 'flex flex-row justify-center bg-gray-100 w-full';
+@prop export let thumbBtnClass: string = '';
+@prop export let slideClass: string = 'hidden';
 -->