lapikit 0.0.0-insiders.f81b991 → 0.0.0-insiders.fb12c48

package/dist/stores/components.js

@@ -0,0 +1,26 @@
+import { disabledScroll } from '../internal/helpers/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,5 @@
-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';
+export * from './viewport.js';

package/dist/stores/index.js

@@ -1,47 +1,5 @@
-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';
+export * from './viewport.js';

package/dist/stores/themes.d.ts

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

package/dist/stores/themes.js

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+// presets
+const themeRef = 'light';
+export const theme = writable(themeRef);

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.f81b991",
+	"version": "0.0.0-insiders.fb12c48",
 	"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",
@@ -51,7 +51,7 @@
 			"default": "./dist/components/index.js"
 		},
 		"./vite": {
-			"default": "./dist/plugin/vitejs.js"
+			"default": "./dist/internal/plugins/vite.js"
 		},
 		"./stores": {
 			"default": "./dist/stores/index.js"
@@ -59,7 +59,11 @@
 		"./actions": {
 			"default": "./dist/actions/index.js"
 		},
-		"./css": "./dist/styles.css"
+		"./core/colors": {
+			"default": "./dist/internal/core/standard-colors.js"
+		},
+		"./styles": "./dist/styles.css",
+		"./themes": "./dist/themes.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
@@ -90,5 +94,8 @@
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"dependencies": {
+		"prompts": "^2.4.2"
+	}
 }

package/bin/lapikit.js

@@ -1,55 +0,0 @@
-#!/usr/bin/env node
-import { promises as fs } from 'fs';
-import path from 'path';
-import { ansi, terminal, envTypescript } from './helper.js';
-import { preset } from './modules/preset.js';
-import { adapterCSSConfig, adapterViteConfig } from './modules/adapter.js';
-
-const [, , command] = process.argv;
-const typescriptEnabled = envTypescript();
-
-if (process.argv.includes('--help') || process.argv.includes('-h')) {
-	terminal(
-		'info',
-		`usage: ${ansi.color.yellow('npx lapikit init {cssPath}')}\n\n ${ansi.variant.bold('options:')}\n
-        - {cssPath}: (${ansi.color.cyan('src/app.css')}) customize path on your origin css file.\n\n`
-	);
-	process.exit(0);
-} else if (command === 'init') {
-	console.log('  _                 _ _    _ _   ');
-	console.log(' | |               (_) |  (_) |  ');
-	console.log(' | |     __ _ _ __  _| | ___| |_ ');
-	console.log(" | |    / _` | '_ \\| | |/ / | __|");
-	console.log(' | |___| (_| | |_) | |   <| | |_ ');
-	console.log(' |______\\__,_| .__/|_|_|\\_\\_|\\__|');
-	console.log('             | |                 ');
-	console.log('             |_|                 \n');
-
-	terminal('none', `${ansi.bold.blue('LAPIKIT')} - Component Library for Svelte\n\n`);
-
-	const configPath = path.resolve(process.cwd(), 'lapikit.config.js');
-	try {
-		await fs.writeFile(configPath, preset.trim() + '\n', 'utf8');
-		terminal('success', `has create lapikit.config.js on your project.`);
-	} catch (error) {
-		terminal('error', `failed to create configuration file:\n\n ${error}`);
-		terminal(
-			'warn',
-			`you can create lapikit.config.js manually, please visite https://lapikit.dev/docs/getting-started for more information`
-		);
-	}
-
-	await adapterViteConfig(typescriptEnabled);
-	await adapterCSSConfig();
-
-	terminal(
-		'info',
-		`${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://lapikit.dev')}\n\n`
-	);
-
-	console.log('Website: https://lapikit.dev');
-	console.log('Github: https://github.com/nycolaide/lapikit');
-	console.log('Support the developement: https://buymeacoffee.com/nycolaide');
-} else {
-	terminal('error', `Command not recognized. Try 'npx lapikit -h'`);
-}

package/bin/modules/adapter.js

