@dryui/ui 0.2.2 → 0.4.0

package/dist/mega-menu/{mega-menu-trigger.svelte → mega-menu-button-trigger.svelte}

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getMegaMenuCtx, getMegaMenuItemCtx } from './context.svelte.js';
 
 	interface Props extends HTMLButtonAttributes {
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getMegaMenuCtx();
 	const itemCtx = getMegaMenuItemCtx();
@@ -32,39 +33,17 @@
 	}
 </script>
 
-<button
+<Button
+	variant="trigger"
 	type="button"
-	data-mega-menu-trigger
 	id={itemCtx.triggerId}
 	aria-expanded={itemCtx.open}
 	aria-haspopup="true"
-	data-active={itemCtx.open || undefined}
+	data-mega-menu-trigger
 	data-state={itemCtx.open ? 'open' : 'closed'}
-	class={className}
+	{...rest}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
-	{...rest}
 >
 	{@render children()}
-</button>
-
-<style>
-	[data-mega-menu-trigger] {
-		all: unset;
-		cursor: pointer;
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
-		font-weight: 500;
-		color: var(--dry-color-text-strong, #1a1a2e);
-		border-radius: var(--dry-radius-md, 0.375rem);
-		transition:
-			background var(--dry-duration-fast, 100ms) ease,
-			color var(--dry-duration-fast, 100ms) ease;
-	}
-
-	[data-mega-menu-trigger]:hover,
-	[data-mega-menu-trigger][data-active] {
-		background: var(--dry-color-fill, #f3f4f6);
-		color: var(--dry-color-fill-brand, #3b82f6);
-	}
-</style>
+</Button>

package/dist/mega-menu/mega-menu-button-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    children: Snippet;
+}
+declare const MegaMenuButtonTrigger: import("svelte").Component<Props, {}, "">;
+type MegaMenuButtonTrigger = ReturnType<typeof MegaMenuButtonTrigger>;
+export default MegaMenuButtonTrigger;

package/dist/mega-menu/mega-menu-column.svelte

@@ -18,12 +18,17 @@
 </div>
 
 <style>
+	[data-mega-menu-column] {
+		display: grid;
+		gap: var(--dry-space-2, 0.5rem);
+	}
+
 	[data-mega-menu-column] [data-part='column-title'] {
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		font-weight: 700;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		color: var(--dry-color-text-weak, #64748b);
-		margin-bottom: var(--dry-space-3, 0.75rem);
+		padding-bottom: var(--dry-space-1, 0.25rem);
 	}
 </style>

package/dist/mega-menu/mega-menu-column.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	title?: string;
-	children: Snippet;
+    title?: string;
+    children: Snippet;
 }
-declare const MegaMenuColumn: import('svelte').Component<Props, {}, ''>;
+declare const MegaMenuColumn: import("svelte").Component<Props, {}, "">;
 type MegaMenuColumn = ReturnType<typeof MegaMenuColumn>;
 export default MegaMenuColumn;

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const MegaMenuItem: import('svelte').Component<Props, {}, ''>;
+declare const MegaMenuItem: import("svelte").Component<Props, {}, "">;
 type MegaMenuItem = ReturnType<typeof MegaMenuItem>;
 export default MegaMenuItem;

package/dist/mega-menu/mega-menu-link.svelte

@@ -1,17 +1,33 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLAnchorAttributes {
+	interface Props extends Omit<HTMLAnchorAttributes, 'children' | 'type'> {
+		href?: string;
+		rel?: string;
+		target?: string;
+		download?: boolean | string;
+		type?: 'button' | 'submit' | 'reset';
 		icon?: Snippet;
 		description?: Snippet;
 		children: Snippet;
 	}
 
-	let { icon, description, class: className, children, ...rest }: Props = $props();
+	let {
+		href,
+		rel,
+		target,
+		download,
+		type = 'button',
+		icon,
+		description,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<a data-mega-menu-link class={className} {...rest}>
+{#snippet body()}
 	{#if icon}
 		<span data-part="link-icon">
 			{@render icon()}
@@ -27,19 +43,35 @@
 			</span>
 		{/if}
 	</span>
-</a>
+{/snippet}
+
+{#if href !== undefined}
+	<a data-mega-menu-link {href} {rel} {target} {download} class={className} {...rest}>
+		{@render body()}
+	</a>
+{:else}
+	<button data-mega-menu-link {type} class={className} {...rest as HTMLButtonAttributes}>
+		{@render body()}
+	</button>
+{/if}
 
 <style>
 	[data-mega-menu-link] {
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		align-items: flex-start;
+		align-items: start;
 		gap: var(--dry-space-3, 0.75rem);
 		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
+		border: 0;
 		border-radius: var(--dry-radius-md, 0.375rem);
+		background: none;
+		font: inherit;
+		text-align: start;
 		text-decoration: none;
 		color: inherit;
+		cursor: pointer;
+		appearance: none;
 		transition: background var(--dry-duration-fast, 100ms) ease;
 	}
 

package/dist/mega-menu/mega-menu-link.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes } from 'svelte/elements';
-interface Props extends HTMLAnchorAttributes {
-	icon?: Snippet;
-	description?: Snippet;
-	children: Snippet;
+interface Props extends Omit<HTMLAnchorAttributes, 'children' | 'type'> {
+    href?: string;
+    rel?: string;
+    target?: string;
+    download?: boolean | string;
+    type?: 'button' | 'submit' | 'reset';
+    icon?: Snippet;
+    description?: Snippet;
+    children: Snippet;
 }
-declare const MegaMenuLink: import('svelte').Component<Props, {}, ''>;
+declare const MegaMenuLink: import("svelte").Component<Props, {}, "">;
 type MegaMenuLink = ReturnType<typeof MegaMenuLink>;
 export default MegaMenuLink;

package/dist/mega-menu/mega-menu-panel.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { fromAction } from 'svelte/attachments';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createPositionedPopover } from '@dryui/primitives';
 	import { getMegaMenuCtx, getMegaMenuItemCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -8,11 +10,20 @@
 		children: Snippet;
 	}
 
-	let { fullWidth = false, class: className, children, ...rest }: Props = $props();
+	let { fullWidth = false, class: className, children, style, ...rest }: Props = $props();
 
 	const ctx = getMegaMenuCtx();
 	const itemCtx = getMegaMenuItemCtx();
 
+	let panelEl = $state<HTMLDivElement | null>(null);
+
+	const popover = createPositionedPopover({
+		triggerEl: () => document.getElementById(itemCtx.triggerId),
+		contentEl: () => panelEl ?? null,
+		placement: () => 'bottom-start',
+		offset: () => 4
+	});
+
 	function handlePointerEnter() {
 		ctx.openItem(itemCtx.itemId);
 	}
@@ -20,11 +31,35 @@
 	function handlePointerLeave() {
 		ctx.closeItem();
 	}
+
+	function attachPanel(node: HTMLDivElement) {
+		panelEl = node;
+
+		return () => {
+			if (panelEl === node) {
+				panelEl = null;
+			}
+		};
+	}
+
+	function syncPopover(isOpen: boolean) {
+		return (node: HTMLDivElement) => {
+			if (isOpen && !node.matches(':popover-open')) {
+				popover.showPopover(node);
+			} else if (!isOpen && node.matches(':popover-open')) {
+				popover.hidePopover(node);
+			}
+		};
+	}
 </script>
 
 {#if itemCtx.open}
 	<div
+		{@attach attachPanel}
+		{@attach syncPopover(itemCtx.open)}
+		{@attach fromAction(popover.applyPosition, () => style)}
 		role="region"
+		popover="manual"
 		data-mega-menu-panel
 		aria-labelledby={itemCtx.triggerId}
 		data-state={itemCtx.open ? 'open' : 'closed'}
@@ -40,25 +75,30 @@
 
 <style>
 	[data-mega-menu-panel] {
-		position: absolute;
-		top: 100%;
-		left: 0;
+		inset: unset;
+		margin: 0;
 		z-index: var(--dry-layer-overlay, 50);
 		background: var(--dry-color-bg-overlay, white);
 		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
 		border-radius: var(--dry-radius-lg, 0.5rem);
 		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
-		padding: var(--dry-space-6, 1.5rem);
+		padding: var(--dry-space-4, 1rem);
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
-		align-items: flex-start;
-		gap: var(--dry-space-8, 2rem);
-		margin-top: var(--dry-space-1, 0.25rem);
+		align-items: start;
+		gap: var(--dry-space-6, 1.5rem);
+	}
+
+	[data-mega-menu-panel]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-mega-menu-panel]:popover-open {
+		display: grid;
 	}
 
 	[data-mega-menu-panel][data-full-width] {
-		left: 0;
-		right: 0;
+		justify-self: stretch;
 	}
 </style>

package/dist/mega-menu/mega-menu-panel.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	fullWidth?: boolean;
-	children: Snippet;
+    fullWidth?: boolean;
+    children: Snippet;
 }
-declare const MegaMenuPanel: import('svelte').Component<Props, {}, ''>;
+declare const MegaMenuPanel: import("svelte").Component<Props, {}, "">;
 type MegaMenuPanel = ReturnType<typeof MegaMenuPanel>;
 export default MegaMenuPanel;

package/dist/mega-menu/mega-menu-root.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const MegaMenuRoot: import('svelte').Component<Props, {}, ''>;
+declare const MegaMenuRoot: import("svelte").Component<Props, {}, "">;
 type MegaMenuRoot = ReturnType<typeof MegaMenuRoot>;
 export default MegaMenuRoot;

package/dist/menubar/index.d.ts

@@ -1,7 +1,7 @@
 export type { MenubarRootProps, MenubarMenuProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarSeparatorProps, MenubarLabelProps } from '@dryui/primitives';
 import MenubarRoot from './menubar-root.svelte';
 import MenubarMenu from './menubar-menu.svelte';
-import MenubarTrigger from './menubar-trigger.svelte';
+import MenubarTrigger from './menubar-button-trigger.svelte';
 import MenubarContent from './menubar-content.svelte';
 import MenubarItem from './menubar-item.svelte';
 import MenubarSeparator from './menubar-separator.svelte';

package/dist/menubar/index.js

@@ -1,6 +1,6 @@
 import MenubarRoot from './menubar-root.svelte';
 import MenubarMenu from './menubar-menu.svelte';
-import MenubarTrigger from './menubar-trigger.svelte';
+import MenubarTrigger from './menubar-button-trigger.svelte';
 import MenubarContent from './menubar-content.svelte';
 import MenubarItem from './menubar-item.svelte';
 import MenubarSeparator from './menubar-separator.svelte';

package/dist/menubar/{menubar-trigger.svelte → menubar-button-trigger.svelte}

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 	import { getMenubarCtx, getMenubarMenuCtx } from './context.svelte.js';
 
 	interface Props extends HTMLButtonAttributes {
 		children: Snippet;
 	}
 
-	let { class: className, children, onclick, onkeydown, ...rest }: Props = $props();
+	let { children, onclick, onkeydown, ...rest }: Props = $props();
 
 	const ctx = getMenubarCtx();
 	const menuCtx = getMenubarMenuCtx();
@@ -55,55 +56,18 @@
 	}
 </script>
 
-<button
+<Button
+	variant="trigger"
 	type="button"
 	role="menuitem"
 	aria-haspopup="menu"
 	aria-expanded={menuCtx.open}
 	data-menubar-trigger={menuCtx.menuId}
 	data-state={menuCtx.open ? 'open' : 'closed'}
-	class={className}
+	{...rest}
 	onclick={handleClick}
 	onpointerenter={handlePointerEnter}
 	onkeydown={handleKeydown}
-	{...rest}
 >
 	{@render children()}
-</button>
-
-<style>
-	button {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-space-12);
-		padding: var(--dry-space-2) var(--dry-space-3);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-family: var(--dry-font-sans);
-		color: var(--dry-color-text-strong);
-		background: transparent;
-		border: none;
-		border-radius: var(--dry-radius-md);
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	button:hover {
-		background: var(--dry-color-fill);
-	}
-
-	button:active {
-		transform: translateY(1px);
-	}
-
-	button:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -2px;
-	}
-
-	button[data-state='open'] {
-		background: var(--dry-color-fill-brand-weak);
-		color: var(--dry-color-text-brand);
-	}
-</style>
+</Button>

package/dist/menubar/menubar-button-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    children: Snippet;
+}
+declare const MenubarButtonTrigger: import("svelte").Component<Props, {}, "">;
+type MenubarButtonTrigger = ReturnType<typeof MenubarButtonTrigger>;
+export default MenubarButtonTrigger;

package/dist/menubar/menubar-content.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	placement?: 'bottom' | 'bottom-start' | 'bottom-end';
-	offset?: number;
-	children: Snippet;
+    placement?: 'bottom' | 'bottom-start' | 'bottom-end';
+    offset?: number;
+    children: Snippet;
 }
-declare const MenubarContent: import('svelte').Component<Props, {}, ''>;
+declare const MenubarContent: import("svelte").Component<Props, {}, "">;
 type MenubarContent = ReturnType<typeof MenubarContent>;
 export default MenubarContent;

package/dist/menubar/menubar-item.svelte

@@ -59,7 +59,10 @@
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
-		border-radius: var(--dry-radius-sm);
+		border-radius: var(
+			--dry-menu-item-radius,
+			min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4))
+		);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/menubar/menubar-item.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	disabled?: boolean;
-	onSelect?: () => void;
-	children: Snippet;
+    disabled?: boolean;
+    onSelect?: () => void;
+    children: Snippet;
 }
