lapikit 0.0.4 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Nycolaide <https://github.com/Nycolaide>.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/bin/helper.js

@@ -0,0 +1,74 @@
+const color = {
+	red: (text) => `\x1b[31m${text}\x1b[0m`,
+	green: (text) => `\x1b[32m${text}\x1b[0m`,
+	yellow: (text) => `\x1b[33m${text}\x1b[0m`,
+	blue: (text) => `\x1b[34m${text}\x1b[0m`,
+	purple: (text) => `\x1b[35m${text}\x1b[0m`,
+	cyan: (text) => `\x1b[36m${text}\x1b[0m`
+};
+
+const variant = {
+	bold: (text) => `\x1b[1m${text}\x1b[0m`,
+	underline: (text) => `\x1b[4m${text}\x1b[0m`,
+	inverse: (text) => `\x1b[7m${text}\x1b[0m`
+};
+
+const bold = {
+	red: (text) => `\x1b[1m\x1b[31m${text}\x1b[0m`,
+	green: (text) => `\x1b[1m\x1b[32m${text}\x1b[0m`,
+	yellow: (text) => `\x1b[1m\x1b[33m${text}\x1b[0m`,
+	blue: (text) => `\x1b[1m\x1b[34m${text}\x1b[0m`,
+	purple: (text) => `\x1b[1m\x1b[35m${text}\x1b[0m`,
+	cyan: (text) => `\x1b[1m\x1b[36m${text}\x1b[0m`
+};
+
+const inverse = {
+	red: (text) => `\x1b[7m\x1b[31m${text}\x1b[0m`,
+	green: (text) => `\x1b[7m\x1b[32m${text}\x1b[0m`,
+	yellow: (text) => `\x1b[7m\x1b[33m${text}\x1b[0m`,
+	blue: (text) => `\x1b[7m\x1b[34m${text}\x1b[0m`,
+	purple: (text) => `\x1b[7m\x1b[35m${text}\x1b[0m`,
+	cyan: (text) => `\x1b[7m\x1b[36m${text}\x1b[0m`
+};
+
+const underline = {
+	red: (text) => `\x1b[4m\x1b[31m${text}\x1b[0m`,
+	green: (text) => `\x1b[4m\x1b[32m${text}\x1b[0m`,
+	yellow: (text) => `\x1b[4m\x1b[33m${text}\x1b[0m`,
+	blue: (text) => `\x1b[4m\x1b[34m${text}\x1b[0m`,
+	purple: (text) => `\x1b[4m\x1b[35m${text}\x1b[0m`,
+	cyan: (text) => `\x1b[4m\x1b[36m${text}\x1b[0m`
+};
+
+export const ansi = {
+	color,
+	variant,
+	bold,
+	inverse,
+	underline
+};
+
+export const terminal = (type = 'info', msg) => {
+	const name = ansi.color.cyan('lapikit');
+
+	if (type === 'error') console.error(name, ansi.bold.red('[error]'), msg);
+	else if (type === 'warn') console.warn(name, ansi.bold.yellow('[warn]'), msg);
+	else if (type === 'success') console.warn(name, ansi.bold.green('[success]'), msg);
+	else if (type === 'none') console.log(msg);
+	else console.log(name, ansi.bold.blue('[info]'), msg);
+};
+
+export function getCssPathFromArgs() {
+	const args = process.argv.slice(2);
+	return args[1] || 'src/app.css';
+}
+
+export async function envTypescript() {
+	const directory = process.cwd();
+	try {
+		await fs.readFile(path.resolve(directory, 'tsconfig.json'), 'utf-8');
+		return true;
+	} catch {
+		return false;
+	}
+}

package/bin/lapikit.js

@@ -0,0 +1,54 @@
+#!/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://localhost:3000/docs for more information`
+		);
+	}
+
+	await adapterViteConfig(typescriptEnabled);
+	await adapterCSSConfig();
+
+	terminal(
+		'info',
+		`${ansi.bold.blue('Thank to use lapikit, discover all posibility with lapikit on https://localhost:3000/docs')}\n\n`
+	);
+
+	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

