@dryui/ui 0.3.0 → 0.4.0

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;

package/dist/multi-select-combobox/multi-select-combobox-item.svelte

@@ -96,13 +96,18 @@
 
 <style>
 	[data-multi-select-item] {
+		--dry-multi-select-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-sm)),
+			var(--dry-space-4)
+		);
+
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-space-2) var(--dry-space-3);
-		border-radius: var(--dry-radius-sm);
+		border-radius: var(--dry-multi-select-item-radius);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

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

@@ -1,8 +1,12 @@
-import type { MultiSelectComboboxItemProps } from '@dryui/primitives';
-declare const MultiSelectComboboxItem: import('svelte').Component<
-	MultiSelectComboboxItemProps,
-	{},
-	''
->;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value: string;
+    textValue?: string;
+    disabled?: boolean;
+    icon?: Snippet;
+    children: Snippet;
+}
+declare const MultiSelectComboboxItem: import("svelte").Component<Props, {}, "">;
 type MultiSelectComboboxItem = ReturnType<typeof MultiSelectComboboxItem>;
 export default MultiSelectComboboxItem;

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: string[];
+    query?: string;
+    open?: boolean;
+    disabled?: boolean;
+    name?: string;
+    maxSelections?: number;
+    onvaluechange?: (value: string[]) => void;
+    onquerychange?: (query: string) => void;
+    children: Snippet;
+}
+declare const MultiSelectComboboxRootInput: import("svelte").Component<Props, {}, "value" | "open" | "query">;
+type MultiSelectComboboxRootInput = ReturnType<typeof MultiSelectComboboxRootInput>;
+export default MultiSelectComboboxRootInput;

package/dist/multi-select-combobox/multi-select-combobox-selection-item.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { MultiSelectComboboxSelectionItemProps } from '@dryui/primitives';
-declare const MultiSelectComboboxSelectionItem: import('svelte').Component<
-	MultiSelectComboboxSelectionItemProps,
-	{},
-	''
->;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    value: string;
+    children?: Snippet | undefined;
+}
+declare const MultiSelectComboboxSelectionItem: import("svelte").Component<Props, {}, "">;
 type MultiSelectComboboxSelectionItem = ReturnType<typeof MultiSelectComboboxSelectionItem>;
 export default MultiSelectComboboxSelectionItem;

package/dist/multi-select-combobox/multi-select-combobox-selection-list.svelte.d.ts

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

package/dist/multi-select-combobox/multi-select-combobox-selection-remove-button.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import CloseButtonBase from '../internal/close-button-base.svelte';
+	import { getMultiSelectComboboxCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		value: string;
+		label?: string | undefined;
+	}
+
+	let { value, label, onclick, ...rest }: Props = $props();
+
+	const ctx = getMultiSelectComboboxCtx();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (ctx.disabled) {
+			return;
+		}
+
+		ctx.removeValue(value);
+		ctx.focusInput();
+
+		if (onclick) {
+			(onclick as (event: MouseEvent & { currentTarget: HTMLButtonElement }) => void)(event);
+		}
+	}
+</script>
+
+<CloseButtonBase
+	aria-label={`Remove selection: ${label ?? value}`}
+	disabled={ctx.disabled}
+	{...rest}
+	onclick={handleClick}
+/>

package/dist/multi-select-combobox/multi-select-combobox-selection-remove-button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
+    value: string;
+    label?: string | undefined;
+}
+declare const MultiSelectComboboxSelectionRemoveButton: import("svelte").Component<Props, {}, "">;
+type MultiSelectComboboxSelectionRemoveButton = ReturnType<typeof MultiSelectComboboxSelectionRemoveButton>;
+export default MultiSelectComboboxSelectionRemoveButton;

package/dist/navigation-menu/index.d.ts

