@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/select/select-selections.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { HtmlAtom as Atom } from '../atom';
+	import SelectSelection from './select-selection.svelte';
+	import { SelectBond } from './bond.svelte';
+	import type { SelectSelectionsProps } from './types';
+	import { onMount, type Component } from 'svelte';
+
+	const bond = SelectBond.get();
+
+	if (!bond) {
+		throw new Error('SelectSelections must be used within a Select');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		getSelections = undefined,
+		Selection = SelectSelection as unknown as Component,
+		...restProps
+	}: SelectSelectionsProps = $props();
+
+	let isMounted = $state(false);
+
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const selections = $derived.by(() => {
+		void isMounted; // ensure re-computation after mount
+
+		if (getSelections) {
+			return getSelections(bond);
+		}
+
+		return bond.state.selections.map((controller) => ({
+			id: controller.id,
+			value: controller.value,
+			get label() {
+				return controller.label;
+			},
+			unselect() {
+				controller.unselect();
+			},
+			get createdAt() {
+				return controller.createdAt;
+			},
+			controller
+		}));
+	});
+	const isMultiple = $derived(bond.state.props.multiple);
+</script>
+
+{#if isMultiple && selections.length}
+	<Atom class={['flex flex-wrap items-center gap-2', klass]} {...restProps}>
+		{#if children}
+			{@render children?.({ selections: selections, selection: selections[0] })}
+		{:else}
+			{#each selections as selection (selection.id)}
+				<Selection {selection}>
+					{selection.label}
+				</Selection>
+			{/each}
+		{/if}
+	</Atom>
+{:else if children && selections[0]}
+	{@render children?.({ selections: selections, selection: selections[0] })}
+{:else if selections[0]}
+	{@const selection = selections[0]}
+	{selection.label}
+{/if}

package/dist/components/select/select-selections.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SelectSelectionsProps } from './types';
+import { type Component } from 'svelte';
+declare const SelectSelections: Component<SelectSelectionsProps, {}, "">;
+type SelectSelections = ReturnType<typeof SelectSelections>;
+export default SelectSelections;

package/dist/components/select/select-trigger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Trigger } from '../popover/atoms';
+	import type { Base } from '../atom';
+	import { SelectBond } from './bond.svelte';
+	import type { SelectTriggerProps } from './types';
+
+	const bond = SelectBond.get();
+
+	if (!bond) {
+		throw new Error('select atom was not found');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as T,
+		preset = 'select.trigger',
+		children = undefined,
+		...restProps
+	}: SelectTriggerProps<T, B> = $props();
+</script>
+
+<Trigger
+	{as}
+	{bond}
+	preset={preset}
+	class={['border-border relative flex h-auto min-h-10 flex-wrap items-center', '$preset', klass]}
+	{...restProps}
+>
+	{@render children?.({ select: bond, dropdown: bond })}
+</Trigger>

package/dist/components/select/select-trigger.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Base } from '../atom';
+import type { SelectTriggerProps } from './types';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: SelectTriggerProps<T, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, B>>['props'];
+    events(): ReturnType<typeof $$render<T, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, B>['props']>, ReturnType<__sveltets_Render<T, B>['events']>, ReturnType<__sveltets_Render<T, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, B>['exports']>;
+    <T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const SelectTrigger: $$IsomorphicComponent;
+type SelectTrigger<T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof SelectTrigger<T, B>>;
+export default SelectTrigger;

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

@@ -0,0 +1,61 @@
+import type { Component, Snippet } from 'svelte';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
+import type { Factory, Override } from '../../types';
+import type { SelectBond } from './bond.svelte';
+import type { PopoverTriggerProps } from '../popover';
+import type { ClassValue } from 'svelte/elements';
+import type { SelectItemController } from './item';
+export interface SelectSnippetProps extends SnippetProps {
+    select: SelectBond<any>;
+    /** @deprecated Use `select` */
+    dropdown: SelectBond<any>;
+}
+export type SelectChildren = Snippet<[SelectSnippetProps]>;
+export interface SelectRootProps<T = any> {
+    open?: boolean;
+    value?: T;
+    values?: T[];
+    label?: string;
+    labels?: string[];
+    multiple?: boolean;
+    disabled?: boolean;
+    placements?: string[];
+    placement?: string;
+    offset?: number;
+    keys?: string[];
+    factory?: Factory<SelectBond>;
+    children?: SelectChildren;
+    onquerychange?: (query: string) => void;
+}
+export interface SelectTriggerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<PopoverTriggerProps<E, B>, {
+    children?: SelectChildren;
+}> {
+}
+export interface SelectSelectionsProps {
+    class?: ClassValue;
+    Selection?: Component | undefined;
+    children?: Snippet<[
+        {
+            selections: SelectSelection[];
+            selection?: SelectSelection | undefined;
+        }
+    ]>;
+    getSelections?: <T extends SelectBond>(bond: T) => SelectSelection[];
+}
+export interface SelectSelectionProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+    selection: SelectSelection;
+    children?: Snippet;
+    onclose?: (event: Event) => void;
+}
+export interface SelectQueryProps extends HtmlAtomProps<'input'> {
+    value?: string;
+    children?: Snippet;
+}
+export interface SelectSelection {
+    readonly id: string;
+    readonly value?: string;
+    readonly label: string;
+    readonly createdAt: Date;
+    unselect: () => void;
+    controller?: SelectItemController<unknown>;
+}

