lapikit 0.0.0-insiders.f206df2 → 0.0.0-insiders.f248eb2

package/dist/internal/types/configuration.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './configuration.js';
+export * from './components.js';

package/dist/internal/types/index.js

@@ -0,0 +1,2 @@
+export * from './configuration.js';
+export * from './components.js';

package/dist/labs/components/btn/btn.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { useClassName, useStyles } from './btn.svelte.js';
+	import { splitSyntheticProps } from '../../utils/index.js';
+
+	let {
+		class: className,
+		style: styleAttr,
+		children,
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	} = $props();
+
+	let { classDirectiveProps, styleDirectiveProps, regularProps } = $derived(
+		splitSyntheticProps(rest as Record<string, unknown>)
+	);
+
+	let finalClass = $derived(
+		useClassName({
+			baseClass: 'kit-button',
+			className,
+			sClass,
+			classDirectiveProps
+		}).value
+	);
+
+	let finalStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleDirectiveProps
+		}).value
+	);
+</script>
+
+<button class={finalClass} style={finalStyle} {...regularProps}>
+	{@render children()}
+</button>
+
+<style>
+	.kit-btn {
+		border: 1px solid rgb(0, 0, 0);
+	}
+</style>

package/dist/labs/components/btn/btn.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Btn: import("svelte").Component<{
+    class: any;
+    style: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type Btn = ReturnType<typeof Btn>;
+export default Btn;

package/dist/labs/components/btn/btn.svelte.js

@@ -0,0 +1,71 @@
+export function useClassName({ baseClass = '', className, sClass, classDirectiveProps } = {}) {
+    return {
+        get value() {
+            const classes = [];
+            if (baseClass) {
+                classes.push(baseClass);
+            }
+            if (typeof sClass === 'string' && sClass) {
+                classes.push(sClass);
+            }
+            if (Array.isArray(sClass)) {
+                for (const value of sClass) {
+                    if (typeof value === 'string' && value) {
+                        classes.push(value);
+                    }
+                }
+            }
+            if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
+                Object.entries(sClass).forEach(([key, value]) => {
+                    if (value === true) {
+                        classes.push(key);
+                    }
+                    else if (typeof value === 'string' && value) {
+                        classes.push(value);
+                    }
+                });
+            }
+            if (classDirectiveProps) {
+                Object.entries(classDirectiveProps).forEach(([key, value]) => {
+                    const base = key.replace('s-class_', '');
+                    if (value === true) {
+                        classes.push(base);
+                    }
+                    else if (typeof value === 'string' && value) {
+                        classes.push(`${base}${value}`);
+                    }
+                });
+            }
+            if (className) {
+                classes.push(className);
+            }
+            return classes.filter(Boolean).join(' ');
+        }
+    };
+}
+export function useStyles({ styleAttr, sStyle, styleDirectiveProps } = {}) {
+    return {
+        get value() {
+            const styles = [];
+            if (sStyle && typeof sStyle === 'object') {
+                Object.entries(sStyle).forEach(([key, value]) => {
+                    if (value) {
+                        styles.push(`${key}: ${value}`);
+                    }
+                });
+            }
+            if (styleDirectiveProps) {
+                Object.entries(styleDirectiveProps).forEach(([key, value]) => {
+                    const base = key.replace('s-style_', '');
+                    if (value) {
+                        styles.push(`${base}: ${value}`);
+                    }
+                });
+            }
+            if (styleAttr) {
+                styles.push(styleAttr);
+            }
+            return styles.filter(Boolean).join('; ');
+        }
+    };
+}

package/dist/labs/components/index.d.ts

@@ -0,0 +1 @@
+export { default as KitBtn } from './btn/btn.svelte';

package/dist/labs/components/index.js

@@ -0,0 +1,2 @@
+// components
+export { default as KitBtn } from './btn/btn.svelte';

package/dist/labs/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './props.js';

package/dist/labs/utils/index.js

@@ -0,0 +1 @@
+export * from './props.js';

package/dist/labs/utils/props.d.ts

@@ -0,0 +1,15 @@
+export type SClassProp = string | string[] | Record<string, boolean | string> | undefined;
+export type SStyleProp = Record<string, boolean | string> | undefined;
+export declare function splitSyntheticProps(allProps: Record<string, unknown>): {
+    classDirectiveProps: {
+        [k: string]: unknown;
+    };
+    styleDirectiveProps: {
+        [k: string]: unknown;
+    };
+    regularProps: {
+        [k: string]: unknown;
+    };
+};
+export declare function computeSClasses(sClass: SClassProp, classDirectiveProps: Record<string, unknown>): string;
+export declare function computeSStyles(sStyle: SStyleProp, styleDirectiveProps: Record<string, unknown>): string;

package/dist/labs/utils/props.js

