@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

package/dist/components/scrollable/scrollable-track.svelte

@@ -1,70 +1,59 @@
-<script module lang="ts">
-	export type ScrollableTrackProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-			orientation: 'horizontal' | 'vertical';
-		}
-	>;
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
-	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps } from '../atom';
-
-	let {
-		class: klass = '',
-
-		orientation = undefined,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableTrackProps<T> = $props();
-
-	const bond = ScrollableBond.get();
-
-	if (!bond) {
-		throw new Error('ScrollableTrack must be used within a ScrollableRoot');
-	}
-
-	const hasYScroll = $derived(bond.state.props.scrollHeight > bond.state.props.clientHeight);
-	const hasXScroll = $derived(bond.state.props.scrollWidth > bond.state.props.clientWidth);
-
-	const hasScroll = $derived(hasXScroll || hasYScroll);
-
-	const isOpen = $derived(bond?.state?.props?.open ?? true);
-
-	const isScrolling = $derived(bond?.state?.props?.isScrolling ?? false);
-
-	const trackProps = $derived(bond.track(orientation));
-</script>
-
-{#if (isOpen || isScrolling) && hasScroll}
-	<HtmlAtom
-		{bond}
-		preset="scrollable.track"
-		class={[
-			'scrollable-track bg-foreground/10 hover:bg-foreground/15 border-border absolute z-10 rounded transition-opacity',
-			{ vertical: 'inset-y-0 right-0 w-2', horizontal: 'inset-x-0 bottom-0 h-2' }[orientation],
-			'$preset',
-			klass
-		]}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
-		{...trackProps}
-		{...restProps}
-	>
-		{@render children?.()}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { ScrollableTrackProps } from './types';
+	import { ScrollableBond } from './bond.svelte';
+	import { HtmlAtom } from '../atom';
+
+	let {
+		class: klass = '',
+
+		orientation = undefined,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableTrackProps<T> = $props();
+
+	const bond = ScrollableBond.get();
+
+	if (!bond) {
+		throw new Error('ScrollableTrack must be used within a ScrollableRoot');
+	}
+
+	const hasYScroll = $derived(bond.state.props.scrollHeight > bond.state.props.clientHeight);
+	const hasXScroll = $derived(bond.state.props.scrollWidth > bond.state.props.clientWidth);
+
+	const hasScroll = $derived(hasXScroll || hasYScroll);
+
+	const isOpen = $derived(bond?.state?.props?.open ?? true);
+
+	const isScrolling = $derived(bond?.state?.props?.isScrolling ?? false);
+
+	const trackProps = $derived(bond.track(orientation));
+</script>
+
+{#if (isOpen || isScrolling) && hasScroll}
+	<HtmlAtom
+		{bond}
+		preset="scrollable.track"
+		class={[
+			'scrollable-track bg-foreground/10 hover:bg-foreground/15 border-border absolute z-10 rounded transition-opacity',
+			{ vertical: 'inset-y-0 right-0 w-2', horizontal: 'inset-x-0 bottom-0 h-2' }[orientation],
+			'$preset',
+			klass
+		]}
+		enter={enter?.bind(bond.state)}
+		exit={exit?.bind(bond.state)}
+		initial={initial?.bind(bond.state)}
+		animate={animate?.bind(bond.state)}
+		onmount={onmount?.bind(bond.state)}
+		ondestroy={ondestroy?.bind(bond.state)}
+		{...trackProps}
+		{...restProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

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

@@ -1,10 +1,4 @@
-export type ScrollableTrackProps<T extends keyof HTMLElementTagNameMap> = Override<HtmlAtomProps<T>, {
-    children?: Snippet;
-    orientation: 'horizontal' | 'vertical';
-}>;
-import type { Snippet } from 'svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps } from '../atom';
+import type { ScrollableTrackProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     props: ScrollableTrackProps<T>;
     exports: {};

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

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory, Override } from '../../types';
+import type { ScrollableBond } from './bond.svelte';
+/**
+ * Extend this interface to add custom scrollable root properties in your application.
+ */
+export interface ScrollableExtendProps {
+}
+/**
+ * Extend this interface to add custom scrollable container properties in your application.
+ */
+export interface ScrollableContainerExtendProps {
+}
+/**
+ * Extend this interface to add custom scrollable content properties in your application.
+ */
+export interface ScrollableContentExtendProps {
+}
+/**
+ * Extend this interface to add custom scrollable track properties in your application.
+ */
+export interface ScrollableTrackExtendProps {
+}
+/**
+ * Extend this interface to add custom scrollable thumb properties in your application.
+ */
+export interface ScrollableThumbExtendProps {
+}
+export interface ScrollableRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        scrollable: ScrollableBond;
+    }]>;
+}>, ScrollableExtendProps {
+    factory?: Factory<ScrollableBond>;
+    scrollX?: number;
+    scrollY?: number;
+    scrollWidth?: number;
+    scrollHeight?: number;
+    clientWidth?: number;
+    clientHeight?: number;
+    disabled?: boolean;
+    open?: boolean;
+}
+export interface ScrollableContainerProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet;
+}>, ScrollableContainerExtendProps {
+}
+export interface ScrollableContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet;
+}>, ScrollableContentExtendProps {
+}
+export interface ScrollableTrackProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet;
+}>, ScrollableTrackExtendProps {
+    orientation: 'horizontal' | 'vertical';
+}
+export interface ScrollableThumbProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet;
+}>, ScrollableThumbExtendProps {
+    orientation: 'horizontal' | 'vertical';
+}

