lapikit 0.0.0-insiders.b424e00 → 0.0.0-insiders.b8c8b2e

package/bin/configuration.js

@@ -133,10 +133,12 @@ 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'`)) {
@@ -183,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;
@@ -200,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;
 						}
@@ -246,7 +248,7 @@ async function addLapikitToViteConfig(viteConfigFile) {
 }
 
 export async function initConfiguration(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}`);
@@ -287,10 +289,14 @@ 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) {
 		terminal('warn', `Warning: Could not update vite.config file: ${error.message}`);
 		terminal('error', `Error adding lapikit to vite config: ${error.message}`);

package/bin/presets.js

@@ -8,6 +8,7 @@ function presets({ adapterCSS }) {
 
 	if (adapterCSS === 'css') {
 		content += `// Styles\n`;
+		content += `import 'lapikit/styles';\n`;
 		content += `import 'lapikit/css';\n\n`;
 	}
 

package/dist/actions/index.d.ts

@@ -1,2 +1 @@
 export * from '../components/accordion/accordion.svelte.js';
-export * from '../internal/mediaQueries.js';

package/dist/actions/index.js

@@ -1,2 +1 @@
 export * from '../components/accordion/accordion.svelte.js';
-export * from '../internal/mediaQueries.js';

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,21 +4,12 @@
 		colorSchemeSystem,
 		modalOpen,
 		setOpenModal,
-		updateThemeStore,
-		viewportWidth
+		useColorScheme,
+		useTheme
 	} from '../../stores/index.js';
 	import type { Snippet } from 'svelte';
 	let { children }: { children: Snippet } = $props();
 
-	// states
-	let innerWidth = $state(0);
-
-	$effect(() => {
-		if (BROWSER) {
-			viewportWidth.set(innerWidth);
-		}
-	});
-
 	$effect.pre(() => {
 		if (!BROWSER) return;
 		// system
@@ -36,13 +27,15 @@
 			});
 
 		// 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>
 
-<svelte:window bind:innerWidth />
-
 {@render children?.()}
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -53,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>

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -24,8 +24,27 @@
 	{@render children?.()}
 </div>
 
-<style>
-	.kit-aspect-ratio {
+<style>.kit-aspect-ratio {
+	display: flex;
+	flex: 1 0 auto;
+	max-height: 100%;
+	max-width: 100%;
+	overflow: hidden;
+	position: relative;
+}
+
+.kit-aspect-ratio--inline {
+	display: inline-flex;
+	flex: 0 0 auto;
+}
+
+.kit-aspect-ratio--sizer {
+	flex: 1 0 0px;
+	transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	pointer-events: none;
+}
+
+.kit-aspect-ratio {
 		display: flex;
 		flex: 1 0 auto;
 		max-height: 100%;
@@ -34,12 +53,12 @@
 		position: relative;
 	}
 
-	.kit-aspect-ratio--inline {
+.kit-aspect-ratio--inline {
 		display: inline-flex;
 		flex: 0 0 auto;
 	}
 
-	.kit-aspect-ratio--sizer {
+.kit-aspect-ratio--sizer {
 		flex: 1 0 0px;
 		transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 		pointer-events: none;

package/dist/components/avatar/avatar.svelte

@@ -44,3 +44,117 @@
 		{@render children?.()}
 	{/if}
 </svelte:element>
+
+<style>.kit-avatar {
+	--avatar-color: var(--on, var(--kit-on-container));
+	--avatar-background: var(--base, var(--kit-container));
+	--avatar-radius: var(--shape, var(--kit-radius-full));
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	padding-top: var(--avatar-spacing-x);
+	padding-bottom: var(--avatar-spacing-x);
+	padding-right: var(--avatar-spacing-y);
+	padding-left: var(--avatar-spacing-y);
+
+	border-width: 1px;
+	border-style: solid;
+	border-radius: var(--avatar-radius);
+
+	/* theme */
+	color: var(--avatar-color);
+	background-color: var(--avatar-background);
+	border-color: var(--avatar-background);
+}
+
+.kit-avatar.kit-avatar--image {
+	position: relative;
+	overflow: hidden;
+}
+
+.kit-avatar.kit-avatar--image img {
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* size */
+
+.kit-avatar[breakpoint]kit-avatar--size-xs {
+	--avatar-height: 1.75rem;
+	--avatar-multiplier-y: 2;
+	font-size: 0.75rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-sm {
+	--avatar-height: 2rem;
+	--avatar-multiplier-y: 3;
+	font-size: 0.875rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-md {
+	--avatar-height: 2.25rem;
+	--avatar-multiplier-y: 4;
+	font-size: 0.875rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-lg {
+	--avatar-height: 2.5rem;
+	--avatar-multiplier-y: 5;
+	font-size: 1rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-xl {
+	--avatar-height: 2.75rem;
+	--avatar-multiplier-y: 6;
+	font-size: 1.125rem;
+}
+
+/* density */
+
+.kit-avatar[breakpoint]kit-avatar--density-default {
+	height: calc(var(--avatar-height));
+	width: calc(var(--avatar-height));
+	--avatar-spacing-x: 0;
+	--avatar-spacing-y: 0;
+}
+
+.kit-avatar[breakpoint]kit-avatar--density-compact {
+	height: calc(var(--avatar-height) - 0.25rem);
+	width: calc(var(--avatar-height) - 0.25rem);
+	--avatar-spacing-x: 0;
+	--avatar-spacing-y: 0;
+}
+
+.kit-avatar[breakpoint]kit-avatar--density-comfortable {
+	height: calc(var(--avatar-height) + 0.25rem);
+	width: calc(var(--avatar-height) + 0.25rem);
+	--avatar-spacing-x: 0;
+	--avatar-spacing-y: 0;
+}
+
+/* variant */
+
+.kit-avatar[breakpoint]kit-avatar--variant-outline {
+	--avatar-color: var(--base, var(--kit-container));
+	background-color: transparent;
+	border: 1px solid currentColor;
+}
+
+.kit-avatar[breakpoint]kit-avatar--variant-text {
+	--avatar-color: var(--base, var(--kit-container));
+	background-color: transparent;
+	border-color: transparent;
+}
+
+.kit-avatar[breakpoint]kit-avatar--variant-dash {
+	--avatar-color: var(--base, var(--kit-container));
+	background-color: transparent;
+	border: 1px dashed currentColor;
+}
+</style>