@@ -0,0 +1,52 @@
+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

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

package/dist/components/app/app.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { updateThemeStore } from '../../stores/index.js';
+	import type { Snippet } from 'svelte';
+	let { children }: { children: Snippet } = $props();
+
+	$effect.pre(() => {
+		if (!BROWSER) return;
+		const local = localStorage.getItem('@lapikit/theme');
+		if (local !== null) updateThemeStore(local as 'dark' | 'light' | 'auto');
+	});
+</script>
+
+{@render children?.()}

package/dist/components/app/app.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const App: import("svelte").Component<$$ComponentProps, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

package/dist/components/app/types.d.ts

@@ -0,0 +1,4 @@
+import type { Snippet } from 'svelte';
+export interface AppProps {
+    children?: Snippet;
+}

package/dist/components/app/types.js

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

package/dist/components/button/button.css

@@ -0,0 +1,240 @@
+.kit-btn {
+	--btn-color: var(--on, var(--kit-on-neutral));
+	--btn-background: var(--base, var(--kit-neutral));
+	--btn-radius: var(--shape, var(--kit-radius-md));
+
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	padding-top: var(--btn-spacing-x);
+	padding-bottom: var(--btn-spacing-x);
+	padding-right: var(--btn-spacing-y);
+	padding-left: var(--btn-spacing-y);
+	cursor: pointer;
+
+	border-width: 1px;
+	border-style: solid;
+	border-radius: var(--btn-radius);
+
+	/* theme */
+	color: var(--btn-color);
+	background-color: var(--btn-background);
+	border-color: var(--btn-background);
+}
+
+.kit-btn:active:hover,
+.kit-btn:active:focus {
+	animation: button-click 0s ease-out;
+	transform: scale(0.97);
+}
+
+/* size */
+.kit-btn[breakpoint]kit-btn--size-xs {
+	--btn-height: 1.75rem;
+	--btn-multiplier-y: 2;
+	font-size: 0.75rem;
+	gap: 0.25rem;
+}
+
+.kit-btn[breakpoint]kit-btn--size-sm {
+	--btn-height: 2rem;
+	--btn-multiplier-y: 3;
+	font-size: 0.875rem;
+	gap: 0.5rem;
+}
+
+.kit-btn[breakpoint]kit-btn--size-md {
+	--btn-height: 2.25rem;
+	--btn-multiplier-y: 4;
+	font-size: 0.875rem;
+	gap: 0.5rem;
+}
+
+.kit-btn[breakpoint]kit-btn--size-lg {
+	--btn-height: 2.5rem;
+	--btn-multiplier-y: 5;
+	font-size: 1rem;
+	gap: 0.5rem;
+}
+
+.kit-btn[breakpoint]kit-btn--size-xl {
+	--btn-height: 2.75rem;
+	--btn-multiplier-y: 6;
+	font-size: 1.125rem;
+	gap: 0.675rem;
+}
+
+/* density */
+.kit-btn[breakpoint]kit-btn--density-default {
+	height: calc(var(--btn-height));
+	min-width: calc(var(--btn-height));
+	--btn-spacing-x: 0;
+	--btn-spacing-y: calc(var(--kit-spacing) * var(--btn-multiplier-y));
+}
+
+.kit-btn[breakpoint]kit-btn--density-compact {
+	height: calc(var(--btn-height) - 0.25rem);
+	min-width: calc(var(--btn-height - 0.25rem));
+	--btn-spacing-x: 0;
+	--btn-spacing-y: calc(var(--kit-spacing) * var(--btn-multiplier-y) - 0.25rem);
+}
+
+.kit-btn[breakpoint]kit-btn--density-comfortable {
+	height: calc(var(--btn-height) + 0.25rem);
+	min-width: calc(var(--btn-height) + 0.25rem);
+	--btn-spacing-x: 0;
+	--btn-spacing-y: calc(var(--kit-spacing) * var(--btn-multiplier-y) + 0.25rem);
+}
+
+/* variant */
+.kit-btn[breakpoint]kit-btn--variant-outline {
+	--btn-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border: 1px solid currentColor;
+}
+
+.kit-btn[breakpoint]kit-btn--variant-text {
+	--btn-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border-color: transparent;
+}
+
+.kit-btn[breakpoint]kit-btn--variant-dash {
+	--btn-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border: 1px dashed currentColor;
+}
+
+.kit-btn[breakpoint]kit-btn--variant-link {
+	--btn-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border-color: transparent;
+}
+
+/* state */
+.kit-btn.kit-btn--info:not([class*='btn--variant-']) {
+	--on: var(--kit-on-info);
+	--base: var(--kit-info);
+}
+.kit-btn.kit-btn--info[class*='btn--variant-'] {
+	--base: var(--kit-info);
+}
+
+.kit-btn.kit-btn--success:not([class*='btn--variant-']) {
+	--on: var(--kit-on-success);
+	--base: var(--kit-success);
+}
+.kit-btn.kit-btn--success[class*='btn--variant-'] {
+	--base: var(--kit-success);
+}
+
+.kit-btn.kit-btn--warning:not([class*='btn--variant-']) {
+	--on: var(--kit-on-warning);
+	--base: var(--kit-warning);
+}
+.kit-btn.kit-btn--warning[class*='btn--variant-'] {
+	--base: var(--kit-warning);
+}
+
+.kit-btn.kit-btn--error:not([class*='btn--variant-']) {
+	--on: var(--kit-on-error);
+	--base: var(--kit-error);
+}
+.kit-btn.kit-btn--error[class*='btn--variant-'] {
+	--base: var(--kit-error);
+}
+
+/* types */
+.kit-btn:where(.kit-btn:is(input[type='checkbox'])),
+.kit-btn:where(.kit-btn:is(input[type='radio'])) {
+	width: auto;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	vertical-align: inherit;
+}
+.kit-btn:is(input[type='checkbox']):after,
+.kit-btn:is(input[type='radio']):after {
+	--btn-content: attr(aria-label);
+	content: var(--btn-content);
+}
+
+.kit-btn:is(input[type='checkbox']):focus,
+.kit-btn:is(input[type='radio']):focus {
+	outline: none;
+	outline-offset: inherit;
+	box-shadow: none;
+}
+
+.kit-btn:is(input[type='checkbox']):checked,
+.kit-btn:is(input[type='radio']):checked {
+	background-image: initial;
+}
+
+/* events */
+.kit-btn.kit-btn--active:not([class*='btn--variant-']),
+.kit-btn:not([class*='btn--variant-']):is(input[type='radio']):checked,
+.kit-btn:not([class*='btn--variant-']):is(input[type='checkbox']):checked {
+	background-color: color-mix(in oklab, var(--btn-background) 90%, var(--kit-scrim));
+	border-color: color-mix(in oklab, var(--btn-background) 90%, var(--kit-scrim));
+}
+.kit-btn.kit-btn--active[class*='btn--variant-'],
+.kit-btn[class*='btn--variant-']:is(input[type='radio']):checked,
+.kit-btn[class*='btn--variant-']:is(input[type='checkbox']):checked {
+	background-color: color-mix(in oklab, currentColor 15%, transparent);
+	border-color: color-mix(in oklab, currentColor 15%, transparent);
+}
+
+.kit-btn:hover:not([class*='btn--variant-']),
+.kit-btn:not([class*='btn--variant-']):is(input[type='radio']):hover,
+.kit-btn:not([class*='btn--variant-']):is(input[type='checkbox']):hover {
+	background-color: color-mix(in oklab, var(--btn-background) 85%, var(--kit-scrim));
+	border-color: color-mix(in oklab, var(--btn-background) 85%, var(--kit-scrim));
+}
+.kit-btn:hover[class*='btn--variant-'],
+.kit-btn[class*='btn--variant-']:is(input[type='radio']):hover,
+.kit-btn[class*='btn--variant-']:is(input[type='checkbox']):hover {
+	background-color: color-mix(in oklab, currentColor 25%, transparent);
+}
+
+/* icon */
+.kit-btn i:before {
+	color: var(--btn-color);
+}
+
+/* disabled */
+.kit-btn.kit-btn--disabled,
+.kit-btn[disabled],
+input.kit-btn.kit-btn--disabled,
+input.kit-btn[disabled] {
+	pointer-events: none;
+	user-select: none;
+	cursor: default;
+}
+.kit-btn:not([class*='btn--variant-']).kit-btn--disabled {
+	color: color-mix(in oklab, var(--btn-color) 40%, transparent) !important;
+	background-color: color-mix(in oklab, var(--btn-background) 70%, transparent) !important;
+	border-color: color-mix(in oklab, var(--btn-background) 70%, transparent) !important;
+}
+.kit-btn:not([class*='btn--variant-']).kit-btn--disabled i:before {
+	color: color-mix(in oklab, var(--btn-color) 40%, transparent) !important;
+}
+.kit-btn[class*='btn--variant-'].kit-btn--disabled,
+.kit-btn[class*='btn--variant-'].kit-btn--disabled i:before {
+	color: color-mix(in oklab, var(--btn-background) 40%, transparent) !important;
+}
+
+/* loading */
+.kit-btn.kit-btn--loading {
+	pointer-events: none;
+	user-select: none;
+	cursor: default;
+}
+.kit-btn.kit-btn--loading > .kit-btn-content {
+	color: transparent;
+}
+.kit-btn.kit-btn--loading > .kit-btn-loading {
+	position: absolute;
+	min-width: fit-content;
+}

