@yarcl/react 0.1.0 → 0.2.0

package/dist/components/CommandPalette.js

@@ -0,0 +1,293 @@
+import { useConfig, useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { useModalDialog } from "./Modal.js";
+import { cloneElement, useEffect, useId, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/CommandPalette.tsx
+function detectApple() {
+	return typeof navigator !== "undefined" && /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
+}
+var noop = () => () => {};
+function useIsApple() {
+	return useSyncExternalStore(noop, detectApple, () => false);
+}
+function parseShortcut(shortcut, apple) {
+	const parts = shortcut.split("+").map((part) => part.trim().toLowerCase());
+	const key = parts[parts.length - 1] ?? "";
+	const mods = new Set(parts.slice(0, -1));
+	const mod = mods.has("mod");
+	return {
+		key,
+		ctrl: mods.has("ctrl") || mods.has("control") || mod && !apple,
+		meta: mods.has("meta") || mods.has("cmd") || mod && apple,
+		alt: mods.has("alt") || mods.has("option"),
+		shift: mods.has("shift")
+	};
+}
+function matchesShortcut(event, shortcut, apple) {
+	const s = parseShortcut(shortcut, apple);
+	if (event.ctrlKey !== s.ctrl || event.metaKey !== s.meta || event.altKey !== s.alt || event.shiftKey !== s.shift) return false;
+	const code = s.key.length === 1 ? /[a-z]/.test(s.key) ? `Key${s.key.toUpperCase()}` : /\d/.test(s.key) ? `Digit${s.key}` : "" : "";
+	return event.key?.toLowerCase() === s.key || code !== "" && event.code === code;
+}
+function ariaChord(chord, apple) {
+	const s = parseShortcut(chord, apple);
+	const key = s.key.length === 1 ? s.key.toUpperCase() : s.key.charAt(0).toUpperCase() + s.key.slice(1);
+	return [
+		s.ctrl && "Control",
+		s.alt && "Alt",
+		s.shift && "Shift",
+		s.meta && "Meta",
+		key
+	].filter(Boolean).join("+");
+}
+function ariaShortcut(shortcut, apple) {
+	return shortcut.trim().split(/\s+/).map((chord) => ariaChord(chord, apple)).join(" ");
+}
+function shortcutKeys(shortcut, apple) {
+	return shortcut.trim().split(/[\s+]+/).filter(Boolean).map((raw) => {
+		const part = raw.trim();
+		const lower = part.toLowerCase();
+		if (lower === "mod") return apple ? "⌘" : "Ctrl";
+		if (lower === "ctrl" || lower === "control") return apple ? "⌃" : "Ctrl";
+		if (lower === "alt" || lower === "option") return apple ? "⌥" : "Alt";
+		if (lower === "shift") return apple ? "⇧" : "Shift";
+		if (lower === "meta" || lower === "cmd") return apple ? "⌘" : "Meta";
+		return part.length === 1 ? part.toUpperCase() : part;
+	});
+}
+function ShortcutHint({ shortcut, apple }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "yarcl-command-palette-shortcut",
+		"aria-hidden": "true",
+		children: shortcutKeys(shortcut, apple).map((key, i) => /* @__PURE__ */ jsx("kbd", { children: key }, i))
+	});
+}
+function SearchIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "11",
+			cy: "11",
+			r: "7"
+		}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
+	});
+}
+function contains(command, text) {
+	const haystack = [
+		command.label,
+		command.group ?? "",
+		...command.keywords ?? []
+	].join(" ").toLowerCase();
+	return text.toLowerCase().split(/\s+/).filter(Boolean).every((word) => haystack.includes(word));
+}
+function firstEnabled(list, from = 0, step = 1) {
+	for (let i = 0; i < list.length; i++) {
+		const index = ((from + i * step) % list.length + list.length) % list.length;
+		if (!list[index]?.disabled) return index;
+	}
+	return null;
+}
+function CommandPaletteBody({ commands, inputValue, onInputValueChange, filter = true, placeholder = "Search commands…", label = "Command palette", emptyMessage = "No results", apple, choose }) {
+	const [text, setText] = useControllable(inputValue, "", onInputValueChange);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const idPrefix = useId();
+	const listId = `${idPrefix}-list`;
+	const optionId = (i) => `${idPrefix}-option-${i}`;
+	const match = filter === true ? contains : filter === false ? () => true : filter;
+	const sections = [];
+	for (const command of commands) {
+		if (!match(command, text)) continue;
+		let section = sections.find((s) => s.heading === command.group);
+		if (!section) sections.push(section = {
+			heading: command.group,
+			commands: []
+		});
+		section.commands.push(command);
+	}
+	const visible = sections.flatMap((s) => s.commands);
+	const shown = activeIndex === null || activeIndex >= visible.length ? firstEnabled(visible) : activeIndex;
+	useEffect(() => {
+		if (shown != null) document.getElementById(`${idPrefix}-option-${shown}`)?.scrollIntoView({ block: "nearest" });
+	}, [shown, idPrefix]);
+	function onKeyDown(event) {
+		if (visible.length === 0) return;
+		let next;
+		if (event.key === "ArrowDown") next = firstEnabled(visible, shown == null ? 0 : shown + 1);
+		else if (event.key === "ArrowUp") next = firstEnabled(visible, shown == null ? visible.length - 1 : shown - 1, -1);
+		else if (event.key === "Home") next = firstEnabled(visible);
+		else if (event.key === "End") next = firstEnabled(visible, visible.length - 1, -1);
+		else if (event.key === "Enter") {
+			event.preventDefault();
+			const command = shown != null ? visible[shown] : void 0;
+			if (command) choose(command);
+			return;
+		} else return;
+		event.preventDefault();
+		setActiveIndex(next);
+	}
+	let index = 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "yarcl-command-palette-content",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "yarcl-command-palette-search",
+				children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx("input", {
+					className: "yarcl-command-palette-input",
+					type: "text",
+					role: "combobox",
+					"aria-label": label,
+					"aria-autocomplete": "list",
+					"aria-expanded": visible.length > 0,
+					"aria-controls": visible.length > 0 ? listId : void 0,
+					"aria-activedescendant": shown != null ? optionId(shown) : void 0,
+					autoComplete: "off",
+					autoCorrect: "off",
+					spellCheck: false,
+					placeholder,
+					value: text,
+					onChange: (event) => {
+						setText(event.target.value);
+						setActiveIndex(null);
+					},
+					onKeyDown
+				})]
+			}),
+			visible.length > 0 && /* @__PURE__ */ jsx("div", {
+				id: listId,
+				role: "listbox",
+				"aria-label": label,
+				className: "yarcl-listbox yarcl-command-palette-list",
+				children: sections.map((section, s) => {
+					const headingId = `${idPrefix}-group-${s}`;
+					const options = section.commands.map((command) => {
+						const i = index++;
+						const isActive = i === shown;
+						return /* @__PURE__ */ jsxs("div", {
+							id: optionId(i),
+							role: "option",
+							"aria-selected": isActive,
+							"aria-disabled": command.disabled || void 0,
+							"aria-keyshortcuts": command.shortcut ? ariaShortcut(command.shortcut, apple) : void 0,
+							"data-active": isActive || void 0,
+							className: "yarcl-option",
+							onMouseDown: (event) => event.preventDefault(),
+							onMouseMove: () => {
+								if (!command.disabled && i !== shown) setActiveIndex(i);
+							},
+							onClick: () => choose(command),
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "yarcl-command-palette-item",
+								children: [command.icon, /* @__PURE__ */ jsx("span", {
+									className: "yarcl-option-label",
+									children: command.label
+								})]
+							}), command.shortcut && /* @__PURE__ */ jsx(ShortcutHint, {
+								shortcut: command.shortcut,
+								apple
+							})]
+						}, command.id);
+					});
+					return /* @__PURE__ */ jsxs("div", {
+						role: "group",
+						"aria-labelledby": section.heading ? headingId : void 0,
+						className: "yarcl-command-palette-group",
+						children: [section.heading && /* @__PURE__ */ jsx("div", {
+							id: headingId,
+							className: "yarcl-command-palette-heading",
+							"aria-hidden": "true",
+							children: section.heading
+						}), options]
+					}, section.heading ?? "");
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: "yarcl-listbox-message yarcl-command-palette-empty",
+				children: visible.length === 0 ? emptyMessage : null
+			})
+		]
+	});
+}
+/**
+* A searchable command menu in a modal dialog, opened with a keyboard shortcut (⌘K or Ctrl+K by default).
+* The search input is a combobox: arrow keys, Home and End move through the matching commands,
+* Enter runs the highlighted one, Esc closes the palette and returns focus.
+*
+* @example
+* ```tsx
+* <CommandPalette
+*   commands={[
+*     { id: 'new', label: 'New file', group: 'File', shortcut: 'Mod+N', onSelect: createFile },
+*     { id: 'theme', label: 'Toggle dark mode', group: 'View', keywords: ['theme'], onSelect: toggleTheme },
+*   ]}
+* />
+* ```
+*/
+function CommandPalette({ commands, open: openProp, defaultOpen = false, onOpenChange, shortcut = "Mod+K", trigger, onSelect, inputValue, onInputValueChange, filter, placeholder, label = "Command palette", emptyMessage, size, radius, color, className, onClick, onClose, ...props }) {
+	const own = useDefaults("CommandPalette");
+	const config = useConfig();
+	const apple = useIsApple();
+	const [open, setOpen] = useControllable(openProp, defaultOpen, onOpenChange);
+	const dialog = useModalDialog(open, setOpen);
+	useEffect(() => {
+		if (!shortcut) return;
+		function onKeyDown(event) {
+			if (event.defaultPrevented || !shortcut || !matchesShortcut(event, shortcut, detectApple())) return;
+			event.preventDefault();
+			setOpen(!open);
+		}
+		document.addEventListener("keydown", onKeyDown);
+		return () => document.removeEventListener("keydown", onKeyDown);
+	}, [
+		shortcut,
+		open,
+		setOpen
+	]);
+	function choose(command) {
+		if (command.disabled) return;
+		setOpen(false);
+		command.onSelect?.();
+		onSelect?.(command);
+	}
+	const resolvedSize = size ?? own.size;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger && cloneElement(trigger, {
+		onClick(event) {
+			trigger.props.onClick?.(event);
+			setOpen(true);
+		},
+		...shortcut ? { "aria-keyshortcuts": ariaShortcut(shortcut, apple) } : {}
+	}), /* @__PURE__ */ jsx("dialog", {
+		"aria-label": label,
+		...props,
+		ref: dialog.ref,
+		className: cx("yarcl-modal yarcl-dialog yarcl-command-palette", `yarcl-modal-size-${config.defaults.modalSize}`, sizeClass(resolvedSize, "CommandPalette"), radiusClass(radius ?? own.radius, resolvedSize), colorClass(color ?? own.color), className),
+		onClose: (event) => {
+			dialog.onClose(event);
+			onClose?.(event);
+		},
+		onClick: (event) => {
+			dialog.onClick(event);
+			onClick?.(event);
+		},
+		children: open && /* @__PURE__ */ jsx(CommandPaletteBody, {
+			commands,
+			inputValue,
+			onInputValueChange,
+			filter,
+			placeholder,
+			label,
+			emptyMessage,
+			apple,
+			choose
+		})
+	})] });
+}
+//#endregion
+export { CommandPalette };

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,157 @@
+import { type Day, type Locale } from 'date-fns';
+import { type ComponentProps, type ReactNode } from 'react';
+import type { TokenProps, VariantProps } from '../types';
+/** A date range picked with a {@link DatePicker} in `mode="range"`. `to` is `null` while only the start is picked. */
+export interface DateRange {
+    /** First day of the range. */
+    from: Date;
+    /** Last day of the range, or `null` until the second day is picked. */
+    to: Date | null;
+}
+/** Text for the parts of a {@link DatePicker} that have no visible label. */
+export interface DatePickerLabels {
+    /** Accessible name of the calendar popover. */
+    dialog: string;
+    /** Accessible name of the previous month button. */
+    previousMonth: string;
+    /** Accessible name of the next month button. */
+    nextMonth: string;
+}
+/** Props shared by both modes of {@link DatePicker}. */
+export interface DatePickerBaseProps extends TokenProps<'DatePicker'>, VariantProps, Omit<ComponentProps<'button'>, 'color' | 'value' | 'defaultValue' | 'onChange' | 'children' | 'type' | 'name'> {
+    /**
+     * Earliest day that can be picked. Earlier days are shown disabled and the calendar can't move before its month.
+     * @example
+     * ```tsx
+     * <DatePicker min={new Date()} />
+     * ```
+     */
+    min?: Date;
+    /**
+     * Latest day that can be picked.
+     * @example
+     * ```tsx
+     * <DatePicker max={addYears(new Date(), 1)} />
+     * ```
+     */
+    max?: Date;
+    /**
+     * Returns `true` for days that can't be picked, e.g. weekends or booked dates. They stay focusable but can't be chosen.
+     * @example
+     * ```tsx
+     * <DatePicker isDateDisabled={isWeekend} />
+     * ```
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * A date-fns locale. Sets month and weekday names, the display format and the first day of the week.
+     * @default enUS
+     * @example
+     * ```tsx
+     * import { de } from 'date-fns/locale';
+     * <DatePicker locale={de} />
+     * ```
+     */
+    locale?: Locale;
+    /**
+     * First day of the week, from 0 (Sunday) to 6 (Saturday).
+     * @default the locale's first day of the week
+     * @example
+     * ```tsx
+     * <DatePicker weekStartsOn={1} />
+     * ```
+     */
+    weekStartsOn?: Day;
+    /**
+     * A date-fns `format` pattern for the value shown in the trigger.
+     * @default 'PP'
+     * @example
+     * ```tsx
+     * <DatePicker displayFormat="yyyy-MM-dd" />
+     * ```
+     */
+    displayFormat?: string;
+    /**
+     * Text shown when nothing is picked.
+     * @example
+     * ```tsx
+     * <DatePicker placeholder="Pick a date" />
+     * ```
+     */
+    placeholder?: ReactNode;
+    /**
+     * Form field name. Renders a hidden input with the value as `yyyy-MM-dd`, or `yyyy-MM-dd/yyyy-MM-dd` for a range.
+     * @example
+     * ```tsx
+     * <DatePicker name="birthday" />
+     * ```
+     */
+    name?: string;
+    /**
+     * Accessible names for the popover and the month buttons, for translation.
+     * @default { dialog: 'Choose date', previousMonth: 'Previous month', nextMonth: 'Next month' }
+     * @example
+     * ```tsx
+     * <DatePicker labels={{ dialog: 'Datum wählen', previousMonth: 'Vorheriger Monat', nextMonth: 'Nächster Monat' }} />
+     * ```
+     */
+    labels?: Partial<DatePickerLabels>;
+}
+/** Props for {@link DatePicker} picking one day. */
+export interface DatePickerSingleProps extends DatePickerBaseProps {
+    /**
+     * Picks one day.
+     * @default 'single'
+     */
+    mode?: 'single';
+    /** Controlled value. `null` means nothing is picked. */
+    value?: Date | null;
+    /**
+     * Initial value when uncontrolled.
+     * @default null
+     */
+    defaultValue?: Date | null;
+    /**
+     * Called with the picked day.
+     * @example
+     * ```tsx
+     * <DatePicker value={date} onValueChange={setDate} />
+     * ```
+     */
+    onValueChange?: (value: Date | null) => void;
+}
+/** Props for {@link DatePicker} picking a range of days. */
+export interface DatePickerRangeProps extends DatePickerBaseProps {
+    /** Picks a start and an end day. */
+    mode: 'range';
+    /** Controlled value. `null` means nothing is picked. */
+    value?: DateRange | null;
+    /**
+     * Initial value when uncontrolled.
+     * @default null
+     */
+    defaultValue?: DateRange | null;
+    /**
+     * Called when the start is picked (with `to: null`) and again when the range is complete.
+     * @example
+     * ```tsx
+     * <DatePicker mode="range" value={range} onValueChange={setRange} />
+     * ```
+     */
+    onValueChange?: (value: DateRange | null) => void;
+}
+/** Props for {@link DatePicker}. `mode` decides whether one day or a range is picked. */
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+/**
+ * Picks a day or a range of days from a calendar popover. Built on {@link Popover}, with dates handled by date-fns.
+ * The trigger shares the size scale with {@link Input}. Picked days use `variant`, days inside a range use
+ * `defaults.softVariant`. The calendar follows the WAI-ARIA date picker dialog pattern. Works inside a {@link Field}.
+ *
+ * @example
+ * ```tsx
+ * <Field label="Check-in">
+ *   <DatePicker value={date} onValueChange={setDate} min={new Date()} placeholder="Pick a date" />
+ * </Field>
+ * ```
+ */
+export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;