@@ -22,7 +22,7 @@ export interface NavigationMenuLinkProps extends HTMLAnchorAttributes {
 import NavigationMenuRoot from './navigation-menu-root.svelte';
 import NavigationMenuList from './navigation-menu-list.svelte';
 import NavigationMenuItem from './navigation-menu-item.svelte';
-import NavigationMenuTrigger from './navigation-menu-trigger.svelte';
+import NavigationMenuTrigger from './navigation-menu-trigger-button.svelte';
 import NavigationMenuContent from './navigation-menu-content.svelte';
 import NavigationMenuLink from './navigation-menu-link.svelte';
 export declare const NavigationMenu: {

package/dist/navigation-menu/index.js

@@ -1,7 +1,7 @@
 import NavigationMenuRoot from './navigation-menu-root.svelte';
 import NavigationMenuList from './navigation-menu-list.svelte';
 import NavigationMenuItem from './navigation-menu-item.svelte';
-import NavigationMenuTrigger from './navigation-menu-trigger.svelte';
+import NavigationMenuTrigger from './navigation-menu-trigger-button.svelte';
 import NavigationMenuContent from './navigation-menu-content.svelte';
 import NavigationMenuLink from './navigation-menu-link.svelte';
 export const NavigationMenu = {

package/dist/navigation-menu/navigation-menu-content.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 NavigationMenuContent: import('svelte').Component<Props, {}, ''>;
+declare const NavigationMenuContent: import("svelte").Component<Props, {}, "">;
 type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
 export default NavigationMenuContent;

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

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

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

@@ -7,10 +7,10 @@
 		children: Snippet;
 	}
 
-	let { active = false, class: className, children, ...rest }: Props = $props();
+	let { href, active = false, class: className, children, ...rest }: Props = $props();
 </script>
 
-<a data-active={active || undefined} data-nav-menu-link class={className} {...rest}>
+<a {href} data-active={active || undefined} data-nav-menu-link class={className} {...rest}>
 	{@render children()}
 </a>
 

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

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

package/dist/navigation-menu/navigation-menu-list.svelte.d.ts

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

package/dist/navigation-menu/navigation-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 NavigationMenuRoot: import('svelte').Component<Props, {}, ''>;
+declare const NavigationMenuRoot: import("svelte").Component<Props, {}, "">;
 type NavigationMenuRoot = ReturnType<typeof NavigationMenuRoot>;
 export default NavigationMenuRoot;

package/dist/navigation-menu/{navigation-menu-trigger.svelte → navigation-menu-trigger-button.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 { getNavigationMenuCtx, getNavigationMenuItemCtx } from './context.svelte.js';
 
 	interface Props extends HTMLButtonAttributes {
 		children: Snippet;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { children, ...rest }: Props = $props();
 
 	const ctx = getNavigationMenuCtx();
 	const itemCtx = getNavigationMenuItemCtx();
@@ -43,52 +44,19 @@
 	}
 </script>
 
-<button
+<Button
+	variant="trigger"
 	type="button"
 	id={itemCtx.triggerId}
 	aria-controls={itemCtx.contentId}
 	aria-expanded={itemCtx.open}
 	data-state={itemCtx.open ? 'open' : 'closed'}
 	data-nav-menu-trigger
-	class={className}
+	{...rest}
 	onpointerenter={handlePointerEnter}
 	onpointerleave={handlePointerLeave}
 	onclick={handleClick}
 	onkeydown={handleKeydown}
-	{...rest}
 >
 	{@render children()}
-</button>
-
-<style>
-	[data-nav-menu-trigger] {
-		display: inline-grid;
-		place-items: center;
-		min-height: var(--dry-space-12);
-		padding: var(--dry-nav-menu-trigger-padding-y) var(--dry-nav-menu-trigger-padding-x);
-		border: none;
-		border-radius: var(--dry-radius-md);
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-nav-menu-trigger]:hover {
-		background: var(--dry-color-fill);
-	}
-
-	[data-nav-menu-trigger][data-state='open'] {
-		background: var(--dry-color-fill-brand-weak);
-		color: var(--dry-color-text-brand);
-	}
-
-	[data-nav-menu-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-</style>
+</Button>

package/dist/navigation-menu/navigation-menu-trigger-button.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 NavigationMenuTriggerButton: import("svelte").Component<Props, {}, "">;
+type NavigationMenuTriggerButton = ReturnType<typeof NavigationMenuTriggerButton>;
+export default NavigationMenuTriggerButton;

package/dist/noise/noise.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	opacity?: number;
-	blend?: 'soft-light' | 'overlay' | 'multiply';
-	animated?: boolean;
-	children?: Snippet;
+    opacity?: number;
+    blend?: 'soft-light' | 'overlay' | 'multiply';
+    animated?: boolean;
+    grain?: 'fine' | 'medium' | 'coarse';
+    children?: Snippet;
 }
-declare const Noise: import('svelte').Component<Props, {}, ''>;
+declare const Noise: import("svelte").Component<Props, {}, "">;
 type Noise = ReturnType<typeof Noise>;
 export default Noise;

package/dist/notification-center/index.d.ts

@@ -1,6 +1,6 @@
 export type { NotificationItem, NotificationCenterRootProps, NotificationCenterTriggerProps, NotificationCenterPanelProps, NotificationCenterItemProps, NotificationCenterGroupProps } from '@dryui/primitives';
 import NotificationCenterRoot from './notification-center-root.svelte';
-import NotificationCenterTrigger from './notification-center-trigger.svelte';
+import NotificationCenterTrigger from './notification-center-trigger-button.svelte';
 import NotificationCenterPanel from './notification-center-panel.svelte';
 import NotificationCenterItem from './notification-center-item.svelte';
 import NotificationCenterGroup from './notification-center-group.svelte';

package/dist/notification-center/index.js

@@ -1,5 +1,5 @@
 import NotificationCenterRoot from './notification-center-root.svelte';
-import NotificationCenterTrigger from './notification-center-trigger.svelte';
+import NotificationCenterTrigger from './notification-center-trigger-button.svelte';
 import NotificationCenterPanel from './notification-center-panel.svelte';
 import NotificationCenterItem from './notification-center-item.svelte';
 import NotificationCenterGroup from './notification-center-group.svelte';

package/dist/notification-center/notification-center-group.svelte.d.ts

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

package/dist/notification-center/notification-center-item.svelte.d.ts

@@ -1,13 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	id: string;
-	read?: boolean;
-	timestamp?: Date;
-	variant?: 'info' | 'warning' | 'critical';
-	action?: Snippet;
-	children: Snippet;
+    id: string;
+    read?: boolean;
+    timestamp?: Date;
+    variant?: 'info' | 'warning' | 'critical';
+    action?: Snippet;
+    children: Snippet;
 }
-declare const NotificationCenterItem: import('svelte').Component<Props, {}, ''>;
+declare const NotificationCenterItem: import("svelte").Component<Props, {}, "">;
 type NotificationCenterItem = ReturnType<typeof NotificationCenterItem>;
 export default NotificationCenterItem;

package/dist/notification-center/notification-center-panel.svelte.d.ts

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

package/dist/notification-center/notification-center-root.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-import type { NotificationItem } from '@dryui/primitives';
+import { type NotificationItem } from './context.svelte.js';
 interface Props {
-	items?: NotificationItem[];
-	open?: boolean;
-	children: Snippet;
+    items?: NotificationItem[];
+    open?: boolean;
+    children: Snippet;
 }
-declare const NotificationCenterRoot: import('svelte').Component<Props, {}, 'open' | 'items'>;
+declare const NotificationCenterRoot: import("svelte").Component<Props, {}, "open" | "items">;
 type NotificationCenterRoot = ReturnType<typeof NotificationCenterRoot>;
 export default NotificationCenterRoot;