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

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

@@ -1,39 +1,39 @@
-<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';
-
-	const bond = CardBond.get();
-
-	let {
-		class: klass = '',
-		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
-	{bond}
-	preset="card.content"
-	class={['card-content border-border px-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)}
-	{...contentProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<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';
+
+	const bond = CardBond.get();
+
+	let {
+		class: klass = '',
+		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
+	{bond}
+	preset="card.content"
+	class={['card-content border-border px-4 pb-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)}
+	{...contentProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -1,41 +1,41 @@
-<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 { CardFooterProps } 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
-	}: CardFooterProps<E, B> = $props();
-
-	const footerProps = $derived({
-		...bond?.footer(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="card.footer"
-	class={['card-footer border-border flex items-center gap-2 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)}
-	{...footerProps}
->
-	{@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 { CardFooterProps } 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
+	}: CardFooterProps<E, B> = $props();
+
+	const footerProps = $derived({
+		...bond?.footer(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	preset="card.footer"
+	class={['card-footer border-border flex items-center gap-2 px-4 pb-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)}
+	{...footerProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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 { 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>
+<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 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.stories.svelte

@@ -1,145 +1,133 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Card',
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	import { Card } from '.';
-	import { Root } from '../root';
-	import gsap from 'gsap';
-</script>
-
-<!-- Default Card -->
-<Story name="Default">
-	<Root>
-		<Card.Root class="max-w-sm">
-			<Card.Header>
-				<Card.Title>Card Title</Card.Title>
-				<Card.Description
-					>This is a card description that provides additional context.</Card.Description
-				>
-			</Card.Header>
-			<Card.Body>
-				<p>
-					This is the main content area of the card. You can put any content here including text,
-					images, or other components.
-				</p>
-			</Card.Body>
-			<Card.Footer>
-				<button
-					class="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600 active:bg-blue-700"
-					>Action</button
-				>
-				<button
-					class="border-border hover:bg-foreground/5 active:bg-foreground/10 rounded border px-3 py-1 text-sm"
-					>Cancel</button
-				>
-			</Card.Footer>
-		</Card.Root>
-	</Root>
-</Story>
-
-<!-- Card with Media -->
-<Story name="With Media">
-	<Root>
-		<Card.Root class="max-w-sm">
-			<Card.Media>
-				<img
-					src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop"
-					alt="Beautiful landscape"
-					class="h-48 w-full object-cover"
-				/>
-			</Card.Media>
-			<Card.Header>
-				<Card.Title>Beautiful Landscape</Card.Title>
-				<Card.Subtitle>Photography</Card.Subtitle>
-			</Card.Header>
-			<Card.Body>
-				<p>A stunning landscape photograph capturing the beauty of nature.</p>
-			</Card.Body>
-			<Card.Footer>
-				<span class="text-sm text-gray-500">Posted 2 hours ago</span>
-			</Card.Footer>
-		</Card.Root>
-	</Root>
-</Story>
-
-<!-- Clickable Card -->
-<Story name="Clickable">
-	<Root>
-		<Card.Root
-			class="hover:bg-card/90 active:bg-card/80 max-w-sm cursor-pointer pb-4"
-			onclick={() => alert('Card clicked!')}
-		>
-			<Card.Header>
-				<Card.Title>Clickable Card</Card.Title>
-				<Card.Description
-					>This card is clickable and will show an alert when clicked.</Card.Description
-				>
-			</Card.Header>
-			<Card.Body>
-				<p>Click anywhere on this card to trigger the action.</p>
-			</Card.Body>
-		</Card.Root>
-	</Root>
-</Story>
-
-<!-- Card Variants -->
-<Story name="Variants">
-	<Root>
-		<div class="grid grid-cols-2 gap-4">
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Default Card</Card.Title>
-					<Card.Description>Default variant with border and shadow.</Card.Description>
-				</Card.Header>
-			</Card.Root>
-
-			<Card.Root class="bg-transparent shadow-none">
-				<Card.Header>
-					<Card.Title>Outlined Card</Card.Title>
-					<Card.Description>Outlined variant with border only.</Card.Description>
-				</Card.Header>
-			</Card.Root>
-
-			<Card.Root class="shadow-lg">
-				<Card.Header>
-					<Card.Title>Elevated Card</Card.Title>
-					<Card.Description>Elevated variant with enhanced shadow.</Card.Description>
-				</Card.Header>
-			</Card.Root>
-
-			<Card.Root class="bg-background border-none">
-				<Card.Header>
-					<Card.Title>Filled Card</Card.Title>
-					<Card.Description>Filled variant with background color.</Card.Description>
-				</Card.Header>
-			</Card.Root>
-		</div>
-	</Root>
-</Story>
-
-<!-- Disabled Card -->
-<Story
-	name="Disabled"
-	args={{
-		clickable: true,
-		disabled: true
-	}}
->
-	<Root>
-		<Card.Root class="max-w-sm pb-4 opacity-50">
-			<Card.Header>
-				<Card.Title>Disabled Card</Card.Title>
-				<Card.Description>This card is disabled and cannot be interacted with.</Card.Description>
-			</Card.Header>
-			<Card.Body>
-				<p>The card appears dimmed and is not clickable.</p>
-			</Card.Body>
-		</Card.Root>
-	</Root>
-</Story>
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Card',
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	import { Card } from '.';
+</script>
+
+<!-- Default Card -->
+<Story name="Default">
+	<Card.Root class="max-w-sm">
+		<Card.Header>
+			<Card.Title>Card Title</Card.Title>
+			<Card.Description
+				>This is a card description that provides additional context.</Card.Description
+			>
+		</Card.Header>
+		<Card.Body>
+			<p>
+				This is the main content area of the card. You can put any content here including text,
+				images, or other components.
+			</p>
+		</Card.Body>
+		<Card.Footer>
+			<button
+				class="rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600 active:bg-blue-700"
+				>Action</button
+			>
+			<button
+				class="border-border hover:bg-foreground/5 active:bg-foreground/10 rounded border px-3 py-1 text-sm"
+				>Cancel</button
+			>
+		</Card.Footer>
+	</Card.Root>
+</Story>
+
+<!-- Card with Media -->
+<Story name="With Media">
+	<Card.Root class="max-w-sm">
+		<Card.Media>
+			<img
+				src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop"
+				alt="Beautiful landscape"
+				class="h-48 w-full object-cover"
+			/>
+		</Card.Media>
+		<Card.Header>
+			<Card.Title>Beautiful Landscape</Card.Title>
+			<Card.Subtitle>Photography</Card.Subtitle>
+		</Card.Header>
+		<Card.Body>
+			<p>A stunning landscape photograph capturing the beauty of nature.</p>
+		</Card.Body>
+		<Card.Footer>
+			<span class="text-sm text-gray-500">Posted 2 hours ago</span>
+		</Card.Footer>
+	</Card.Root>
+</Story>
+
+<!-- Clickable Card -->
+<Story name="Clickable">
+	<Card.Root
+		class="hover:bg-card/90 active:bg-card/80 max-w-sm cursor-pointer pb-4"
+		onclick={() => alert('Card clicked!')}
+	>
+		<Card.Header>
+			<Card.Title>Clickable Card</Card.Title>
+			<Card.Description
+				>This card is clickable and will show an alert when clicked.</Card.Description
+			>
+		</Card.Header>
+		<Card.Body>
+			<p>Click anywhere on this card to trigger the action.</p>
+		</Card.Body>
+	</Card.Root>
+</Story>
+
+<!-- Card Variants -->
+<Story name="Variants">
+	<div class="grid grid-cols-2 gap-4">
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>Default Card</Card.Title>
+				<Card.Description>Default variant with border and shadow.</Card.Description>
+			</Card.Header>
+		</Card.Root>
+
+		<Card.Root class="bg-transparent shadow-none">
+			<Card.Header>
+				<Card.Title>Outlined Card</Card.Title>
+				<Card.Description>Outlined variant with border only.</Card.Description>
+			</Card.Header>
+		</Card.Root>
+
+		<Card.Root class="shadow-lg">
+			<Card.Header>
+				<Card.Title>Elevated Card</Card.Title>
+				<Card.Description>Elevated variant with enhanced shadow.</Card.Description>
+			</Card.Header>
+		</Card.Root>
+
+		<Card.Root class="bg-background border-none">
+			<Card.Header>
+				<Card.Title>Filled Card</Card.Title>
+				<Card.Description>Filled variant with background color.</Card.Description>
+			</Card.Header>
+		</Card.Root>
+	</div>
+</Story>
+
+<!-- Disabled Card -->
+<Story
+	name="Disabled"
+	args={{
+		clickable: true,
+		disabled: true
+	}}
+>
+	<Card.Root class="max-w-sm pb-4 opacity-50">
+		<Card.Header>
+			<Card.Title>Disabled Card</Card.Title>
+			<Card.Description>This card is disabled and cannot be interacted with.</Card.Description>
+		</Card.Header>
+		<Card.Body>
+			<p>The card appears dimmed and is not clickable.</p>
+		</Card.Body>
+	</Card.Root>
+</Story>