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

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

@@ -1,57 +1,60 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import ButtonCmp from './button.svelte';
-	import { defineVariants } from '../../utils/variant';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Button'
-	});
-</script>
-
-<script lang="ts">
-	const variants = defineVariants((bond) => ({
-		variants: {
-			variant: {
-				primary: {
-					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
-				},
-				secondary: {
-					class:
-						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
-				},
-				destructive: {
-					class:
-						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
-				},
-				outline: {
-					class:
-						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
-				},
-				ghost: {
-					class: 'hover:bg-accent hover:text-accent-foreground'
-				}
-			}
-		},
-		compounds: [],
-		defaults: {
-			variant: 'destructive'
-		}
-	}));
-</script>
-
-<Story name="Button">
-	<Root class="p-4">
-		{#snippet children({ args })}
-			<ButtonCmp variant="primary">Clicke me</ButtonCmp>
-		{/snippet}
-	</Root>
-</Story>
-
-<Story name="Button - Local Variants">
-	<Root class="p-4">
-		{#snippet children({ args })}
-			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import ButtonCmp from './button.svelte';
+	import { defineVariants } from '../../utils/variant';
+
+	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">
+	const variants = defineVariants((bond) => ({
+		variants: {
+			variant: {
+				primary: {
+					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
+				},
+				secondary: {
+					class:
+						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
+				},
+				destructive: {
+					class:
+						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
+				},
+				outline: {
+					class:
+						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
+				},
+				ghost: {
+					class:
+						'bg-transparent text-foreground hover:bg-foreground/5 active:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+				}
+			}
+		},
+		compounds: [],
+		defaults: {
+			variant: 'destructive'
+		}
+	}));
+</script>
+
+<Story name="Button">
+	{#snippet template(args)}
+		<Root class="p-4">
+			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
+		</Root>
+	{/snippet}
+</Story>

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

@@ -1 +1,2 @@
 export { default as Button } from './button.svelte';
+export * from './types';

package/dist/components/button/index.js

@@ -1 +1,2 @@
 export { default as Button } from './button.svelte';
+export * from './types';

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

@@ -1,6 +1,11 @@
 import type { HtmlAtomProps } from '../atom/types';
 import type { Snippet } from 'svelte';
-export type ButtonProps = HtmlAtomProps<'button'> & {
+/**
+ * Extend this interface to add custom button properties in your application.
+ */
+export interface ButtonExtendProps {
+}
+export interface ButtonProps extends HtmlAtomProps<'button'>, ButtonExtendProps {
     type?: 'button' | 'submit' | 'reset';
     children?: Snippet<[]>;
-};
+}

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

@@ -0,0 +1,5 @@
+export { default as Root } from './calendar-root.svelte';
+export { default as Body } from './calendar-body.svelte';
+export { default as Day } from './calendar-day.svelte';
+export { default as Header } from './calendar-header.svelte';
+export { default as WeekDay } from './calendar-week-day.svelte';

package/dist/components/calendar/atoms.js

@@ -0,0 +1,5 @@
+export { default as Root } from './calendar-root.svelte';
+export { default as Body } from './calendar-body.svelte';
+export { default as Day } from './calendar-day.svelte';
+export { default as Header } from './calendar-header.svelte';
+export { default as WeekDay } from './calendar-week-day.svelte';

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

@@ -0,0 +1,72 @@
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import type { CalendarRange, Day, Month } from './types';
+export type CalendarBondProps = BondStateProps & {
+    value?: Date;
+    range: CalendarRange;
+    start?: Date;
+    end?: Date;
+    min?: Date;
+    max?: Date;
+    pivote?: Date;
+    disabled?: boolean;
+    type?: 'range' | 'single';
+    currentMonth?: Month;
+    previousMonth?: Month;
+    nextMonth?: Month;
+    extend?: Record<string, unknown>;
+};
+export type CalendarBondElements = {
+    root: HTMLElement;
+    body: HTMLElement;
+    day: HTMLElement;
+    weekDay: HTMLElement;
+    header: HTMLElement;
+};
+export declare class CalendarBond<Props extends CalendarBondProps = CalendarBondProps, State extends CalendarBondState<Props> = CalendarBondState<Props>> extends Bond<Props, State, CalendarBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: State);
+    share(): this;
+    root(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        id: string;
+        'aria-label': string;
+        'aria-disabled': boolean;
+        role: string;
+    };
+    body(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        id: string;
+        role: string;
+        'aria-labelledby': string;
+    };
+    day(day: Day): {
+        id: string;
+        role: string;
+        'aria-selected': boolean;
+        'aria-disabled': boolean;
+        tabindex: number;
+    };
+    weekDay(): {
+        id: string;
+        role: string;
+    };
+    header(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        id: string;
+        role: string;
+    };
+    static get(): CalendarBond | undefined;
+    static set(bond: CalendarBond): CalendarBond;
+}
+export declare class CalendarBondState<Props extends CalendarBondProps> extends BondState<Props> {
+    constructor(props: () => Props);
+    selectDate(date: Date): void;
+    selectStart(date: Date): void;
+    selectEnd(date: Date): void;
+    unselect(): void;
+    unselectStart(): void;
+    unselectEnd(): void;
+    nextMonth(): void;
+    previousMonth(): void;
+    isDaySelected(day: Day): boolean;
+}

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

@@ -0,0 +1,132 @@
+import { Bond, BondState } from '../../shared/bond.svelte';
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+export class CalendarBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/calendar';
+    constructor(s) {
+        super(s);
+    }
+    share() {
+        return CalendarBond.set(this);
+    }
+    root() {
+        return {
+            id: `calendar-root-${this.id}`,
+            'aria-label': 'Calendar',
+            'aria-disabled': this.state.props.disabled ?? false,
+            role: 'application',
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    body() {
+        return {
+            id: `calendar-month-${this.id}`,
+            role: 'grid',
+            'aria-labelledby': `calendar-month-label-${this.id}`,
+            [createAttachmentKey()]: (node) => {
+                this.elements.body = node;
+            }
+        };
+    }
+    day(day) {
+        return {
+            id: `calendar-day-${this.id}-${day.id}`,
+            role: 'gridcell',
+            'aria-selected': this.state.isDaySelected(day),
+            'aria-disabled': day.disabled,
+            tabindex: day.disabled ? -1 : 0
+        };
+    }
+    weekDay() {
+        return {
+            id: `calendar-weekday-${this.id}`,
+            role: 'columnheader'
+        };
+    }
+    header() {
+        return {
+            id: `calendar-weekdays-${this.id}`,
+            role: 'row',
+            [createAttachmentKey()]: (node) => {
+                this.elements.header = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(this.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(this.CONTEXT_KEY, bond);
+    }
+}
+export class CalendarBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+    selectDate(date) {
+        // if (this.props.range) {
+        // } else {
+        // 	this.props.value = date;
+        // }
+        if (!this.props.start) {
+            this.props.range[0] = date;
+        }
+        else if (!this.props.end) {
+            this.props.range[1] = date;
+        }
+        else {
+            this.props.range[0] = date;
+            this.props.range[1] = undefined;
+        }
+        this.props.range = [...this.props.range];
+    }
+    selectStart(date) {
+        this.props.range[0] = date;
+        this.props.range = [...this.props.range];
+    }
+    selectEnd(date) {
+        this.props.range[1] = date;
+        this.props.range = [...this.props.range];
+    }
+    unselect() {
+        this.props.range = [undefined, undefined];
+        this.props.range = [...this.props.range];
+    }
+    unselectStart() {
+        this.props.range[0] = undefined;
+        this.props.range = [...this.props.range];
+    }
+    unselectEnd() {
+        this.props.range[1] = undefined;
+        this.props.range = [...this.props.range];
+    }
+    nextMonth() {
+        if (this.props.pivote) {
+            const current = this.props.pivote;
+            this.props.pivote = new Date(current.getFullYear(), current.getMonth() + 1, 1);
+        }
+    }
+    previousMonth() {
+        if (this.props.pivote) {
+            const current = this.props.pivote;
+            this.props.pivote = new Date(current.getFullYear(), current.getMonth() - 1, 1);
+        }
+    }
+    isDaySelected(day) {
+        if (this.props.range) {
+            const start = this.props.range[0];
+            const end = this.props.range[1];
+            if (!start)
+                return false;
+            const dayTime = day.date.getTime();
+            const startTime = start.getTime();
+            if (!end)
+                return dayTime === startTime;
+            const endTime = end.getTime();
+            return dayTime >= startTime && dayTime <= endTime;
+        }
+        return this.props.value?.getTime() === day.date.getTime();
+    }
+}

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { backInOut } from 'svelte/easing';
+	import CalendarDay from './calendar-day.svelte';
+	import { CalendarBond } from './bond.svelte';
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let {
+		class: klass = '',
+		weekday,
+		preset = 'calendar.body',
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const bodyProps = $derived({
+		...calendarBond?.body(),
+		...restProps
+	});
+
+	// const generator = function (pivot: Date, start: Date, end?: Date) {
+	// 	const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+	// 	const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+	// 	const sample = new Date(
+	// 		pivot.getFullYear(),
+	// 		pivot.getMonth() - 1,
+	// 		lastMonthDaysCount - firstDay
+	// 	);
+
+	// 	const array = [];
+	// 	let next = false,
+	// 		prec = false;
+
+	// 	for (let index = 0; index < 42; index++) {
+	// 		sample.setDate(sample.getDate() + 1);
+
+	// 		prec = pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+	// 		next =
+	// 			(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+	// 			(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+	// 		array.push({
+	// 			id: sample.getTime(),
+	// 			date: sample.getDate(),
+	// 			offmonth: next || prec,
+	// 			next,
+	// 			prec,
+	// 			today: isToday(sample),
+	// 			week: Math.floor(index / 7),
+	// 			month: sample.getMonth(),
+	// 			disabled: false,
+	// 			weekend: sample.getDay() == 0,
+	// 			name: format(sample, 'iiiii'),
+	// 			selected: start?.getTime() === sample.getTime()
+	// 		});
+	// 	}
+
+	// 	return array;
+	// };
+
+	// const days = $derived(
+	// 	generator(
+	// 		context_calendar.derived.data.pivote,
+	// 		context_calendar.derived.data.start ?? new Date(),
+	// 		context_calendar.derived.data.end
+	// 	)
+	// );
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	function scle(node: HTMLElement, { delay = 0, duration = 400, easing = backInOut }) {
+		return {
+			delay,
+			duration,
+			easing,
+			css: (_, u) => {
+				return `transform: scale(${u})`;
+			}
+		};
+	}
+</script>
+
+<HtmlAtom
+	class={cn('col-span-full grid h-full w-full grid-cols-subgrid', klass)}
+	{preset}
+	{...bodyProps}
+>
+	{#each currentMonth?.days ?? [] as day (day.id)}
+		{#if children}
+			{@render children?.({ day })}
+		{:else}
+			<CalendarDay
+				{day}
+				onclick={() => {
+					console.log('day clicked', day.date);
+					calendarBond?.state.selectStart(new Date(day.date));
+				}}
+			/>
+		{/if}
+	{/each}
+</HtmlAtom>

package/dist/components/calendar/calendar-body.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const CalendarBody: import("svelte").Component<{
+    class?: string;
+    weekday: any;
+    preset?: string;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type CalendarBody = ReturnType<typeof CalendarBody>;
+export default CalendarBody;

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { cn } from '../../utils';
+	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>

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

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

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+	import CalendarWeekDay from './calendar-week-day.svelte';
+
+	const calendarBond = CalendarBond.get();
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let { class: klass = '', preset = 'calendar.header', children, ...restProps } = $props();
+
+	const headerProps = $derived({
+		...calendarBond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-header border-border col-span-full grid h-fit grid-cols-subgrid border-b',
+		klass
+	)}
+	{...headerProps}
+>
+	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
+		{#if children}
+			{@render children?.(day)}
+		{:else}
+			<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
+		{/if}
+	{/each}
+</HtmlAtom>

package/dist/components/calendar/calendar-header.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const CalendarHeader: import("svelte").Component<{
+    class?: string;
+    preset?: string;
+    children: any;
+} & Record<string, any>, {}, "">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;