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

package/dist/components/datagrid/datagrid.css

@@ -3,45 +3,3 @@
 	grid-auto-flow: row;
 	grid-template-columns: var(--template-columns, auto);
 }
-
-.cas-[data-screen='sm'] {
-	@media (max-width: var(--screens-sm)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='md'] {
-	@media (max-width: var(--screens-md)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='sd'] {
-	@media (max-width: var(--screens-sd)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='lg'] {
-	@media (max-width: var(--screens-lg)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='xl'] {
-	@media (max-width: var(--screens-xl)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='2xl'] {
-	@media (max-width: var(--screens-2xl)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='3xl'] {
-	@media (max-width: var(--screens-3xl)) {
-		display: none;
-	}
-}

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,75 +1,72 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	<Root>
-		{#snippet children({ args })}
-			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-				<DataGridCmp.Header>
-					<DataGridCmp.Tr header>
-						<DataGridCmp.Th width="auto">
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Th>
-						<DataGridCmp.Th
-							class="resize-x overflow-x-auto"
-							width="auto"
-							hidden={datagridContainer.current?.width
-								? datagridContainer.current.width < 1024
-								: false}>ID</DataGridCmp.Th
-						>
-						<DataGridCmp.Th>Name</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-					</DataGridCmp.Tr>
-				</DataGridCmp.Header>
-
-				<DataGridCmp.Body>
-					{#each { length: 10 } as _, i (i)}
-						<DataGridCmp.Tr>
-							<DataGridCmp.Td>
-								<DataGridCmp.Checkbox />
-							</DataGridCmp.Td>
-
-							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-									<Icon src={MoreVerticalIcon} />
-								</Dropdown.Trigger>
-								<Dropdown.List>
-									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-									<Dropdown.Item value="en">English</Dropdown.Item>
-									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-								</Dropdown.List>
-							</DataGridCmp.Td>
-						</DataGridCmp.Tr>
-					{/each}
-				</DataGridCmp.Body>
-
-				<DataGridCmp.Footer></DataGridCmp.Footer>
-			</DataGridCmp.Root>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { DataGrid as DataGridCmp } from '.';
+	import { Dropdown } from '../dropdown';
+	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
+	import { Icon } from '../icon';
+	import { container } from '../../runes/container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/DataGrid'
+	});
+</script>
+
+<script>
+	let values = $state([]);
+
+	const datagridContainer = container();
+</script>
+
+<Story name="DataGrid">
+	{#snippet children({ args })}
+		<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
+			<DataGridCmp.Header>
+				<DataGridCmp.Tr header>
+					<DataGridCmp.Th width="auto">
+						<DataGridCmp.Checkbox />
+					</DataGridCmp.Th>
+					<DataGridCmp.Th
+						class="resize-x overflow-x-auto"
+						width="auto"
+						hidden={datagridContainer.current?.width
+							? datagridContainer.current.width < 1024
+							: false}>ID</DataGridCmp.Th
+					>
+					<DataGridCmp.Th>Name</DataGridCmp.Th>
+					<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
+					<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
+					<DataGridCmp.Th width="auto"></DataGridCmp.Th>
+				</DataGridCmp.Tr>
+			</DataGridCmp.Header>
+
+			<DataGridCmp.Body>
+				{#each { length: 10 } as _, i (i)}
+					<DataGridCmp.Tr>
+						<DataGridCmp.Td>
+							<DataGridCmp.Checkbox />
+						</DataGridCmp.Td>
+
+						<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
+						<DataGridCmp.Td>John Doe</DataGridCmp.Td>
+						<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
+						<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
+
+						<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
+							<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
+								<Icon src={MoreVerticalIcon} />
+							</Dropdown.Trigger>
+							<Dropdown.List>
+								<Dropdown.Item value="ar">Arabic</Dropdown.Item>
+								<Dropdown.Item value="en">English</Dropdown.Item>
+								<Dropdown.Item value="sp">Spanish</Dropdown.Item>
+								<Dropdown.Item value="fr">Frensh</Dropdown.Item>
+							</Dropdown.List>
+						</DataGridCmp.Td>
+					</DataGridCmp.Tr>
+				{/each}
+			</DataGridCmp.Body>
+
+			<DataGridCmp.Footer></DataGridCmp.Footer>
+		</DataGridCmp.Root>
+	{/snippet}
+</Story>

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

@@ -77,8 +77,8 @@ export interface Column {
 export interface DatagridRootProps<T> extends DatagridRootExtendProps {
     class?: string;
     template?: string;
+    fallbackTemplate?: string;
     values?: string[];
-    data?: T[];
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext<T>;

package/dist/components/date-picker/atoms.d.ts

@@ -1,7 +1,3 @@
 export { Arrow, Indicator, Trigger } from '../popover/atoms';
-export { Body, Day, Header as WeekDays, WeekDay } from '../calendar/atoms';
 export { default as Root } from './date-picker-root.svelte';
 export { default as Calendar } from './date-picker-calendar.svelte';
-export { default as Header } from './date-picker-header.svelte';
-export { default as Years } from './date-picker-years.svelte';
-export { default as Months } from './date-picker-months.svelte';

package/dist/components/date-picker/atoms.js

@@ -1,7 +1,3 @@
 export { Arrow, Indicator, Trigger } from '../popover/atoms';
-export { Body, Day, Header as WeekDays, WeekDay } from '../calendar/atoms';
 export { default as Root } from './date-picker-root.svelte';
 export { default as Calendar } from './date-picker-calendar.svelte';
-export { default as Header } from './date-picker-header.svelte';
-export { default as Years } from './date-picker-years.svelte';
-export { default as Months } from './date-picker-months.svelte';

package/dist/components/date-picker/date-picker-calendar.svelte

@@ -1,42 +1,67 @@
-<script lang="ts">
-	import { Content } from '../popover/atoms';
-	import { Root } from '../calendar/atoms';
-	import { DatePickerBond } from './bond.svelte';
-
-	const datePickerBond = DatePickerBond.get();
-	const datePickerBondProps = $derived(datePickerBond?.state.props);
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.calendar',
-		children: datePickerChildren,
-		...restProps
-	} = $props();
-
-	const calendarProps = $derived({
-		...datePickerBond?.content(),
-		...datePickerBondProps,
-		...restProps
-	});
-
-	function handleChange(ev: CustomEvent, { range, pivote }) {
-		if (!datePickerBond) return;
-
-		datePickerBond.state.props.range = range;
-		datePickerBond.state.props.pivote = pivote;
-	}
-</script>
-
-<Content
-	class={['relative overflow-hidden p-0', klass]}
-	base={Root}
-	onchange={handleChange}
-	{preset}
-	{...calendarProps}
->
-	{#snippet children({ calendar })}
-		{@render datePickerChildren?.({
-			datePicker: datePickerBond
-		})}
-	{/snippet}
-</Content>
+<script lang="ts">
+	import { Content } from '../popover/atoms';
+	import {
+		Root,
+		Header as CalendarHeader,
+		Body as CalendarBody,
+		Day as CalendarDay
+	} from '../calendar/atoms';
+	import { DatePickerBond } from './bond.svelte';
+	import DatePickerHeader from './date-picker-header.svelte';
+	import DatePickerMonths from './date-picker-months.svelte';
+	import DatePickerYears from './date-picker-years.svelte';
+	import { HtmlAtom } from '../atom';
+	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
+	import type { DatePickerCalendarProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+	const datePickerBondProps = $derived(datePickerBond?.state.props);
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.calendar',
+		children: childrenProp,
+		Header = DatePickerHeader,
+		Weekdays = CalendarHeader,
+		Body = CalendarBody,
+		Day = CalendarDay,
+		Months = DatePickerMonths,
+		Years = DatePickerYears,
+		...restProps
+	}: DatePickerCalendarProps = $props();
+
+	const calendarProps = $derived({
+		...datePickerBond?.content(),
+		...datePickerBondProps,
+		...restProps
+	});
+
+	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
+		if (!datePickerBond) return;
+
+		datePickerBond.state.props.range = range;
+		datePickerBond.state.props.pivote = pivote;
+	}
+</script>
+
+<Content
+	class={['relative overflow-hidden p-0', klass]}
+	base={Root}
+	onchange={handleChange}
+	{preset}
+	{...calendarProps}
+>
+	<HtmlAtom base={Header} class="col-span-full" />
+	<HtmlAtom base={Weekdays} />
+
+	<HtmlAtom base={Body}>
+		{#snippet children({ day }: { day: CalendarDayType })}
+			<HtmlAtom base={Day} {day} class="flex items-center justify-center">
+				<span class="value">{day.dayOfMonth}</span>
+			</HtmlAtom>
+		{/snippet}
+	</HtmlAtom>
+
+	<HtmlAtom base={Months} />
+	<HtmlAtom base={Years} />
+</Content>

package/dist/components/date-picker/date-picker-calendar.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const DatePickerCalendar: import("svelte").Component<{
-    class?: string;
-    preset?: string;
-    children: any;
-} & Record<string, any>, {}, "">;
+import type { DatePickerCalendarProps } from './types';
+declare const DatePickerCalendar: import("svelte").Component<DatePickerCalendarProps, {}, "">;
 type DatePickerCalendar = ReturnType<typeof DatePickerCalendar>;
 export default DatePickerCalendar;

package/dist/components/date-picker/date-picker-header.svelte

@@ -1,105 +1,100 @@
-<script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import { DatePickerBond } from './bond.svelte';
-	import { CalendarBond } from '../calendar/bond.svelte';
-	import { Icon } from '../icon';
-
-	const datePickerBond = DatePickerBond.get();
-	const calendarBond = CalendarBond.get();
-
-	let { class: klass = '', preset = 'datepicker.header', children, ...restProps } = $props();
-
-	const calendarBondProps = $derived(datePickerBond?.state?.props);
-
-	const pivote = $derived(calendarBondProps?.pivote ?? new Date());
-
-	// Format month and year
-	const monthName = $derived(pivote.toLocaleDateString('en-US', { month: 'long' }));
-	const year = $derived(pivote.getFullYear());
-
-	function handlePreviousMonth() {
-		calendarBond?.state?.previousMonth();
-	}
-
-	function handleNextMonth() {
-		calendarBond?.state?.nextMonth();
-	}
-
-	function handleMonthPicker() {
-		if (!datePickerBond) return;
-		datePickerBond.state.openMonthsPicker();
-	}
-</script>
-
-<HtmlAtom
-	as="nav"
-	class={['border-border flex items-center justify-between gap-2 border-b p-2', '$preset', klass]}
-	{preset}
-	{...restProps}
->
-	{#if children}
-		{@render children?.({
-			datePicker: datePickerBond,
-			calendar: calendarBond,
-			monthName,
-			year,
-			onPrevious: handlePreviousMonth,
-			onNext: handleNextMonth
-		})}
-	{:else}
-		<!-- Previous Month Button -->
-		<button
-			type="button"
-			class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-			onclick={handlePreviousMonth}
-			aria-label="Previous month"
-		>
-			<Icon class="size-5">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-full"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="M15 18l-6-6 6-6" />
-				</svg>
-			</Icon>
-		</button>
-
-		<!-- Month and Year Display -->
-		<button
-			class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
-			onclick={handleMonthPicker}
-		>
-			{monthName}
-			{year}
-		</button>
-
-		<!-- Next Month Button -->
-		<button
-			type="button"
-			class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-			onclick={handleNextMonth}
-			aria-label="Next month"
-		>
-			<Icon class="size-5">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-full"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="M9 18l6-6-6-6" />
-				</svg>
-			</Icon>
-		</button>
-	{/if}
-</HtmlAtom>
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { DatePickerBond } from './bond.svelte';
+	import { CalendarBond } from '../calendar/bond.svelte';
+	import { Icon } from '../icon';
+	import type { DatePickerHeaderProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+	const calendarBond = CalendarBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.header',
+		children,
+		...restProps
+	}: DatePickerHeaderProps = $props();
+
+	const calendarBondProps = $derived(datePickerBond?.state?.props);
+
+	const pivote = $derived(calendarBondProps?.pivote ?? new Date());
+
+	// Format month and year
+	const monthName = $derived(pivote.toLocaleDateString('en-US', { month: 'long' }));
+	const year = $derived(pivote.getFullYear());
+
+	function handlePreviousMonth() {
+		calendarBond?.state?.previousMonth();
+	}
+
+	function handleNextMonth() {
+		calendarBond?.state?.nextMonth();
+	}
+
+	function handleMonthPicker() {
+		if (!datePickerBond) return;
+		datePickerBond.state.openMonthsPicker();
+	}
+</script>
+
+<HtmlAtom
+	as="nav"
+	class={['border-border flex items-center justify-between gap-2 border-b p-2', '$preset', klass]}
+	{preset}
+	{...restProps}
+>
+	<!-- Previous Month Button -->
+	<button
+		type="button"
+		class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+		onclick={handlePreviousMonth}
+		aria-label="Previous month"
+	>
+		<Icon class="size-5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-full"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M15 18l-6-6 6-6" />
+			</svg>
+		</Icon>
+	</button>
+
+	<!-- Month and Year Display -->
+	<button
+		class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
+		onclick={handleMonthPicker}
+	>
+		{monthName}
+		{year}
+	</button>
+
+	<!-- Next Month Button -->
+	<button
+		type="button"
+		class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+		onclick={handleNextMonth}
+		aria-label="Next month"
+	>
+		<Icon class="size-5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-full"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M9 18l6-6-6-6" />
+			</svg>
+		</Icon>
+	</button>
+</HtmlAtom>

package/dist/components/date-picker/date-picker-header.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const DatePickerHeader: import("svelte").Component<{
-    class?: string;
-    preset?: string;
-    children: any;
-} & Record<string, any>, {}, "">;
+import type { DatePickerHeaderProps } from './types';
+declare const DatePickerHeader: import("svelte").Component<DatePickerHeaderProps, {}, "">;
 type DatePickerHeader = ReturnType<typeof DatePickerHeader>;
 export default DatePickerHeader;