@dryui/ui 1.5.1 → 1.6.0

package/dist/button-group/context.svelte.js

@@ -1,11 +1,8 @@
-import { getContext, setContext, hasContext } from 'svelte';
-const KEY = Symbol('button-group');
+import { createContext } from '@dryui/primitives';
+const [_setButtonGroupCtx, _getButtonGroupCtx] = createContext('button-group');
 export function setButtonGroupCtx(ctx) {
-    setContext(KEY, ctx);
-    return ctx;
+    return _setButtonGroupCtx(ctx);
 }
 export function getButtonGroupCtx() {
-    if (!hasContext(KEY))
-        return undefined;
-    return getContext(KEY);
+    return _getButtonGroupCtx();
 }

package/dist/calendar/calendar-root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { createDateViewController } from '../internal/date-family-controller.svelte.js';
 	import { setCalendarCtx } from './context.svelte.js';
-	import { getWeekStartDay, addMonths } from '@dryui/primitives';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		value?: Date | null;
@@ -24,24 +24,23 @@
 		...rest
 	}: Props = $props();
 
-	const weekStartDay = $derived(getWeekStartDay(locale));
-
-	let viewMonth = $state(value ? value.getMonth() : new Date().getMonth());
-	let viewYear = $state(value ? value.getFullYear() : new Date().getFullYear());
-	let focusedDate = $state<Date>(value ?? new Date());
+	const view = createDateViewController({
+		initialDate: value,
+		locale: () => locale
+	});
 
 	setCalendarCtx({
 		get value() {
 			return value;
 		},
 		get focusedDate() {
-			return focusedDate;
+			return view.focusedDate;
 		},
 		get viewMonth() {
-			return viewMonth;
+			return view.viewMonth;
 		},
 		get viewYear() {
-			return viewYear;
+			return view.viewYear;
 		},
 		get locale() {
 			return locale;
@@ -56,7 +55,7 @@
 			return disabled;
 		},
 		get weekStartDay() {
-			return weekStartDay;
+			return view.weekStartDay;
 		},
 		get multiple() {
 			return false;
@@ -66,38 +65,22 @@
 		},
 		select(date: Date) {
 			value = date;
-			focusedDate = date;
-			viewMonth = date.getMonth();
-			viewYear = date.getFullYear();
+			view.setFocusedDate(date);
 		},
 		goToMonth(month: number) {
-			if (month < 0) {
-				viewMonth = 11;
-				viewYear = viewYear - 1;
-			} else if (month > 11) {
-				viewMonth = 0;
-				viewYear = viewYear + 1;
-			} else {
-				viewMonth = month;
-			}
+			view.goToMonth(month);
 		},
 		goToYear(year: number) {
-			viewYear = year;
+			view.goToYear(year);
 		},
 		nextMonth() {
-			const next = addMonths(new Date(viewYear, viewMonth, 1), 1);
-			viewMonth = next.getMonth();
-			viewYear = next.getFullYear();
+			view.nextMonth();
 		},
 		prevMonth() {
-			const prev = addMonths(new Date(viewYear, viewMonth, 1), -1);
-			viewMonth = prev.getMonth();
-			viewYear = prev.getFullYear();
+			view.prevMonth();
 		},
 		setFocusedDate(date: Date) {
-			focusedDate = date;
-			viewMonth = date.getMonth();
-			viewYear = date.getFullYear();
+			view.setFocusedDate(date);
 		}
 	});
 </script>

package/dist/chip-group/context.svelte.d.ts

