flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/skeleton/ListPlaceholder.svelte

@@ -1,43 +1,25 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divClass = "p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700";
+<script lang="ts">
+  import clsx from "clsx";
+  import { listPlaceholder, type ListPlaceholderProps as Props } from "./index";
+
+  let { itemNumber = 5, size = "md", rounded, class: className, ...restProps }: Props = $props();
+
+  const { base, item, itemContent, itemTitle, itemSubtitle, itemExtra } = $derived(listPlaceholder({ size, rounded }));
+
+  let items = $derived([...Array(itemNumber).keys()]);
 </script>
 
-<div role="status" class={twMerge(divClass, $$props.class)}>
-  <div class="flex justify-between items-center">
-    <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-    </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-  </div>
-  <div class="flex justify-between items-center pt-4">
-    <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-    </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-  </div>
-  <div class="flex justify-between items-center pt-4">
-    <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-    </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-  </div>
-  <div class="flex justify-between items-center pt-4">
-    <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-    </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-  </div>
-  <div class="flex justify-between items-center pt-4">
-    <div>
-      <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>
-      <div class="w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+<div role="status" {...restProps} class={base({ class: clsx(className) })}>
+  <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+  {#each items as _, i}
+    <div class={item({ class: i > 0 ? "pt-4" : "" })}>
+      <div class={itemContent()}>
+        <div class={itemTitle()}></div>
+        <div class={itemSubtitle()}></div>
+      </div>
+      <div class={itemExtra()}></div>
     </div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12"></div>
-  </div>
+  {/each}
   <span class="sr-only">Loading...</span>
 </div>
 
@@ -45,5 +27,8 @@ export let divClass = "p-4 space-y-4 max-w-md rounded-sm border border-gray-200
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+@props: itemNumber: any = 5;
+@props:size: any = "md";
+@props:rounded: any;
+@props:class: string;
 -->

package/dist/skeleton/ListPlaceholder.svelte.d.ts

@@ -1,22 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        divClass?: string;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ListPlaceholderProps = typeof __propDef.props;
+type ListPlaceholderProps_ = typeof __propDef.props;
+export { ListPlaceholderProps_ as ListPlaceholderProps };
 export type ListPlaceholderEvents = typeof __propDef.events;
 export type ListPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'p-4 space-y-4 max-w-md rounded-sm border border-gray-200 divide-y divide-gray-200 shadow-sm animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700';
+ * @props: itemNumber: any = 5;
+ * @props:size: any = "md";
+ * @props:rounded: any;
+ * @props:class: string;
  */
-export default class ListPlaceholder extends SvelteComponentTyped<ListPlaceholderProps, ListPlaceholderEvents, ListPlaceholderSlots> {
+export default class ListPlaceholder extends SvelteComponentTyped<ListPlaceholderProps_, ListPlaceholderEvents, ListPlaceholderSlots> {
 }
-export {};

package/dist/skeleton/Skeleton.svelte

@@ -1,24 +1,18 @@
-<script>import { twMerge } from "tailwind-merge";
-const sizes = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
-  xxl: "max-w-2xl"
-};
-export let divClass = "animate-pulse";
-export let size = "sm";
-$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
+<script lang="ts">
+  import clsx from "clsx";
+  import { skeleton, type SkeletonProps as Props } from "./index";
+  let { size = "sm", class: className, ...restProps }: Props = $props();
+  const { wrapper, line } = $derived(skeleton({ size }));
 </script>
 
-<div role="status" class={outDivclass}>
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-10/12 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-11/12 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-9/12"></div>
+<div role="status" {...restProps} class={wrapper({ class: clsx(className) })}>
+  <div class={line({ class: "mb-4 h-2.5 w-1/2" })}></div>
+  <div class={line({ class: "mb-2.5 h-2 w-9/12" })}></div>
+  <div class={line({ class: "mb-2.5 h-2" })}></div>
+  <div class={line({ class: "mb-2.5 h-2" })}></div>
+  <div class={line({ class: "mb-2.5 h-2 w-10/12" })}></div>
+  <div class={line({ class: "mb-2.5 h-2 w-11/12" })}></div>
+  <div class={line({ class: "h-2 w-9/12" })}></div>
   <span class="sr-only">Loading...</span>
 </div>
 
@@ -26,6 +20,6 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'animate-pulse';
-@prop export let size: NonNullable<$$Props['size']> = 'sm';
+@props: size: any = "sm";
+@props:class: string;
 -->

package/dist/skeleton/Skeleton.svelte.d.ts

@@ -1,24 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        divClass?: string;
-        size?: string | number;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type SkeletonProps = typeof __propDef.props;
+type SkeletonProps_ = typeof __propDef.props;
+export { SkeletonProps_ as SkeletonProps };
 export type SkeletonEvents = typeof __propDef.events;
 export type SkeletonSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'animate-pulse';
- * @prop export let size: NonNullable<$$Props['size']> = 'sm';
+ * @props: size: any = "sm";
+ * @props:class: string;
  */
-export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
+export default class Skeleton extends SvelteComponentTyped<SkeletonProps_, SkeletonEvents, SkeletonSlots> {
 }
-export {};

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -1,16 +1,21 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divClass = "animate-pulse";
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { testimonialPlaceholder } from "./index";
+  import clsx from "clsx";
+
+  let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+  const { wrapper, line1, line2, svg, subContent } = testimonialPlaceholder();
 </script>
 
-<div role="status" class={twMerge(divClass, $$props.class)}>
-  <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 max-w-[640px] mb-2.5 mx-auto"></div>
-  <div class="h-2.5 mx-auto bg-gray-300 rounded-full dark:bg-gray-700 max-w-[540px]"></div>
-  <div class="flex justify-center items-center mt-4">
-    <svg class="me-2 w-10 h-10 text-gray-200 dark:text-gray-700" 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-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
+<div role="status" {...restProps} class={wrapper({ class: clsx(className) })}>
+  <div class={line2({ class: "mx-auto mb-2.5 h-2.5 max-w-[640px]" })}></div>
+  <div class={line2({ class: "mx-auto h-2.5 max-w-[540px]" })}></div>
+  <div class={subContent()}>
+    <svg class={svg()} 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-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
     </svg>
-    <div class="w-20 h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 me-3"></div>
-    <div class="w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+    <div class={line1({ class: "me-3 h-2.5 w-20" })}></div>
+    <div class={line1({ class: "h-2 w-24" })}></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>
@@ -19,5 +24,5 @@ export let divClass = "animate-pulse";
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'animate-pulse';
+@props: 
 -->

package/dist/skeleton/TestimonialPlaceholder.svelte.d.ts

@@ -1,9 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        class?: string;
-        divClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -15,7 +12,7 @@ export type TestimonialPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'animate-pulse';
+ * @props:
  */
 export default class TestimonialPlaceholder extends SvelteComponentTyped<TestimonialPlaceholderProps, TestimonialPlaceholderEvents, TestimonialPlaceholderSlots> {
 }

package/dist/skeleton/TextPlaceholder.svelte

@@ -1,46 +1,45 @@
-<script>import { twMerge } from "tailwind-merge";
-const sizes = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
-  xxl: "max-w-2xl"
-};
-export let divClass = "space-y-2.5 animate-pulse";
-export let size = "sm";
-$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
+<script lang="ts">
+  import clsx from "clsx";
+  import { textPlaceholder, type TextPlaceholderProps as Props } from "./index";
+
+  let { size = "sm", class: className, ...restProps }: Props = $props();
+  const { baseWrapper, divWrapper, lineA, lineB } = $derived(
+    textPlaceholder({
+      size
+    })
+  );
 </script>
 
