@svelte-atoms/core 1.0.0-alpha.32 → 1.0.0-alpha.34

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

@@ -1,66 +1,55 @@
-<script
-	lang="ts"
-	generics="D extends string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
->
-	import { TabsBond, TabsBondState, type TabsBondProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-
-	let {
-		class: klass = '',
-		value = $bindable(undefined),
-		factory = _factory,
-		children,
-		onchange,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	const bondProps = defineState<TabsBondProps>([
-		defineProperty(
-			'value',
-			() => value,
-			(v) => (value = v)
-		)
-	]);
-	const bond = factory(bondProps).share() as TabsBond<D>;
-
-	const rootProps = $derived({
-		...bond?.root(),
-		...restProps
-	});
-
-	$effect(() => {
-		onchange?.({ tabs: bond, value });
-	});
-
-	function _factory(props: typeof bondProps) {
-		const tabsState = new TabsBondState(() => props);
-
-		return new TabsBond(tabsState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tabs"
-	class={['border-border flex w-full flex-1 flex-col gap-2', '$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)}
-	{...rootProps}
->
-	{@render children?.({ tabs: bond })}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="D extends string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base"
+>
+	import { TabsBond, TabsBondState, type TabsBondProps } from './bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom as Atom, type Base } from '../atom';
+	import type { TabsRootProps } from './types';
+
+	let {
+		class: klass = '',
+		value = $bindable(undefined),
+		children,
+		onchange,
+		preset = 'tabs' as const,
+		...restProps
+	}: TabsRootProps<D, E, B> = $props();
+
+	const bondProps = defineState<TabsBondProps>([
+		defineProperty(
+			'value',
+			() => value,
+			(v) => (value = v)
+		)
+	]);
+
+	function _factory(props: typeof bondProps = bondProps) {
+		const tabsState = new TabsBondState(() => props);
+		return new TabsBond(tabsState);
+	}
+	
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	$effect(() => {
+		onchange?.(value as D);
+	});
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<Atom
+	{bond}
+	preset="tabs"
+	class={['border-border flex w-full flex-1 flex-col', '$preset', klass]}
+	{...rootProps}
+>
+	{@render children?.({ tabs: bond })}
+</Atom>

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

@@ -1,21 +1,10 @@
-import { TabsBond, type TabsBondProps } from './bond.svelte';
+import { TabsBond } from './bond.svelte';
 import { type Base } from '../atom';
+import type { TabsRootProps } from './types';
 declare function $$render<D extends string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: {
-        class?: string;
-        value?: any;
-        factory?: (props: TabsBondProps) => TabsBond<unknown>;
-        children: any;
-        onchange: any;
-        onmount?: any;
-        ondestroy?: any;
-        animate?: any;
-        enter?: any;
-        exit?: any;
-        initial?: any;
-    } & Record<string, any>;
+    props: TabsRootProps<D, E, B>;
     exports: {
-        getBond: () => TabsBond<D>;
+        getBond: () => TabsBond<unknown>;
     };
     bindings: "value";
     slots: {};
@@ -27,7 +16,7 @@ declare class __sveltets_Render<D extends string, E extends keyof HTMLElementTag
     slots(): ReturnType<typeof $$render<D, E, B>>['slots'];
     bindings(): "value";
     exports(): {
-        getBond: () => TabsBond<D>;
+        getBond: () => TabsBond<unknown>;
     };
 }
 interface $$IsomorphicComponent {

package/dist/components/tabs/tabs.stories.svelte

@@ -1,56 +1,70 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Tabs as Tabs_, Tab } from '.';
-	import { Root as TabsRoot } from './atoms';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Atoms/Tabs',
-		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-
-		parameters: {
-			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-			layout: 'fullscreen'
-		},
-		args: {}
-	});
-</script>
-
-<script lang="ts">
-	let value = $state('ar');
-</script>
-
-<Story name="Tabs" args={{}}>
-	<Tabs_.Root bind:value>
-		<Tabs_.Header class="border-b" />
-		<Tabs_.Body>
-			<Tab.Root value="en">
-				<Tab.Header>English</Tab.Header>
-				<Tab.Body class="">
-					<div>
-						Ligula ex tincidunt efficitur netus consequat aenean finibus. Dictum ex pretium torquent
-						vel scelerisque quisque class nisl penatibus blandit risus. Pretium praesent egestas
-						ante placerat lacus pede risus pulvinar facilisi.
-					</div>
-				</Tab.Body>
-			</Tab.Root>
-
-			<Tab.Root value="ar">
-				<Tab.Header>Arabic</Tab.Header>
-				<Tab.Body class="h-[1440px]">
-					<div>
-						Interdum turpis taciti mauris orci condimentum vitae malesuada ornare ridiculus ultrices
-						quisque feugiat pretium facilisis justo ligula pede volutpat nisi viverra adipiscing
-						donec torquent ac sapien aliquet parturient posuere leo litora vivamus luctus vestibulum
-						aptent faucibus platea libero dolor purus integer fusce nam senectus nibh nostra diam
-						tortor dictumst praesent tellus montes ad iaculis sociosqu mollis sodales consectetuer
-						hac accumsan dictum blandit conubia velit elit efficitur duis nascetur erat mattis
-						semper et aliquam magna lorem bibendum ante id cursus nulla eget ut pellentesque
-						himenaeos consectetur potenti si maximus ullamcorper etiam nec magnis ipsum mus porta
-						lobortis natoque rhoncus fringilla
-					</div>
-				</Tab.Body>
-			</Tab.Root>
-		</Tabs_.Body>
-	</Tabs_.Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { animate } from 'motion';
+	import { Tabs as ATabs, Tab } from '.';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Atoms/Tabs',
+		// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+
+		parameters: {
+			// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+			layout: 'fullscreen'
+		},
+		args: {}
+	});
+</script>
+
+<script lang="ts">
+	let value = $state('ar');
+
+	const array = $state([
+		{
+			value: 'en',
+			label: "English",
+			description: "This content is teleported from Tab.Body to Tabs.Content component."
+		}, 
+		{
+			value: "ar",
+			label: "Arabic",
+			description:"هذا المحتوى يتم نقله من Tab.Body إلى مكون Tabs.Content."
+		},{
+			value: "fr",
+			label: "French",
+			description:"Ce contenu est téléporté de Tab.Body vers le composant Tabs.Content."
+		}
+	])
+</script>
+
+<Story name="Tabs" args={{}}>
+	<ATabs.Root bind:value>
+		<ATabs.Header class="border-b">
+			{#each array as item (item.value)}
+				<Tab.Root value={item.value}>
+					<Tab.Header>{item.label}</Tab.Header>
+					<Tab.Body class="p-4">
+						<h3 class="font-bold mb-2">{item.label} Content</h3>
+						<p>{item.description}</p>
+					</Tab.Body>
+				</Tab.Root>
+			{/each}
+		</ATabs.Header>
+				
+		<ATabs.Body>
+			<!-- Tab bodies are defined separately and teleported to Tabs.Content -->
+			<ATabs.Content 
+				enter={node=> {
+					const duration = 0.3;
+					animate(node, { opacity: [0, 1] }, { duration });
+					return { duration };
+				}}
+				exit={node=> {
+					const duration = 0.1;
+					animate(node, { opacity: [1, 0] }, { duration });
+					return { duration };
+				}}
+			/>
+		</ATabs.Body>
+	</ATabs.Root>
+</Story>

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

@@ -3,53 +3,48 @@ import type { HtmlAtomProps, Base } from '../atom';
 import type { Factory } from '../../types';
 import type { TabsBond } from './bond.svelte';
 import type { TabBond } from './tab/bond.svelte';
-/**
- * Extend this interface to add custom tabs root properties in your application.
- */
-export interface TabsRootExtendProps {
-}
-/**
- * Extend this interface to add custom tab header properties in your application.
- */
-export interface TabHeaderExtendProps {
-}
-/**
- * Extend this interface to add custom tab body properties in your application.
- */
-export interface TabBodyExtendProps {
-}
-/**
- * Extend this interface to add custom tab description properties in your application.
- */
-export interface TabDescriptionExtendProps {
-}
-export type TabsRootProps<D extends string = string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Omit<HtmlAtomProps<E, B>, 'children'> & TabsRootExtendProps & {
+export interface TabsRootProps<D extends string = string, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
     value?: D;
     factory?: Factory<TabsBond>;
     children?: Snippet<[{
         tabs: TabsBond;
     }]>;
     onchange?: (value: D) => void;
-};
-export type TabHeaderProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> = HtmlAtomProps<E, B> & TabHeaderExtendProps & {
+}
+export interface TabHeaderProps<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> extends HtmlAtomProps<E, B> {
     children?: Snippet<[{
         tab?: TabBond<unknown>;
     }]>;
     onpointerdown?: (ev: PointerEvent, context: {
         tab?: TabBond<unknown>;
     }) => void;
-};
-export type TabBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TabBodyExtendProps & {
+}
+export interface TabBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
     children?: Snippet<[{
         tab?: TabBond<unknown>;
     }]>;
-};
-export type TabDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = HtmlAtomProps<E, B> & TabDescriptionExtendProps & {
+}
+export interface TabDescriptionProps<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> extends HtmlAtomProps<E, B> {
     children?: Snippet<[{
         tab?: TabBond<unknown>;
     }]>;
-};
+}
+export interface TabsHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+    children?: Snippet<[{
+        tabs?: TabsBond;
+    }]>;
+}
+export interface TabsBodyProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+    children?: Snippet<[{
+        tabs?: TabsBond;
+    }]>;
+}
+export interface TabsContentProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B> {
+    children?: Snippet<[{
+        tabs?: TabsBond;
+    }]>;
+}
 /**
  * @deprecated Use TabsRootExtendProps instead
  */
