@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/radio/radio-group.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { setRadioGroupContext, type RadioGroupContext } from './context';
+	import { getPreset } from '../../context';
+	import { HtmlAtom } from '../atom';
+	import { defineProperty, defineState, toClassValue } from '../../utils';
+
+	const preset = getPreset('radio.group');
+
+	let {
+		class: klass = '',
+		disabled = false,
+		readonly = false,
+		required = false,
+		name = undefined,
+		base = preset?.base as B,
+		value = $bindable(),
+		children,
+		oninput = undefined,
+		...restProps
+	} = $props();
+
+	const context = defineState<RadioGroupContext>([
+		defineProperty('disabled', () => disabled ?? false),
+		defineProperty('name', () => name),
+		defineProperty('readonly', () => readonly ?? false),
+		defineProperty('required', () => required ?? false),
+		defineProperty(
+			'value',
+			() => value,
+			(v) => (value = v)
+		)
+	]);
+
+	setRadioGroupContext(context);
+
+	$effect(() => {
+		oninput?.(new CustomEvent('change'), {
+			value
+		});
+	});
+</script>
+
+<HtmlAtom
+	class={[
+		'flex flex-col gap-1',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	{base}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/radio/radio-group.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const RadioGroup: import("svelte").Component<{
+    class?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    name?: any;
+    base?: B;
+    value?: any;
+    children: any;
+    oninput?: any;
+} & Record<string, any>, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/radio/radio.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { default as RadioModule } from './radio.svelte';
+	import { Root } from '../root';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Radio'
+	});
+</script>
+
+<script>
+	let value = $state(undefined);
+	let checked = $state(false);
+</script>
+
+<Story name="Radio">
+	{#snippet children({ args })}
+		<Root>
+			{#snippet children({})}
+				<div class="flex h-full w-full items-center justify-center">
+					<RadioModule class="size-5" />
+				</div>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

package/dist/components/radio/radio.stories.svelte.d.ts

@@ -0,0 +1,6 @@
+export default Radio;
+type Radio = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Radio: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/radio/radio.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" generics="B extends Base = Base">
+	import { getRadioGroupContext } from './context';
+	import { Stack } from '../stack';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const preset = getPreset('radio');
+
+	const radioGroupContext = getRadioGroupContext();
+
+	let {
+		class: klass = '',
+		value = $bindable(undefined),
+		group = $bindable(),
+		id = undefined,
+		name = undefined,
+		base = preset?.base as B,
+		disabled = false,
+		required = false,
+		readonly = false,
+		onchange = undefined,
+		oninput = undefined,
+		checkedContent = undefined,
+		...restProps
+	} = $props();
+
+	const _disabled = $derived(radioGroupContext?.disabled);
+	const _required = $derived(radioGroupContext?.required);
+	const _readonly = $derived(radioGroupContext?.readonly);
+	const _name = $derived(radioGroupContext?.name);
+
+	const proxy = {
+		get current() {
+			return radioGroupContext?.value ?? group;
+		},
+		set current(v) {
+			group = v;
+			if (radioGroupContext) {
+				radioGroupContext.value = v;
+			}
+		}
+	};
+
+	const isDisabled = $derived(_disabled || disabled);
+	const isRequired = $derived(_required || required);
+	const isReadonly = $derived(_readonly || readonly);
+	const isChecked = $derived(proxy.current === value);
+
+	function handleChange(ev: Event) {
+		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
+
+		onchange?.(ev, {
+			checked,
+			value: checked,
+			type: 'boolean'
+		});
+	}
+
+	function handleInput(ev: Event) {
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+		const _checked = currentTarget?.checked ?? false;
+
+		oninput?.(ev, {
+			checked: _checked,
+			value: _checked,
+			type: 'boolean'
+		});
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+	}
+</script>
+
+<Stack.Root
+	class={[
+		'text-foreground box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-[3px]',
+		isDisabled && 'pointer-events-none opacity-50',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	as="label"
+	{base}
+	{...restProps}
+>
+	<Stack.Item class="pointer-events-none flex size-full">
+		<input
+			bind:group={proxy.current}
+			class="pointer-events-auto size-0 opacity-0"
+			type="radio"
+			name={_name ?? name}
+			disabled={isDisabled}
+			required={isRequired}
+			readonly={isReadonly}
+			{id}
+			{value}
+			onchange={handleChange}
+			oninput={handleInput}
+		/>
+	</Stack.Item>
+
+	{#if isChecked}
+		{#if checkedContent}
+			<HtmlAtom
+				class="rounded-inherit pointer-events-none size-full bg-current"
+				base={checkedContent}
+			/>
+		{:else}
+			<Stack.Item class="rounded-inherit pointer-events-none size-full bg-current"></Stack.Item>
+		{/if}
+	{/if}
+</Stack.Root>

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

@@ -0,0 +1,38 @@
+import { type Base } from '../atom';
+declare function $$render<B extends Base = Base>(): {
+    props: {
+        class?: string;
+        value?: any;
+        group?: any;
+        id?: any;
+        name?: any;
+        base?: B;
+        disabled?: boolean;
+        required?: boolean;
+        readonly?: boolean;
+        onchange?: any;
+        oninput?: any;
+        checkedContent?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "group" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<B extends Base = Base> {
+    props(): ReturnType<typeof $$render<B>>['props'];
+    events(): ReturnType<typeof $$render<B>>['events'];
+    slots(): ReturnType<typeof $$render<B>>['slots'];
+    bindings(): "group" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<B>['props']>, ReturnType<__sveltets_Render<B>['events']>, ReturnType<__sveltets_Render<B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<B>['bindings']>;
+    } & ReturnType<__sveltets_Render<B>['exports']>;
+    <B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<B>['props']> & {}): ReturnType<__sveltets_Render<B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Radio: $$IsomorphicComponent;
+type Radio<B extends Base = Base> = InstanceType<typeof Radio<B>>;
+export default Radio;

package/dist/components/radio/types.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Types;
+type Types = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Types: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,26 @@
+import type { PortalBond } from '../portal/bond.svelte.js';
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import type { Component } from 'svelte';
+export type RootStateProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
+    renderers?: {
+        readonly html?: Component;
+        readonly svg?: Component;
+        readonly mathml?: Component;
+    };
+    extend: T;
+};
+export declare class RootBond extends Bond<RootStateProps, RootBondState> {
+    static CONTEXT_KEY: string;
+    constructor(atom: RootBondState);
+    share(): this;
+    get rootElement(): HTMLElement | undefined;
+    set rootElement(el: HTMLElement | undefined);
+    static get(): RootBond | undefined;
+    static set(bond: RootBond): RootBond;
+}
+export declare class RootBondState extends BondState<RootStateProps> {
+    #private;
+    constructor(state: () => RootStateProps);
+    setPortal(id: string, portal: PortalBond): void;
+    getPortal(id: string): PortalBond | undefined;
+}

package/dist/components/root/bond.svelte.js

@@ -0,0 +1,36 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { getContext, setContext } from 'svelte';
+import { Bond, BondState } from '../../shared/bond.svelte.js';
+export class RootBond extends Bond {
+    static CONTEXT_KEY = '@atomic-sv/bonds/root';
+    constructor(atom) {
+        super(atom);
+    }
+    share() {
+        return RootBond.set(this);
+    }
+    get rootElement() {
+        return this.elements.root;
+    }
+    set rootElement(el) {
+        this.elements.root = el;
+    }
+    static get() {
+        return getContext(RootBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(RootBond.CONTEXT_KEY, bond);
+    }
+}
+export class RootBondState extends BondState {
+    #portals = new SvelteMap();
+    constructor(state) {
+        super(state);
+    }
+    setPortal(id, portal) {
+        this.#portals.set(id, portal);
+    }
+    getPortal(id) {
+        return this.#portals.get(id);
+    }
+}

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

@@ -0,0 +1,2 @@
+export { default as Root } from './root.svelte';
+export { RootBondState, type RootStateProps, RootBond } from './bond.svelte';

package/dist/components/root/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './root.svelte';
+export { RootBondState, RootBond } from './bond.svelte';

package/dist/components/root/root.css

@@ -0,0 +1,161 @@
+@import 'tailwindcss';
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(1 0 0);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.81 0.1 252);
+	--chart-2: oklch(0.62 0.19 260);
+	--chart-3: oklch(0.55 0.22 263);
+	--chart-4: oklch(0.49 0.22 264);
+	--chart-5: oklch(0.42 0.18 266);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--font-sans:
+		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+		'Segoe UI Symbol', 'Noto Color Emoji';
+	--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
+	--radius: 0.625rem;
+	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--tracking-normal: 0em;
+	--spacing: 0.25rem;
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.269 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.371 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--destructive-foreground: oklch(0.985 0 0);
+	--border: oklch(0.275 0 0);
+	--input: oklch(0.325 0 0);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.81 0.1 252);
+	--chart-2: oklch(0.62 0.19 260);
+	--chart-3: oklch(0.55 0.22 263);
+	--chart-4: oklch(0.49 0.22 264);
+	--chart-5: oklch(0.42 0.18 266);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(0.275 0 0);
+	--sidebar-ring: oklch(0.439 0 0);
+	--font-sans:
+		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+		'Segoe UI Symbol', 'Noto Color Emoji';
+	--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+	--font-mono:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+		monospace;
+	--radius: 0.625rem;
+	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+
+	--font-sans: var(--font-sans);
+	--font-mono: var(--font-mono);
+	--font-serif: var(--font-serif);
+
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-inherit: inherit;
+
+	--shadow-2xs: var(--shadow-2xs);
+	--shadow-xs: var(--shadow-xs);
+	--shadow-sm: var(--shadow-sm);
+	--shadow: var(--shadow);
+	--shadow-md: var(--shadow-md);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
+	--shadow-2xl: var(--shadow-2xl);
+}

package/dist/components/root/root.svelte

@@ -0,0 +1,108 @@
+<script module lang="ts">
+	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+</script>
+
+<script lang="ts">
+	import { toClassValue, cn, defineState, defineProperty } from '../../utils';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import { Portal, ActivePortal, Portals } from '../portal';
+	import { Stack } from '../stack';
+	import { getPreset } from '../../context/preset.svelte';
+	import { HtmlAtom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+
+	const rootPreset = getPreset('root');
+	const portalsPreset = getPreset('root.portals');
+
+	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;
+	}}
+	class={cn(
+		'atom-root bg-background text-foreground relative flex w-full flex-1 flex-col items-start font-sans',
+		toClassValue.apply(bond, [rootPreset?.class]),
+		toClassValue.apply(bond, [klass])
+	)}
+	{...restProps}
+>
+	<Portals id="root fixed">
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Stack.Root
+				class={[
+					'portals pointer-events-none absolute inset-0 z-1 overflow-hidden',
+					toClassValue.apply(bond, [portalsPreset?.class])
+				]}
+			>
+				<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>

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

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

package/dist/components/scrollable/atoms.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './scrollable-root.svelte';
+export { default as Container } from './scrollable-container.svelte';
+export { default as Content } from './scrollable-content.svelte';
+export { default as Track } from './scrollable-track.svelte';
+export { default as Thumb } from './scrollable-thumb.svelte';

package/dist/components/scrollable/atoms.js

@@ -0,0 +1,5 @@
+export { default as Root } from './scrollable-root.svelte';
+export { default as Container } from './scrollable-container.svelte';
+export { default as Content } from './scrollable-content.svelte';
+export { default as Track } from './scrollable-track.svelte';
+export { default as Thumb } from './scrollable-thumb.svelte';

package/dist/components/scrollable/attachments.svelte.d.ts

@@ -0,0 +1,2 @@
+import { ScrollableBond } from './bond.svelte';
+export declare function scrollable(callback: (node: HTMLElement, bond?: ScrollableBond) => any): (node: HTMLElement) => any;

package/dist/components/scrollable/attachments.svelte.js

@@ -0,0 +1,5 @@
+import { ScrollableBond } from './bond.svelte';
+export function scrollable(callback) {
+    const bond = ScrollableBond.get();
+    return (node) => callback(node, bond);
+}