lapikit 0.6.1 → 0.6.3

package/dist/hooks/themes.svelte.js

@@ -0,0 +1,125 @@
+// states
+const isBrowser = typeof window !== 'undefined';
+// presets
+const default_theme = 'light';
+const default_storage_key = '@lapikit/theme';
+function generateGlobalTheme() {
+    let active = $state(default_theme);
+    let key = default_storage_key;
+    let initialized = false;
+    function applyToHtml(name) {
+        if (!isBrowser)
+            return;
+        document.documentElement.setAttribute('data-kit-theme', name);
+        active = name;
+    }
+    function set(name) {
+        applyToHtml(name);
+        if (isBrowser) {
+            localStorage.setItem(key, name);
+        }
+    }
+    function init(params = {}) {
+        if (initialized)
+            return;
+        initialized = true;
+        key = params.key ?? default_storage_key;
+        const stored = isBrowser ? localStorage.getItem(key) : null;
+        applyToHtml(stored ?? params.name ?? default_theme);
+    }
+    return {
+        init,
+        set,
+        get active() {
+            return active;
+        }
+    };
+}
+const refGlobalTheme = generateGlobalTheme();
+export const useTheme = refGlobalTheme.set;
+export function createGlobalTheme(params) {
+    refGlobalTheme.init(params);
+    return {
+        get active() {
+            return refGlobalTheme.active;
+        }
+    };
+}
+export function createTheme() {
+    let active = $state(default_theme);
+    let node;
+    let key;
+    let overridden = $state(false);
+    function applyTheme(name) {
+        const target = node;
+        if (!target)
+            return;
+        target.setAttribute('data-kit-theme', name);
+        active = name;
+    }
+    function set(name) {
+        applyTheme(name);
+        if (isBrowser && key) {
+            localStorage.setItem(key, name);
+        }
+    }
+    // skip the effect's first automatic pass so the mount's own initial value (from
+    // `name`, storage or default) isn't immediately clobbered by the current global value
+    let firstRun = true;
+    // re-syncs to the global theme whenever it changes, unless this zone is overridden
+    $effect(() => {
+        const value = refGlobalTheme.active;
+        const isOverridden = overridden;
+        const skip = firstRun;
+        firstRun = false;
+        if (!skip && !isOverridden) {
+            applyTheme(value);
+        }
+    });
+    const action = (n, params = {}) => {
+        node = n;
+        key = params.key;
+        overridden = params.overridden ?? false;
+        const stored = isBrowser && key ? localStorage.getItem(key) : null;
+        applyTheme(stored ?? params.name ?? (overridden ? default_theme : refGlobalTheme.active));
+        return {
+            update(newParams = {}) {
+                key = newParams.key;
+                overridden = newParams.overridden ?? false;
+            },
+            destroy() {
+                node = undefined;
+            }
+        };
+    };
+    return {
+        action,
+        set,
+        get active() {
+            return active;
+        }
+    };
+}
+/** LEGACY CODE
+ * NEED UPDATE documentation with new theme system before removing this legacy code. The new theme system is designed to be more flexible and easier to use, allowing for better integration with Svelte's reactivity and component structure. It also provides a more consistent API for managing themes across different components and contexts.
+ * TODO: Remove this legacy code once the new theme system is fully implemented and tested. This code is kept for backward compatibility with existing components that rely on the old theme system.
+ */
+import { writable } from 'svelte/store';
+// presets
+const themeRef = 'light';
+export const theme = writable(themeRef);
+// export function useTheme(name: string, key: string = '@lapikit/theme') {
+// 	theme.update(() => {
+// 		if (isBrowser) {
+// 			const html = document.documentElement;
+// 			html.classList.forEach((cls) => {
+// 				if (cls.startsWith('kit-theme--')) {
+// 					html.classList.remove(cls);
+// 				}
+// 			});
+// 			html.classList.add(`kit-theme--${name}`);
+// 			localStorage.setItem(key, name);
+// 		}
+// 		return name;
+// 	});
+// }

package/dist/utils/components.d.ts

@@ -1,4 +1,4 @@
-import type { useClassNameProps, useStylesProps } from '../@types';
+import type { ElevationProps, ElevationState, useClassNameProps, useStylesProps } from '../@types';
 /**
  * useClassName - Utility to compute class names for a component.
  * @param baseClass - The base class name for the component.
@@ -17,3 +17,10 @@ export declare function useIsInteractive(props: Record<string, unknown>, tag: st
  * @returns A computed style string.
  */
 export declare function useStyles({ styleAttr, sStyle, styleProps }?: useStylesProps): string;
+/**
+ * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
+ * @param elevation - Either a single elevation value applied as `base`, or an object with
+ * independent `base`, `hover` and `active` values (each key is optional).
+ * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
+ */
+export declare function useElevation(elevation?: ElevationProps | null): ElevationState;

package/dist/utils/components.js

@@ -106,3 +106,22 @@ export function useStyles({ styleAttr, sStyle, styleProps } = {}) {
     }
     return styles.filter(Boolean).join('; ');
 }
+/**
+ * useElevation - Utility to resolve the `elevation` prop into its base/hover/active states.
+ * @param elevation - Either a single elevation value applied as `base`, or an object with
+ * independent `base`, `hover` and `active` values (each key is optional).
+ * @returns An object with `base`, `hover` and `active` keys, `undefined` when not provided.
+ */
+export function useElevation(elevation) {
+    if (elevation === undefined || elevation === null) {
+        return { base: undefined, hover: undefined, active: undefined };
+    }
+    if (typeof elevation === 'string') {
+        return { base: elevation, hover: undefined, active: undefined };
+    }
+    return {
+        base: elevation.base,
+        hover: elevation.hover,
+        active: elevation.active
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.1",
+	"version": "0.6.3",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -66,7 +66,7 @@
 			"default": "./dist/labs/index.js"
 		},
 		"./actions": {
-			"default": "./dist/actions.js"
+			"default": "./dist/hooks/actions.js"
 		}
 	},
 	"peerDependencies": {

package/dist/actions.d.ts

@@ -1,2 +0,0 @@
-export * from './utils/themes.js';
-export * from './components/accordion/accordion.svelte.js';

package/dist/actions.js

@@ -1,2 +0,0 @@
-export * from './utils/themes.js';
-export * from './components/accordion/accordion.svelte.js';

package/dist/utils/themes.d.ts

@@ -1,3 +0,0 @@
-import { type Writable } from 'svelte/store';
-export declare const theme: Writable<string>;
-export declare function useTheme(name: string, key?: string): void;

package/dist/utils/themes.js

@@ -1,21 +0,0 @@
-import { writable } from 'svelte/store';
-// states
-const isBrowser = typeof window !== 'undefined';
-// presets
-const themeRef = 'light';
-export const theme = writable(themeRef);
-export function useTheme(name, key = '@lapikit/theme') {
-    theme.update(() => {
-        if (isBrowser) {
-            const html = document.documentElement;
-            html.classList.forEach((cls) => {
-                if (cls.startsWith('kit-theme--')) {
-                    html.classList.remove(cls);
-                }
-            });
-            html.classList.add(`kit-theme--${name}`);
-            localStorage.setItem(key, name);
-        }
-        return name;
-    });
-}