lapikit 0.4.6 → 0.4.8

package/dist/labs/compiler/components.js

@@ -4,6 +4,7 @@ const lapikitComponents = [
     'btn',
     'icon',
     'avatar',
-    'spacer'
+    'spacer',
+    'separator'
 ];
 export default lapikitComponents;

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

@@ -4,3 +4,4 @@ export { default as KitBtn } from './btn/btn.svelte';
 export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
 export { default as KitSpacer } from './spacer/spacer.svelte';
+export { default as KitSeparator } from './separator/separator.svelte';

package/dist/labs/components/index.js

@@ -5,3 +5,4 @@ export { default as KitBtn } from './btn/btn.svelte';
 export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
 export { default as KitSpacer } from './spacer/spacer.svelte';
+export { default as KitSeparator } from './separator/separator.svelte';

package/dist/labs/components/separator/separator.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import type { SeparatorProps } from './separator.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'hr',
+		light = false,
+		dark = false,
+		inset = false,
+		thickness,
+		orientation = 'horizontal',
+		opacity,
+		color,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: SeparatorProps = $props();
+
+	let safeOrientation = $derived(
+		typeof orientation === 'string' && (orientation === 'horizontal' || orientation === 'vertical')
+			? orientation
+			: 'horizontal'
+	);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-separator',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-separator-color:${color}` : '',
+			opacity !== undefined ? `--kit-separator-opacity:${opacity}` : '',
+			thickness !== undefined && safeOrientation === 'horizontal'
+				? `--kit-separator-top-width:${typeof thickness === 'number' ? `${thickness}px` : thickness}`
+				: '',
+			thickness !== undefined && safeOrientation === 'vertical'
+				? `--kit-separator-right-width:${typeof thickness === 'number' ? `${thickness}px` : thickness}`
+				: ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	{...restProps}
+	class={componentClass}
+	style={mergedStyle}
+	role="separator"
+	aria-orientation={safeOrientation}
+	data-light={light || undefined}
+	data-dark={dark || undefined}
+	data-inset={inset || undefined}
+	data-orientation={safeOrientation}
+/>
+
+<style>
+	.kit-separator {
+		--kit-separator-color: var(--kit-fg);
+		--kit-separator-opacity: 0.12;
+		--kit-separator-top-width: thin;
+		--kit-separator-right-width: thin;
+		--kit-separator-vertical-min-size: 1.5rem;
+
+		display: block;
+		flex: 1 1 100%;
+		height: 0;
+		max-height: 0;
+		opacity: var(--kit-separator-opacity);
+		border-color: var(--kit-separator-color);
+		border-style: solid;
+		transition: inherit;
+	}
+
+	.kit-separator[data-light='true'] {
+		--kit-separator-color: color-mix(in oklab, var(--kit-fg), white 40%);
+	}
+
+	.kit-separator[data-dark='true'] {
+		--kit-separator-color: color-mix(in oklab, white, transparent 18%);
+	}
+
+	.kit-separator[data-inset]:not([data-orientation='vertical']) {
+		max-width: calc(100% - 4.5rem);
+		margin-inline-start: 4.5rem;
+	}
+
+	.kit-separator[data-inset][data-orientation='vertical'] {
+		margin-block: 0.5rem;
+		max-height: calc(100% - 1rem);
+	}
+
+	.kit-separator:not([data-orientation='vertical']) {
+		width: 100%;
+		border-width: var(--kit-separator-top-width) 0 0 0;
+	}
+
+	.kit-separator[data-orientation='vertical'] {
+		align-self: stretch;
+		display: inline-flex;
+		width: 0;
+		height: auto;
+		min-height: var(--kit-separator-vertical-min-size);
+		max-width: 0;
+		max-height: none;
+		vertical-align: text-bottom;
+		border-width: 0 var(--kit-separator-right-width) 0 0;
+	}
+</style>

package/dist/labs/components/separator/separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SeparatorProps } from './separator.types.ts';
+declare const Separator: import("svelte").Component<SeparatorProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/labs/components/separator/separator.types.d.ts

@@ -0,0 +1,14 @@
+import type { Base } from '../../utils/types/index.js';
+type Orientation = 'horizontal' | 'vertical';
+export interface SeparatorProps extends Base {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'hr';
+    light?: boolean;
+    dark?: boolean;
+    inset?: boolean;
+    thickness?: string | number;
+    opacity?: string | number;
+    color?: string;
+    orientation?: Orientation | Record<string, Orientation>;
+}
+export {};

package/dist/labs/components/separator/separator.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.4.6",
+	"version": "0.4.8",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"