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

package/dist/components/portal/active-portal.svelte.d.ts

@@ -1,13 +1,6 @@
-export default ActivePortal;
-type ActivePortal = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const ActivePortal: import("svelte").Component<{
     portal: any;
     children?: any;
 }, {}, "">;
-type $$ComponentProps = {
-    portal: any;
-    children?: any;
-};
+type ActivePortal = ReturnType<typeof ActivePortal>;
+export default ActivePortal;

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

@@ -3,18 +3,11 @@
 </script>
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { PortalOuterProps } from './types';
 	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
 	import { RootBond } from '../root';
-	import type { RootPortals } from '../root/root.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
+	import { HtmlAtom, type ElementType, type Base } from '../atom';
 	import { defineProperty, defineState } from '../../utils';
 
 	type Element = ElementType<E>;

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

@@ -1,13 +1,11 @@
 export type { PortalOuterProps } from './types';
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { PortalBond } from '.';
-import type { RootPortals } from '../root/root.svelte';
-import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
+import { type ElementType, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
-        id: RootPortals | (string & {});
-        children?: Snippet;
+    props: import("../atom").HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
+        id: import("../root/root.svelte").RootPortals | (string & {});
+        children?: import("svelte").Snippet;
     } & HTMLAttributes<ElementType<E>>;
     exports: {
         getBond: () => PortalBond;

package/dist/components/portal/teleport.svelte

@@ -5,12 +5,11 @@
 <script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { TeleportProps } from './types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { HtmlAtom, type Base } from '../atom';
 	import type { HtmlElementTagName, HtmlElementType } from '../element';
 	import { PortalsBond } from './portals';
 	import { RootBond } from '../root/bond.svelte';
 	import { port } from './utils';
-	import type { PortalBond } from '.';
 
 	type Element = HtmlElementType<E>;
 

package/dist/components/portal/teleport.svelte.d.ts

@@ -1,11 +1,10 @@
 export type { TeleportProps } from './types';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
 import type { HtmlElementTagName, HtmlElementType } from '../element';
-import type { PortalBond } from '.';
 declare function $$render<E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
-        portal?: string | PortalBond;
+    props: import("../atom").HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
+        portal?: string | import("./bond.svelte").PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};
     bindings: "";

package/dist/components/qr-code/qr-code.stories.svelte

@@ -1,18 +1,18 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import QrCodeComponent from './qr-code.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/QR Code'
-	});
-</script>
-
-<script>
-</script>
-
-<Story name="QR Code">
-	<QrCodeComponent
-		class="text-primary-foreground bg-primary size-64 rounded-2xl p-1"
-		value="Hello World 123"
-	/>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import QrCodeComponent from './qr-code.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/QR Code'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="QR Code">
+	<QrCodeComponent
+		class="text-primary-foreground bg-primary size-64 rounded-2xl p-1"
+		value="Hello World 123"
+	/>
+</Story>

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

@@ -1,41 +1,41 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { default as RadioComponent } from './radio.svelte';
-	import { default as RadioGroupComponent } from './radio-group.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Radio'
-	});
-</script>
-
-<script>
-	let value = $state('t1');
-</script>
-
-<Story name="Group">
-	<RadioGroupComponent class="gap-4" name="choice" bind:value>
-		<label class="flex items-center gap-2">
-			<RadioComponent class="size-8" value="t1" />
-			<div>Test 1</div>
-		</label>
-
-		<label class="flex items-center gap-2">
-			<RadioComponent class="size-8" value="t2" />
-			<div>Test 2</div>
-		</label>
-
-		<label class="flex items-center gap-2">
-			<RadioComponent class="size-8" value="t3" />
-			<div>Test 3</div>
-		</label>
-
-		<label class="flex items-center gap-2">
-			<RadioComponent class="size-8" value="t4" />
-			<div>Test 4</div>
-		</label>
-	</RadioGroupComponent>
-
-	<div class="mt-8">
-		Selected value: <strong>{value}</strong>
-	</div>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { default as RadioComponent } from './radio.svelte';
+	import { default as RadioGroupComponent } from './radio-group.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Radio'
+	});
+</script>
+
+<script>
+	let value = $state('t1');
+</script>
+
+<Story name="Group">
+	<RadioGroupComponent class="gap-4" name="choice" bind:value>
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t1" />
+			<div>Test 1</div>
+		</label>
+
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t2" />
+			<div>Test 2</div>
+		</label>
+
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t3" />
+			<div>Test 3</div>
+		</label>
+
+		<label class="flex items-center gap-2">
+			<RadioComponent class="size-8" value="t4" />
+			<div>Test 4</div>
+		</label>
+	</RadioGroupComponent>
+
+	<div class="mt-8">
+		Selected value: <strong>{value}</strong>
+	</div>
+</Story>

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