package/dist/components/button/button.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/index.js';
+	import type { BtnProps } from './types.js';
+
+	let {
+		children,
+		ref = $bindable(),
+		is = 'button',
+		href,
+		dark,
+		light,
+		active,
+		variant,
+		error,
+		info,
+		success,
+		warning,
+		density = 'default',
+		disabled,
+		size = 'md',
+		type = 'button',
+		background,
+		color,
+		label,
+		loading,
+		rounded,
+		...rest
+	}: BtnProps = $props();
+
+	const assets = getAssets();
+
+	$effect(() => {
+		if (type === 'radio') is = 'input';
+		if (type === 'checkbox') is = 'input';
+		if (type === 'submit') is = 'input';
+		if (type === 'reset') is = 'input';
+	});
+</script>
+
+<svelte:element
+	this={href ? 'a' : is}
+	bind:this={ref}
+	{...rest}
+	href={href && !disabled ? href : undefined}
+	class={[
+		'kit-btn',
+		light && 'light',
+		dark && 'dark',
+		size && assets.className('btn', 'size', size),
+		variant && assets.className('btn', 'variant', variant),
+		density && assets.className('btn', 'density', density),
+		error && 'kit-btn--error',
+		info && 'kit-btn--info',
+		success && 'kit-btn--success',
+		warning && 'kit-btn--warning',
+		disabled && 'kit-btn--disabled',
+		active && 'kit-btn--active',
+		loading && 'kit-btn--loading',
+		rest.class
+	]}
+	tabindex={href && disabled ? -1 : 0}
+	aria-disabled={href ? disabled : undefined}
+	aria-label={type !== 'button' ? label : undefined}
+	disabled={href ? undefined : disabled}
+	type={href ? undefined : type}
+	style:--base={assets.color(background)}
+	style:--on={assets.color(color)}
+	style:--shape={assets.shape(rounded)}
+>
+	{#if loading}
+		<div class="kit-btn-loading">
+			<div>loading ...</div>
+		</div>
+	{/if}
+
+	{#if !label}
+		<span class="kit-btn-content">
+			{@render children?.()}
+		</span>
+	{/if}
+</svelte:element>

package/dist/components/button/button.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BtnProps } from './types.js';
+declare const Button: import("svelte").Component<BtnProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/button/types.d.ts

@@ -0,0 +1,24 @@
+import type { Component } from '../../internal/types.js';
+export interface BtnProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'button' | 'a' | 'input';
+    dark?: boolean;
+    light?: boolean;
+    href?: string;
+    variant?: 'outline' | 'text' | 'dash' | 'link';
+    density?: 'compact' | 'comfortable' | 'default';
+    active?: boolean;
+    loading?: boolean;
+    error?: boolean;
+    info?: boolean;
+    warning?: boolean;
+    success?: boolean;
+    disabled?: boolean;
+    color?: string;
+    background?: string;
+    size?: string | {
+        [key: string]: string;
+    };
+    type?: 'button' | 'submit' | 'reset' | 'radio' | 'checkbox';
+    label?: string;
+}

