@foxui/core 0.4.3 → 0.4.5

package/dist/components/button/Button.svelte

@@ -65,7 +65,6 @@
 		WithElementRef<HTMLAnchorAttributes> & {
 			variant?: ButtonVariant;
 			size?: ButtonSize;
-			checkCurrent?: boolean;
 		};
 </script>
 
@@ -85,7 +84,7 @@
 {#if href}
 	<a
 		bind:this={ref}
-		class={cn('rounded-box', buttonVariants({ variant, size }), className)}
+		class={cn(buttonVariants({ variant, size }), className)}
 		{href}
 		{...restProps}
 	>
@@ -94,7 +93,7 @@
 {:else}
 	<button
 		bind:this={ref}
-		class={cn('rounded-box', buttonVariants({ variant, size }), className)}
+		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		{...restProps}
 	>

package/dist/components/button/Button.svelte.d.ts

@@ -103,7 +103,6 @@ export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    checkCurrent?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

package/dist/components/theme-toggle/ThemeToggle.svelte

@@ -1,61 +1,24 @@
-<script lang="ts" module>
-	export const theme = $state({
-		dark: false
-	});
-</script>
-
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Button, type ButtonProps } from '../button';
 	import { cn } from '../../utils';
+	import { ModeWatcher, toggleMode } from 'mode-watcher';
 
-	onMount(() => {
-		// load from local storage
-		const savedDarkMode = localStorage.getItem('darkMode');
-		if (savedDarkMode) {
-			theme.dark = JSON.parse(savedDarkMode);
-		} else {
-			// prefers color scheme?
-			theme.dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		}
-
-		// remove local storage
-		// localStorage.removeItem("darkMode");
-		setTheme(theme.dark);
-
-		// recommended method for newer browsers: specify event-type as first argument
-		window
-			.matchMedia('(prefers-color-scheme: dark)')
-			.addEventListener('change', (e) => e.matches && toggleTheme());
-
-		window
-			.matchMedia('(prefers-color-scheme: light)')
-			.addEventListener('change', (e) => e.matches && toggleTheme());
-	});
-
-	function setTheme(dark: Boolean) {
-		var root = document.getElementsByTagName('html')[0];
-
-		if (dark) {
-			root.classList.add('dark');
-		} else {
-			root.classList.remove('dark');
-		}
-	}
-
-	function toggleTheme() {
-		theme.dark = !theme.dark;
-		// save to local storage
-		localStorage.setItem('darkMode', JSON.stringify(theme.dark));
-		setTheme(theme.dark);
-	}
-
-	let { class: className, ref = $bindable(null), ...restProps }: ButtonProps = $props();
+	let {
+		class: className,
+		ref = $bindable(null),
+		defaultMode = 'system',
+		...restProps
+	}: ButtonProps & {
+		defaultMode?: 'light' | 'dark' | 'system';
+	} = $props();
 </script>
 
+<ModeWatcher {defaultMode} />
+
 <Button
 	variant="link"
-	onclick={toggleTheme}
+	onclick={toggleMode}
 	class={cn(
 		'theme-toggle focus-visible:outline-base-900 dark:focus-visible:outline-base-100 flex items-center justify-center rounded-2xl focus-visible:outline-2',
 		className

package/dist/components/theme-toggle/ThemeToggle.svelte.d.ts

@@ -1,7 +1,7 @@
-export declare const theme: {
-    dark: boolean;
-};
 import { type ButtonProps } from '../button';
-declare const ThemeToggle: import("svelte").Component<ButtonProps, {}, "ref">;
+type $$ComponentProps = ButtonProps & {
+    defaultMode?: 'light' | 'dark' | 'system';
+};
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ThemeToggle = ReturnType<typeof ThemeToggle>;
 export default ThemeToggle;

package/dist/components/theme-toggle/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ThemeToggle } from './ThemeToggle.svelte';
-export { theme } from './ThemeToggle.svelte';
+export { toggleMode, setMode, resetMode, mode, userPrefersMode, systemPrefersMode } from 'mode-watcher';

package/dist/components/theme-toggle/index.js

@@ -1,2 +1,2 @@
 export { default as ThemeToggle } from './ThemeToggle.svelte';
-export { theme } from './ThemeToggle.svelte';
+export { toggleMode, setMode, resetMode, mode, userPrefersMode, systemPrefersMode } from 'mode-watcher';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foxui/core",
   "private": false,
-  "version": "0.4.3",
+  "version": "0.4.5",
   "type": "module",
   "files": [
     "dist"
@@ -21,7 +21,9 @@
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
     "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
@@ -38,14 +40,13 @@
     "tailwindcss": "^4.1.5",
     "typescript": "^5.0.0",
     "typescript-eslint": "^8.20.0",
-    "vite": "^6.2.6",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/package": "^2.3.11"
+    "vite": "^6.2.6"
   },
   "dependencies": {
     "@number-flow/svelte": "^0.3.7",
     "bits-ui": "^1.4.3",
     "clsx": "^2.1.1",
+    "mode-watcher": "^1.1.0",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^3.2.0",
     "tailwind-variants": "^1.0.0"