-declare const MenubarItem: import('svelte').Component<Props, {}, ''>;
+declare const MenubarItem: import("svelte").Component<Props, {}, "">;
 type MenubarItem = ReturnType<typeof MenubarItem>;
 export default MenubarItem;

package/dist/menubar/menubar-label.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const MenubarLabel: import('svelte').Component<Props, {}, ''>;
+declare const MenubarLabel: import("svelte").Component<Props, {}, "">;
 type MenubarLabel = ReturnType<typeof MenubarLabel>;
 export default MenubarLabel;

package/dist/menubar/menubar-menu.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	children: Snippet;
+    children: Snippet;
 }
-declare const MenubarMenu: import('svelte').Component<Props, {}, ''>;
+declare const MenubarMenu: import("svelte").Component<Props, {}, "">;
 type MenubarMenu = ReturnType<typeof MenubarMenu>;
 export default MenubarMenu;

package/dist/menubar/menubar-root.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const MenubarRoot: import('svelte').Component<Props, {}, ''>;
+declare const MenubarRoot: import("svelte").Component<Props, {}, "">;
 type MenubarRoot = ReturnType<typeof MenubarRoot>;
 export default MenubarRoot;

package/dist/menubar/menubar-separator.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-declare const MenubarSeparator: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const MenubarSeparator: import("svelte").Component<Props, {}, "">;
 type MenubarSeparator = ReturnType<typeof MenubarSeparator>;
 export default MenubarSeparator;