@@ -1,52 +0,0 @@
-import { promises as fs } from 'fs';
-import path from 'path';
-import { getCssPathFromArgs, terminal } from '../helper.js';
-
-const importLapikitVite = `import { lapikit } from 'lapikit/vite';`;
-const importLapikitCss = `@import 'lapikit/css';`;
-
-export async function adapterViteConfig(typescript) {
-	const viteConfigPath = path.resolve(process.cwd(), `vite.config.${typescript ? 'ts' : 'js'}`);
-	try {
-		let viteConfig = await fs.readFile(viteConfigPath, 'utf8');
-
-		if (!viteConfig.includes(`${importLapikitVite}`))
-			viteConfig = `${importLapikitVite}\n` + viteConfig;
-
-		const pluginsRegex = /plugins:\s*\[([^\]]*)\]/;
-		const match = viteConfig.match(pluginsRegex);
-
-		if (match && !match[1].includes('lapikit()')) {
-			const updatedPlugins = match[1].trim() ? `${match[1].trim()}, lapikit()` : `lapikit()`;
-
-			viteConfig = viteConfig.replace(pluginsRegex, `plugins: [${updatedPlugins}]`);
-		}
-
-		await fs.writeFile(viteConfigPath, viteConfig, 'utf8');
-
-		terminal('success', 'lapikit() has added on vite.config.(js|ts) successfully');
-	} catch (error) {
-		terminal(
-			'error',
-			`lapikit() encountered a problem while editing vite.config.(js|ts):\n ${error}.\n\n`
-		);
-	}
-}
-
-export async function adapterCSSConfig() {
-	const cssPath = getCssPathFromArgs();
-	const resolvedPath = path.resolve(process.cwd(), cssPath);
-	try {
-		await fs.access(resolvedPath);
-		let appCssContent = await fs.readFile(resolvedPath, 'utf8');
-		appCssContent = `${importLapikitCss}\n\n` + appCssContent;
-		await fs.writeFile(resolvedPath, appCssContent, 'utf8');
-
-		terminal('success', `lapikit/css has added on ${cssPath}.`);
-	} catch (error) {
-		terminal(
-			'error',
-			`lapikit/css encountered a problem while editing ${cssPath}:\n  ${error.message}.\n\n`
-		);
-	}
-}

package/bin/modules/preset.js

@@ -1,11 +0,0 @@
-export const preset = `
-/** @type {import('lapikit').Config} */
-export default {
-	theme: {
-		colorScheme: 'light',
-		colors: {
-			svelte: '#ff3e00'
-		}
-	}
-};
-`;

package/dist/internal/colors.d.ts

@@ -1 +0,0 @@
-export declare const parseColor: (input: string) => string;

package/dist/internal/index.d.ts

@@ -1,4 +0,0 @@
-export * from './terminal.js';
-export * from './ansi.js';
-export * from './assets.svelte.js';
-export * from './scroll.js';

package/dist/internal/index.js

@@ -1,4 +0,0 @@
-export * from './terminal.js';
-export * from './ansi.js';
-export * from './assets.svelte.js';
-export * from './scroll.js';

package/dist/internal/types.d.ts

@@ -1,57 +0,0 @@
-import type { Snippet } from 'svelte';
-type IdElementType = string | undefined;
-type ClassNameType = string | string[] | undefined;
-type StylePropertiesType = string | undefined;
-export interface Base {
-    id?: IdElementType;
-    class?: ClassNameType;
-    style?: StylePropertiesType;
-    [key: string]: any;
-}
-export interface Component extends Base {
-    children?: Snippet;
-}
-export type FontFamily = {
-    [key: string]: string | string[];
-};
-export type Colors = {
-    [key: string]: {
-        light: string;
-        dark: string;
-    } | string;
-};
-export type Thresholds = {
-    [key: string]: number | string;
-};
-export type Radius = {
-    [key: string]: number | string;
-};
-export interface Lapikit {
-    options: {
-        normalize: boolean;
-        minify: boolean;
-    };
-    theme: {
-        colorScheme: string;
-        colors: Colors;
-    };
-    breakpoints: {
-        mobileBreakpoint: string;
-        tabletBreakpoint: string;
-        laptopBreakpoint: string;
-        thresholds: Thresholds;
-    };
-    styles: {
-        spacing: string;
-        corner: {
-            active: boolean;
-            radius: Radius;
-        };
-        font: FontFamily;
-    };
-}
-type DeepOptional<T> = {
-    [P in keyof T]?: T[P] extends (infer U)[] ? DeepOptional<U>[] : T[P] extends object ? DeepOptional<T[P]> : T[P];
-};
-export type LapikitConfig = DeepOptional<Lapikit>;
-export {};

package/dist/internal/unit.d.ts

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

package/dist/internal/unit.js

@@ -1,11 +0,0 @@
-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/plugin/modules/config.d.ts

@@ -1,2 +0,0 @@
-import type { LapikitConfig } from '../../internal/types.js';
-export declare const parseConfig: (props?: LapikitConfig) => import("../../internal/types.js").Lapikit;

package/dist/plugin/modules/config.js