package/dist/components/button/types.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as App } from './app/app.svelte';
+export { default as Btn } from './button/button.svelte';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+// components
+export { default as App } from './app/app.svelte';
+export { default as Btn } from './button/button.svelte';

package/dist/internal/assets.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare function getAssets(): {
+    shape(params?: string): string | undefined;
+    className(key: string, type: string, value: string | boolean | Array<string> | {
+        [key: string]: string;
+    }): string | undefined;
+    color(color?: string): string | undefined;
+};

package/dist/internal/assets.svelte.js

@@ -0,0 +1,41 @@
+import { x11ColorNames } from '../utils/x11.js';
+export function getAssets() {
+    return {
+        shape(params) {
+            if (params) {
+                if (params === 'none' || params == '0')
+                    return '0';
+                return `var(--kit-radius-${params})`;
+            }
+        },
+        className(key, type, value) {
+            if (typeof value === 'string')
+                return `kit-${key}--${type}-${value}`;
+            else if (typeof value === 'boolean' && value)
+                return `kit-${key}--${type}`;
+            else if (typeof value === 'object') {
+                if (Array.isArray(value)) {
+                    return value
+                        .map((media) => `${media === '_default' ? '' : `${media}:`}kit--${type}`)
+                        .join(' ');
+                }
+                else {
+                    return Object.entries(value)
+                        .map(([media, value]) => `${media === '_default' ? '' : `${media}:`}kit-${key}--${type}-${value}`)
+                        .join(' ');
+                }
+            }
+        },
+        color(color) {
+            if (color) {
+                if (color.includes('#') ||
+                    color.includes('rgb') ||
+                    color.includes('rgba') ||
+                    color.includes('oklch') ||
+                    x11ColorNames.includes(color.toLowerCase()))
+                    return color;
+                return `var(--kit-${color})`;
+            }
+        }
+    };
+}

