lapikit 0.0.0-insiders.bd609af → 0.0.0-insiders.bf2813a

package/bin/configuration.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { promises as fs } from 'fs';
 import path from 'path';
+import { terminal } from './helper.js';
 import presets from './presets.js';
 
 async function findReferenceFile(projectPath) {
@@ -9,7 +10,8 @@ async function findReferenceFile(projectPath) {
 	try {
 		await fs.access(routesPath);
 	} catch {
-		throw new Error('Lapikit cannot find the routes/ directory.');
+		terminal('error', `Lapikit cannot find the routes/ directory.`);
+		// throw new Error('Lapikit cannot find the routes/ directory.');
 	}
 
 	const layoutFile = path.join(routesPath, '+layout.svelte');
@@ -65,7 +67,7 @@ async function addImportToReferenceFile(targetFile, referenceFile) {
 		const importStatement = `import "${relativePath.startsWith('.') ? relativePath : './' + relativePath}";\n`;
 
 		if (content.includes(`import "${relativePath}"`)) {
-			console.log(`import has already exist ${referenceFile}`);
+			terminal('info', `Import statement already exists in ${referenceFile}`);
 			return;
 		}
 
@@ -103,9 +105,9 @@ async function addImportToReferenceFile(targetFile, referenceFile) {
 		const newContent = lines.join('\n');
 
 		await fs.writeFile(referenceFile, newContent);
-		console.log(`Import has added on ${referenceFile}`);
+		terminal('info', `Import has been added to ${referenceFile}`);
 	} catch (error) {
-		console.error(`Error adding import: ${error.message}`);
+		terminal('error', `Error adding import: ${error.message}`);
 		throw error;
 	}
 }
@@ -131,14 +133,16 @@ async function findViteConfigFile(projectPath, typescript) {
 	}
 }
 
-async function addLapikitToViteConfig(viteConfigFile) {
+async function addLapikitToViteConfig(viteConfigFile, pathConfig, typescript) {
 	try {
 		const content = await fs.readFile(viteConfigFile, 'utf-8');
 		const lapikitImport = `import { lapikit } from 'lapikit/vite';`;
+		const configPath = `${pathConfig}/lapikit.${typescript ? 'ts' : 'js'}`;
+		const lapikitPlugin = `lapikit({ config: '${configPath}' })`;
 
 		// Check if lapikit import already exists
 		if (content.includes(lapikitImport) || content.includes(`from 'lapikit/vite'`)) {
-			console.log(`Lapikit import already exists in ${viteConfigFile}`);
+			terminal('info', `Lapikit import already exists in ${viteConfigFile}`);
 			return;
 		}
 
@@ -181,10 +185,10 @@ async function addLapikitToViteConfig(viteConfigFile) {
 					const pluginMatch = line.match(/plugins:\s*\[(.*)\]/);
 					if (pluginMatch) {
 						const pluginsContent = pluginMatch[1];
-						if (!pluginsContent.includes('lapikit()')) {
+						if (!pluginsContent.includes('lapikit')) {
 							const newPluginsContent = pluginsContent.replace(
 								/sveltekit\(\)/,
-								'sveltekit(), lapikit()'
+								`sveltekit(), ${lapikitPlugin}`
 							);
 							lines[i] = line.replace(pluginsContent, newPluginsContent);
 							pluginAdded = true;
@@ -198,24 +202,24 @@ async function addLapikitToViteConfig(viteConfigFile) {
 					const pluginLine = lines[j].trim();
 
 					if (pluginLine.includes('sveltekit()') && !pluginAdded) {
-						// Check if lapikit() is not already present
+						// Check if lapikit is not already present
 						let hasLapikit = false;
 						for (let k = i; k < lines.length && !lines[k].includes(']'); k++) {
-							if (lines[k].includes('lapikit()')) {
+							if (lines[k].includes('lapikit')) {
 								hasLapikit = true;
 								break;
 							}
 						}
 
 						if (!hasLapikit) {
-							// Add lapikit() after sveltekit()
+							// Add lapikit after sveltekit()
 							if (pluginLine.includes(',')) {
-								lines[j] = lines[j].replace('sveltekit()', 'sveltekit(), lapikit()');
+								lines[j] = lines[j].replace('sveltekit()', `sveltekit(), ${lapikitPlugin}`);
 							} else {
 								lines[j] = lines[j].replace('sveltekit()', 'sveltekit(),');
-								// Insert lapikit() on the next line with proper indentation
+								// Insert lapikit on the next line with proper indentation
 								const indentation = lines[j].match(/^\s*/)[0];
-								lines.splice(j + 1, 0, `${indentation}lapikit()`);
+								lines.splice(j + 1, 0, `${indentation}${lapikitPlugin}`);
 							}
 							pluginAdded = true;
 						}
@@ -231,21 +235,20 @@ async function addLapikitToViteConfig(viteConfigFile) {
 		}
 
 		if (!pluginAdded) {
-			console.warn('Could not find sveltekit() in plugins array to add lapikit() after it');
+			terminal('warn', `Could not find sveltekit() in plugins array to add lapikit() after it`);
 		}
 
 		const newContent = lines.join('\n');
 		await fs.writeFile(viteConfigFile, newContent);
-		console.log(`Lapikit import and plugin added to ${viteConfigFile}`);
+		terminal('info', `Lapikit import and plugin added to ${viteConfigFile}`);
 	} catch (error) {
-		console.error(`Error adding lapikit to vite config: ${error.message}`);
+		terminal('error', `Error adding lapikit to vite config: ${error.message}`);
 		throw error;
 	}
 }
 
 export async function initConfiguration(options) {
-	console.log('initConfiguration called with:', options);
-	const { typescript, pathConfig, formatCSS } = options;
+	const { typescript, pathConfig, formatCSS, pathCSS } = options;
 	const ext = typescript ? 'ts' : 'js';
 	const targetDir = path.resolve(process.cwd(), pathConfig);
 	const targetFile = path.join(targetDir, `lapikit.${ext}`);
@@ -253,30 +256,32 @@ export async function initConfiguration(options) {
 	await fs.mkdir(targetDir, { recursive: true });
 
 	let fileCreated = false;
+
+	// Create Lapikit config
 	try {
-		console.log(`Trying to access ${targetFile}`);
 		await fs.access(targetFile);
-		console.log(`File ${targetFile} already exists.`);
+		terminal('info', `File ${targetFile} already exists.`);
 	} catch {
-		console.log(`Creating file: ${targetFile}`);
+		terminal('info', `Creating file: ${targetFile}`);
 		const content = presets({
-			classic: formatCSS === 'global'
+			adapterCSS: formatCSS
 		});
 		await fs.writeFile(targetFile, content);
-		console.log(`File created : ${targetFile}`);
+		terminal('info', `File created: ${targetFile}`);
 		fileCreated = true;
 	}
 
+	// Add Import Lapikit plugin
 	try {
 		const referenceFile = await findReferenceFile(process.cwd());
 		await addImportToReferenceFile(targetFile, referenceFile);
 	} catch (error) {
-		console.error(`Error: ${error.message}`);
-		// If the file was just created and we can't add the import, delete it
+		terminal('error', `Error adding import: ${error.message}`);
+
 		if (fileCreated) {
 			try {
 				await fs.unlink(targetFile);
-				console.log(`File ${targetFile} deleted due to error.`);
+				terminal('info', `File ${targetFile} deleted due to error.`);
 			} catch {
 				// Ignore deletion error
 			}
@@ -284,12 +289,16 @@ export async function initConfiguration(options) {
 		throw error;
 	}
 
+	// Add Import Lapikit css
+	if (formatCSS !== 'css') {
+		console.log('need custom import (Preview)', pathCSS);
+	}
 	// Add lapikit to vite.config file
 	try {
 		const viteConfigFile = await findViteConfigFile(process.cwd(), typescript);
-		await addLapikitToViteConfig(viteConfigFile);
+		await addLapikitToViteConfig(viteConfigFile, pathConfig, typescript);
 	} catch (error) {
-		console.warn(`Warning: Could not update vite.config file: ${error.message}`);
-		// This is not a critical error, so we don't throw it
+		terminal('warn', `Warning: Could not update vite.config file: ${error.message}`);
+		terminal('error', `Error adding lapikit to vite config: ${error.message}`);
 	}
 }

package/bin/index.js

@@ -30,12 +30,12 @@ async function run() {
 
 run()
 	.then(() => {
-		console.log('Website: https://lapikit.dev');
-		console.log('Github: https://github.com/nycolaide/lapikit');
-		console.log('Support the developement: https://buymeacoffee.com/nycolaide');
+		terminal('none', `\n\n\n\nWebsite: https://lapikit.dev`);
+		terminal('none', `Github: https://github.com/nycolaide/lapikit`);
+		terminal('none', `Support the developement: https://buymeacoffee.com/nycolaide`);
 		process.exit(0);
 	})
 	.catch((error) => {
-		console.error(`\n${red('✖')} ${error}\n`);
+		terminal('error', `Error: ${error}`);
 		process.exit(1);
 	});

package/bin/presets.js

@@ -1,21 +1,24 @@
-function presets({ classic }) {
+function presets({ adapterCSS }) {
 	let content = '';
 
 	content += `/**\n`;
-	content += `\t* Lapikit\n`;
-	content += `\t* Library documentation: https://lapikit.dev\n`;
+	content += ` * Lapikit\n`;
+	content += ` * Library documentation: https://lapikit.dev\n`;
 	content += ` */\n\n`;
 
-	if (classic) {
-		content += `// Classic\n`;
+	if (adapterCSS === 'css') {
+		content += `// Styles\n`;
+		content += `import 'lapikit/styles';\n`;
 		content += `import 'lapikit/css';\n\n`;
 	}
 
 	content += `// Composables\n`;
-	content += `import { helloWorld } from 'lapikit';\n\n`;
+	content += `import createLapikit from 'lapikit';\n\n`;
 
 	content += `// https://lapikit.dev/docs/getting-started\n`;
-	content += `export default helloWorld();`;
+	content += `export default createLapikit({\n`;
+	content += `\tadapterCSS: "${adapterCSS}",\n`;
+	content += `\n});`;
 
 	return content;
 }

package/bin/prompts.js

@@ -1,18 +1,19 @@
 #!/usr/bin/env node
 import prompts from 'prompts';
+import { terminal } from './helper.js';
 
 export async function initPrompts() {
 	const { confirm } = await prompts({
 		type: 'toggle',
 		name: 'confirm',
-		message: 'Start install Lapikit on your app?',
+		message: 'Launch install Lapikit on your project?',
 		initial: true,
 		active: 'Yes',
 		inactive: 'No'
 	});
 
 	if (!confirm) {
-		console.log('❌ Installation canceled. See you soon.');
+		terminal('warn', `installation canceled.`);
 		process.exit(0);
 	}
 	// temps with legacy and new process install
@@ -70,7 +71,7 @@ export async function initPrompts() {
 				name: 'formatCSS',
 				message: 'What is your CSS format used on your app?',
 				choices: [
-					{ title: 'Basic (classic import)', value: 'global' },
+					{ title: 'Basic (classic import)', value: 'css' },
 					{
 						title: 'TailwindCSS (v4)',
 						value: 'tailwind-v4'
@@ -82,7 +83,7 @@ export async function initPrompts() {
 				]
 			},
 			{
-				type: (prev) => (prev !== 'global' ? 'text' : null),
+				type: (prev) => (prev !== 'css' ? 'text' : null),
 				name: 'pathCSS',
 				message: 'Where would you like to import the lapikit CSS files?',
 				initial: 'src/app.css',
@@ -91,8 +92,6 @@ export async function initPrompts() {
 			}
 		]);
 
-		console.log('response config', settings);
-
 		return {
 			...settings,
 			env: 'experimental'

package/dist/components/accordion/accordion.svelte

@@ -35,3 +35,121 @@
 >
 	{@render children?.()}
 </svelte:element>
+
+<style>.kit-accordion {
+	--accordion-color: var(--on, var(--kit-on-container));
+	--accordion-background: var(--base, var(--kit-container));
+	--accordion-radius: var(--shape, var(--kit-radius-md));
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	list-style-type: none;
+	padding: 0;
+	width: 100%;
+	position: relative;
+	z-index: 1;
+}
+
+.kit-accordion.kit-accordion--spacer .kit-accordion-item:first-child.kit-accordion-item--active {
+	margin-bottom: 1rem;
+}
+
+.kit-accordion.kit-accordion--spacer
+	.kit-accordion-item:not(:first-child):not(:last-child).kit-accordion-item--active {
+	margin-bottom: 1rem;
+	margin-top: 1rem;
+}
+
+.kit-accordion.kit-accordion--spacer .kit-accordion-item:last-child.kit-accordion-item--active {
+	margin-top: 1rem;
+}
+
+.kit-accordion.kit-accordion--hide-icon
+	.kit-accordion-item
+	.kit-accordion-item--title
+	> .kit-accordion-item--icon {
+	display: none !important;
+}
+
+.kit-accordion.kit-accordion--hide-icon .kit-accordion-item .kit-accordion-item--title {
+	cursor: default;
+	pointer-events: none;
+	user-select: none;
+}
+
+/* item */
+
+.kit-accordion .kit-accordion-item {
+	flex: 1 0 100%;
+	max-width: 100%;
+	position: relative;
+	transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
+	transition-property: margin-top, border-radius, border, max-width;
+	border-radius: var(--shape, var(--accordion-radius, var(--kit-radius-md)));
+	color: var(--on, var(--accordion-color, var(--kit-on-container)));
+	background-color: var(--base, var(--accordion-background, var(--kit-container)));
+	/* transition:
+		color 0.5s,
+		background-color 0.5s; */
+}
+
+.kit-accordion .kit-accordion-item > button,
+.kit-accordion .kit-accordion-item > [type='button'] {
+	font: inherit;
+	overflow: visible;
+	background-color: transparent;
+	border-style: none;
+	cursor: pointer;
+	color: inherit;
+}
+
+.kit-accordion .kit-accordion-item .kit-accordion-item--title {
+	align-items: center;
+	text-align: start;
+	border-radius: inherit;
+	display: flex;
+	font-size: 0.9375rem;
+	min-height: 3rem;
+	outline: none;
+	padding: 1rem 1.5rem;
+	position: relative;
+	transition: 0.3s min-height margin-bottom margin-top border-radius cubic-bezier(0.4, 0, 0.2, 1);
+	width: 100%;
+	justify-content: space-between;
+}
+
+.kit-accordion .kit-accordion-item .kit-accordion-item--text {
+	display: flex;
+}
+
+.kit-accordion .kit-accordion-item .kit-accordion-item--text .kit-accordion-item--text-wrapper {
+	padding: 0.5rem 1.5rem 1rem;
+	flex: 1 1 auto;
+	max-width: 100%;
+}
+
+.kit-accordion .kit-accordion-item .kit-accordion-item--icon {
+	display: inline-flex;
+	margin-bottom: -0.25rem;
+	margin-top: -0.25rem;
+	-webkit-user-select: none;
+	user-select: none;
+	margin-inline-start: auto;
+}
+
+/* disabled */
+
+.kit-accordion .kit-accordion-item .kit-accordion-item--title.kit-accordion-item--disabled,
+.kit-accordion .kit-accordion-item .kit-accordion-item--title[disabled],
+.kit-accordion .kit-accordion-item .kit-accordion-item--title:disabled {
+	pointer-events: none;
+	user-select: none;
+}
+
+.kit-accordion .kit-accordion-item .kit-accordion-item--title.kit-accordion-item--disabled > *,
+.kit-accordion .kit-accordion-item .kit-accordion-item--title[disabled] > *,
+.kit-accordion .kit-accordion-item .kit-accordion-item--title:disabled > * {
+	opacity: 0.6;
+}
+</style>

package/dist/components/alert/alert.svelte

@@ -87,3 +87,125 @@
 		{/if}
 	</svelte:element>
 {/if}
+
+<style>/* root */
+.kit-alert {
+	--alert-color: var(--on, var(--kit-on-container));
+	--alert-background: var(--base, var(--kit-container));
+	--alert-radius: var(--shape, var(--kit-radius-md));
+}
+.kit-alert {
+	display: grid;
+	flex: 1 1;
+	grid-template-areas:
+		'prepend content append close'
+		'. content . .';
+	grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
+	position: relative;
+	padding: 1rem;
+	overflow: hidden;
+	color: var(--alert-color);
+	background-color: var(--alert-background);
+	border-radius: var(--alert-radius);
+	line-height: 0;
+}
+.kit-alert .kit-alert--underlay {
+	grid-area: none;
+	position: absolute;
+	background-color: var(--alert-background);
+	border-radius: inherit;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+}
+.kit-alert.kit-alert--outline {
+	border: thin solid currentColor;
+	background-color: transparent;
+}
+/* density */
+.kit-alert[breakpoint]kit-alert--density-default {
+	padding-bottom: 1rem;
+	padding-top: 1rem;
+}
+.kit-alert[breakpoint]kit-alert--density-compact {
+	padding-bottom: 0.5rem;
+	padding-top: 0.5rem;
+}
+.kit-alert[breakpoint]kit-alert--density-comfortable {
+	padding-bottom: 0.75rem;
+	padding-top: 0.75rem;
+}
+.kit-alert .kit-alert--prepend {
+	align-self: flex-start;
+	display: flex;
+	align-items: center;
+	grid-area: prepend;
+	margin-inline-end: 1rem;
+}
+.kit-alert .kit-alert--content {
+	align-self: flex-start;
+	grid-area: content;
+	overflow: hidden;
+	line-height: normal;
+}
+.kit-alert .kit-alert--close {
+	align-self: flex-start;
+	margin-inline-start: 1rem;
+	flex: 0 1 auto;
+	grid-area: close;
+}
+.kit-alert .kit-alert--append {
+	align-self: flex-start;
+	display: flex;
+	align-items: center;
+	grid-area: append;
+	margin-inline-start: 1rem;
+}
+/* state */
+.kit-alert.kit-alert--info:not([class*='alert--variant-']) {
+	--on: var(--kit-on-info);
+	--base: var(--kit-info);
+}
+.kit-alert.kit-alert--info[class*='alert--variant-'] {
+	--base: var(--kit-info);
+}
+.kit-alert.kit-alert--success:not([class*='alert--variant-']) {
+	--on: var(--kit-on-success);
+	--base: var(--kit-success);
+}
+.kit-alert.kit-alert--success[class*='alert--variant-'] {
+	--base: var(--kit-success);
+}
+.kit-alert.kit-alert--warning:not([class*='alert--variant-']) {
+	--on: var(--kit-on-warning);
+	--base: var(--kit-warning);
+}
+.kit-alert.kit-alert--warning[class*='alert--variant-'] {
+	--base: var(--kit-warning);
+}
+.kit-alert.kit-alert--error:not([class*='alert--variant-']) {
+	--on: var(--kit-on-error);
+	--base: var(--kit-error);
+}
+.kit-alert.kit-alert--error[class*='alert--variant-'] {
+	--base: var(--kit-error);
+}
+/* variant */
+.kit-alert[breakpoint]kit-alert--variant-outline {
+	--alert-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border: 1px solid currentColor;
+}
+.kit-alert[breakpoint]kit-alert--variant-text {
+	--alert-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border-color: transparent;
+}
+.kit-alert[breakpoint]kit-alert--variant-dash {
+	--alert-color: var(--base, var(--kit-neutral));
+	background-color: transparent;
+	border: 1px dashed currentColor;
+}
+</style>

package/dist/components/app/app.svelte

@@ -4,7 +4,8 @@
 		colorSchemeSystem,
 		modalOpen,
 		setOpenModal,
-		updateThemeStore
+		useColorScheme,
+		useTheme
 	} from '../../stores/index.js';
 	import type { Snippet } from 'svelte';
 	let { children }: { children: Snippet } = $props();
@@ -26,8 +27,12 @@
 			});
 
 		// local
-		const local = localStorage.getItem('@lapikit/theme');
-		if (local !== null) updateThemeStore(local as 'dark' | 'light' | 'system');
+		const localColorScheme = localStorage.getItem('@lapikit/color-scheme');
+		const localTheme = localStorage.getItem('@lapikit/theme');
+
+		// apply local settings
+		if (localColorScheme !== null) useColorScheme(localColorScheme as 'dark' | 'light' | 'system');
+		if (localTheme !== null) useTheme(localTheme as string);
 	});
 </script>
 
@@ -41,3 +46,21 @@
 		onclick={() => $modalOpen !== 'persistent' && setOpenModal(false)}
 	></div>
 {/if}
+
+<style>.kit-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	background-color: color-mix(in oklab, var(--kit-shadow) 70%, transparent);
+	z-index: 9000;
+	cursor: default;
+}
+
+.kit-overlay.kit-overlay--persistent {
+	/* pointer-events: none; */
+	user-select: none;
+	cursor: default;
+}
+</style>

package/dist/components/appbar/appbar.css

@@ -3,7 +3,7 @@
 	--appbar-color: var(--on, var(--kit-on-surface));
 	--appbar-background: var(--base, var(--kit-surface));
 	--appbar-radius: var(--shape, 0);
-	--appbar-padding-wrapper: var(--kit-spacing) * 4;
+	--appbar-padding-wrapper: var(--prism-spacing) * 4;
 }
 
 .kit-appbar {
@@ -34,15 +34,15 @@
 /* density */
 .kit-appbar[breakpoint]kit-appbar--density-default {
 	height: 4rem;
-	padding-inline: calc(var(--kit-spacing) * 1.5);
+	padding-inline: calc(var(--prism-spacing) * 1.5);
 }
 
 .kit-appbar[breakpoint]kit-appbar--density-compact {
 	height: 3.5rem;
-	padding-inline: calc(var(--kit-spacing) * 0.75);
+	padding-inline: calc(var(--prism-spacing) * 0.75);
 }
 
 .kit-appbar[breakpoint]kit-appbar--density-comfortable {
 	height: 4.5rem;
-	padding-inline: calc(var(--kit-spacing) * 2.25);
+	padding-inline: calc(var(--prism-spacing) * 2.25);
 }

package/dist/components/appbar/appbar.svelte

@@ -38,3 +38,48 @@
 		{@render children?.()}
 	</div>
 </svelte:element>
+
+<style>/* root default*/
+.kit-appbar {
+	--appbar-color: var(--on, var(--kit-on-surface));
+	--appbar-background: var(--base, var(--kit-surface));
+	--appbar-radius: var(--shape, 0);
+	--appbar-padding-wrapper: var(--prism-spacing) * 4;
+}
+.kit-appbar {
+	display: flex;
+	align-items: center;
+	border-style: solid;
+	border-width: 1px;
+	border-radius: var(--appbar-radius);
+	color: var(--appbar-color);
+	background-color: var(--appbar-background);
+	border-color: var(--appbar-background);
+	/* transition:
+		color 0.5s,
+		border-color 0.5s,
+		background-color 0.5s; */
+}
+/* wrapper */
+.kit-appbar .kit-appbar--wrapper {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	height: calc(100% - (var(--appbar-padding-wrapper) * 2));
+	width: calc(100% - (var(--appbar-padding-wrapper) * 2));
+	margin: 0 auto;
+}
+/* density */
+.kit-appbar[breakpoint]kit-appbar--density-default {
+	height: 4rem;
+	padding-inline: calc(var(--prism-spacing) * 1.5);
+}
+.kit-appbar[breakpoint]kit-appbar--density-compact {
+	height: 3.5rem;
+	padding-inline: calc(var(--prism-spacing) * 0.75);
+}
+.kit-appbar[breakpoint]kit-appbar--density-comfortable {
+	height: 4.5rem;
+	padding-inline: calc(var(--prism-spacing) * 2.25);
+}
+</style>