flowbite-svelte 0.48.4 → 1.0.0-next.2

package/dist/popover/type.d.ts

@@ -0,0 +1,12 @@
+import type { PopperProps } from "../utils/Popper.svelte";
+import type { Snippet } from "svelte";
+import type { ParamsType, TransitionFunc } from "../types";
+import type { PopoverVariants } from "./theme";
+interface PopoverProps extends Omit<PopperProps, "title"> {
+    title?: Snippet | string;
+    color?: PopoverVariants["color"];
+    params?: ParamsType | undefined;
+    defaultClass?: string;
+    transition?: TransitionFunc;
+}
+export type { PopoverProps };

package/dist/popover/type.js

@@ -0,0 +1 @@
+export {};

package/dist/progress/Progressbar.svelte

@@ -1,49 +1,40 @@
-<script>import { cubicOut } from "svelte/easing";
-import { tweened } from "svelte/motion";
-import { twMerge } from "tailwind-merge";
-export let progress = "45";
-export let precision = 0;
-export let tweenDuration = 400;
-export let animate = false;
-export let size = "h-2.5";
-export let labelInside = false;
-export let labelOutside = "";
-export let easing = cubicOut;
-export let color = "primary";
-export let labelInsideClass = "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
-export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
-export let progressClass = "";
-export let classLabelOutside = "";
-const _progress = tweened(0, {
-  duration: animate ? tweenDuration : 0,
-  easing
-});
-const barColors = {
-  primary: "bg-primary-600",
-  blue: "bg-blue-600",
-  gray: "bg-gray-600 dark:bg-gray-300",
-  red: "bg-red-600 dark:bg-red-500",
-  green: "bg-green-600 dark:bg-green-500",
-  yellow: "bg-yellow-400",
-  purple: "bg-purple-600 dark:bg-purple-500",
-  indigo: "bg-indigo-600 dark:bg-indigo-500"
-};
-$: _progress.set(Number(progress));
+<script lang="ts">
+  import { cubicOut } from "svelte/easing";
+  import { twMerge } from "tailwind-merge";
+  import { tweened } from "svelte/motion";
+  import { type ProgressbarProps as Props, progressbar } from ".";
+
+  let { progress = "45", precision = 0, tweenDuration = 400, animate = false, size = "h-2.5", labelInside = false, labelOutside = "", easing = cubicOut, color = "primary", div2Class, oustsideSpanClass, oustsideProgressClass, labeloutsidedivClass, divClass, ...restProps }: Props = $props();
+
+  const _progress = tweened(0, {
+    duration: animate ? tweenDuration : 0,
+    easing
+  });
+  const { base, labelInsideDiv, insideDiv, outsideDiv, oustsideSpan, outsideProgress } = $derived(
+    progressbar({
+      color,
+      labelInside
+    })
+  );
+
+  $effect(() => {
+    _progress.set(Number(progress));
+  });
 </script>
 
 {#if labelOutside}
-  <div {...$$restProps} class={twMerge('flex justify-between mb-1', classLabelOutside)}>
-    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
-    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
+  <div {...restProps} class={outsideDiv({ class: labeloutsidedivClass })}>
+    <span class={oustsideSpan({ class: oustsideSpanClass })}>{labelOutside}</span>
+    <span class={outsideProgress({ class: oustsideProgressClass })}>{progress}%</span>
   </div>
 {/if}
-<div class={twMerge(divClass, size, $$props.class)}>
+<div {...restProps} class={twMerge(base({ class: divClass }), size)}>
   {#if labelInside}
-    <div class={twMerge(barColors[color], labelInsideClass)} style="width: {$_progress}%">
+    <div class={twMerge(labelInsideDiv({ class: div2Class }), size)} style="width: {$_progress}%">
       {$_progress.toFixed(precision)}%
     </div>
   {:else}
-    <div class={twMerge(barColors[color], size, 'rounded-full', progressClass)} style="width: {$_progress}%"></div>
+    <div class={twMerge(insideDiv({ class: div2Class }), size)} style="width: {$_progress}%"></div>
   {/if}
 </div>
 
@@ -51,17 +42,18 @@ $: _progress.set(Number(progress));
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let progress: $$Props['progress'] = '45';
-@prop export let precision: $$Props['precision'] = 0
-  export let tweenDuration: $$Props['tweenDuration'] = 400;
-@prop export let animate: $$Props['animate'] = false;
-@prop export let size: $$Props['size'] = 'h-2.5';
-@prop export let labelInside: $$Props['labelInside'] = false;
-@prop export let labelOutside: $$Props['labelOutside'] = '';
-@prop export let easing: $$Props['easing'] = cubicOut;
-@prop export let color: NonNullable<$$Props['color']> = 'primary';
-@prop export let labelInsideClass: $$Props['labelInsideClass'] = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
-@prop export let divClass: $$Props['divClass'] = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
-@prop export let progressClass: $$Props['progressClass'] = '';
-@prop export let classLabelOutside: $$Props['classLabelOutside'] = '';
+@props: progress: any = "45";
+@props:precision: any = 0;
+@props:tweenDuration: any = 400;
+@props:animate: any = false;
+@props:size: any = "h-2.5";
+@props:labelInside: any = false;
+@props:labelOutside: any = "";
+@props:easing: any = cubicOut;
+@props:color: any = "primary";
+@props:div2Class: any;
+@props:oustsideSpanClass: any;
+@props:oustsideProgressClass: any;
+@props:labeloutsidedivClass: any;
+@props:divClass: any;
 -->

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

@@ -1,47 +1,32 @@
 import { SvelteComponentTyped } from "svelte";
-import type { HTMLAttributes } from 'svelte/elements';
-import type { EasingFunction } from 'svelte/transition';
 declare const __propDef: {
-    props: HTMLAttributes<HTMLDivElement> & {
-        progress: string | number;
-        precision?: number;
-        tweenDuration?: number;
-        animate?: boolean;
-        size?: string;
-        labelInside?: boolean;
-        labelOutside?: string;
-        easing?: EasingFunction;
-        color?: "primary" | "blue" | "gray" | "red" | "green" | "yellow" | "purple" | "indigo";
-        labelInsideClass?: string;
-        divClass?: string;
-        progressClass?: string;
-        classLabelOutside?: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ProgressbarProps = typeof __propDef.props;
+type ProgressbarProps_ = typeof __propDef.props;
+export { ProgressbarProps_ as ProgressbarProps };
 export type ProgressbarEvents = typeof __propDef.events;
 export type ProgressbarSlots = typeof __propDef.slots;
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let progress: $$Props['progress'] = '45';
- * @prop export let precision: $$Props['precision'] = 0
- * export let tweenDuration: $$Props['tweenDuration'] = 400;
- * @prop export let animate: $$Props['animate'] = false;
- * @prop export let size: $$Props['size'] = 'h-2.5';
- * @prop export let labelInside: $$Props['labelInside'] = false;
- * @prop export let labelOutside: $$Props['labelOutside'] = '';
- * @prop export let easing: $$Props['easing'] = cubicOut;
- * @prop export let color: NonNullable<$$Props['color']> = 'primary';
- * @prop export let labelInsideClass: $$Props['labelInsideClass'] = 'text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
- * @prop export let divClass: $$Props['divClass'] = 'w-full bg-gray-200 rounded-full dark:bg-gray-700';
- * @prop export let progressClass: $$Props['progressClass'] = '';
- * @prop export let classLabelOutside: $$Props['classLabelOutside'] = '';
+ * @props: progress: any = "45";
+ * @props:precision: any = 0;
+ * @props:tweenDuration: any = 400;
+ * @props:animate: any = false;
+ * @props:size: any = "h-2.5";
+ * @props:labelInside: any = false;
+ * @props:labelOutside: any = "";
+ * @props:easing: any = cubicOut;
+ * @props:color: any = "primary";
+ * @props:div2Class: any;
+ * @props:oustsideSpanClass: any;
+ * @props:oustsideProgressClass: any;
+ * @props:labeloutsidedivClass: any;
+ * @props:divClass: any;
  */
-export default class Progressbar extends SvelteComponentTyped<ProgressbarProps, ProgressbarEvents, ProgressbarSlots> {
+export default class Progressbar extends SvelteComponentTyped<ProgressbarProps_, ProgressbarEvents, ProgressbarSlots> {
 }
-export {};

package/dist/progress/index.d.ts

@@ -0,0 +1,4 @@
+import type { ProgressbarProps } from "./type";
+import Progressbar from "./Progressbar.svelte";
+import { progressbar } from "./theme";
+export { Progressbar, progressbar, type ProgressbarProps };

package/dist/progress/index.js

@@ -0,0 +1,3 @@
+import Progressbar from "./Progressbar.svelte";
+import { progressbar } from "./theme";
+export { Progressbar, progressbar };

package/dist/progress/theme.d.ts

@@ -0,0 +1,271 @@
+export declare const progressbar: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        gray: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        red: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        orange: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        amber: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        yellow: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        lime: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        green: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        emerald: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        teal: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        cyan: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        sky: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        blue: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        indigo: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        violet: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        purple: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        fuchsia: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        pink: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        rose: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+    };
+    labelInside: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    labelInsideDiv: string;
+    insideDiv: string;
+    outsideDiv: string;
+    oustsideSpan: string;
+    outsideProgress: string;
+}, undefined, {
+    color: {
+        primary: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        gray: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        red: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        orange: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        amber: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        yellow: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        lime: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        green: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        emerald: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        teal: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        cyan: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        sky: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        blue: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        indigo: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        violet: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        purple: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        fuchsia: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        pink: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        rose: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+    };
+    labelInside: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    labelInsideDiv: string;
+    insideDiv: string;
+    outsideDiv: string;
+    oustsideSpan: string;
+    outsideProgress: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        gray: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        red: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        orange: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        amber: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        yellow: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        lime: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        green: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        emerald: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        teal: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        cyan: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        sky: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        blue: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        indigo: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        violet: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        purple: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        fuchsia: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        pink: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+        rose: {
+            labelInsideDiv: string;
+            insideDiv: string;
+        };
+    };
+    labelInside: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    labelInsideDiv: string;
+    insideDiv: string;
+    outsideDiv: string;
+    oustsideSpan: string;
+    outsideProgress: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/progress/theme.js

@@ -0,0 +1,113 @@
+import { tv } from "tailwind-variants";
+export const progressbar = tv({
+    slots: {
+        base: "w-full bg-gray-200 rounded-full dark:bg-gray-700",
+        labelInsideDiv: "text-primary-100 text-xs font-medium text-center leading-none rounded-full",
+        insideDiv: "rounded-full",
+        outsideDiv: "mb-1 flex justify-between",
+        oustsideSpan: "text-base font-medium text-blue-700 dark:text-white",
+        outsideProgress: "text-sm font-medium text-blue-700 dark:text-white"
+    },
+    variants: {
+        color: {
+            // 'primary' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'
+            primary: {
+                labelInsideDiv: "bg-primary-600",
+                insideDiv: "bg-primary-600"
+            },
+            gray: {
+                labelInsideDiv: "bg-gray-600 dark:bg-gray-300",
+                insideDiv: "bg-gray-600 dark:bg-gray-300"
+            },
+            red: {
+                labelInsideDiv: "bg-red-600 dark:bg-red-500",
+                insideDiv: "bg-red-600 dark:bg-red-500"
+            },
+            orange: {
+                labelInsideDiv: "bg-orange-600 dark:bg-orange-500",
+                insideDiv: "bg-orange-600 dark:bg-orange-500"
+            },
+            amber: {
+                labelInsideDiv: "bg-amber-600 dark:bg-amber-500",
+                insideDiv: "bg-amber-600 dark:bg-amber-500"
+            },
+            yellow: {
+                labelInsideDiv: "bg-yellow-400",
+                insideDiv: "bg-yellow-400"
+            },
+            lime: {
+                labelInsideDiv: "bg-lime-600 dark:bg-lime-500",
+                insideDiv: "bg-lime-600 dark:bg-lime-500"
+            },
+            green: {
+                labelInsideDiv: "bg-green-600 dark:bg-green-500",
+                insideDiv: "bg-green-600 dark:bg-green-500"
+            },
+            emerald: {
+                labelInsideDiv: "bg-emerald-600 dark:bg-emerald-500",
+                insideDiv: "bg-emerald-600 dark:bg-emerald-500"
+            },
+            teal: {
+                labelInsideDiv: "bg-teal-600 dark:bg-teal-500",
+                insideDiv: "bg-teal-600 dark:bg-teal-500"
+            },
+            cyan: {
+                labelInsideDiv: "bg-cyan-600 dark:bg-cyan-500",
+                insideDiv: "bg-cyan-600 dark:bg-cyan-500"
+            },
+            sky: {
+                labelInsideDiv: "bg-sky-600 dark:bg-sky-500",
+                insideDiv: "bg-sky-600 dark:bg-sky-500"
+            },
+            blue: {
+                labelInsideDiv: "bg-blue-600",
+                insideDiv: "bg-blue-600"
+            },
+            indigo: {
+                labelInsideDiv: "bg-indigo-600 dark:bg-indigo-500",
+                insideDiv: "bg-indigo-600 dark:bg-indigo-500"
+            },
+            violet: {
+                labelInsideDiv: "bg-violet-600 dark:bg-violet-500",
+                insideDiv: "bg-violet-600 dark:bg-violet-500"
+            },
+            purple: {
+                labelInsideDiv: "bg-purple-600 dark:bg-purple-500",
+                insideDiv: "bg-purple-600 dark:bg-purple-500"
+            },
+            fuchsia: {
+                labelInsideDiv: "bg-fuchsia-600 dark:bg-fuchsia-500",
+                insideDiv: "bg-fuchsia-600 dark:bg-fuchsia-500"
+            },
+            pink: {
+                labelInsideDiv: "bg-pink-600 dark:bg-pink-500",
+                insideDiv: "bg-pink-600 dark:bg-pink-500"
+            },
+            rose: {
+                labelInsideDiv: "bg-rose-600 dark:bg-rose-500",
+                insideDiv: "bg-rose-600 dark:bg-rose-500"
+            }
+        },
+        labelInside: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            labelInside: true,
+            class: {
+                base: "text-primary-100 text-xs font-medium text-center leading-none rounded-full",
+                labelInsideDiv: "p-0.5"
+            }
+        },
+        {
+            labelInside: false,
+            class: { base: "rounded-full" }
+        }
+    ],
+    defaultVariants: {
+        color: "primary",
+        labelInside: false
+    }
+});

package/dist/progress/type.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { EasingFunction } from "svelte/transition";
+type ColorType = "primary" | "gray" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | undefined;
+interface ProgressbarProps extends HTMLAttributes<HTMLDivElement> {
+    progress?: string | number;
+    precision?: number;
+    tweenDuration?: number;
+    animate?: boolean;
+    size?: string;
+    labelInside?: boolean;
+    labelOutside?: string;
+    easing?: EasingFunction;
+    color?: ColorType;
+    div2Class?: string;
+    oustsideSpanClass?: string;
+    oustsideProgressClass?: string;
+    labeloutsidedivClass?: string;
+    divClass?: string;
+}
+export { type ProgressbarProps };

package/dist/progress/type.js

@@ -0,0 +1 @@
+export {};