@@ -0,0 +1,60 @@
+export function splitSyntheticProps(allProps) {
+    const classDirectiveProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => key.startsWith('s-class_')));
+    const styleDirectiveProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => key.startsWith('s-style_')));
+    const regularProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => !key.startsWith('s-class') && !key.startsWith('s-style')));
+    return { classDirectiveProps, styleDirectiveProps, regularProps };
+}
+export function computeSClasses(sClass, classDirectiveProps) {
+    const classes = [];
+    // s-class string
+    if (typeof sClass === 'string' && sClass) {
+        classes.push(sClass);
+    }
+    // s-class array
+    if (Array.isArray(sClass)) {
+        for (const value of sClass) {
+            if (typeof value === 'string' && value) {
+                classes.push(value);
+            }
+        }
+    }
+    // s-class object
+    if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
+        Object.entries(sClass).forEach(([key, value]) => {
+            if (value === true) {
+                classes.push(key);
+            }
+            else if (typeof value === 'string' && value) {
+                classes.push(value);
+            }
+        });
+    }
+    // s-class_xxx
+    Object.entries(classDirectiveProps).forEach(([key, value]) => {
+        const base = key.replace('s-class_', '');
+        if (value === true) {
+            classes.push(base);
+        }
+        else if (typeof value === 'string' && value) {
+            classes.push(`${base}${value}`);
+        }
+    });
+    return classes.join(' ');
+}
+export function computeSStyles(sStyle, styleDirectiveProps) {
+    const styles = [];
+    if (sStyle && typeof sStyle === 'object') {
+        Object.entries(sStyle).forEach(([key, value]) => {
+            if (value) {
+                styles.push(`${key}: ${value}`);
+            }
+        });
+    }
+    Object.entries(styleDirectiveProps).forEach(([key, value]) => {
+        const base = key.replace('s-style_', '');
+        if (value) {
+            styles.push(`${base}: ${value}`);
+        }
+    });
+    return styles.join('; ');
+}

package/dist/stores/components.js

@@ -1,4 +1,4 @@
-import { disabledScroll } from '../internal/scroll.js';
+import { disabledScroll } from '../internal/helpers/scroll.js';
 import { writable } from 'svelte/store';
 // presets
 const refModal = false;

package/dist/stores/index.d.ts

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/index.js

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/themes.d.ts

@@ -1,8 +1,2 @@
 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

@@ -1,34 +1,4 @@
 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');
+const themeRef = '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/stores/viewport.d.ts

@@ -0,0 +1,7 @@
+export type Viewport = {
+    innerWidth: number;
+    outerWidth: number;
+    innerHeight: number;
+    outerHeight: number;
+};
+export declare const viewport: import("svelte/store").Writable<Viewport>;

package/dist/stores/viewport.js

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+export const viewport = writable({
+    innerWidth: 0,
+    outerWidth: 0,
+    innerHeight: 0,
+    outerHeight: 0
+});

package/dist/styles/animation.css

@@ -0,0 +1,33 @@
+.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: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
+		cubic-bezier(0.4, 0, 0.2, 1);
+	animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
+		cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: var(--system-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(--system-ripple-radius);
+}

package/dist/styles/keyframes.css

@@ -0,0 +1,30 @@
+@keyframes button-click {
+	0% {
+		transform: scale(0.98);
+	}
+	40% {
+		transform: scale(1.02);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes icon-rotate {
+	0% {
+		transform: rotate(10deg);
+	}
+	100% {
+		transform: rotate(380deg);
+	}
+}
+
+@keyframes animation-l-ripple {
+	from {
+		scale: 0;
+	}
+
+	to {
+		scale: 1;
+	}
+}

package/dist/{style/normalize.css → styles/reset.css}

@@ -3,18 +3,19 @@ html {
 	tab-size: 4;
 	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);
+	font-family: var(--kit-font-sans);
+	background-color: var(--kit-background-primary);
+	color: var(--kit-label-primary);
 }
 
 pre,
 code {
-	font-family: var(--kit-font-family-mono);
+	font-family: var(--kit-font-mono);
 }
 
 body {
 	margin: 0;
+	-webkit-font-smoothing: antialiased;
 }
 
 main {
@@ -46,7 +47,8 @@ button,
 	outline: none;
 }
 
-*,
+/* bug with tailwind */
+/* *,
 ::after,
 ::before,
 ::backdrop {
@@ -54,7 +56,7 @@ button,
 	margin: 0;
 	padding: 0;
 	border: 0 solid;
-}
+} */
 
 *,
 ::before,
@@ -79,7 +81,7 @@ ol,
 ul,
 menu {
 	list-style: initial;
-	margin-left: calc(var(--kit-spacing) * 5);
+	margin-left: calc(var(--system-spacing) * 5);
 }
 
 ol ul,
@@ -123,3 +125,9 @@ textarea {
 	background-color: transparent;
 	border-style: none;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		interpolate-size: allow-keywords;
+	}
+}

package/dist/styles.css.d.ts

@@ -0,0 +1,4 @@
+declare module 'lapikit/styles' {
+	const styles: string;
+	export default styles;
+}

package/dist/themes.css.d.ts

@@ -0,0 +1,4 @@
+declare module 'lapikit/themes' {
+	const themes: string;
+	export default themes;
+}