@@ -1,10 +1,8 @@
-interface ChipGroupContext {
+export interface ChipGroupContext {
     readonly type: 'single' | 'multiple';
     readonly disabled: boolean;
     readonly value: string[];
     toggle: (itemValue: string) => void;
     isSelected: (itemValue: string) => boolean;
 }
-export declare function setChipGroupCtx(ctx: ChipGroupContext): ChipGroupContext;
-export declare function getChipGroupCtx(): ChipGroupContext;
-export {};
+export declare const setChipGroupCtx: (ctx: ChipGroupContext) => ChipGroupContext, getChipGroupCtx: () => ChipGroupContext;

package/dist/chip-group/context.svelte.js

@@ -1,9 +1,2 @@
-import { getContext, setContext } from 'svelte';
-const CHIP_GROUP_KEY = Symbol('chip-group');
-export function setChipGroupCtx(ctx) {
-    setContext(CHIP_GROUP_KEY, ctx);
-    return ctx;
-}
-export function getChipGroupCtx() {
-    return getContext(CHIP_GROUP_KEY);
-}
+import { createContext } from '@dryui/primitives';
+export const [setChipGroupCtx, getChipGroupCtx] = createContext('chip-group');

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

@@ -12,26 +12,36 @@
 
 	const ctx = getContextMenuCtx();
 
-	let el = $state<HTMLDivElement>();
+	let el = $state<HTMLDivElement | null>(null);
+
+	function attachContent(node: HTMLDivElement) {
+		el = node;
+
+		return () => {
+			if (el === node) {
+				el = null;
+			}
+		};
+	}
 
 	const menu = createMenuNavigation({
 		container: () => el ?? null,
 		orientation: 'vertical'
 	});
 
-	$effect(() => {
-		if (ctx.open && el) {
-			el.style.position = 'fixed';
-			el.style.left = `${ctx.position.x}px`;
-			el.style.top = `${ctx.position.y}px`;
-			if (!el.matches(':popover-open')) {
-				el.showPopover();
+	function syncPopover(node: HTMLDivElement) {
+		if (ctx.open) {
+			node.style.position = 'fixed';
+			node.style.left = `${ctx.position.x}px`;
+			node.style.top = `${ctx.position.y}px`;
+			if (!node.matches(':popover-open')) {
+				node.showPopover();
 				menu.focusFirst();
 			}
-		} else if (!ctx.open && el?.matches(':popover-open')) {
-			el.hidePopover();
+		} else if (node.matches(':popover-open')) {
+			node.hidePopover();
 		}
-	});
+	}
 
 	createDismiss({
 		enabled: () => ctx.open,
@@ -42,7 +52,8 @@
 </script>
 
 <div
-	bind:this={el}
+	{@attach attachContent}
+	{@attach syncPopover}
 	popover="manual"
 	role="menu"
 	tabindex="-1"
@@ -69,6 +80,7 @@
 		--dry-menu-radius: var(--dry-radius-lg);
 		--dry-menu-shadow: var(--dry-shadow-lg);
 		--dry-menu-padding: var(--dry-space-1);
+		--dry-menu-item-padding: var(--dry-space-2_5) var(--dry-space-2);
 
 		display: grid;
 		grid-template-columns: minmax(12rem, max-content);

package/dist/context-menu/context-menu-group.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuGroup from '../internal/menu-group.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
@@ -9,6 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div role="group" class={className} {...rest}>
+<MenuGroup {className} {...rest}>
 	{@render children()}
-</div>
+</MenuGroup>

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

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { getContextMenuCtx } from './context.svelte.js';
+	import MenuItem from '../internal/menu-item.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		disabled?: boolean;
@@ -11,70 +12,16 @@
 	let { class: className, disabled, children, onclick, onkeydown, ...rest }: Props = $props();
 
 	const ctx = getContextMenuCtx();
-
-	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
-		if (disabled) return;
-		if (onclick) (onclick as (e: MouseEvent & { currentTarget: HTMLDivElement }) => void)(e);
-		ctx.close();
-	}
-
-	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLDivElement }) {
-		if (disabled) return;
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			(e.currentTarget as HTMLElement).click();
-		}
-		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
-	}
 </script>
 
-<div
-	role="menuitem"
-	tabindex={disabled ? undefined : -1}
-	aria-disabled={disabled || undefined}
+<MenuItem
 	data-context-menu-item
-	data-disabled={disabled || undefined}
-	class={className}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
+	{className}
+	close={ctx.close}
+	{disabled}
+	{onclick}
+	{onkeydown}
 	{...rest}
 >
 	{@render children()}
-</div>
-
-<style>
-	[data-context-menu-item] {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		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-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;
-		outline: none;
-		color: var(--dry-color-text-strong);
-		min-height: var(--dry-space-11);
-		transition: background var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-context-menu-item]:hover:not([data-disabled]),
-	[data-context-menu-item]:focus-visible {
-		background: var(--dry-color-fill);
-	}
-
-	[data-context-menu-item]:active:not([data-disabled]) {
-		background: var(--dry-color-fill-hover);
-	}
-
-	[data-context-menu-item][data-disabled] {
-		color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-</style>
+</MenuItem>

package/dist/context-menu/context-menu-label.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuLabel from '../internal/menu-label.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
 		children: Snippet;
@@ -9,15 +10,6 @@
 	let { class: className, children, ...rest }: Props = $props();
 </script>
 
-<div role="presentation" data-context-menu-label class={className} {...rest}>
+<MenuLabel data-context-menu-label {className} {...rest}>
 	{@render children()}
-</div>
-
-<style>
-	[data-context-menu-label] {
-		padding: var(--dry-space-1_5) var(--dry-space-2);
-		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		color: var(--dry-color-text-weak);
-		font-weight: 500;
-	}
-</style>
+</MenuLabel>

package/dist/context-menu/context-menu-root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setContextMenuCtx } from './context.svelte.js';
+	import { createPositionedMenuRootState } from '../internal/menu-root-state.svelte.js';
 
 	interface Props {
 		open?: boolean;
@@ -10,34 +10,15 @@
 
 	let { open = $bindable(false), children }: Props = $props();
 
-	const triggerId = generateFormId('context-menu-trigger');
-	const contentId = generateFormId('context-menu-content');
-
-	let position = $state({ x: 0, y: 0 });
-
-	setContextMenuCtx({
-		get open() {
-			return open;
-		},
-		triggerId,
-		contentId,
-		triggerEl: null,
-		get position() {
-			return position;
-		},
-		set position(value: { x: number; y: number }) {
-			position = value;
-		},
-		show() {
-			open = true;
-		},
-		close() {
-			open = false;
-		},
-		toggle() {
-			open = !open;
-		}
-	});
+	setContextMenuCtx(
+		createPositionedMenuRootState({
+			idBase: 'context-menu',
+			getOpen: () => open,
+			setOpen: (value) => {
+				open = value;
+			}
+		})
+	);
 </script>
 
 {@render children()}

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

@@ -1,17 +1,10 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuSeparator from '../internal/menu-separator.svelte';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {}
 
 	let { class: className, ...rest }: Props = $props();
 </script>
 
-<div role="separator" data-context-menu-separator class={className} {...rest}></div>
-
-<style>
-	[data-context-menu-separator] {
-		height: 1px;
-		background: var(--dry-color-stroke-weak);
-		margin: var(--dry-space-1) 0;
-	}
-</style>
+<MenuSeparator data-context-menu-separator {className} {...rest}></MenuSeparator>

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

@@ -1,14 +1,4 @@
-export interface ContextMenuContext {
-    readonly open: boolean;
-    readonly triggerId: string;
-    readonly contentId: string;
-    triggerEl: HTMLElement | null;
-    position: {
-        x: number;
-        y: number;
-    };
-    show: () => void;
-    close: () => void;
-    toggle: () => void;
+import type { PositionedMenuRootState } from '../internal/menu-root-state.svelte.js';
+export interface ContextMenuContext extends PositionedMenuRootState {
 }
 export declare const setContextMenuCtx: (ctx: ContextMenuContext) => ContextMenuContext, getContextMenuCtx: () => ContextMenuContext;

package/dist/date-picker/datepicker-content.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { fromAction } from 'svelte/attachments';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAnchoredPopover, type Placement } from '@dryui/primitives';
+	import type { Placement } from '@dryui/primitives';
+	import PickerPopoverContent from '../internal/picker-popover-content.svelte';
 	import { getDatePickerCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -21,85 +21,15 @@
 	}: Props = $props();
 
 	const ctx = getDatePickerCtx();
-
-	let el = $state<HTMLDivElement | null>(null);
-
-	function attachContent(node: HTMLDivElement) {
-		el = node;
-
-		return () => {
-			if (el === node) {
-				el = null;
-			}
-		};
-	}
-
-	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.triggerEl,
-		contentEl: () => el ?? null,
-		open: () => ctx.open,
-		placement: () => placement,
-		offset: () => offset
-	});
 </script>
 
