lapikit 0.0.0-insiders.cee8a41 → 0.0.0-insiders.cfec658

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/internal/ripple.d.ts

@@ -0,0 +1,12 @@
+interface RippleOptions {
+    component?: string;
+    center?: boolean;
+    color?: string;
+    duration?: number;
+    disabled?: boolean;
+}
+export declare function ripple(el: HTMLElement, options?: RippleOptions): {
+    destroy(): void;
+    update(newOptions: RippleOptions): void;
+};
+export {};

package/dist/internal/ripple.js

@@ -0,0 +1,93 @@
+const triggerEvents = ['pointerdown', 'touchstart', 'keydown'];
+const cancelEvents = ['mouseleave', 'dragleave', 'touchmove', 'touchcancel', 'pointerup', 'keyup'];
+export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement('div');
+    addClasses();
+    setOptions(options);
+    function addClasses(center) {
+        const shouldBeCentered = center || options.center;
+        if (!rippleContainer.classList.contains('kit-ripple--effect')) {
+            rippleContainer.classList.add('kit-ripple--effect');
+        }
+        if (!shouldBeCentered && rippleContainer.classList.contains('kit-ripple--center')) {
+            rippleContainer.classList.remove('kit-ripple--center');
+        }
+        if (shouldBeCentered) {
+            rippleContainer.classList.add('kit-ripple--center');
+        }
+    }
+    function setOptions(options) {
+        if (options.disabled || el.hasAttribute('aria-disabled')) {
+            rippleContainer.remove();
+        }
+        else {
+            el.appendChild(rippleContainer);
+        }
+        if (options.duration && options.duration < 0) {
+            options.duration = undefined;
+        }
+        if (options.component) {
+            rippleContainer.style.setProperty('--ripple-radius', `var(--${options.component}-radius)`);
+        }
+        if (options.color) {
+            rippleContainer.style.setProperty('--ripple-color', options.color);
+        }
+        if (options.duration) {
+            rippleContainer.style.setProperty('--ripple-duration', `${options.duration}ms`);
+        }
+    }
+    function createRipple(e, center) {
+        if (options.disabled || el.hasAttribute('aria-disabled')) {
+            return;
+        }
+        if (e instanceof KeyboardEvent) {
+            if (!['Enter', 'Space'].includes(e.code) || e.repeat) {
+                return;
+            }
+            e.preventDefault();
+            const click = new PointerEvent('pointerdown');
+            createRipple(click, true);
+            return;
+        }
+        addClasses(center);
+        const rect = el.getBoundingClientRect();
+        const clientX = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientX
+            : e.clientX;
+        const clientY = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientY
+            : e.clientY;
+        const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
+        const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
+        const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
+        const ripple = document.createElement('div');
+        ripple.classList.add('kit-ripple');
+        ripple.style.left = `${clientX - rect.left - radius}px`;
+        ripple.style.top = `${clientY - rect.top - radius}px`;
+        ripple.style.width = ripple.style.height = `${radius * 2}px`;
+        rippleContainer.appendChild(ripple);
+        function removeRipple() {
+            if (ripple === null) {
+                return;
+            }
+            ripple.style.opacity = '0';
+            setTimeout(() => {
+                ripple.remove();
+            }, options.duration || 1000);
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+        }
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
+    }
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === 'touchstart' }));
+    return {
+        destroy() {
+            triggerEvents.forEach((event) => {
+                el.removeEventListener(event, createRipple);
+            });
+        },
+        update(newOptions) {
+            options = newOptions;
+            setOptions(newOptions);
+        }
+    };
+}

package/dist/internal/unit.d.ts

@@ -0,0 +1 @@
+export declare const setUnit: (value: string | number) => string;

package/dist/internal/unit.js

@@ -0,0 +1,11 @@
+export const setUnit = (value) => {
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (typeof value === 'string') {
+        const cleaned = value.trim();
+        const isOnlyNumericLike = /^[\d.,]+$/.test(cleaned);
+        if (isOnlyNumericLike)
+            return `${value}px`;
+    }
+    return value;
+};

