flowbite-svelte 1.0.6 → 1.1.0

package/dist/utils/CloseButton.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import clsx from "clsx";
-  import { type CloseButtonProps as Props, closeButtonVariants } from "./index";
+  import { type CloseButtonProps } from "..";
+  import { closeButtonVariants } from ".";
 
-  let { children, color = "gray", onclick, name = "Close", ariaLabel, size = "md", class: className, ...restProps }: Props = $props();
+  let { children, color = "gray", onclick, name = "Close", ariaLabel, size = "md", class: className, svgClass, ...restProps }: CloseButtonProps = $props();
 
   const { base, svg } = $derived(closeButtonVariants({ color, size }));
 </script>
@@ -13,7 +14,7 @@
     {#if children}
       {@render children()}
     {:else}
-      <svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <svg class={svg({ class: svgClass })} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
       </svg>
     {/if}
@@ -35,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-Props
+[CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L118)
 ## Props
 @prop children
 @prop color = "gray"
@@ -44,5 +45,6 @@ Props
 @prop ariaLabel
 @prop size = "md"
 @prop class: className
+@prop svgClass
 @prop ...restProps
 -->

package/dist/utils/CloseButton.svelte.d.ts

@@ -1,8 +1,8 @@
-import { type CloseButtonProps as Props } from "./index";
+import { type CloseButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * Props
+ * [CloseButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L118)
  * ## Props
  * @prop children
  * @prop color = "gray"
@@ -11,8 +11,9 @@ import { type CloseButtonProps as Props } from "./index";
  * @prop ariaLabel
  * @prop size = "md"
  * @prop class: className
+ * @prop svgClass
  * @prop ...restProps
  */
-declare const CloseButton: import("svelte").Component<Props, {}, "">;
+declare const CloseButton: import("svelte").Component<CloseButtonProps, {}, "">;
 type CloseButton = ReturnType<typeof CloseButton>;
 export default CloseButton;

package/dist/utils/Popper.svelte

@@ -203,7 +203,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1720)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1771)
 ## Props
 @prop triggeredBy
 @prop trigger = "click"

package/dist/utils/Popper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PopperProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1720)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1771)
  * ## Props
  * @prop triggeredBy
  * @prop trigger = "click"

package/dist/utils/index.d.ts

@@ -1,109 +1,4 @@
-import type { AnchorButtonAttributes } from "../types";
 import { type ClassValue } from "clsx";
-import { type VariantProps } from "tailwind-variants";
-import CloseButton from "./CloseButton.svelte";
+export { default as CloseButton } from "./CloseButton.svelte";
+export { closeButtonVariants } from "./theme";
 export declare function cn(...inputs: ClassValue[]): string;
-type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;
-declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        none: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    svg: string;
-}, "focus:outline-hidden whitespace-normal", {
-    color: {
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        none: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    svg: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        secondary: string;
-        gray: string;
-        red: string;
-        orange: string;
-        amber: string;
-        yellow: string;
-        lime: string;
-        green: string;
-        emerald: string;
-        teal: string;
-        cyan: string;
-        sky: string;
-        blue: string;
-        indigo: string;
-        violet: string;
-        purple: string;
-        fuchsia: string;
-        pink: string;
-        rose: string;
-        none: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    svg: string;
-}, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;
-type CloseButtonProps = CloseButtonVariants & AnchorButtonAttributes & {
-    onclick?: (ev: MouseEvent) => void;
-    name?: string;
-    ariaLabel?: string;
-};
-export { CloseButton, closeButtonVariants, type CloseButtonProps };

package/dist/utils/index.js

@@ -1,71 +1,7 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { tv } from "tailwind-variants";
-import CloseButton from "./CloseButton.svelte";
+export { default as CloseButton } from "./CloseButton.svelte";
+export { closeButtonVariants } from "./theme";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-const closeButtonVariants = tv({
-    base: "focus:outline-hidden whitespace-normal",
-    variants: {
-        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-        color: {
-            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
-            secondary: "text-secondary-500 focus:ring-secondary-400 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:hover:text-secondary-300",
-            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
-            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
-            orange: "text-orange-500 focus:ring-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 dark:hover:text-orange-300",
-            amber: "text-amber-500 focus:ring-amber-400 hover:bg-amber-200 dark:hover:bg-amber-800 dark:hover:text-amber-300",
-            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
-            lime: "text-lime-500 focus:ring-lime-400 hover:bg-lime-200 dark:hover:bg-lime-800 dark:hover:text-lime-300",
-            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
-            emerald: "text-emerald-500 focus:ring-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 dark:hover:text-emerald-300",
-            teal: "text-teal-500 focus:ring-teal-400 hover:bg-teal-200 dark:hover:bg-teal-800 dark:hover:text-teal-300",
-            cyan: "text-cyan-500 focus:ring-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-800 dark:hover:text-cyan-300",
-            sky: "text-sky-500 focus:ring-sky-400 hover:bg-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-300",
-            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
-            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
-            violet: "text-violet-500 focus:ring-violet-400 hover:bg-violet-200 dark:hover:bg-violet-800 dark:hover:text-violet-300",
-            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
-            fuchsia: "text-fuchsia-500 focus:ring-fuchsia-400 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 dark:hover:text-fuchsia-300",
-            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
-            rose: "text-rose-500 focus:ring-rose-400 hover:bg-rose-200 dark:hover:bg-rose-800 dark:hover:text-rose-300",
-            none: ""
-        },
-        size: {
-            xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
-            sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
-            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
-            lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
-        }
-    },
-    defaultVariants: {
-        color: "gray",
-        size: "md",
-        href: null
-    },
-    slots: {
-        svg: ""
-    },
-    compoundVariants: [
-        {
-            size: "xs",
-            class: {
-                svg: "w-3 h-3"
-            }
-        },
-        {
-            size: "sm",
-            class: {
-                svg: "w-3.5 h-3.5"
-            }
-        },
-        {
-            size: ["md", "lg"],
-            class: {
-                svg: "w-5 h-5"
-            }
-        }
-    ]
-});
-export { CloseButton, closeButtonVariants };

package/dist/utils/theme.d.ts

@@ -0,0 +1,97 @@
+export declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal", {
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        gray: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        none: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    svg: string;
+}, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;

