flowbite-svelte 0.47.2 → 1.0.0-next.1

package/dist/skeleton/TextPlaceholder.svelte

@@ -1,54 +1,52 @@
-<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 { 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({ 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>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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,23 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        divClass?: string;
-        size?: string | number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TextPlaceholderProps = typeof __propDef.props;
-export type TextPlaceholderEvents = typeof __propDef.events;
-export type TextPlaceholderSlots = typeof __propDef.slots;
+import { type TextPlaceholderProps as Props } from "./index";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.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 {};
+declare const TextPlaceholder: import("svelte").Component<Props, {}, "">;
+type TextPlaceholder = ReturnType<typeof TextPlaceholder>;
+export default TextPlaceholder;

package/dist/skeleton/VideoPlaceholder.svelte

@@ -1,27 +1,21 @@
-<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 { type VideoPlaceholderProps as Props, videoPlaceholder } from "./index";
+
+  let { size = "sm", class: className }: Props = $props();
+  const base = $derived(videoPlaceholder({ size, 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>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.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,23 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        divClass?: string;
-        size?: string | number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type VideoPlaceholderProps = typeof __propDef.props;
-export type VideoPlaceholderEvents = typeof __propDef.events;
-export type VideoPlaceholderSlots = typeof __propDef.slots;
+import { type VideoPlaceholderProps as Props } from "./index";
 /**
- * [Go to docs](https://flowbite-svelte.com/)
+ * [Go to docs](https://preview.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 {};
+declare const VideoPlaceholder: import("svelte").Component<Props, {}, "">;
+type VideoPlaceholder = ReturnType<typeof VideoPlaceholder>;
+export default VideoPlaceholder;

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -1,25 +1,29 @@
-<script>import { twMerge } from "tailwind-merge";
-export let divClass = "p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700";
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import { widgetPlaceholder } from "./index";
+
+  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({ 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>
 
 <!--
 @component
-[Go to docs](https://flowbite-svelte.com/)
+[Go to docs](https://preview.flowbite-svelte.com/)
 ## Props
-@prop export let divClass: $$Props['divClass'] = 'p-4 max-w-sm rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+@props: 
 -->

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

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

package/dist/skeleton/index.d.ts

@@ -0,0 +1,11 @@
+import type { CardPlaceholderProps, ImagePlaceholderProps, ListPlaceholderProps, SkeletonProps, SizeVideoType, 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, type SizeVideoType };

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 };