@pajohns/flowbite-svelte 0.1.0

package/dist/popover/theme.js

@@ -0,0 +1,97 @@
+import { tv } from "tailwind-variants";
+export const popover = tv({
+    slots: {
+        base: "rounded-lg shadow-md bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700",
+        content: "p-2",
+        title: "py-2 px-3 rounded-t-md border-b ",
+        h3: "font-semibold"
+    },
+    variants: {
+        color: {
+            default: {
+                title: "bg-gray-100 border-gray-200 dark:border-gray-600 dark:bg-gray-700",
+                h3: "text-gray-900 dark:text-white"
+            },
+            primary: {
+                title: "bg-primary-700",
+                h3: "text-white"
+            },
+            secondary: {
+                title: "bg-secondary-700",
+                h3: "text-white"
+            },
+            gray: {
+                title: "bg-gray-700",
+                h3: "text-white"
+            },
+            red: {
+                title: "bg-red-700",
+                h3: "text-white"
+            },
+            orange: {
+                title: "bg-orange-700",
+                h3: "text-white"
+            },
+            amber: {
+                title: "bg-amber-700",
+                h3: "text-white"
+            },
+            yellow: {
+                title: "bg-yellow-500",
+                h3: "text-gray-800"
+            },
+            lime: {
+                title: "bg-lime-700",
+                h3: "text-white"
+            },
+            green: {
+                title: "bg-green-700",
+                h3: "text-white"
+            },
+            emerald: {
+                title: "bg-emerald-700",
+                h3: "text-white"
+            },
+            teal: {
+                title: "bg-teal-700",
+                h3: "text-white"
+            },
+            cyan: {
+                title: "bg-cyan-700",
+                h3: "text-white"
+            },
+            sky: {
+                title: "bg-sky-700",
+                h3: "text-white"
+            },
+            blue: {
+                title: "bg-blue-700",
+                h3: "text-white"
+            },
+            indigo: {
+                title: "bg-indigo-700",
+                h3: "text-white"
+            },
+            violet: {
+                title: "bg-violet-700",
+                h3: "text-white"
+            },
+            purple: {
+                title: "bg-purple-700",
+                h3: "text-white"
+            },
+            fuchsia: {
+                title: "bg-fuchsia-700",
+                h3: "text-white"
+            },
+            pink: {
+                title: "bg-pink-700",
+                h3: "text-white"
+            },
+            rose: {
+                title: "bg-rose-700",
+                h3: "text-white"
+            }
+        }
+    }
+});

