lapikit 0.0.0-insiders.c8d4fe2 → 0.0.0-insiders.cfec658

package/dist/actions/index.d.ts

@@ -1 +1,2 @@
 export * from '../components/accordion/accordion.svelte.js';
+export * from '../internal/mediaQueries.js';

package/dist/actions/index.js

@@ -1 +1,2 @@
 export * from '../components/accordion/accordion.svelte.js';
+export * from '../internal/mediaQueries.js';

package/dist/components/app/app.svelte

@@ -4,11 +4,21 @@
 		colorSchemeSystem,
 		modalOpen,
 		setOpenModal,
-		updateThemeStore
+		updateThemeStore,
+		viewportWidth
 	} from '../../stores/index.js';
 	import type { Snippet } from 'svelte';
 	let { children }: { children: Snippet } = $props();
 
+	// states
+	let innerWidth = $state(0);
+
+	$effect(() => {
+		if (BROWSER) {
+			viewportWidth.set(innerWidth);
+		}
+	});
+
 	$effect.pre(() => {
 		if (!BROWSER) return;
 		// system
@@ -31,6 +41,8 @@
 	});
 </script>
 
+<svelte:window bind:innerWidth />
+
 {@render children?.()}
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

package/dist/internal/mediaQueries.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Non-reactive media queries function
+ * Use this in JavaScript code when you need a one-time check
+ * @param {...Array<["min"|"max", string]>} args - ex: [ ["min", "xs"], ["max", "lg"] ]
+ * @returns {boolean}
+ */
+export declare function mediaQueries(...args: Array<['min' | 'max', string]> | ['min' | 'max', string]): boolean;
+/**
+ * Reactive media queries that returns a store
+ * Use this in Svelte templates for automatic reactivity
+ * @param {...Array<["min"|"max", string]>} args - ex: [ ["min", "xs"], ["max", "lg"] ]
+ * @returns {import('svelte/store').Readable<boolean>}
+ */
+export declare function mediaQueriesReactive(...args: Array<['min' | 'max', string]> | ['min' | 'max', string]): import("svelte/store").Readable<boolean>;
+/**
+ * Convenient function for direct use in Svelte templates
+ * Returns a readable store that updates automatically
+ * Usage: $mediaQuery(['min', 'md']) in template
+ */
+export declare const mediaQuery: typeof mediaQueriesReactive;

package/dist/internal/mediaQueries.js

@@ -0,0 +1,88 @@
+import { get, derived } from 'svelte/store';
+import { breakpoints } from '../stores/breakpoints.js';
+import { viewportWidth } from '../stores/viewports.js';
+// Converts rem/em/px to number of pixels
+function toPx(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;
+}
+/**
+ * Non-reactive media queries function
+ * Use this in JavaScript code when you need a one-time check
+ * @param {...Array<["min"|"max", string]>} args - ex: [ ["min", "xs"], ["max", "lg"] ]
+ * @returns {boolean}
+ */
+export function mediaQueries(...args) {
+    const bp = get(breakpoints);
+    const width = get(viewportWidth) || (typeof window !== 'undefined' ? window.innerWidth : 0);
+    // Parse arguments
+    let queries = [];
+    if (Array.isArray(args[0]) && typeof args[0][0] === 'string') {
+        queries = args;
+    }
+    else if (typeof args[0] === 'string') {
+        queries = [args];
+    }
+    let result = true;
+    for (const [type, key] of queries) {
+        const value = bp[key];
+        const px = toPx(value);
+        if (type === 'min') {
+            result = result && width >= px;
+        }
+        else if (type === 'max') {
+            result = result && width <= px;
+        }
+    }
+    return result;
+}
+/**
+ * Reactive media queries that returns a store
+ * Use this in Svelte templates for automatic reactivity
+ * @param {...Array<["min"|"max", string]>} args - ex: [ ["min", "xs"], ["max", "lg"] ]
+ * @returns {import('svelte/store').Readable<boolean>}
+ */
+export function mediaQueriesReactive(...args) {
+    return derived([breakpoints, viewportWidth], ([$breakpoints, $viewportWidth]) => {
+        const width = $viewportWidth || (typeof window !== 'undefined' ? window.innerWidth : 0);
+        // Parse arguments same way as non-reactive version
+        let queries = [];
+        if (Array.isArray(args[0]) && typeof args[0][0] === 'string') {
+            queries = args;
+        }
+        else if (typeof args[0] === 'string') {
+            queries = [args];
+        }
+        let result = true;
+        for (const [type, key] of queries) {
+            const value = $breakpoints[key];
+            const px = toPx(value);
+            if (type === 'min') {
+                result = result && width >= px;
+            }
+            else if (type === 'max') {
+                result = result && width <= px;
+            }
+        }
+        return result;
+    });
+}
+/**
+ * Convenient function for direct use in Svelte templates
+ * Returns a readable store that updates automatically
+ * Usage: $mediaQuery(['min', 'md']) in template
+ */
+export const mediaQuery = mediaQueriesReactive;

package/dist/stores/index.d.ts

@@ -9,3 +9,5 @@ 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 './viewports.js';
+export { mediaQueries, mediaQueriesReactive, mediaQuery } from '../internal/mediaQueries.js';

package/dist/stores/index.js

@@ -46,3 +46,5 @@ export const popModal = (id) => {
     });
 };
 export * from './breakpoints.js';
+export * from './viewports.js';
+export { mediaQueries, mediaQueriesReactive, mediaQuery } from '../internal/mediaQueries.js';

package/dist/stores/viewports.d.ts

@@ -0,0 +1,2 @@
+import { type Writable } from 'svelte/store';
+export declare const viewportWidth: Writable<number>;

package/dist/stores/viewports.js

@@ -0,0 +1,5 @@
+// store viewport and screen dimensions
+import { writable } from 'svelte/store';
+// presets
+const refWidth = 0;
+export const viewportWidth = writable(refWidth);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.c8d4fe2",
+	"version": "0.0.0-insiders.cfec658",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"