flowbite-svelte 1.17.0 → 1.17.2

package/dist/forms/input-field/theme.js

@@ -89,7 +89,7 @@ export const input = tv({
             false: { base: "rounded-lg", input: "rounded-lg" },
             true: {
                 base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
-                input: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px"
+                input: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
             }
         }
     },

package/dist/types.d.ts

@@ -1660,13 +1660,18 @@ export interface Picture {
         h: number;
     };
 }
-export interface ImgProps extends ImgVariants, HTMLImgAttributes {
+export interface ImgProps extends ImgVariants, Omit<HTMLImgAttributes, "children"> {
+    children?: Snippet<[{
+        class: string;
+        restProps: any;
+    }]>;
     size?: ImgVariants["size"];
     effect?: ImgVariants["effect"];
     caption?: string;
     figClass?: string;
     captionClass?: string;
     href?: HTMLAnchorElement["href"];
+    align?: ImgVariants["align"];
 }
 export interface EnhandedImgProps extends ImgVariants, Omit<HTMLImgAttributes, "src"> {
     src: string | Picture;

package/dist/typography/img/EnhancedImg.svelte

@@ -22,6 +22,7 @@
   const theme = getTheme("img");
 
   let { base, figure, caption: figureCaption } = $derived(img({ size }));
+  console.warn("EnhancedImg is deprecated. Please use Img instead.");
 </script>
 
 {#snippet imageSlot()}
@@ -49,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1946)
+[EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
 ## Props
 @prop src
 @prop href

package/dist/typography/img/EnhancedImg.svelte.d.ts

@@ -2,7 +2,7 @@ import type { EnhandedImgProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1946)
+ * [EnhandedImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1948)
  * ## Props
  * @prop src
  * @prop href

package/dist/typography/img/Img.svelte

@@ -4,36 +4,48 @@
   import type { ImgProps } from "../../types";
   import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
 
-  let { size = "none", effect = "none", caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
+  let { children, size, effect, align, caption, class: className, classes, figClass, captionClass, href, ...restProps }: ImgProps = $props();
 
   warnThemeDeprecation(
     "Img",
     { figClass, captionClass },
     {
-      figClass: "fig",
+      figClass: "figure",
       captionClass: "caption"
     }
   );
+
   const styling = $derived({
-    fig: figClass,
-    caption: captionClass
+    figure: figClass || classes?.figure,
+    caption: captionClass || classes?.caption
   });
 
   const theme = getTheme("img");
 
-  let { base, figure, caption: figureCaption } = $derived(img({ size, effect }));
+  let { base, figure, caption: figureCaption } = $derived(img({ size, effect, align }));
+
+  // Determine if using slot or traditional props
+  const useSlot = $derived(!!children);
+  // Compute the final class string to pass to children
+  const imgClass = $derived(base({ class: clsx(theme?.base, className) }));
 </script>
 
 {#snippet imageSlot()}
   {#if caption}
-    <figure class={figure({ class: clsx(theme?.figure, styling.fig) })}>
-      <img {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    <figure class={figure({ class: clsx(theme?.figure, styling.figure) })}>
+      {#if useSlot}
+        {@render children?.({ class: imgClass, restProps })}
+      {:else}
+        <img {...restProps} class={imgClass} />
+      {/if}
       <figcaption class={figureCaption({ class: clsx(theme?.caption, styling.caption) })}>
         {@html caption}
       </figcaption>
     </figure>
+  {:else if useSlot}
+    {@render children?.({ class: imgClass, restProps })}
   {:else}
-    <img {...restProps} class={base({ class: clsx(theme?.base, className) })} />
+    <img {...restProps} class={imgClass} />
   {/if}
 {/snippet}
 
@@ -51,8 +63,10 @@
 ## Type
 [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
 ## Props
-@prop size = "none"
-@prop effect = "none"
+@prop children
+@prop size
+@prop effect
+@prop align
 @prop caption
 @prop class: className
 @prop classes

package/dist/typography/img/Img.svelte.d.ts

@@ -4,8 +4,10 @@ import type { ImgProps } from "../../types";
  * ## Type
  * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1937)
  * ## Props
- * @prop size = "none"
- * @prop effect = "none"
+ * @prop children
+ * @prop size
+ * @prop effect
+ * @prop align
  * @prop caption
  * @prop class: className
  * @prop classes

package/dist/typography/img/theme.d.ts

@@ -31,10 +31,6 @@ export declare const img: import("tailwind-variants").TVReturnType<{
             base: string;
             figure: string;
         };
-        none: {
-            base: string;
-            figure: string;
-        };
     };
     effect: {
         grayscale: {
@@ -55,8 +51,19 @@ export declare const img: import("tailwind-variants").TVReturnType<{
         "hue-rotate": {
             base: string;
         };
-        none: {
+    };
+    align: {
+        left: {
             base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
         };
     };
 }, {
@@ -93,10 +100,6 @@ export declare const img: import("tailwind-variants").TVReturnType<{
             base: string;
             figure: string;
         };
-        none: {
-            base: string;
-            figure: string;
-        };
     };
     effect: {
         grayscale: {
@@ -117,8 +120,19 @@ export declare const img: import("tailwind-variants").TVReturnType<{
         "hue-rotate": {
             base: string;
         };
-        none: {
+    };
+    align: {
+        left: {
             base: string;
+            figure: string;
+        };
+        center: {
+            base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
         };
     };
 }, {
@@ -155,10 +169,6 @@ export declare const img: import("tailwind-variants").TVReturnType<{
             base: string;
             figure: string;
         };
-        none: {
-            base: string;
-            figure: string;
-        };
     };
     effect: {
         grayscale: {
@@ -179,8 +189,19 @@ export declare const img: import("tailwind-variants").TVReturnType<{
         "hue-rotate": {
             base: string;
         };
-        none: {
+    };
+    align: {
+        left: {
+            base: string;
+            figure: string;
+        };
+        center: {
             base: string;
+            figure: string;
+        };
+        right: {
+            base: string;
+            figure: string;
         };
     };
 }, {

package/dist/typography/img/theme.js

@@ -13,8 +13,7 @@ export const img = tv({
             lg: { base: "max-w-lg", figure: "max-w-lg" },
             xl: { base: "max-w-xl", figure: "max-w-xl" },
             "2xl": { base: "max-w-2xl", figure: "max-w-2xl" },
-            full: { base: "max-w-full", figure: "max-w-full" },
-            none: { base: "", figure: "" }
+            full: { base: "max-w-full", figure: "max-w-full" }
         },
         effect: {
             grayscale: {
@@ -32,10 +31,12 @@ export const img = tv({
             },
             "hue-rotate": {
                 base: "hue-rotate-60 filter transition-all duration-300 hover:hue-rotate-0"
-            },
-            none: {
-                base: "transition-all duration-300"
             }
+        },
+        align: {
+            left: { base: "mx-0", figure: "mx-0" },
+            center: { base: "mx-auto", figure: "mx-auto" },
+            right: { base: "ml-auto mr-0", figure: "ml-auto mr-0" }
         }
     }
 });

package/dist/typography/layout/Layout.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1959)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/layout/Layout.svelte.d.ts

@@ -2,7 +2,7 @@ import type { LayoutProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1959)
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1961)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/list/Li.svelte

@@ -18,7 +18,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1972)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1974)
 ## Props
 @prop children
 @prop icon

package/dist/typography/list/Li.svelte.d.ts

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

package/dist/typography/list/List.svelte

@@ -28,7 +28,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1964)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1966)
 ## Props
 @prop children
 @prop tag = "ul"

package/dist/typography/list/List.svelte.d.ts

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

package/dist/typography/mark/Mark.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1980)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/mark/Mark.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MarkProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1980)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/paragraph/P.svelte

@@ -19,7 +19,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1983)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
 ## Props
 @prop children
 @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/paragraph/P.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ParagraphProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1983)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1985)
  * ## Props
  * @prop children
  * @prop class: className = "text-gray-900 dark:text-white"

package/dist/typography/secondary/Secondary.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1991)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/secondary/Secondary.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SecondaryProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1991)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/typography/span/Span.svelte

@@ -34,7 +34,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1996)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1998)
 ## Props
 @prop children
 @prop class: className