-<div
-	{@attach attachContent}
-	{@attach fromAction(popover.applyPosition, () => style)}
-	popover="auto"
-	role="dialog"
-	id={ctx.contentId}
-	aria-labelledby={ctx.triggerId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-dp-content
-	class={className}
-	ontoggle={(e) => {
-		const newState = (e as ToggleEvent).newState === 'open';
-		if (newState && !ctx.open) {
-			ctx.show();
-		} else if (!newState && ctx.open) {
-			ctx.close();
-		}
-	}}
+<PickerPopoverContent
+	controller={ctx}
+	dataAttribute="data-dp-content"
+	{placement}
+	{offset}
+	contentStyle={style}
+	contentClass={className}
+	{children}
 	{...rest}
->
-	{@render children()}
-</div>
-
-<style>
-	[data-dp-content] {
-		inset: unset;
-		margin: 0;
-		display: inline-grid;
-
-		background: var(--dry-color-bg-overlay);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-lg);
-		box-shadow: var(--dry-shadow-lg);
-		padding: var(--dry-space-3);
-	}
-
-	[data-dp-content]:not(:popover-open) {
-		display: none;
-	}
-
-	[data-dp-content]:popover-open {
-		display: inline-grid;
-		opacity: 1;
-		transform: scale(1) translateY(0);
-	}
-
-	@starting-style {
-		[data-dp-content]:popover-open {
-			opacity: 0;
-			transform: scale(var(--dry-motion-scale-enter))
-				translateY(calc(var(--dry-motion-distance-xs) * -1));
-		}
-	}
-
-	[data-dp-content] {
-		transition:
-			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
-			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
-	}
-</style>
+/>

