@svelte-atoms/core 1.0.0-alpha.27 → 1.0.0-alpha.28

package/dist/components/icon/icon.svelte

@@ -1,44 +1,44 @@
-<script
-	lang="ts"
-	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
->
-	import type { Component } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	import type { IconProps } from './types';
-
-	type Element = HtmlElementType<'div'>;
-
-	let {
-		class: klass = '',
-		src = undefined,
-		preset = 'icon',
-		children = undefined,
-		...restProps
-	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
-</script>
-
-<HtmlAtom
-	{preset}
-	class={[
-		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
-		'$preset',
-		klass
-	]}
-	{...restProps}
->
-	{#if src}
-		{@const Src = src}
-		<Src />
-	{:else}
-		{@render children?.()}
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.icon > *) {
-		width: 100%;
-		height: 100%;
-	}
-</style>
+<script
+	lang="ts"
+	generics="Src extends Component = Component, E extends HtmlElementTagName = 'div', B extends Base = Base"
+>
+	import type { Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import type { IconProps } from './types';
+
+	type Element = HtmlElementType<'div'>;
+
+	let {
+		class: klass = '',
+		src = undefined,
+		preset = 'icon',
+		children = undefined,
+		...restProps
+	}: IconProps<Src, E, B> & HTMLAttributes<Element> = $props();
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'icon inline-flex aspect-square h-6 items-center justify-center leading-none text-current',
+		'$preset',
+		klass
+	]}
+	{...restProps}
+>
+	{#if src}
+		{@const Src = src}
+		<Src />
+	{:else}
+		{@render children?.()}
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.icon > *) {
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/components/image/image.stories.svelte.d.ts

@@ -4,7 +4,7 @@ type Image = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: string;
 };
 declare const Image: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

package/dist/components/index.d.ts

@@ -35,3 +35,6 @@ export * from './stack';
 export * from './element';
 export * from './atom';
 export * from './container';
+export * from './calendar';
+export * from './date-picker';
+export * from './qr-code';

package/dist/components/index.js

@@ -35,3 +35,6 @@ export * from './stack';
 export * from './element';
 export * from './atom';
 export * from './container';
+export * from './calendar';
+export * from './date-picker';
+export * from './qr-code';

package/dist/components/input/input-control.svelte