package/dist/components/select/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type SidebarBondProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
     open: boolean;
     disabled: boolean;
@@ -10,15 +10,17 @@ export type SidebarElements = {
     root: HTMLElement;
     content: HTMLElement;
 };
-export declare class SidebarBond<Props extends SidebarBondProps = SidebarBondProps, State extends SidebarBondState<Props> = SidebarBondState<Props>> extends Bond<Props, State, SidebarElements> {
-    static CONTEXT_KEY: string;
-    constructor(state: State);
-    content(props?: Record<string, unknown>): {
+declare class SidebarContentAtom extends BondAtom<SidebarBond, HTMLElement> {
+    constructor(bond: SidebarBond);
+    get attrs(): {
         'aria-expanded': boolean;
         'aria-disabled': boolean;
-        'data-atom': string;
-        'data-kind': string;
     };
+}
+export declare class SidebarBond<Props extends SidebarBondProps = SidebarBondProps, State extends SidebarBondState<Props> = SidebarBondState<Props>> extends Bond<Props, State, SidebarElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: State);
+    content(): SidebarContentAtom;
     share(): this;
     static get(): SidebarBond | undefined;
     static set(bond: SidebarBond): SidebarBond;
@@ -29,3 +31,4 @@ export declare class SidebarBondState<Props extends SidebarBondProps = SidebarBo
     close(): void;
     toggle(): void;
 }
+export {};

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

@@ -1,22 +1,27 @@
-import { createAttachmentKey } from 'svelte/attachments';
-import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte.js';
+import { getContext, setContext, untrack } from 'svelte';
+import { Bond, BondState, BondAtom } from '../../shared/bond.svelte';
+class SidebarContentAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'content');
+    }
+    get attrs() {
+        const props = untrack(() => this.bond.state.props);
+        const isOpen = props?.open ?? false;
+        const isDisabled = props?.disabled ?? false;
+        return {
+            ...super.attrs,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled
+        };
+    }
+}
 export class SidebarBond extends Bond {
     static CONTEXT_KEY = '@atomic-sv/bonds/sidebar';
     constructor(state) {
-        super(state);
+        super(state, 'sidebar');
     }
-    content(props = {}) {
-        return {
-            'aria-expanded': this.state?.props?.open ?? false,
-            'aria-disabled': this.state?.props?.disabled ?? false,
-            'data-atom': this.id,
-            'data-kind': 'sidebar-content',
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.content = node;
-            }
-        };
+    content() {
+        return this.atom('content', () => new SidebarContentAtom(this));
     }
     share() {
         return SidebarBond.set(this);

package/dist/components/sidebar/sidebar-content.svelte

@@ -19,7 +19,7 @@
 	}: SidebarRootProps<E, B> = $props();
 
 	const contentProps = $derived({
-		...bond?.content(),
+		...bond?.content().spread,
 		...restProps
 	});
 </script>

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

@@ -1,41 +1,50 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { type Base } from '../atom';
-	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
-	import type { SidebarRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: SidebarRootProps<E, B> = $props();
-
-	const bondProps = defineState<SidebarBondProps>([
-		defineProperty(
-			'open',
-			() => open,
-			(v) => {
-				open = v;
-			}
-		),
-		defineProperty('disabled', () => disabled),
-		defineProperty('rest', () => restProps)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const bondState = new SidebarBondState(() => props);
-		const bond = new SidebarBond(bondState);
-
-		return bond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ sidebar: bond })}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { type Base } from '../atom';
+	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
+	import type { SidebarRootProps } from './types';
+	import { ZLayer } from '../portal/zlayer.svelte';
+	import { untrack } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		"z-index": zindex = 0,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: SidebarRootProps<E, B> = $props();
+
+	const normalizedZIndex = $derived(
+		typeof zindex === 'number' && Number.isFinite(zindex) ? zindex : undefined
+	);
+
+	new ZLayer('sidebar', () => normalizedZIndex ?? 0).share();
+
+	const bondProps = defineState<SidebarBondProps>([
+		defineProperty(
+			'open',
+			() => open,
+			(v) => {
+				open = v;
+			}
+		),
+		defineProperty('disabled', () => disabled),
+		defineProperty('rest', () => restProps)
+	]);
+
+	const bond = untrack(() => factory(bondProps)).share();
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new SidebarBondState(() => props);
+		const bond = new SidebarBond(bondState);
+
+		return bond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ sidebar: bond })}

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

