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

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

@@ -1,48 +1,41 @@
-<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 { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	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 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-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,48 +1,41 @@
-<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 { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	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 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>

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']>> & {

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 { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
-	import type { CardRootProps } from './types';
-	import { defineState } from '../../utils';
-	import { defineProperty } from '../../utils/state';
-	import { HtmlAtom, type Base } from '../atom';
-	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 gap-2 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 gap-2 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>

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

@@ -1,6 +1,6 @@
+import { type Base } from '../atom';
 import { CardBond, CardBondState, type CardBondProps } from './bond.svelte';
 import type { CardRootProps } from './types';
-import { type Base } from '../atom';
 import './card.css';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardRootProps<E, B>;

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

@@ -1,48 +1,41 @@
-<script module lang="ts">
-	export type CardSubtitleProps<
-		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">
-	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	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
-	}: CardSubtitleProps<E, B> = $props();
-
-	const subtitleProps = $derived({
-		...bond?.subtitle(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.subtitle"
-	class={['card-subtitle text-sm font-medium text-gray-600', '$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)}
-	{...subtitleProps}
->
-	{@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 { CardSubtitleProps } from './types';
+
+	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
+	}: CardSubtitleProps<E, B> = $props();
+
+	const subtitleProps = $derived({
+		...bond?.subtitle(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.subtitle"
+	class={['card-subtitle border-border text-sm font-medium text-gray-600', '$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)}
+	{...subtitleProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,26 +1,29 @@
-export type CardSubtitleProps<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';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: CardSubtitleProps<E, B>;
-    exports: {};
+    exports: {
+        CardSubtitleProps: typeof CardSubtitleProps;
+    };
     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'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        CardSubtitleProps: typeof CardSubtitleProps;
+    };
 }
 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 CardSubtitle: $$IsomorphicComponent;
-type CardSubtitle<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = InstanceType<typeof CardSubtitle<E, B>>;
+type CardSubtitle<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardSubtitle<E, B>>;
 export default CardSubtitle;

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

@@ -1,48 +1,45 @@
-<script module lang="ts">
-	export type CardTitleProps<
-		E extends keyof HTMLElementTagNameMap = 'h3',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
-	import { CardBond } from './bond.svelte';
-
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		as = 'h3' as E,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: CardTitleProps<E, B> = $props();
-
-	const titleProps = $derived({
-		...bond?.title(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.title"
-	class={['card-title text-lg leading-none font-semibold tracking-tight', '$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)}
-	{...titleProps}
->
-	{@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 { CardTitleProps } from './types';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		as = 'h3' as E,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: CardTitleProps<E, B> = $props();
+
+	const titleProps = $derived({
+		...bond?.title(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.title"
+	class={[
+		'card-title border-border text-lg leading-none font-semibold tracking-tight',
+		'$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)}
+	{...titleProps}
+>
+	{@render children?.()}
+</HtmlAtom>