flowbite-svelte 2.0.0-next.11 → 2.0.0-next.13

package/dist/theme-selector/themes/playful.css

@@ -0,0 +1,206 @@
+@theme {
+  --font-sans: "Shantell Sans", cursive;
+  --font-body: "Shantell Sans", cursive;
+
+  /* Flowbite variables */
+
+  --leading-9: 2.25rem;
+  --leading-7: 1.75rem;
+  --leading-8: 2rem;
+  --leading-6: 1.5rem;
+  --leading-4: 1rem;
+  --leading-none: 0.0625rem;
+  --leading-5: 1.25rem;
+  --tracking-tighter: -0.05rem;
+  --leading-heading-none: 3.75rem;
+  --tracking-tight: -0.025rem;
+
+  /* radius variables */
+  --radius-xxs: 2px;
+  --radius-xs: 2px;
+  --radius-sm: 10px;
+  --radius: 10px;
+  --radius: 14px;
+  --radius-md: 14px;
+  --radius-base: 20px;
+  --radius-lg: 16px;
+
+  /* border width variables */
+  --default-border-width: 1px;
+
+  /* text color variables */
+  --color-body: var(--color-slate-600);
+  --color-body-subtle: var(--color-slate-500);
+  --color-heading: var(--color-slate-900);
+  --color-fg-brand-subtle: var(--color-pink-200);
+  --color-fg-brand: var(--color-pink-700);
+  --color-fg-brand-strong: var(--color-pink-900);
+  --color-fg-success: var(--color-green-700);
+  --color-fg-success-strong: var(--color-green-900);
+  --color-fg-danger: var(--color-red-700);
+  --color-fg-danger-strong: var(--color-red-900);
+  --color-fg-warning-subtle: var(--color-orange-600);
+  --color-fg-warning: var(--color-orange-900);
+  --color-fg-yellow: var(--color-yellow-400);
+  --color-fg-disabled: var(--color-slate-400);
+  --color-fg-purple: var(--color-purple-600);
+  --color-fg-cyan: var(--color-cyan-600);
+  --color-fg-indigo: var(--color-indigo-600);
+  --color-fg-pink: var(--color-pink-600);
+  --color-fg-lime: var(--color-lime-600);
+
+  /* background color variables */
+  --color-neutral-primary-soft: var(--color-white);
+  --color-neutral-primary: var(--color-white);
+  --color-neutral-primary-medium: var(--color-white);
+  --color-neutral-primary-strong: var(--color-white);
+  --color-neutral-secondary-soft: var(--color-slate-50);
+  --color-neutral-secondary: var(--color-slate-50);
+  --color-neutral-secondary-medium: var(--color-slate-50);
+  --color-neutral-secondary-strong: var(--color-slate-50);
+  --color-neutral-secondary-strongest: var(--color-slate-50);
+  --color-neutral-tertiary-soft: var(--color-slate-100);
+  --color-neutral-tertiary: var(--color-slate-100);
+  --color-neutral-tertiary-medium: var(--color-slate-100);
+  --color-neutral-quaternary: var(--color-slate-200);
+  --color-neutral-quaternary-medium: var(--color-slate-200);
+  --color-gray: var(--color-slate-300);
+  --color-brand-softer: var(--color-pink-50);
+  --color-brand-soft: var(--color-pink-100);
+  --color-brand: var(--color-pink-900);
+  --color-brand-medium: var(--color-pink-200);
+  --color-brand-strong: var(--color-pink-800);
+  --color-success-soft: var(--color-green-50);
+  --color-success: var(--color-green-700);
+  --color-success-medium: var(--color-green-100);
+  --color-success-strong: var(--color-green-800);
+  --color-danger-soft: var(--color-red-50);
+  --color-danger: var(--color-red-700);
+  --color-danger-medium: var(--color-red-100);
+  --color-danger-strong: var(--color-red-800);
+  --color-warning-soft: var(--color-orange-50);
+  --color-warning: var(--color-orange-500);
+  --color-warning-medium: var(--color-orange-100);
+  --color-warning-strong: var(--color-orange-700);
+  --color-dark-soft: var(--color-slate-800);
+  --color-dark: var(--color-slate-800);
+  --color-dark-strong: var(--color-slate-900);
+  --color-disabled: var(--color-slate-100);
+  --color-purple: var(--color-purple-500);
+  --color-sky: var(--color-sky-500);
+  --color-teal: var(--color-teal-600);
+  --color-pink: var(--color-pink-600);
+  --color-cyan: var(--color-cyan-500);
+  --color-fuchsia: var(--color-fuchsia-600);
+  --color-indigo: var(--color-indigo-600);
+  --color-orange: var(--color-orange-400);
+
+  /* border color variables */
+  --color-buffer: var(--color-white);
+  --color-buffer-medium: var(--color-white);
+  --color-buffer-strong: var(--color-white);
+  --color-muted: var(--color-slate-50);
+  --color-light-subtle: var(--color-slate-100);
+  --color-light: var(--color-slate-100);
+  --color-light-medium: var(--color-slate-100);
+  --color-default-subtle: var(--color-slate-200);
+  --color-default: var(--color-slate-200);
+  --color-default-medium: var(--color-slate-200);
+  --color-default-strong: var(--color-slate-200);
+  --color-success-subtle: var(--color-green-200);
+  --color-danger-subtle: var(--color-red-200);
+  --color-warning-subtle: var(--color-orange-200);
+  --color-brand-subtle: var(--color-pink-200);
+  --color-brand-light: var(--color-pink-600);
+  --color-dark-subtle: var(--color-slate-800);
+  --color-dark-backdrop: var(--color-slate-950);
+}
+
+.dark {
+  /* text color variables */
+  --color-body: var(--color-slate-400);
+  --color-body-subtle: var(--color-slate-400);
+  --color-heading: var(--color-white);
+  --color-fg-brand-subtle: var(--color-pink-200);
+  --color-fg-brand: var(--color-pink-500);
+  --color-fg-brand-strong: var(--color-pink-400);
+  --color-fg-success: var(--color-green-600);
+  --color-fg-success-strong: var(--color-green-300);
+  --color-fg-danger: var(--color-red-500);
+  --color-fg-danger-strong: var(--color-red-300);
+  --color-fg-warning-subtle: var(--color-orange-500);
+  --color-fg-warning: var(--color-orange-300);
+  --color-fg-yellow: var(--color-yellow-400);
+  --color-fg-disabled: var(--color-slate-600);
+  --color-fg-purple: var(--color-purple-500);
+  --color-fg-cyan: var(--color-cyan-500);
+  --color-fg-indigo: var(--color-indigo-500);
+  --color-fg-pink: var(--color-pink-500);
+  --color-fg-lime: var(--color-lime-500);
+
+  /* background color variables */
+  --color-neutral-primary-soft: var(--color-slate-900);
+  --color-neutral-primary: var(--color-slate-950);
+  --color-neutral-primary-medium: var(--color-slate-800);
+  --color-neutral-primary-strong: var(--color-slate-700);
+  --color-neutral-secondary-soft: var(--color-slate-900);
+  --color-neutral-secondary: var(--color-slate-950);
+  --color-neutral-secondary-medium: var(--color-slate-800);
+  --color-neutral-secondary-strong: var(--color-slate-700);
+  --color-neutral-secondary-strongest: var(--color-slate-600);
+  --color-neutral-tertiary-soft: var(--color-slate-900);
+  --color-neutral-tertiary: var(--color-slate-800);
+  --color-neutral-tertiary-medium: var(--color-slate-700);
+  --color-neutral-quaternary: var(--color-slate-700);
+  --color-neutral-quaternary-medium: var(--color-slate-600);
+  --color-gray: var(--color-slate-600);
+  --color-brand-softer: var(--color-pink-950);
+  --color-brand-soft: var(--color-pink-900);
+  --color-brand: var(--color-pink-600);
+  --color-brand-medium: var(--color-pink-900);
+  --color-brand-strong: var(--color-pink-700);
+  --color-success-soft: var(--color-green-950);
+  --color-success: var(--color-green-600);
+  --color-success-medium: var(--color-green-900);
+  --color-success-strong: var(--color-green-700);
+  --color-danger-soft: var(--color-red-950);
+  --color-danger: var(--color-red-700);
+  --color-danger-medium: var(--color-red-900);
+  --color-danger-strong: var(--color-red-800);
+  --color-warning-soft: var(--color-orange-950);
+  --color-warning: var(--color-orange-600);
+  --color-warning-medium: var(--color-orange-900);
+  --color-warning-strong: var(--color-orange-700);
+  --color-dark-soft: var(--color-slate-700);
+  --color-dark: var(--color-slate-800);
+  --color-dark-strong: var(--color-slate-700);
+  --color-disabled: var(--color-slate-800);
+  --color-purple: var(--color-purple-500);
+  --color-sky: var(--color-sky-500);
+  --color-teal: var(--color-teal-500);
+  --color-pink: var(--color-pink-500);
+  --color-cyan: var(--color-cyan-500);
+  --color-fuchsia: var(--color-fuchsia-500);
+  --color-indigo: var(--color-indigo-500);
+  --color-orange: var(--color-orange-400);
+
+  /* border color variables */
+  --color-buffer: var(--color-slate-950);
+  --color-buffer-medium: var(--color-slate-900);
+  --color-buffer-strong: var(--color-slate-800);
+  --color-muted: var(--color-slate-900);
+  --color-light-subtle: var(--color-slate-900);
+  --color-light: var(--color-slate-800);
+  --color-light-medium: var(--color-slate-700);
+  --color-default-subtle: var(--color-slate-900);
+  --color-default: var(--color-slate-800);
+  --color-default-medium: var(--color-slate-700);
+  --color-default-strong: var(--color-slate-600);
+  --color-success-subtle: var(--color-green-900);
+  --color-danger-subtle: var(--color-red-900);
+  --color-warning-subtle: var(--color-orange-900);
+  --color-brand-subtle: var(--color-pink-900);
+  --color-brand-light: var(--color-pink-600);
+  --color-dark-subtle: var(--color-slate-700);
+  --color-dark-backdrop: var(--color-slate-950);
+}

package/dist/theme-selector/themes.js

@@ -8,35 +8,35 @@ export const themeConfigs = [
     {
         id: "default",
         name: "Default",
-        cssPath: defaultCss, // Now this is a real URL
+        cssPath: defaultCss,
         fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap",
         colors: ["bg-gray-100 dark:bg-gray-700", "bg-blue-50 dark:bg-blue-900", "bg-blue-200 dark:bg-blue-800", "bg-blue-700 dark:bg-blue-700"]
     },
     {
         id: "minimal",
         name: "Minimal",
-        cssPath: minimalCss, // Now this is a real URL
+        cssPath: minimalCss,
         fontUrl: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap",
         colors: ["bg-stone-50 dark:bg-stone-600", "bg-stone-100 dark:bg-stone-700", "bg-stone-300 dark:bg-stone-800", "bg-stone-900 dark:bg-stone-900"]
     },
     {
         id: "enterprise",
         name: "Enterprise",
-        cssPath: enterpriseCss, // Now this is a real URL
+        cssPath: enterpriseCss,
         fontUrl: "https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap",
         colors: ["bg-zinc-100 dark:bg-zinc-700", "bg-cyan-50 dark:bg-cyan-900", "bg-cyan-100 dark:bg-cyan-800", "bg-cyan-700 dark:bg-cyan-700"]
     },
     {
         id: "playful",
         name: "Playful",
-        cssPath: playfulCss, // Now this is a real URL
+        cssPath: playfulCss,
         fontUrl: "https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap",
         colors: ["bg-slate-100 dark:bg-slate-700", "bg-pink-50 dark:bg-pink-900", "bg-pink-100 dark:bg-pink-800", "bg-pink-700 dark:bg-pink-700"]
     },
     {
         id: "mono",
         name: "Mono",
-        cssPath: monoCss, // Now this is a real URL
+        cssPath: monoCss,
         fontUrl: "https://fonts.googleapis.com/css2?family=Google+Sans+Code:wght@300;400;500;600;700&display=swap",
         colors: ["bg-neutral-100 dark:bg-neutral-700", "bg-indigo-50 dark:bg-indigo-900", "bg-indigo-100 dark:bg-indigo-800", "bg-indigo-700 dark:bg-indigo-700"]
     }

package/dist/utils/index.d.ts

@@ -2,6 +2,6 @@ import { type ClassValue } from "clsx";
 export { default as CloseButton } from "./CloseButton.svelte";
 export { closeButton } from "./theme";
 export { default as Popper } from "./Popper.svelte";
-export * from "./responsive.svelte";
+export * from "./responsive.svelte.js";
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function idGenerator(): string;

package/dist/utils/index.js

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 export { default as CloseButton } from "./CloseButton.svelte";
 export { closeButton } from "./theme";
 export { default as Popper } from "./Popper.svelte";
-export * from "./responsive.svelte";
+export * from "./responsive.svelte.js";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

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

@@ -25,21 +25,3 @@ 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/utils/responsive.svelte.js

@@ -0,0 +1,99 @@
+/**
+ * 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
+};

package/package.json

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