-<div role="status" class={outDivclass}>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-full">
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+<div role="status" {...restProps} class={baseWrapper({ class: clsx(className) })}>
+  <div class={divWrapper({ class: "w-full" })}>
+    <div class={lineA({ class: "h-2.5 w-32" })}></div>
+    <div class={lineB({ class: "h-2.5 w-24" })}></div>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
   </div>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-11/12">
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
+  <div class={divWrapper({ class: "w-11/12" })}>
+    <div class={lineA({ class: "h-2.5 w-full" })}></div>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
+    <div class={lineB({ class: "h-2.5 w-24" })}></div>
   </div>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-9/12">
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+  <div class={divWrapper({ class: "w-9/12" })}>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
+    <div class={lineA({ class: "h-2.5 w-80" })}></div>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
   </div>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-11/12">
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
+  <div class={divWrapper({ class: "w-11/12" })}>
+    <div class={lineA({ class: "h-2.5 w-full" })}></div>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
+    <div class={lineB({ class: "h-2.5 w-24" })}></div>
   </div>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-10/12">
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-32"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24"></div>
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full"></div>
+  <div class={divWrapper({ class: "w-10/12" })}>
+    <div class={lineB({ class: "h-2.5 w-32" })}></div>
+    <div class={lineB({ class: "h-2.5 w-24" })}></div>
+    <div class={lineA({ class: "h-2.5 w-full" })}></div>
   </div>
