@kazee-ds/react 0.6.0 → 0.7.0

package/dist/index.js

@@ -27,8 +27,11 @@ import { Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components/Tool
 import { Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger } from "react-aria-components/Menu";
 import { Separator as Separator$1 } from "react-aria-components/Separator";
 import { Button as Button$5, ComboBox, ComboBoxStateContext, Input as Input$3, Label as Label$6, ListBox as ListBox$3, ListBoxItem as ListBoxItem$2, Popover as Popover$3 } from "react-aria-components/ComboBox";
-import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, RangeCalendar, RangeCalendarStateContext } from "react-aria-components/RangeCalendar";
-import { GregorianCalendar, endOfMonth, getLocalTimeZone, parseDate, startOfMonth, startOfWeek, today } from "@internationalized/date";
+import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, RangeCalendar as RangeCalendar$1, RangeCalendarStateContext } from "react-aria-components/RangeCalendar";
+import { CalendarDate, GregorianCalendar, endOfMonth, getLocalTimeZone, now, parseAbsolute, parseDate, parseDateTime, parseTime, parseZonedDateTime, startOfMonth, startOfWeek, toCalendarDateTime, toZoned, today } from "@internationalized/date";
+import { Calendar as Calendar$1, CalendarCell as CalendarCell$1, CalendarGrid as CalendarGrid$1, CalendarGridBody as CalendarGridBody$1, CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell as CalendarHeaderCell$1, CalendarStateContext } from "react-aria-components/Calendar";
+import { DateField as DateField$1, DateInput, DateSegment } from "react-aria-components/DateField";
+import { TimeField as TimeField$1 } from "react-aria-components/TimeField";
 //#region src/Button.tsx
 function PendingLabelAnchor() {
 	const context = useContext(ProgressBarContext);
@@ -80,7 +83,7 @@ function ButtonGroupSeparator({ className, style, classNames } = {}) {
 		"aria-hidden": "true"
 	});
 }
