@svelte-atoms/core 1.0.0-alpha.14

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

@@ -0,0 +1,55 @@
+<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 { toClassValue } from '../../utils';
+	import { CardBond } from './bond.svelte';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	const bond = CardBond.get();
+
+	const preset = getPreset('card.content');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		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
+	{as}
+	{base}
+	class={[
+		'card-content px-4',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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-body.svelte.d.ts

@@ -0,0 +1,26 @@
+export type CardContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: CardContentProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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(): {};
+}
+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']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & 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 CardBody: $$IsomorphicComponent;
+type CardBody<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardBody<E, B>>;
+export default CardBody;

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

@@ -0,0 +1,55 @@
+<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">
+	import { CardBond } from './bond.svelte';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	const bond = CardBond.get();
+
+	const preset = getPreset('card.description');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'p',
+		base = preset?.base as B,
+		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}
+	{base}
+	class={[
+		'card-description text-sm text-gray-500',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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-description.svelte.d.ts

@@ -0,0 +1,26 @@
+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>(): {
+    props: CardDescriptionProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', 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(): {};
+}
+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']>> & {
+        $$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']>;
+    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>>;
+export default CardDescription;

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

@@ -0,0 +1,55 @@
+<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 { CardBond } from './bond.svelte';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	const bond = CardBond.get();
+
+	const preset = getPreset('card.footer');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		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}
+	{base}
+	class={[
+		'card-footer flex items-center gap-2 px-4 py-4',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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-footer.svelte.d.ts

@@ -0,0 +1,26 @@
+export type CardFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: CardFooterProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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(): {};
+}
+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']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & 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 CardFooter: $$IsomorphicComponent;
+type CardFooter<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardFooter<E, B>>;
+export default CardFooter;

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

@@ -0,0 +1,55 @@
+<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 { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	const bond = CardBond.get();
+
+	const preset = getPreset('card.header');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		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}
+	{base}
+	class={[
+		'card-header flex flex-col space-y-1.5 px-4 py-4',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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

@@ -0,0 +1,26 @@
+export type CardHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: CardHeaderProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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(): {};
+}
+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']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & 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 CardHeader: $$IsomorphicComponent;
+type CardHeader<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardHeader<E, B>>;
+export default CardHeader;

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

@@ -0,0 +1,55 @@
+<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 { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	const bond = CardBond.get();
+
+	const preset = getPreset('card.media');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		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}
+	{base}
+	class={[
+		'card-media overflow-hidden',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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

@@ -0,0 +1,26 @@
+export type CardMediaProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: CardMediaProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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(): {};
+}
+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']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & 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 CardMedia: $$IsomorphicComponent;
+type CardMedia<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardMedia<E, B>>;
+export default CardMedia;

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

@@ -0,0 +1,96 @@
+<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, toClassValue } from '../../utils';
+	import { defineProperty } from '../../utils/state';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type Base } from '../atom';
+	import './card.css';
+
+	const preset = getPreset('card');
+
+	let {
+		class: klass = '',
+		disabled = false,
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		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
+	{as}
+	{base}
+	class={[
+		'card bg-card border-border flex flex-col gap-2 overflow-clip rounded-lg border shadow-sm',
+		disabledStyles,
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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)}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	{...rootProps}
+>
+	{@render children?.({ card: bond })}
+</HtmlAtom>

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

@@ -0,0 +1,32 @@
+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>;
+    exports: {
+        getBond: () => CardBond<CardBondState<CardBondProps>>;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+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(): {
+        getBond: () => CardBond<CardBondState<CardBondProps>>;
+    };
+}
+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']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & 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 CardRoot: $$IsomorphicComponent;
+type CardRoot<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof CardRoot<E, B>>;
+export default CardRoot;

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

@@ -0,0 +1,55 @@
+<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 { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	const bond = CardBond.get();
+
+	const preset = getPreset('card.subtitle');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'p',
+		base = preset?.base as B,
+		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}
+	{base}
+	class={[
+		'card-subtitle text-sm font-medium text-gray-600',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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

@@ -0,0 +1,26 @@
+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>(): {
+    props: CardSubtitleProps<E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', 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(): {};
+}
+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']>> & {
+        $$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']>;
+    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>>;
+export default CardSubtitle;