-export type TabsExtendProps = TabsRootExtendProps;
+export type TabsExtendProps = TabsRootProps;

package/dist/context/preset.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ClassValue } from 'svelte/elements';
 import type { Base } from '../components/atom';
 import type { Bond } from '../shared';
 import type { Attachment } from 'svelte/attachments';
-export type PresetModuleName = 'accordion' | 'accordion.item.body' | 'accordion.item.header' | 'accordion.item.indicator' | 'accordion.item' | 'alert.actions' | 'alert.close-button' | 'alert.content' | 'alert.description' | 'alert.icon' | 'alert' | 'alert.title' | 'card.content' | 'card.description' | 'card.footer' | 'card.header' | 'card.body' | 'card.media' | 'card' | 'card.subtitle' | 'card.title' | 'collapsible.body' | 'collapsible.header' | 'collapsible.indicator' | 'collapsible' | 'combobox.control' | 'combobox.trigger' | 'combobox.item' | 'dialog.close-button' | 'dialog.body' | 'dialog.content' | 'dialog.description' | 'dialog.footer' | 'dialog.header' | 'dialog' | 'dialog.title' | 'divider' | 'dropdown.placeholder' | 'dropdown.query' | 'dropdown.trigger' | 'dropdown.value' | 'dropdown' | 'field.control' | 'field.label' | 'field' | 'form' | 'icon' | 'input' | 'input.control' | 'input.placeholder' | 'label' | 'layer.inner' | 'layer' | 'link' | 'list.divider' | 'list.group' | 'list.item' | 'list.item' | 'list.item' | 'dropdown.item' | 'menu.content' | 'popover.arrow' | 'popover.indicator' | 'popover.content' | 'popover.trigger' | 'portal.inner' | 'portal' | 'root' | 'root.portals' | 'sidebar.content' | 'sidebar' | 'drawer.backdrop' | 'drawer.body' | 'drawer.content' | 'drawer.description' | 'drawer.title' | 'drawer.footer' | 'drawer.header' | 'drawer' | 'stack.root' | 'stack.item' | 'tabs.body' | 'tabs.header' | 'tabs' | 'tab.header' | 'tab.body' | 'tab.description' | 'tab' | 'tree.body' | 'tree.header' | 'tree.indicator' | 'tree' | 'datagrid' | 'datagrid.header' | 'datagrid.th' | 'datagrid.body' | 'datagrid.tr' | 'datagrid.td' | 'datagrid.footer' | 'datagrid.checkbox' | 'datagrid.sort-icon' | 'scrollable' | 'scrollable.container' | 'scrollable.content' | 'scrollable.track' | 'scrollable.thumb' | 'breadcrumb' | 'breadcrumb.item' | 'breadcrumb.separator' | 'badge' | 'button' | 'checkbox' | 'checkbox.checkmark' | 'checkbox.indeterminate' | 'radio' | 'radio.group' | 'container' | 'calendar' | 'calendar.day' | 'calendar.header' | 'calendar.weekday' | 'calendar.body' | 'datepicker.trigger' | 'datepicker.calendar' | 'datepicker.years' | 'datepicker.months' | 'datepicker.header';
+export type PresetModuleName = 'accordion' | 'accordion.item.body' | 'accordion.item.header' | 'accordion.item.indicator' | 'accordion.item' | 'alert.actions' | 'alert.close-button' | 'alert.content' | 'alert.description' | 'alert.icon' | 'alert' | 'alert.title' | 'card.content' | 'card.description' | 'card.footer' | 'card.header' | 'card.body' | 'card.media' | 'card' | 'card.subtitle' | 'card.title' | 'collapsible.body' | 'collapsible.header' | 'collapsible.indicator' | 'collapsible' | 'combobox.control' | 'combobox.trigger' | 'combobox.item' | 'dialog.close-button' | 'dialog.body' | 'dialog.content' | 'dialog.description' | 'dialog.footer' | 'dialog.header' | 'dialog' | 'dialog.title' | 'divider' | 'dropdown.placeholder' | 'dropdown.query' | 'dropdown.trigger' | 'dropdown.selections' | 'dropdown.selection' | 'dropdown' | 'field.control' | 'field.label' | 'field' | 'form' | 'icon' | 'input' | 'input.control' | 'input.placeholder' | 'label' | 'layer.inner' | 'layer' | 'link' | 'list.divider' | 'list.group' | 'list.item' | 'list.item' | 'list.item' | 'dropdown.item' | 'menu.content' | 'popover.arrow' | 'popover.indicator' | 'popover.content' | 'popover.trigger' | 'portal.inner' | 'portal' | 'root' | 'root.portals' | 'sidebar.content' | 'sidebar' | 'drawer.backdrop' | 'drawer.body' | 'drawer.content' | 'drawer.description' | 'drawer.title' | 'drawer.footer' | 'drawer.header' | 'drawer' | 'stack.root' | 'stack.item' | 'stepper' | 'stepper.header' | 'stepper.body' | 'stepper.footer' | 'stepper.step' | 'stepper.step.indicator' | 'stepper.step.header' | 'stepper.step.body' | 'stepper.step.separator' | 'tabs.body' | 'tabs.header' | 'tabs' | 'tab.header' | 'tab.body' | 'tab.description' | 'tab' | 'tree.body' | 'tree.header' | 'tree.indicator' | 'tree' | 'datagrid' | 'datagrid.header' | 'datagrid.th' | 'datagrid.body' | 'datagrid.tr' | 'datagrid.td' | 'datagrid.footer' | 'datagrid.checkbox' | 'datagrid.sort-icon' | 'scrollable' | 'scrollable.container' | 'scrollable.content' | 'scrollable.track' | 'scrollable.thumb' | 'breadcrumb' | 'breadcrumb.item' | 'breadcrumb.separator' | 'badge' | 'button' | 'checkbox' | 'checkbox.checkmark' | 'checkbox.indeterminate' | 'radio' | 'radio.group' | 'container' | 'calendar' | 'calendar.day' | 'calendar.header' | 'calendar.weekday' | 'calendar.body' | 'datepicker.trigger' | 'datepicker.calendar' | 'datepicker.years' | 'datepicker.months' | 'datepicker.header';
 export interface PresetEntryRecord {
     [key: string]: unknown;
     class?: ClassValue;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@svelte-atoms/core",
-	"version": "1.0.0-alpha.32",
+	"version": "1.0.0-alpha.34",
 	"description": "A modular, accessible, and extensible Svelte UI component library.",
 	"repository": {
 		"type": "git",
@@ -126,6 +126,11 @@
 			"svelte": "./dist/components/checkbox/index.js",
 			"default": "./dist/components/checkbox/index.js"
 		},
+		"./chip": {
+			"types": "./dist/components/chip/index.d.ts",
+			"svelte": "./dist/components/chip/index.js",
+			"default": "./dist/components/chip/index.js"
+		},
 		"./combobox": {
 			"types": "./dist/components/combobox/index.d.ts",
 			"svelte": "./dist/components/combobox/index.js",
@@ -306,6 +311,26 @@
 			"svelte": "./dist/components/stack/atoms.js",
 			"default": "./dist/components/stack/atoms.js"
 		},
+		"./stepper": {
+			"types": "./dist/components/stepper/index.d.ts",
+			"svelte": "./dist/components/stepper/index.js",
+			"default": "./dist/components/stepper/index.js"
+		},
+		"./stepper/atoms": {
+			"types": "./dist/components/stepper/atoms.d.ts",
+			"svelte": "./dist/components/stepper/atoms.js",
+			"default": "./dist/components/stepper/atoms.js"
+		},
+		"./stepper/step": {
+			"types": "./dist/components/stepper/step/index.d.ts",
+			"svelte": "./dist/components/stepper/step/index.js",
+			"default": "./dist/components/stepper/step/index.js"
+		},
+		"./stepper/step/atoms": {
+			"types": "./dist/components/stepper/step/atoms.d.ts",
+			"svelte": "./dist/components/stepper/step/atoms.js",
+			"default": "./dist/components/stepper/step/atoms.js"
+		},
 		"./tabs": {
 			"types": "./dist/components/tabs/index.d.ts",
 			"svelte": "./dist/components/tabs/index.js",
@@ -376,7 +401,7 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.40.0"
+		"svelte": "^5.46.4"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^4.1.1",
@@ -390,7 +415,7 @@
 		"@storybook/sveltekit": "^9.1.3",
 		"@sveltejs/adapter-auto": "^6.0.0",
 		"@sveltejs/adapter-netlify": "^5.2.4",
-		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/kit": "^2.49.5",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
 		"@tailwindcss/vite": "^4.0.0",
@@ -405,15 +430,16 @@
 		"mdsvex": "^0.12.3",
 		"playwright": "^1.53.0",
 		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"publint": "^0.3.2",
 		"shiki": "^3.9.2",
 		"storybook": "^9.1.3",
-		"svelte": "^5.40.0",
+		"svelte": "^5.46.4",
 		"svelte-check": "^4.0.0",
 		"svelte-render-scan": "^1.1.0",
 		"tailwindcss": "^4.0.0",
+		"ts-morph": "^24.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^7.0.4",
@@ -451,11 +477,12 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.0",
-		"@modelcontextprotocol/sdk": "^1.24.3",
+		"@modelcontextprotocol/sdk": "^1.25.2",
 		"@qrcode-js/browser": "^1.2.0",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"es-toolkit": "^1.37.2",
+		"mcp-handler": "^1.0.6",
 		"motion": "^12.23.22",
 		"nanoid": "^5.1.5",
 		"tailwind-merge": "^3.2.0"

package/dist/components/dropdown/dropdown-value.svelte

@@ -1,60 +0,0 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { Icon } from '../icon';
-	import { HtmlAtom, type Base } from '../atom';
-	import CloseIcon from '../../icons/icon-close.svelte';
-	import { DropdownBond } from './bond.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		value,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	} = $props();
-
-	function handleClick(ev: Event) {
-		ev.preventDefault();
-		ev.stopPropagation();
-
-		bond?.state.unselect([value]);
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	preset="dropdown.value"
-	class={[
-		'dropdown-value border-border bg-foreground/5 inline-flex flex-nowrap items-center gap-1 rounded-xs px-1 whitespace-nowrap',
-		'$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)}
-	{...restProps}
->
-	{@render children?.()}
-
-	<button
-		class="bg-foreground/5 flex aspect-square h-4 cursor-pointer items-center justify-center rounded-xs p-0"
-		onclick={handleClick}
-	>
-		<Icon class="h-3" src={CloseIcon} />
-	</button>
-</HtmlAtom>

package/dist/components/dropdown/dropdown-values.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { DropdownBond } from './bond.svelte';
-
-	const bond = DropdownBond.get();
-
-	if (!bond) {
-		throw new Error('DropdownValue must be used within a Dropdown');
-	}
-
-	const selectedItems = $derived(bond.state.selectedItems);
-
-	let { children } = $props();
-</script>
-
-<!-- <Render class={cn('dropdown-value inline-flex gap-2 items-center flex-wrap', klass)} {...restProps}>
-</Render> -->
-{@render children?.({ items: selectedItems })}

package/dist/components/dropdown/dropdown-values.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const DropdownValues: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type DropdownValues = ReturnType<typeof DropdownValues>;
-export default DropdownValues;