@@ -1,17 +1,17 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { default as RadioModule } from './radio.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Radio'
-	});
-</script>
-
-<script>
-	let value = $state(undefined);
-	let checked = $state(false);
-</script>
-
-<Story name="Radio">
-	<RadioModule class="size-5" />
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { default as RadioModule } from './radio.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Radio'
+	});
+</script>
+
+<script>
+	let value = $state(undefined);
+	let checked = $state(false);
+</script>
+
+<Story name="Radio">
+	<RadioModule class="size-5" />
+</Story>

package/dist/components/radio/radio.svelte

@@ -1,109 +1,109 @@
-<script lang="ts">
-	import { getRadioGroupContext } from './context';
-	import { Stack } from '../stack';
-	import { toClassValue } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-
-	const radioGroupContext = getRadioGroupContext();
-
-	let {
-		class: klass = '',
-		value = $bindable(undefined),
-		group = $bindable(),
-		id = undefined,
-		name = undefined,
-		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
-	preset="radio"
-	class={[
-		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-h-fit cursor-pointer place-items-center rounded-full border p-0',
-		isDisabled && 'pointer-events-none opacity-50',
-		'$preset',
-		toClassValue.apply(null, [klass, {}])
-	]}
-	as="label"
-	{...restProps}
->
-	<Stack.Item class="pointer-events-none flex size-full">
-		<input
-			bind:group={proxy.current}
-			{id}
-			{value}
-			class="pointer-events-auto size-0 opacity-0"
-			type="radio"
-			name={_name ?? name}
-			disabled={isDisabled}
-			required={isRequired}
-			readonly={isReadonly}
-			onchange={handleChange}
-			oninput={handleInput}
-		/>
-	</Stack.Item>
-
-	{#if isChecked}
-		{#if checkedContent}
-			<HtmlAtom
-				class="rounded-inherit pointer-events-none size-full scale-50 bg-current"
-				base={checkedContent}
-			/>
-		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-full scale-50 bg-current" />
-		{/if}
-	{/if}
-</Stack.Root>
+<script lang="ts">
+	import { getRadioGroupContext } from './context';
+	import { Stack } from '../stack';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const radioGroupContext = getRadioGroupContext();
+
+	let {
+		class: klass = '',
+		value = $bindable(undefined),
+		group = $bindable(),
+		id = undefined,
+		name = undefined,
+		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
+	preset="radio"
+	class={[
+		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-h-fit max-w-fit cursor-pointer place-items-center rounded-full border p-0',
+		isDisabled && 'pointer-events-none opacity-50',
+		'$preset',
+		toClassValue.apply(null, [klass, {}])
+	]}
+	as="label"
+	{...restProps}
+>
+	<Stack.Item class="pointer-events-none flex size-full">
+		<input
+			bind:group={proxy.current}
+			{id}
+			{value}
+			class="pointer-events-auto size-0 opacity-0"
+			type="radio"
+			name={_name ?? name}
+			disabled={isDisabled}
+			required={isRequired}
+			readonly={isReadonly}
+			onchange={handleChange}
+			oninput={handleInput}
+		/>
+	</Stack.Item>
+
+	{#if isChecked}
+		{#if checkedContent}
+			<HtmlAtom
+				class="rounded-inherit pointer-events-none size-full scale-50 bg-current"
+				base={checkedContent}
+			/>
+		{:else}
+			<Stack.Item class="rounded-inherit pointer-events-none size-full scale-50 bg-current" />
+		{/if}
+	{/if}
+</Stack.Root>

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

@@ -0,0 +1,98 @@
+import { type Component, type Snippet } from 'svelte';
+import { type HtmlAtomProps } from '../atom';
+/**
+ * Extend this interface to add custom radio properties in your application.
+ */
+export interface RadioExtendProps {
+}
+/**
+ * Extend this interface to add custom radio group properties in your application.
+ */
+export interface RadioGroupExtendProps {
+}
+export interface RadioProps<T = string> extends HtmlAtomProps<'label'>, RadioExtendProps {
+    /**
+     * The value of the radio button
+     */
+    value?: T;
+    /**
+     * The currently selected value (for standalone radios)
+     */
+    group?: T;
+    /**
+     * The id attribute of the radio input
+     */
+    id?: string;
+    /**
+     * The name attribute of the radio input
+     */
+    name?: string;
+    /**
+     * Whether the radio button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the radio button is required
+     */
+    required?: boolean;
+    /**
+     * Whether the radio button is readonly
+     */
+    readonly?: boolean;
+    /**
+     * Custom content to display when the radio is checked
+     */
+    checkedContent?: Component | Snippet;
+    /**
+     * Child content (label text)
+     */
+    children?: Snippet<[]>;
+    /**
+     * Change event handler
+     */
+    onchange?: (ev: Event, options?: {
+        checked: boolean;
+        value: boolean;
+        type: 'boolean';
+    }) => void;
+    /**
+     * Input event handler
+     */
+    oninput?: (ev: Event, options?: {
+        checked: boolean;
+        value: boolean;
+        type: 'boolean';
+    }) => void;
+}
+export interface RadioGroupProps<T = string> extends HtmlAtomProps<'div'>, RadioGroupExtendProps {
+    /**
+     * The currently selected value
+     */
+    value?: T;
+    /**
+     * Whether all radio buttons in the group are disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether all radio buttons in the group are required
+     */
+    required?: boolean;
+    /**
+     * Whether all radio buttons in the group are readonly
+     */
+    readonly?: boolean;
+    /**
+     * The name attribute shared by all radio buttons in the group
+     */
+    name?: string;
+    /**
+     * Child content (radio buttons)
+     */
+    children?: Snippet<[]>;
+    /**
+     * Input event handler triggered when the selected value changes
+     */
+    oninput?: (ev: CustomEvent, options?: {
+        value: T;
+    }) => void;
+}

package/dist/components/radio/types.js

@@ -0,0 +1,2 @@
+import {} from 'svelte';
+import {} from '../atom';

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

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

package/dist/components/root/index.js

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

package/dist/components/root/l0-portal.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { Portal } from "../portal";
+
+</script>
+
+<Portal.Outer id="root.l0" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+	<Portal.Inner />
+</Portal.Outer>

package/dist/components/{radio/types.svelte.d.ts → root/l0-portal.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default Types;
-type Types = SvelteComponent<{
+export default L0Portal;
+type L0Portal = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string;
 };
-declare const Types: $$__sveltets_2_IsomorphicComponent<{
+declare const L0Portal: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/root/l1-portal.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { Portal } from '../portal';
+</script>
+
+<Portal.Outer id="root.l1" class="pointer-events-none absolute inset-0 z-12 overflow-hidden">
+	<Portal.Inner />
+</Portal.Outer>

package/dist/components/root/l1-portal.svelte.d.ts

@@ -0,0 +1,26 @@
+export default L1Portal;
+type L1Portal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const L1Portal: $$__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;
+}