-  <div class="flex items-center space-x-2 rtl:space-x-reverse w-8/12">
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
-    <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-80"></div>
-    <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-full"></div>
+  <div class={divWrapper({ class: "w-8/12" })}>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
+    <div class={lineA({ class: "h-2.5 w-80" })}></div>
+    <div class={lineB({ class: "h-2.5 w-full" })}></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>
@@ -49,6 +48,6 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'space-y-2.5 animate-pulse';
-@prop export let size: NonNullable<$$Props['size']> = 'sm';
+@props: size: any = "sm";
+@props:class: string;
 -->

package/dist/skeleton/TextPlaceholder.svelte.d.ts

@@ -1,24 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        divClass?: string;
-        size?: string | number;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type TextPlaceholderProps = typeof __propDef.props;
+type TextPlaceholderProps_ = typeof __propDef.props;
+export { TextPlaceholderProps_ as TextPlaceholderProps };
 export type TextPlaceholderEvents = typeof __propDef.events;
 export type TextPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'space-y-2.5 animate-pulse';
- * @prop export let size: NonNullable<$$Props['size']> = 'sm';
+ * @props: size: any = "sm";
+ * @props:class: string;
  */
-export default class TextPlaceholder extends SvelteComponentTyped<TextPlaceholderProps, TextPlaceholderEvents, TextPlaceholderSlots> {
+export default class TextPlaceholder extends SvelteComponentTyped<TextPlaceholderProps_, TextPlaceholderEvents, TextPlaceholderSlots> {
 }
-export {};

package/dist/skeleton/VideoPlaceholder.svelte

@@ -1,19 +1,14 @@
-<script>import { twMerge } from "tailwind-merge";
-const sizes = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-xl",
-  xxl: "max-w-2xl"
-};
-export let divClass = "flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700";
-export let size = "sm";
-$: outDivclass = twMerge(sizes[size], divClass, $$props.class);
+<script lang="ts">
+  import clsx from "clsx";
+  import { type VideoPlaceholderProps as Props, videoPlaceholder } from "./index";
+
+  let { size = "sm", class: className }: Props = $props();
+  const base = $derived(videoPlaceholder({ size, class: clsx(className) }));
 </script>
 
-<div role="status" class={outDivclass}>
+<div role="status" class={base}>
   <svg width="48" height="48" class="text-gray-200 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 384 512">
-    <path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" />
+    <path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"></path>
   </svg>
   <span class="sr-only">Loading...</span>
 </div>
@@ -22,6 +17,6 @@ $: outDivclass = twMerge(sizes[size], divClass, $$props.class);
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
-@prop export let size: NonNullable<$$Props['size']> = 'sm';
+@props: size: any = "sm";
+@props:class: string;
 -->

package/dist/skeleton/VideoPlaceholder.svelte.d.ts

@@ -1,24 +1,20 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        divClass?: string;
-        size?: string | number;
-        class?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type VideoPlaceholderProps = typeof __propDef.props;
+type VideoPlaceholderProps_ = typeof __propDef.props;
+export { VideoPlaceholderProps_ as VideoPlaceholderProps };
 export type VideoPlaceholderEvents = typeof __propDef.events;
 export type VideoPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'flex justify-center items-center h-56 bg-gray-300 rounded-lg animate-pulse dark:bg-gray-700';
- * @prop export let size: NonNullable<$$Props['size']> = 'sm';
+ * @props: size: any = "sm";
+ * @props:class: string;
  */
