@pajohns/flowbite-svelte 0.1.0

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

@@ -0,0 +1,14 @@
+import type { SkeletonProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [SkeletonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1552)
+ * ## Props
+ * @prop size = "sm"
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/skeleton/TestimonialPlaceholder.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { testimonialPlaceholder } from "./theme";
+  import clsx from "clsx";
+  import type { TestimonialPlaceholderProps } from "..";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { class: className, classes, ...restProps }: TestimonialPlaceholderProps = $props();
+
+  const theme = $derived(getTheme("testimonialPlaceholder"));
+
+  const { base, lineA, lineB, svg, content } = testimonialPlaceholder();
+</script>
+
+<div role="status" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div
+    class={lineB({
+      class: clsx("mx-auto mb-2.5 h-2.5 max-w-[640px]", theme?.lineB, classes?.lineB)
+    })}
+  ></div>
+  <div
+    class={lineB({
+      class: clsx("mx-auto h-2.5 max-w-[540px]", theme?.lineB, classes?.lineB)
+    })}
+  ></div>
+  <div
+    class={content({
+      class: clsx(theme?.content, classes?.content)
+    })}
+  >
+    <svg class={svg({ class: clsx(theme?.svg, classes?.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={lineA({
+        class: clsx("me-3 h-2.5 w-20", theme?.lineA, classes?.lineA)
+      })}
+    ></div>
+    <div
+      class={lineA({
+        class: clsx("h-2 w-24", theme?.lineA, classes?.lineA)
+      })}
+    ></div>
+  </div>
+  <span class="sr-only">Loading...</span>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1556)
+## Props
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,13 @@
+import type { TestimonialPlaceholderProps } from "..";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TestimonialPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1556)
+ * ## Props
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const TestimonialPlaceholder: import("svelte").Component<TestimonialPlaceholderProps, {}, "">;
+type TestimonialPlaceholder = ReturnType<typeof TestimonialPlaceholder>;
+export default TestimonialPlaceholder;

package/dist/skeleton/TextPlaceholder.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { textPlaceholder } from "./theme";
+  import type { TextPlaceholderProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { size = "sm", class: className, classes, ...restProps }: TextPlaceholderProps = $props();
+
+  const theme = $derived(getTheme("textPlaceholder"));
+
+  const { base, div, lineA, lineB } = $derived(
+    textPlaceholder({
+      size
+    })
+  );
+</script>
+
+<div role="status" {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+  <div
+    class={div({
+      class: clsx("w-full", theme?.div, classes?.div)
+    })}
+  >
+    <div class={lineA({ class: clsx("h-2.5 w-32", theme?.lineA, classes?.lineA) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-24", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+  </div>
+  <div
+    class={div({
+      class: clsx("w-11/12", theme?.div, classes?.div)
+    })}
+  >
+    <div class={lineA({ class: clsx("h-2.5 w-full", theme?.lineA, classes?.lineA) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-24", theme?.lineB, classes?.lineB) })}></div>
+  </div>
+  <div
+    class={div({
+      class: clsx("w-9/12", theme?.div, classes?.div)
+    })}
+  >
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineA({ class: clsx("h-2.5 w-80", theme?.lineA, classes?.lineA) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+  </div>
+  <div
+    class={div({
+      class: clsx("w-11/12", theme?.div, classes?.div)
+    })}
+  >
+    <div class={lineA({ class: clsx("h-2.5 w-full", theme?.lineA, classes?.lineA) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-24", theme?.lineB, classes?.lineB) })}></div>
+  </div>
+  <div
+    class={div({
+      class: clsx("w-10/12", theme?.div, classes?.div)
+    })}
+  >
+    <div class={lineB({ class: clsx("h-2.5 w-32", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-24", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineA({ class: clsx("h-2.5 w-full", theme?.lineA, classes?.lineA) })}></div>
+  </div>
+  <div
+    class={div({
+      class: clsx("w-8/12", theme?.div)
+    })}
+  >
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+    <div class={lineA({ class: clsx("h-2.5 w-80", theme?.lineA, classes?.lineA) })}></div>
+    <div class={lineB({ class: clsx("h-2.5 w-full", theme?.lineB, classes?.lineB) })}></div>
+  </div>
+  <span class="sr-only">Loading...</span>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1558)
+## Props
+@prop size = "sm"
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

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

@@ -0,0 +1,14 @@
+import type { TextPlaceholderProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [TextPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1558)
+ * ## Props
+ * @prop size = "sm"
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const TextPlaceholder: import("svelte").Component<TextPlaceholderProps, {}, "">;
+type TextPlaceholder = ReturnType<typeof TextPlaceholder>;
+export default TextPlaceholder;

package/dist/skeleton/VideoPlaceholder.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import clsx from "clsx";
+  import { videoPlaceholder } from "./theme";
+  import type { VideoPlaceholderProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { size = "sm", class: className }: VideoPlaceholderProps = $props();
+
+  const theme = $derived(getTheme("videoPlaceholder"));
+
+  const base = $derived(videoPlaceholder({ size, class: clsx(theme, className) }));
+</script>
+
+<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>
+  </svg>
+  <span class="sr-only">Loading...</span>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1562)
+## Props
+@prop size = "sm"
+@prop class: className
+-->

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

@@ -0,0 +1,12 @@
+import type { VideoPlaceholderProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [VideoPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1562)
+ * ## Props
+ * @prop size = "sm"
+ * @prop class: className
+ */
+declare const VideoPlaceholder: import("svelte").Component<VideoPlaceholderProps, {}, "">;
+type VideoPlaceholder = ReturnType<typeof VideoPlaceholder>;
+export default VideoPlaceholder;

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { widgetPlaceholder } from "./theme";
+  import clsx from "clsx";
+  import type { WidgetPlaceholderProps } from "../types";
+  import { getTheme } from "../theme/themeUtils";
+
+  let { class: className, classes }: WidgetPlaceholderProps = $props();
+
+  const theme = $derived(getTheme("widgetPlaceholder"));
+
+  const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
+</script>
+
+<div role="status" class={base({ class: clsx(theme?.base, className) })}>
+  <div class={hLine({ class: clsx("mb-2.5 h-2.5 w-32", classes?.hLine) })}></div>
+  <div class={hLine({ class: clsx("mb-10 h-2 w-48", classes?.hLine) })}></div>
+  <div class={wrapper()}>
+    <div class={vLine({ class: clsx("h-72", classes?.vLine) })}></div>
+    <div class={vLine({ class: clsx("h-56", classes?.vLine) })}></div>
+    <div class={vLine({ class: clsx("h-72", classes?.vLine) })}></div>
+    <div class={vLine({ class: clsx("h-64", classes?.vLine) })}></div>
+    <div class={vLine({ class: clsx("h-80", classes?.vLine) })}></div>
+    <div class={vLine({ class: clsx("h-72", classes?.vLine) })}></div>
+    <div class={vLine({ class: clsx("h-80", classes?.vLine) })}></div>
+  </div>
+  <span class="sr-only">Loading...</span>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1566)
+## Props
+@prop class: className
+@prop classes
+-->

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

@@ -0,0 +1,12 @@
+import type { WidgetPlaceholderProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [WidgetPlaceholderProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1566)
+ * ## Props
+ * @prop class: className
+ * @prop classes
+ */
+declare const WidgetPlaceholder: import("svelte").Component<WidgetPlaceholderProps, {}, "">;
+type WidgetPlaceholder = ReturnType<typeof WidgetPlaceholder>;
+export default WidgetPlaceholder;

package/dist/skeleton/index.d.ts

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

package/dist/skeleton/index.js

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