package/dist/typography/span/Span.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SpanProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1996)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1998)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/utils/Arrow.svelte

@@ -50,7 +50,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2038)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2040)
 ## Props
 @prop placement = "top"
 @prop cords

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

@@ -2,7 +2,7 @@ import type { ArrowProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2038)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2040)
  * ## Props
  * @prop placement = "top"
  * @prop cords

package/dist/utils/Popper.svelte

@@ -213,7 +213,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2018)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2020)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = 200

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

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

package/dist/video/Video.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2007)
 ## 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#L2005)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2007)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.17.0",
+  "version": "1.17.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -16,27 +16,27 @@
     "@docsearch/css": "^4.1.0",
     "@docsearch/js": "^4.1.0",
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@flowbite-svelte-plugins/chart": "^0.2.4",
-    "@flowbite-svelte-plugins/datatable": "^0.4.0",
+    "@flowbite-svelte-plugins/datatable": "^0.4.1",
     "@flowbite-svelte-plugins/texteditor": "^0.25.5",
     "@playwright/test": "^1.55.1",
     "@resvg/resvg-js": "^2.6.2",
-    "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/enhanced-img": "0.6.1",
-    "@sveltejs/kit": "^2.43.2",
+    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/adapter-vercel": "^5.10.3",
+    "@sveltejs/enhanced-img": "0.8.3",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
     "@tiptap/core": "3.4.4",
     "dayjs": "^1.11.18",
     "deepmerge": "^4.3.1",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "flowbite-svelte-admin-dashboard": "^2.0.0",
@@ -47,7 +47,7 @@
     "globals": "^16.4.0",
     "highlight.js": "^11.11.1",
     "jsdom": "^27.0.0",
-    "katex": "^0.16.22",
+    "katex": "^0.16.23",
     "lowlight": "^3.3.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
@@ -55,24 +55,23 @@
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "prism-themes": "^1.9.0",
-    "publint": "^0.3.13",
+    "publint": "^0.3.14",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.5",
     "satori": "^0.18.3",
     "satori-html": "^0.3.2",
-    "simple-datatables": "^10.0.0",
     "super-sitemap": "^1.0.5",
-    "svelte": "^5.39.5",
+    "svelte": "^5.39.9",
     "svelte-check": "^4.3.2",
     "svelte-doc-llm": "^0.4.1",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.4.1",
     "svelte-rune-highlight": "^0.7.1",
-    "tailwindcss": "^4.1.13",
-    "tsx": "^4.20.5",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.1",
-    "vite": "^7.1.7",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.9",
     "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4"
   },