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

package/dist/components/portal/teleport.svelte

@@ -1,50 +1,49 @@
-<script module lang="ts">
-	export type { TeleportProps } from './types';
-</script>
-
-<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 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>;
-
-	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
-		$props();
-
-	const portalsBond = PortalsBond.get();
-	const rootBond = RootBond.get();
-
-	const portalBond = $derived.by(() => {
-		if (typeof portal === 'string') {
-			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
-		}
-
-		return portal;
-	});
-
-	const targetElement = $derived(portalBond?.targetElement);
-
-	function _port(node: HTMLElement) {
-		const hidden = node.hidden;
-
-		node.hidden = true;
-
-		const unport = port(node, targetElement);
-
-		node.hidden = hidden;
-
-		return unport;
-	}
-</script>
-
-{#if targetElement && portal}
-	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
-		{@render children?.({ portal: portalBond })}
-	</HtmlAtom>
-{/if}
+<script module lang="ts">
+	export type { TeleportProps } from './types';
+</script>
+
+<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 Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { PortalsBond } from './portals';
+	import { RootBond } from '../root/bond.svelte';
+	import { port } from './utils';
+
+	type Element = HtmlElementType<E>;
+
+	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
+		$props();
+
+	const portalsBond = PortalsBond.get();
+	const rootBond = RootBond.get();
+
+	const portalBond = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
+		}
+
+		return portal;
+	});
+
+	const targetElement = $derived(portalBond?.targetElement);
+
+	function _port(node: HTMLElement) {
+		const hidden = node.hidden;
+
+		node.hidden = true;
+
+		const unport = port(node, targetElement);
+
+		node.hidden = hidden;
+
+		return unport;
+	}
+</script>
+
+{#if targetElement && portal}
+	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
+		{@render children?.({ portal: portalBond })}
+	</HtmlAtom>
+{/if}

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

@@ -72,7 +72,7 @@
 <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',
+		'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, {}])

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/root.svelte

@@ -4,23 +4,22 @@
 
 <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 { HtmlAtom as Atom } from '../atom';
 	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
 
 	let {
 		class: klass = '',
-		base,
+		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;
+	let html: typeof HtmlElement | undefined = $state(HtmlElement);
+	let svg: typeof SvgElement | undefined = $state(undefined);
+	let mathml: typeof MathmlElement | undefined = $state(undefined);
 
 	type Renderers = {
 		html?: typeof HtmlElement;
@@ -65,14 +64,14 @@
 </script>
 
 <Portals id="root">
-	<Stack.Root
+	<Atom
 		{@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 justify-stretch font-sans',
+			'atom-root bg-background text-foreground relative flex h-full w-full flex-1 flex-col items-start justify-stretch font-sans',
 			'$preset',
 			klass
 		)}
@@ -81,35 +80,19 @@
 		{#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.Outer 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.Outer 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.Outer 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.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
 				<Portal.Inner />
 			</Portal.Outer>
 		{/if}
@@ -117,5 +100,5 @@
 		<ActivePortal portal="root.l0">
 			{@render children?.()}
 		</ActivePortal>
-	</Stack.Root>
+	</Atom>
 </Portals>

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

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

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

@@ -5,7 +5,7 @@ declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     exports: {
         getBond: () => ScrollableBond;
     };
-    bindings: "scrollX" | "clientWidth" | "scrollWidth" | "scrollY" | "clientHeight" | "scrollHeight";
+    bindings: "clientHeight" | "clientWidth" | "scrollHeight" | "scrollWidth" | "scrollX" | "scrollY";
     slots: {};
     events: {};
 };
@@ -13,7 +13,7 @@ declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "scrollX" | "clientWidth" | "scrollWidth" | "scrollY" | "clientHeight" | "scrollHeight";
+    bindings(): "clientHeight" | "clientWidth" | "scrollHeight" | "scrollWidth" | "scrollX" | "scrollY";
     exports(): {
         getBond: () => ScrollableBond;
     };