@svelte-atoms/core 1.0.0-alpha.30 → 1.0.0-alpha.31

package/dist/components/button/button.stories.svelte

@@ -1,27 +1,27 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import ButtonCmp from './button.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Button',
-		argTypes: {
-			variant: {
-				control: 'select',
-				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
-				description: 'Button variant style',
-				table: {
-					defaultValue: { summary: 'primary' }
-				}
-			}
-		}
-	});
-</script>
-
-<script lang="ts">
-</script>
-
-<Story name="Button">
-	{#snippet template(args)}
-		<ButtonCmp {...args}>Click me</ButtonCmp>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ButtonCmp from './button.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Button',
+		argTypes: {
+			variant: {
+				control: 'select',
+				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
+				description: 'Button variant style',
+				table: {
+					defaultValue: { summary: 'primary' }
+				}
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="Button">
+	{#snippet template(args)}
+		<ButtonCmp {...args}>Click me</ButtonCmp>
+	{/snippet}
+</Story>

package/dist/components/calendar/calendar-day.svelte

@@ -1,96 +1,101 @@
-<script lang="ts">
-	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
-	import { CalendarBond } from './bond.svelte';
-	import type { CalendarDayProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	const calendarBond = CalendarBond.get();
-
-	const selectedDateStart = $derived(calendarBond?.state.props.start);
-	const selectedDateEnd = $derived(calendarBond?.state.props.end);
-	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
-
-	let {
-		class: klass = '',
-		preset = 'calendar.day',
-		day,
-		as = 'button',
-		children = undefined,
-		onclick = handleClick,
-		...restProps
-	}: CalendarDayProps = $props();
-
-	const dayProps = $derived({
-		...calendarBond?.day(day),
-		...restProps
-	});
-
-	const isSelected = $derived.by(() => {
-		if (selectedDateEnd && selectedDateStart) {
-			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
-		}
-
-		return selectedDateStart && isSameDay(day.date, selectedDateStart);
-	});
-
-	function handleClick() {
-		if (isRange) {
-			const start = calendarBond?.state.props.start;
-			if (!start) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			if (isBefore(new Date(day.date), new Date(start))) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			calendarBond?.state.selectEnd(new Date(day.date));
-		} else {
-			calendarBond?.state.selectStart(new Date(day.date));
-		}
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{preset}
-	class={[
-		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
-		day.offmonth && 'text-muted-foreground bg-muted/30',
-		day.weekend && 'bg-muted/50',
-		isSelected &&
-			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
-		isSelected && day.offmonth && 'bg-primary/70',
-		day.today && !isSelected && 'border-primary border-2 font-semibold',
-		day.disabled && 'pointer-events-none opacity-50',
-		klass
-	]}
-	data-disabled={day.disabled}
-	data-prec={day.fromPreviousMonth}
-	data-next={day.fromNextMonth}
-	data-offmonth={day.offmonth}
-	data-weekend={day.weekend}
-	data-today={day.today}
-	data-selected={isSelected}
-	{onclick}
-	{...dayProps}
->
-	{#if children}
-		{@render children({
-			calendar: calendarBond!
-		})}
-	{:else}
-		<span class="value">{day.dayOfMonth}</span>
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.calendar-day):nth-child(7n + 1) {
-		border-left: none;
-	}
-	:global(.calendar-day):nth-last-child(-n + 7) {
-		border-bottom: none;
-	}
-</style>
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { CalendarBond } from './bond.svelte';
+	import type { CalendarDayProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const selectedDateStart = $derived(calendarBond?.state.props.start);
+	const selectedDateEnd = $derived(calendarBond?.state.props.end);
+	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
+
+	let {
+		class: klass = '',
+		preset = 'calendar.day',
+		day,
+		as = 'button',
+		children = undefined,
+		onclick = handleClick,
+		...restProps
+	}: CalendarDayProps = $props();
+
+	const dayProps = $derived({
+		...calendarBond?.day(day),
+		...restProps
+	});
+
+	const isSelected = $derived.by(() => {
+		if (selectedDateEnd && selectedDateStart) {
+			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
+		}
+
+		return selectedDateStart && isSameDay(day.date, selectedDateStart);
+	});
+
+	function handleClick() {
+		if (day.disabled) return;
+
+		if (isRange) {
+			const start = calendarBond?.state.props.start;
+			if (!start) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			if (isBefore(new Date(day.date), new Date(start))) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			calendarBond?.state.selectEnd(new Date(day.date));
+		} else {
+			calendarBond?.state.selectStart(new Date(day.date));
+		}
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={[
+		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
+		day.offmonth && !day.disabled && 'text-muted-foreground/50 bg-muted/50',
+		day.weekend && 'bg-accent',
+		isSelected &&
+			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+		isSelected && day.offmonth && 'bg-primary/70',
+		day.today &&
+			!day.disabled &&
+			!isSelected &&
+			'border-primary bg-primary/5 border-2 font-semibold',
+		day.disabled && 'pointer-events-none opacity-25',
+		klass
+	]}
+	data-disabled={day.disabled}
+	data-prec={day.fromPreviousMonth}
+	data-next={day.fromNextMonth}
+	data-offmonth={day.offmonth}
+	data-weekend={day.weekend}
+	data-today={day.today}
+	data-selected={isSelected}
+	{onclick}
+	{...dayProps}
+>
+	{#if children}
+		{@render children({
+			calendar: calendarBond!
+		})}
+	{:else}
+		<span class="value">{day.dayOfMonth}</span>
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.calendar-day):nth-child(7n + 1) {
+		border-left: none;
+	}
+	:global(.calendar-day):nth-last-child(-n + 7) {
+		border-bottom: none;
+	}
+</style>

package/dist/components/calendar/calendar.stories.svelte

@@ -1,26 +1,26 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Calendar as CalendarModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Calendar'
-	});
-</script>
-
-<script>
-</script>
-
-<Story name="Calendar">
-	{#snippet children({ args })}
-		<div class="flex h-fit items-center justify-center">
-			<CalendarModule.Root>
-				<CalendarModule.Header></CalendarModule.Header>
-				<CalendarModule.Body>
-					{#snippet children({ day })}
-						<CalendarModule.Day {day}></CalendarModule.Day>
-					{/snippet}
-				</CalendarModule.Body>
-			</CalendarModule.Root>
-		</div>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Calendar as CalendarModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Calendar'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Calendar">
+	{#snippet children({ args })}
+		<div class="flex h-fit items-center justify-center">
+			<CalendarModule.Root>
+				<CalendarModule.Header></CalendarModule.Header>
+				<CalendarModule.Body>
+					{#snippet children({ day })}
+						<CalendarModule.Day {day}></CalendarModule.Day>
+					{/snippet}
+				</CalendarModule.Body>
+			</CalendarModule.Root>
+		</div>
+	{/snippet}
+</Story>

package/dist/components/card/card-body.svelte

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	export type { CardContentProps } from './types';
-	import { CardBond } from './bond.svelte';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardContentProps<E, B> = $props();
-
-	const contentProps = $derived({
-		...bond?.content(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="card.content"
-	class={['card-content border-border px-4 pb-4', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...contentProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	export type { CardContentProps } from './types';
+	import { CardBond } from './bond.svelte';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardContentProps<E, B> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="card.content"
+	class={['card-content border-border px-4 pb-4', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...contentProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/card/card-footer.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../atom';
-	import { CardBond } from './bond.svelte';
-	export type { CardFooterProps } from './types';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardFooterProps<E, B> = $props();
-
-	const footerProps = $derived({
-		...bond?.footer(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.footer"
-	class={['card-footer border-border flex items-center gap-2 px-4 pb-4', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...footerProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { CardBond } from './bond.svelte';
+	export type { CardFooterProps } from './types';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardFooterProps<E, B> = $props();
+
+	const footerProps = $derived({
+		...bond?.footer(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.footer"
+	class={['card-footer border-border flex items-center gap-2 px-4 pb-4', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...footerProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/card/card-root.svelte

@@ -1,91 +1,91 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineState } from '../../utils';
-	import { defineProperty } from '../../utils/state';
-	import { HtmlAtom, type Base } from '../atom';
-	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
-	import type { CardRootProps } from './types';
-	import './card.css';
-
-	let {
-		class: klass = '',
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		onclick = undefined,
-		onkeydown = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardRootProps<E, B> = $props();
-
-	const bondProps = defineState<CardBondProps>(
-		[
-			defineProperty(
-				'disabled',
-				() => disabled,
-				(v) => {
-					disabled = v;
-				}
-			)
-		],
-		() => ({})
-	);
-	const bond = _factory(bondProps).share();
-
-	// Disabled styles
-	const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : '';
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new CardBondState(() => props);
-		return new CardBond(bondState);
-	}
-
-	function handleClick(event: MouseEvent) {
-		if (disabled) return;
-		onclick?.(event);
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (disabled) return;
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			onclick?.(event as unknown as MouseEvent);
-		}
-		onkeydown?.(event);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	preset="card"
-	class={[
-		'card bg-card border-border flex flex-col overflow-clip rounded-lg border shadow-sm',
-		disabledStyles,
-		'$preset',
-		klass
-	]}
-	{bond}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	{...rootProps}
->
-	{@render children?.({ card: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineState } from '../../utils';
+	import { defineProperty } from '../../utils/state';
+	import { HtmlAtom, type Base } from '../atom';
+	import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
+	import type { CardRootProps } from './types';
+	import './card.css';
+
+	let {
+		class: klass = '',
+		disabled = false,
+		factory = _factory,
+		children = undefined,
+		onclick = undefined,
+		onkeydown = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardRootProps<E, B> = $props();
+
+	const bondProps = defineState<CardBondProps>(
+		[
+			defineProperty(
+				'disabled',
+				() => disabled,
+				(v) => {
+					disabled = v;
+				}
+			)
+		],
+		() => ({})
+	);
+	const bond = _factory(bondProps).share();
+
+	// Disabled styles
+	const disabledStyles = disabled ? 'opacity-50 cursor-not-allowed' : '';
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new CardBondState(() => props);
+		return new CardBond(bondState);
+	}
+
+	function handleClick(event: MouseEvent) {
+		if (disabled) return;
+		onclick?.(event);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			onclick?.(event as unknown as MouseEvent);
+		}
+		onkeydown?.(event);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	preset="card"
+	class={[
+		'card bg-card border-border flex flex-col overflow-clip rounded-lg border shadow-sm',
+		disabledStyles,
+		'$preset',
+		klass
+	]}
+	{bond}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rootProps}
+>
+	{@render children?.({ card: bond })}
+</HtmlAtom>