-function Root$1({ children, label, variant, size, isDisabled, fullWidth, orientation = "horizontal", dir, className, style, classNames }) {
+function Root$2({ children, label, variant, size, isDisabled, fullWidth, orientation = "horizontal", dir, className, style, classNames }) {
 	function defaults(nodes) {
 		return Children.map(nodes, (child) => {
 			if (!isValidElement(child)) return child;
@@ -104,12 +107,14 @@ function Root$1({ children, label, variant, size, isDisabled, fullWidth, orienta
 		children: defaults(children)
 	});
 }
-var ButtonGroup = /* @__PURE__ */ Object.assign(Root$1, { Separator: ButtonGroupSeparator });
+var ButtonGroup = /* @__PURE__ */ Object.assign(Root$2, { Separator: ButtonGroupSeparator });
 //#endregion
 //#region src/ToggleButton.tsx
 var ToggleButtonSizeContext = createContext("md");
-function ToggleButton({ children, variant = "default", size, isIconOnly, className: consumerClassName, classNames, style, ...props }) {
+var ToggleButtonVariantContext = createContext("default");
+function ToggleButton({ children, variant, size, isIconOnly, className: consumerClassName, classNames, style, ...props }) {
 	const inheritedSize = useContext(ToggleButtonSizeContext);
+	const inheritedVariant = useContext(ToggleButtonVariantContext);
 	const resolvedSize = size ?? inheritedSize;
 	return /* @__PURE__ */ jsx(ToggleButton$1, {
 		...props,
@@ -119,7 +124,7 @@ function ToggleButton({ children, variant = "default", size, isIconOnly, classNa
 			classNames?.root,
 			consumerClassName,
 			"toggle-button",
-			`toggle-button--${variant}`,
+			`toggle-button--${variant ?? inheritedVariant}`,
 			resolvedSize !== "md" && `button--${resolvedSize}`,
 			isIconOnly && "button--icon-only"
 		].filter(Boolean).join(" "),
@@ -144,41 +149,44 @@ function OverlayDirection({ dir, children }) {
 //#endregion
 //#region src/ToggleButtonGroup.tsx
 var keys = (value) => Array.isArray(value) ? value : value ? [value] : [];
-function Root(props) {
+function Root$1(props) {
 	return /* @__PURE__ */ jsx(OverlayDirection, {
 		dir: props.dir,
 		children: /* @__PURE__ */ jsx(ToggleButtonSizeContext.Provider, {
 			value: props.size ?? "md",
-			children: /* @__PURE__ */ jsx(ToggleButtonGroup$1, {
-				"aria-label": props.label,
-				dir: props.dir,
-				className: [
-					"button-group",
-					props.classNames?.root,
-					props.className,
-					"toggle-button-group",
-					props.isDetached && "button-group--detached",
-					props.fullWidth && "button-group--full-width"
-				].filter(Boolean).join(" "),
-				style: props.style,
-				orientation: props.orientation ?? "horizontal",
-				selectionMode: props.selectionMode ?? "single",
-				selectedKeys: props.value === void 0 ? void 0 : keys(props.value),
-				defaultSelectedKeys: keys(props.defaultValue),
-				onSelectionChange: (selected) => {
-					if (props.isDisabled) return;
-					const next = Array.from(selected, String);
-					if (props.selectionMode === "multiple") props.onChange?.(next);
-					else props.onChange?.(next[0] ?? null);
-				},
-				isDisabled: props.isDisabled,
-				disallowEmptySelection: props.disallowEmptySelection,
-				children: props.children
+			children: /* @__PURE__ */ jsx(ToggleButtonVariantContext.Provider, {
+				value: props.variant ?? "default",
+				children: /* @__PURE__ */ jsx(ToggleButtonGroup$1, {
+					"aria-label": props.label,
+					dir: props.dir,
+					className: [
+						"button-group",
+						props.classNames?.root,
+						props.className,
+						"toggle-button-group",
+						(props.isDetached ?? props.variant === "chip") && "button-group--detached",
+						props.fullWidth && "button-group--full-width"
+					].filter(Boolean).join(" "),
+					style: props.style,
+					orientation: props.orientation ?? "horizontal",
+					selectionMode: props.selectionMode ?? "single",
+					selectedKeys: props.value === void 0 ? void 0 : keys(props.value),
+					defaultSelectedKeys: keys(props.defaultValue),
+					onSelectionChange: (selected) => {
+						if (props.isDisabled) return;
+						const next = Array.from(selected, String);
+						if (props.selectionMode === "multiple") props.onChange?.(next);
+						else props.onChange?.(next[0] ?? null);
+					},
+					isDisabled: props.isDisabled,
+					disallowEmptySelection: props.disallowEmptySelection,
+					children: props.children
+				})
 			})
 		})
 	});
 }
-var ToggleButtonGroup = /* @__PURE__ */ Object.assign(Root, { Separator: ButtonGroupSeparator });
+var ToggleButtonGroup = /* @__PURE__ */ Object.assign(Root$1, { Separator: ButtonGroupSeparator });
 //#endregion
 //#region src/label-context.ts
 /** Item labels use Text slots rather than introducing native label elements. */
@@ -227,6 +235,64 @@ function CloseIcon({ className }) {
 	});
 }
 //#endregion
+//#region src/input-clear.tsx
+var InputClearContext = createContext(null);
+function useClearableInput({ value, defaultValue = "", onChange, isDisabled, isReadOnly }, element) {
+	const [local, setLocal] = useState(defaultValue);
+	const current = value === void 0 ? local : value;
+	const update = (next) => {
+		if (!isDisabled && !isReadOnly) {
+			if (value === void 0) setLocal(next);
+			onChange?.(next);
+		}
+	};
+	useEffect(() => {
+		const form = (element.current instanceof HTMLInputElement || element.current instanceof HTMLTextAreaElement ? element.current : element.current?.querySelector("input,textarea"))?.form;
+		const reset = (event) => {
+			queueMicrotask(() => {
+				if (!event.defaultPrevented && value === void 0) setLocal(defaultValue);
+			});
+		};
+		form?.addEventListener("reset", reset);
+		return () => form?.removeEventListener("reset", reset);
+	}, [
+		element,
+		value,
+		defaultValue
+	]);
+	return {
+		value: current,
+		update,
+		context: {
+			value: current,
+			disabled: isDisabled,
+			readOnly: isReadOnly,
+			clear: () => {
+				if (isDisabled || isReadOnly) return;
+				update("");
+				(element.current instanceof HTMLInputElement || element.current instanceof HTMLTextAreaElement ? element.current : element.current?.querySelector("input,textarea"))?.focus();
+			}
+		}
+	};
+}
+function InputClearButton({ className, children, onClick, ...props }) {
+	const context = useContext(InputClearContext);
+	if (!context) throw new Error("Input.ClearButton requires Input.Root.");
+	if (!context.value || context.readOnly) return null;
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Hapus input / Clear input",
+		...props,
+		type: "button",
+		className: partClass("input__clear", className),
+		disabled: context.disabled || props.disabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.clear();
+		},
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+}
+//#endregion
 //#region src/control-composition.tsx
 var SelectPartsContext = createContext({
 	clearButtons: 0,
@@ -418,10 +484,24 @@ function FieldError({ className, ...props }) {
 		className: partClass(partClass("input__error", fieldClasses.error), className)
 	});
 }
-function InputRoot({ className, ...props }) {
-	return /* @__PURE__ */ jsx(TextField, {
-		...props,
-		className: partClass("input", className)
+function InputRoot({ className, size = "md", variant = "primary", hideLabel = false, value, defaultValue, onChange, ...props }) {
+	const root = useRef(null);
+	const clearable = useClearableInput({
+		value,
+		defaultValue,
+		onChange,
+		isDisabled: props.isDisabled,
+		isReadOnly: props.isReadOnly
+	}, root);
+	return /* @__PURE__ */ jsx(InputClearContext.Provider, {
+		value: clearable.context,
+		children: /* @__PURE__ */ jsx(TextField, {
+			...props,
+			ref: root,
+			value: clearable.value,
+			onChange: clearable.update,
+			className: partClass(`input input--${size} input--${variant}${hideLabel ? " input--label-hidden" : ""}`, className)
+		})
 	});
 }
 var InputControlRefContext = createContext(void 0);
@@ -717,10 +797,17 @@ function SelectGroup({ label, children, size, variant, fullWidth = true, isDisab
 }
 //#endregion
 //#region src/Input.tsx
-var CompactInput = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, type = "text", size = "md", variant = "primary", fullWidth = true, prefix, suffix, name, id, autoComplete, maxLength, minLength, pattern, inputMode, enterKeyHint, autoFocus, spellCheck, form, onFocus, onBlur, onKeyDown, onKeyUp, dir, className, style, classNames }, ref) {
+var CompactInput = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, type = "text", size = "md", variant = "primary", fullWidth = true, hideLabel = false, isClearable = false, clearLabel, prefix, suffix, name, id, autoComplete, maxLength, minLength, pattern, inputMode, enterKeyHint, autoFocus, spellCheck, form, onFocus, onBlur, onKeyDown, onKeyUp, dir, className, style, classNames }, ref) {
 	const control = useRef(null);
+	const clearable = useClearableInput({
+		value,
+		defaultValue,
+		onChange,
+		isDisabled,
+		isReadOnly
+	}, control);
 	useImperativeHandle(ref, () => control.current);
-	const hasAdornment = prefix != null || suffix != null;
+	const hasAdornment = prefix != null || suffix != null || isClearable;
 	const input = /* @__PURE__ */ jsx(Input$1, {
 		ref: control,
 		className: partClass(partClass("input__control", classNames?.input), classNames?.control),
@@ -738,65 +825,71 @@ var CompactInput = /* @__PURE__ */ forwardRef(function Input({ label, value, def
 		onKeyDown,
 		onKeyUp
 	});
-	return /* @__PURE__ */ jsxs(TextField, {
-		className: partClass(partClass(`input input--${size} input--${variant}${fullWidth ? "" : " input--fit"}`, classNames?.root), className),
-		style,
-		value,
-		defaultValue,
-		onChange,
-		isInvalid,
-		isDisabled,
-		isReadOnly,
-		isRequired,
-		validationBehavior: "aria",
-		type,
-		name,
-		id,
-		autoComplete,
-		maxLength,
-		dir,
-		children: [
-			/* @__PURE__ */ jsx(Label$2, {
-				className: partClass("input__label", classNames?.label),
-				children: label
-			}),
-			/* @__PURE__ */ jsx("fieldset", {
-				className: partClass("input__boundary", classNames?.boundary),
-				role: "presentation",
-				disabled: isDisabled,
-				children: /* @__PURE__ */ jsxs("div", {
-					className: partClass(hasAdornment ? "input__group" : "input__plain", classNames?.group),
-					"data-invalid": isInvalid || void 0,
-					"data-readonly": isReadOnly || void 0,
-					onPointerDown: (event) => {
-						if (!isDisabled && !event.target.closest("input,button,a,select,textarea,[tabindex],[contenteditable]")) {
-							event.preventDefault();
-							control.current?.focus();
-						}
-					},
-					children: [
-						prefix != null && /* @__PURE__ */ jsx("span", {
-							className: partClass("input__prefix", classNames?.prefix),
-							children: prefix
-						}),
-						input,
-						suffix != null && /* @__PURE__ */ jsx("span", {
-							className: partClass("input__suffix", classNames?.suffix),
-							children: suffix
-						})
-					]
+	return /* @__PURE__ */ jsx(InputClearContext.Provider, {
+		value: clearable.context,
+		children: /* @__PURE__ */ jsxs(TextField, {
+			className: partClass(partClass(`input input--${size} input--${variant}${fullWidth ? "" : " input--fit"}${hideLabel ? " input--label-hidden" : ""}`, classNames?.root), className),
+			style,
+			value: clearable.value,
+			onChange: clearable.update,
+			isInvalid,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			validationBehavior: "aria",
+			type,
+			name,
+			id,
+			autoComplete,
+			maxLength,
+			dir,
+			children: [
+				/* @__PURE__ */ jsx(Label$2, {
+					className: partClass("input__label", classNames?.label),
+					children: label
+				}),
+				/* @__PURE__ */ jsx("fieldset", {
+					className: partClass("input__boundary", classNames?.boundary),
+					role: "presentation",
+					disabled: isDisabled,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: partClass(hasAdornment ? "input__group" : "input__plain", classNames?.group),
+						"data-invalid": isInvalid || void 0,
+						"data-readonly": isReadOnly || void 0,
+						onPointerDown: (event) => {
+							if (!isDisabled && !event.target.closest("input,button,a,select,textarea,[tabindex],[contenteditable]")) {
+								event.preventDefault();
+								control.current?.focus();
+							}
+						},
+						children: [
+							prefix != null && /* @__PURE__ */ jsx("span", {
+								className: partClass("input__prefix", classNames?.prefix),
+								children: prefix
+							}),
+							input,
+							isClearable && /* @__PURE__ */ jsx(InputClearButton, {
+								"aria-label": clearLabel ?? "Hapus input / Clear input",
+								className: classNames?.clearButton
+							}),
+							suffix != null && /* @__PURE__ */ jsx("span", {
+								className: partClass("input__suffix", classNames?.suffix),
+								children: suffix
+							})
+						]
+					})
+				}),
+				description && /* @__PURE__ */ jsx(Text$1, {
+					slot: "description",
+					className: partClass("input__description", classNames?.description),
+					children: description
+				}),
+				isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
+					className: partClass("input__error", classNames?.error),
+					children: errorMessage
 				})
-			}),
-			description && /* @__PURE__ */ jsx(Text$1, {
-				slot: "description",
-				className: partClass("input__description", classNames?.description),
-				children: description
-			}),
-			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
-				className: partClass("input__error", classNames?.error),
-				children: errorMessage
-			})
-		]
+			]
+		})
 	});
 });
 var Input = /* @__PURE__ */ Object.assign(/* @__PURE__ */ forwardRef(function InputWithComposition(props, ref) {
@@ -813,7 +906,8 @@ var Input = /* @__PURE__ */ Object.assign(/* @__PURE__ */ forwardRef(function In
 	Control: InputControl,
 	Group: InputGroup,
 	Prefix: InputPrefix,
-	Suffix: InputSuffix
+	Suffix: InputSuffix,
+	ClearButton: InputClearButton
 });
 //#endregion
 //#region src/Textarea.tsx
@@ -894,6 +988,36 @@ function Label({ children, htmlFor, id, className, style, classNames }) {
 	});
 }
 //#endregion
+//#region src/switch-visual.tsx
+var SwitchVisualContext = createContext({});
+function SwitchGroup({ size, tone, variant, isDisabled, orientation = "vertical", className, ...props }) {
+	const { label, ...native } = props;
+	return /* @__PURE__ */ jsx(SwitchVisualContext.Provider, {
+		value: {
+			size,
+			tone,
+			variant,
+			isDisabled
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...native,
+			role: "group",
+			"aria-label": label ?? props["aria-label"],
+			className: partClass("switch-group", className),
+			"data-orientation": orientation
+		})
+	});
+}
+function useSwitchVisual(props) {
+	const inherited = useContext(SwitchVisualContext);
+	return {
+		size: props.size ?? inherited.size ?? "md",
+		tone: props.tone ?? inherited.tone ?? "primary",
+		variant: props.variant ?? inherited.variant ?? "default",
+		disabled: inherited.isDisabled
+	};
+}
+//#endregion
 //#region src/choice-composition.tsx
 var ChoiceStateContext = createContext({
 	isSelected: false,
@@ -939,24 +1063,43 @@ function ChoiceContent({ className, ...props }) {
 		className: partClass("choice__label", className)
 	});
 }
-function SwitchComposition({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(SwitchField, {
-		...props,
-		className: partClass("input", className),
-		children: (fieldState) => /* @__PURE__ */ jsx(SwitchButton, {
-			className: "choice",
-			children: (state) => /* @__PURE__ */ jsx(ChoiceStateContext.Provider, {
-				value: state,
-				children: typeof children === "function" ? children(fieldState) : children
+function SwitchComposition({ className, children, size, tone, variant, ...props }) {
+	const visual = useSwitchVisual({
+		size,
+		tone,
+		variant
+	});
+	return /* @__PURE__ */ jsx(SwitchVisualContext.Provider, {
+		value: visual,
+		children: /* @__PURE__ */ jsx(SwitchField, {
+			...props,
+			isDisabled: props.isDisabled ?? visual.disabled,
+			className: partClass("input", className),
+			children: (fieldState) => /* @__PURE__ */ jsx(SwitchButton, {
+				className: "choice",
+				children: (state) => /* @__PURE__ */ jsx(ChoiceStateContext.Provider, {
+					value: state,
+					children: /* @__PURE__ */ jsx(ItemLabelContext.Provider, {
+						value: true,
+						children: typeof children === "function" ? children({
+							...fieldState,
+							...state
+						}) : children
+					})
+				})
 			})
 		})
 	});
 }
 function SwitchControl({ className, ...props }) {
 	const state = useContext(ChoiceStateContext);
+	const visual = useSwitchVisual({});
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		className: partClass("switch__control", className),
+		"data-size": visual.size,
+		"data-tone": visual.tone,
+		"data-variant": visual.variant,
 		"aria-hidden": "true",
 		"data-state": state.isSelected ? "checked" : "unchecked",
 		"data-disabled": state.isDisabled || void 0,
@@ -971,6 +1114,13 @@ function SwitchThumb({ className, ...props }) {
 		"aria-hidden": "true"
 	});
 }
+function SwitchIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("switch__icon", className),
+		"aria-hidden": "true"
+	});
+}
 function RadioGroupComposition({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
 		...props,
@@ -1129,7 +1279,12 @@ var RadioGroup = /* @__PURE__ */ Object.assign(RadioGroupRoot, {
 });
 //#endregion
 //#region src/Switch.tsx
-function CompactSwitch({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, name, value = "on", id, dir, className, style, classNames }) {
+function CompactSwitch({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled, isReadOnly = false, isRequired = false, validate, validationBehavior = "aria", size, tone, variant, name, value = "on", id, dir, className, style, classNames }) {
+	const visual = useSwitchVisual({
+		size,
+		tone,
+		variant
+	});
 	return /* @__PURE__ */ jsxs(SwitchField, {
 		className: partClass(partClass("input", classNames?.root), className),
 		style,
@@ -1137,9 +1292,12 @@ function CompactSwitch({ label, description, errorMessage, isInvalid = false, is
 		isSelected,
 		defaultSelected,
 		onChange,
-		isDisabled,
+		isDisabled: isDisabled ?? visual.disabled,
+		isReadOnly,
+		isRequired,
+		validate,
 		isInvalid,
-		validationBehavior: "aria",
+		validationBehavior,
 		name,
 		value,
 		id,
@@ -1149,6 +1307,9 @@ function CompactSwitch({ label, description, errorMessage, isInvalid = false, is
 				children: ({ isSelected: selected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					className: partClass("switch__control", classNames?.control),
+					"data-size": visual.size,
+					"data-tone": visual.tone,
+					"data-variant": visual.variant,
 					"data-state": selected ? "checked" : "unchecked",
 					"data-disabled": disabled || void 0,
 					"data-invalid": isInvalid || void 0,
@@ -1179,6 +1340,7 @@ var Switch = /* @__PURE__ */ Object.assign(SwitchRoot, {
 	Root: SwitchComposition,
 	Control: SwitchControl,
 	Thumb: SwitchThumb,
+	Icon: SwitchIcon,
 	Content: ChoiceContent
 });
 //#endregion
@@ -1561,14 +1723,65 @@ var NumberField = /* @__PURE__ */ Object.assign(NumberFieldRoot, {
 });
 //#endregion
 //#region src/Card.tsx
-/** A content container; place links and buttons inside rather than making it clickable. */
-function CompactCard({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, classNames, ...props }) {
+/** Native primary action is a sibling of content, so nested controls remain valid HTML. */
+var CardTitleIdContext = createContext(void 0);
+function CardAction({ href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink }) {
+	if (!href && !onPress) return null;
+	if (href) {
+		const props = {
+			className: partClass("card__action", actionClassName),
+			href: isDisabled ? void 0 : href,
+			target,
+			rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+			"aria-label": actionLabel,
+			"aria-disabled": isDisabled || void 0,
+			"aria-labelledby": actionLabelledBy,
+			role: isDisabled ? "link" : void 0,
+			tabIndex: isDisabled ? -1 : void 0,
+			onClick: (event) => {
+				if (isDisabled) event.preventDefault();
+				else onPress?.();
+			}
+		};
+		return renderLink ? renderLink(props) : /* @__PURE__ */ jsx("a", {
+			...props,
+			"aria-label": actionLabel,
+			"aria-labelledby": actionLabelledBy
+		});
+	}
+	const props = {
+		type: "button",
+		className: partClass("card__action", actionClassName),
+		"aria-label": actionLabel,
+		"aria-labelledby": actionLabelledBy,
+		disabled: isDisabled,
+		onClick: () => onPress?.()
+	};
+	return /* @__PURE__ */ jsx("button", { ...props });
+}
+function CompactCard({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, classNames, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, headerAlign, dividedHeader, flushFooter, ...props }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
+		"data-density": density,
+		"data-interactive": !!(href || onPress) || void 0,
+		"data-disabled": isDisabled || void 0,
 		className: partClass(partClass("card", classNames?.root), className),
 		children: [
+			/* @__PURE__ */ jsx(CardAction, {
+				href,
+				target,
+				rel,
+				onPress,
+				isDisabled,
+				renderLink,
+				actionClassName: partClass(classNames?.action ?? "", actionClassName),
+				actionLabelledBy: actionLabelledBy ?? props["aria-labelledby"],
+				actionLabel: actionLabel ?? title ?? props["aria-label"]
+			}),
 			(title || description || actions || header || titleExtras) && /* @__PURE__ */ jsxs("div", {
+				"data-align": headerAlign,
+				"data-divided": dividedHeader || void 0,
 				className: partClass("card__header", classNames?.header),
 				children: [(title || description || header || titleExtras) && /* @__PURE__ */ jsx("div", {
 					className: partClass("card__heading", classNames?.heading),
@@ -1595,21 +1808,43 @@ function CompactCard({ title, description, headingLevel = 3, actions, header, ti
 				children
 			}),
 			footer && /* @__PURE__ */ jsx("div", {
+				"data-flush": flushFooter || void 0,
 				className: partClass("card__footer", classNames?.footer),
 				children: footer
 			})
 		]
 	});
 }
-function CardRoot({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		...props,
-		className: partClass("card", className)
+function CardRoot({ className, classNames, children, density, href, target, rel, onPress, isDisabled, actionLabel, actionLabelledBy, actionClassName, renderLink, ...props }) {
+	const titleId = useId();
+	const label = actionLabel ?? props["aria-label"];
+	return /* @__PURE__ */ jsx(CardTitleIdContext.Provider, {
+		value: titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			"data-density": density,
+			"data-interactive": !!(href || onPress) || void 0,
+			"data-disabled": isDisabled || void 0,
+			className: partClass(partClass("card", classNames?.root), className),
+			children: [/* @__PURE__ */ jsx(CardAction, {
+				href,
+				target,
+				rel,
+				onPress,
+				isDisabled,
+				renderLink,
+				actionClassName: partClass(classNames?.action ?? "", actionClassName),
+				actionLabel: label,
+				actionLabelledBy: actionLabelledBy ?? props["aria-labelledby"] ?? (label ? void 0 : titleId)
+			}), children]
+		})
 	});
 }
-function CardHeader({ className, ...props }) {
+function CardHeader({ className, align, divided, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
+		"data-align": align,
+		"data-divided": divided || void 0,
 		className: partClass("card__header", className)
 	});
 }
@@ -1626,8 +1861,10 @@ function CardTitleRow({ className, ...props }) {
 	});
 }
 function CardTitle({ className, headingLevel = 3, ...props }) {
+	const titleId = useContext(CardTitleIdContext);
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsx(Heading, {
+		id: titleId,
 		...props,
 		className: partClass("card__title", className)
 	});
@@ -1650,9 +1887,10 @@ function CardContent({ className, ...props }) {
 		className: partClass("card__content", className)
 	});
 }
-function CardFooter({ className, ...props }) {
+function CardFooter({ className, flush, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
+		"data-flush": flush || void 0,
 		className: partClass("card__footer", className)
 	});
 }
@@ -1668,15 +1906,261 @@ var Card = /* @__PURE__ */ Object.assign(CompactCard, {
 	Footer: CardFooter
 });
 //#endregion
+//#region src/visual-slot.tsx
+/** Decorate one child while preserving its handlers and ref. */
+function visualSlot(children, props) {
+	const child = Children.only(children);
+	const merged = {
+		...child.props,
+		...props
+	};
+	merged.className = [props.className, child.props.className].filter(Boolean).join(" ");
+	merged.style = {
+		...props.style,
+		...child.props.style
+	};
+	for (const key of Object.keys(props)) if (/^on[A-Z]/.test(key) && typeof child.props[key] === "function" && typeof props[key] === "function") merged[key] = (...args) => {
+		child.props[key](...args);
+		props[key](...args);
+	};
+	if (child.props.ref && props.ref) merged.ref = (node) => {
+		const cleanups = [];
+		for (const ref of [child.props.ref, props.ref]) if (typeof ref === "function") {
+			const cleanup = ref(node);
+			cleanups.push(typeof cleanup === "function" ? cleanup : () => {
+				ref(null);
+			});
+		} else if (ref) {
+			ref.current = node;
+			cleanups.push(() => {
+				ref.current = null;
+			});
+		}
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	};
+	return cloneElement(child, merged);
+}
+//#endregion
 //#region src/Badge.tsx
-/** Static status text. Dynamic announcements belong in an application-owned live region. */
-function Badge({ tone = "neutral", className, classNames, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
+var AnchorContext = createContext(false);
+/** Static status text; wrap in Badge.Anchor to position it relative to another element. */
+function BadgeRoot({ tone = "neutral", size = "md", variant = "default", placement = "top-right", asChild, children, className, classNames, ...props }) {
+	const anchored = useContext(AnchorContext);
+	const attributes = {
 		...props,
 		className: partClass(partClass("badge", classNames?.root), className),
+		"data-tone": tone,
+		"data-size": size,
+		"data-variant": variant,
+		"data-placement": anchored ? placement : void 0,
+		"data-anchored": anchored || void 0,
+		"data-dot": anchored && children == null || void 0
+	};
+	return asChild ? visualSlot(children, attributes) : /* @__PURE__ */ jsx("span", {
+		...attributes,
+		children: classNames?.label ? /* @__PURE__ */ jsx("span", {
+			className: partClass("badge__label", classNames.label),
+			children
+		}) : children
+	});
+}
+function BadgeAnchor({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AnchorContext.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("span", {
+			...props,
+			className: partClass("badge-anchor badge__anchor", className)
+		})
+	});
+}
+function BadgeLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("badge__label", className)
+	});
+}
+var Badge = /* @__PURE__ */ Object.assign(BadgeRoot, {
+	Root: BadgeRoot,
+	Anchor: BadgeAnchor,
+	Label: BadgeLabel
+});
+//#endregion
+//#region src/Avatar.tsx
+var AvatarGroupContext = createContext({});
+var AvatarContext = createContext(null);
+function AvatarRoot({ size, tone, variant, radius = "full", asChild, children, className, classNames, ...props }) {
+	const group = useContext(AvatarGroupContext);
+	const [status, setStatus] = useState("idle");
+	const actualSize = size ?? group.size ?? "md";
+	const attributes = {
+		...props,
+		className: partClass(partClass("avatar", classNames?.root), className),
+		"data-size": actualSize,
+		"data-tone": tone ?? group.tone ?? "neutral",
+		"data-variant": variant ?? group.variant ?? "default",
+		"data-radius": radius,
+		"data-image-status": status
+	};
+	return /* @__PURE__ */ jsx(AvatarContext.Provider, {
+		value: {
+			status,
+			setStatus,
+			size: actualSize,
+			classNames
+		},
+		children: asChild ? visualSlot(children, attributes) : /* @__PURE__ */ jsx("span", {
+			...attributes,
+			children
+		})
+	});
+}
+function AvatarImage(props) {
+	return /* @__PURE__ */ jsx(AvatarImageLoader, { ...props }, `${props.src ?? ""}|${props.srcSet ?? ""}|${props.sizes ?? ""}`);
+}
+function AvatarImageLoader({ src, srcSet, sizes, alt, asChild, children, className, onLoad, onError, onLoadingStatusChange, ref, ...props }) {
+	const context = useContext(AvatarContext);
+	const setStatus = context?.setStatus;
+	const imageRef = useRef(null);
+	const [result, setResult] = useState({
+		source: "",
+		status: "idle"
+	});
+	const source = `${src ?? ""}|${srcSet ?? ""}|${sizes ?? ""}`;
+	const status = result.source === source ? result.status : src || srcSet ? "loading" : "error";
+	const statusCallback = useRef(onLoadingStatusChange);
+	useEffect(() => {
+		statusCallback.current = onLoadingStatusChange;
+	});
+	useEffect(() => {
+		setStatus?.(status);
+		statusCallback.current?.(status);
+	}, [status, setStatus]);
+	useEffect(() => () => setStatus?.("idle"), [setStatus]);
+	useEffect(() => {
+		if (imageRef.current?.complete && imageRef.current.naturalWidth > 0) setResult({
+			source,
+			status: "loaded"
+		});
+	}, [source]);
+	const attributes = {
+		...props,
+		src,
+		srcSet,
+		sizes,
+		className: partClass(partClass("avatar__image", context?.classNames?.image), className),
+		"data-status": status,
+		"aria-hidden": status !== "loaded" || void 0,
+		ref: (node) => {
+			imageRef.current = node;
+			if (typeof ref === "function") return ref(node);
+			else if (ref) ref.current = node;
+		},
+		onLoad: (event) => {
+			if (event.currentTarget !== imageRef.current) return;
+			setResult({
+				source,
+				status: "loaded"
+			});
+			onLoad?.(event);
+		},
+		onError: (event) => {
+			if (event.currentTarget !== imageRef.current) return;
+			setResult({
+				source,
+				status: "error"
+			});
+			onError?.(event);
+		}
+	};
+	return asChild ? visualSlot(children, {
+		...attributes,
+		...alt !== void 0 ? { alt } : {}
+	}) : /* @__PURE__ */ jsx("img", {
+		...attributes,
+		alt: alt ?? ""
+	}, source);
+}
+function AvatarFallback({ delayMs = 0, tone, className, ...props }) {
+	const context = useContext(AvatarContext);
+	const [ready, setReady] = useState(delayMs <= 0);
+	useEffect(() => {
+		setReady(delayMs <= 0);
+		if (delayMs <= 0) return;
+		const timer = setTimeout(() => setReady(true), delayMs);
+		return () => clearTimeout(timer);
+	}, [delayMs, context?.status]);
+	if (context?.status === "loaded" || !ready) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass(partClass("avatar__fallback", context?.classNames?.fallback), className),
 		"data-tone": tone
 	});
 }
+function AvatarBadge({ size, tone = "primary", placement = "bottom-right", className, children, ...props }) {
+	const context = useContext(AvatarContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass(partClass("avatar__badge", context?.classNames?.badge), className),
+		"data-size": size ?? context?.size ?? "md",
+		"data-tone": tone,
+		"data-placement": placement,
+		"data-dot": children == null || void 0,
+		children
+	});
+}
+var Avatar = /* @__PURE__ */ Object.assign(AvatarRoot, {
+	Root: AvatarRoot,
+	Image: AvatarImage,
+	Fallback: AvatarFallback,
+	Badge: AvatarBadge
+});
+//#endregion
+//#region src/AvatarGroup.tsx
+function flatten(children, prefix = "") {
+	return Children.toArray(children).flatMap((child, index) => {
+		const key = `${prefix}/${isValidElement(child) ? child.key ?? index : index}`;
+		return isValidElement(child) && child.type === Fragment ? flatten(child.props.children, key) : isValidElement(child) ? [cloneElement(child, { key })] : [];
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		...props,
+		className: partClass("avatar-group__count", className),
+		children: /* @__PURE__ */ jsx(Avatar.Fallback, { children: props.children })
+	});
+}
+function AvatarGroupRoot({ size = "md", tone = "neutral", variant = "default", max, isGrid = false, overlap = "clip", className, classNames, children, ...props }) {
+	const items = flatten(children);
+	const counts = items.filter((item) => isValidElement(item) && item.type === AvatarGroupCount);
+	const avatars = items.filter((item) => !counts.includes(item));
+	const limit = max === void 0 || !Number.isFinite(max) ? avatars.length : Math.max(0, Math.floor(max));
+	const hidden = Math.max(0, avatars.length - limit);
+	return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, {
+		value: {
+			size,
+			tone,
+			variant
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			...props,
+			className: partClass(partClass("avatar-group", classNames?.root), className),
+			"data-size": size,
+			"data-grid": isGrid || void 0,
+			"data-overlap": overlap,
+			children: [avatars.slice(0, limit), counts.length ? counts : hidden > 0 ? /* @__PURE__ */ jsxs(AvatarGroupCount, {
+				className: classNames?.count,
+				"aria-label": `${hidden} more`,
+				children: ["+", hidden]
+			}) : null]
+		})
+	});
+}
+var AvatarGroup = /* @__PURE__ */ Object.assign(AvatarGroupRoot, {
+	Root: AvatarGroupRoot,
+	Count: AvatarGroupCount
+});
 //#endregion
 //#region src/Skeleton.tsx
 /** Decorative placeholder. Set aria-busy and loading text on the surrounding content. */
@@ -1800,7 +2284,7 @@ function mountTabsIndicator(container) {
 }
 //#endregion
 //#region src/Tabs.tsx
-function CompactTabs({ className, style, classNames, label, variant = "primary", size = "md", orientation = "horizontal", align = "center", fullWidth = false, inset = "default", showSeparators = false, renderIcon, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode = "manual", dir, id }) {
+function CompactTabs({ className, style, classNames, label, variant = "primary", size = "md", indicatorShadow = true, orientation = "horizontal", align = "center", fullWidth = false, inset = "default", showSeparators = false, renderIcon, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode = "manual", dir, id }) {
 	const container = useRef(null);
 	const hasToolbar = !!(extras || actions);
 	useEffect(() => container.current ? mountTabsIndicator(container.current) : void 0, [items.length, hasToolbar]);
@@ -1861,6 +2345,7 @@ function CompactTabs({ className, style, classNames, label, variant = "primary",
 		]
 	}) : null;
 	const content = /* @__PURE__ */ jsxs(Tabs$1, {
+		"data-indicator-shadow": indicatorShadow,
 		className: [
 			"tabs",
 			classNames?.root,
@@ -1908,9 +2393,10 @@ function CompactTabs({ className, style, classNames, label, variant = "primary",
 		children: content
 	}) : content;
 }
-function TabsRoot({ className, classNames, value, defaultValue, onChange, variant = "primary", size = "md", align = "center", fullWidth, ...props }) {
+function TabsRoot({ className, classNames, value, defaultValue, onChange, variant = "primary", size = "md", align = "center", fullWidth, indicatorShadow = true, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs$1, {
 		...props,
+		"data-indicator-shadow": indicatorShadow,
 		selectedKey: value,
 		defaultSelectedKey: defaultValue,
 		onSelectionChange: onChange ? (key) => onChange(String(key)) : void 0,
@@ -3259,7 +3745,7 @@ function CompactDropdownMenu(props) {
 			onOpenChange: change,
 			children: [/* @__PURE__ */ jsx(Button$1, {
 				style,
-				className: partClass(partClass(partClass(`button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`, classNames?.trigger), classNames?.root), className),
+				className: partClass(partClass(partClass(`button button--${props.triggerVariant ?? "secondary"} button--${props.triggerSize ?? "md"}${props.triggerIconOnly ? " button--icon-only" : ""}`, classNames?.trigger), classNames?.root), className),
 				"aria-label": triggerLabel,
 				isDisabled: isDisabled || !items.length,
 				children: props.triggerContent ?? triggerLabel
@@ -3861,38 +4347,355 @@ function DateRangeCancelButton({ className, onClick, children, ...props }) {
 	});
 }
 //#endregion
-//#region src/date-range-model.ts
-function dateRangeLabels(locale = "id-ID") {
-	return locale.startsWith("id") ? {
-		title: "Pilih rentang tanggal",
-		start: "Tanggal mulai",
-		end: "Tanggal akhir",
-		apply: "Terapkan",
-		cancel: "Batal",
-		clear: "Kosongkan",
-		previousMonth: "Bulan sebelumnya",
-		nextMonth: "Bulan berikutnya",
-		presets: "Pilihan cepat",
-		placeholder: "Pilih tanggal",
-		incomplete: "Lengkapi tanggal mulai dan akhir.",
-		order: "Tanggal akhir harus setelah atau sama dengan tanggal mulai.",
-		bounds: "Tanggal berada di luar batas yang diizinkan.",
-		unavailable: "Rentang memuat tanggal yang tidak tersedia.",
-		length: "Durasi rentang tidak sesuai batas yang diizinkan.",
-		required: "Rentang tanggal wajib diisi."
-	} : {
-		title: "Select date range",
-		start: "Start date",
-		end: "End date",
-		apply: "Apply",
-		cancel: "Cancel",
-		clear: "Clear",
-		previousMonth: "Previous month",
-		nextMonth: "Next month",
-		presets: "Quick selections",
-		placeholder: "Choose dates",
-		incomplete: "Enter both start and end dates.",
-		order: "End date must be on or after start date.",
+//#region src/Calendar.tsx
+function date(value) {
+	try {
+		return value ? parseDate(value) : void 0;
+	} catch {
+		return;
+	}
+}
+function monthName(year, month, locale) {
+	return new Intl.DateTimeFormat(locale, {
+		month: "long",
+		timeZone: "UTC",
+		calendar: "gregory"
+	}).format(new CalendarDate(year, month, 1).toDate("UTC"));
+}
+function MonthPicker({ value, year = today("UTC").year, onChange, locale = "id-ID", minDate, maxDate, isDisabled, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("calendar__choices", className),
+		role: "group",
+		"aria-label": locale.startsWith("id") ? "Pilih bulan" : "Choose month",
+		children: Array.from({ length: 12 }, (_, i) => i + 1).map((month) => {
+			const start = new CalendarDate(year, month, 1);
+			const end = start.add({ months: 1 }).subtract({ days: 1 });
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled || !!(date(minDate) && end.compare(date(minDate)) < 0) || !!(date(maxDate) && start.compare(date(maxDate)) > 0),
+				"aria-pressed": value === month,
+				onClick: () => onChange?.(month),
+				children: monthName(year, month, locale)
+			}, month);
+		})
+	});
+}
+function YearPicker({ value = today("UTC").year, onChange, locale = "id-ID", minDate, maxDate, isDisabled, className, ...props }) {
+	const min = date(minDate)?.year ?? 1, max = date(maxDate)?.year ?? 9999;
+	const [page, setPage] = useState(Math.max(min, Math.min(max, Math.floor((value - 1) / 12) * 12 + 1)));
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: partClass("calendar__years", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "calendar__year-navigation",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": locale.startsWith("id") ? "Tahun sebelumnya" : "Previous years",
+					disabled: isDisabled || page <= min,
+					onClick: () => setPage(Math.max(min, page - 12)),
+					children: "‹"
+				}),
+				/* @__PURE__ */ jsxs("span", { children: [
+					page,
+					"–",
+					Math.min(page + 11, max)
+				] }),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": locale.startsWith("id") ? "Tahun berikutnya" : "Next years",
+					disabled: isDisabled || page + 11 >= max,
+					onClick: () => setPage(Math.max(min, Math.min(max - 11, page + 12))),
+					children: "›"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "calendar__choices",
+			role: "group",
+			"aria-label": locale.startsWith("id") ? "Pilih tahun" : "Choose year",
+			children: Array.from({ length: 12 }, (_, i) => page + i).filter((year) => year <= 9999).map((year) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled || year < min || year > max,
+				"aria-pressed": value === year,
+				onClick: () => onChange?.(year),
+				children: year
+			}, year))
+		})]
+	});
+}
+function MonthYearNavigation({ value, onChange, locale = "id-ID", minDate, maxDate, isDisabled, className, ...props }) {
+	const current = date(value) ?? today("UTC");
+	const [view, setView] = useState(null);
+	const header = useRef(null), lastToggle = useRef("month"), previousView = useRef(null);
+	useEffect(() => {
+		if (view) (header.current?.querySelector(".calendar__view [aria-pressed=\"true\"]:not(:disabled)") ?? header.current?.querySelector(".calendar__view button:not(:disabled)"))?.focus();
+		else if (previousView.current) header.current?.querySelectorAll(".date-range__heading > button")[lastToggle.current === "month" ? 0 : 1]?.focus();
+		previousView.current = view;
+	}, [view]);
+	useEffect(() => {
+		if (!view) return;
+		const grid = header.current?.closest(".date-range__month")?.querySelector(".date-range__grid");
+		if (!grid) return;
+		const inert = grid.hasAttribute("inert"), hidden = grid.getAttribute("aria-hidden");
+		grid.inert = true;
+		grid.setAttribute("inert", "");
+		grid.setAttribute("aria-hidden", "true");
+		return () => {
+			grid.inert = inert;
+			if (!inert) grid.removeAttribute("inert");
+			if (hidden === null) grid.removeAttribute("aria-hidden");
+			else grid.setAttribute("aria-hidden", hidden);
+		};
+	}, [view]);
+	const navigate = (year, month) => {
+		let next = new CalendarDate(year, month, 1);
+		const min = date(minDate), max = date(maxDate);
+		if (min && next.compare(min) < 0) next = min;
+		if (max && next.compare(max) > 0) next = max;
+		onChange(next.toString());
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref: header,
+		className: partClass("calendar__header", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "date-range__heading",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled,
+				"aria-expanded": view === "month",
+				onClick: () => {
+					lastToggle.current = "month";
+					setView(view === "month" ? null : "month");
+				},
+				children: monthName(current.year, current.month, locale)
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: isDisabled,
+				"aria-expanded": view === "year",
+				onClick: () => {
+					lastToggle.current = "year";
+					setView(view === "year" ? null : "year");
+				},
+				children: current.year
+			})]
+		}), view && /* @__PURE__ */ jsxs("div", {
+			className: "calendar__view",
+			role: "group",
+			"aria-label": view === "year" ? locale.startsWith("id") ? "Pilih tahun" : "Choose year" : locale.startsWith("id") ? "Pilih bulan" : "Choose month",
+			onKeyDownCapture: (e) => {
+				if (e.key === "Escape") {
+					e.stopPropagation();
+					setView(null);
+				}
+			},
+			children: [view === "month" ? /* @__PURE__ */ jsx(MonthPicker, {
+				value: current.month,
+				year: current.year,
+				locale,
+				minDate,
+				maxDate,
+				isDisabled,
+				onChange: (month) => {
+					navigate(current.year, month);
+					setView(null);
+				}
+			}) : /* @__PURE__ */ jsx(YearPicker, {
+				value: current.year,
+				locale,
+				minDate,
+				maxDate,
+				isDisabled,
+				onChange: (year) => {
+					navigate(year, current.month);
+					setView("month");
+				}
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "calendar__back",
+				onClick: () => setView(null),
+				children: locale.startsWith("id") ? "Kembali" : "Back"
+			})]
+		})]
+	});
+}
+/** Reads actual visibleRange rather than assuming the focused day is the first panel. */
+function CalendarViewHeader({ offset = 0, onNavigate, ...props }) {
+	const single = useContext(CalendarStateContext);
+	const visible = (useContext(RangeCalendarStateContext) ?? single)?.visibleRange.start ?? today("UTC");
+	return /* @__PURE__ */ jsx(MonthYearNavigation, {
+		...props,
+		value: visible.add({ months: offset }).toString(),
+		onChange: (value) => onNavigate(parseDate(value).subtract({ months: offset }))
+	});
+}
+function CalendarBody({ props, onNavigate }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "date-range__navigation",
+		children: [/* @__PURE__ */ jsx(Button$1, {
+			slot: "previous",
+			className: "date-range__nav",
+			"aria-label": props.locale?.startsWith("id") ? "Bulan sebelumnya" : "Previous month",
+			children: "‹"
+		}), /* @__PURE__ */ jsx(Button$1, {
+			slot: "next",
+			className: "date-range__nav",
+			"aria-label": props.locale?.startsWith("id") ? "Bulan berikutnya" : "Next month",
+			children: "›"
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "date-range__months",
+		children: Array.from({ length: props.visibleMonths ?? 1 }, (_, i) => /* @__PURE__ */ jsxs("div", {
+			className: partClass("date-range__month", props.classNames?.month),
+			children: [/* @__PURE__ */ jsx(CalendarViewHeader, {
+				offset: i,
+				onNavigate,
+				locale: props.locale,
+				minDate: props.minDate,
+				maxDate: props.maxDate,
+				isDisabled: props.isDisabled,
+				className: props.classNames?.header
+			}), /* @__PURE__ */ jsxs(CalendarGrid$1, {
+				offset: { months: i },
+				className: partClass("date-range__grid", props.classNames?.grid),
+				weekdayStyle: "short",
+				children: [/* @__PURE__ */ jsx(CalendarGridHeader$1, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell$1, {
+					className: "date-range__weekday",
+					children: day
+				}) }), /* @__PURE__ */ jsx(CalendarGridBody$1, { children: (day) => /* @__PURE__ */ jsx(CalendarCell$1, {
+					date: day,
+					className: partClass("date-range__day", props.classNames?.day)
+				}) })]
+			})]
+		}, i))
+	})] });
+}
+function Calendar(props) {
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const value = props.value === void 0 ? local : props.value;
+	useEffect(() => {
+		const next = date(value);
+		if (next) setFocused(next);
+	}, [value]);
+	const [focused, setFocused] = useState(() => date(value) ?? date(props.referenceDate) ?? date(props.minDate) ?? today("UTC"));
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: props.locale ?? "id-ID",
+		children: /* @__PURE__ */ jsx(Calendar$1, {
+			className: partClass(partClass("date-range__calendar calendar", props.classNames?.root), props.className),
+			style: props.style,
+			"aria-label": props.label ?? "Calendar",
+			dir: props.dir,
+			value: date(value) ?? null,
+			focusedValue: focused,
+			onFocusChange: setFocused,
+			createCalendar: () => new GregorianCalendar(),
+			visibleDuration: { months: props.visibleMonths ?? 1 },
+			pageBehavior: "single",
+			firstDayOfWeek: props.weekStartsOn === 0 ? "sun" : "mon",
+			minValue: date(props.minDate),
+			maxValue: date(props.maxDate),
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: (v) => props.isDateUnavailable?.(v.toString()) ?? false,
+			onChange: (v) => {
+				const next = v?.toString() ?? null;
+				setLocal(next);
+				props.onChange?.(next);
+			},
+			children: /* @__PURE__ */ jsx(CalendarBody, {
+				props,
+				onNavigate: setFocused
+			})
+		})
+	});
+}
+function RangeCalendar(props) {
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const value = props.value === void 0 ? local : props.value;
+	const selectedStart = value?.start;
+	useEffect(() => {
+		const next = date(selectedStart);
+		if (next) setFocused(next);
+	}, [selectedStart]);
+	const [focused, setFocused] = useState(() => date(value?.start) ?? date(props.referenceDate) ?? date(props.minDate) ?? today("UTC"));
+	const selected = date(value?.start) && date(value?.end) ? {
+		start: date(value?.start),
+		end: date(value?.end)
+	} : null;
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: props.locale ?? "id-ID",
+		children: /* @__PURE__ */ jsx(RangeCalendar$1, {
+			className: partClass(partClass("date-range__calendar calendar", props.classNames?.root), props.className),
+			style: props.style,
+			"aria-label": props.label ?? "Calendar",
+			dir: props.dir,
+			value: selected,
+			focusedValue: focused,
+			onFocusChange: setFocused,
+			createCalendar: () => new GregorianCalendar(),
+			visibleDuration: { months: props.visibleMonths ?? 2 },
+			pageBehavior: "single",
+			firstDayOfWeek: props.weekStartsOn === 0 ? "sun" : "mon",
+			minValue: date(props.minDate),
+			maxValue: date(props.maxDate),
+			isDisabled: props.isDisabled,
+			isReadOnly: props.isReadOnly,
+			isDateUnavailable: (v) => props.isDateUnavailable?.(v.toString()) ?? false,
+			onChange: (v) => {
+				const next = v ? {
+					start: v.start.toString(),
+					end: v.end.toString()
+				} : null;
+				setLocal(next);
+				props.onChange?.(next);
+			},
+			children: /* @__PURE__ */ jsx(CalendarBody, {
+				props: {
+					...props,
+					visibleMonths: props.visibleMonths ?? 2,
+					value: null,
+					defaultValue: null,
+					onChange: void 0
+				},
+				onNavigate: setFocused
+			})
+		})
+	});
+}
+//#endregion
+//#region src/date-range-model.ts
+function dateRangeLabels(locale = "id-ID") {
+	return locale.startsWith("id") ? {
+		title: "Pilih rentang tanggal",
+		start: "Tanggal mulai",
+		end: "Tanggal akhir",
+		apply: "Terapkan",
+		cancel: "Batal",
+		clear: "Kosongkan",
+		previousMonth: "Bulan sebelumnya",
+		nextMonth: "Bulan berikutnya",
+		presets: "Pilihan cepat",
+		placeholder: "Pilih tanggal",
+		incomplete: "Lengkapi tanggal mulai dan akhir.",
+		order: "Tanggal akhir harus setelah atau sama dengan tanggal mulai.",
+		bounds: "Tanggal berada di luar batas yang diizinkan.",
+		unavailable: "Rentang memuat tanggal yang tidak tersedia.",
+		length: "Durasi rentang tidak sesuai batas yang diizinkan.",
+		required: "Rentang tanggal wajib diisi."
+	} : {
+		title: "Select date range",
+		start: "Start date",
+		end: "End date",
+		apply: "Apply",
+		cancel: "Cancel",
+		clear: "Clear",
+		previousMonth: "Previous month",
+		nextMonth: "Next month",
+		presets: "Quick selections",
+		placeholder: "Choose dates",
+		incomplete: "Enter both start and end dates.",
+		order: "End date must be on or after start date.",
 		bounds: "Dates are outside the allowed limits.",
 		unavailable: "The range includes an unavailable date.",
 		length: "The range duration is outside the allowed limits.",
@@ -4011,7 +4814,7 @@ function CalendarContent({ onPending, dir, children }) {
 	});
 }
 function DateRangePickerRoot(props) {
-	const { label, locale = "id-ID", dir, size = "md", variant = "primary", fullWidth = true, hideLabel = false, visibleMonths = 2, weekStartsOn = 1, display = "popover", showInputs = true, presets = [], isDisabled = false, isReadOnly = false, isRequired = false } = props;
+	const { label, locale = "id-ID", dir, size = "md", variant = "primary", fullWidth = true, hideLabel = false, visibleMonths = 2, weekStartsOn = 1, display = "auto", showInputs = true, presets = [], isDisabled = false, isReadOnly = false, isRequired = false } = props;
 	const labels = {
 		...dateRangeLabels(locale),
 		...props.labels
@@ -4032,6 +4835,15 @@ function DateRangePickerRoot(props) {
 	const [formError, setFormError] = useState(false);
 	const [pending, setPending] = useState(false), [calendarKey, setCalendarKey] = useState(0);
 	const trigger = useRef(null);
+	const [mobile, setMobile] = useState(false);
+	useEffect(() => {
+		const query = window.matchMedia("(max-width: 640px)");
+		const change = () => setMobile(query.matches);
+		change();
+		query.addEventListener("change", change);
+		return () => query.removeEventListener("change", change);
+	}, []);
+	const isDialog = display === "dialog" || display === "auto" && mobile;
 	const id = useId();
 	const disclosure = useDisclosure(props.open, props.defaultOpen, props.onOpenChange);
 	const visible = disclosure.visible && !isDisabled;
@@ -4044,6 +4856,23 @@ function DateRangePickerRoot(props) {
 		setPending(false);
 		setCalendarKey((k) => k + 1);
 	}
+	function updateDraft(next) {
+		if (isDisabled || isReadOnly) return;
+		setDraft(next);
+		const value = next.start || next.end ? next : null;
+		if (props.commitMode === "immediate" && !rangeError(value, props)) {
+			setLocal(value);
+			setFormError(false);
+			props.onChange?.(value);
+		}
+	}
+	function clearDraft() {
+		replaceDraft(empty());
+		if (props.commitMode === "immediate" && !isDisabled && !isReadOnly) {
+			setLocal(null);
+			props.onChange?.(null);
+		}
+	}
 	function resetDraft() {
 		replaceDraft({
 			start,
@@ -4079,13 +4908,17 @@ function DateRangePickerRoot(props) {
 			...draft,
 			[part]: value
 		});
+		updateDraft({
+			...draft,
+			[part]: value
+		});
 		if (asDate(value)) setFocused(asDate(value));
 	}
 	const calendarValue = asDate(draft.start) && asDate(draft.end) && draft.start <= draft.end ? {
 		start: asDate(draft.start),
 		end: asDate(draft.end)
 	} : null;
-	const calendar = /* @__PURE__ */ jsx(RangeCalendar, {
+	const calendar = /* @__PURE__ */ jsx(RangeCalendar$1, {
 		dir,
 		className: partClass("date-range__calendar", props.classNames?.calendar),
 		"aria-label": labels.title,
@@ -4094,7 +4927,7 @@ function DateRangePickerRoot(props) {
 		onFocusChange: setFocused,
 		createCalendar: () => new GregorianCalendar(),
 		onChange: (v) => {
-			if (v) setDraft({
+			if (v) updateDraft({
 				start: v.start.toString(),
 				end: v.end.toString()
 			});
@@ -4127,9 +4960,14 @@ function DateRangePickerRoot(props) {
 				className: partClass("date-range__months", props.classNames?.months),
 				children: Array.from({ length: visibleMonths }, (_, i) => /* @__PURE__ */ jsxs("div", {
 					className: partClass("date-range__month", props.classNames?.month),
-					children: [/* @__PURE__ */ jsx(CalendarHeading, {
-						offset: { months: i },
-						className: partClass("date-range__heading", props.classNames?.heading)
+					children: [/* @__PURE__ */ jsx(CalendarViewHeader, {
+						offset: i,
+						onNavigate: setFocused,
+						locale,
+						minDate: props.minDate,
+						maxDate: props.maxDate,
+						isDisabled,
+						className: props.classNames?.heading
 					}), /* @__PURE__ */ jsxs(CalendarGrid, {
 						offset: { months: i },
 						className: partClass("date-range__grid", props.classNames?.grid),
@@ -4175,6 +5013,7 @@ function DateRangePickerRoot(props) {
 						"aria-pressed": !pending && draft.start === p.value.start && draft.end === p.value.end,
 						onClick: () => {
 							replaceDraft({ ...p.value });
+							updateDraft({ ...p.value });
 							setFocused(asDate(p.value.start));
 						},
 						children: p.label
@@ -4253,26 +5092,46 @@ function DateRangePickerRoot(props) {
 					]
 				})]
 			}),
-			/* @__PURE__ */ jsxs("footer", {
+			props.showActions !== false && /* @__PURE__ */ jsxs("footer", {
 				className: partClass("date-range__footer", props.classNames?.footer),
 				children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
 					className: partClass("button button--ghost button--sm", props.classNames?.clearButton),
 					disabled: isDisabled || isReadOnly,
-					onClick: () => replaceDraft(empty()),
+					onClick: clearDraft,
 					children: labels.clear
-				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: partClass("button button--secondary button--sm", props.classNames?.cancelButton),
-					onClick: () => changeOpen(false),
-					children: labels.cancel
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: partClass("button button--primary button--sm", props.classNames?.applyButton),
-					disabled: isDisabled || isReadOnly || !!errorCode,
-					onClick: apply,
-					children: labels.apply
-				})] })]
+				}), /* @__PURE__ */ jsxs("div", { children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "button button--ghost button--sm",
+						disabled: isDisabled || isReadOnly || !!rangeError({
+							start: currentDate(),
+							end: currentDate()
+						}, props),
+						onClick: () => {
+							const next = {
+								start: currentDate(),
+								end: currentDate()
+							};
+							replaceDraft(next);
+							updateDraft(next);
+						},
+						children: locale.startsWith("id") ? "Hari ini" : "Today"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: partClass("button button--secondary button--sm", props.classNames?.cancelButton),
+						onClick: () => changeOpen(false),
+						children: labels.cancel
+					}),
+					props.commitMode !== "immediate" && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: partClass("button button--primary button--sm", props.classNames?.applyButton),
+						disabled: isDisabled || isReadOnly || !!errorCode,
+						onClick: apply,
+						children: labels.apply
+					})
+				] })]
 			})
 		]
 	});
@@ -4299,7 +5158,7 @@ function DateRangePickerRoot(props) {
 				panel,
 				edit,
 				apply,
-				clear: () => replaceDraft(empty()),
+				clear: clearDraft,
 				cancel: () => changeOpen(false)
 			},
 			children: /* @__PURE__ */ jsxs("div", {
@@ -4369,7 +5228,17 @@ function DateRangePickerRoot(props) {
 								}),
 								/* @__PURE__ */ jsx(ChevronIcon, { className: partClass("date-range__chevron", props.classNames?.chevron) })
 							]
-						}), /* @__PURE__ */ jsx(Popover$2, {
+						}), isDialog ? /* @__PURE__ */ jsx(ModalOverlay, {
+							className: "temporal-picker__overlay",
+							children: /* @__PURE__ */ jsx(Modal, {
+								className: "date-range__panel temporal-picker__modal",
+								children: /* @__PURE__ */ jsx(Dialog$1, {
+									"aria-labelledby": `${id}-title`,
+									className: "date-range__dialog",
+									children: panel
+								})
+							})
+						}) : /* @__PURE__ */ jsx(Popover$2, {
 							className: partClass("date-range__panel", props.classNames?.panel),
 							placement: "bottom start",
 							offset: 8,
@@ -5272,6 +6141,1030 @@ function ToastRenderer({ composed = false, style, classNames, entry, indicator,
 	});
 }
 //#endregion
-export { Alert, AlertActions, AlertContent, AlertDescription, AlertIndicator, AlertTitle, Badge, Breadcrumb, BreadcrumbCurrent, BreadcrumbItemPart, BreadcrumbLink, BreadcrumbList, BreadcrumbRoot, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, Card, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardRoot, CardTitle, CardTitleRow, Chart, ChartDescription, ChartPlot, ChartRoot, ChartTitle, Checkbox, Combobox, DataTable, DataTableColumn as DataTableColumnPart, DataTableEmpty, DataTableError, DataTableRoot, DataTableSortButton, DataTableStatus, DateRangePicker, Description, Dialog, DialogBackdrop as DialogBackdropPart, DialogCloseButton, DialogContent, DialogPanel, DialogRoot, DialogTriggerPart, DropdownHeading, DropdownItem, DropdownItemIndicator, DropdownList, DropdownMenu, DropdownPopover, DropdownRoot, DropdownSection, DropdownSeparator, DropdownSubmenuIndicator, DropdownSubmenuTrigger, DropdownTrigger, Empty, EmptyActions, EmptyDescription, EmptyRoot, EmptyTitle, Field, FieldError, Form, Header, Input, Label, ListBox, Listbox, NumberField, OverlayBody, OverlayDescription, OverlayFooter, OverlayHeader, OverlayHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPageButton, PaginationPrevious, PaginationRoot, PaginationSummary, Popover, PopoverCloseButton, PopoverContent, PopoverDialog, PopoverTrigger, RadioGroup, Select, SelectGroup, Separator, Sidebar, SidebarHeader, SidebarItem, SidebarLink, SidebarList, SidebarNavigation, SidebarRoot, SidebarTitle, SidebarToggle, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableColumn, TableFooter, TableHeader, TableRoot, TableRow, TableScrollContainer, Tabs, TabsIndicator, TabsList, TabsListContainer, TabsPanel, TabsRoot, TabsSeparator, TabsTab, Textarea, Toast, ToastActionButton, ToastActions, ToastBody, ToastCloseButton, ToastDescription, ToastIndicator, ToastProgress, ToastProvider, ToastRoot, ToastTitle, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, TooltipContent, TooltipRoot, TooltipTriggerPart, createDateRangePresets, createToastManager, rangeText as formatDateRange, useToast };
+//#region src/temporal-model.ts
+/** Wall time is resolved explicitly; DST gaps/overlaps reject by default. */
+function toZonedValue(value, timeZone = "UTC", disambiguation = "reject") {
+	return toZoned(parseDateTime(value), timeZone, disambiguation).toString();
+}
+function toLocalValue(value, timeZone = "UTC", seconds = false) {
+	if (!value) return "";
+	const zoned = value.includes("[") ? parseZonedDateTime(value) : parseAbsolute(value, timeZone);
+	const display = parseAbsolute(zoned.toAbsoluteString(), timeZone);
+	return toCalendarDateTime(display).toString().slice(0, seconds ? 19 : 16);
+}
+function orderedValue(value, kind) {
+	if (kind === "datetime") return (value.includes("[") ? parseZonedDateTime(value) : parseAbsolute(value, "UTC")).toDate().getTime();
+	if (kind === "time") {
+		const t = parseTime(value);
+		return t.hour * 3600 + t.minute * 60 + t.second;
+	}
+	return parseDate(value).toDate("UTC").getTime();
+}
+function step(value) {
+	if (value !== void 0 && (!Number.isInteger(value) || value <= 0)) throw new RangeError("Time steps must be positive integers.");
+	return value ?? 1;
+}
+function temporalError(value, options) {
+	if (!value) return options.isRequired ? "required" : null;
+	let date = "", time = "";
+	try {
+		if (options.kind === "date") {
+			if (!/^(?!0000)\d{4}-\d{2}-\d{2}$/.test(value) || parseDate(value).toString() !== value) return "invalid";
+			date = value;
+		} else if (options.kind === "time") {
+			if (!/^\d{2}:\d{2}(:\d{2})?$/.test(value)) return "invalid";
+			parseTime(value);
+			time = value;
+		} else {
+			orderedValue(value, "datetime");
+			const local = toLocalValue(value, options.timeZone, true);
+			date = local.slice(0, 10);
+			time = local.slice(11);
+		}
+		if (date && (options.minDate && date < options.minDate || options.maxDate && date > options.maxDate)) return "bounds";
+		if (time && (options.minTime && orderedValue(time, "time") < orderedValue(options.minTime, "time") || options.maxTime && orderedValue(time, "time") > orderedValue(options.maxTime, "time"))) return "bounds";
+		if (options.kind === "datetime" && (options.minDateTime && orderedValue(value, "datetime") < orderedValue(options.minDateTime, "datetime") || options.maxDateTime && orderedValue(value, "datetime") > orderedValue(options.maxDateTime, "datetime"))) return "bounds";
+		if (date && options.isDateUnavailable?.(date)) return "unavailable";
+		if (time && options.isTimeUnavailable?.(time)) return "unavailable";
+		if (time) {
+			const t = parseTime(time);
+			if (t.hour % step(options.hourStep) || t.minute % step(options.minuteStep) || t.second % step(options.secondStep)) return "step";
+		}
+		return null;
+	} catch {
+		return "invalid";
+	}
+}
+function temporalRangeError(value, options) {
+	if (!value || !value.start && !value.end) return options.isRequired ? "required" : null;
+	if (!value.start || !value.end) return "incomplete";
+	const error = temporalError(value.start, options) ?? temporalError(value.end, options);
+	if (error) return error;
+	if (orderedValue(value.start, options.kind) > orderedValue(value.end, options.kind)) return "order";
+	if (options.kind !== "time" && options.isDateUnavailable) {
+		const first = parseDate(options.kind === "date" ? value.start : toLocalValue(value.start, options.timeZone).slice(0, 10));
+		const last = parseDate(options.kind === "date" ? value.end : toLocalValue(value.end, options.timeZone).slice(0, 10));
+		for (let day = first.add({ days: 1 }); day.compare(last) < 0; day = day.add({ days: 1 })) if (options.isDateUnavailable(day.toString())) return "unavailable";
+	}
+	return null;
+}
+/** Project instant boundaries into the selected display zone for disabled calendar/time options. */
+function temporalDisplayBounds(options, selectedDate) {
+	let minDate = options.minDate, maxDate = options.maxDate, minTime = options.minTime, maxTime = options.maxTime;
+	if (options.kind === "datetime") try {
+		const min = options.minDateTime ? toLocalValue(options.minDateTime, options.timeZone, true) : "", max = options.maxDateTime ? toLocalValue(options.maxDateTime, options.timeZone, true) : "";
+		if (min) {
+			const day = min.slice(0, 10);
+			if (!minDate || day > minDate) minDate = day;
+			if (selectedDate === day && (!minTime || orderedValue(min.slice(11), "time") > orderedValue(minTime, "time"))) minTime = min.slice(11);
+		}
+		if (max) {
+			const day = max.slice(0, 10);
+			if (!maxDate || day < maxDate) maxDate = day;
+			if (selectedDate === day && (!maxTime || orderedValue(max.slice(11), "time") < orderedValue(maxTime, "time"))) maxTime = max.slice(11);
+		}
+	} catch {}
+	return {
+		minDate,
+		maxDate,
+		minTime,
+		maxTime
+	};
+}
+/** Minute-granularity list; seconds are edited with TimeField/TimeClock to avoid 86k DOM options. */
+function timeChoices(options) {
+	const hours = step(options.hourStep), minutes = options.granularity === "hour" ? 60 : step(options.minuteStep ?? 30);
+	const values = [];
+	for (let hour = 0; hour < 24; hour += hours) for (let minute = 0; minute < 60; minute += minutes) {
+		const value = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+		if (!temporalError(value, options)) values.push(value);
+	}
+	return values;
+}
+/** User edits zero units hidden by the configured field granularity. */
+function normalizeTime(value, granularity = "minute") {
+	const time = parseTime(value);
+	return time.set({
+		minute: granularity === "hour" ? 0 : time.minute,
+		second: granularity === "second" ? time.second : 0,
+		millisecond: 0
+	}).toString().slice(0, granularity === "second" ? 8 : 5);
+}
+function normalizeWallDateTime(value, granularity = "minute") {
+	const date = parseDateTime(value);
+	return date.toString().slice(0, 10) + "T" + normalizeTime(date.toString().slice(11), granularity);
+}
+/** Keep the selected unit and choose the nearest complete valid time for the other units. */
+function resolveTimeUnit(value, part, selected, options) {
+	let initial;
+	try {
+		initial = parseTime(value || options.minTime || "00:00");
+	} catch {
+		initial = parseTime("00:00");
+	}
+	const desired = initial.set({ [part]: selected });
+	let best = null, distance = Infinity;
+	const hours = step(options.hourStep), minutes = step(options.minuteStep), seconds = step(options.secondStep);
+	for (let hour = 0; hour < 24; hour += hours) {
+		if (part === "hour" && hour !== selected) continue;
+		for (let minute = 0; minute < 60; minute += options.granularity === "hour" ? 60 : minutes) {
+			if (part === "minute" && minute !== selected) continue;
+			for (let second = 0; second < 60; second += options.granularity === "second" ? seconds : 60) {
+				if (part === "second" && second !== selected) continue;
+				const next = normalizeTime(`${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}:${String(second).padStart(2, "0")}`, options.granularity);
+				if (temporalError(next, {
+					...options,
+					kind: "time"
+				})) continue;
+				const delta = Math.abs(orderedValue(next, "time") - (desired.hour * 3600 + desired.minute * 60 + desired.second));
+				if (delta < distance) {
+					best = next;
+					distance = delta;
+				}
+			}
+		}
+	}
+	return best;
+}
+function temporalMessages(locale = "id-ID") {
+	return locale.startsWith("id") ? {
+		invalid: "Nilai tanggal atau waktu tidak valid.",
+		required: "Nilai wajib diisi.",
+		incomplete: "Lengkapi nilai mulai dan akhir.",
+		order: "Nilai akhir harus setelah atau sama dengan nilai mulai.",
+		bounds: "Nilai berada di luar batas yang diizinkan.",
+		unavailable: "Nilai tidak tersedia.",
+		step: "Nilai tidak sesuai interval yang diizinkan."
+	} : {
+		invalid: "Invalid date or time.",
+		required: "A value is required.",
+		incomplete: "Enter both start and end values.",
+		order: "End must be on or after start.",
+		bounds: "Value is outside the allowed limits.",
+		unavailable: "Value is unavailable.",
+		step: "Value does not match the allowed interval."
+	};
+}
+//#endregion
+//#region src/TemporalField.tsx
+function parsed(value, kind, zone) {
+	try {
+		return value ? kind === "time" ? parseTime(value) : kind === "date" ? parseDate(value) : parseDateTime(toLocalValue(value, zone, true)) : null;
+	} catch {
+		return null;
+	}
+}
+function TemporalField({ kind, ...props }) {
+	const [local, setLocal] = useState(props.defaultValue ?? null), [editError, setEditError] = useState(null);
+	const value = props.value === void 0 ? local : props.value;
+	const id = useId();
+	const error = editError ?? temporalError(value, {
+		...props,
+		kind
+	});
+	useEffect(() => {
+		setEditError(null);
+	}, [value]);
+	function change(v) {
+		if (props.isDisabled || props.isReadOnly) return;
+		let next;
+		try {
+			next = v ? kind === "datetime" ? toZonedValue(normalizeWallDateTime(v.toString(), props.granularity), props.timeZone, props.disambiguation) : kind === "time" ? normalizeTime(v.toString(), props.granularity) : v.toString().slice(0, 10) : null;
+		} catch {
+			const message = temporalMessages(props.locale).invalid;
+			setEditError(message);
+			props.onError?.(message);
+			return;
+		}
+		setEditError(null);
+		setLocal(next);
+		props.onChange?.(next);
+		props.onError?.(temporalError(next, {
+			...props,
+			kind
+		}));
+	}
+	const fieldContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Label$3, {
+		className: partClass(props.hideLabel ? "temporal__sr-only" : "input__label", props.classNames?.label),
+		children: props.label
+	}), /* @__PURE__ */ jsx(DateInput, {
+		className: partClass("temporal-field__input input__control", props.classNames?.input),
+		children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
+			segment,
+			className: partClass("temporal-field__segment", props.classNames?.segment)
+		})
+	})] });
+	const shared = {
+		id: props.id ?? id,
+		isDisabled: props.isDisabled,
+		isReadOnly: props.isReadOnly,
+		isRequired: props.isRequired,
+		isInvalid: props.isInvalid || !!error,
+		validationBehavior: "aria",
+		"aria-describedby": [props.description ? `${id}-description` : void 0, props.isInvalid || error ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0
+	};
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: props.locale ?? "id-ID",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: partClass(partClass("input temporal-field", props.classNames?.root), props.className),
+			style: props.style,
+			dir: props.dir,
+			children: [
+				kind === "time" ? /* @__PURE__ */ jsx(TimeField$1, {
+					...shared,
+					value: parsed(value, kind, props.timeZone),
+					onChange: change,
+					granularity: props.granularity ?? "minute",
+					hourCycle: props.hourCycle,
+					children: fieldContent
+				}) : /* @__PURE__ */ jsx(DateField$1, {
+					...shared,
+					value: parsed(value, kind, props.timeZone),
+					onChange: change,
+					granularity: kind === "date" ? "day" : props.granularity ?? "minute",
+					hourCycle: props.hourCycle,
+					children: fieldContent
+				}),
+				props.description && /* @__PURE__ */ jsx("span", {
+					id: `${id}-description`,
+					className: partClass("input__description", props.classNames?.description),
+					children: props.description
+				}),
+				(props.isInvalid || error) && /* @__PURE__ */ jsx("span", {
+					id: `${id}-error`,
+					className: partClass("input__error", props.classNames?.error),
+					role: "alert",
+					children: props.errorMessage ?? (error && error in temporalMessages(props.locale) ? temporalMessages(props.locale)[error] : error ?? temporalMessages(props.locale).invalid)
+				}),
+				props.name && /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: props.name,
+					value: value ?? "",
+					disabled: props.isDisabled
+				}),
+				/* @__PURE__ */ jsx(SelectionValidation, {
+					hasValue: !!value && !error,
+					required: props.isRequired || !!error,
+					disabled: props.isDisabled || props.formValidation === false,
+					onInvalid: () => props.onError?.(error ?? "required"),
+					onResetStart: () => {},
+					onReset: (cancelled) => {
+						if (!cancelled && props.value === void 0) {
+							setLocal(props.defaultValue ?? null);
+							setEditError(null);
+						}
+					}
+				})
+			]
+		})
+	});
+}
+function DateField(props) {
+	return /* @__PURE__ */ jsx(TemporalField, {
+		...props,
+		kind: "date"
+	});
+}
+function TimeField(props) {
+	return /* @__PURE__ */ jsx(TemporalField, {
+		...props,
+		kind: "time"
+	});
+}
+function DateTimeField(props) {
+	return /* @__PURE__ */ jsx(TemporalField, {
+		...props,
+		kind: "datetime"
+	});
+}
+function TemporalRangeField({ kind, ...props }) {
+	const groupId = useId();
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const value = props.value === void 0 ? local : props.value;
+	const error = temporalRangeError(value, {
+		...props,
+		kind
+	});
+	const fields = /* @__PURE__ */ jsx("div", {
+		className: "temporal-picker__fields",
+		children: ["start", "end"].map((part) => /* @__PURE__ */ createElement(TemporalField, {
+			...props,
+			id: props.id ? `${props.id}-${part}` : void 0,
+			className: void 0,
+			style: void 0,
+			classNames: {
+				...props.classNames,
+				root: void 0
+			},
+			kind,
+			key: part,
+			value: value?.[part] ?? null,
+			defaultValue: void 0,
+			formValidation: false,
+			name: props.name ? `${props.name}.${part}` : void 0,
+			label: `${props.label} ${part === "start" ? props.locale?.startsWith("id") ? "Mulai" : "Start" : props.locale?.startsWith("id") ? "Akhir" : "End"}`,
+			onChange: (next) => {
+				const result = {
+					...value ?? {
+						start: "",
+						end: ""
+					},
+					[part]: next ?? ""
+				};
+				setLocal(result);
+				props.onChange?.(result);
+			}
+		}))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id: props.id ?? groupId,
+		role: "group",
+		"aria-label": props.label,
+		"aria-describedby": error ? `${groupId}-error` : void 0,
+		className: partClass(partClass("temporal-range-field", props.classNames?.root), props.className),
+		style: props.style,
+		children: [
+			fields,
+			error && /* @__PURE__ */ jsx("span", {
+				id: `${groupId}-error`,
+				role: "alert",
+				className: "input__error",
+				children: props.errorMessage ?? temporalMessages(props.locale)[error]
+			}),
+			/* @__PURE__ */ jsx(SelectionValidation, {
+				hasValue: !!value && !error,
+				required: props.isRequired || !!error,
+				disabled: props.isDisabled || props.formValidation === false,
+				onInvalid: () => props.onError?.(error ?? "required"),
+				onResetStart: () => {},
+				onReset: (cancelled) => {
+					if (!cancelled && props.value === void 0) setLocal(props.defaultValue ?? null);
+				}
+			})
+		]
+	});
+}
+function DateRangeField(props) {
+	return /* @__PURE__ */ jsx(TemporalRangeField, {
+		...props,
+		kind: "date"
+	});
+}
+function TimeRangeField(props) {
+	return /* @__PURE__ */ jsx(TemporalRangeField, {
+		...props,
+		kind: "time"
+	});
+}
+function DateTimeRangeField(props) {
+	return /* @__PURE__ */ jsx(TemporalRangeField, {
+		...props,
+		kind: "datetime"
+	});
+}
+//#endregion
+//#region src/TimeControls.tsx
+function format(value, locale, hourCycle) {
+	const time = parseTime(value);
+	const date = new Date(Date.UTC(2e3, 0, 1, time.hour, time.minute, time.second));
+	return new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: hourCycle === 12 ? "h12" : "h23",
+		timeZone: "UTC"
+	}).format(date);
+}
+function TimeList({ value, defaultValue, onChange, label = "Time", locale = "id-ID", hourCycle, isDisabled, isReadOnly, className, minTime, maxTime, hourStep, minuteStep, secondStep, granularity, isTimeUnavailable, ...props }) {
+	const [local, setLocal] = useState(defaultValue ?? "");
+	const actual = value === void 0 ? local : value ?? "";
+	const options = {
+		kind: "time",
+		minTime,
+		maxTime,
+		hourStep,
+		minuteStep,
+		secondStep,
+		granularity,
+		isTimeUnavailable
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("time-list", className),
+		children: /* @__PURE__ */ jsxs("select", {
+			"aria-label": label,
+			size: 6,
+			value: actual,
+			disabled: isDisabled,
+			"aria-readonly": isReadOnly || void 0,
+			onChange: (event) => {
+				if (isReadOnly) {
+					event.currentTarget.value = actual;
+					return;
+				}
+				setLocal(event.target.value);
+				onChange?.(event.target.value);
+			},
+			children: [/* @__PURE__ */ jsx("option", {
+				value: "",
+				disabled: true,
+				children: locale.startsWith("id") ? "Pilih waktu" : "Choose time"
+			}), timeChoices(options).map((time) => /* @__PURE__ */ jsx("option", {
+				value: time,
+				children: format(time, locale, hourCycle)
+			}, time))]
+		})
+	});
+}
+function TimeClock({ value, defaultValue, onChange, label = "Time", locale = "id-ID", hourCycle = 24, isDisabled, isReadOnly, className, minTime, maxTime, hourStep = 1, minuteStep = 1, secondStep = 1, granularity = "minute", isTimeUnavailable, ...props }) {
+	const [local, setLocal] = useState(defaultValue ?? minTime ?? "00:00");
+	const actual = value === void 0 ? local : value || minTime || "00:00";
+	let time;
+	try {
+		time = parseTime(actual);
+	} catch {
+		time = parseTime("00:00");
+	}
+	const id = locale.startsWith("id");
+	const parts = granularity === "hour" ? ["hour"] : granularity === "second" ? [
+		"hour",
+		"minute",
+		"second"
+	] : ["hour", "minute"];
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "group",
+		"aria-label": label,
+		className: partClass("time-clock", className),
+		children: parts.map((part) => {
+			const step = part === "hour" ? hourStep : part === "minute" ? minuteStep : secondStep;
+			const count = part === "hour" ? 24 : 60;
+			const values = Array.from({ length: Math.ceil(count / Math.max(1, step)) }, (_, i) => i * Math.max(1, step)).filter((n) => n < count);
+			return /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: part === "hour" ? id ? "Jam" : "Hours" : part === "minute" ? id ? "Menit" : "Minutes" : id ? "Detik" : "Seconds" }), /* @__PURE__ */ jsx("select", {
+				value: time[part],
+				disabled: isDisabled,
+				"aria-readonly": isReadOnly || void 0,
+				onChange: (event) => {
+					if (isReadOnly) {
+						event.currentTarget.value = String(time[part]);
+						return;
+					}
+					const next = resolveTimeUnit(time.toString(), part, Number(event.target.value), {
+						kind: "time",
+						minTime,
+						maxTime,
+						hourStep,
+						minuteStep,
+						secondStep,
+						granularity,
+						isTimeUnavailable
+					});
+					if (!next) return;
+					setLocal(next);
+					onChange?.(next);
+				},
+				children: values.map((n) => /* @__PURE__ */ jsx("option", {
+					value: n,
+					children: part === "hour" && hourCycle === 12 ? `${n % 12 || 12} ${n < 12 ? "AM" : "PM"}` : String(n).padStart(2, "0")
+				}, n))
+			})] }, part);
+		})
+	});
+}
+//#endregion
+//#region src/TemporalPicker.tsx
+var PickerContext = createContext(null);
+function usePicker() {
+	const context = useContext(PickerContext);
+	if (!context) throw new Error("Picker parts must be inside their picker Root.");
+	return context;
+}
+function labels(locale = "id-ID") {
+	return locale.startsWith("id") ? {
+		apply: "Terapkan",
+		cancel: "Batal",
+		clear: "Kosongkan",
+		today: "Hari ini",
+		now: "Sekarang",
+		start: "Mulai",
+		end: "Akhir",
+		choose: "Pilih tanggal atau waktu"
+	} : {
+		apply: "Apply",
+		cancel: "Cancel",
+		clear: "Clear",
+		today: "Today",
+		now: "Now",
+		start: "Start",
+		end: "End",
+		choose: "Choose date or time"
+	};
+}
+function localValue(value, kind, options) {
+	try {
+		return kind === "datetime" ? toLocalValue(value, options.timeZone, options.granularity === "second") : value;
+	} catch {
+		return "";
+	}
+}
+function datePart(value, kind, options) {
+	return localValue(value, kind, options).slice(0, 10);
+}
+function combineDate(date, time, options) {
+	try {
+		return toZonedValue(`${date}T${time || "00:00"}`, options.timeZone, options.disambiguation);
+	} catch {
+		return "";
+	}
+}
+function displayText(value, kind, options) {
+	if (!value) return labels(options.locale).choose;
+	if (options.formatValue) return options.formatValue(value, options.locale ?? "id-ID");
+	const one = (v) => {
+		if (!v) return "—";
+		try {
+			if (kind === "time") return new Intl.DateTimeFormat(options.locale ?? "id-ID", {
+				hour: "2-digit",
+				minute: "2-digit",
+				second: options.granularity === "second" ? "2-digit" : void 0,
+				hourCycle: options.hourCycle === 12 ? "h12" : "h23",
+				timeZone: "UTC"
+			}).format(/* @__PURE__ */ new Date(`2000-01-01T${v}Z`));
+			if (kind === "date") return new Intl.DateTimeFormat(options.locale ?? "id-ID", {
+				day: "numeric",
+				month: "short",
+				year: "numeric",
+				timeZone: "UTC"
+			}).format(/* @__PURE__ */ new Date(`${v}T12:00:00Z`));
+			return `${localValue(v, kind, options).replace("T", " ")} ${options.timeZone ?? "UTC"}`;
+		} catch {
+			return v;
+		}
+	};
+	return typeof value === "string" ? one(value) : `${one(value.start)} – ${one(value.end)}`;
+}
+function TemporalPickerField({ part = "start", ...props }) {
+	const context = usePicker(), o = context.options, l = labels(o.locale);
+	const Field = context.kind === "date" ? DateField : context.kind === "time" ? TimeField : DateTimeField;
+	const value = typeof context.draft === "string" ? context.draft : context.draft?.[part] ?? null;
+	return /* @__PURE__ */ jsx(Field, {
+		...o,
+		...props,
+		className: partClass(o.classNames?.field ?? "", props.className),
+		style: props.style,
+		classNames: void 0,
+		label: props.label ?? (context.range ? `${o.label} ${l[part]}` : o.label),
+		value,
+		name: void 0,
+		formValidation: false,
+		isRequired: false,
+		onError: (error) => context.inputError(part, error),
+		onChange: (next) => context.edit(context.range ? {
+			...typeof context.draft === "object" && context.draft ? context.draft : {
+				start: "",
+				end: ""
+			},
+			[part]: next ?? ""
+		} : next, part)
+	});
+}
+function TemporalPickerCalendar(props) {
+	const c = usePicker(), o = c.options;
+	const selected = typeof c.draft === "string" ? c.draft : "";
+	const onSingle = (value) => {
+		if (c.kind === "date") c.edit(value);
+		else {
+			const next = value ? combineDate(value, localValue(selected, c.kind, o).slice(11), o) : null;
+			if (value && !next) {
+				c.inputError("date", "invalid");
+				return;
+			}
+			c.edit(next);
+		}
+	};
+	const bounds = temporalDisplayBounds({
+		...o,
+		kind: c.kind
+	});
+	const range = typeof c.draft === "object" && c.draft ? c.draft : {
+		start: "",
+		end: ""
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("temporal-picker__calendar", props.className),
+		children: c.kind !== "time" && (c.range ? /* @__PURE__ */ jsx(RangeCalendar, {
+			...o,
+			minDate: bounds.minDate,
+			maxDate: bounds.maxDate,
+			style: void 0,
+			className: void 0,
+			classNames: void 0,
+			value: {
+				start: datePart(range.start, c.kind, o),
+				end: datePart(range.end, c.kind, o)
+			},
+			onChange: (v) => {
+				if (!v || c.kind === "date") {
+					c.edit(v);
+					return;
+				}
+				const start = v.start ? combineDate(v.start, localValue(range.start, c.kind, o).slice(11), o) : "", end = v.end ? combineDate(v.end, localValue(range.end, c.kind, o).slice(11), o) : "";
+				if (v.start && !start || v.end && !end) {
+					c.inputError("date", "invalid");
+					return;
+				}
+				c.edit({
+					start,
+					end
+				});
+			}
+		}) : /* @__PURE__ */ jsx(Calendar, {
+			...o,
+			minDate: bounds.minDate,
+			maxDate: bounds.maxDate,
+			style: void 0,
+			className: void 0,
+			classNames: void 0,
+			value: datePart(selected, c.kind, o),
+			onChange: onSingle
+		}))
+	});
+}
+function TemporalPickerTime({ part = "start", ...props }) {
+	const c = usePicker(), o = c.options, l = labels(o.locale);
+	const wall = localValue(typeof c.draft === "string" ? c.draft : c.draft?.[part] ?? "", c.kind, o);
+	const time = c.kind === "time" ? wall : wall.slice(11);
+	const bounds = temporalDisplayBounds({
+		...o,
+		kind: c.kind
+	}, wall.slice(0, 10));
+	const Control = o.timePresentation === "clock" ? TimeClock : TimeList;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("temporal-picker__time", props.className),
+		children: /* @__PURE__ */ jsx(Control, {
+			locale: o.locale,
+			hourCycle: o.hourCycle,
+			minTime: bounds.minTime,
+			maxTime: bounds.maxTime,
+			hourStep: o.hourStep,
+			minuteStep: o.minuteStep,
+			secondStep: o.secondStep,
+			granularity: o.granularity,
+			isTimeUnavailable: o.isTimeUnavailable,
+			isDisabled: o.isDisabled,
+			isReadOnly: o.isReadOnly,
+			label: c.range ? `${o.label} ${l[part]}` : o.label,
+			value: time,
+			onChange: (next) => {
+				const result = c.kind === "time" ? next : combineDate(wall.slice(0, 10) || o.referenceDate || today(o.timeZone ?? "UTC").toString(), next, o);
+				if (!result) {
+					c.inputError(part, "invalid");
+					return;
+				}
+				c.edit(c.range ? {
+					...typeof c.draft === "object" && c.draft ? c.draft : {
+						start: "",
+						end: ""
+					},
+					[part]: result
+				} : result, part);
+			}
+		})
+	});
+}
+function TemporalPickerValue({ children, className, ...props }) {
+	const c = usePicker();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		id: `${c.id}-value`,
+		className: partClass("date-range__value", className),
+		children: children ?? c.text
+	});
+}
+function TemporalPickerTrigger({ children, className, ...props }) {
+	const c = usePicker();
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		isDisabled: c.options.isDisabled,
+		className: partClass("date-range__trigger", className),
+		"aria-labelledby": `${c.id}-label ${c.id}-value`,
+		"aria-invalid": c.invalid || void 0,
+		"aria-describedby": c.describedBy,
+		children: children ?? /* @__PURE__ */ jsx(TemporalPickerValue, {})
+	});
+}
+function TemporalPickerContent({ children, className, ...props }) {
+	const c = usePicker();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		children: children ?? c.panel
+	});
+}
+function TemporalPickerPopover({ children, className, ...props }) {
+	const c = usePicker();
+	return /* @__PURE__ */ jsx(Popover$2, {
+		className: partClass("date-range__panel temporal-picker__panel", className),
+		placement: "bottom start",
+		offset: 8,
+		children: /* @__PURE__ */ jsx(Dialog$1, {
+			"aria-labelledby": `${c.id}-label`,
+			className: "date-range__dialog",
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				children: children ?? c.panel
+			})
+		})
+	});
+}
+function action(type) {
+	return function PickerAction({ children, className, onClick, ...props }) {
+		const c = usePicker();
+		return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			...props,
+			className: partClass(`button button--${type === "apply" ? "primary" : "ghost"} button--sm`, className),
+			disabled: props.disabled || type !== "cancel" && (c.options.isDisabled || c.options.isReadOnly) || type === "apply" && !!c.error,
+			onClick: (e) => {
+				onClick?.(e);
+				if (!e.defaultPrevented) c[type]();
+			},
+			children: children ?? labels(c.options.locale)[type]
+		});
+	};
+}
+var TemporalPickerApplyButton = /* @__PURE__ */ action("apply");
+var TemporalPickerCancelButton = /* @__PURE__ */ action("cancel");
+var TemporalPickerClearButton = /* @__PURE__ */ action("clear");
+function Root({ kind, range, ...props }) {
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const committed = props.value === void 0 ? local : props.value;
+	const [draft, setDraft] = useState(committed), [inputErrors, setInputErrors] = useState({}), [formError, setFormError] = useState(false), [mobile, setMobile] = useState(false);
+	const id = useId(), trigger = useRef(null);
+	const disclosure = useDisclosure(props.open, props.defaultOpen, props.onOpenChange);
+	const l = labels(props.locale);
+	const committedKey = JSON.stringify(committed), lastCommitted = useRef(committedKey);
+	useEffect(() => {
+		if (lastCommitted.current === committedKey) return;
+		lastCommitted.current = committedKey;
+		setDraft(committed);
+		setInputErrors({});
+	}, [committed, committedKey]);
+	useEffect(() => {
+		const media = window.matchMedia("(max-width: 640px)");
+		const update = () => setMobile(media.matches);
+		update();
+		media.addEventListener("change", update);
+		return () => media.removeEventListener("change", update);
+	}, []);
+	const constraints = {
+		...props,
+		kind
+	};
+	const validate = (value) => range ? temporalRangeError(typeof value === "object" ? value : null, constraints) : temporalError(typeof value === "string" ? value : null, constraints);
+	const code = Object.values(inputErrors).find(Boolean) ?? validate(draft);
+	const error = code ? code in temporalMessages(props.locale) ? temporalMessages(props.locale)[code] : code : null;
+	const committedError = validate(committed);
+	const errorCallback = useRef(props.onError);
+	useEffect(() => {
+		errorCallback.current = props.onError;
+	}, [props.onError]);
+	useEffect(() => {
+		errorCallback.current?.(error);
+	}, [error]);
+	function changeOpen(next) {
+		if (props.isDisabled && next) return;
+		setDraft(committed);
+		setInputErrors({});
+		disclosure.change(next);
+	}
+	function commit(value, close) {
+		if (props.isDisabled || props.isReadOnly || validate(value)) return;
+		setLocal(value);
+		setFormError(false);
+		props.onChange?.(value);
+		if (close) {
+			props.onApply?.(value);
+			disclosure.change(false);
+		}
+	}
+	function edit(value, part) {
+		if (props.isDisabled || props.isReadOnly) return;
+		setDraft(value);
+		const remaining = part ? {
+			...inputErrors,
+			[part]: null
+		} : {};
+		setInputErrors(remaining);
+		if (props.commitMode === "immediate" && !Object.values(remaining).some(Boolean)) commit(value, false);
+	}
+	function clear() {
+		if (props.isDisabled || props.isReadOnly) return;
+		setDraft(null);
+		setInputErrors({});
+		if (props.commitMode === "immediate") {
+			setLocal(null);
+			props.onChange?.(null);
+		}
+	}
+	const context = {
+		options: props,
+		kind,
+		range,
+		draft,
+		error,
+		id,
+		invalid: props.isInvalid || !!committedError || formError,
+		describedBy: [props.description ? `${id}-description` : void 0, props.isInvalid || committedError || formError ? `${id}-error` : void 0].filter(Boolean).join(" ") || void 0,
+		text: displayText(committed, kind, props),
+		edit,
+		inputError: (part, error) => setInputErrors((current) => current[part] === error ? current : {
+			...current,
+			[part]: error
+		}),
+		apply: () => {
+			if (!error) commit(draft, true);
+		},
+		cancel: () => changeOpen(false),
+		clear,
+		panel: null
+	};
+	const current = kind === "date" ? today(props.timeZone ?? "UTC").toString() : kind === "time" ? now(props.timeZone ?? "UTC").toString().slice(11, props.granularity === "second" ? 19 : 16) : now(props.timeZone ?? "UTC").toString();
+	const panel = /* @__PURE__ */ jsxs("div", {
+		className: partClass("temporal-picker__content", props.classNames?.content),
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "temporal-picker__title",
+				children: props.label
+			}),
+			!!props.presets?.length && /* @__PURE__ */ jsx("div", {
+				className: "temporal-picker__presets",
+				children: props.presets.map((p) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: partClass("date-range__preset", props.classNames?.preset),
+					disabled: props.isDisabled || props.isReadOnly || !!validate(p.value),
+					onClick: () => edit(p.value),
+					children: p.label
+				}, p.id))
+			}),
+			props.showInputs !== false && /* @__PURE__ */ jsxs("div", {
+				className: "temporal-picker__fields",
+				children: [/* @__PURE__ */ jsx(TemporalPickerField, {}), range && /* @__PURE__ */ jsx(TemporalPickerField, { part: "end" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "temporal-picker__views",
+				children: [
+					kind !== "time" && /* @__PURE__ */ jsx(TemporalPickerCalendar, { className: props.classNames?.calendar }),
+					" ",
+					kind !== "date" && /* @__PURE__ */ jsxs("div", {
+						className: "temporal-picker__times",
+						children: [/* @__PURE__ */ jsx(TemporalPickerTime, { className: props.classNames?.time }), range && /* @__PURE__ */ jsx(TemporalPickerTime, {
+							part: "end",
+							className: props.classNames?.time
+						})]
+					})
+				]
+			}),
+			error && /* @__PURE__ */ jsx("span", {
+				className: "input__error",
+				role: "alert",
+				children: error
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "button button--ghost button--sm",
+				disabled: props.isDisabled || props.isReadOnly || !!temporalError(current, constraints),
+				onClick: () => edit(range ? {
+					start: current,
+					end: current
+				} : current),
+				children: kind === "date" ? l.today : l.now
+			}),
+			props.showActions !== false && /* @__PURE__ */ jsxs("footer", {
+				className: partClass("date-range__footer", props.classNames?.footer),
+				children: [/* @__PURE__ */ jsx(TemporalPickerClearButton, { className: props.classNames?.clearButton }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(TemporalPickerCancelButton, { className: props.classNames?.cancelButton }), props.commitMode !== "immediate" && /* @__PURE__ */ jsx(TemporalPickerApplyButton, { className: props.classNames?.applyButton })] })]
+			})
+		]
+	});
+	context.panel = panel;
+	const dialog = props.display === "dialog" || props.display !== "inline" && props.display !== "popover" && mobile;
+	return /* @__PURE__ */ jsx(PickerContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: partClass(partClass(`date-range temporal-picker date-range--${props.size ?? "md"}`, props.classNames?.root), props.className),
+			style: props.style,
+			dir: props.dir,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					id: `${id}-label`,
+					className: partClass(props.hideLabel ? "temporal__sr-only" : "date-range__label", props.classNames?.label),
+					children: props.label
+				}),
+				props.display === "inline" ? /* @__PURE__ */ jsx("section", {
+					className: partClass("date-range__panel date-range__inline", props.classNames?.panel),
+					"aria-labelledby": `${id}-label`,
+					children: props.children ?? panel
+				}) : /* @__PURE__ */ jsx(DialogTrigger, {
+					isOpen: disclosure.visible && !props.isDisabled,
+					onOpenChange: changeOpen,
+					children: props.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button$1, {
+						ref: trigger,
+						className: partClass("date-range__trigger", props.classNames?.trigger),
+						isDisabled: props.isDisabled,
+						"aria-labelledby": `${id}-label ${id}-value`,
+						"aria-invalid": context.invalid || void 0,
+						"aria-describedby": context.describedBy,
+						children: /* @__PURE__ */ jsx(TemporalPickerValue, { className: props.classNames?.value })
+					}), dialog ? /* @__PURE__ */ jsx(ModalOverlay, {
+						className: "temporal-picker__overlay",
+						children: /* @__PURE__ */ jsx(Modal, {
+							className: "date-range__panel temporal-picker__modal",
+							children: /* @__PURE__ */ jsx(Dialog$1, {
+								"aria-labelledby": `${id}-label`,
+								children: panel
+							})
+						})
+					}) : /* @__PURE__ */ jsx(TemporalPickerPopover, { className: props.classNames?.panel })] })
+				}),
+				props.description && /* @__PURE__ */ jsx("span", {
+					id: `${id}-description`,
+					className: partClass("input__description", props.classNames?.description),
+					children: props.description
+				}),
+				(props.isInvalid || committedError || formError) && /* @__PURE__ */ jsx("span", {
+					id: `${id}-error`,
+					role: "alert",
+					className: partClass("input__error", props.classNames?.error),
+					children: props.errorMessage ?? temporalMessages(props.locale)[committedError ?? (props.isInvalid ? "invalid" : "required")]
+				}),
+				props.name && (range ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: `${props.name}.start`,
+					value: typeof committed === "object" && committed ? committed.start : "",
+					disabled: props.isDisabled
+				}), /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: `${props.name}.end`,
+					value: typeof committed === "object" && committed ? committed.end : "",
+					disabled: props.isDisabled
+				})] }) : /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: props.name,
+					value: typeof committed === "string" ? committed : "",
+					disabled: props.isDisabled
+				})),
+				/* @__PURE__ */ jsx(SelectionValidation, {
+					hasValue: !!committed && !committedError,
+					required: props.isRequired || !!committedError,
+					disabled: props.isDisabled,
+					onInvalid: () => {
+						setFormError(true);
+						trigger.current?.focus();
+					},
+					onResetStart: () => {},
+					onReset: (cancelled) => {
+						if (!cancelled) {
+							if (props.value === void 0) setLocal(props.defaultValue ?? null);
+							setDraft(props.value === void 0 ? props.defaultValue ?? null : committed);
+							setInputErrors({});
+							setFormError(false);
+							disclosure.change(false);
+						}
+					}
+				})
+			]
+		})
+	});
+}
+function picker(kind, range) {
+	const Component = (props) => /* @__PURE__ */ jsx(Root, {
+		...props,
+		kind,
+		range
+	});
+	return Object.assign(Component, {
+		Root: Component,
+		Trigger: TemporalPickerTrigger,
+		Value: TemporalPickerValue,
+		Popover: TemporalPickerPopover,
+		Content: TemporalPickerContent,
+		Field: TemporalPickerField,
+		Calendar: TemporalPickerCalendar,
+		Time: TemporalPickerTime,
+		MonthPicker,
+		YearPicker,
+		ApplyButton: TemporalPickerApplyButton,
+		CancelButton: TemporalPickerCancelButton,
+		ClearButton: TemporalPickerClearButton
+	});
+}
+var DatePicker = /* @__PURE__ */ picker("date", false);
+var TimePicker = /* @__PURE__ */ picker("time", false);
+var TimeRangePicker = /* @__PURE__ */ picker("time", true);
+var DateTimePicker = /* @__PURE__ */ picker("datetime", false);
+var DateTimeRangePicker = /* @__PURE__ */ picker("datetime", true);
+//#endregion
+export { Alert, AlertActions, AlertContent, AlertDescription, AlertIndicator, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarGroupRoot, AvatarImage, AvatarRoot, Badge, Breadcrumb, BreadcrumbCurrent, BreadcrumbItemPart, BreadcrumbLink, BreadcrumbList, BreadcrumbRoot, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardRoot, CardTitle, CardTitleRow, Chart, ChartDescription, ChartPlot, ChartRoot, ChartTitle, Checkbox, Combobox, DataTable, DataTableColumn as DataTableColumnPart, DataTableEmpty, DataTableError, DataTableRoot, DataTableSortButton, DataTableStatus, DateField, DatePicker, DateRangeField, DateRangePicker, DateTimeField, DateTimePicker, DateTimeRangeField, DateTimeRangePicker, Description, Dialog, DialogBackdrop as DialogBackdropPart, DialogCloseButton, DialogContent, DialogPanel, DialogRoot, DialogTriggerPart, DropdownHeading, DropdownItem, DropdownItemIndicator, DropdownList, DropdownMenu, DropdownPopover, DropdownRoot, DropdownSection, DropdownSeparator, DropdownSubmenuIndicator, DropdownSubmenuTrigger, DropdownTrigger, Empty, EmptyActions, EmptyDescription, EmptyRoot, EmptyTitle, Field, FieldError, Form, Header, Input, InputClearButton, Label, ListBox, Listbox, MonthPicker, MonthYearNavigation, NumberField, OverlayBody, OverlayDescription, OverlayFooter, OverlayHeader, OverlayHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPageButton, PaginationPrevious, PaginationRoot, PaginationSummary, Popover, PopoverCloseButton, PopoverContent, PopoverDialog, PopoverTrigger, RadioGroup, RangeCalendar, Select, SelectGroup, Separator, Sidebar, SidebarHeader, SidebarItem, SidebarLink, SidebarList, SidebarNavigation, SidebarRoot, SidebarTitle, SidebarToggle, Skeleton, Spinner, Switch, SwitchGroup, Table, TableBody, TableCaption, TableCell, TableColumn, TableFooter, TableHeader, TableRoot, TableRow, TableScrollContainer, Tabs, TabsIndicator, TabsList, TabsListContainer, TabsPanel, TabsRoot, TabsSeparator, TabsTab, Textarea, TimeClock, TimeField, TimeList, TimePicker, TimeRangeField, TimeRangePicker, Toast, ToastActionButton, ToastActions, ToastBody, ToastCloseButton, ToastDescription, ToastIndicator, ToastProgress, ToastProvider, ToastRoot, ToastTitle, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, TooltipContent, TooltipRoot, TooltipTriggerPart, YearPicker, createDateRangePresets, createToastManager, rangeText as formatDateRange, useToast };
 
 //# sourceMappingURL=index.js.map