@svelte-atoms/core 1.0.0-alpha.14

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

@@ -0,0 +1,48 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { getContext, setContext } from 'svelte';
+import { Bond, BondState } from '../../shared/bond.svelte.js';
+const LAYER_ELEMENTS_KIND = {
+    root: 'layer-root',
+    inner: 'layer-inner'
+};
+export class LayerBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/layer';
+    constructor(atom) {
+        super(atom);
+    }
+    get targetElement() {
+        return this.elements.inner ?? this.elements.root;
+    }
+    root(props = {}) {
+        return {
+            'data-kind': LAYER_ELEMENTS_KIND.root,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    inner(props = {}) {
+        return {
+            'data-kind': LAYER_ELEMENTS_KIND.inner,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.inner = node;
+            }
+        };
+    }
+    share() {
+        return LayerBond.set(this);
+    }
+    static get() {
+        return getContext(LayerBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(LayerBond.CONTEXT_KEY, bond);
+    }
+}
+export class LayerBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+}

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

@@ -0,0 +1,2 @@
+export * as Layer from './atoms';
+export { LayerBond as LayerAtom, LayerBondState, type LayerBondProps } from './bond.svelte';

package/dist/components/layer/index.js

@@ -0,0 +1,2 @@
+export * as Layer from './atoms';
+export { LayerBond as LayerAtom, LayerBondState } from './bond.svelte';

package/dist/components/layer/layer-inner.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { LayerBond } from './bond.svelte';
+	import { toClassValue, cn } from '../../utils';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { getPreset } from '../../context';
+
+	type Element = ElementType<E>;
+
+	const bond = LayerBond.get();
+
+	const preset = getPreset('layer.inner');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const innerProps = $derived({
+		...bond?.inner(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'relative size-full',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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)}
+	{...innerProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/layer/layer-inner.svelte.d.ts

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

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

@@ -0,0 +1,75 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { LayerBond, LayerBondState } from './bond.svelte';
+	import { RootBond } from '../root/bond.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { toClassValue, cn, defineState } from '../../utils';
+	import { getPreset } from '../../context';
+
+	type Element = ElementType<E>;
+
+	const rootAtom = RootBond.get();
+
+	const preset = getPreset('layer');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	if (!rootAtom) {
+		throw new Error('Root atom is not found');
+	}
+
+	const bondProps = defineState([], () => ({}));
+
+	const bond = factory().share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const layerAtomState = new LayerBondState(() => props);
+		return new LayerBond(layerAtomState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'pointer-events-none absolute inset-0',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [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)}
+	{...rootProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

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

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

@@ -0,0 +1 @@
+export { default as Link } from './link.svelte';

package/dist/components/link/index.js

@@ -0,0 +1 @@
+export { default as Link } from './link.svelte';

package/dist/components/link/link.stories.svelte

@@ -0,0 +1,26 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Root } from '../root';
+	import LinkComponent from './link.svelte';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Link'
+	});
+</script>
+
+<script>
+	let value = $state(undefined);
+	let checked = $state(false);
+</script>
+
+<Story name="Link">
+	{#snippet children(args)}
+		<Root>
+			{#snippet children({})}
+				<div class="flex h-full w-full items-center justify-center">
+					<LinkComponent>Hello World</LinkComponent>
+				</div>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

package/dist/components/link/link.stories.svelte.d.ts

@@ -0,0 +1,6 @@
+export default Link;
+type Link = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const Link: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/link/link.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { getPreset } from '../../context';
+
+	const preset = getPreset('link');
+
+	let {
+		class: klass = '',
+		base = preset?.base as B,
+		children,
+		...restProps
+	}: HtmlAtomProps<E, B> = $props();
+</script>
+
+<HtmlAtom
+	class={[
+		'hover:text-primary/80 active:text-primary/100 cursor-pointer underline transition-colors duration-200',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	as="a"
+	{base}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

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

package/dist/components/list/atoms.d.ts

@@ -0,0 +1,5 @@
+export { default as Divider } from './list-divider.svelte';
+export { default as Group } from './list-group.svelte';
+export { default as Item } from './list-item.svelte';
+export { default as Root } from './list-root.svelte';
+export { default as Title } from './list-title.svelte';

package/dist/components/list/atoms.js

@@ -0,0 +1,5 @@
+export { default as Divider } from './list-divider.svelte';
+export { default as Group } from './list-group.svelte';
+export { default as Item } from './list-item.svelte';
+export { default as Root } from './list-root.svelte';
+export { default as Title } from './list-title.svelte';

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

@@ -0,0 +1 @@
+export * as List from './atoms';

package/dist/components/list/index.js

@@ -0,0 +1 @@
+export * as List from './atoms';

package/dist/components/list/list-divider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { Divider } from '../divider';
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+	import type { Base } from '../atom';
+
+	const preset = getPreset('list.divider');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		vertical = false,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<Divider
+	class={[
+		'list-divider',
+		!vertical && 'my-1',
+		vertical && 'mx-1',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	{as}
+	{vertical}
+	{...restProps}
+/>

package/dist/components/list/list-divider.svelte.d.ts

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

package/dist/components/list/list-group.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+
+	const preset = getPreset('list.group');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'atoms-ui list-group rounded-b-inherit rounded-t-inherit flex flex-col',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/list/list-group.svelte.d.ts

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

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

@@ -0,0 +1,28 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base">
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type Base } from '../atom';
+	import { toClassValue } from '../../utils';
+
+	const preset = getPreset('list.item');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'li',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'flex w-full gap-2 px-4 py-1',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/list/list-item.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type Base } from '../atom';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base>(): {
+    props: {
+        class?: string;
+        as?: any;
+        base?: B;
+        children?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'li', 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 = 'li', 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 = 'li', 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 ListItem: $$IsomorphicComponent;
+type ListItem<T extends keyof HTMLElementTagNameMap = 'li', B extends Base = Base> = InstanceType<typeof ListItem<T, B>>;
+export default ListItem;

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

@@ -0,0 +1,28 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+
+	const preset = getPreset('list.item');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'ul',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'atoms-ui atom-list flex flex-col',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -0,0 +1,30 @@
+import { type Base } from '../atom';
+declare function $$render<T extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base>(): {
+    props: {
+        class?: string;
+        as?: any;
+        base?: B;
+        children?: any;
+    } & Record<string, any>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap = 'ul', 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 = 'ul', 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 = 'ul', 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 ListRoot: $$IsomorphicComponent;
+type ListRoot<T extends keyof HTMLElementTagNameMap = 'ul', B extends Base = Base> = InstanceType<typeof ListRoot<T, B>>;
+export default ListRoot;

package/dist/components/list/list-title.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const preset = getPreset('list.item');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'h3',
+		base = preset?.base as B,
+		children = undefined,
+		...restProps
+	} = $props();
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'atoms-ui list-title',
+		'mb-1 flex w-full px-6 py-1 font-medium',
+		toClassValue.apply(null, [preset?.class, {}]),
+		toClassValue.apply(null, [klass, {}])
+	]}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>