flowbite-svelte 1.12.1 → 1.12.2

package/dist/utils/index.d.ts

@@ -3,5 +3,6 @@ export { default as CloseButton } from "./CloseButton.svelte";
 export { closeButton } from "./theme";
 export { trapFocus } from "./actions";
 export { default as Popper } from "./Popper.svelte";
+export * from "./responsive.svelte";
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function idGenerator(): string;

package/dist/utils/index.js

@@ -4,6 +4,7 @@ export { default as CloseButton } from "./CloseButton.svelte";
 export { closeButton } from "./theme";
 export { trapFocus } from "./actions";
 export { default as Popper } from "./Popper.svelte";
+export * from "./responsive.svelte";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

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

@@ -0,0 +1,27 @@
+/**
+ * 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 declare function useMediaQuery(query: string): () => boolean;
+/**
+ * Hook for common Tailwind CSS breakpoints
+ * @returns Object with boolean values for each breakpoint
+ */
+export declare function useBreakpoints(): {
+    readonly sm: boolean;
+    readonly md: boolean;
+    readonly lg: boolean;
+    readonly xl: boolean;
+    readonly "2xl": boolean;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+    readonly isDesktop: boolean;
+};
+/**
+ * Get current breakpoint name
+ * @returns Current breakpoint as string
+ */
+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>;

package/dist/utils/responsive.svelte.js

@@ -0,0 +1,100 @@
+import { browser } from "$app/environment";
+/**
+ * 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 (!browser)
+            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 (!browser)
+            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
+};

package/package.json

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