package/dist/internal/index.d.ts

@@ -1,2 +1,3 @@
 export * from './terminal.js';
 export * from './ansi.js';
+export * from './assets.svelte.js';

package/dist/internal/index.js

@@ -1,2 +1,3 @@
 export * from './terminal.js';
 export * from './ansi.js';
+export * from './assets.svelte.js';

package/dist/internal/types.d.ts

@@ -1,3 +1,16 @@
+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[];
 };

package/dist/preset.js

@@ -7,17 +7,29 @@ export const config = {
         colorScheme: 'dark', // 'light' | 'dark' | 'auto'
         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)' },
             secondary: { light: 'oklch(65% 0.241 354.308)', dark: 'oklch(65% 0.241 354.308)' },
+            'on-secondary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             tertiary: { light: 'oklch(77% 0.152 181.912)', dark: 'oklch(77% 0.152 181.912)' },
+            'on-tertiary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             neutral: { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
+            'on-neutral': { light: 'oklch(100% 0 0)', dark: 'oklch(100% 0 0)' },
             info: { light: 'oklch(74% 0.16 232.661)', dark: 'oklch(74% 0.16 232.661)' },
+            'on-info': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             success: { light: 'oklch(76% 0.177 163.223)', dark: 'oklch(76% 0.177 163.223)' },
+            'on-success': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             warning: { light: 'oklch(82% 0.189 84.429)', dark: 'oklch(82% 0.189 84.429)' },
+            'on-warning': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             error: { light: 'oklch(71% 0.194 13.428)', dark: 'oklch(71% 0.194 13.428)' },
+            'on-error': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             base: { light: 'oklch(100% 0 0)', dark: 'oklch(25.33% 0.016 252.42)' },
+            'on-base': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
             surface: { light: 'oklch(98% 0 0)', dark: 'oklch(23.26% 0.014 253.1)' },