@@ -1,54 +0,0 @@
-import { config } from '../../preset.js';
-export const parseConfig = (props) => {
-    if (!props)
-        return config;
-    const newConfig = { ...config };
-    if (props?.options) {
-        if (props.options.normalize !== undefined)
-            newConfig.options.normalize = props.options.normalize;
-        if (props.options.minify !== undefined)
-            newConfig.options.minify = props.options.minify;
-    }
-    if (props?.theme) {
-        if (props.theme.colorScheme !== undefined)
-            newConfig.theme.colorScheme = props.theme.colorScheme;
-        if (props.theme.colors) {
-            newConfig.theme.colors = {
-                ...newConfig.theme.colors,
-                ...props.theme.colors
-            };
-        }
-    }
-    if (props?.breakpoints) {
-        if (props.breakpoints.mobileBreakpoint !== undefined)
-            newConfig.breakpoints.mobileBreakpoint = props.breakpoints.mobileBreakpoint;
-        if (props.breakpoints.tabletBreakpoint !== undefined)
-            newConfig.breakpoints.tabletBreakpoint = props.breakpoints.tabletBreakpoint;
-        if (props.breakpoints.laptopBreakpoint !== undefined)
-            newConfig.breakpoints.laptopBreakpoint = props.breakpoints.laptopBreakpoint;
-        if (props.breakpoints.thresholds)
-            newConfig.breakpoints.thresholds = {
-                ...newConfig.breakpoints.thresholds,
-                ...props.breakpoints.thresholds
-            };
-    }
-    if (props?.styles) {
-        if (props.styles.spacing !== undefined)
-            newConfig.styles.spacing = props.styles.spacing;
-        if (props.styles.corner !== undefined) {
-            if (props.styles.corner.active !== undefined)
-                newConfig.styles.corner.active = props.styles.corner.active;
-            if (props.styles.corner.radius)
-                newConfig.styles.corner.radius = {
-                    ...newConfig.styles.corner.radius,
-                    ...props.styles.corner.radius
-                };
-        }
-        if (props.styles.font)
-            newConfig.styles.font = {
-                ...newConfig.styles.font,
-                ...props.styles.font
-            };
-    }
-    return newConfig;
-};

package/dist/plugin/modules/importer.d.ts

@@ -1 +0,0 @@
-export declare const importer: () => Promise<any>;

package/dist/plugin/modules/importer.js

@@ -1,15 +0,0 @@
-import path from 'path';
-import fs from 'fs';
-import { terminal, ansi } from '../../internal/index.js';
-const app = process.cwd();
-const pathConfig = path.resolve(app, 'lapikit.config.js');
-export const importer = async () => {
-    if (!fs.existsSync(pathConfig)) {
-        terminal('error', `config file not found\n ${ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.')}\n\n${ansi.color.blue('for initializing a new lapikit config, run:')}\n        ${ansi.variant.bold('npx lapikit init')}    ${ansi.bold.yellow('(preview)')}\n\n`);
-        process.exit(1);
-    }
-    const timestamp = Date.now();
-    const fileUrl = `file://${pathConfig}?t=${timestamp}`;
-    const content = await import(fileUrl);
-    return content.default;
-};

package/dist/plugin/vitejs.d.ts

@@ -1,6 +0,0 @@
-import type { ViteDevServer } from 'vite';
-export declare function lapikit(): Promise<{
-    name: string;
-    configResolved(): Promise<void>;
-    configureServer(server: ViteDevServer): Promise<void>;
-}>;

package/dist/plugin/vitejs.js

@@ -1,26 +0,0 @@
-import { importer } from './modules/importer.js';
-import { processCSS } from '../style/css.js';
-import { parseConfig } from './modules/config.js';
-import { terminal } from '../internal/terminal.js';
-export async function lapikit() {
-    return {
-        name: 'lapikit/vite.js',
-        async configResolved() {
-            const config = await importer();
-            const result = await parseConfig(config);
-            await processCSS(result);
-            terminal('info', 'lapikit is up!');
-        },
-        async configureServer(server) {
-            server.watcher.add('./lapikit.config.js');
-            server.watcher.on('change', async (filePath) => {
-                if (String(filePath).includes('lapikit.config.js')) {
-                    const config = await importer();
-                    const result = await parseConfig(config);
-                    await processCSS(result);
-                    terminal('info', 'lapikit config reloaded');
-                }
-            });
-        }
-    };
-}

package/dist/preset.d.ts

@@ -1,2 +0,0 @@
-import type { Lapikit } from './internal/types.js';
-export declare const config: Lapikit;