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

package/dist/components/checkbox/checkbox.svelte

@@ -1,157 +1,155 @@
-<script lang="ts">
-	import { circOut } from 'svelte/easing';
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import { scale } from 'svelte/transition';
-	import { Icon } from '../icon';
-	import { HtmlAtom } from '../atom';
-	import CheckmarkRegularIcon from '../../icons/icon-checkmark.svelte';
-	import { DURATION } from '../../shared';
-	import type { CheckboxProps } from './types';
-	import './checkbox.css';
-
-	let {
-		class: klass = '',
-		checked = $bindable(false),
-		indeterminate = $bindable(false),
-		value = $bindable(undefined),
-		group = $bindable([]),
-		id,
-		name,
-		checkedContent,
-		indeterminateContent,
-		enter,
-		exit,
-		initial,
-		onchange,
-		oninput,
-		onblur,
-		onfocus,
-		onclick = undefined,
-		...restProps
-	}: CheckboxProps & Exclude<HTMLInputAttributes, 'type'> = $props();
-
-	let checkboxElement: HTMLInputElement | undefined = $state();
-
-	// Computed state for visual representation
-	const isChecked = $derived(checked === true);
-	const isIndeterminate = $derived(indeterminate === true);
-	const showCheckmark = $derived(isChecked && !isIndeterminate);
-
-	function handleChange(ev: Event) {
-		onchange?.(ev, {
-			checked: checked,
-			value: checked,
-			type: 'boolean'
-		});
-	}
-
-	function handleInput(ev: Event) {
-		oninput?.(ev, {
-			checked: checked,
-			value: checked,
-			type: 'boolean'
-		});
-	}
-
-	function handleClick(ev: MouseEvent) {
-		onclick?.(ev);
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		// Handle indeterminate → checked → unchecked cycle
-		if (indeterminate) {
-			// Indeterminate → checked
-			indeterminate = false;
-			checked = true;
-		} else {
-			// Toggle checked state
-			checked = !checked;
-		}
-
-		// Trigger input event manually if needed
-		handleInput(ev);
-	}
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<HtmlAtom
-	preset="checkbox"
-	as="div"
-	class={[
-		'checkbox-root border-border outline-primary bg-input text-foreground aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
-		isChecked && 'bg-foreground',
-		'$preset',
-		klass,
-		'relative'
-	]}
-	role="checkbox"
-	aria-checked={isIndeterminate ? 'mixed' : isChecked}
-	{enter}
-	{exit}
-	{initial}
-	onclick={handleClick}
-	{...restProps}
->
-	<input
-		bind:this={checkboxElement}
-		bind:checked
-		bind:group
-		bind:indeterminate
-		type="checkbox"
-		class="checkbox-input pointer-events-none"
-		{value}
-		{id}
-		{name}
-		onchange={handleChange}
-		oninput={handleInput}
-		{onblur}
-		{onfocus}
-		hidden
-		tabindex="-1"
-	/>
-
-	{#if isIndeterminate}
-		{#if indeterminateContent}
-			<HtmlAtom
-				preset="checkbox.indeterminate"
-				class={[
-					'checkbox-indeterminate pointer-events-none flex size-full items-center justify-center p-1'
-				]}
-				base={indeterminateContent}
-			/>
-		{:else}
-			<HtmlAtom
-				preset="checkbox.indeterminate"
-				class={[
-					'checkbox-indeterminate text-foreground pointer-events-none flex size-full items-center justify-center  p-1'
-				]}
-			>
-				<div class={['size-full rounded-xs bg-current']}></div>
-			</HtmlAtom>
-		{/if}
-	{:else if showCheckmark}
-		{#if checkedContent}
-			<HtmlAtom
-				preset="checkbox.checkmark"
-				class={[
-					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
-				]}
-				base={checkedContent}
-			/>
-		{:else}
-			<HtmlAtom
-				preset="checkbox.checkmark"
-				class={[
-					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
-				]}
-				enter={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
-				exit={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
-			>
-				<Icon class="h-full p-0" src={CheckmarkRegularIcon} />
-			</HtmlAtom>
-		{/if}
-	{/if}
-</HtmlAtom>
+<script lang="ts">
+	import { circOut } from 'svelte/easing';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { scale } from 'svelte/transition';
+	import { Icon } from '../icon';
+	import { HtmlAtom } from '../atom';
+	import CheckmarkRegularIcon from '../../icons/icon-checkmark.svelte';
+	import { DURATION } from '../../shared';
+	import type { CheckboxProps } from './types';
+	import './checkbox.css';
+
+	let {
+		class: klass = '',
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		value = $bindable(undefined),
+		group = $bindable([]),
+		id,
+		name,
+		checkedContent,
+		indeterminateContent,
+		enter,
+		exit,
+		initial,
+		onchange,
+		oninput,
+		onblur,
+		onfocus,
+		onclick = undefined,
+		...restProps
+	}: CheckboxProps & Exclude<HTMLInputAttributes, 'type'> = $props();
+
+	let checkboxElement: HTMLInputElement | undefined = $state();
+
+	// Computed state for visual representation
+	const isChecked = $derived(checked === true);
+	const isIndeterminate = $derived(indeterminate === true);
+	const showCheckmark = $derived(isChecked && !isIndeterminate);
+
+	function handleChange(ev: Event) {
+		onchange?.(ev, {
+			checked: checked,
+			value: checked,
+			type: 'boolean'
+		});
+	}
+
+	function handleInput(ev: Event) {
+		oninput?.(ev, {
+			checked: checked,
+			value: checked,
+			type: 'boolean'
+		});
+	}
+
+	function handleClick(ev: MouseEvent) {
+		onclick?.(ev);
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		// Handle indeterminate → checked → unchecked cycle
+		if (indeterminate) {
+			// Indeterminate → checked
+			indeterminate = false;
+			checked = true;
+		} else {
+			// Toggle checked state
+			checked = !checked;
+		}
+
+		// Trigger input event manually if needed
+		handleInput(ev);
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<HtmlAtom
+	preset="checkbox"
+	as="div"
+	class={[
+		'checkbox-root border-border outline-primary bg-input text-foreground aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
+		isChecked && 'bg-foreground',
+		'$preset',
+		klass,
+		'relative'
+	]}
+	role="checkbox"
+	aria-checked={isIndeterminate ? 'mixed' : isChecked}
+	{enter}
+	{exit}
+	{initial}
+	onclick={handleClick}
+	{...restProps}
+>
+	<input
+		bind:this={checkboxElement}
+		bind:checked
+		bind:group
+		bind:indeterminate
+		type="checkbox"
+		class="checkbox-input pointer-events-none"
+		{value}
+		{id}
+		{name}
+		onchange={handleChange}
+		oninput={handleInput}
+		{onblur}
+		{onfocus}
+		hidden
+		tabindex="-1"
+	/>
+
+	{#if isIndeterminate}
+		{#if indeterminateContent}
+			<HtmlAtom
+				preset="checkbox.indeterminate"
+				class={[
+					'checkbox-indeterminate pointer-events-none flex size-full scale-50 items-center justify-center rounded-[inherit] bg-current'
+				]}
+				base={indeterminateContent}
+			/>
+		{:else}
+			<HtmlAtom
+				preset="checkbox.indeterminate"
+				class={[
+					'checkbox-indeterminate pointer-events-none flex size-full scale-50 items-center justify-center rounded-[inherit] bg-current'
+				]}
+			/>
+		{/if}
+	{:else if showCheckmark}
+		{#if checkedContent}
+			<HtmlAtom
+				preset="checkbox.checkmark"
+				class={[
+					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
+				]}
+				base={checkedContent}
+			/>
+		{:else}
+			<HtmlAtom
+				preset="checkbox.checkmark"
+				class={[
+					'checkbox-indicator text-accent pointer-events-none flex h-full content-center items-center justify-center overflow-hidden p-0.5'
+				]}
+				enter={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
+				exit={(node) => scale(node, { duration: DURATION.fast, easing: circOut, start: 0.6 })}
+			>
+				<Icon class="h-full p-0" src={CheckmarkRegularIcon} />
+			</HtmlAtom>
+		{/if}
+	{/if}
+</HtmlAtom>

package/dist/components/collapsible/collapsible.stories.svelte

@@ -1,173 +1,172 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Collapsible as ACollapsible } from '.';
-	import Root from '../root/root.svelte';
-
-	import { animate as motion } from 'motion';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Collapsible',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-</script>
-
-<Story name="Collapsible" args={{}}>
-	<Root class="gap-2 p-4">
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.props.open}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 1</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.2, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 2</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-
-		<ACollapsible.Root>
-			{#snippet children({ collapsible })}
-				{@const isOpen = collapsible.state.isOpen}
-
-				<ACollapsible.Header class="">
-					<div>Hello Atoms UI 3</div>
-					<ACollapsible.Indicator />
-				</ACollapsible.Header>
-
-				<ACollapsible.Body
-					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
-					enter={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{
-								duration: 0.2,
-								ease: 'linear'
-							}
-						);
-						return { duration: 0.2 };
-					}}
-					exit={(node) => {
-						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
-						return { duration: 0.2 };
-					}}
-					animate={(node) => {
-						motion(
-							node,
-							{
-								opacity: +isOpen,
-								height: isOpen ? 'auto' : 0
-							},
-							{ duration: 0.1, ease: 'linear' }
-						);
-					}}
-				>
-					<div class="py-2">
-						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
-						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
-						dolor diam nascetur.
-					</div>
-				</ACollapsible.Body>
-			{/snippet}
-		</ACollapsible.Root>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Collapsible as ACollapsible } from '.';
+
+	import { animate as motion } from 'motion';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Collapsible',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+</script>
+
+<Story name="Collapsible" args={{}}>
+	<div class="flex w-full flex-col gap-2">
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.props.open}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 1</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.2, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.isOpen}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 2</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+
+		<ACollapsible.Root>
+			{#snippet children({ collapsible })}
+				{@const isOpen = collapsible.state.isOpen}
+
+				<ACollapsible.Header class="">
+					<div>Hello Atoms UI 3</div>
+					<ACollapsible.Indicator />
+				</ACollapsible.Header>
+
+				<ACollapsible.Body
+					class={['pointer-events-none h-0 opacity-0', isOpen && 'pointer-events-auto']}
+					enter={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{
+								duration: 0.2,
+								ease: 'linear'
+							}
+						);
+						return { duration: 0.2 };
+					}}
+					exit={(node) => {
+						motion(node, { opacity: 0, height: 0 }, { duration: 0.2, ease: 'linear' });
+						return { duration: 0.2 };
+					}}
+					animate={(node) => {
+						motion(
+							node,
+							{
+								opacity: +isOpen,
+								height: isOpen ? 'auto' : 0
+							},
+							{ duration: 0.1, ease: 'linear' }
+						);
+					}}
+				>
+					<div class="py-2">
+						Mauris et habitasse cubilia potenti at condimentum iaculis nam. Ante fusce litora
+						tristique letius libero. Curabitur vitae cursus consectetur feugiat aenean viverra vel
+						dolor diam nascetur.
+					</div>
+				</ACollapsible.Body>
+			{/snippet}
+		</ACollapsible.Root>
+	</div>
+</Story>