lapikit 0.1.0 → 0.1.1

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,6 @@
 {
 	"name": "lapikit",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -42,12 +42,18 @@
 	"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": {