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

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

@@ -0,0 +1,36 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Calendar as CalendarModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Calendar'
+	});
+</script>
+
+<script>
+	import CalendarHeader from './calendar-header.svelte';
+	import { Root } from '../root';
+	import { Card } from '../card';
+
+	let value = $state(undefined);
+	let checked = $state(false);
+</script>
+
+<Story name="Calendar">
+	{#snippet children({ args })}
+		<Root>
+			{#snippet children({})}
+				<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}
+		</Root>
+	{/snippet}
+</Story>

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

@@ -0,0 +1,6 @@
+export default Calendar;
+type Calendar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Calendar: import("svelte").Component<Record<string, never>, {}, "">;

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

@@ -0,0 +1,4 @@
+export * as Calendar from './atoms';
+export * from './bond.svelte';
+export * from './runes.svelte';
+export * from './types';

package/dist/components/calendar/index.js

@@ -0,0 +1,4 @@
+export * as Calendar from './atoms';
+export * from './bond.svelte';
+export * from './runes.svelte';
+export * from './types';

package/dist/components/calendar/runes.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function today(ms?: number): {
+    readonly current: Date;
+};

package/dist/components/calendar/runes.svelte.js

@@ -0,0 +1,25 @@
+export function today(ms = 1000 * 60) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    let date = $state(new Date());
+    const date_readonly = $derived(date);
+    let timeout_id = undefined;
+    let interval_id = undefined;
+    $effect(() => {
+        timeout_id = setTimeout(() => {
+            interval_id = setInterval(() => {
+                // eslint-disable-next-line svelte/prefer-svelte-reactivity
+                date = new Date();
+            }, ms);
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        }, 1000 - new Date().getMilliseconds());
+        return () => {
+            clearTimeout(timeout_id);
+            clearInterval(interval_id);
+        };
+    });
+    return {
+        get current() {
+            return date_readonly;
+        }
+    };
+}

package/dist/components/calendar/types.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { Factory } from '../../types';
+import type { CalendarBond } from './bond.svelte';
+export type Day = {
+    id: number;
+    date: Date;
+    dayOfMonth: number;
+    offmonth: boolean;
+    today: boolean;
+    week: number;
+    month: number;
+    disabled: boolean;
+    weekend: boolean;
+    name: string;
+    fullname: string;
+    readonly fromNextMonth: boolean;
+    readonly fromPreviousMonth: boolean;
+};
+export type Month = {
+    name: string;
+    fullname: string;
+    start: Date;
+    end: Date | undefined;
+    days: Day[];
+};
+export type CalendarRange = [Date | undefined, Date | undefined];
+export interface CalendarRootProps {
+    class?: string;
+    preset?: string;
+    value?: Date;
+    range?: CalendarRange;
+    start?: Date;
+    end?: Date;
+    min?: Date;
+    max?: Date;
+    pivote?: Date;
+    type?: 'range' | 'single';
+    extend?: Record<string, unknown>;
+    factory?: Factory<CalendarBond>;
+    onchange?: (ev: CustomEvent, params: {
+        range: CalendarRange;
+        pivote: Date;
+    }) => void;
+    children?: Snippet<[
+        {
+            calendar: CalendarBond;
+        }
+    ]>;
+}
+export interface CalendarDayProps {
+    class?: string;
+    preset?: string;
+    day: Day;
+    as?: string;
+    onclick?: () => void;
+    readonly element?: HTMLElement;
+    children?: Snippet<[
+        {
+            calendar: CalendarBond;
+        }
+    ]>;
+}

package/dist/components/calendar/types.js

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

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', '$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', '$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-description.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 type { CardDescriptionProps } from './types';
-	import { CardBond } from './bond.svelte';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.description"
-	class={['card-description border-border text-sm text-gray-500', '$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)}
-	{...descriptionProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { CardDescriptionProps } from './types';
+	import { CardBond } from './bond.svelte';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.description"
+	class={['card-description border-border text-sm text-gray-500', '$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)}
+	{...descriptionProps}
+>
+	{@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 py-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 py-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-header.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 { CardHeaderProps } 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
-	}: CardHeaderProps<E, B> = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.header"
-	class={['card-header border-border flex flex-col space-y-1.5 px-4 py-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)}
-	{...headerProps}
->
-	{@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 { CardHeaderProps } 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
+	}: CardHeaderProps<E, B> = $props();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.header"
+	class={['card-header border-border flex flex-col space-y-1.5 px-4 py-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)}
+	{...headerProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/card/card-media.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 { CardMediaProps } 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
-	}: CardMediaProps<E, B> = $props();
-
-	const mediaProps = $derived({
-		...bond?.media(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.media"
-	class={['card-media border-border overflow-hidden', '$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)}
-	{...mediaProps}
->
-	{@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 { CardMediaProps } 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
+	}: CardMediaProps<E, B> = $props();
+
+	const mediaProps = $derived({
+		...bond?.media(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.media"
+	class={['card-media border-border overflow-hidden', '$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)}
+	{...mediaProps}
+>
+	{@render children?.()}
+</HtmlAtom>