flowbite-svelte 1.12.3 → 1.12.5

package/dist/typography/img/Img.svelte

@@ -49,7 +49,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1904)
+[ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1909)
 ## Props
 @prop size = "none"
 @prop effect = "none"

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

@@ -2,7 +2,7 @@ import type { ImgProps } from "../../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1904)
+ * [ImgProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1909)
  * ## Props
  * @prop size = "none"
  * @prop effect = "none"

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#L1926)
+[LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1931)
 ## 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#L1926)
+ * [LayoutProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1931)
  * ## 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#L1939)
+[LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1944)
 ## 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#L1939)
+ * [LiProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1944)
  * ## 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#L1931)
+[ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1936)
 ## 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#L1931)
+ * [ListProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1936)
  * ## 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#L1945)
+[MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1950)
 ## 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#L1945)
+ * [MarkProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1950)
  * ## 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#L1950)
+[ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1955)
 ## 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#L1950)
+ * [ParagraphProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1955)
  * ## 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#L1958)
+[SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1963)
 ## 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#L1958)
+ * [SecondaryProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1963)
  * ## 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#L1963)
+[SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1968)
 ## 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#L1963)
+ * [SpanProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1968)
  * ## 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#L2005)
+[ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2010)
 ## Props
 @prop placement = "top"
 @prop cords

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

@@ -2,7 +2,7 @@ import { type ArrowProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
+ * [ArrowProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2010)
  * ## 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#L1985)
+[PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1990)
 ## Props
 @prop triggeredBy
 @prop triggerDelay = 200

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#L1985)
+ * [PopperProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1990)
  * ## Props
  * @prop triggeredBy
  * @prop triggerDelay = 200

package/dist/utils/responsive.svelte

@@ -0,0 +1,111 @@
+<script module lang="ts">
+  /**
+   * A Svelte 5 rune-based media query hook
+   * @param query - CSS media query string (e.g., '(min-width: 768px)')
+   * @returns A function that returns the current match state
+   */
+  export function useMediaQuery(query: string): () => boolean {
+    let matches = $state<boolean>(false);
+
+    $effect(() => {
+      if (typeof window === "undefined") return;
+
+      const mediaQuery: MediaQueryList = window.matchMedia(query);
+      matches = mediaQuery.matches;
+
+      const handler = (e: MediaQueryListEvent): void => {
+        matches = e.matches;
+      };
+
+      mediaQuery.addEventListener("change", handler);
+
+      return (): void => {
+        mediaQuery.removeEventListener("change", handler);
+      };
+    });
+
+    return (): boolean => matches;
+  }
+
+  /**
+   * Hook for common Tailwind CSS breakpoints
+   * @returns Object with boolean values for each breakpoint
+   */
+  export function useBreakpoints() {
+    const sm = useMediaQuery("(min-width: 640px)");
+    const md = useMediaQuery("(min-width: 768px)");
+    const lg = useMediaQuery("(min-width: 1024px)");
+    const xl = useMediaQuery("(min-width: 1280px)");
+    const xxl = useMediaQuery("(min-width: 1536px)");
+
+    return {
+      get sm() {
+        return sm();
+      },
+      get md() {
+        return md();
+      },
+      get lg() {
+        return lg();
+      },
+      get xl() {
+        return xl();
+      },
+      get "2xl"() {
+        return xxl();
+      },
+      get isMobile() {
+        return !sm();
+      },
+      get isTablet() {
+        return sm() && !lg();
+      },
+      get isDesktop() {
+        return lg();
+      }
+    };
+  }
+
+  /**
+   * Get current breakpoint name
+   * @returns Current breakpoint as string
+   */
+  export function useCurrentBreakpoint(): () => "xs" | "sm" | "md" | "lg" | "xl" | "2xl" {
+    let currentBreakpoint = $state<"xs" | "sm" | "md" | "lg" | "xl" | "2xl">("xs");
+
+    $effect(() => {
+      if (typeof window === "undefined") return;
+
+      const updateBreakpoint = (): void => {
+        const width = window.innerWidth;
+        if (width >= 1536) currentBreakpoint = "2xl";
+        else if (width >= 1280) currentBreakpoint = "xl";
+        else if (width >= 1024) currentBreakpoint = "lg";
+        else if (width >= 768) currentBreakpoint = "md";
+        else if (width >= 640) currentBreakpoint = "sm";
+        else currentBreakpoint = "xs";
+      };
+
+      updateBreakpoint();
+      window.addEventListener("resize", updateBreakpoint);
+
+      return (): void => {
+        window.removeEventListener("resize", updateBreakpoint);
+      };
+    });
+
+    return (): "xs" | "sm" | "md" | "lg" | "xl" | "2xl" => currentBreakpoint;
+  }
+
+  // Type definitions for common breakpoint values
+  export type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+  export const BREAKPOINTS: Record<BreakpointKey, number> = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+  } as const;
+</script>

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