package/dist/multi-select-combobox/index.d.ts

@@ -1,5 +1,5 @@
 export type { MultiSelectComboboxRootProps, MultiSelectComboboxInputProps, MultiSelectComboboxContentProps, MultiSelectComboboxGroupProps, MultiSelectComboboxItemProps, MultiSelectComboboxEmptyProps, MultiSelectComboboxSelectionListProps, MultiSelectComboboxSelectionItemProps, MultiSelectComboboxSelectionRemoveProps } from '@dryui/primitives';
-import MultiSelectComboboxRoot from './multi-select-combobox-root.svelte';
+import MultiSelectComboboxRoot from './multi-select-combobox-root-input.svelte';
 import MultiSelectComboboxInput from './multi-select-combobox-input.svelte';
 import MultiSelectComboboxContent from './multi-select-combobox-content.svelte';
 import MultiSelectComboboxGroup from './multi-select-combobox-group.svelte';
@@ -7,7 +7,7 @@ import MultiSelectComboboxItem from './multi-select-combobox-item.svelte';
 import MultiSelectComboboxEmpty from './multi-select-combobox-empty.svelte';
 import MultiSelectComboboxSelectionList from './multi-select-combobox-selection-list.svelte';
 import MultiSelectComboboxSelectionItem from './multi-select-combobox-selection-item.svelte';