-export default class VideoPlaceholder extends SvelteComponentTyped<VideoPlaceholderProps, VideoPlaceholderEvents, VideoPlaceholderSlots> {
+export default class VideoPlaceholder extends SvelteComponentTyped<VideoPlaceholderProps_, VideoPlaceholderEvents, VideoPlaceholderSlots> {
 }
-export {};

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -1,18 +1,23 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divClass = "p-4 max-w-sm rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700";
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { widgetPlaceholder } from "./index";
+  import clsx from "clsx";
+
+  let { class: className }: HTMLAttributes<HTMLDivElement> = $props();
+  const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
 </script>
 
-<div role="status" class={twMerge(divClass, $$props.class)}>
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2.5"></div>
-  <div class="mb-10 w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
-  <div class="flex items-baseline mt-4 space-x-6 rtl:space-x-reverse">
-    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
-    <div class="w-full h-56 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
-    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
-    <div class="w-full h-64 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
-    <div class="w-full h-80 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
-    <div class="w-full h-72 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
-    <div class="w-full h-80 bg-gray-200 rounded-t-lg dark:bg-gray-700"></div>
+<div role="status" class={base({ class: clsx(className) })}>
+  <div class={hLine({ class: "mb-2.5 h-2.5 w-32" })}></div>
+  <div class={hLine({ class: "mb-10 h-2 w-48" })}></div>
+  <div class={wrapper()}>
+    <div class={vLine({ class: "h-72" })}></div>
+    <div class={vLine({ class: "h-56" })}></div>
+    <div class={vLine({ class: "h-72" })}></div>
+    <div class={vLine({ class: "h-64" })}></div>
+    <div class={vLine({ class: "h-80" })}></div>
+    <div class={vLine({ class: "h-72" })}></div>
+    <div class={vLine({ class: "h-80" })}></div>
   </div>
   <span class="sr-only">Loading...</span>
 </div>
@@ -21,5 +26,5 @@ export let divClass = "p-4 max-w-sm rounded-sm border border-gray-200 shadow-sm
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'p-4 max-w-sm rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700';
+@props: 
 -->

package/dist/skeleton/WidgetPlaceholder.svelte.d.ts

@@ -1,9 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        divClass?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -15,7 +12,7 @@ export type WidgetPlaceholderSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let divClass: $$Props['divClass'] = 'p-4 max-w-sm rounded-sm border border-gray-200 shadow-sm animate-pulse md:p-6 dark:border-gray-700';
+ * @props:
  */
 export default class WidgetPlaceholder extends SvelteComponentTyped<WidgetPlaceholderProps, WidgetPlaceholderEvents, WidgetPlaceholderSlots> {
 }

package/dist/skeleton/index.d.ts

@@ -0,0 +1,11 @@
+import type { CardPlaceholderProps, ImagePlaceholderProps, ListPlaceholderProps, SkeletonProps, TextPlaceholderProps, VideoPlaceholderProps } from "./type";
+import CardPlaceholder from "./CardPlaceholder.svelte";
+import ImagePlaceholder from "./ImagePlaceholder.svelte";
+import ListPlaceholder from "./ListPlaceholder.svelte";
+import Skeleton from "./Skeleton.svelte";
+import TestimonialPlaceholder from "./TestimonialPlaceholder.svelte";
+import TextPlaceholder from "./TextPlaceholder.svelte";
+import VideoPlaceholder from "./VideoPlaceholder.svelte";
+import WidgetPlaceholder from "./WidgetPlaceholder.svelte";
+import { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "./theme";
+export { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder, cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder, type CardPlaceholderProps, type ImagePlaceholderProps, type ListPlaceholderProps, type SkeletonProps, type TextPlaceholderProps, type VideoPlaceholderProps };

package/dist/skeleton/index.js

@@ -0,0 +1,10 @@
+import CardPlaceholder from "./CardPlaceholder.svelte";
+import ImagePlaceholder from "./ImagePlaceholder.svelte";
+import ListPlaceholder from "./ListPlaceholder.svelte";
+import Skeleton from "./Skeleton.svelte";
+import TestimonialPlaceholder from "./TestimonialPlaceholder.svelte";
+import TextPlaceholder from "./TextPlaceholder.svelte";
+import VideoPlaceholder from "./VideoPlaceholder.svelte";
+import WidgetPlaceholder from "./WidgetPlaceholder.svelte";
+import { cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder } from "./theme";
+export { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder, cardPlaceholder, imagePlaceholder, listPlaceholder, skeleton, testimonialPlaceholder, textPlaceholder, videoPlaceholder, widgetPlaceholder };