@@ -25,3 +25,21 @@ export declare function useBreakpoints(): {
 export declare function useCurrentBreakpoint(): () => "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type BreakpointKey = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export declare const BREAKPOINTS: Record<BreakpointKey, number>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Responsive: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Responsive = InstanceType<typeof Responsive>;
+export default Responsive;

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#L1972)
+[VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1977)
 ## 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#L1972)
+ * [VideoProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1977)
  * ## Props
  * @prop children
  * @prop type = "video/mp4"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.12.3",
+  "version": "1.12.5",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {
@@ -21,11 +21,12 @@
     "@flowbite-svelte-plugins/datatable": "^0.4.0",
     "@flowbite-svelte-plugins/texteditor": "^0.25.3",
     "@playwright/test": "^1.54.2",
+    "@resvg/resvg-js": "^2.6.2",
     "@sveltejs/adapter-auto": "^6.0.2",
     "@sveltejs/adapter-vercel": "^5.8.2",
-    "@sveltejs/enhanced-img": "^0.6.1",
+    "@sveltejs/enhanced-img": "0.6.1",
     "@sveltejs/kit": "^2.27.3",
-    "@sveltejs/package": "2.4.0",
+    "@sveltejs/package": "2.4.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.1",
     "@svitejs/changesets-changelog-github-compact": "^1.2.0",
     "@tailwindcss/vite": "^4.1.11",
@@ -57,19 +58,21 @@
     "publint": "^0.3.12",
     "runatics": "^0.1.4",
     "runes-meta-tags": "^0.4.4",
+    "satori": "^0.16.2",
+    "satori-html": "^0.3.2",
     "simple-datatables": "^10.0.0",
     "svelte": "^5.38.0",
     "svelte-check": "^4.3.1",
     "svelte-doc-llm": "^0.2.2",
     "svelte-lib-helpers": "^0.4.30",
     "svelte-meta-tags": "^4.4.0",
-    "svelte-rune-highlight": "^0.6.9",
+    "svelte-rune-highlight": "^0.7.0",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.20.3",
     "typescript": "^5.9.2",
-    "typescript-eslint": "8.39.0",
+    "typescript-eslint": "8.39.1",
     "vite": "^6.3.5",
-    "vite-plugin-devtools-json": "^0.4.1",
+    "vite-plugin-devtools-json": "^1.0.0",
     "vitest": "^3.2.4"
   },
   "peerDependencies": {
@@ -805,6 +808,10 @@
       "types": "./dist/utils/Popper.svelte.d.ts",
       "svelte": "./dist/utils/Popper.svelte"
     },
+    "./responsive.svelte": {
+      "types": "./dist/utils/responsive.svelte.d.ts",
+      "svelte": "./dist/utils/responsive.svelte"
+    },
     "./Video.svelte": {
       "types": "./dist/video/Video.svelte.d.ts",
       "svelte": "./dist/video/Video.svelte"

package/dist/utils/responsive.svelte.js

@@ -1,99 +0,0 @@
-/**
- * A Svelte 5 rune-based media query hook
- * @param query - CSS media query string (e.g., '(min-width: 768px)')
- * @returns A function that returns the current match state
- */
-export function useMediaQuery(query) {
-    let matches = $state(false);
-    $effect(() => {
-        if (typeof window === "undefined")
-            return;
-        const mediaQuery = window.matchMedia(query);
-        matches = mediaQuery.matches;
-        const handler = (e) => {
-            matches = e.matches;
-        };
-        mediaQuery.addEventListener("change", handler);
-        return () => {
-            mediaQuery.removeEventListener("change", handler);
-        };
-    });
-    return () => matches;
-}
-/**
- * Hook for common Tailwind CSS breakpoints
- * @returns Object with boolean values for each breakpoint
- */
-export function useBreakpoints() {
-    const sm = useMediaQuery("(min-width: 640px)");
-    const md = useMediaQuery("(min-width: 768px)");
-    const lg = useMediaQuery("(min-width: 1024px)");
-    const xl = useMediaQuery("(min-width: 1280px)");
-    const xxl = useMediaQuery("(min-width: 1536px)");
-    return {
-        get sm() {
-            return sm();
-        },
-        get md() {
-            return md();
-        },
-        get lg() {
-            return lg();
-        },
-        get xl() {
-            return xl();
-        },
-        get "2xl"() {
-            return xxl();
-        },
-        get isMobile() {
-            return !sm();
-        },
-        get isTablet() {
-            return sm() && !lg();
-        },
-        get isDesktop() {
-            return lg();
-        }
-    };
-}
-/**
- * Get current breakpoint name
- * @returns Current breakpoint as string
- */
-export function useCurrentBreakpoint() {
-    let currentBreakpoint = $state("xs");
-    $effect(() => {
-        if (typeof window === "undefined")
-            return;
-        const updateBreakpoint = () => {
-            const width = window.innerWidth;
-            if (width >= 1536)
-                currentBreakpoint = "2xl";
-            else if (width >= 1280)
-                currentBreakpoint = "xl";
-            else if (width >= 1024)
-                currentBreakpoint = "lg";
-            else if (width >= 768)
-                currentBreakpoint = "md";
-            else if (width >= 640)
-                currentBreakpoint = "sm";
-            else
-                currentBreakpoint = "xs";
-        };
-        updateBreakpoint();
-        window.addEventListener("resize", updateBreakpoint);
-        return () => {
-            window.removeEventListener("resize", updateBreakpoint);
-        };
-    });
-    return () => currentBreakpoint;
-}
-export const BREAKPOINTS = {
-    xs: 0,
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    "2xl": 1536
-};