package/dist/date-picker/datepicker-content.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Placement } from '@dryui/primitives';
+import type { Placement } from '@dryui/primitives';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     placement?: Placement;
     offset?: number;

package/dist/date-picker/datepicker-input-root.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
+	import {
+		createDateViewController,
+		createPickerPopoverController
+	} from '../internal/date-family-controller.svelte.js';
 	import { setDatePickerCtx } from './context.svelte.js';
-	import { getWeekStartDay, addMonths } from '@dryui/primitives';
 
 	interface Props {
 		open?: boolean;
@@ -26,18 +28,20 @@
 		children
 	}: Props = $props();
 
-	const weekStartDay = $derived(getWeekStartDay(locale));
-
-	const triggerId = generateFormId('datepicker-trigger');
-	const contentId = generateFormId('datepicker-content');
-
-	// View state: which month/year is the calendar showing
-	let viewMonth = $state(value ? value.getMonth() : new Date().getMonth());
-	let viewYear = $state(value ? value.getFullYear() : new Date().getFullYear());
-	let triggerEl = $state<HTMLElement | null>(null);
+	const view = createDateViewController({
+		initialDate: value,
+		locale: () => locale
+	});
 
-	// The day that has keyboard focus within the calendar grid
-	let focusedDate = $state<Date>(value ?? new Date());
+	const popover = createPickerPopoverController({
+		triggerIdPrefix: 'datepicker-trigger',
+		contentIdPrefix: 'datepicker-content',
+		open: () => open,
+		setOpen: (nextOpen) => {
+			open = nextOpen;
+		},
+		disabled: () => disabled
+	});
 
 	function serializeDateValue(date: Date | null): string {
 		if (!date) return '';
@@ -57,13 +61,13 @@
 			return value;
 		},
 		get focusedDate() {
-			return focusedDate;
+			return view.focusedDate;
 		},
 		get viewMonth() {
-			return viewMonth;
+			return view.viewMonth;
 		},
 		get viewYear() {
-			return viewYear;
+			return view.viewYear;
 		},
 		get locale() {
 			return locale;
@@ -78,60 +82,48 @@
 			return disabled;
 		},
 		get weekStartDay() {
-			return weekStartDay;
+			return view.weekStartDay;
+		},
+		get triggerId() {
+			return popover.triggerId;
+		},
+		get contentId() {
+			return popover.contentId;
 		},
-		triggerId,
-		contentId,
 		get triggerEl() {
-			return triggerEl;
+			return popover.triggerEl;
 		},
 		set triggerEl(element: HTMLElement | null) {
-			triggerEl = element;
+			popover.setTriggerEl(element);
 		},
 		show() {
-			if (!disabled) open = true;
+			popover.show();
 		},
 		close() {
-			open = false;
+			popover.close();
 		},
 		toggle() {
-			if (!disabled) open = !open;
+			popover.toggle();
 		},
 		select(date: Date) {
 			value = date;
-			focusedDate = date;
-			viewMonth = date.getMonth();
-			viewYear = date.getFullYear();
-			open = false;
+			view.setFocusedDate(date);
+			popover.close();
 		},
 		goToMonth(month: number) {
-			if (month < 0) {
-				viewMonth = 11;
-				viewYear = viewYear - 1;
-			} else if (month > 11) {
-				viewMonth = 0;
-				viewYear = viewYear + 1;
-			} else {
-				viewMonth = month;
-			}
+			view.goToMonth(month);
 		},
 		goToYear(year: number) {
-			viewYear = year;
+			view.goToYear(year);
 		},
 		nextMonth() {
-			const next = addMonths(new Date(viewYear, viewMonth, 1), 1);
-			viewMonth = next.getMonth();
-			viewYear = next.getFullYear();
+			view.nextMonth();
 		},
 		prevMonth() {
-			const prev = addMonths(new Date(viewYear, viewMonth, 1), -1);
-			viewMonth = prev.getMonth();
-			viewYear = prev.getFullYear();
+			view.prevMonth();
 		},
 		setFocusedDate(date: Date) {
-			focusedDate = date;
-			viewMonth = date.getMonth();
-			viewYear = date.getFullYear();
+			view.setFocusedDate(date);
 		}
 	});
 </script>