-import MultiSelectComboboxSelectionRemove from './multi-select-combobox-selection-remove.svelte';
+import MultiSelectComboboxSelectionRemove from './multi-select-combobox-selection-remove-button.svelte';
 export declare const MultiSelectCombobox: {
     Root: typeof MultiSelectComboboxRoot;
     Input: typeof MultiSelectComboboxInput;

package/dist/multi-select-combobox/index.js

@@ -1,4 +1,4 @@
-import MultiSelectComboboxRoot from './multi-select-combobox-root.svelte';
+import MultiSelectComboboxRoot from './multi-select-combobox-root-input.svelte';
 import MultiSelectComboboxInput from './multi-select-combobox-input.svelte';
 import MultiSelectComboboxContent from './multi-select-combobox-content.svelte';
 import MultiSelectComboboxGroup from './multi-select-combobox-group.svelte';
@@ -6,7 +6,7 @@ import MultiSelectComboboxItem from './multi-select-combobox-item.svelte';
 import MultiSelectComboboxEmpty from './multi-select-combobox-empty.svelte';
 import MultiSelectComboboxSelectionList from './multi-select-combobox-selection-list.svelte';
 import MultiSelectComboboxSelectionItem from './multi-select-combobox-selection-item.svelte';
-import MultiSelectComboboxSelectionRemove from './multi-select-combobox-selection-remove.svelte';
+import MultiSelectComboboxSelectionRemove from './multi-select-combobox-selection-remove-button.svelte';
 export const MultiSelectCombobox = {
     Root: MultiSelectComboboxRoot,
     Input: MultiSelectComboboxInput,

package/dist/multi-select-combobox/multi-select-combobox-content.svelte.d.ts

@@ -1,8 +1,13 @@
-import type { MultiSelectComboboxContentProps } from '@dryui/primitives';
-declare const MultiSelectComboboxContent: import('svelte').Component<
-	MultiSelectComboboxContentProps,
-	{},
-	''
->;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Placement } from '@dryui/primitives';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    placement?: Placement;
+    offset?: number;
+    loading?: boolean;
+    loadingContent?: Snippet;
+    children: Snippet;
+}
+declare const MultiSelectComboboxContent: import("svelte").Component<Props, {}, "">;
 type MultiSelectComboboxContent = ReturnType<typeof MultiSelectComboboxContent>;
 export default MultiSelectComboboxContent;

