lapikit 0.0.0-insiders.dcdfb82 → 0.0.0-insiders.dd024f5

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

@@ -0,0 +1,4 @@
+export * from './breakpoints.js';
+export * from './devices.js';
+export * from './themes.js';
+export * from './components.js';

package/dist/stores/index.js

@@ -0,0 +1,4 @@
+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/style/animation.css

@@ -0,0 +1,62 @@
+@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);
+	}
+}
+
+.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/css.js

@@ -8,9 +8,10 @@ import { colors, component, devices, variables } from './parser/index.js';
 import { terminal } from '../internal/terminal.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const __components = path.resolve('src/components');
 export const processCSS = async (config) => {
     const _normalize = fs.readFileSync(path.resolve(__dirname, './normalize.css'), 'utf-8');
+    const _animation = fs.readFileSync(path.resolve(__dirname, './animation.css'), 'utf-8');
+    const _variables = fs.readFileSync(path.resolve(__dirname, './variable.css'), 'utf-8');
     let styles = ``;
     if (config.options.normalize)
         styles += `${_normalize}\n`;
@@ -19,10 +20,12 @@ export const processCSS = async (config) => {
     const variablesStyles = variables(config);
     styles += `${colorScheme.root}\n`;
     styles += `${variablesStyles}\n`;
+    styles += `${variablesStyles}\n`;
+    styles += `${_variables}\n`;
     styles += `${colorScheme.className}\n`;
     styles += `${deviceDisplay}\n`;
-    if (fs.existsSync(__components) && fs.statSync(__components).isDirectory())
-        styles += component(config);
+    styles += component(config);
+    styles += `${_animation}\n`;
     if (config.options.minify) {
         styles = minify(styles);
         terminal('success', 'css minified');

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`;
         }
@@ -65,10 +65,21 @@ export const colors = (config) => {
     // class
     let classStyles = '';
     for (const [property] of Object.entries(schemes.light)) {
+        // classStyles += `.${property}:not([class*='--variant-']) {\n`;
+        // classStyles += `--background-color: var(--kit-${property});\n`;
+        // classStyles += `--color: var(--kit-on-${property}, var(--kit-${property}));\n`;
+        // classStyles += `}\n`;
+        // classStyles += `.${property}[class*='--variant-'] {\n`;
+        // classStyles += `--color: var(--kit-${property});\n`;
+        // classStyles += `}\n`;
         classStyles += `.${property} {\n`;
-        classStyles += `--background-color: var(--kit-${property});\n`;
-        classStyles += `--color: var(--kit-${property});\n`;
+        classStyles += `--base: var(--kit-${property});\n`;
+        classStyles += `--on: var(--kit-on-${property}, var(--kit-${property}));\n`;
         classStyles += `}\n`;
+        // classStyles += `.${property}:not([class*='kit-']) {\n`;
+        // classStyles += `background-color: var(--kit-${property});\n`;
+        // classStyles += `color: var(--kit-on-${property}, var(--kit-${property}));\n`;
+        // classStyles += `}\n`;
     }
     return {
         root: cssVariables,

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/dist/style/variable.css

@@ -0,0 +1,12 @@
+:root {
+	--kit-dialog-size-xs: 18.75rem;
+	--kit-dialog-size-sm: 25rem;
+	--kit-dialog-size-md: 37.5rem;
+	--kit-dialog-size-lg: 53.125rem;
+	--kit-dialog-size-xl: 75rem;
+	--kit-modal-size-xs: 18.75rem;
+	--kit-modal-size-sm: 25rem;
+	--kit-modal-size-md: 37.5rem;
+	--kit-modal-size-lg: 53.125rem;
+	--kit-modal-size-xl: 75rem;
+}

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/dist/utils/x11.d.ts

@@ -1,4 +1,4 @@
 export declare const x11Colors: {
     [key: string]: string;
 };
-export declare const x11ColorNames: string[];
+export declare const x11ColorNames: Array<string>;

package/package.json

@@ -1,9 +1,11 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.dcdfb82",
+	"version": "0.0.0-insiders.dd024f5",
+	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
 	},
+	"homepage": "https://lapikit.dev",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Nycolaide/lapikit.git",
@@ -25,6 +27,8 @@
 	"files": [
 		"bin",
 		"dist",
+		"README.md",
+		"LICENSE",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -32,7 +36,7 @@
 		"**/*.css"
 	],
 	"bin": {
-		"lapikit": "bin/lapikit.js"
+		"lapikit": "bin/index.js"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -42,10 +46,28 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
 		},
+		"./components": {
+			"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"
 		},
-		"./css": "./dist/styles.css"
+		"./stores": {
+			"default": "./dist/stores/index.js"
+		},
+		"./actions": {
+			"default": "./dist/actions/index.js"
+		},
+		"./css": "./dist/styles.css",
+		"./styles": "./dist/labs.css",
+		"./viteLab": {
+			"default": "./dist/internal/plugins/vite.js"
+		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
@@ -76,5 +98,8 @@
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"dependencies": {
+		"prompts": "^2.4.2"
+	}
 }