package/dist/progress/Progressbar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { ProgressbarProps } from "../types";
+  import clsx from "clsx";
+  import { cubicOut } from "svelte/easing";
+  import { Tween } from "svelte/motion";
+  import { progressbar } from "./theme";
+  import { getTheme } from "../theme/themeUtils";
+
+  let {
+    progress = "45",
+    precision = 0,
+    tweenDuration = 400,
+    animate = false,
+    size = "h-2.5",
+    labelInside = false,
+    labelOutside = "",
+    easing = cubicOut,
+    color = "primary",
+    class: className,
+    classes,
+    ...restProps
+  }: ProgressbarProps = $props();
+
+  const theme = $derived(getTheme("progressbar"));
+
+  let _progress = $derived(
+    new Tween(0, {
+      duration: animate ? tweenDuration : 0,
+      easing
+    })
+  );
+  const {
+    base,
+    label: labelInsideCls,
+    inside,
+    outside,
+    span,
+    progressCls
+  } = $derived(
+    progressbar({
+      color,
+      labelInside
+    })
+  );
+
+  $effect(() => {
+    _progress.set(Number(progress));
+  });
+</script>
+
+{#if labelOutside}
+  <div {...restProps} class={outside({ class: clsx(theme?.outside, classes?.outside) })}>
+    <span class={span({ class: clsx(theme?.span, classes?.span) })}>{labelOutside}</span>
+    <span class={progressCls({ class: clsx(theme?.progressCls, classes?.progressCls) })}>{progress}%</span>
+  </div>
+{/if}
+<div {...restProps} class={base({ class: clsx(size, theme?.base, className) })}>
+  {#if labelInside}
+    <div class={labelInsideCls({ class: clsx(size, theme?.label, classes?.label) })} style="width: {_progress.current}%">
+      {_progress.current.toFixed(precision)}%
+    </div>
+  {:else}
+    <div class={inside({ class: clsx(size, theme?.inside, classes?.label) })} style="width: {_progress.current}%"></div>
+  {/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1316)
+## Props
+@prop progress = "45"
+@prop precision = 0
+@prop tweenDuration = 400
+@prop animate = false
+@prop size = "h-2.5"
+@prop labelInside = false
+@prop labelOutside = ""
+@prop easing = cubicOut
+@prop color = "primary"
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/progress/Progressbar.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProgressbarProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ProgressbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1316)
+ * ## Props
+ * @prop progress = "45"
+ * @prop precision = 0
+ * @prop tweenDuration = 400
+ * @prop animate = false
+ * @prop size = "h-2.5"
+ * @prop labelInside = false
+ * @prop labelOutside = ""
+ * @prop easing = cubicOut
+ * @prop color = "primary"
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Progressbar: import("svelte").Component<ProgressbarProps, {}, "">;
+type Progressbar = ReturnType<typeof Progressbar>;
+export default Progressbar;

package/dist/progress/Progressradial.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { progressradial } from "./theme";
+  import type { ProgressradialProps } from "../types";
+  import clsx from "clsx";
+  import { cubicOut } from "svelte/easing";
+  import { Tween } from "svelte/motion";
+  import { getTheme } from "../theme/themeUtils";
+
+  let {
+    progress = 45,
+    radius = 42,
+    startingPosition = "top",
+    precision = 0,
+    tweenDuration = 400,
+    animate = false,
+    size = "h-24 w-24",
+    thickness = 4,
+    labelInside = false,
+    labelOutside = "",
+    easing = cubicOut,
+    color = "primary",
+    class: className,
+    classes,
+    ...restProps
+  }: ProgressradialProps = $props();
+
+  const theme = $derived(getTheme("progressradial"));
+
+  const _progress = $derived(
+    new Tween(0, {
+      duration: animate ? tweenDuration : 0,
+      easing
+    })
+  );
+
+  const { base, label, background, foreground, outside, span, progressCls } = $derived(
+    progressradial({
+      color,
+      labelInside
+    })
+  );
+
+  $effect(() => {
+    _progress.set(Number(progress));
+  });
+
+  // Calculate the circle properties
+  let circumference = $derived(2 * Math.PI * radius);
+  // let strokeDashoffset = $state()
+  // Calculate the stroke-dashoffset based on progress
+  let strokeDashoffset = $derived(circumference - (_progress.current / 100) * circumference);
+  let rotationAngle = $derived(startingPosition === "top" ? -90 : startingPosition === "right" ? 0 : startingPosition === "bottom" ? 90 : startingPosition === "left" ? 180 : -90);
+
+  let formattedProgress = $derived(_progress.current.toFixed(precision));
+</script>
+
+<div class="flex flex-col items-center">
+  {#if labelOutside}
+    <div class={outside({ class: clsx(theme?.outside, classes?.outside) })}>
+      <span class={span({ class: clsx(theme?.span, classes?.span) })}>{labelOutside}</span>
+      <span class={progressCls({ class: clsx(theme?.progressCls, classes?.progressCls) })}>{formattedProgress}%</span>
+    </div>
+  {/if}
+
+  <div {...restProps} class={base({ class: clsx(size, theme?.base, className) })}>
+    <svg viewBox="0 0 100 100" class="h-full w-full" style="transform: rotate({rotationAngle}deg)">
+      <!-- Background circle -->
+      <circle cx="50" cy="50" r={radius} class={background({ class: clsx(theme?.background, classes?.background) })} fill="none" stroke-width={thickness} />
+
+      <!-- Foreground circle (progress indicator) -->
+      <circle
+        cx="50"
+        cy="50"
+        r={radius}
+        class={foreground({ class: clsx(theme?.foreground, classes?.foreground) })}
+        fill="none"
+        stroke-width={thickness}
+        stroke-dasharray={circumference}
+        stroke-dashoffset={strokeDashoffset}
+        stroke-linecap="round"
+      />
+    </svg>
+
+    {#if labelInside}
+      <div class={label({ class: clsx(theme?.label, classes?.label) })}>
+        {formattedProgress}%
+      </div>
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
+## Props
+@prop progress = 45
+@prop radius = 42
+@prop startingPosition = "top"
+@prop precision = 0
+@prop tweenDuration = 400
+@prop animate = false
+@prop size = "h-24 w-24"
+@prop thickness = 4
+@prop labelInside = false
+@prop labelOutside = ""
+@prop easing = cubicOut
+@prop color = "primary"
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/progress/Progressradial.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ProgressradialProps } from "../types";
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ProgressradialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1327)
+ * ## Props
+ * @prop progress = 45
+ * @prop radius = 42
+ * @prop startingPosition = "top"
+ * @prop precision = 0
+ * @prop tweenDuration = 400
+ * @prop animate = false
+ * @prop size = "h-24 w-24"
+ * @prop thickness = 4
+ * @prop labelInside = false
+ * @prop labelOutside = ""
+ * @prop easing = cubicOut
+ * @prop color = "primary"
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Progressradial: import("svelte").Component<ProgressradialProps, {}, "">;
+type Progressradial = ReturnType<typeof Progressradial>;
+export default Progressradial;

package/dist/progress/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Progressbar } from "./Progressbar.svelte";
+export { default as Progressradial } from "./Progressradial.svelte";
+export { progressbar, progressradial } from "./theme";

package/dist/progress/index.js

@@ -0,0 +1,3 @@
+export { default as Progressbar } from "./Progressbar.svelte";
+export { default as Progressradial } from "./Progressradial.svelte";
+export { progressbar, progressradial } from "./theme";