lapikit 0.2.1 → 0.2.3

package/dist/stores/components.js

@@ -0,0 +1,26 @@
+import { disabledScroll } from '../internal/scroll.js';
+import { writable } from 'svelte/store';
+// presets
+const refModal = false;
+// states
+export const modalOpen = writable(refModal);
+export const modalStack = writable([]);
+export function setOpenModal(state) {
+    modalOpen.set(state);
+}
+export const pushModal = (id) => {
+    modalStack.update((stack) => {
+        let values = stack;
+        if (!stack.includes(id))
+            values = [...stack, id];
+        disabledScroll(values.length !== 0 ? true : false);
+        return values;
+    });
+};
+export const popModal = (id) => {
+    modalStack.update((stack) => {
+        const newStack = stack.filter((m) => m !== id);
+        disabledScroll(newStack.length !== 0 ? true : false);
+        return newStack.length === 0 ? [] : newStack;
+    });
+};

package/dist/stores/devices.d.ts

@@ -0,0 +1,6 @@
+import { type Writable } from 'svelte/store';
+type Devices = {
+    [key: string]: number;
+};
+export declare const devices: Writable<Devices>;
+export {};

package/dist/stores/devices.js

@@ -0,0 +1,9 @@
+// store devices
+import { writable } from 'svelte/store';
+// presets
+const ref = {
+    desktop: 1024, //64rem (lg)
+    tablet: 768, //48rem (md)
+    mobile: 375 //28rem (sm)
+};
+export const devices = writable(ref);

package/dist/stores/index.d.ts

@@ -1,10 +1,4 @@
-import { type Writable } from 'svelte/store';
-export declare const colorScheme: Writable<'system' | 'dark' | 'light'>;
-export declare const colorSchemeSystem: Writable<'dark' | 'light'>;
-export declare const modalOpen: Writable<boolean | 'persistent'>;
-export declare const modalStack: Writable<string[]>;
-export declare function updateThemeStore(update: 'system' | 'dark' | 'light'): void;
-export declare function setColorScheme(scheme: 'system' | 'dark' | 'light'): void;
-export declare function setOpenModal(state: boolean | 'persistent'): void;
-export declare const pushModal: (id: string) => void;
-export declare const popModal: (id: string) => void;
+export * from './breakpoints.js';
+export * from './devices.js';
+export * from './themes.js';
+export * from './components.js';

package/dist/stores/index.js

@@ -1,47 +1,4 @@
-import { disabledScroll } from '../internal/scroll.js';
-import { writable } from 'svelte/store';
-// states
-const colorScheme_default = 'system';
-const modalOpen_default = false;
-const isBrowser = typeof window !== 'undefined';
-export const colorScheme = writable(colorScheme_default);
-export const colorSchemeSystem = writable('light');
-export const modalOpen = writable(modalOpen_default);
-export const modalStack = writable([]);
-export function updateThemeStore(update) {
-    colorScheme.update(() => {
-        if (isBrowser) {
-            const ref = document.documentElement.classList;
-            if (update === 'system')
-                ref.remove('light', 'dark');
-            else {
-                ref.remove(update === 'dark' ? 'light' : 'dark');
-                ref.add(update === 'dark' ? 'dark' : 'light');
-            }
-            localStorage.setItem('@lapikit/theme', update);
-        }
-        return update;
-    });
-}
-export function setColorScheme(scheme) {
-    updateThemeStore(scheme);
-}
-export function setOpenModal(state) {
-    modalOpen.set(state);
-}
-export const pushModal = (id) => {
-    modalStack.update((stack) => {
-        let values = stack;
-        if (!stack.includes(id))
-            values = [...stack, id];
-        disabledScroll(values.length !== 0 ? true : false);
-        return values;
-    });
-};
-export const popModal = (id) => {
-    modalStack.update((stack) => {
-        const newStack = stack.filter((m) => m !== id);
-        disabledScroll(newStack.length !== 0 ? true : false);
-        return newStack.length === 0 ? [] : newStack;
-    });
-};
+export * from './breakpoints.js';
+export * from './devices.js';
+export * from './themes.js';
+export * from './components.js';

package/dist/stores/themes.d.ts

@@ -0,0 +1,8 @@
+import { type Writable } from 'svelte/store';
+type PreferColorScheme = 'system' | 'dark' | 'light';
+export declare const colorScheme: Writable<PreferColorScheme>;
+export declare const colorSchemeSystem: Writable<'dark' | 'light'>;
+export declare const theme: Writable<string>;
+export declare function useColorScheme(scheme: PreferColorScheme, key?: string): void;
+export declare function useTheme(name: string, key?: string): void;
+export {};

package/dist/stores/themes.js

@@ -0,0 +1,34 @@
+import { writable } from 'svelte/store';
+// presets
+const colorSchemeRef = 'system';
+const themeRef = 'lapikit';
+// states
+const isBrowser = typeof window !== 'undefined';
+export const colorScheme = writable(colorSchemeRef);
+export const colorSchemeSystem = writable('light');
+export const theme = writable(themeRef);
+export function useColorScheme(scheme, key = '@lapikit/color-scheme') {
+    colorScheme.update(() => {
+        if (isBrowser) {
+            const ref = document.documentElement.classList;
+            if (scheme === 'system')
+                ref.remove('light', 'dark');
+            else {
+                ref.remove(scheme === 'dark' ? 'light' : 'dark');
+                ref.add(scheme === 'dark' ? 'dark' : 'light');
+            }
+            localStorage.setItem(key, scheme);
+        }
+        return scheme;
+    });
+}
+export function useTheme(name, key = '@lapikit/theme') {
+    theme.update(() => {
+        if (isBrowser) {
+            const html = document.documentElement;
+            html.setAttribute('data-theme', name);
+            localStorage.setItem(key, name);
+        }
+        return name;
+    });
+}

package/dist/utils/convert.d.ts

@@ -0,0 +1 @@
+export declare function valueToPx(value: string | number): number;

package/dist/utils/convert.js

@@ -0,0 +1,17 @@
+export function valueToPx(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string') {
+        if (value.endsWith('rem')) {
+            return parseFloat(value) * 16;
+        }
+        if (value.endsWith('em')) {
+            return parseFloat(value) * 16;
+        }
+        if (value.endsWith('px')) {
+            return parseFloat(value);
+        }
+        return parseFloat(value);
+    }
+    return 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.2.1",
+	"version": "0.2.3",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -36,7 +36,7 @@
 		"**/*.css"
 	],
 	"bin": {
-		"lapikit": "bin/lapikit.js"
+		"lapikit": "bin/index.js"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -50,6 +50,10 @@
 			"svelte": "./dist/components/index.js",
 			"default": "./dist/components/index.js"
 		},
+		"./labs": {
+			"svelte": "./dist/labs/index.js",
+			"default": "./dist/labs/index.js"
+		},
 		"./vite": {
 			"default": "./dist/plugin/vitejs.js"
 		},
@@ -59,7 +63,8 @@
 		"./actions": {
 			"default": "./dist/actions/index.js"
 		},
-		"./css": "./dist/styles.css"
+		"./css": "./dist/styles.css",
+		"./styles": "./dist/labs.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
@@ -90,5 +95,8 @@
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"dependencies": {
+		"prompts": "^2.4.2"
+	}
 }