package/dist/multi-select-combobox/multi-select-combobox-empty.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { MultiSelectComboboxEmptyProps } from '@dryui/primitives';
-declare const MultiSelectComboboxEmpty: import('svelte').Component<
-	MultiSelectComboboxEmptyProps,
-	{},
-	''
->;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+declare const MultiSelectComboboxEmpty: import("svelte").Component<Props, {}, "">;
 type MultiSelectComboboxEmpty = ReturnType<typeof MultiSelectComboboxEmpty>;
 export default MultiSelectComboboxEmpty;

package/dist/multi-select-combobox/multi-select-combobox-group.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { MultiSelectComboboxGroupProps } from '@dryui/primitives';
-declare const MultiSelectComboboxGroup: import('svelte').Component<
-	MultiSelectComboboxGroupProps,
-	{},
-	''
->;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    children: Snippet;
+}
+declare const MultiSelectComboboxGroup: import("svelte").Component<Props, {}, "">;
 type MultiSelectComboboxGroup = ReturnType<typeof MultiSelectComboboxGroup>;
 export default MultiSelectComboboxGroup;

package/dist/multi-select-combobox/multi-select-combobox-input.svelte.d.ts

@@ -1,8 +1,7 @@
-import type { MultiSelectComboboxInputProps } from '@dryui/primitives';
-declare const MultiSelectComboboxInput: import('svelte').Component<
-	MultiSelectComboboxInputProps,
-	{},
-	''
->;
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    placeholder?: string;
+}
+declare const MultiSelectComboboxInput: import("svelte").Component<Props, {}, "">;
 type MultiSelectComboboxInput = ReturnType<typeof MultiSelectComboboxInput>;
 export default MultiSelectComboboxInput;