+            'on-surface': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
             container: { light: 'oklch(95% 0 0)', dark: 'oklch(21.15% 0.012 254.09)' },
-            shadow: 'black'
+            'on-container': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
+            shadow: 'black',
+            scrim: 'oklch(0.00% 0.000 0)'
         }
     },
     breakpoints: {
@@ -25,7 +37,7 @@ export const config = {
         tabletBreakpoint: 'md',
         laptopBreakpoint: 'xl',
         thresholds: {
-            none: 0, // 0px
+            _default: 0, // 0px
             xs: '28rem', //448px
             sm: '40rem', //640px
             md: '48rem', //768px

package/dist/stores/index.d.ts

@@ -0,0 +1,4 @@
+import { type Writable } from 'svelte/store';
+export declare const colorScheme: Writable<'auto' | 'dark' | 'light'>;
+export declare function updateThemeStore(update: 'auto' | 'dark' | 'light'): void;
+export declare function setColorScheme(scheme: 'auto' | 'dark' | 'light'): void;

package/dist/stores/index.js

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store';
+// states
+const _default = 'light';
+const isBrowser = typeof window !== 'undefined';
+export const colorScheme = writable(_default);
+export function updateThemeStore(update) {
+    colorScheme.update(() => {
+        if (isBrowser) {
+            const ref = document.documentElement.classList;
+            if (update === 'auto')
+                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);
+}

package/dist/style/animation.css

@@ -0,0 +1,11 @@
+@keyframes button-click {
+	0% {
+		transform: scale(0.98);
+	}
+	40% {
+		transform: scale(1.02);
+	}
+	100% {
+		transform: scale(1);
+	}
+}

package/dist/style/css.js

@@ -8,9 +8,9 @@ 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');
     let styles = ``;
     if (config.options.normalize)
         styles += `${_normalize}\n`;
@@ -21,8 +21,8 @@ export const processCSS = async (config) => {
     styles += `${variablesStyles}\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/parser/color.js

@@ -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/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,6 +1,7 @@
 {
 	"name": "lapikit",
-	"version": "0.0.4",
+	"version": "0.1.1",
+	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -23,24 +24,36 @@
 		"test": "npm run test:unit -- --run"
 	},
 	"files": [
+		"bin",
 		"dist",
+		"README.md",
+		"LICENSE",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
 	"sideEffects": [
 		"**/*.css"
 	],
+	"bin": {
+		"lapikit": "bin/lapikit.js"
+	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"types": "./dist/index.d.ts"
+		},
+		"./components": {
+			"svelte": "./dist/components/index.js",
+			"default": "./dist/components/index.js"
 		},
 		"./vite": {
 			"default": "./dist/plugin/vitejs.js"
 		},
+		"./stores": {
+			"default": "./dist/stores/index.js"
+		},
 		"./css": "./dist/styles.css"
 	},
 	"peerDependencies": {