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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Abdelhalim Riache [https://github.com/ryu-man](https://github.com/ryu-man)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Abdelhalim Riache [https://github.com/ryu-man](https://github.com/ryu-man)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,245 +1,108 @@
 # @svelte-atoms/core
 
-> A modern, modular, and accessible Svelte 5 UI component library built with composability at its core.
+> A modern, headless, and accessible Svelte 5 UI component library built for composability and extensibility.
 
 [![npm version](https://img.shields.io/npm/v/@svelte-atoms/core.svg)](https://www.npmjs.com/package/@svelte-atoms/core)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/svelte-atoms/core)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 
-## Features
+## Why Svelte Atoms?
 
-- **Bond Architecture** - Self-contained state management with context-based communication
-- **Accessible** - ARIA attributes, keyboard navigation, and focus management included
-- **Type Safe** - Full TypeScript support with comprehensive type definitions
-- **Headless** - Complete styling control with sensible defaults
-- **Composable** - Build complex UIs by combining simple, reusable components
-- **Svelte 5 Runes** - Optimized reactivity and performance
+- **🎯 Headless First** - Complete styling control with sensible defaults
+- **🔗 Bond Architecture** - Self-contained state management with context-based communication
+- **♿ Accessible** - ARIA attributes, keyboard navigation, and focus management included
+- **🎨 Composable** - Build complex UIs by combining simple, reusable components
+- **📘 Type Safe** - Full TypeScript support with extensible type definitions
+- **⚡ Svelte 5 Native** - Built for Svelte 5 runes, snippets, and modern reactivity
 
-## Documentation
-
-- **[Documentation](https://sacore.netlify.app/)** - Complete guides, API references, and examples
-- **[Storybook](https://statuesque-boba-0fb888.netlify.app/)** - Interactive component playground
-
-## Installation
+## Quick Start
 
 ```bash
 npm install @svelte-atoms/core
 ```
 
-## Usage
-
-### Basic Example
-
 ```svelte
 <script lang="ts">
-	import { Button, Dialog, Input } from '@svelte-atoms/core';
+	import { Button, Dialog } from '@svelte-atoms/core';
 
-	let dialogOpen = $state(false);
-	let inputValue = '';
+	let open = $state(false);
 </script>
 
-<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>
+<Button onclick={() => (open = true)}>Open Dialog</Button>
 
-<Dialog.Root bind:open={dialogOpen}>
+<Dialog.Root bind:open>
 	<Dialog.Content>
 		<Dialog.Header>
-			<Dialog.Title>Enter your name</Dialog.Title>
+			<Dialog.Title>Welcome</Dialog.Title>
 		</Dialog.Header>
 		<Dialog.Body>
-			<Input.Root>
-				<Input.Control bind:value={inputValue} placeholder="Your name..." />
-			</Input.Root>
+			<p>This is a headless, accessible dialog component.</p>
 		</Dialog.Body>
 		<Dialog.Footer>
-			<Button onclick={() => (dialogOpen = false)}>Cancel</Button>
-			<Button variant="primary" onclick={() => (dialogOpen = false)}>Confirm</Button>
+			<Button onclick={() => (open = false)}>Close</Button>
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
 ```
 
-### Composable Components
-
-Combine components to create complex UIs:
-
-```svelte
-<script lang="ts">
-	import { Dropdown, Input, Root, filter } from '@svelte-atoms/core';
-	import { flip } from 'svelte/animate';
-
-	let data = [
-		{ id: 1, value: 'apple', text: 'Apple' },
-		{ id: 2, value: 'banana', text: 'Banana' },
-		{ id: 3, value: 'cherry', text: 'Cherry' }
-	];
-
-	let open = $state(false);
-	const dd = filter(
-		() => data,
-		(query, item) => item.text.toLowerCase().includes(query.toLowerCase())
-	);
-</script>
-
-<Dropdown.Root
-	bind:open
-	multiple
-	keys={data.map((item) => item.value)}
-	onquerychange={(q) => (dd.query = q)}
->
-	{#snippet children({ dropdown })}
-		<Dropdown.Trigger
-			base={Input.Root}
-			onclick={(ev) => {
-				ev.preventDefault();
-				dropdown.state.open();
-			}}
-		>
-			{#each dropdown?.state?.selectedItems ?? [] as item (item.id)}
-				<div animate:flip={{ duration: 200 }}>
-					<Dropdown.Value value={item.value}>{item.text}</Dropdown.Value>
-				</div>
-			{/each}
-			<Dropdown.Query placeholder="Search..." />
-		</Dropdown.Trigger>
-
-		<Dropdown.Content>
-			{#each dd.current as item (item.id)}
-				<div animate:flip={{ duration: 200 }}>
-					<Dropdown.Item value={item.value}>{item.text}</Dropdown.Item>
-				</div>
-			{/each}
-		</Dropdown.Content>
-	{/snippet}
-</Dropdown.Root>
-```
+## Core Concepts
 
-### Extensibility with `as` and `base` Props
+### Composability with `base` and `as`
 
-Transform components into any element or wrap them with custom logic:
+Transform any component into another element or wrap it with custom logic:
 
 ```svelte
 <script lang="ts">
 	import { Button, Popover, Input } from '@svelte-atoms/core';
 </script>
 
-<!-- Use Button as Popover trigger -->
-<Popover.Root>
-	<Popover.Trigger base={Button} variant="outline">Open Popover</Popover.Trigger>
-	<Popover.Content class="p-4">
-		<h4 class="font-semibold">Settings</h4>
-		<p class="text-sm">Configure your preferences here.</p>
-	</Popover.Content>
-</Popover.Root>
-
-<!-- Use Input.Root as Popover trigger -->
+<!-- Button as Popover trigger -->
 <Popover.Root>
-	<Popover.Trigger base={Input.Root}>
-		<Input.Control placeholder="Click to open popover..." readonly />
+	<Popover.Trigger base={Button} variant="outline">
+		Open Popover
 	</Popover.Trigger>
-	<Popover.Content class="p-4">
-		<p class="text-sm">Popover triggered by an input field</p>
+	<Popover.Content>
+		<p>Configure your preferences here.</p>
 	</Popover.Content>
 </Popover.Root>
-```
-
-### Working with Animations
 
-Seamlessly integrate with Svelte's animation system:
-
-```svelte
-<script lang="ts">
-	import { List, Button } from '@svelte-atoms/core';
-	import { flip } from 'svelte/animate';
-	import { slide } from 'svelte/transition';
-
-	let items = $state([
-		{ id: 1, text: 'Task 1' },
-		{ id: 2, text: 'Task 2' },
-		{ id: 3, text: 'Task 3' }
-	]);
-
-	function removeItem(id: number) {
-		items = items.filter((item) => item.id !== id);
-	}
-</script>
-
-<List.Root>
-	{#each items as item (item.id)}
-		<div animate:flip={{ duration: 300 }}>
-			<List.Item>
-				<span>{item.text}</span>
-				<Button size="sm" onclick={() => removeItem(item.id)}>Remove</Button>
-			</List.Item>
-		</div>
-	{/each}
-</List.Root>
+<!-- Input as Dropdown trigger -->
+<Dropdown.Root>
+	<Dropdown.Trigger base={Input.Root}>
+		<Input.Control placeholder="Search..." />
+	</Dropdown.Trigger>
+	<Dropdown.Content>
+		<!-- items -->
+	</Dropdown.Content>
+</Dropdown.Root>
 ```
 
-Advanced animation with lifecycle hooks using Motion:
-
-```svelte
-<script lang="ts">
-	import { Dialog, Button, toTransitionConfig } from '@svelte-atoms/core';
-	import { animate } from 'motion';
-
-	let open = $state(false);
-</script>
+### Typed Snippets for Extensibility
 
-<Button onclick={() => (open = true)}>Open Dialog</Button>
+All components expose typed snippet props for maximum flexibility:
 
-<Dialog.Root bind:open>
-	<Dialog.Overlay
-		initial={(node) => {
-			node.style.opacity = '0';
-		}}
-		enter={(node) => {
-			const duration = 0.2;
-			const animation = animate(node, { opacity: 1 }, { duration });
-			return { duration };
-		}}
-		exit={(node) => {
-			const duration = 0.1;
-			const animation = animate(node, { opacity: 0 }, { duration: 0.1 });
-			return { duration };
-		}}
-	/>
-	<Dialog.Content
-		initial={(node) => {
-			node.style.opacity = '0';
-			node.style.scale = '0.95';
-		}}
-		enter={(node) => {
-			const duration = 0.3;
-			const animation = animate(node, { opacity: 1, scale: 1 }, { duration, easing: 'ease-out' });
-			return { duration };
-		}}
-		exit={(node) => {
-			const animation = animate(node, { opacity: 0, scale: 0.95 }, { duration, easing: 'ease-in' });
-			return { duration };
-		}}
-	>
-		<Dialog.Header>
-			<Dialog.Title>Animated Dialog</Dialog.Title>
-		</Dialog.Header>
-		<Dialog.Body>
-			<p>This dialog animates with custom Motion transitions using lifecycle hooks.</p>
-		</Dialog.Body>
-		<Dialog.Footer>
-			<Button onclick={() => (open = false)}>Close</Button>
-		</Dialog.Footer>
-	</Dialog.Content>
+```svelte
+<Dialog.Root>
+	{#snippet children({ dialog })}
+		<Dialog.Content>
+			<Dialog.Body>
+				<p>Access the dialog bond directly</p>
+				<button onclick={() => dialog.close()}>Close via bond</button>
+			</Dialog.Body>
+		</Dialog.Content>
+	{/snippet}
 </Dialog.Root>
 ```
 
 ### Styling with Variants
 
-Variants can be created locally at component level or globally in the preset configuration:
+Create reusable variants locally or globally:
 
 ```typescript
 import { defineVariants } from '@svelte-atoms/core/utils';
 
 const buttonVariants = defineVariants({
-	class: 'inline-flex items-center justify-center rounded-md font-medium',
+	class: 'inline-flex items-center justify-center rounded-md',
 	variants: {
 		variant: {
 			primary: 'bg-blue-500 text-white hover:bg-blue-600',
@@ -258,32 +121,39 @@ const buttonVariants = defineVariants({
 });
 ```
 
+## Components
+
+**Layout:** Container, Stack, Layer, Portal  
+**Forms:** Input, Textarea, Checkbox, Radio, Select, Combobox, Form  
+**Overlays:** Dialog, Drawer, Popover, Tooltip, Toast  
+**Navigation:** Tabs, Sidebar, Menu, Dropdown  
+**Display:** Card, Alert, Badge, Chip, List, Datagrid, Calendar  
+**Utilities:** Root, Lazy, Link, Button
+
+[View all components in Storybook →](https://statuesque-boba-0fb888.netlify.app/)
+
+## Documentation
+
+- **[Full Documentation](https://sacore.netlify.app/)** - Guides, API references, and examples
+- **[Storybook](https://statuesque-boba-0fb888.netlify.app/)** - Interactive component playground
+- **[GitHub](https://github.com/svelte-atoms/core)** - Source code and issues
+
 ## Development
 
 ```bash
-# Clone repository
+# Clone and install
 git clone https://github.com/svelte-atoms/core.git
-cd svelte-atoms
-
-# Install dependencies
+cd core
 bun install
 
 # Start dev server
 bun dev
 
-# Run tests
-bun test
-
 # Build library
 bun run build
 ```
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) file for details.
-
----
+MIT © [Svelte Atoms Team](https://github.com/svelte-atoms)
 
-<div align="center">
-  <p>Built with ❤️ by the Svelte Atoms team</p>
-</div>

package/dist/attachments/clickout.svelte.d.ts

@@ -1 +1,4 @@
-export declare function clickout<T extends Element>(onclick?: (ev: PointerEvent, node?: T) => void, options?: AddEventListenerOptions | undefined): (node: T) => () => void;
+export type ClickoutOptions = AddEventListenerOptions & {
+    type?: 'click' | 'pointerdown' | 'mousedown';
+};
+export declare function clickout<T extends Element>(onclick?: (ev: PointerEvent, node?: T) => void, options?: ClickoutOptions): (node: T) => () => void;

package/dist/attachments/clickout.svelte.js

@@ -1,13 +1,14 @@
 import { on } from 'svelte/events';
 export function clickout(onclick, options) {
     return (node) => {
+        const type = options?.type ?? 'click';
         const handler = (ev) => {
             const target = ev.target;
             if (!node.contains(target)) {
                 onclick?.(ev, node);
             }
         };
-        const cleanup = on(window, 'click', handler, options);
+        const cleanup = on(window, type, handler, options);
         return () => {
             cleanup();
         };

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

@@ -1,66 +1,61 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
-	import type { AccordionRootProps } from './types';
-
-	let {
-		value = $bindable(undefined),
-		values = $bindable([]),
-		data = $bindable([]),
-		class: klass = '',
-		multiple = false,
-		collapsible = false,
-		disabled = false,
-		children = undefined,
-		factory = _factory,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		preset = 'accordion',
-		...restProps
-	}: AccordionRootProps<E, B> = $props();
-
-	const bondProps = defineState<AccordionStateProps>([
-		defineProperty(
-			'values',
-			() => (multiple ? values : ([value].filter(Boolean) as string[])),
-			(v) => {
-				values = v;
-				value = values[0];
-			}
-		),
-		defineProperty('multiple', () => multiple),
-		defineProperty('collapsible', () => collapsible),
-		defineProperty('disabled', () => disabled),
-		defineProperty('rest', () => restProps)
-	]);
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps = bondProps) {
-		const bondState = new AccordionState(() => props);
-
-		return new AccordionBond(bondState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{preset}
-	{bond}
-	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
-	{...rootProps}
->
-	{@render children?.({ accordion: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { AccordionBond, AccordionState, type AccordionStateProps } from './bond.svelte';
+	import type { AccordionRootProps } from './types';
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(undefined),
+		values = $bindable([]),
+		data = $bindable([]),
+		class: klass = '',
+		multiple = false,
+		collapsible = false,
+		disabled = false,
+		children = undefined,
+		factory = _factory,
+		preset = 'accordion',
+		...restProps
+	}: AccordionRootProps<E, B> = $props();
+
+	const bondProps = defineState<AccordionStateProps>([
+		defineProperty(
+			'values',
+			() => (multiple ? values : ([value].filter(Boolean) as string[])),
+			(v) => {
+				values = v;
+				value = values[0];
+			}
+		),
+		defineProperty('multiple', () => multiple),
+		defineProperty('collapsible', () => collapsible),
+		defineProperty('disabled', () => disabled),
+		defineProperty('rest', () => restProps)
+	]);
+	const bond = untrack(()=> factory(bondProps)).share();
+
+	const rootProps = $derived({
+		...bond.root().spread,
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps = bondProps) {
+		const bondState = new AccordionState(() => props);
+
+		return new AccordionBond(bondState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{preset}
+	{bond}
+	class={['bg-card border-border flex list-none flex-col', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ accordion: bond })}
+</HtmlAtom>

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

@@ -6,7 +6,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
     exports: {
         getBond: () => AccordionBond;
     };
-    bindings: "values" | "value" | "data";
+    bindings: "data" | "values" | "value";
     slots: {};
     events: {};
 };
@@ -14,7 +14,7 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
-    bindings(): "values" | "value" | "data";
+    bindings(): "data" | "values" | "value";
     exports(): {
         getBond: () => AccordionBond;
     };

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

@@ -1,5 +1,5 @@
 import type { AccordionItemBond } from './item/bond.svelte';
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../shared/bond.svelte';
 export type AccordionStateProps = BondStateProps & {
     open: boolean;
     value?: string;
@@ -13,19 +13,20 @@ export type AccordionElements = {
     root: HTMLElement;
     indicator: HTMLElement;
 };
-export declare class AccordionBond extends Bond<AccordionStateProps, AccordionState, AccordionElements> {
-    static CONTEXT_KEY: string;
-    constructor(s: AccordionState);
-    share(): this;
-    root(): {
-        [x: symbol]: (node: HTMLElement) => void;
+export declare class AccordionRootAtom extends BondAtom<AccordionBond> {
+    constructor(bond: AccordionBond);
+    get attrs(): {
         'aria-expand': boolean;
         'aria-disabled': boolean;
         'aria-multiselectable': boolean;
-        'data-atom': string;
-        'data-kind': string;
-        id: string;
     };
+}
+export declare class AccordionBond extends Bond<AccordionStateProps, AccordionState, AccordionElements> {
+    static CONTEXT_KEY: string;
+    constructor(s: AccordionState);
+    share(): this;
+    /** Handle for granular access to root attrs and attachment */
+    root(): AccordionRootAtom;
     static get(): AccordionBond | undefined;
     static set(bond: AccordionBond): AccordionBond;
 }