package/dist/components/scrollable/types.js

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

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

@@ -1,2 +1,3 @@
 export * as Sidebar from './atoms';
 export * from './attachments.svelte';
+export * from './types';

package/dist/components/sidebar/index.js

@@ -1,2 +1,3 @@
 export * as Sidebar from './atoms';
 export * from './attachments.svelte';
+export * from './types';

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

@@ -1,21 +1,7 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export type SlideoverContentProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ sidebar?: SidebarBond<any> }]>;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
 	import { SidebarBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import type { SlideoverContentProps } from './types';
 
 	const bond = SidebarBond.get();
 

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

@@ -1,12 +1,5 @@
-import type { Snippet } from 'svelte';
-export type SlideoverContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        sidebar?: SidebarBond<any>;
-    }]>;
-}>;
-import { SidebarBond } from './bond.svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { SlideoverContentProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: SlideoverContentProps<E, B>;
     exports: {};

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

@@ -1,27 +1,8 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { Factory } from '../../types';
-
-	export type SlideoverRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ sidebar?: SidebarBond }]>;
-		}
-	> & {
-		open?: boolean;
-		disabled?: boolean;
-		factory?: Factory<SidebarBond>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
 	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { Override } from '../../types';
+	import { HtmlAtom, type Base } from '../atom';
+	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
+	import type { SlideoverRootProps } from './types';
 
 	let {
 		open = $bindable(false),
@@ -74,7 +55,7 @@
 <HtmlAtom
 	{bond}
 	preset="sidebar"
-	class={['flex min-h-full w-full flex-1 flex-nowrap', '$preset', klass]}
+	class={['border-border flex min-h-full w-full flex-1 flex-nowrap', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -1,17 +1,6 @@
-import type { Snippet } from 'svelte';
-import type { Factory } from '../../types';
-export type SlideoverRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        sidebar?: SidebarBond;
-    }]>;
-}> & {
-    open?: boolean;
-    disabled?: boolean;
-    factory?: Factory<SidebarBond>;
-};
+import { type Base } from '../atom';
 import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
-import type { Override } from '../../types';
+import type { SlideoverRootProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: SlideoverRootProps<E, B>;
     exports: {

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { Override } from '../../types';
+import type { Factory } from '../../types';
+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 SlideoverRootExtendProps {
+}
+/**
+ * Extend this interface to add custom slideover content properties in your application.
+ */
+export interface SlideoverContentExtendProps {
+}
+export interface SlideoverRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        sidebar?: SidebarBond;
+    }]>;
+}>, SlideoverRootExtendProps {
+    open?: boolean;
+    disabled?: boolean;
+    factory?: Factory<SidebarBond>;
+}
+export interface SlideoverContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        sidebar?: SidebarBond<any>;
+    }]>;
+}>, SlideoverContentExtendProps {
+}

