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

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

@@ -19,7 +19,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
     exports: {
         getBond: () => AccordionBond;
     };
-    bindings: "values" | "data" | "value";
+    bindings: "values" | "value" | "data";
     slots: {};
     events: {};
 };
@@ -27,7 +27,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" | "data" | "value";
+    bindings(): "values" | "value" | "data";
     exports(): {
         getBond: () => AccordionBond;
     };

package/dist/components/alert/alert-actions.svelte.d.ts

@@ -24,6 +24,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         children?: Snippet<[{
             alert: AlertBond;

package/dist/components/alert/alert-close-button.svelte.d.ts

@@ -24,6 +24,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         children?: Snippet<[{
             alert: AlertBond;

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

@@ -24,6 +24,7 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         bond?: import("../..").Bond;
         base?: B | undefined;
         preset?: import("../..").ModuleName | (string & {});
+        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
         children?: Snippet<[{
             alert: AlertBond;

package/dist/components/atom/html-atom.svelte

@@ -1,70 +1,217 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
-	import { RootBond } from '../root';
-	import { HtmlElement } from '../element';
-	import { cn, toClassValue, type ClassValue } from '../../utils';
-	import { getPreset } from '../../context';
-	import type { PresetModuleName } from '../../context/preset.svelte';
-
-	type Element = HTMLElementTagNameMap[E];
-
-	const rootBond = RootBond.get();
-
-	let {
-		class: klass = '',
-		as = 'div',
-		base = undefined,
-		preset: presetKey = undefined,
-		bond = undefined,
-		children = undefined,
-		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const preset = $derived(
-		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
-	);
-
-	const _klass = $derived(compilePresetPlaceholder(klass));
-
-	const _base = $derived(base ?? preset?.base);
-	const _as = $derived(as ?? preset?.as);
-	const _restProps = $derived.by(() => {
-		const { class: klass, base, as, ...restPresetProps } = preset ?? {};
-		return { ...restPresetProps, ...restProps };
-	});
-
-	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
-
-	const snippet = $derived(_base as SnippetBase);
-
-	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
-
-	const Component = $derived(base ?? atom) as ComponentBase;
-
-	function compilePresetPlaceholder(klass: ClassValue): ReturnType<typeof toClassValue> {
-		if (Array.isArray(klass)) {
-			return klass.map((k) => compilePresetPlaceholder(k));
-		}
-
-		const compiled = toClassValue.apply(bond, [klass, bond]);
-
-		if (Array.isArray(compiled)) {
-			return compiled.map((c) => compilePresetPlaceholder(c));
-		}
-
-		if (typeof compiled === 'string') {
-			return compiled.replace('$preset', cn(preset?.class));
-		}
-
-		return compiled;
-	}
-</script>
-
-{#if isSnippet}
-	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
-{:else}
-	<Component class={_klass} as={_as} {..._restProps}>
-		{@render children?.()}
-	</Component>
-{/if}
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Base, ComponentBase, HtmlAtomProps, SnippetBase } from './types';
+	import { RootBond } from '../root';
+	import { HtmlElement } from '../element';
+	import {
+		cn,
+		toClassValue,
+		type ClassValue,
+		type VariantDefinition
+	} from '../../utils';
+	import { getPreset } from '../../context';
+	import type { PresetModuleName } from '../../context/preset.svelte';
+	import type { Bond } from '../../shared';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const rootBond = RootBond.get();
+
+	let {
+		class: klass = '',
+		as = 'div',
+		base = undefined,
+		preset: presetKey = undefined,
+		bond = undefined,
+		variants = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const preset = $derived(
+		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
+	);
+
+	const presetProps = $derived(preset?.variants);
+
+	// Resolve local variants - either VariantDefinition or function
+	const localVariants = $derived.by(() => {
+		if (!variants) return undefined;
+
+		// If it's a function, call it directly
+		if (typeof variants === 'function') {
+			return variants(bond as Bond, restProps);
+		}
+
+		// Otherwise it's a VariantDefinition, resolve it
+		return resolveVariants(variants, bond as Bond, restProps);
+	});
+
+	// Merge preset variants with local variants
+	const mergedVariants = $derived.by(() => {
+		// No variants at all
+		if (!presetProps && !localVariants) return undefined;
+
+		// Only preset variants (raw object from preset)
+		if (presetProps && !localVariants) {
+			// Convert preset variants to VariantDefinition-like structure
+			const variantDef = {
+				class: preset?.class,
+				variants: presetProps,
+				compounds: preset?.compounds ?? [],
+				defaults: preset?.defaults ?? {}
+			};
+			return resolveVariants(variantDef, bond as Bond, restProps);
+		}
+
+		// Only local variants
+		if (!presetProps && localVariants) {
+			return localVariants;
+		}
+
+		// Both exist - merge them
+		// When both preset and local variants exist, we need to merge the resolved props
+		const presetVariantDef = {
+			class: preset?.class,
+			variants: presetProps,
+			compounds: preset?.compounds ?? [],
+			defaults: preset?.defaults ?? {}
+		};
+
+		const presetResolved = resolveVariants(presetVariantDef, bond as Bond, restProps);
+
+		// Merge the resolved variant props
+		// Local variant classes and attributes override preset
+		const presetClasses = Array.isArray(presetResolved.class)
+			? presetResolved.class
+			: [presetResolved.class];
+		const localClasses = Array.isArray(localVariants?.class)
+			? localVariants.class
+			: [localVariants?.class];
+
+		return {
+			class: [...presetClasses, ...localClasses].filter(Boolean),
+			...presetResolved,
+			...localVariants
+		};
+	});
+
+	const _klass = $derived([compilePresetPlaceholder(klass), mergedVariants?.class ?? '']);
+
+	const _base = $derived(base ?? preset?.base);
+	const _as = $derived(as ?? preset?.as);
+	const _restProps = $derived.by(() => {
+		const {
+			class: klassPreset,
+			base,
+			as,
+			variants: presetProps,
+			...restPresetProps
+		} = preset ?? {};
+		const { class: variantClass, ...variantsRestProps } = mergedVariants ?? {};
+
+		return { ...restPresetProps, ...variantsRestProps, ...restProps };
+	});
+
+	const isSnippet = $derived(typeof _base === 'function' && _base.length === 1 && !_base.prototype);
+
+	const snippet = $derived(_base as SnippetBase);
+
+	const atom = rootBond?.state?.props?.renderers?.html ?? HtmlElement;
+
+	const Component = $derived(base ?? atom) as ComponentBase;
+
+	function compilePresetPlaceholder(klass: ClassValue): ReturnType<typeof toClassValue> {
+		if (Array.isArray(klass)) {
+			return klass.map((k) => compilePresetPlaceholder(k));
+		}
+
+		const compiled = toClassValue.apply(bond, [klass, bond]);
+
+		if (Array.isArray(compiled)) {
+			return compiled.map((c) => compilePresetPlaceholder(c));
+		}
+
+		if (typeof compiled === 'string') {
+			return compiled.replace('$preset', cn(preset?.class));
+		}
+
+		return compiled;
+	}
+
+	/**
+	 * Resolve variant definition to props
+	 */
+	function resolveVariants(
+		def: VariantDefinition<any>,
+		bond: Bond | null | undefined,
+		props: Record<string, any>
+	): Record<string, any> {
+		const { variants: variantMap, compounds, defaults, class: baseClass } = def;
+
+		// Merge props with defaults
+		const finalProps = { ...defaults, ...props };
+
+		const classes: ClassValue[] = [];
+		const attributes: Record<string, any> = {};
+
+		// Add base class
+		if (baseClass) classes.push(baseClass);
+
+		// Add variant classes
+		if (variantMap) {
+			for (const [key, value] of Object.entries(finalProps)) {
+				const variantValue = variantMap[key]?.[value as string];
+				if (variantValue !== undefined) {
+					const resolved = typeof variantValue === 'function' ? variantValue(bond) : variantValue;
+
+					if (typeof resolved === 'string') {
+						classes.push(resolved);
+					} else if (typeof resolved === 'object' && resolved !== null) {
+						if ('class' in resolved) {
+							classes.push(resolved.class);
+						}
+						// Add other attributes
+						Object.entries(resolved).forEach(([k, v]) => {
+							if (k !== 'class') {
+								attributes[k] = v;
+							}
+						});
+					}
+				}
+			}
+		}
+
+		// Add compound variants
+		if (compounds) {
+			for (const compound of compounds) {
+				const { class: compoundClass, ...compoundProps } = compound;
+				const matches = Object.entries(compoundProps).every(
+					([key, value]) => finalProps[key] === value
+				);
+				if (matches) {
+					if (compoundClass) classes.push(compoundClass);
+					// Add compound attributes
+					Object.entries(compound).forEach(([k, v]) => {
+						if (k !== 'class' && !Object.keys(compoundProps).includes(k)) {
+							attributes[k] = v;
+						}
+					});
+				}
+			}
+		}
+
+		return {
+			class: classes,
+			...attributes
+		};
+	}
+</script>
+
+{#if isSnippet}
+	{@render snippet({ class: _klass, as: _as, base: _base, children, ..._restProps })}
+{:else}
+	<Component class={_klass} as={_as} {..._restProps}>
+		{@render children?.()}
+	</Component>
+{/if}

package/dist/components/atom/html-atom.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Base } from './types';
-import { type ClassValue } from '../../utils';
+import { type ClassValue, type VariantDefinition } from '../../utils';
 import type { PresetModuleName } from '../../context/preset.svelte';
+import type { Bond } from '../../shared';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: Record<string, unknown> & {
         [key: string]: unknown;
@@ -16,9 +17,10 @@ declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B exten
         ondestroy?: import("..").NodeFunction<E> | undefined;
         children?: import("svelte").Snippet;
     } & {
-        bond?: import("../..").Bond;
+        bond?: Bond;
         base?: B | undefined;
         preset?: PresetModuleName | (string & {});
+        variants?: VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & HTMLAttributes<HTMLElementTagNameMap[E]>;
     exports: {};
     bindings: "";

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

@@ -3,6 +3,7 @@ import { type HtmlElementTagName } from '../element';
 import type { HtmlElementProps, ElementType } from '../element/types';
 import type { PresetModuleName } from '../../context/preset.svelte';
 import type { Bond } from '../../shared';
+import type { VariantDefinition } from '../../utils';
 export type ComponentBase = Component;
 export type SnippetBase = Snippet;
 export type Base<Args = any> = Args extends Record<string, any> ? ComponentBase : Args extends unknown[] ? SnippetBase : never;
@@ -10,5 +11,11 @@ export type HtmlAtomProps<E extends HtmlElementTagName = HtmlElementTagName, B e
     bond?: Bond;
     base?: B;
     preset?: PresetModuleName | (string & {});
+    /**
+     * Variant definition or function to resolve variants
+     * - VariantDefinition: Static variant config with base, variants, compoundVariants, defaultVariants
+     * - Function: Dynamic function that receives bond and props, returns props (legacy)
+     */
+    variants?: VariantDefinition<any> | ((bond: Bond, variantProps: Record<string, any>) => Record<string, any>);
 };
 export type { ElementType };

package/dist/components/button/button.stories.svelte

@@ -1,17 +1,57 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import ButtonCmp from './button.svelte';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Button'
-	});
-</script>
-
-<Story name="Button">
-	<Root class="p-4">
-		{#snippet children({ args })}
-			<ButtonCmp>Clicke me</ButtonCmp>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import ButtonCmp from './button.svelte';
+	import { defineVariants } from '../../utils/variant';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Button'
+	});
+</script>
+
+<script lang="ts">
+	const variants = defineVariants((bond) => ({
+		variants: {
+			variant: {
+				primary: {
+					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
+				},
+				secondary: {
+					class:
+						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
+				},
+				destructive: {
+					class:
+						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
+				},
+				outline: {
+					class:
+						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
+				},
+				ghost: {
+					class: 'hover:bg-accent hover:text-accent-foreground'
+				}
+			}
+		},
+		compounds: [],
+		defaults: {
+			variant: 'destructive'
+		}
+	}));
+</script>
+
+<Story name="Button">
+	<Root class="p-4">
+		{#snippet children({ args })}
+			<ButtonCmp variant="primary">Clicke me</ButtonCmp>
+		{/snippet}
+	</Root>
+</Story>
+
+<Story name="Button - Local Variants">
+	<Root class="p-4">
+		{#snippet children({ args })}
+			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
+		{/snippet}
+	</Root>
+</Story>

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

@@ -1,18 +1,5 @@
-export default Button;
-type Button = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Button: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;

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

@@ -2,6 +2,6 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { CheckboxProps } from './types';
 import './checkbox.css';
 type $$ComponentProps = CheckboxProps & Exclude<HTMLInputAttributes, 'type'>;
-declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "group" | "value" | "checked" | "indeterminate">;
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "value" | "group" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

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

@@ -18,7 +18,7 @@ declare function $$render<D>(): {
     exports: {
         getBond: () => ComboboxBond<D>;
     };
-    bindings: "values" | "text" | "value" | "open" | "query";
+    bindings: "values" | "value" | "text" | "open" | "query";
     slots: {};
     events: {};
 };
@@ -26,7 +26,7 @@ declare class __sveltets_Render<D> {
     props(): ReturnType<typeof $$render<D>>['props'];
     events(): ReturnType<typeof $$render<D>>['events'];
     slots(): ReturnType<typeof $$render<D>>['slots'];
-    bindings(): "values" | "text" | "value" | "open" | "query";
+    bindings(): "values" | "value" | "text" | "open" | "query";
     exports(): {
         getBond: () => ComboboxBond<D>;
     };

package/dist/components/datagrid/datagrid.stories.svelte

@@ -1,75 +1,75 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import { DataGrid as DataGridCmp } from '.';
-	import { Dropdown } from '../dropdown';
-	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
-	import { Icon } from '../icon';
-	import { container } from '../../runes/container.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/DataGrid'
-	});
-</script>
-
-<script>
-	let values = $state([]);
-
-	const datagridContainer = container();
-</script>
-
-<Story name="DataGrid">
-	<Root>
-		{#snippet children({ args })}
-			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
-				<DataGridCmp.Header>
-					<DataGridCmp.Tr header>
-						<DataGridCmp.Th width="auto">
-							<DataGridCmp.Checkbox />
-						</DataGridCmp.Th>
-						<DataGridCmp.Th
-							class="resize-x overflow-x-auto"
-							width="auto"
-							hidden={datagridContainer.current?.width
-								? datagridContainer.current.width < 1024
-								: false}>ID</DataGridCmp.Th
-						>
-						<DataGridCmp.Th>Name</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
-						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
-					</DataGridCmp.Tr>
-				</DataGridCmp.Header>
-
-				<DataGridCmp.Body>
-					{#each { length: 10 } as _, i (i)}
-						<DataGridCmp.Tr>
-							<DataGridCmp.Td>
-								<DataGridCmp.Checkbox />
-							</DataGridCmp.Td>
-
-							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
-							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
-							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
-							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
-
-							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
-								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
-									<Icon src={MoreVerticalIcon} />
-								</Dropdown.Trigger>
-								<Dropdown.List>
-									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
-									<Dropdown.Item value="en">English</Dropdown.Item>
-									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
-									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
-								</Dropdown.List>
-							</DataGridCmp.Td>
-						</DataGridCmp.Tr>
-					{/each}
-				</DataGridCmp.Body>
-
-				<DataGridCmp.Footer></DataGridCmp.Footer>
-			</DataGridCmp.Root>
-		{/snippet}
-	</Root>
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import { DataGrid as DataGridCmp } from '.';
+	import { Dropdown } from '../dropdown';
+	import MoreVerticalIcon from '../../icons/icon-more-vert.svelte';
+	import { Icon } from '../icon';
+	import { container } from '../../runes/container.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/DataGrid'
+	});
+</script>
+
+<script>
+	let values = $state([]);
+
+	const datagridContainer = container();
+</script>
+
+<Story name="DataGrid">
+	<Root>
+		{#snippet children({ args })}
+			<DataGridCmp.Root class="" {@attach datagridContainer.attach}>
+				<DataGridCmp.Header>
+					<DataGridCmp.Tr header>
+						<DataGridCmp.Th width="auto">
+							<DataGridCmp.Checkbox />
+						</DataGridCmp.Th>
+						<DataGridCmp.Th
+							class="resize-x overflow-x-auto"
+							width="auto"
+							hidden={datagridContainer.current?.width
+								? datagridContainer.current.width < 1024
+								: false}>ID</DataGridCmp.Th
+						>
+						<DataGridCmp.Th>Name</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto">Job</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto">Contact</DataGridCmp.Th>
+						<DataGridCmp.Th width="auto"></DataGridCmp.Th>
+					</DataGridCmp.Tr>
+				</DataGridCmp.Header>
+
+				<DataGridCmp.Body>
+					{#each { length: 10 } as _, i (i)}
+						<DataGridCmp.Tr>
+							<DataGridCmp.Td>
+								<DataGridCmp.Checkbox />
+							</DataGridCmp.Td>
+
+							<DataGridCmp.Td>{crypto.randomUUID()}</DataGridCmp.Td>
+							<DataGridCmp.Td>John Doe</DataGridCmp.Td>
+							<DataGridCmp.Td>Software Engineer</DataGridCmp.Td>
+							<DataGridCmp.Td>+213659009944</DataGridCmp.Td>
+
+							<DataGridCmp.Td base={Dropdown.Root} placement="bottom-end" offset={0}>
+								<Dropdown.Trigger class="flex aspect-square items-center justify-center p-0">
+									<Icon src={MoreVerticalIcon} />
+								</Dropdown.Trigger>
+								<Dropdown.List>
+									<Dropdown.Item value="ar">Arabic</Dropdown.Item>
+									<Dropdown.Item value="en">English</Dropdown.Item>
+									<Dropdown.Item value="sp">Spanish</Dropdown.Item>
+									<Dropdown.Item value="fr">Frensh</Dropdown.Item>
+								</Dropdown.List>
+							</DataGridCmp.Td>
+						</DataGridCmp.Tr>
+					{/each}
+				</DataGridCmp.Body>
+
+				<DataGridCmp.Footer></DataGridCmp.Footer>
+			</DataGridCmp.Root>
+		{/snippet}
+	</Root>
+</Story>