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

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-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-1/2 bg-current"
-				base={checkedContent}
-			/>
-		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-1/2 bg-current"></Stack.Item>
-		{/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/root.svelte

@@ -1,121 +1,104 @@
-<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 portal="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</HtmlAtom>
-</Portals>
+<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 { Portal, ActivePortal, Portals } from '../portal';
+	import { HtmlAtom as Atom } from '../atom';
+	import { HtmlElement, MathmlElement, SvgElement } from '../element';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+
+	let {
+		class: klass = '',
+		base = undefined,
+		children = undefined,
+		portals = undefined,
+		...restProps
+	} = $props();
+
+	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;
+		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">
+	<Atom
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex h-full w-full flex-1 flex-col items-start justify-stretch font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portals}
+			{@render portals?.()}
+		{:else}
+			<Portal.Outer id="root.l0" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer id="root.l1" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer id="root.l2" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+				<Portal.Inner />
+			</Portal.Outer>
+
+			<Portal.Outer id="root.l3" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal portal="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</Atom>
+</Portals>

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;
     };