lapikit 0.5.0 → 0.5.2

package/bin/{helper.js → helpers.js}

@@ -1,3 +1,5 @@
+import readline from 'node:readline/promises';
+
 const color = {
 	red: (text) => `\x1b[31m${text}\x1b[0m`,
 	green: (text) => `\x1b[32m${text}\x1b[0m`,
@@ -57,3 +59,42 @@ export const terminal = (type = 'info', msg) => {
 	else if (type === 'none') console.log(msg);
 	else console.log(name, ansi.bold.blue('[info]'), msg);
 };
+
+export function createRL() {
+	return readline.createInterface({ input: process.stdin, output: process.stdout });
+}
+
+export async function toggle(rl, message, initial = true) {
+	const hint = initial ? 'Y/n' : 'y/N';
+	const answer = (await rl.question(`${message} (${hint}): `)).trim().toLowerCase();
+	if (answer === '') return initial;
+	return answer === 'y';
+}
+
+export async function text(rl, message, initial = '', validate) {
+	while (true) {
+		const hint = initial ? ` (${initial})` : '';
+		const answer = (await rl.question(`${message}${hint}: `)).trim();
+		const value = answer === '' ? initial : answer;
+		if (validate) {
+			const result = validate(value);
+			if (result !== true) {
+				terminal('warn', result);
+				continue;
+			}
+		}
+		return value;
+	}
+}
+
+export async function select(rl, message, choices) {
+	console.log(`\n${message}`);
+	choices.forEach((c, i) => console.log(`  ${i + 1}. ${c.title}`));
+
+	while (true) {
+		const answer = (await rl.question(`Choice (1): `)).trim();
+		const index = answer === '' ? 0 : parseInt(answer, 10) - 1;
+		if (index >= 0 && index < choices.length) return choices[index].value;
+		terminal('warn', `Please enter a number between 1 and ${choices.length}`);
+	}
+}

package/bin/hooks.js

@@ -0,0 +1,68 @@
+#!/usr/bin/env node
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import { terminal } from './helpers.js';
+
+export async function findSvelteConfigFile(projectPath) {
+	for (const ext of ['js', 'ts']) {
+		const file = path.join(projectPath, `svelte.config.${ext}`);
+		try {
+			await fs.access(file);
+			return file;
+		} catch {
+			// lapikit other step
+		}
+	}
+	throw new Error('No svelte.config.js or svelte.config.ts file found');
+}
+
+export async function addLiliPreprocess(svelteConfigFile) {
+	let content = await fs.readFile(svelteConfigFile, 'utf-8');
+	const lapikitImport = `import { lapikitPreprocess } from 'lapikit/labs/preprocess';`;
+
+	if (content.includes(`from 'lapikit/labs/preprocess'`)) {
+		terminal('info', `lapikitPreprocess already imported in ${svelteConfigFile}`);
+		return;
+	}
+
+	const lines = content.split('\n');
+	let importInsertIndex = 0;
+	for (let i = 0; i < lines.length; i++) {
+		if (lines[i].trim().startsWith('import ')) importInsertIndex = i + 1;
+	}
+	lines.splice(importInsertIndex, 0, lapikitImport);
+	content = lines.join('\n');
+
+	if (!content.match(/preprocess\s*:/)) {
+		content = content.replace(
+			/(const\s+\w+\s*=\s*\{|export\s+default\s*\{)/,
+			(m) => `${m}\n\tpreprocess: [lapikitPreprocess()],`
+		);
+	} else if (content.match(/preprocess\s*:\s*\[/)) {
+		content = content.replace(/preprocess\s*:\s*\[([\s\S]*?)\]/, (_, inner) => {
+			const trimmed = inner.trim();
+			if (!trimmed) return `preprocess: [lapikitPreprocess()]`;
+
+			if (inner.includes('\n')) {
+				const firstItemMatch = inner.match(/\n(\s*)\S/);
+				const indent = firstItemMatch ? firstItemMatch[1] : '\t\t';
+				const closingMatch = inner.match(/\n(\s*)$/);
+				const closingIndent = closingMatch ? closingMatch[1] : '\t';
+				const innerTrimmed = inner.trimEnd();
+				const sep = innerTrimmed.endsWith(',') ? '' : ',';
+				return `preprocess: [${innerTrimmed}${sep}\n${indent}lapikitPreprocess()\n${closingIndent}]`;
+			} else {
+				const sep = trimmed.endsWith(',') ? ' ' : ', ';
+				return `preprocess: [${trimmed}${sep}lapikitPreprocess()]`;
+			}
+		});
+	} else {
+		content = content.replace(
+			/preprocess\s*:\s*([^,\n\]{}]+)/,
+			(_, val) => `preprocess: [${val.trim()}, lapikitPreprocess()]`
+		);
+	}
+
+	await fs.writeFile(svelteConfigFile, content);
+	terminal('success', `lapikitPreprocess added to ${svelteConfigFile}`);
+}

package/bin/index.js

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
-import { initConfiguration } from './configuration.js';
-import { ansi, terminal } from './helper.js';
-import { initPrompts } from './prompts.js';
+import { ansi, terminal, createRL, toggle } from './helpers.js';
+import { addLiliPreprocess, findSvelteConfigFile } from './hooks.js';
 
 async function run() {
+	const rl = createRL();
+
 	console.log('  _                 _ _    _ _   ');
 	console.log(' | |               (_) |  (_) |  ');
 	console.log(' | |     __ _ _ __  _| | ___| |_ ');
@@ -15,14 +16,37 @@ async function run() {
 
 	terminal('none', `${ansi.bold.blue('Lapikit')} - Component Library for Svelte\n\n`);
 
-	const promptsConfig = await initPrompts();
+	console.log(
+		'This installer will guide you through the process of installing Lapikit on your Svelte project.\n'
+	);
+
+	console.log('List actions that will be done:');
+	console.log(
+		ansi.color.green('✓') +
+			' Add lili preprocess (named: lapikitPreprocess) on your svelte.config.js file\n'
+	);
+	console.log(ansi.underline.purple('Setup will take less than 5 seconds\n'));
+
+	const confirm = await toggle(rl, 'Launch install Lapikit on your project?');
+	if (!confirm) {
+		terminal('warn', `installation canceled.`);
+		process.exit(0);
+	}
+
+	console.log('\n');
 
-	await initConfiguration(promptsConfig);
+	try {
+		const svelteConfigFile = await findSvelteConfigFile(process.cwd());
+		await addLiliPreprocess(svelteConfigFile);
+	} catch (error) {
+		terminal('warn', `Warning: Could not update svelte.config file: ${error.message}`);
+	}
 }
 
 run()
 	.then(() => {
-		terminal('none', `\n\n\n\nWebsite: https://lapikit.dev`);
+		terminal('none', `\n\nThank's for installing Lapikit!\n`);
+		terminal('none', `Website: https://lapikit.dev`);
 		terminal('none', `Github: https://github.com/lapikit/lapikit`);
 		terminal('none', `Support the developement: https://buymeacoffee.com/nycolaide`);
 		process.exit(0);

package/dist/components/accordion/accordion.svelte

@@ -12,8 +12,6 @@
 		's-class': sClass,
 		's-style': sStyle,
 		text = undefined,
-		dark = false,
-		light = false,
 		color = undefined,
 		background = undefined,
 		rounded = undefined,
@@ -46,8 +44,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			color ? `--kit-accordion-color:${color}` : '',
-			background ? `--kit-accordion-background:${background}` : ''
+			color ? `--kit-accordion-fg:${color}` : '',
+			background ? `--kit-accordion-bg:${background}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -61,8 +59,6 @@
 	style={mergedStyle}
 	{...restProps}
 	data-text={text ? true : undefined}
-	data-dark={dark}
-	data-light={light}
 	data-spacer={spacer}
 	data-hide-icon={hideIcon}
 	data-rounded={rounded}
@@ -74,8 +70,8 @@
 	.kit-accordion {
 		--kit-accordion-radius: 8px;
 		--kit-accordion-gap: 0;
-		--kit-accordion-color: var(--kit-fg);
-		--kit-accordion-background: transparent;
+		--kit-accordion-fg: var(--kit-fg);
+		--kit-accordion-bg: transparent;
 
 		display: flex;
 		flex-wrap: wrap;
@@ -86,8 +82,8 @@
 		position: relative;
 		z-index: 1;
 		gap: var(--kit-accordion-gap);
-		color: var(--kit-accordion-color);
-		background: var(--kit-accordion-background);
+		color: var(--kit-accordion-fg);
+		background: var(--kit-accordion-bg);
 	}
 
 	.kit-accordion[data-spacer='true'] {
@@ -118,15 +114,6 @@
 		--kit-accordion-radius: 99999px;
 	}
 
-	.kit-accordion[data-dark='true'] {
-		--kit-accordion-background: var(--kit-surface-3);
-		--kit-accordion-color: var(--kit-fg);
-	}
-
-	.kit-accordion[data-light='true'] {
-		--kit-accordion-background: var(--kit-surface-1);
-	}
-
 	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
 		display: none;
 	}

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

@@ -4,8 +4,6 @@ export interface AccordionProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div';
     text?: string;
-    dark?: boolean;
-    light?: boolean;
     color?: string;
     background?: string;
     rounded?: RoundedType;
@@ -20,8 +18,6 @@ export interface AccordionItemProps extends Component {
     is?: 'div';
     index: number | string;
     text?: string;
-    dark?: boolean;
-    light?: boolean;
     rounded?: RoundedType;
     color?: string;
     background?: string;

package/dist/components/accordion/modules/accordion-item.svelte

@@ -14,8 +14,6 @@
 		activator = undefined,
 		indicator = undefined,
 		text = undefined,
-		dark = false,
-		light = false,
 		rounded = undefined,
 		color = undefined,
 		background = undefined,
@@ -51,8 +49,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			color ? `--kit-accordion-item-color:${color}` : '',
-			background ? `--kit-accordion-item-background:${background}` : ''
+			color ? `--kit-accordion-item-fg:${color}` : '',
+			background ? `--kit-accordion-item-bg:${background}` : ''
 		]
 			.filter(Boolean)
 			.join('; ')
@@ -79,8 +77,6 @@
 	{...restProps}
 	data-open={safeOpen}
 	data-disabled={disabled}
-	data-dark={dark}
-	data-light={light}
 	data-rounded={rounded}
 >
 	<button
@@ -132,13 +128,9 @@
 
 	.kit-accordion-item {
 		--kit-accordion-item-radius: var(--kit-accordion-radius, 8px);
-		--kit-accordion-item-color: var(--kit-accordion-color, var(--kit-fg));
-		--kit-accordion-item-background: var(--kit-surface-2);
-		--kit-accordion-item-border: color-mix(
-			in oklab,
-			var(--kit-accordion-item-background),
-			var(--kit-fg) 12%
-		);
+		--kit-accordion-item-fg: var(--kit-accordion-fg, var(--kit-fg));
+		--kit-accordion-item-bg: var(--kit-surface-2);
+		--kit-accordion-item-bd: color-mix(in oklab, var(--kit-accordion-item-bg), var(--kit-fg) 12%);
 		--kit-accordion-item-trigger-y: 1rem;
 		--kit-accordion-item-trigger-x: 1.25rem;
 
@@ -146,9 +138,9 @@
 		max-width: 100%;
 		position: relative;
 		border-radius: var(--kit-accordion-item-radius);
-		background: var(--kit-accordion-item-background);
-		color: var(--kit-accordion-item-color);
-		border: 1px solid var(--kit-accordion-item-border);
+		background: var(--kit-accordion-item-bg);
+		color: var(--kit-accordion-item-fg);
+		border: 1px solid var(--kit-accordion-item-bd);
 		transition:
 			border-color 150ms ease,
 			background 150ms ease,
@@ -184,14 +176,6 @@
 		box-shadow: 0 10px 28px color-mix(in oklab, var(--kit-fg), transparent 90%);
 	}
 
-	.kit-accordion-item[data-dark='true'] {
-		--kit-accordion-item-background: var(--kit-surface-3);
-	}
-
-	.kit-accordion-item[data-light='true'] {
-		--kit-accordion-item-background: var(--kit-surface-1);
-	}
-
 	.kit-accordion-item__trigger {
 		width: 100%;
 		display: flex;

package/dist/components/alert/alert.svelte

@@ -147,15 +147,14 @@
 
 <style>
 	.kit-alert {
-		--kit-alert-bg: hsl(220 20% 96%);
-		--kit-alert-fg: hsl(222 20% 16%);
-		--kit-alert-bd: hsl(220 16% 85%);
+		--kit-alert-bg: var(--kit-surface-2);
+		--kit-alert-fg: var(--kit-fg);
+		--kit-alert-bd: var(--kit-border);
 		--kit-alert-radius: 8px;
 		--kit-alert-py: 0.75rem;
 		--kit-alert-px: 0.875rem;
 		--kit-alert-gap: 0.625rem;
 		--outline-color: var(--kit-alert-bd);
-		--btn-radius: var(--kit-alert-radius);
 
 		position: relative;
 		display: grid;
@@ -169,12 +168,6 @@
 		border: 1px solid var(--kit-alert-bd);
 	}
 
-	.kit-alert[data-variant='filled'] {
-		background: var(--kit-alert-bg);
-		color: var(--kit-alert-fg);
-		border-color: var(--kit-alert-bd);
-	}
-
 	.kit-alert[data-variant='outline'] {
 		background: transparent;
 		color: var(--kit-alert-fg);

package/dist/components/app/app.svelte

@@ -43,61 +43,14 @@
 			'Segoe UI Symbol', 'Noto Color Emoji';
 	}
 
-	:root {
-		--kit-neutral-bg: color-mix(in oklab, var(--kit-neutral), var(--kit-bg) 85%);
-		--kit-neutral-bd: color-mix(in oklab, var(--kit-neutral), var(--kit-border) 70%);
-		--kit-neutral-fg: var(--kit-fg);
-
-		--kit-success-bg: color-mix(in oklab, var(--kit-success), var(--kit-bg) 85%);
-		--kit-success-bd: color-mix(in oklab, var(--kit-success), var(--kit-border) 70%);
-		--kit-success-fg: var(--kit-fg);
-
-		--kit-warning-bg: color-mix(in oklab, var(--kit-warning), var(--kit-bg) 85%);
-		--kit-warning-bd: color-mix(in oklab, var(--kit-warning), var(--kit-border) 70%);
-		--kit-warning-fg: var(--kit-fg);
-
-		--kit-danger-bg: color-mix(in oklab, var(--kit-danger), var(--kit-bg) 85%);
-		--kit-danger-bd: color-mix(in oklab, var(--kit-danger), var(--kit-border) 70%);
-		--kit-danger-fg: var(--kit-fg);
-
-		--kit-info-bg: color-mix(in oklab, var(--kit-info), var(--kit-bg) 85%);
-		--kit-info-bd: color-mix(in oklab, var(--kit-info), var(--kit-border) 70%);
-		--kit-info-fg: var(--kit-fg);
-	}
-
-	:root {
-		--kit-outline-w: 1px;
-		--btn-radius: 8px;
-
-		--kit-btn-gap: 8px;
-
-		--bg: #111827;
-		--fg: #ffffff;
-		--bg-hover: #0b1220;
-		--border: rgba(255, 255, 255, 0.08);
-		--focus: blue;
-		--font:
-			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol', 'Noto Color Emoji';
-	}
-
 	:global(.outline) {
-		--container-shape-start-start: var(--btn-radius);
-		--container-shape-start-end: var(--btn-radius);
-		--container-shape-end-start: var(--btn-radius);
-		--container-shape-end-end: var(--btn-radius);
-
-		border-width: var(--kit-outline-w);
-		inset: 0;
-		border-style: solid;
 		position: absolute;
+		inset: 0;
+		border: 1px solid var(--outline-color);
+		border-radius: inherit;
 		box-sizing: border-box;
-		border-color: var(--outline-color);
 		z-index: 1;
-		border-start-start-radius: var(--container-shape-start-start);
-		border-start-end-radius: var(--container-shape-start-end);
-		border-end-start-radius: var(--container-shape-end-start);
-		border-end-end-radius: var(--container-shape-end-end);
+		pointer-events: none;
 	}
 
 	:global(.kit-ripple) {

package/dist/components/appbar/appbar.svelte

@@ -12,10 +12,8 @@
 		's-class': sClass,
 		's-style': sStyle,
 		classContent,
-		light = false,
-		dark = false,
-		variant = 'outline',
-		rounded,
+		variant = 'filled',
+		rounded = 0,
 		background,
 		color,
 		density = 'default',
@@ -25,7 +23,7 @@
 	let safeVariant = $derived(
 		typeof variant === 'string' && (variant === 'outline' || variant === 'text')
 			? variant
-			: 'outline'
+			: 'filled'
 	);
 
 	let safeDensity = $derived(
@@ -70,8 +68,8 @@
 	let mergedStyle = $derived(
 		[
 			componentStyle,
-			background ? `--kit-appbar-background:${background}` : '',
-			color ? `--kit-appbar-color:${color}` : '',
+			background ? `--kit-appbar-bg:${background}` : '',
+			color ? `--kit-appbar-fg:${color}` : '',
 			typeof rounded === 'string' && rounded.includes('px') ? `--kit-appbar-radius:${rounded}` : ''
 		]
 			.filter(Boolean)
@@ -87,8 +85,6 @@
 	{...restProps}
 	data-variant={safeVariant}
 	data-density={safeDensity}
-	data-light={light || undefined}
-	data-dark={dark || undefined}
 	data-rounded={rounded}
 >
 	{#if safeVariant === 'outline'}
@@ -102,13 +98,13 @@
 
 <style>
 	.kit-appbar {
-		--kit-appbar-background: var(--kit-surface-2);
-		--kit-appbar-color: var(--kit-fg);
+		--kit-appbar-bg: var(--kit-surface-2);
+		--kit-appbar-fg: var(--kit-fg);
 		--kit-appbar-radius: 1rem;
 		--kit-appbar-size: 4rem;
 		--kit-appbar-padding-x: 1rem;
 		--kit-appbar-padding-wrapper: 0;
-		--kit-appbar-border: color-mix(in oklab, var(--kit-appbar-color), transparent 88%);
+		--kit-appbar-bd: color-mix(in oklab, var(--kit-appbar-fg), transparent 88%);
 
 		display: flex;
 		align-items: center;
@@ -118,13 +114,13 @@
 		min-height: var(--kit-appbar-size);
 		padding-inline: var(--kit-appbar-padding-x);
 		border-radius: var(--kit-appbar-radius);
-		color: var(--kit-appbar-color);
-		background-color: var(--kit-appbar-background);
+		color: var(--kit-appbar-fg);
+		background-color: var(--kit-appbar-bg);
 		overflow: hidden;
 	}
 
 	.kit-appbar[data-variant='text'] {
-		--kit-appbar-border: transparent;
+		--kit-appbar-bd: transparent;
 	}
 
 	.kit-appbar[data-density='compact'] {
@@ -142,17 +138,6 @@
 		--kit-appbar-padding-x: 1.5rem;
 	}
 
-	.kit-appbar[data-light='true'] {
-		--kit-appbar-background: color-mix(in oklab, white 88%, var(--kit-surface-1));
-		--kit-appbar-color: var(--kit-fg);
-	}
-
-	.kit-appbar[data-dark='true'] {
-		--kit-appbar-background: color-mix(in oklab, black 72%, var(--kit-surface-3));
-		--kit-appbar-color: white;
-		--kit-appbar-border: color-mix(in oklab, white, transparent 78%);
-	}
-
 	.kit-appbar[data-rounded='0'] {
 		--kit-appbar-radius: 0;
 	}
@@ -189,7 +174,7 @@
 	}
 
 	.kit-appbar .outline {
-		--outline-color: var(--kit-appbar-border);
+		--outline-color: var(--kit-appbar-bd);
 
 		pointer-events: none;
 	}

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

@@ -1,14 +1,12 @@
 import type { Component, RoundedType } from '../../@types';
 type Density = 'compact' | 'comfortable' | 'default';
-type Variant = 'outline' | 'text';
+type Variant = 'filled' | 'outline' | 'text';
 export interface AppbarProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'header' | 'nav';
     variant?: Variant;
     rounded?: RoundedType | string;
     density?: Density | Record<string, Density>;
-    dark?: boolean;
-    light?: boolean;
     color?: string;
     background?: string;
     classContent?: string | string[] | undefined;

package/dist/components/avatar/avatar.svelte

@@ -74,8 +74,18 @@
 
 <style>
 	.kit-avatar {
-		--kit-avatar-size: 2.25rem;
-		--kit-avatar-font-size: 0.875rem;
+		--kit-avatar-size-xs: 1.75rem;
+		--kit-avatar-size-sm: 2rem;
+		--kit-avatar-size-md: 2.25rem;
+		--kit-avatar-size-lg: 2.5rem;
+		--kit-avatar-size-xl: 2.75rem;
+		--kit-avatar-font-xs: 0.75rem;
+		--kit-avatar-font-sm: 0.8125rem;
+		--kit-avatar-font-md: 0.875rem;
+		--kit-avatar-font-lg: 1rem;
+		--kit-avatar-font-xl: 1.125rem;
+		--kit-avatar-size: var(--kit-avatar-size-md);
+		--kit-avatar-font-size: var(--kit-avatar-font-md);
 		--kit-avatar-density-scale: 1;
 
 		display: inline-flex;
@@ -98,24 +108,24 @@
 	}
 
 	.kit-avatar[data-size='xs'] {
-		--kit-avatar-size: 1.75rem;
-		--kit-avatar-font-size: 0.75rem;
+		--kit-avatar-size: var(--kit-avatar-size-xs);
+		--kit-avatar-font-size: var(--kit-avatar-font-xs);
 	}
 	.kit-avatar[data-size='sm'] {
-		--kit-avatar-size: 2rem;
-		--kit-avatar-font-size: 0.8125rem;
+		--kit-avatar-size: var(--kit-avatar-size-sm);
+		--kit-avatar-font-size: var(--kit-avatar-font-sm);
 	}
 	.kit-avatar[data-size='md'] {
-		--kit-avatar-size: 2.25rem;
-		--kit-avatar-font-size: 0.875rem;
+		--kit-avatar-size: var(--kit-avatar-size-md);
+		--kit-avatar-font-size: var(--kit-avatar-font-md);
 	}
 	.kit-avatar[data-size='lg'] {
-		--kit-avatar-size: 2.5rem;
-		--kit-avatar-font-size: 1rem;
+		--kit-avatar-size: var(--kit-avatar-size-lg);
+		--kit-avatar-font-size: var(--kit-avatar-font-lg);
 	}
 	.kit-avatar[data-size='xl'] {
-		--kit-avatar-size: 2.75rem;
-		--kit-avatar-font-size: 1.125rem;
+		--kit-avatar-size: var(--kit-avatar-size-xl);
+		--kit-avatar-font-size: var(--kit-avatar-font-xl);
 	}
 
 	.kit-avatar[data-density='compact'] {