package/dist/components/DatePicker.js

@@ -0,0 +1,230 @@
+import { useDefaults } from "../runtime.js";
+import { colorClass, cx, radiusClass, sizeClass, softVariantClass, variantClass } from "../classes.js";
+import { useControllable } from "../hooks.js";
+import { FieldContext, useFieldProps } from "../field-context.js";
+import { Popover } from "./Popover.js";
+import { useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { addDays, addMonths, addYears, endOfMonth, endOfWeek, format, isAfter, isBefore, isSameDay, isSameMonth, isToday, startOfDay, startOfMonth, startOfWeek } from "date-fns";
+import { enUS } from "date-fns/locale/en-US";
+//#region src/components/DatePicker.tsx
+var defaultLabels = {
+	dialog: "Choose date",
+	previousMonth: "Previous month",
+	nextMonth: "Next month"
+};
+function Icon({ d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+var calendarPath = "M8 3v4M16 3v4M4 10h16M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z";
+var iso = (date) => format(date, "yyyy-MM-dd");
+/**
+* Picks a day or a range of days from a calendar popover. Built on {@link Popover}, with dates handled by date-fns.
+* The trigger shares the size scale with {@link Input}. Picked days use `variant`, days inside a range use
+* `defaults.softVariant`. The calendar follows the WAI-ARIA date picker dialog pattern. Works inside a {@link Field}.
+*
+* @example
+* ```tsx
+* <Field label="Check-in">
+*   <DatePicker value={date} onValueChange={setDate} min={new Date()} placeholder="Pick a date" />
+* </Field>
+* ```
+*/
+function DatePicker(props) {
+	const own = useDefaults("DatePicker");
+	const field = useContext(FieldContext);
+	const { mode = "single", value: valueProp, defaultValue = null, onValueChange, min, max, isDateDisabled, locale = enUS, weekStartsOn, displayFormat = "PP", placeholder, name, labels: labelsProp, size, radius, color, variant, className, required: _required, ...rest } = useFieldProps(props);
+	const range = mode === "range";
+	const labels = {
+		...defaultLabels,
+		...labelsProp
+	};
+	const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+	const from = value == null ? null : value instanceof Date ? value : value.from;
+	const to = value == null ? null : value instanceof Date ? value : value.to;
+	const [open, setOpen] = useState(false);
+	const [focused, setFocused] = useState(() => startOfDay(/* @__PURE__ */ new Date()));
+	const [hovered, setHovered] = useState(null);
+	const cellRef = useRef(null);
+	const moveFocus = useRef(false);
+	const id = useId();
+	const titleId = `${id}-title`;
+	const valueId = `${id}-value`;
+	const minDay = min && startOfDay(min);
+	const maxDay = max && startOfDay(max);
+	const outOfRange = (day) => minDay != null && isBefore(day, minDay) || maxDay != null && isAfter(day, maxDay);
+	const unavailable = (day) => outOfRange(day) || !!isDateDisabled?.(day);
+	const clamp = (day) => minDay && isBefore(day, minDay) ? minDay : maxDay && isAfter(day, maxDay) ? maxDay : day;
+	const week = {
+		locale,
+		weekStartsOn
+	};
+	useEffect(() => {
+		if (!open || !moveFocus.current) return;
+		moveFocus.current = false;
+		cellRef.current?.focus();
+	}, [open, focused]);
+	function onOpenChange(next) {
+		if (next) {
+			setFocused(clamp(startOfDay(from ?? /* @__PURE__ */ new Date())));
+			setHovered(null);
+		}
+		setOpen(next);
+	}
+	function pick(day) {
+		if (unavailable(day)) return;
+		if (!range) {
+			setValue(day);
+			setOpen(false);
+		} else if (!from || to) setValue({
+			from: day,
+			to: null
+		});
+		else {
+			setValue(isBefore(day, from) ? {
+				from: day,
+				to: from
+			} : {
+				from,
+				to: day
+			});
+			setOpen(false);
+		}
+	}
+	function navigate(day) {
+		moveFocus.current = true;
+		setFocused(clamp(day));
+	}
+	function onGridKeyDown(event) {
+		const move = {
+			ArrowLeft: () => addDays(focused, -1),
+			ArrowRight: () => addDays(focused, 1),
+			ArrowUp: () => addDays(focused, -7),
+			ArrowDown: () => addDays(focused, 7),
+			Home: () => startOfWeek(focused, week),
+			End: () => startOfDay(endOfWeek(focused, week)),
+			PageUp: () => event.shiftKey ? addYears(focused, -1) : addMonths(focused, -1),
+			PageDown: () => event.shiftKey ? addYears(focused, 1) : addMonths(focused, 1)
+		}[event.key];
+		if (move) {
+			event.preventDefault();
+			navigate(move());
+		} else if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			pick(focused);
+		}
+	}
+	const month = startOfMonth(focused);
+	const first = startOfWeek(month, week);
+	const days = Array.from({ length: 42 }, (_, i) => addDays(first, i));
+	const weeks = Array.from({ length: 6 }, (_, i) => days.slice(i * 7, i * 7 + 7));
+	const prevDisabled = minDay != null && isBefore(endOfMonth(addMonths(month, -1)), minDay);
+	const nextDisabled = maxDay != null && isAfter(addMonths(month, 1), maxDay);
+	const previewEnd = range && from && !to ? hovered ?? focused : null;
+	const [spanStart, spanEnd] = previewEnd && from ? isBefore(previewEnd, from) ? [previewEnd, from] : [from, previewEnd] : [from, to];
+	const inSpan = (day) => spanStart != null && spanEnd != null && isAfter(day, spanStart) && isBefore(day, spanEnd);
+	const isEndpoint = (day) => from != null && isSameDay(day, from) || to != null && isSameDay(day, to);
+	const show = (date) => format(date, displayFormat, { locale });
+	const display = from ? range && to ? `${show(from)} – ${show(to)}` : show(from) : null;
+	const labelled = field != null || rest["aria-label"] != null || rest["aria-labelledby"] != null;
+	const s = size ?? own.size;
+	const hidden = value == null ? "" : range ? `${from ? iso(from) : ""}/${to ? iso(to) : ""}` : from ? iso(from) : "";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		placement: "bottom-start",
+		modal: true,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cx("yarcl-input yarcl-select yarcl-date-picker", sizeClass(s, "DatePicker"), radiusClass(radius ?? own.radius, s), colorClass(color ?? own.color), className),
+			...rest,
+			"aria-describedby": cx(labelled && display && valueId, rest["aria-describedby"]) || void 0,
+			children: [/* @__PURE__ */ jsx("span", {
+				id: valueId,
+				className: cx("yarcl-select-value", !display && "yarcl-select-placeholder"),
+				children: display ?? placeholder
+			}), /* @__PURE__ */ jsx(Icon, { d: calendarPath })]
+		}) }), /* @__PURE__ */ jsxs(Popover.Content, {
+			"aria-label": labels.dialog,
+			initialFocus: cellRef,
+			className: cx("yarcl-date-picker-panel", sizeClass(s, "DatePicker"), colorClass(color ?? own.color)),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "yarcl-date-picker-header",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "yarcl-date-picker-nav",
+						"aria-label": labels.previousMonth,
+						"aria-disabled": prevDisabled || void 0,
+						onClick: () => !prevDisabled && setFocused(clamp(addMonths(focused, -1))),
+						children: /* @__PURE__ */ jsx(Icon, { d: "m15 6-6 6 6 6" })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						id: titleId,
+						className: "yarcl-date-picker-title",
+						"aria-live": "polite",
+						children: format(month, "LLLL y", { locale })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "yarcl-date-picker-nav",
+						"aria-label": labels.nextMonth,
+						"aria-disabled": nextDisabled || void 0,
+						onClick: () => !nextDisabled && setFocused(clamp(addMonths(focused, 1))),
+						children: /* @__PURE__ */ jsx(Icon, { d: "m9 6 6 6-6 6" })
+					})
+				]
+			}), /* @__PURE__ */ jsxs("table", {
+				role: "grid",
+				"aria-labelledby": titleId,
+				"aria-multiselectable": range || void 0,
+				className: cx("yarcl-date-picker-grid", radiusClass(radius ?? own.radius, s)),
+				onKeyDown: onGridKeyDown,
+				onMouseLeave: () => setHovered(null),
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weeks[0].map((day) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					abbr: format(day, "EEEE", { locale }),
+					children: format(day, "EEEEEE", { locale })
+				}, day.getDay())) }) }), /* @__PURE__ */ jsx("tbody", { children: weeks.map((row) => /* @__PURE__ */ jsx("tr", { children: row.map((day) => {
+					if (!isSameMonth(day, month)) return /* @__PURE__ */ jsx("td", { role: "gridcell" }, iso(day));
+					const isFocused = isSameDay(day, focused);
+					const endpoint = isEndpoint(day);
+					const between = inSpan(day);
+					return /* @__PURE__ */ jsx("td", {
+						ref: isFocused ? cellRef : void 0,
+						role: "gridcell",
+						tabIndex: isFocused ? 0 : -1,
+						"aria-selected": endpoint || between && !previewEnd,
+						"aria-disabled": unavailable(day) || void 0,
+						"aria-current": isToday(day) ? "date" : void 0,
+						"aria-label": format(day, "PPPP", { locale }),
+						"data-selected": endpoint || void 0,
+						"data-in-range": between || void 0,
+						className: cx("yarcl-date-picker-day", endpoint ? variantClass(variant ?? own.variant) : between && softVariantClass()),
+						onClick: () => {
+							setFocused(day);
+							pick(day);
+						},
+						onMouseEnter: () => range && setHovered(day),
+						children: format(day, "d", { locale })
+					}, iso(day));
+				}) }, iso(row[0]))) })]
+			})]
+		})]
+	}), name && /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: hidden
+	})] });
+}
+//#endregion
+export { DatePicker };