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

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

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { cn, defineProperty, defineState } from '../../utils';
+	import { addMonths, format, isToday, startOfDay, subMonths } from 'date-fns';
+	import type { CalendarRange, CalendarRootProps, Day, Month } from './types';
+	import { CalendarBond, CalendarBondState, type CalendarBondProps } from './bond.svelte';
+	import { HtmlAtom } from '../atom';
+
+	import './calendar.css';
+
+	let {
+		class: klass = '',
+		preset = 'calendar',
+		value = $bindable(),
+		range = $bindable([undefined, undefined]),
+		pivote = $bindable(new Date()),
+		start = $bindable(startOfDay(new Date())),
+		end = $bindable(),
+		min = undefined,
+		max = undefined,
+		type = 'single',
+		extend = {},
+		onchange = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: CalendarRootProps = $props();
+
+	const monthCurrentDays = $derived(generator(pivote));
+
+	$inspect(min, max, monthCurrentDays);
+
+	const monthCurrent: Month = $derived.by(() => {
+		const start = monthCurrentDays.at(0) as Day;
+		const end = monthCurrentDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthCurrentDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	const monthPreviousDays = $derived(generator(subMonths(pivote, 1)));
+	const monthPrevious: Month = $derived.by(() => {
+		const start = monthPreviousDays.at(0) as Day;
+		const end = monthPreviousDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthPreviousDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	const monthNextDays = $derived(generator(addMonths(pivote, 1)));
+
+	const monthNext: Month = $derived.by(() => {
+		const start = monthNextDays.at(0) as Day;
+		const end = monthNextDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthNextDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	function generator(pivot: Date): Day[] {
+		const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+		const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+		const sample = startOfDay(
+			new Date(pivot.getFullYear(), pivot.getMonth() - 1, lastMonthDaysCount - firstDay)
+		);
+
+		const array: Day[] = [];
+
+		for (let index = 0; index < 42; index++) {
+			sample.setDate(sample.getDate() + 1);
+
+			const prec =
+				pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+			const next =
+				(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+				(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+			const disabled =
+				(min ? sample < startOfDay(min) : false) || (max ? sample > startOfDay(max) : false);
+
+			array.push({
+				id: sample.getTime(),
+				date: new Date(sample),
+				get offmonth() {
+					return next || prec;
+				},
+				dayOfMonth: sample.getDate(),
+				today: isToday(sample),
+				week: Math.floor(index / 7),
+				month: sample.getMonth(),
+				disabled: disabled,
+				weekend: sample.getDay() == 0,
+				name: format(sample, 'iii'),
+				fullname: format(sample, 'iiiii'),
+				get fromNextMonth() {
+					return next;
+				},
+				get fromPreviousMonth() {
+					return prec;
+				}
+			});
+		}
+
+		return array;
+	}
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	const bondProps = defineState<CalendarBondProps>(
+		[
+			defineProperty(
+				'range',
+				() => range,
+				(v: CalendarRange) => {
+					range = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'value',
+				() => range?.[0],
+				(v) => {
+					if (range?.[0]) {
+						range[0] = v;
+					}
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'pivote',
+				() => pivote,
+				(v: Date) => {
+					pivote = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'start',
+				() => range?.[0],
+				(v: Date) => {
+					range[0] = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'end',
+				() => range?.[1],
+				(v: Date | undefined) => {
+					range[1] = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'min',
+				() => min,
+				(v: Date | undefined) => (min = v)
+			),
+			defineProperty(
+				'max',
+				() => max,
+				(v: Date | undefined) => (max = v)
+			),
+			defineProperty('type', () => type ?? 'single'),
+			defineProperty('nextMonth', () => monthNext),
+			defineProperty('currentMonth', () => monthCurrent),
+			defineProperty('previousMonth', () => monthPrevious)
+		],
+		() => ({ extend })
+	);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const popoverState = new CalendarBondState(() => props);
+		const popoverBond = new CalendarBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom {preset} class={cn('h-full w-full', klass)} data-atom="calendar-root" {...rootProps}>
+	{@render children?.({ calendar: bond })}
+</HtmlAtom>

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

@@ -0,0 +1,8 @@
+import type { CalendarRootProps } from './types';
+import { CalendarBond, CalendarBondState, type CalendarBondProps } from './bond.svelte';
+import './calendar.css';
+declare const CalendarRoot: import("svelte").Component<CalendarRootProps, {
+    getBond: () => CalendarBond<CalendarBondProps, CalendarBondState<CalendarBondProps>>;
+}, "value" | "end" | "range" | "start" | "pivote">;
+type CalendarRoot = ReturnType<typeof CalendarRoot>;
+export default CalendarRoot;

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+
+	const calendarBond = CalendarBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'calendar.weekday',
+		isWeekend,
+		element = $bindable(undefined),
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const weekDayProps = $derived({
+		...calendarBond?.weekDay(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-week-day h-fit px-2 py-2 text-center text-sm font-medium',
+		isWeekend ? 'text-primary' : '',
+		klass
+	)}
+	data-weekend={isWeekend}
+	{...weekDayProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

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

package/dist/components/calendar/calendar.css

@@ -0,0 +1,26 @@
+[data-atom='calendar-root'] {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	grid-template-rows: auto 1fr;
+	/* 
+		--icare-root-background-color: color-mix(in srgb, black 5%, white 100%);
+		--icare-root-background-color-hover: color-mix(in srgb, black 5%, white 100%);
+		--icare-root-background-color-active: color-mix(in srgb, black 5%, white 100%);
+
+		--icare-root-text-color: black;
+
+		--icare-disabled-background-color: black;
+		--icare-disabled-text-color: black;
+
+		--icare-selected-background-color: black;
+		--icare-selected-text-color: white;
+
+		--icare-today-background-color: black;
+		--icare-today-text-color: black;
+
+		--icare-weekend-background-color: black;
+		--icare-weekend-text-color: black;
+
+		--icare-offmonth-background-color: black;
+		--icare-offmonth-text-color: black; */
+}

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,13 +1,7 @@
-<script module lang="ts">
-	export type CardContentProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <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';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
 
 	const bond = CardBond.get();
 

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

@@ -1,8 +1,9 @@
-export type CardContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardContentProps<E, B>;
-    exports: {};
+    exports: {
+        CardContentProps: typeof CardContentProps;
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -12,7 +13,9 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        CardContentProps: typeof CardContentProps;
+    };
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {

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

@@ -1,15 +1,8 @@
-<script module lang="ts">
-	export type CardDescriptionProps<
-		E extends keyof HTMLElementTagNameMap = 'p',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+<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';
 
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
 	const bond = CardBond.get();
 
 	let {

package/dist/components/card/card-description.svelte.d.ts

@@ -1,13 +1,13 @@
-export type CardDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
-declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
+import { type Base } from '../atom';
+import type { CardDescriptionProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardDescriptionProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> {
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', B e
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<E, B>['exports']>;
-    <E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const CardDescription: $$IsomorphicComponent;
-type CardDescription<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = InstanceType<typeof CardDescription<E, B>>;
+type CardDescription<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardDescription<E, B>>;
 export default CardDescription;

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

@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardFooterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	export type { CardFooterProps } from './types';
 
 	const bond = CardBond.get();
 

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

@@ -1,8 +1,9 @@
-export type CardFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardFooterProps<E, B>;
-    exports: {};
+    exports: {
+        CardFooterProps: typeof CardFooterProps;
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -12,7 +13,9 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        CardFooterProps: typeof CardFooterProps;
+    };
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {

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

@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	export type { CardHeaderProps } from './types';
 
 	const bond = CardBond.get();
 

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

@@ -1,8 +1,9 @@
-export type CardHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardHeaderProps<E, B>;
-    exports: {};
+    exports: {
+        CardHeaderProps: typeof CardHeaderProps;
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -12,7 +13,9 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        CardHeaderProps: typeof CardHeaderProps;
+    };
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {

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

@@ -1,14 +1,7 @@
-<script module lang="ts">
-	export type CardMediaProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
 	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	export type { CardMediaProps } from './types';
 
 	const bond = CardBond.get();
 

package/dist/components/card/card-media.svelte.d.ts

@@ -1,8 +1,9 @@
-export type CardMediaProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardMediaProps<E, B>;
-    exports: {};
+    exports: {
+        CardMediaProps: typeof CardMediaProps;
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -12,7 +13,9 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        CardMediaProps: typeof CardMediaProps;
+    };
 }
 interface $$IsomorphicComponent {
     new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {