@joyautomation/salt 0.0.21 → 0.0.29

package/dist/actions.js

@@ -3,13 +3,13 @@ export const setTheme = async ({ request, cookies }) => {
     const theme = data.get('theme');
     cookies.set(`theme`, theme, {
         path: '/',
-        secure: false,
+        secure: false
     });
     const themeName = theme === 'themeDark' ? 'dark mode' : 'light mode';
     return {
         context: 'setTheme',
         type: 'success',
         message: `You are now in ${themeName}.`,
-        theme,
+        theme
     };
 };

package/dist/client.js

@@ -1,12 +1,12 @@
 export function setTheme(form) {
-    if (form?.context === "setTheme") {
-        if (form?.theme === "themeDark") {
-            document.body.classList.add("themeDark");
-            document.body.classList.remove("themeLight");
+    if (form?.context === 'setTheme') {
+        if (form?.theme === 'themeDark') {
+            document.body.classList.add('themeDark');
+            document.body.classList.remove('themeLight');
         }
         else {
-            document.body.classList.remove("themeDark");
-            document.body.classList.add("themeLight");
+            document.body.classList.remove('themeDark');
+            document.body.classList.add('themeLight');
         }
     }
 }

package/dist/components/ThemeSwitch.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { themeState, type Theme } from '../theme.svelte';
+
+	const options: { value: Theme; label: string; icon: string }[] = [
+		{ value: 'themeSystem', label: 'System', icon: 'computer' },
+		{ value: 'themeLight', label: 'Light', icon: 'sun' },
+		{ value: 'themeDark', label: 'Dark', icon: 'moon' }
+	];
+
+	function handleChange(newTheme: Theme) {
+		themeState.set(newTheme);
+	}
+</script>
+
+<div class="theme-switch">
+	{#each options as option}
+		<button
+			type="button"
+			class="theme-option"
+			class:active={themeState.value === option.value}
+			onclick={() => handleChange(option.value)}
+			title={option.label}
+		>
+			{#if option.icon === 'computer'}
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<rect x="2" y="3" width="20" height="14" rx="2" />
+					<line x1="8" y1="21" x2="16" y2="21" />
+					<line x1="12" y1="17" x2="12" y2="21" />
+				</svg>
+			{:else if option.icon === 'sun'}
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<circle cx="12" cy="12" r="4" />
+					<path d="M12 2v2" />
+					<path d="M12 20v2" />
+					<path d="m4.93 4.93 1.41 1.41" />
+					<path d="m17.66 17.66 1.41 1.41" />
+					<path d="M2 12h2" />
+					<path d="M20 12h2" />
+					<path d="m6.34 17.66-1.41 1.41" />
+					<path d="m19.07 4.93-1.41 1.41" />
+				</svg>
+			{:else if option.icon === 'moon'}
+				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+					<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+				</svg>
+			{/if}
+		</button>
+	{/each}
+</div>
+
+<style>.theme-switch {
+  display: flex;
+  gap: 1px;
+  background: var(--theme-neutral-200);
+  border-radius: 6px;
+  padding: 3px;
+}
+
+.theme-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--theme-neutral-500);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.theme-option:hover {
+  color: var(--theme-neutral-700);
+  background: var(--theme-neutral-300);
+}
+.theme-option.active {
+  background: var(--theme-neutral-100);
+  color: var(--theme-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.theme-option svg {
+  flex-shrink: 0;
+}</style>

package/dist/components/ThemeSwitch.svelte.d.ts

@@ -0,0 +1,18 @@
+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 ThemeSwitch: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThemeSwitch = InstanceType<typeof ThemeSwitch>;
+export default ThemeSwitch;

package/dist/components/Toggle.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-
 	export let id: string;
 	export let checked = false;
 	export let name: string;

package/dist/components/forms/types.d.ts

@@ -2,7 +2,7 @@ export type InputProps = {
     id: string;
     name: string;
     label: string;
-    type: HTMLInputElement["type"];
+    type: HTMLInputElement['type'];
     value: string;
     validation: (value: string) => string | null;
 };

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-export * as actions from "./actions.js";
-export * as client from "./client.js";
-export { default as Toggle } from "./components/Toggle.svelte";
-export { default as ThemeButton } from "./components/ThemeButton.svelte";
-export { default as Toast } from "./components/Toast.svelte";
-export { default as Icon } from "./components/Icon.svelte";
-export * as icons from "./components/icons/index.js";
-export * as state from "./state/notifications.svelte";
+export * as actions from './actions.js';
+export * as client from './client.js';
+export { default as Toggle } from './components/Toggle.svelte';
+export { default as ThemeButton } from './components/ThemeButton.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as Icon } from './components/Icon.svelte';
+export * as icons from './components/icons/index.js';
+export * as state from './state/notifications.svelte';
+export { default as ThemeSwitch } from './components/ThemeSwitch.svelte';
+export { themeState, getEffectiveTheme, type Theme } from './theme.svelte';

package/dist/index.js

@@ -1,8 +1,10 @@
-export * as actions from "./actions.js";
-export * as client from "./client.js";
-export { default as Toggle } from "./components/Toggle.svelte";
-export { default as ThemeButton } from "./components/ThemeButton.svelte";
-export { default as Toast } from "./components/Toast.svelte";
-export { default as Icon } from "./components/Icon.svelte";
-export * as icons from "./components/icons/index.js";
-export * as state from "./state/notifications.svelte";
+export * as actions from './actions.js';
+export * as client from './client.js';
+export { default as Toggle } from './components/Toggle.svelte';
+export { default as ThemeButton } from './components/ThemeButton.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as Icon } from './components/Icon.svelte';
+export * as icons from './components/icons/index.js';
+export * as state from './state/notifications.svelte';
+export { default as ThemeSwitch } from './components/ThemeSwitch.svelte';
+export { themeState, getEffectiveTheme } from './theme.svelte';

package/dist/state/notifications.svelte.js

@@ -2,7 +2,7 @@ import { writable } from 'svelte/store';
 import { nanoid } from 'nanoid';
 const initializer = [];
 export const notifications = $state({
-    current: initializer,
+    current: initializer
 });
 export function addNotification(notification) {
     const id = nanoid();
@@ -10,8 +10,8 @@ export function addNotification(notification) {
         ...notifications.current,
         {
             id,
-            ...notification,
-        },
+            ...notification
+        }
     ];
     setTimeout(() => {
         notifications.current = notifications.current.filter((n) => n.id !== id);

package/dist/stores/notifications.js

@@ -1,5 +1,5 @@
-import { writable } from "svelte/store";
-import { nanoid } from "nanoid";
+import { writable } from 'svelte/store';
+import { nanoid } from 'nanoid';
 const initializer = [];
 export const notifications = writable(initializer);
 export function addNotification(notification) {
@@ -8,8 +8,8 @@ export function addNotification(notification) {
         ...notifications,
         {
             id,
-            ...notification,
-        },
+            ...notification
+        }
     ]);
     setTimeout(() => {
         notifications.update((notifications) => notifications.filter((n) => n.id !== id));

package/dist/styles/buttons.scss

@@ -33,7 +33,7 @@ a.button {
 
 .button--secondary:hover {
   color: var(--white);
-  background-color: var(--primary-hover);
+  background-color: var(--theme-primary-hover);
 }
 
 .button--icon {

package/dist/styles/themes.scss

@@ -1,4 +1,5 @@
 @use "sass:meta";
+@use "sass:map";
 
 $themes: (
   "themeLight": (
@@ -127,19 +128,32 @@ $themes: (
   ),
 );
 
-@each $theme-name, $theme-map in $themes {
-  // Create a class for the theme
-  .#{$theme-name} {
-    // Iterate over each property in the theme map
-    @each $property, $value in $theme-map {
-      // Check if the value is a nested map (like for 'neutral')
-      @if (meta.type-of($value) == "map") {
-        @each $nested-key, $nested-value in $value {
-          --#{$property}-#{$nested-key}: #{$nested-value};
-        }
-      } @else {
-        --#{$property}: #{$value};
+@mixin apply-theme($theme-map) {
+  @each $property, $value in $theme-map {
+    @if (meta.type-of($value) == "map") {
+      @each $nested-key, $nested-value in $value {
+        --#{$property}-#{$nested-key}: #{$nested-value};
       }
+    } @else {
+      --#{$property}: #{$value};
     }
   }
 }
+
+@each $theme-name, $theme-map in $themes {
+  .#{$theme-name} {
+    @include apply-theme($theme-map);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .themeSystem {
+    @include apply-theme(map.get($themes, "themeLight"));
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .themeSystem {
+    @include apply-theme(map.get($themes, "themeDark"));
+  }
+}

package/dist/theme.svelte.d.ts

@@ -0,0 +1,7 @@
+export type Theme = 'themeSystem' | 'themeLight' | 'themeDark';
+export declare const themeState: {
+    readonly value: Theme;
+    initialize: (serverTheme?: Theme | null) => void;
+    set: (newTheme: Theme) => void;
+};
+export declare function getEffectiveTheme(): 'themeLight' | 'themeDark';

package/dist/theme.svelte.js

@@ -0,0 +1,49 @@
+const isTheme = (value) => value === 'themeSystem' || value === 'themeLight' || value === 'themeDark';
+function readThemeCookie() {
+    if (typeof document === 'undefined')
+        return null;
+    const match = document.cookie?.match(/(?:^|; )theme=([^;]+)/);
+    if (!match)
+        return null;
+    try {
+        const value = decodeURIComponent(match[1]);
+        return isTheme(value) ? value : null;
+    }
+    catch {
+        return null;
+    }
+}
+function createThemeState() {
+    let current = $state('themeSystem');
+    function initialize(serverTheme) {
+        if (serverTheme && isTheme(serverTheme)) {
+            current = serverTheme;
+        }
+        else {
+            const cookieTheme = readThemeCookie();
+            current = cookieTheme ?? 'themeSystem';
+        }
+    }
+    function set(newTheme) {
+        current = newTheme;
+        if (typeof document !== 'undefined') {
+            document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
+            document.body.className = newTheme;
+        }
+    }
+    return {
+        get value() {
+            return current;
+        },
+        initialize,
+        set
+    };
+}
+export const themeState = createThemeState();
+export function getEffectiveTheme() {
+    if (themeState.value === 'themeSystem') {
+        const prefersDark = globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+        return prefersDark ? 'themeDark' : 'themeLight';
+    }
+    return themeState.value;
+}

package/package.json

@@ -1,6 +1,18 @@
 {
   "name": "@joyautomation/salt",
-  "version": "0.0.21",
+  "version": "0.0.29",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  },
   "exports": {
     ".": [
       "./dist/index.js",
@@ -22,6 +34,7 @@
     "svelte": "5.0.0-next.244"
   },
   "devDependencies": {
+    "@eslint/js": "^9.25.1",
     "@playwright/test": "^1.52.0",
     "@sveltejs/adapter-auto": "^6.0.0",
     "@sveltejs/kit": "^2.20.7",
@@ -49,20 +62,14 @@
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joyautomation/salt"
+  },
+  "packageManager": "pnpm@10.13.1",
   "dependencies": {
     "@sveltejs/adapter-node": "^5.2.12",
     "nanoid": "^5.1.5",
     "sass": "^1.87.0"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "test": "npm run test:integration && npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test:integration": "playwright test",
-    "test:unit": "vitest"
   }
-}
+}