compote-ui 0.2.0 → 0.5.0

package/dist/components/listbox/listbox.svelte

@@ -0,0 +1,116 @@
+<script module>
+	// eslint-disable-next-line no-import-assign
+	export type { ListboxItem, ListboxProps } from './types';
+</script>
+
+<script lang="ts" generics="T extends number | string = number | string">
+	import { Listbox, createListCollection } from '@ark-ui/svelte/listbox';
+	import { useFilter } from '@ark-ui/svelte/locale';
+	import PhCheckBold from '~icons/ph/check-bold';
+	import type { ListboxItem, ListboxProps } from './types';
+	import { cn } from 'tailwind-variants';
+
+	type Props = ListboxProps<T>;
+
+	let {
+		value = $bindable(),
+		items,
+		label,
+		name,
+		onValueChange,
+		filterable = false,
+		filterPlaceholder = 'Search...',
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	const filters = useFilter({ sensitivity: 'base' });
+	let filterText = $state('');
+	const hasGroups = $derived(items.some((i) => i.group));
+
+	const baseCollection = $derived(
+		createListCollection({
+			items,
+			itemToValue: (item) => item.value.toString(),
+			isItemDisabled: (item) => item.disabled === true,
+			...(hasGroups ? { groupBy: (item: ListboxItem<T>) => item.group ?? '' } : {})
+		})
+	);
+
+	const collection = $derived(
+		filterable && filterText
+			? baseCollection.filter((itemString) => filters().contains(itemString, filterText))
+			: baseCollection
+	);
+
+	const stringValue = $derived(value?.map(String) ?? []);
+
+	function handleValueChange(details: Parameters<NonNullable<Props['onValueChange']>>[0]) {
+		value = details.value as unknown as T[];
+		onValueChange?.(details);
+	}
+</script>
+
+<Listbox.Root
+	value={stringValue}
+	{collection}
+	onValueChange={handleValueChange}
+	{...restProps}
+	class={cn('flex h-full w-full flex-col gap-1.5 overflow-hidden', className)}
+>
+	{#if label}
+		<Listbox.Label>{label}</Listbox.Label>
+	{/if}
+	{#if filterable}
+		<Listbox.Input
+			placeholder={filterPlaceholder}
+			oninput={(e) => (filterText = e.currentTarget.value)}
+			class="mx-1 h-8 w-full rounded-xs border border-surface-3 bg-transparent px-2.5 text-sm outline-none placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-primary"
+		/>
+	{/if}
+	<Listbox.Content class="flex min-h-0 w-full flex-1 flex-col gap-1 overflow-y-auto outline-none">
+		{#if hasGroups}
+			{#each collection.group() as [type, group] (type)}
+				<Listbox.ItemGroup class="flex flex-col gap-1 px-1 py-1">
+					<Listbox.ItemGroupLabel class="flex h-10 items-center text-sm font-medium text-ink-dim">
+						{type}
+					</Listbox.ItemGroupLabel>
+					{#each group as item (item.value)}
+						<Listbox.Item
+							{item}
+							class="flex cursor-pointer items-center justify-between rounded-xs px-2.5 py-1.5 text-sm font-medium transition-all duration-150 hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2"
+						>
+							<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
+							<Listbox.ItemIndicator
+								class="h-5 w-5 text-primary data-[state=checked]:flex data-[state=unchecked]:hidden"
+							>
+								<PhCheckBold />
+							</Listbox.ItemIndicator>
+						</Listbox.Item>
+					{/each}
+				</Listbox.ItemGroup>
+			{/each}
+		{:else}
+			{#each collection.items as item (item.value)}
+				<Listbox.Item
+					{item}
+					class="flex cursor-pointer items-center justify-between rounded-xs px-2.5 py-1.5 text-sm font-medium transition-all duration-150 hover:bg-surface-2 data-disabled:opacity-50 data-highlighted:bg-surface-2"
+				>
+					<Listbox.ItemText class="flex-1 truncate">{item.label}</Listbox.ItemText>
+					<Listbox.ItemIndicator
+						class="h-5 w-5 text-primary data-[state=checked]:flex data-[state=unchecked]:hidden"
+					>
+						<PhCheckBold />
+					</Listbox.ItemIndicator>
+				</Listbox.Item>
+			{/each}
+		{/if}
+		<Listbox.Empty class="py-4 text-center text-sm text-ink-dim">No results found</Listbox.Empty>
+	</Listbox.Content>
+</Listbox.Root>
+
+{#if name}
+	{#each value ?? [] as v, i (v)}
+		<input type="hidden" name="{name}[{i}]" value={v ?? ''} />
+	{/each}
+{/if}

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

@@ -0,0 +1,27 @@
+export type { ListboxItem, ListboxProps } from './types';
+import { Listbox } from '@ark-ui/svelte/listbox';
+import type { ListboxProps } from './types';
+declare function $$render<T extends number | string = number | string>(): {
+    props: ListboxProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends number | string = number | string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends number | string = number | string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends number | string = number | string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Listbox: $$IsomorphicComponent;
+type Listbox<T extends number | string = number | string> = InstanceType<typeof Listbox<T>>;
+export default Listbox;

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

@@ -0,0 +1,16 @@
+import type { ListboxRootBaseProps } from '@ark-ui/svelte/listbox';
+export interface ListboxItem<T = number | string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+}
+export interface ListboxProps<T extends number | string = number | string> extends Omit<ListboxRootBaseProps<ListboxItem<T>>, 'collection' | 'value'> {
+    items: ListboxItem<T>[];
+    value?: T[];
+    label?: string;
+    name?: string;
+    filterable?: boolean;
+    filterPlaceholder?: string;
+    class?: string;
+}

package/dist/components/listbox/types.js

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

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

@@ -0,0 +1,14 @@
+export { default as Root } from './menu.svelte';
+export { default as Trigger } from './menu-trigger.svelte';
+export { default as Indicator } from './menu-indicator.svelte';
+export { default as ContextTrigger } from './menu-context-trigger.svelte';
+export { default as Content } from './menu-content.svelte';
+export { default as Item } from './menu-item.svelte';
+export { default as ItemGroup } from './menu-item-group.svelte';
+export { default as ItemGroupLabel } from './menu-item-group-label.svelte';
+export { default as ItemIndicator } from './menu-item-indicator.svelte';
+export { default as CheckboxItem } from './menu-checkbox-item.svelte';
+export { default as RadioItemGroup } from './menu-radio-item-group.svelte';
+export { default as RadioItem } from './menu-radio-item.svelte';
+export { default as TriggerItem } from './menu-trigger-item.svelte';
+export { default as Separator } from './menu-separator.svelte';

package/dist/components/menu/index.js

@@ -0,0 +1,14 @@
+export { default as Root } from './menu.svelte';
+export { default as Trigger } from './menu-trigger.svelte';
+export { default as Indicator } from './menu-indicator.svelte';
+export { default as ContextTrigger } from './menu-context-trigger.svelte';
+export { default as Content } from './menu-content.svelte';
+export { default as Item } from './menu-item.svelte';
+export { default as ItemGroup } from './menu-item-group.svelte';
+export { default as ItemGroupLabel } from './menu-item-group-label.svelte';
+export { default as ItemIndicator } from './menu-item-indicator.svelte';
+export { default as CheckboxItem } from './menu-checkbox-item.svelte';
+export { default as RadioItemGroup } from './menu-radio-item-group.svelte';
+export { default as RadioItem } from './menu-radio-item.svelte';
+export { default as TriggerItem } from './menu-trigger-item.svelte';
+export { default as Separator } from './menu-separator.svelte';

package/dist/components/menu/menu-checkbox-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuCheckboxItemBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+	import MenuItemIndicator from './menu-item-indicator.svelte';
+	import PhCheck from '../../icons/PhCheck.svelte';
+
+	type IndicatorSnippet = { indicator?: Snippet };
+
+	type Props = MenuCheckboxItemBaseProps & { class?: string; children: Snippet } & IndicatorSnippet;
+
+	const { class: className, children, indicator, ...restProps }: Props = $props();
+</script>
+
+<Menu.CheckboxItem
+	{...restProps}
+	class={cn(
+		'relative flex cursor-default items-center justify-between gap-4 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-highlighted:text-ink',
+		className
+	)}
+>
+	{@render children()}
+	<MenuItemIndicator>
+		{#if indicator}
+			{@render indicator()}
+		{:else}
+			<PhCheck />
+		{/if}
+	</MenuItemIndicator>
+</Menu.CheckboxItem>

package/dist/components/menu/menu-checkbox-item.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MenuCheckboxItemBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type IndicatorSnippet = {
+    indicator?: Snippet;
+};
+type Props = MenuCheckboxItemBaseProps & {
+    class?: string;
+    children: Snippet;
+} & IndicatorSnippet;
+declare const MenuCheckboxItem: import("svelte").Component<Props, {}, "">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = {
+		class?: string;
+		children: Snippet;
+	};
+
+	const { class: className, children }: Props = $props();
+</script>
+
+<Menu.Positioner>
+	<Menu.Content
+		class={cn(
+			'z-50 min-w-32 overflow-hidden rounded-md border bg-surface-1 p-1 text-ink shadow-md outline-none',
+			className
+		)}
+	>
+		{@render children()}
+	</Menu.Content>
+</Menu.Positioner>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuContent: import("svelte").Component<Props, {}, "">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/components/menu/menu-context-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = {
+		class?: string;
+		children: Snippet;
+	};
+
+	const { class: className, children }: Props = $props();
+</script>
+
+<Menu.ContextTrigger>
+	{#snippet asChild(props)}
+		<div {...props()} class={cn(props().class, className)}>
+			{@render children()}
+		</div>
+	{/snippet}
+</Menu.ContextTrigger>

package/dist/components/menu/menu-context-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuContextTrigger: import("svelte").Component<Props, {}, "">;
+type MenuContextTrigger = ReturnType<typeof MenuContextTrigger>;
+export default MenuContextTrigger;

package/dist/components/menu/menu-indicator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuIndicatorBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+	import PhCaretDown from '../../icons/PhCaretDown.svelte';
+
+	type Props = MenuIndicatorBaseProps & { class?: string; children?: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.Indicator {...restProps} class={cn('transition-transform data-open:rotate-180', className)}>
+	{#if children}
+		{@render children()}
+	{:else}
+		<PhCaretDown />
+	{/if}
+</Menu.Indicator>

package/dist/components/menu/menu-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuIndicatorBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuIndicatorBaseProps & {
+    class?: string;
+    children?: Snippet;
+};
+declare const MenuIndicator: import("svelte").Component<Props, {}, "">;
+type MenuIndicator = ReturnType<typeof MenuIndicator>;
+export default MenuIndicator;

package/dist/components/menu/menu-item-group-label.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuItemGroupLabelBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuItemGroupLabelBaseProps & { class?: string; children: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.ItemGroupLabel
+	{...restProps}
+	class={cn('px-2 py-1.5 text-xs font-medium text-ink-dim', className)}
+>
+	{@render children()}
+</Menu.ItemGroupLabel>

package/dist/components/menu/menu-item-group-label.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuItemGroupLabelBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuItemGroupLabelBaseProps & {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuItemGroupLabel: import("svelte").Component<Props, {}, "">;
+type MenuItemGroupLabel = ReturnType<typeof MenuItemGroupLabel>;
+export default MenuItemGroupLabel;

package/dist/components/menu/menu-item-group.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuItemGroupBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuItemGroupBaseProps & { class?: string; children: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.ItemGroup {...restProps} class={cn('', className)}>
+	{@render children()}
+</Menu.ItemGroup>

package/dist/components/menu/menu-item-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuItemGroupBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuItemGroupBaseProps & {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuItemGroup: import("svelte").Component<Props, {}, "">;
+type MenuItemGroup = ReturnType<typeof MenuItemGroup>;
+export default MenuItemGroup;

package/dist/components/menu/menu-item-indicator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuItemIndicatorBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuItemIndicatorBaseProps & { class?: string; children: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.ItemIndicator {...restProps} class={cn('flex items-center justify-center', className)}>
+	{@render children()}
+</Menu.ItemIndicator>

package/dist/components/menu/menu-item-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuItemIndicatorBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuItemIndicatorBaseProps & {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuItemIndicator: import("svelte").Component<Props, {}, "">;
+type MenuItemIndicator = ReturnType<typeof MenuItemIndicator>;
+export default MenuItemIndicator;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuItemBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuItemBaseProps & { class?: string; children: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.Item
+	{...restProps}
+	class={cn(
+		'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-highlighted:text-ink',
+		className
+	)}
+>
+	{@render children()}
+</Menu.Item>

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

@@ -0,0 +1,9 @@
+import type { MenuItemBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuItemBaseProps & {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/menu/menu-radio-item-group.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuRadioItemGroupBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuRadioItemGroupBaseProps & { class?: string; children: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.RadioItemGroup {...restProps} class={cn('', className)}>
+	{@render children()}
+</Menu.RadioItemGroup>

package/dist/components/menu/menu-radio-item-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuRadioItemGroupBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuRadioItemGroupBaseProps & {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuRadioItemGroup: import("svelte").Component<Props, {}, "">;
+type MenuRadioItemGroup = ReturnType<typeof MenuRadioItemGroup>;
+export default MenuRadioItemGroup;

package/dist/components/menu/menu-radio-item.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuRadioItemBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+	import MenuItemIndicator from './menu-item-indicator.svelte';
+
+	type Props = MenuRadioItemBaseProps & { class?: string; children: Snippet; indicator?: Snippet };
+
+	const { class: className, children, indicator, ...restProps }: Props = $props();
+</script>
+
+<Menu.RadioItem
+	{...restProps}
+	class={cn(
+		'relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-highlighted:text-ink',
+		className
+	)}
+>
+	{@render children()}
+	<MenuItemIndicator>
+		{#if indicator}
+			{@render indicator()}
+		{:else}
+			●
+		{/if}
+	</MenuItemIndicator>
+</Menu.RadioItem>

package/dist/components/menu/menu-radio-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MenuRadioItemBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuRadioItemBaseProps & {
+    class?: string;
+    children: Snippet;
+    indicator?: Snippet;
+};
+declare const MenuRadioItem: import("svelte").Component<Props, {}, "">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;

package/dist/components/menu/menu-separator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuSeparatorBaseProps } from '@ark-ui/svelte/menu';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuSeparatorBaseProps & { class?: string };
+
+	const { class: className, ...restProps }: Props = $props();
+</script>
+
+<Menu.Separator {...restProps} class={cn('-mx-1 my-1 h-px bg-surface-3', className)} />

package/dist/components/menu/menu-separator.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MenuSeparatorBaseProps } from '@ark-ui/svelte/menu';
+type Props = MenuSeparatorBaseProps & {
+    class?: string;
+};
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/components/menu/menu-trigger-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuTriggerItemBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { cn } from 'tailwind-variants';
+
+	type Props = MenuTriggerItemBaseProps & { class?: string; children: Snippet };
+
+	const { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.TriggerItem
+	{...restProps}
+	class={cn(
+		'relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-2 data-highlighted:text-ink',
+		className
+	)}
+>
+	{@render children()}
+</Menu.TriggerItem>

package/dist/components/menu/menu-trigger-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuTriggerItemBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+type Props = MenuTriggerItemBaseProps & {
+    class?: string;
+    children: Snippet;
+};
+declare const MenuTriggerItem: import("svelte").Component<Props, {}, "">;
+type MenuTriggerItem = ReturnType<typeof MenuTriggerItem>;
+export default MenuTriggerItem;

package/dist/components/menu/menu-trigger.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuTriggerBaseProps } from '@ark-ui/svelte/menu';
+	import type { Snippet } from 'svelte';
+	import { button, type ButtonVariant, type ButtonSize } from '../button/button.variants';
+
+	type Props = MenuTriggerBaseProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		class?: string;
+		children: Snippet;
+	};
+
+	const { variant, size, class: className, children, ...restProps }: Props = $props();
+</script>
+
+<Menu.Trigger {...restProps} class={button({ variant, size, class: className })}>
+	{@render children()}
+</Menu.Trigger>

package/dist/components/menu/menu-trigger.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { MenuTriggerBaseProps } from '@ark-ui/svelte/menu';
+import type { Snippet } from 'svelte';
+import { type ButtonVariant, type ButtonSize } from '../button/button.variants';
+type Props = MenuTriggerBaseProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    class?: string;
+    children: Snippet;
+};
+declare const MenuTrigger: import("svelte").Component<Props, {}, "">;
+type MenuTrigger = ReturnType<typeof MenuTrigger>;
+export default MenuTrigger;

package/dist/components/menu/menu.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Menu } from '@ark-ui/svelte/menu';
+	import type { MenuRootBaseProps } from '@ark-ui/svelte/menu';
+
+	type Props = MenuRootBaseProps;
+
+	const { children, ...restProps }: Props = $props();
+</script>
+
+<Menu.Root {...restProps}>
+	{@render children?.()}
+</Menu.Root>

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

@@ -0,0 +1,4 @@
+import { Menu } from '@ark-ui/svelte/menu';
+declare const Menu: import("svelte").Component<Menu.RootBaseProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;