package/dist/components/sidebar/types.js

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

package/dist/components/stack/stack-item.svelte

@@ -4,6 +4,10 @@
 	let { class: klass = '', children, ...restProps } = $props();
 </script>
 
-<HtmlAtom preset="stack.item" class={['stack-item flex flex-1', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	preset="stack.item"
+	class={['stack-item border-border flex flex-1', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>

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

@@ -18,6 +18,10 @@
 	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
 </script>
 
-<HtmlAtom preset="stack.root" class={['stack-root flex flex-1', '$preset', klass]} {...restProps}>
+<HtmlAtom
+	preset="stack.root"
+	class={['stack-root border-border flex flex-1', '$preset', klass]}
+	{...restProps}
+>
 	{@render children?.()}
 </HtmlAtom>

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

@@ -1,25 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type ElementType, type Base } from '../atom';
+import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 import './stack.css';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & HTMLAttributes<ElementType<E>>;
+    props: HtmlAtomProps<E, B> & HTMLAttributes<ElementType<E>>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -0,0 +1,12 @@
+import type { HtmlAtomProps, Base } from '../atom';
+/**
+ * Extend this interface to add custom stack properties in your application.
+ */
+export interface StackExtendProps {
+}
+export interface StackProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, StackExtendProps {
+    direction?: 'row' | 'column';
+    gap?: number | string;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+}

package/dist/components/stack/types.js

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

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

@@ -1,2 +1,3 @@
+export * from './types';
 export * as Tabs from './atoms';
 export { Tab } from './tab';

package/dist/components/tabs/index.js

@@ -1,2 +1,3 @@
+export * from './types';
 export * as Tabs from './atoms';
 export { Tab } from './tab';

package/dist/components/tabs/tab/tab-body.svelte

@@ -1,61 +1,52 @@
-<script module lang="ts">
-	export type TabBodyProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		children?: Snippet<[{ tab?: TabBond<unknown> }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../../atom';
-	import { TabBond } from './bond.svelte';
-
-	const bond = TabBond.get();
-
-	if (!bond) {
-		throw new Error('TabBody must be used within a Tab');
-	}
-
-	let {
-		class: klass = '',
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabBodyProps<E, B> = $props();
-
-	let mounted = $state(false);
-
-	const bodyProps = $derived({
-		...bond?.body(),
-		...restProps
-	});
-
-	$effect(() => {
-		mounted = true;
-	});
-</script>
-
-<HtmlAtom
-	preset="tab.body"
-	class={[
-		'tab-body pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...bodyProps}
->
-	{@render children?.({ tab: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { TabBodyProps } from '../types';
+	import { TabBond } from './bond.svelte';
+
+	const bond = TabBond.get();
+
+	if (!bond) {
+		throw new Error('TabBody must be used within a Tab');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TabBodyProps<E, B> = $props();
+
+	let mounted = $state(false);
+
+	const bodyProps = $derived({
+		...bond?.body(),
+		...restProps
+	});
+
+	$effect(() => {
+		mounted = true;
+	});
+</script>
+
+<HtmlAtom
+	preset="tab.body"
+	class={[
+		'tab-body border-border pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...bodyProps}
+>
+	{@render children?.({ tab: bond })}
+</HtmlAtom>

package/dist/components/tabs/tab/tab-body.svelte.d.ts

@@ -1,11 +1,5 @@
-export type TabBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    children?: Snippet<[{
-        tab?: TabBond<unknown>;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { type HtmlAtomProps, type Base } from '../../atom';
-import { TabBond } from './bond.svelte';
+import { type Base } from '../../atom';
+import type { TabBodyProps } from '../types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: TabBodyProps<E, B>;
     exports: {};