package/dist/utils/theme.js

@@ -0,0 +1,69 @@
+import { tv } from "tailwind-variants";
+export const closeButtonVariants = tv({
+    base: "focus:outline-hidden whitespace-normal",
+    variants: {
+        // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+        color: {
+            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
+            secondary: "text-secondary-500 focus:ring-secondary-400 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:hover:text-secondary-300",
+            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
+            orange: "text-orange-500 focus:ring-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 dark:hover:text-orange-300",
+            amber: "text-amber-500 focus:ring-amber-400 hover:bg-amber-200 dark:hover:bg-amber-800 dark:hover:text-amber-300",
+            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
+            lime: "text-lime-500 focus:ring-lime-400 hover:bg-lime-200 dark:hover:bg-lime-800 dark:hover:text-lime-300",
+            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
+            emerald: "text-emerald-500 focus:ring-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 dark:hover:text-emerald-300",
+            teal: "text-teal-500 focus:ring-teal-400 hover:bg-teal-200 dark:hover:bg-teal-800 dark:hover:text-teal-300",
+            cyan: "text-cyan-500 focus:ring-cyan-400 hover:bg-cyan-200 dark:hover:bg-cyan-800 dark:hover:text-cyan-300",
+            sky: "text-sky-500 focus:ring-sky-400 hover:bg-sky-200 dark:hover:bg-sky-800 dark:hover:text-sky-300",
+            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
+            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
+            violet: "text-violet-500 focus:ring-violet-400 hover:bg-violet-200 dark:hover:bg-violet-800 dark:hover:text-violet-300",
+            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
+            fuchsia: "text-fuchsia-500 focus:ring-fuchsia-400 hover:bg-fuchsia-200 dark:hover:bg-fuchsia-800 dark:hover:text-fuchsia-300",
+            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
+            rose: "text-rose-500 focus:ring-rose-400 hover:bg-rose-200 dark:hover:bg-rose-800 dark:hover:text-rose-300",
+            none: ""
+        },
+        size: {
+            xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
+            sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
+            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
+            lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
+        }
+    },
+    defaultVariants: {
+        color: "gray",
+        size: "md",
+        href: null
+    },
+    slots: {
+        svg: ""
+    },
+    compoundVariants: [
+        {
+            size: "xs",
+            class: {
+                svg: "w-3 h-3"
+            }
+        },
+        {
+            size: "sm",
+            class: {
+                svg: "w-3.5 h-3.5"
+            }
+        },
+        {
+            size: ["md", "lg"],
+            class: {
+                svg: "w-5 h-5"
+            }
+        },
+        {
+            size: ["xs", "sm", "md", "lg"],
+            color: "none",
+            class: "focus:ring-0 rounded-none m-0"
+        }
+    ]
+});

package/dist/video/Video.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1706)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1757)
 ## Props
 @prop children
 @prop type = "video/mp4"

package/dist/video/Video.svelte.d.ts

@@ -2,7 +2,7 @@ import type { VideoProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1706)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1757)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {