@svelte-atoms/core 1.0.0-alpha.23 → 1.0.0-alpha.24

package/dist/components/atom/html-atom.svelte

@@ -1,70 +1,70 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
-	import { RootBond } from '../root';
-	import { HtmlElement } from '../element';
-	import { cn, toClassValue, type ClassValue } from '../../utils';
-	import { getPreset } from '../../context';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const rootBond = RootBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div',
-		base = undefined,
-		preset: presetKey = undefined,
-		bond = undefined,
-		children = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const preset = $derived(
-		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
-	);
-
-	const _klass = $derived(compilePresetPlaceholder(klass));
-
-	const _base = $derived(base ?? preset?.base);
-	const _as = $derived(as ?? preset?.as);
-	const _restProps = $derived.by(() => {
-		const { class: klass, base, as, ...restPresetProps } = preset ?? {};
-		return { ...restPresetProps, ...restProps };
-	});
-
-	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
-
-	const snippet = $derived(_base as SnippetBase);
-
-	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
-
-	const Component = $derived(base ?? atom) as ComponentBase;
-
-	function compilePresetPlaceholder(klass: ClassValue): ReturnType<typeof toClassValue> {
-		if (Array.isArray(klass)) {
-			return klass.map((k) => compilePresetPlaceholder(k));
-		}
-
-		const compiled = toClassValue.apply(bond, [klass, bond]);
-
-		if (Array.isArray(compiled)) {
-			return compiled.map((c) => compilePresetPlaceholder(c));
-		}
-
-		if (typeof compiled === 'string') {
-			return compiled.replace('$preset', cn(preset?.class));
-		}
-
-		return compiled;
-	}
-</script>
-
-{#if isSnippet}
-	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
-{:else}
-	<Component class={_klass} as={_as} {..._restProps}>
-		{@render children?.()}
-	</Component>
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
+	import { RootBond } from '../root';
+	import { HtmlElement } from '../element';
+	import { cn, toClassValue, type ClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div',
+		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const preset = $derived(
+		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
+	);
+
+	const _klass = $derived(compilePresetPlaceholder(klass));
+
+	const _base = $derived(base ?? preset?.base);
+	const _as = $derived(as ?? preset?.as);
+	const _restProps = $derived.by(() => {
+		const { class: klass, base, as, ...restPresetProps } = preset ?? {};
+		return { ...restPresetProps, ...restProps };
+	});
+
+	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
+
+	const snippet = $derived(_base as SnippetBase);
+
+	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
+
+	const Component = $derived(base ?? atom) as ComponentBase;
+
+	function compilePresetPlaceholder(klass: ClassValue): ReturnType<typeof toClassValue> {
+		if (Array.isArray(klass)) {
+			return klass.map((k) => compilePresetPlaceholder(k));
+		}
+
+		const compiled = toClassValue.apply(bond, [klass, bond]);
+
+		if (Array.isArray(compiled)) {
+			return compiled.map((c) => compilePresetPlaceholder(c));
+		}
+
+		if (typeof compiled === 'string') {
+			return compiled.replace('$preset', cn(preset?.class));
+		}
+
+		return compiled;
+	}
+</script>
+
+{#if isSnippet}
+	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
+{:else}
+	<Component class={_klass} as={_as} {..._restProps}>
+		{@render children?.()}
+	</Component>
+{/if}

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

@@ -1,79 +1,79 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '../../utils';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		value,
-		checked = undefined,
-		files = [],
-		preset = 'input',
-		children = undefined,
-		factory = _factory,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const bondProps = defineState<InputStateProps>([
-		defineProperty(
-			'value',
-			() => value,
-			(v) => {
-				value = v;
-			}
-		),
-
-		defineProperty(
-			'checked',
-			() => checked,
-			(v) => {
-				checked = v;
-			}
-		),
-
-		defineProperty(
-			'files',
-			() => files,
-			(v) => {
-				files = [...v];
-			}
-		)
-	]);
-	const bond = _factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new InputState(() => props);
-
-		return new InputBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{preset}
-	class={[
-		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
-		'$preset',
-		klass
-	]}
-	{bond}
-	{...rootProps}
->
-	{@render children?.({ input: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
+	import { defineProperty, defineState, toClassValue } from '../../utils';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		value,
+		checked = undefined,
+		files = [],
+		preset = 'input',
+		children = undefined,
+		factory = _factory,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bondProps = defineState<InputStateProps>([
+		defineProperty(
+			'value',
+			() => value,
+			(v) => {
+				value = v;
+			}
+		),
+
+		defineProperty(
+			'checked',
+			() => checked,
+			(v) => {
+				checked = v;
+			}
+		),
+
+		defineProperty(
+			'files',
+			() => files,
+			(v) => {
+				files = [...v];
+			}
+		)
+	]);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new InputState(() => props);
+
+		return new InputBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	class={[
+		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
+		'$preset',
+		klass
+	]}
+	{bond}
+	{...rootProps}
+>
+	{@render children?.({ input: bond })}
+</HtmlAtom>

package/dist/components/input/input.stories.svelte

@@ -1,38 +1,38 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Input as AInput } from '.';
-	import Root from '../root/root.svelte';
-	import { Label } from '../label';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Input',
-		// 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="Input" args={{}}>
-	<Root class="p-4">
-		<div class="flex flex-col">
-			<Label for="price-input">Price</Label>
-			<AInput.Root>
-				<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
-				<AInput.Value id="price-input" class="border-border box-content border-x px-2 py-2">
-					<!--  -->
-				</AInput.Value>
-				<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
-
-				<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
-			</AInput.Root>
-		</div>
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Input as AInput } from '.';
+	import Root from '../root/root.svelte';
+	import { Label } from '../label';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Input',
+		// 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="Input" args={{}}>
+	<Root class="p-4">
+		<div class="flex flex-col">
+			<Label for="price-input">Price</Label>
+			<AInput.Root>
+				<AInput.Icon class="text-foreground box-content px-0">$</AInput.Icon>
+				<AInput.Value id="price-input" class="border-border box-content border-x px-2 py-2">
+					<!--  -->
+				</AInput.Value>
+				<AInput.Icon class="text-foreground box-content px-2">.00</AInput.Icon>
+
+				<AInput.Placeholder class="text-foreground/20 pl-2">Hello World</AInput.Placeholder>
+			</AInput.Root>
+		</div>
+	</Root>
+</Story>

package/dist/components/root/root.svelte

@@ -1,103 +1,121 @@
-<script module lang="ts">
-	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-</script>
-
-<script lang="ts">
-	import { cn, defineState, defineProperty } from '../../utils';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import { Portal, ActivePortal, Portals } from '../portal';
-	import { Stack } from '../stack';
-	import { HtmlAtom } from '../atom';
-	import { HtmlElement, MathmlElement, SvgElement } from '../element';
-
-	let { class: klass = '', children = undefined, portals = undefined, ...restProps } = $props();
-
-	let html: typeof HtmlElement | undefined = HtmlElement;
-	let svg: typeof SvgElement | undefined = undefined;
-	let mathml: typeof MathmlElement | undefined = undefined;
-
-	type Renderers = {
-		html?: typeof HtmlElement;
-		svg?: typeof SvgElement;
-		mathml?: typeof MathmlElement;
-	};
-
-	const renderers = defineState<Renderers>([
-		defineProperty('html', () => {
-			if (!html) {
-				import('../element/html-element.svelte').then((mod) => {
-					html = mod.default;
-				});
-			}
-
-			return html;
-		}),
-		defineProperty('svg', () => {
-			if (!svg) {
-				import('../element/svg-element.svelte').then((mod) => {
-					svg = mod.default;
-				});
-			}
-
-			return svg;
-		}),
-		defineProperty('mathml', () => {
-			if (!mathml) {
-				import('../element/mathml-element.svelte').then((mod) => {
-					mathml = mod.default;
-				});
-			}
-
-			return mathml;
-		})
-	]);
-
-	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
-
-	const bondState = new RootBondState(() => bondProps);
-	const bond = new RootBond(bondState).share();
-</script>
-
-<HtmlAtom
-	{@attach (node) => {
-		bond.rootElement = node;
-	}}
-	preset="root"
-	class={cn(
-		'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
-		'$preset',
-		klass
-	)}
-	{...restProps}
->
-	<Portals id="root">
-		{#if portals}
-			{@render portals?.()}
-		{:else}
-			<Stack.Root
-				preset="root.portals"
-				class={['portals pointer-events-none absolute inset-0 z-1 overflow-hidden', '$preset']}
-			>
-				<Portal.Outer base={Stack.Item} id="root.l0">
-					<Portal.Inner />
-				</Portal.Outer>
-
-				<Portal.Outer base={Stack.Item} id="root.l1">
-					<Portal.Inner />
-				</Portal.Outer>
-
-				<Portal.Outer base={Stack.Item} id="root.l2">
-					<Portal.Inner />
-				</Portal.Outer>
-
-				<Portal.Outer base={Stack.Item} id="root.l3">
-					<Portal.Inner />
-				</Portal.Outer>
-			</Stack.Root>
-		{/if}
-
-		<ActivePortal id="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</Portals>
-</HtmlAtom>
+<script module lang="ts">
+	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+</script>
+
+<script lang="ts">
+	import { cn, defineState, defineProperty } from '../../utils';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import { Portal, ActivePortal, Portals } from '../portal';
+	import { Stack } from '../stack';
+	import { HtmlAtom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+
+	let {
+		class: klass = '',
+		base = undefined,
+		children = undefined,
+		portals = undefined,
+		...restProps
+	} = $props();
+
+	let html: typeof HtmlElement | undefined = HtmlElement;
+	let svg: typeof SvgElement | undefined = undefined;
+	let mathml: typeof MathmlElement | undefined = undefined;
+
+	type Renderers = {
+		html?: typeof HtmlElement;
+		svg?: typeof SvgElement;
+		mathml?: typeof MathmlElement;
+	};
+
+	const renderers = defineState<Renderers>([
+		defineProperty('html', () => {
+			if (!html) {
+				import('../element/html-element.svelte').then((mod) => {
+					html = mod.default;
+				});
+			}
+
+			return html;
+		}),
+		defineProperty('svg', () => {
+			if (!svg) {
+				import('../element/svg-element.svelte').then((mod) => {
+					svg = mod.default;
+				});
+			}
+
+			return svg;
+		}),
+		defineProperty('mathml', () => {
+			if (!mathml) {
+				import('../element/mathml-element.svelte').then((mod) => {
+					mathml = mod.default;
+				});
+			}
+
+			return mathml;
+		})
+	]);
+
+	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
+
+	const bondState = new RootBondState(() => bondProps);
+	const bond = new RootBond(bondState).share();
+</script>
+
+<Portals id="root">
+	<HtmlAtom
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l0"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l1"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l2"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer
+				base={Stack.Item}
+				id="root.l3"
+				class="pointer-events-none absolute inset-0 z-10 overflow-hidden"
+			>
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal id="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</HtmlAtom>
+</Portals>

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

@@ -1,6 +1,7 @@
 export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
 declare const Root: import("svelte").Component<{
     class?: string;
+    base?: any;
     children?: any;
     portals?: any;
 } & Record<string, any>, {}, "">;

package/dist/runes/index.d.ts

@@ -1,2 +1,5 @@
 export { colorScheme, type ColorScheme } from './color-scheme.svelte';
+export { reducedMotion } from './reduced-motion.svelte';
+export { container } from './container.svelte';
+export { type Viewport, viewport } from './viewport.svelte';
 export { mounted } from './lifecycles.svelte';

package/dist/runes/index.js

@@ -1,2 +1,5 @@
 export { colorScheme } from './color-scheme.svelte';
+export { reducedMotion } from './reduced-motion.svelte';
+export { container } from './container.svelte';
+export { viewport } from './viewport.svelte';
 export { mounted } from './lifecycles.svelte';

package/dist/runes/reduced-motion.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A rune that tracks the user's motion preferences via the `prefers-reduced-motion` media query.
+ *
+ * @returns An object with a `current` getter that returns `true` if the user prefers reduced motion, `false` otherwise.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { reducedMotion } from '@svelte-atoms/core';
+ *
+ *   const motion = reducedMotion();
+ * </script>
+ *
+ * {#if motion.current}
+ *   <div>Animations disabled</div>
+ * {:else}
+ *   <div class="animated">Animations enabled</div>
+ * {/if}
+ * ```
+ */
+export declare function reducedMotion(): {
+    readonly current: boolean;
+};