lapikit 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.4.12",
+	"version": "0.4.14",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -43,44 +43,44 @@
 	"bin": {
 		"lapikit": "bin/index.js"
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"svelte": "./dist/@legacy/index.js",
+	"types": "./dist/@legacy/index.d.ts",
 	"type": "module",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"types": "./dist/@legacy/index.d.ts",
+			"svelte": "./dist/@legacy/index.js"
 		},
 		"./components": {
-			"svelte": "./dist/components/index.js",
-			"default": "./dist/components/index.js"
+			"svelte": "./dist/@legacy/components/index.js",
+			"default": "./dist/@legacy/components/index.js"
 		},
 		"./vite": {
-			"default": "./dist/internal/plugins/vite.js"
+			"default": "./dist/@legacy/internal/plugins/vite.js"
 		},
 		"./stores": {
-			"default": "./dist/stores/index.js"
+			"default": "./dist/@legacy/stores/index.js"
 		},
 		"./actions": {
-			"default": "./dist/actions/index.js"
+			"default": "./dist/@legacy/actions/index.js"
 		},
 		"./core/colors": {
-			"default": "./dist/internal/core/standard-colors.js"
+			"default": "./dist/@legacy/internal/core/standard-colors.js"
 		},
 		"./styles": {
-			"types": "./dist/styles.css.d.ts",
-			"default": "./dist/styles.css"
+			"types": "./dist/@legacy/styles.css.d.ts",
+			"default": "./dist/@legacy/styles.css"
 		},
 		"./themes": {
-			"types": "./dist/themes.css.d.ts",
-			"default": "./dist/themes.css"
+			"types": "./dist/@legacy/themes.css.d.ts",
+			"default": "./dist/@legacy/themes.css"
 		},
 		"./labs/preprocess": {
 			"default": "./dist/entry-bundler.js"
 		},
 		"./labs/components": {
-			"svelte": "./dist/labs/components/index.js",
-			"default": "./dist/labs/components/index.js"
+			"svelte": "./dist/components/index.js",
+			"default": "./dist/components/index.js"
 		}
 	},
 	"peerDependencies": {

package/dist/labs/compiler/index.d.ts

@@ -1 +0,0 @@
-export * from './preprocess/index.js';

package/dist/labs/compiler/index.js

@@ -1 +0,0 @@
-export * from './preprocess/index.js';

package/dist/labs/compiler/preprocess/index.d.ts

@@ -1 +0,0 @@
-export * from './lili.js';

package/dist/labs/compiler/preprocess/index.js

@@ -1 +0,0 @@
-export * from './lili.js';

package/dist/labs/compiler/types/index.d.ts

@@ -1,2 +0,0 @@
-export type * from './dom.js';
-export * from './options.js';

package/dist/labs/compiler/types/index.js

@@ -1 +0,0 @@
-export * from './options.js';

package/dist/labs/components/accordion/accordion.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { AccordionProps } from './accordion.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		text = undefined,
-		dark = false,
-		light = false,
-		color = undefined,
-		background = undefined,
-		rounded = undefined,
-		spacer = false,
-		hideIcon = false,
-		...rest
-	}: AccordionProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-accordion',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-accordion-color:${color}` : '',
-			background ? `--kit-accordion-background:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	{...restProps}
-	data-text={text ? true : undefined}
-	data-dark={dark}
-	data-light={light}
-	data-spacer={spacer}
-	data-hide-icon={hideIcon}
-	data-rounded={rounded}
->
-	{@render children?.()}
-</svelte:element>
-
-<style>
-	.kit-accordion {
-		--kit-accordion-radius: 8px;
-		--kit-accordion-gap: 0;
-		--kit-accordion-color: var(--kit-fg);
-		--kit-accordion-background: transparent;
-
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		width: 100%;
-		padding: 0;
-		list-style: none;
-		position: relative;
-		z-index: 1;
-		gap: var(--kit-accordion-gap);
-		color: var(--kit-accordion-color);
-		background: var(--kit-accordion-background);
-	}
-
-	.kit-accordion[data-spacer='true'] {
-		--kit-accordion-gap: 1rem;
-	}
-
-	.kit-accordion[data-rounded='0'] {
-		--kit-accordion-radius: 0;
-	}
-
-	.kit-accordion[data-rounded='xs'] {
-		--kit-accordion-radius: 2px;
-	}
-
-	.kit-accordion[data-rounded='sm'] {
-		--kit-accordion-radius: 4px;
-	}
-
-	.kit-accordion[data-rounded='md'] {
-		--kit-accordion-radius: 8px;
-	}
-
-	.kit-accordion[data-rounded='lg'] {
-		--kit-accordion-radius: 16px;
-	}
-
-	.kit-accordion[data-rounded='xl'] {
-		--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;
-	}
-</style>

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

@@ -1,241 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../../utils/index.js';
-	import { makeComponentProps } from '../../../compiler/mapped-code.js';
-	import type { AccordionItemModelProps, AccordionItemProps } from '../accordion.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		activator = undefined,
-		indicator = undefined,
-		text = undefined,
-		dark = false,
-		light = false,
-		rounded = undefined,
-		color = undefined,
-		background = undefined,
-		index,
-		open = false,
-		toggle = undefined,
-		disabled = false,
-		readOnly = false,
-		...rest
-	}: AccordionItemProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-accordion-item',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-accordion-item-color:${color}` : '',
-			background ? `--kit-accordion-item-background:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-
-	let safeOpen = $derived(!!open);
-	let model: AccordionItemModelProps = {
-		get open() {
-			return safeOpen;
-		}
-	};
-
-	function handleToggle() {
-		if (readOnly || disabled || !toggle) return;
-		toggle(index);
-	}
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	{...restProps}
-	data-open={safeOpen}
-	data-disabled={disabled}
-	data-dark={dark}
-	data-light={light}
-	data-rounded={rounded}
->
-	<button
-		class="kit-accordion-item__trigger"
-		type="button"
-		onclick={handleToggle}
-		aria-expanded={safeOpen}
-		aria-disabled={disabled || readOnly || undefined}
-		{disabled}
-	>
-		<span class="kit-accordion-item__title">
-			{#if activator}
-				{@render activator?.()}
-			{:else}
-				{text}
-			{/if}
-		</span>
-
-		<span class="kit-accordion-item__indicator">
-			{#if indicator}
-				{@render indicator?.(model)}
-			{:else}
-				<svg viewBox="0 0 24 24" aria-hidden="true">
-					{#if safeOpen}
-						<path d="M7.41 14.59 12 10l4.59 4.59L18 13.17l-6-6-6 6z" fill="currentColor"></path>
-					{:else}
-						<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" fill="currentColor"></path>
-					{/if}
-				</svg>
-			{/if}
-		</span>
-	</button>
-
-	<div class="kit-accordion-item__content" hidden={!safeOpen}>
-		<div class="kit-accordion-item__content-inner">
-			{@render children?.()}
-		</div>
-	</div>
-</svelte:element>
-
-<style>
-	button {
-		appearance: none;
-		background: none;
-		border: none;
-		font: inherit;
-		color: inherit;
-	}
-
-	.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-trigger-y: 1rem;
-		--kit-accordion-item-trigger-x: 1.25rem;
-
-		flex: 1 0 100%;
-		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);
-		transition:
-			border-color 150ms ease,
-			background 150ms ease,
-			box-shadow 150ms ease;
-		overflow: clip;
-	}
-
-	.kit-accordion-item[data-rounded='0'] {
-		--kit-accordion-item-radius: 0;
-	}
-
-	.kit-accordion-item[data-rounded='xs'] {
-		--kit-accordion-item-radius: 2px;
-	}
-
-	.kit-accordion-item[data-rounded='sm'] {
-		--kit-accordion-item-radius: 4px;
-	}
-
-	.kit-accordion-item[data-rounded='md'] {
-		--kit-accordion-item-radius: 8px;
-	}
-
-	.kit-accordion-item[data-rounded='lg'] {
-		--kit-accordion-item-radius: 16px;
-	}
-
-	.kit-accordion-item[data-rounded='xl'] {
-		--kit-accordion-item-radius: 99999px;
-	}
-
-	.kit-accordion-item[data-open='true'] {
-		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;
-		align-items: center;
-		justify-content: space-between;
-		gap: 1rem;
-		padding: var(--kit-accordion-item-trigger-y) var(--kit-accordion-item-trigger-x);
-		cursor: pointer;
-		text-align: left;
-	}
-
-	.kit-accordion-item__trigger:disabled,
-	.kit-accordion-item[data-disabled='true'] .kit-accordion-item__trigger {
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-
-	.kit-accordion-item__title {
-		flex: 1 1 auto;
-		min-width: 0;
-	}
-
-	.kit-accordion-item__indicator {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		flex: 0 0 auto;
-	}
-
-	.kit-accordion-item__indicator svg {
-		width: 1.125rem;
-		height: 1.125rem;
-		display: block;
-	}
-
-	.kit-accordion-item__content {
-		display: block;
-	}
-
-	.kit-accordion-item__content[hidden] {
-		display: none;
-	}
-
-	.kit-accordion-item__content-inner {
-		padding: 0 1.25rem 1rem;
-	}
-</style>