@@ -1,21 +1,16 @@
-import type { Factory } from '../../types';
+import type { Snippet } from 'svelte';
 import type { SidebarBond } from './bond.svelte';
-import type { Base, HtmlAtomProps } from '../atom';
-/**
- * Extend this interface to add custom slideover root properties in your application.
- */
-export interface SidebarRootExtendProps {
+import type { Base, HtmlAtomProps, SnippetProps } from '../atom';
+export interface SidebarSnippetProps extends SnippetProps {
+    sidebar: SidebarBond;
 }
-/**
- * Extend this interface to add custom slideover content properties in your application.
- */
-export interface SidebarContentExtendProps {
-}
-export interface SidebarRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, SidebarRootExtendProps {
+export type SidebarChildren = Snippet<[SidebarSnippetProps]>;
+export type SidebarRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, SidebarChildren> & {
+    "z-index"?: number;
     open?: boolean;
     disabled?: boolean;
     width?: string | number;
-    factory?: Factory<SidebarBond>;
-}
-export interface SidebarContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends HtmlAtomProps<E, B>, SidebarContentExtendProps {
+    factory?: (props: any) => SidebarBond;
+};
+export interface SidebarContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends HtmlAtomProps<E, B, SidebarChildren> {
 }

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

@@ -0,0 +1,2 @@
+export { default as Slider } from './slider.svelte';
+export * from './types';

package/dist/components/slider/index.js

@@ -0,0 +1,2 @@
+export { default as Slider } from './slider.svelte';
+export * from './types';

package/dist/components/slider/slider.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { SliderChangeDetails, SliderProps } from './types';
+
+	let {
+		class: klass = '',
+		value = $bindable(0),
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		id,
+		name,
+		orientation = 'horizontal',
+		preset = 'slider',
+		thumbContent = undefined,
+		trackContent = undefined,
+		onchange = undefined,
+		oninput = undefined,
+		children = undefined,
+		...restProps
+	}: SliderProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	function clampNumber(current: number, lower: number, upper: number) {
+		if (!Number.isFinite(current)) return lower;
+		return Math.min(upper, Math.max(lower, current));
+	}
+
+	const normalizedMin = $derived(Math.min(min, max));
+	const normalizedMax = $derived(Math.max(min, max));
+	const normalizedStep = $derived(step > 0 ? step : 1);
+
+	const normalizedValue = $derived(clampNumber(value, normalizedMin, normalizedMax));
+	const isVertical = $derived(orientation === 'vertical');
+	const percent = $derived.by(() => {
+		const range = normalizedMax - normalizedMin;
+		if (range <= 0) return 0;
+		return ((normalizedValue - normalizedMin) / range) * 100;
+	});
+
+	$effect(() => {
+		const nextValue = clampNumber(value, normalizedMin, normalizedMax);
+		if (nextValue !== value) {
+			value = nextValue;
+		}
+	});
+
+	function createDetails(currentValue: number): SliderChangeDetails {
+		const range = normalizedMax - normalizedMin;
+		const currentPercent = range <= 0 ? 0 : ((currentValue - normalizedMin) / range) * 100;
+
+		return {
+			value: currentValue,
+			percent: currentPercent,
+			min: normalizedMin,
+			max: normalizedMax,
+			step: normalizedStep,
+			type: 'number'
+		};
+	}
+
+	function handleInput(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		const nextValue = clampNumber(Number(input.value), normalizedMin, normalizedMax);
+		value = nextValue;
+		oninput?.(ev, createDetails(nextValue));
+	}
+
+	function handleChange(ev: Event) {
+		const input = ev.currentTarget as HTMLInputElement;
+		const nextValue = clampNumber(Number(input.value), normalizedMin, normalizedMax);
+		value = nextValue;
+		onchange?.(ev, createDetails(nextValue));
+	}
+</script>
+
+{#snippet defaultTrack()}
+	<HtmlAtom
+		preset="slider.track"
+		as="div"
+		class={[
+			'slider-track bg-input border-border relative overflow-hidden rounded-full',
+			isVertical ? 'h-full w-2' : 'h-2 w-full',
+			'$preset'
+		]}
+	>
+		<HtmlAtom
+			preset="slider.fill"
+			as="div"
+			class={[
+				'slider-fill bg-foreground absolute rounded-full',
+				isVertical ? 'bottom-0 left-0 w-full' : 'left-0 top-0 h-full',
+				'$preset'
+			]}
+			style={isVertical ? `height: ${percent}%` : `width: ${percent}%`}
+		/>
+	</HtmlAtom>
+{/snippet}
+
+{#snippet defaultThumb()}
+	<div class="bg-foreground border-border h-full w-full rounded-full shadow-sm shadow-black/50"></div>
+{/snippet}
+
+{#snippet thumbWrapper()}
+	<HtmlAtom
+		preset="slider.thumb"
+		as="div"
+		class={[
+			'slider-thumb pointer-events-none absolute h-5 w-5',
+			isVertical
+				? 'left-1/2 -translate-x-1/2 translate-y-1/2'
+				: 'top-1/2 -translate-x-1/2 -translate-y-1/2',
+			'$preset'
+		]}
+		style={isVertical ? `bottom: ${percent}%` : `left: ${percent}%`}
+	>
+		{@render (thumbContent ?? defaultThumb)({ value: normalizedValue, percent })}
+	</HtmlAtom>
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={[
+		'slider-root relative flex items-center',
+		isVertical ? 'h-full w-6 flex-col' : 'h-6 w-full flex-row',
+		disabled && 'cursor-not-allowed opacity-50',
+		'$preset',
+		klass
+	]}
+	aria-orientation={orientation}
+	{...restProps}
+>
+	{@render (trackContent ?? defaultTrack)({ value: normalizedValue, percent, min: normalizedMin, max: normalizedMax })}
+
+	<!-- Native range input — invisible, full coverage, handles all a11y + keyboard -->
+	<input
+		{id}
+		{name}
+		min={normalizedMin}
+		max={normalizedMax}
+		step={normalizedStep}
+		{disabled}
+		type="range"
+		value={normalizedValue}
+		oninput={handleInput}
+		onchange={handleChange}
+		class={[
+			'slider-input absolute inset-0 h-full w-full cursor-pointer opacity-0',
+			disabled && 'cursor-not-allowed'
+		]}
+		style={isVertical ? 'writing-mode: vertical-lr; direction: rtl; touch-action: none;' : undefined}
+		aria-valuemin={normalizedMin}
+		aria-valuemax={normalizedMax}
+		aria-valuenow={normalizedValue}
+		aria-orientation={orientation}
+		aria-disabled={disabled || undefined}
+	/>
+
+	{@render thumbWrapper()}
+</HtmlAtom>
+
+{@render children?.()}

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

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SliderProps } from './types';
+type $$ComponentProps = SliderProps & HTMLAttributes<HTMLDivElement>;
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

@@ -0,0 +1,78 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps } from '../atom';
+export interface SliderChangeDetails {
+    value: number;
+    percent: number;
+    min: number;
+    max: number;
+    step: number;
+    type: 'number';
+}
+export interface SliderProps extends HtmlAtomProps<'div'> {
+    /**
+     * Current value
+     */
+    value?: number;
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Whether the slider is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The id forwarded to the hidden input
+     */
+    id?: string;
+    /**
+     * The name forwarded to the hidden input
+     */
+    name?: string;
+    /**
+     * Orientation of the slider
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Custom thumb — replaces the default circular thumb.
+     * Receives `{ value, percent }` and is rendered inside the positioned thumb wrapper.
+     */
+    thumbContent?: Snippet<[{
+        value: number;
+        percent: number;
+    }]>;
+    /**
+     * Custom track — replaces the default track + fill bar.
+     * Receives `{ value, percent, min, max }`.
+     */
+    trackContent?: Snippet<[{
+        value: number;
+        percent: number;
+        min: number;
+        max: number;
+    }]>;
+    /**
+     * Child content (e.g. label rendered after the slider root)
+     */
+    children?: Snippet<[]>;
+    /**
+     * Change handler (fires on release)
+     */
+    onchange?: (ev?: Event, options?: SliderChangeDetails) => void;
+    /**
+     * Input handler (fires continuously while dragging)
+     */
+    oninput?: (ev?: Event, options?: SliderChangeDetails) => void;
+}

package/dist/components/slider/types.js

@@ -0,0 +1 @@
+export {};