@@ -1,103 +1,103 @@
-<script lang="ts" generics="B extends Base = Base">
-	import { on } from '../../attachments/event.svelte';
-	import { getPreset } from '../../context';
-	import { cn, toClassValue } from '../../utils';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-	import type { Base } from '../atom';
-	import { InputBond } from './bond.svelte';
-	import type { InputControlProps } from './types';
-
-	const bond = InputBond.get();
-
-	let {
-		value = $bindable(),
-		files = $bindable(),
-		date = $bindable(),
-		number = $bindable(),
-		checked = $bindable(),
-		class: klass = '',
-		type = 'text',
-		preset: presetKey = 'input.control',
-		onchange = undefined,
-		oninput = undefined,
-		...restProps
-	}: InputControlProps<B> = $props();
-
-	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
-
-	const valueProps = $derived({
-		...(bond?.input?.() ?? {}),
-		...restProps
-	});
-
-	function handleChange(ev: CustomEvent) {
-		if (!onchange) return;
-
-		onchange?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function handleInput(ev: InputEvent) {
-		if (!oninput) return;
-
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-
-		if (type === 'number') {
-			number = currentTarget.valueAsNumber;
-		}
-
-		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
-			date = currentTarget.valueAsDate;
-		}
-
-		oninput?.(ev, {
-			value: value,
-			files: files,
-			date: date,
-			number: number,
-			checked: checked,
-			event: ev
-		});
-	}
-
-	function toFileList(files: File[]) {
-		const dataTransfer = new DataTransfer();
-		files.forEach((file) => dataTransfer.items.add(file));
-		return dataTransfer.files;
-	}
-</script>
-
-<input
-	bind:value={
-		() => value,
-		(v) => {
-			value = v;
-			if (bond) {
-				bond.state.props.value = v;
-			}
-		}
-	}
-	class={cn(
-		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
-		preset?.class,
-		toClassValue(klass, bond)
-	)}
-	type={type ?? 'text'}
-	onchange={handleChange}
-	oninput={handleInput}
-	{...valueProps}
-	{@attach (node) => {
-		if (type === 'file') {
-			return on('input', () => {
-				files = Array.from(node.files || []);
-				bond!.state.props.files = files;
-			})(node);
-		}
-	}}
-/>
+<script lang="ts" generics="B extends Base = Base">
+	import { on } from '../../attachments/event.svelte';
+	import { getPreset } from '../../context';
+	import { cn, toClassValue } from '../../utils';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import type { Base } from '../atom';
+	import { InputBond } from './bond.svelte';
+	import type { InputControlProps } from './types';
+
+	const bond = InputBond.get();
+
+	let {
+		value = $bindable(),
+		files = $bindable(),
+		date = $bindable(),
+		number = $bindable(),
+		checked = $bindable(),
+		class: klass = '',
+		type = 'text',
+		preset: presetKey = 'input.control',
+		onchange = undefined,
+		oninput = undefined,
+		...restProps
+	}: InputControlProps<B> = $props();
+
+	const preset = getPreset(presetKey as PresetModuleName)?.apply(bond, [bond]);
+
+	const valueProps = $derived({
+		...(bond?.input?.() ?? {}),
+		...restProps
+	});
+
+	function handleChange(ev: CustomEvent) {
+		if (!onchange) return;
+
+		onchange?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function handleInput(ev: InputEvent) {
+		if (!oninput) return;
+
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+
+		if (type === 'number') {
+			number = currentTarget.valueAsNumber;
+		}
+
+		if (type === 'date' || type == 'time' || type === 'datetime-local' || type === 'date-local') {
+			date = currentTarget.valueAsDate;
+		}
+
+		oninput?.(ev, {
+			value: value,
+			files: files,
+			date: date,
+			number: number,
+			checked: checked,
+			event: ev
+		});
+	}
+
+	function toFileList(files: File[]) {
+		const dataTransfer = new DataTransfer();
+		files.forEach((file) => dataTransfer.items.add(file));
+		return dataTransfer.files;
+	}
+</script>
+
+<input
+	bind:value={
+		() => value,
+		(v) => {
+			value = v;
+			if (bond) {
+				bond.state.props.value = v;
+			}
+		}
+	}
+	class={cn(
+		'text-foreground placeholder:text-muted-foreground h-full w-full flex-1 bg-transparent px-2 leading-1 outline-none',
+		preset?.class,
+		toClassValue(klass, bond)
+	)}
+	type={type ?? 'text'}
+	onchange={handleChange}
+	oninput={handleInput}
+	{...valueProps}
+	{@attach (node) => {
+		if (type === 'file') {
+			return on('input', () => {
+				files = Array.from(node.files || []);
+				bond!.state.props.files = files;
+			})(node);
+		}
+	}}
+/>

package/dist/components/label/label.svelte

@@ -1,25 +1,25 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { HtmlAtom, type ElementType, type Base } from '../atom';
-	import type { LabelProps } from './types';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		as = 'label' as E,
-		for: labelfor = null,
-		children,
-		...restProps
-	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
-</script>
-
-<HtmlAtom
-	{as}
-	preset="label"
-	class={['font-medium', '$preset', klass]}
-	for={labelfor}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'label', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom, type ElementType, type Base } from '../atom';
+	import type { LabelProps } from './types';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		as = 'label' as E,
+		for: labelfor = null,
+		children,
+		...restProps
+	}: LabelProps<E, B> & HTMLAttributes<Element> = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	preset="label"
+	class={['font-medium', '$preset', klass]}
+	for={labelfor}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/popover/popover-arrow.svelte