package/dist/preset.js

@@ -4,7 +4,7 @@ export const config = {
         minify: false // true | false
     },
     theme: {
-        colorScheme: 'dark', // 'light' | 'dark' | 'auto'
+        colorScheme: 'system', // 'light' | 'dark' | 'system'
         colors: {
             primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
             'on-primary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
@@ -35,7 +35,7 @@ export const config = {
     breakpoints: {
         mobileBreakpoint: 'sm',
         tabletBreakpoint: 'md',
-        laptopBreakpoint: 'xl',
+        laptopBreakpoint: 'lg',
         thresholds: {
             _default: 0, // 0px
             xs: '28rem', //448px

package/dist/stores/breakpoints.d.ts

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

package/dist/stores/breakpoints.js

@@ -0,0 +1,23 @@
+// store breakpoints and thresholds
+import { writable } from 'svelte/store';
+// presets
+const ref = {
+    base: 0, // 0px
+    xs: '28rem', //448px
+    sm: '40rem', //640px
+    md: '48rem', //768px
+    lg: '64rem', //1024px
+    xl: '80rem', //1280px
+    '2xl': '96rem', //1536px
+    '3xl': '112rem' //1792px
+};
+export const breakpoints = writable(ref);
+// export function setBreakpoints(newBreakpoints: Breakpoints) {
+// 	breakpoints.set(newBreakpoints);
+// }
+// export function updateBreakpoint(key: string, value: number) {
+// 	breakpoints.update((bp) => ({
+// 		...bp,
+// 		[key]: value
+// 	}));
+// }

package/dist/stores/index.d.ts

@@ -1,9 +1,13 @@
 import { type Writable } from 'svelte/store';
-export declare const colorScheme: Writable<'auto' | 'dark' | 'light'>;
+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: 'auto' | 'dark' | 'light'): void;
-export declare function setColorScheme(scheme: 'auto' | 'dark' | 'light'): void;
+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 './viewports.js';
+export { mediaQueries, mediaQueriesReactive, mediaQuery } from '../internal/mediaQueries.js';

package/dist/stores/index.js

@@ -1,16 +1,18 @@
+import { disabledScroll } from '../internal/scroll.js';
 import { writable } from 'svelte/store';
 // states
-const colorScheme_default = 'light';
+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 === 'auto')
+            if (update === 'system')
                 ref.remove('light', 'dark');
             else {
                 ref.remove(update === 'dark' ? 'light' : 'dark');
@@ -29,14 +31,20 @@ export function setOpenModal(state) {
 }
 export const pushModal = (id) => {
     modalStack.update((stack) => {
+        let values = stack;
         if (!stack.includes(id))
-            return [...stack, id];
-        return stack;
+            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 './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/dist/style/animation.css

@@ -18,3 +18,45 @@
 		transform: rotate(380deg);
 	}
 }
+
+.kit-ripple {
+	background-color: currentColor;
+	opacity: 0.1;
+	position: absolute;
+	border-radius: 50%;
+	pointer-events: none;
+	-webkit-transition: 0.6s;
+	transition: 0.6s;
+	-webkit-animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+	animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: var(--ripple-radius);
+}
+
+.kit-ripple--center {
+	top: 50% !important;
+	left: 50% !important;
+	translate: -50% -50% !important;
+}
+
+.kit-ripple--effect {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: none;
+	pointer-events: none;
+	z-index: 999;
+	border-radius: var(--ripple-radius);
+}
+
+@keyframes lapikit-ripple {
+	from {
+		scale: 0;
+	}
+
+	to {
+		scale: 1;
+	}
+}

package/dist/style/normalize.css

@@ -4,6 +4,8 @@ html {
 	line-height: 1.5;
 	box-sizing: border-box;
 	font-family: var(--kit-font-family-sans);
+	background-color: var(--kit-base);
+	color: var(--kit-on-base);
 }
 
 pre,

package/dist/style/parser/color.js

@@ -38,7 +38,7 @@ export const colors = (config) => {
             }
             cssVariables += `}\n`;
             cssVariables += `.${inversed} {\n`;
-            cssVariables += `color-scheme: ${used};\n`;
+            cssVariables += `color-scheme: ${inversed};\n`;
             for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
                 cssVariables += `--kit-${colorName}: ${colorValue};\n`;
             }
@@ -56,7 +56,7 @@ export const colors = (config) => {
         }
         cssVariables += `}\n`;
         cssVariables += `.${inversed} {\n`;
-        cssVariables += `color-scheme: ${used};\n`;
+        cssVariables += `color-scheme: ${inversed};\n`;
         for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
             cssVariables += `--kit-${colorName}: ${colorValue};\n`;
         }

package/dist/style/parser/device.js

@@ -1,3 +1,4 @@
+import { setUnit } from '../../internal/unit.js';
 export const devices = (config) => {
     let css = ``;
     const list = {
@@ -5,24 +6,35 @@ export const devices = (config) => {
         tablet: config.breakpoints.tabletBreakpoint,
         laptop: config.breakpoints.laptopBreakpoint
     };
-    for (const [key, value] of Object.entries(list)) {
-        const breakpointValue = config.breakpoints.thresholds[value];
-        const breakpointValueMax = key !== 'laptop'
-            ? config.breakpoints.thresholds[key === 'mobile' ? list.tablet : key == 'tablet' ? list.laptop : '']
-            : undefined;
-        css += `.device-${key}, .only-on-${key} {\n`;
-        css += `display: none;\n`;
-        css += `}\n`;
-        css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) {\n`;
-        css += `.device-${key} {\n`;
-        css += `display: inherit !important;\n`;
-        css += `}\n`;
-        css += `}\n`;
-        css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) ${breakpointValueMax ? `and (max-width: ${typeof breakpointValueMax === 'number' ? breakpointValueMax + 'px' : breakpointValueMax})` : ''}{\n`;
-        css += `.only-on-${key} {\n`;
-        css += `display: inherit !important;\n`;
-        css += `}\n`;
-        css += `}\n`;
-    }
+    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
+    css += `.hidden-mobile {\n`;
+    css += `display: none !important;\n`;
+    css += `}\n`;
+    css += `}\n`;
+    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
+    css += `.display-mobile {\n`;
+    css += `display: none !important;\n`;
+    css += `}\n`;
+    css += `}\n`;
+    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) and (max-width: ${setUnit(config.breakpoints.thresholds[list.laptop])})  {\n`;
+    css += `.hidden-tablet {\n`;
+    css += `display: none !important;\n`;
+    css += `}\n`;
+    css += `}\n`;
+    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) and (min-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}){\n`;
+    css += `.display-tablet {\n`;
+    css += `display: none !important;\n`;
+    css += `}\n`;
+    css += `}\n`;
+    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.laptop])})  {\n`;
+    css += `.hidden-laptop {\n`;
+    css += `display: none !important;\n`;
+    css += `}\n`;
+    css += `}\n`;
+    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}) {\n`;
+    css += `.display-laptop {\n`;
+    css += `display: none !important;\n`;
+    css += `}\n`;
+    css += `}\n`;
     return css;
 };

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.cee8a41",
+	"version": "0.0.0-insiders.cfec658",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
 	},
+	"homepage": "https://lapikit.dev",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Nycolaide/lapikit.git",
@@ -35,7 +36,7 @@
 		"**/*.css"
 	],
 	"bin": {
-		"lapikit": "bin/lapikit.js"
+		"lapikit": "bin/index.js"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -55,6 +56,9 @@
 		"./stores": {
 			"default": "./dist/stores/index.js"
 		},
+		"./actions": {
+			"default": "./dist/actions/index.js"
+		},
 		"./css": "./dist/styles.css"
 	},
 	"peerDependencies": {
@@ -86,5 +90,8 @@
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"dependencies": {
+		"prompts": "^2.4.2"
+	}
 }