@@ -1,111 +1,111 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { animate as motion } from 'motion';
-	import { HtmlAtom, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-	import type { PopoverArrowProps } from './types';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const position = $derived(bond.position);
-	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
-	const isReady = $derived(!!middlewareArrowData);
-	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
-
-	const arrowProps = $derived({
-		...bond.arrow(),
-		...restProps
-	});
-
-	// Rotation based on placement side
-	const rotation = $derived.by(() => {
-		switch (side) {
-			case 'top':
-				return 180;
-			case 'bottom':
-				return 0;
-			case 'left':
-				return 90;
-			case 'right':
-				return -90;
-			default:
-				return 0;
-		}
-	});
-
-	function _animate(node: HTMLElement) {
-		if (!middlewareArrowData) {
-			return;
-		}
-
-		const { x, y } = middlewareArrowData;
-
-		const isMainAxis = side === 'top' || side === 'bottom';
-
-		const crossAxisStyle = isMainAxis
-			? {
-					left: 0
-				}
-			: {
-					top: 0
-				};
-
-		motion(
-			node,
-			{
-				x: x ?? 0,
-				y: y ?? 0,
-				opacity: 1,
-				...crossAxisStyle
-			},
-			{ duration: 0 }
-		);
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="popover.arrow"
-	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	style="{side}: 100%;"
-	{...arrowProps}
->
-	{#if children}
-		{@render children({ popover: bond })}
-	{:else}
-		<svg
-			width="12"
-			height="12"
-			viewBox="0 0 12 12"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			style="transform: rotate({rotation}deg);"
-		>
-			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
-		</svg>
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { animate as motion } from 'motion';
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverArrowProps } from './types';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverArrowProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const position = $derived(bond.position);
+	const middlewareArrowData = $derived(position?.middlewareData?.arrow);
+	const isReady = $derived(!!middlewareArrowData);
+	const side = $derived(position?.placement?.split('-')[0] ?? 'top');
+
+	const arrowProps = $derived({
+		...bond.arrow(),
+		...restProps
+	});
+
+	// Rotation based on placement side
+	const rotation = $derived.by(() => {
+		switch (side) {
+			case 'top':
+				return 180;
+			case 'bottom':
+				return 0;
+			case 'left':
+				return 90;
+			case 'right':
+				return -90;
+			default:
+				return 0;
+		}
+	});
+
+	function _animate(node: HTMLElement) {
+		if (!middlewareArrowData) {
+			return;
+		}
+
+		const { x, y } = middlewareArrowData;
+
+		const isMainAxis = side === 'top' || side === 'bottom';
+
+		const crossAxisStyle = isMainAxis
+			? {
+					left: 0
+				}
+			: {
+					top: 0
+				};
+
+		motion(
+			node,
+			{
+				x: x ?? 0,
+				y: y ?? 0,
+				opacity: 1,
+				...crossAxisStyle
+			},
+			{ duration: 0 }
+		);
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="popover.arrow"
+	class={['text-border border-border pointer-events-none absolute opacity-0', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	style="{side}: 100%;"
+	{...arrowProps}
+>
+	{#if children}
+		{@render children({ popover: bond })}
+	{:else}
+		<svg
+			width="12"
+			height="12"
+			viewBox="0 0 12 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform: rotate({rotation}deg);"
+		>
+			<path d="M0 12L6 6L12 12H0Z" fill="currentColor" stroke="none" />
+		</svg>
+	{/if}
+</HtmlAtom>

package/dist/components/popover/popover-content.svelte

@@ -59,12 +59,12 @@
 	const xOffset = $derived(dx * offset);
 	const yOffset = $derived(dy * offset);
 
+	const openAsNumber = $derived(+isOpen);
+	const deltaArrow = $derived(position?.middlewareData?.arrow ? 1 : 0);
+
 	let isInitialized = false;
 
 	function _containerInitial(this: typeof bond.state, node: Element) {
-		const openAsNumber = +this.isOpen;
-
-		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
 		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
 		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
 
@@ -81,8 +81,6 @@
 			return;
 		}
 
-		const openAsNumber = +this.isOpen;
-
 		const deltaArrow = position?.middlewareData?.arrow ? 1 : 0;
 		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
 		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
@@ -93,17 +91,58 @@
 		node.style.transform = `translate3d(${_x}px, ${_y}px, 1px)`;
 	}
 
+	let isOpened = false;
+
 	function _animate(this: typeof bond.state, node: Element) {
 		const isOpen = this.isOpen;
 
+		const arrowClientWidth = bond?.elements.arrow?.clientWidth ?? 0;
+		const arrowClientHeight = bond?.elements.arrow?.clientHeight ?? 0;
+
+		const _x = openAsNumber * dx;
+		const _y = openAsNumber * dy;
+
+		const getTransformOrigin = () => {
+			switch (placement) {
+				case 'top':
+				case 'top-start':
+				case 'top-end':
+					return 'bottom';
+				case 'bottom':
+				case 'bottom-start':
+				case 'bottom-end':
+					return 'top';
+				case 'left':
+				case 'left-start':
+				case 'left-end':
+					return 'right';
+				case 'right':
+				case 'right-start':
+				case 'right-end':
+					return 'left';
+				default:
+					return 'center';
+			}
+		};
+
+		const transformOrigin = getTransformOrigin();
+
+		const from = isOpened ? 1 : 0.95;
+
 		motion(
 			node,
 			{
-				opacity: +isOpen,
-				y: (isOpen ? 0 : -1) * dy * 8
+				opacity: openAsNumber,
+				y: _y + dy * (!isOpen ? -1 : 0) * (arrowClientHeight + yOffset),
+				x: _x + dx * (!isOpen ? -1 : 0) * (arrowClientWidth + xOffset),
+				scaleY: dy ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
+				scaleX: dx ? (isOpen ? [from, 1] : [1, 0.8]) : undefined,
+				transformOrigin
 			},
 			{ duration: DURATION.fast / 1000 }
 		);
+
+		isOpened = isOpen;
 	}
 </script>