@kazee-ds/react 0.0.0-stage → 0.4.0

package/dist/index.js

@@ -0,0 +1,2736 @@
+"use client";
+import { Button as Button$1, ButtonContext } from "react-aria-components/Button";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { ProgressBarContext } from "react-aria-components/ProgressBar";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleButton as ToggleButton$1 } from "react-aria-components/ToggleButton";
+import { ToggleButtonGroup as ToggleButtonGroup$1 } from "react-aria-components/ToggleButtonGroup";
+import { I18nProvider, useLocale } from "react-aria-components/I18nProvider";
+import { Button as Button$2, Label as Label$1, ListBox, ListBoxItem, Popover as Popover$1, Select as Select$1, SelectValue } from "react-aria-components/Select";
+import { FieldError, Input as Input$1, Label as Label$2, Text, TextArea, TextField } from "react-aria-components/TextField";
+import { Label as Label$3 } from "react-aria-components/Label";
+import { Checkbox as Checkbox$1 } from "react-aria-components/Checkbox";
+import { Label as Label$4, Radio, RadioGroup as RadioGroup$1 } from "react-aria-components/RadioGroup";
+import { FieldError as FieldError$1, SwitchButton, SwitchField, Text as Text$1 } from "react-aria-components/Switch";
+import { ListBox as ListBox$1, ListBoxItem as ListBoxItem$1 } from "react-aria-components/ListBox";
+import { Button as Button$3, FieldError as FieldError$2, Group, Input as Input$2, Label as Label$5, NumberField as NumberField$1, Text as Text$2 } from "react-aria-components/NumberField";
+import { Tab, TabList, TabPanel, Tabs as Tabs$1 } from "react-aria-components/Tabs";
+import { Dialog as Dialog$1, DialogTrigger, Heading } from "react-aria-components/Dialog";
+import { Modal, ModalOverlay } from "react-aria-components/Modal";
+import { Menu, MenuItem, MenuSection, MenuTrigger, SubmenuTrigger } from "react-aria-components/Menu";
+import { Header } from "react-aria-components/Header";
+import { Separator as Separator$1 } from "react-aria-components/Separator";
+import { Popover as Popover$2 } from "react-aria-components/Popover";
+import { Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components/Tooltip";
+import { Button as Button$4, ComboBox, Input as Input$3, Label as Label$6, ListBox as ListBox$2, 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";
+//#region src/Button.tsx
+function PendingLabelAnchor() {
+	const context = useContext(ProgressBarContext);
+	const id = context && "id" in context ? context.id : void 0;
+	return id ? /* @__PURE__ */ jsx("span", {
+		id,
+		hidden: true,
+		"aria-hidden": "true"
+	}) : null;
+}
+function Button({ variant = "primary", size = "md", isIconOnly = false, isPending = false, isDisabled = false, fullWidth = false, type = "button", children, ...props }) {
+	const className = [
+		"button",
+		`button--${variant}`,
+		size !== "md" && `button--${size}`,
+		isIconOnly && "button--icon-only",
+		fullWidth && !isIconOnly && "button--full-width"
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		type: isPending ? "button" : type,
+		className,
+		isDisabled,
+		isPending,
+		children: (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [typeof children === "function" ? children({
+			isPending: state.isPending,
+			isDisabled: state.isDisabled,
+			isHovered: state.isHovered,
+			isPressed: state.isPressed,
+			isFocused: state.isFocused,
+			isFocusVisible: state.isFocusVisible
+		}) : children, isPending && /* @__PURE__ */ jsx(PendingLabelAnchor, {})] })
+	});
+}
+//#endregion
+//#region src/ButtonGroup.tsx
+function ButtonGroupSeparator() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-group__separator",
+		"aria-hidden": "true"
+	});
+}
+function Root$1({ children, label, variant, size, isDisabled, fullWidth, orientation = "horizontal", dir }) {
+	function defaults(nodes) {
+		return Children.map(nodes, (child) => {
+			if (!isValidElement(child)) return child;
+			if (child.type === Fragment) return cloneElement(child, {}, defaults(child.props.children));
+			if (child.type !== Button) return child;
+			const button = child;
+			return cloneElement(button, {
+				variant: button.props.variant ?? variant,
+				size: button.props.size ?? size,
+				isDisabled: button.props.isDisabled ?? isDisabled
+			});
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		dir,
+		"data-orientation": orientation,
+		className: `button-group${fullWidth ? " button-group--full-width" : ""}`,
+		children: defaults(children)
+	});
+}
+var ButtonGroup = /* @__PURE__ */ Object.assign(Root$1, { Separator: ButtonGroupSeparator });
+//#endregion
+//#region src/ToggleButton.tsx
+var ToggleButtonSizeContext = createContext("md");
+function ToggleButton({ children, variant = "default", size, isIconOnly, ...props }) {
+	const inheritedSize = useContext(ToggleButtonSizeContext);
+	const resolvedSize = size ?? inheritedSize;
+	return /* @__PURE__ */ jsx(ToggleButton$1, {
+		...props,
+		className: [
+			"button",
+			"toggle-button",
+			`toggle-button--${variant}`,
+			resolvedSize !== "md" && `button--${resolvedSize}`,
+			isIconOnly && "button--icon-only"
+		].filter(Boolean).join(" "),
+		children: ({ isSelected, isPressed, isHovered, isFocused, isFocusVisible, isDisabled }) => typeof children === "function" ? children({
+			isSelected,
+			isPressed,
+			isHovered,
+			isFocused,
+			isFocusVisible,
+			isDisabled
+		}) : children
+	});
+}
+//#endregion
+//#region src/OverlayDirection.tsx
+function OverlayDirection({ dir, children }) {
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children
+	}) : children;
+}
+//#endregion
+//#region src/ToggleButtonGroup.tsx
+var keys = (value) => Array.isArray(value) ? value : value ? [value] : [];
+function Root(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",
+					"toggle-button-group",
+					props.isDetached && "button-group--detached",
+					props.fullWidth && "button-group--full-width"
+				].filter(Boolean).join(" "),
+				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 });
+//#endregion
+//#region src/icons.tsx
+function ChevronIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+	});
+}
+function CheckIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5" })
+	});
+}
+function CloseIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+	});
+}
+//#endregion
+//#region src/field.tsx
+function useFeedback({ description, errorMessage, isInvalid }) {
+	const id = useId();
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const showError = !!(isInvalid && errorMessage);
+	return {
+		describedBy: [description && descriptionId, showError && errorId].filter(Boolean).join(" ") || void 0,
+		feedback: /* @__PURE__ */ jsxs(Fragment$1, { children: [description && /* @__PURE__ */ jsx("span", {
+			id: descriptionId,
+			className: "input__description",
+			children: description
+		}), showError && /* @__PURE__ */ jsx("span", {
+			id: errorId,
+			className: "input__error",
+			children: errorMessage
+		})] })
+	};
+}
+//#endregion
+//#region src/SelectionValidation.tsx
+function SelectionValidation({ hasValue, required, disabled, onInvalid, onReset, onResetStart }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const form = ref.current?.form;
+		const reset = (event) => {
+			onResetStart();
+			setTimeout(() => onReset(event.defaultPrevented), 0);
+		};
+		form?.addEventListener("reset", reset, true);
+		return () => form?.removeEventListener("reset", reset, true);
+	}, [onReset, onResetStart]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		className: "selection__validation",
+		type: "text",
+		tabIndex: -1,
+		"aria-hidden": "true",
+		autoComplete: "off",
+		required,
+		disabled,
+		value: hasValue ? "selected" : "",
+		onChange: () => {},
+		onInvalid: (event) => {
+			event.preventDefault();
+			onInvalid();
+		}
+	});
+}
+//#endregion
+//#region src/selection-options.ts
+function selectionIds(value, options, multiple) {
+	const requested = new Set(Array.isArray(value) ? value : typeof value === "string" ? [value] : []);
+	const ids = [...new Set(options.filter((o) => o.id !== "" && requested.has(o.id)).map((o) => o.id))];
+	return multiple ? ids : ids.slice(0, 1);
+}
+function filterOptions(options, query) {
+	const fold = (text) => text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+	const search = fold(query.trim());
+	return options.filter((o) => fold(`${o.label} ${o.description ?? ""}`).includes(search));
+}
+//#endregion
+//#region src/Select.tsx
+function Select(props) {
+	const { label, options, placeholder, isDisabled, isRequired, isClearable, clearLabel = "Hapus pilihan", dir } = props;
+	const multiple = props.selectionMode === "multiple";
+	const [local, setLocal] = useState(props.defaultValue);
+	const [tried, setTried] = useState(false);
+	const resetting = useRef(false);
+	const trigger = useRef(null);
+	const ids = selectionIds(props.value !== void 0 ? props.value : local, options, multiple);
+	const selected = options.filter((o) => ids.includes(o.id));
+	const invalid = props.isInvalid || tried && isRequired && ids.length === 0;
+	const { describedBy, feedback } = useFeedback({
+		description: props.description,
+		isInvalid: invalid,
+		errorMessage: props.errorMessage ?? (isRequired && ids.length === 0 ? props.requiredMessage ?? "Pilihan wajib diisi." : void 0)
+	});
+	function update(value) {
+		if (isDisabled || resetting.current) return;
+		const next = selectionIds(value, options, multiple);
+		setLocal(multiple ? next : next[0] ?? null);
+		if (props.selectionMode === "multiple") props.onChange?.(next);
+		else if (next[0] !== void 0) props.onChange?.(next[0]);
+	}
+	function clear() {
+		if (isDisabled || resetting.current) return;
+		setLocal(multiple ? [] : null);
+		if (props.selectionMode === "multiple") props.onChange?.([]);
+		props.onClear?.();
+		trigger.current?.focus();
+	}
+	const select = /* @__PURE__ */ jsxs(Select$1, {
+		className: [
+			"select",
+			`select--${props.size ?? "md"}`,
+			`select--${props.variant ?? "primary"}`,
+			props.hideLabel && "select--label-hidden",
+			props.fullWidth === false && "select--fit"
+		].filter(Boolean).join(" "),
+		"data-multiple": multiple || void 0,
+		selectionMode: multiple ? "multiple" : "single",
+		value: multiple ? ids : ids[0] ?? null,
+		onChange: update,
+		placeholder,
+		isDisabled,
+		isRequired,
+		isInvalid: !!invalid,
+		validationBehavior: "aria",
+		"aria-describedby": describedBy,
+		children: [
+			/* @__PURE__ */ jsxs(Label$1, {
+				className: "select__label",
+				children: [label, isRequired && /* @__PURE__ */ jsxs("span", {
+					className: "selection__required",
+					"aria-hidden": "true",
+					children: [" ", "*"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "select__control",
+				"data-clearable": isClearable || void 0,
+				children: [/* @__PURE__ */ jsxs(Button$2, {
+					ref: trigger,
+					className: "select__trigger",
+					"aria-describedby": describedBy,
+					children: [
+						props.startContent && /* @__PURE__ */ jsx("span", {
+							className: "selection__leading",
+							"aria-hidden": "true",
+							children: props.startContent
+						}),
+						/* @__PURE__ */ jsx(SelectValue, {
+							className: "select__value",
+							children: () => selected.length ? props.renderValue?.(selected) ?? selected.map((o) => o.label).join(", ") : placeholder
+						}),
+						/* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+					]
+				}), isClearable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "selection__clear",
+					"data-empty": ids.length === 0 || void 0,
+					"aria-hidden": ids.length === 0 || void 0,
+					tabIndex: ids.length === 0 ? -1 : void 0,
+					"aria-label": clearLabel,
+					disabled: isDisabled || ids.length === 0,
+					onClick: clear,
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Popover$1, {
+				className: "select__popover",
+				children: /* @__PURE__ */ jsx(ListBox, {
+					className: "select__list",
+					children: options.map((option) => /* @__PURE__ */ jsxs(ListBoxItem, {
+						onPress: props.onAction ? () => props.onAction(option.id) : void 0,
+						id: option.id,
+						textValue: option.label,
+						isDisabled: option.isDisabled,
+						className: "select__item",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "select__item-label",
+							children: props.renderOption?.(option) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [option.label, option.description && /* @__PURE__ */ jsx("span", {
+								className: "selection__description",
+								children: option.description
+							})] })
+						}), /* @__PURE__ */ jsx(CheckIcon, { className: "select__check" })]
+					}, option.id))
+				})
+			}),
+			feedback,
+			props.name && (multiple ? ids : [ids[0] ?? ""]).map((id, i) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: props.name,
+				value: id,
+				disabled: isDisabled
+			}, i)),
+			/* @__PURE__ */ jsx(SelectionValidation, {
+				hasValue: ids.length > 0,
+				required: isRequired,
+				disabled: isDisabled,
+				onInvalid: () => {
+					setTried(true);
+					trigger.current?.focus();
+				},
+				onResetStart: () => {
+					resetting.current = true;
+				},
+				onReset: (cancelled) => {
+					resetting.current = false;
+					if (!cancelled) {
+						setTried(false);
+						if (props.value === void 0) setLocal(props.defaultValue);
+					}
+				}
+			})
+		]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: select
+	}) : select;
+}
+//#endregion
+//#region src/SelectGroup.tsx
+/** Joins direct Select children. Each child retains its own value and accessible label. */
+function SelectGroup({ label, children, size, variant, fullWidth = true, isDisabled, dir }) {
+	function defaults(nodes) {
+		return Children.map(nodes, (child) => {
+			if (!isValidElement(child)) return child;
+			if (child.type === Fragment) return cloneElement(child, {}, defaults(child.props.children));
+			if (child.type !== Select) return child;
+			const select = child;
+			return cloneElement(select, {
+				size: select.props.size ?? size,
+				variant: select.props.variant ?? variant,
+				hideLabel: select.props.hideLabel ?? true,
+				fullWidth: select.props.fullWidth ?? fullWidth,
+				isDisabled: !!isDisabled || select.props.isDisabled,
+				dir: select.props.dir ?? dir
+			});
+		});
+	}
+	return /* @__PURE__ */ jsxs("fieldset", {
+		className: ["select-group", !fullWidth && "select-group--fit"].filter(Boolean).join(" "),
+		disabled: isDisabled,
+		dir,
+		children: [/* @__PURE__ */ jsx("legend", {
+			className: "select-group__legend",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "select-group__controls",
+			children: defaults(children)
+		})]
+	});
+}
+//#endregion
+//#region src/Input.tsx
+var Input = /* @__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 }, ref) {
+	const control = useRef(null);
+	useImperativeHandle(ref, () => control.current);
+	const hasAdornment = prefix != null || suffix != null;
+	const input = /* @__PURE__ */ jsx(Input$1, {
+		ref: control,
+		className: "input__control",
+		placeholder,
+		required: isRequired,
+		minLength,
+		pattern,
+		inputMode,
+		enterKeyHint,
+		autoFocus,
+		spellCheck,
+		form,
+		onFocus,
+		onBlur,
+		onKeyDown,
+		onKeyUp
+	});
+	return /* @__PURE__ */ jsxs(TextField, {
+		className: `input input--${size} input--${variant}${fullWidth ? "" : " input--fit"}`,
+		value,
+		defaultValue,
+		onChange,
+		isInvalid,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		validationBehavior: "aria",
+		type,
+		name,
+		id,
+		autoComplete,
+		maxLength,
+		dir,
+		children: [
+			/* @__PURE__ */ jsx(Label$2, {
+				className: "input__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("fieldset", {
+				className: "input__boundary",
+				role: "presentation",
+				disabled: isDisabled,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: hasAdornment ? "input__group" : "input__plain",
+					"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: "input__prefix",
+							children: prefix
+						}),
+						input,
+						suffix != null && /* @__PURE__ */ jsx("span", {
+							className: "input__suffix",
+							children: suffix
+						})
+					]
+				})
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				className: "input__description",
+				children: description
+			}),
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError, {
+				className: "input__error",
+				children: errorMessage
+			})
+		]
+	});
+});
+//#endregion
+//#region src/Textarea.tsx
+function Textarea({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, rows = 3, resize = "vertical", name, id, autoComplete, maxLength, dir }) {
+	return /* @__PURE__ */ jsxs(TextField, {
+		className: "input textarea",
+		"data-resize": resize,
+		value,
+		defaultValue,
+		onChange,
+		isInvalid,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		validationBehavior: "aria",
+		name,
+		id,
+		autoComplete,
+		maxLength,
+		dir,
+		children: [
+			/* @__PURE__ */ jsx(Label$2, {
+				className: "input__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				className: "input__control textarea__control",
+				rows,
+				placeholder,
+				required: isRequired
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				className: "input__description",
+				children: description
+			}),
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError, {
+				className: "input__error",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Label.tsx
+/** Associates visible text with a separately rendered control. */
+function Label({ children, htmlFor, id }) {
+	return /* @__PURE__ */ jsx(Label$3, {
+		className: "label",
+		htmlFor,
+		id,
+		children
+	});
+}
+//#endregion
+//#region src/Checkbox.tsx
+function Checkbox({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, isRequired = false, isIndeterminate = false, name, value = "on", id, dir }) {
+	const { describedBy, feedback } = useFeedback({
+		description,
+		errorMessage,
+		isInvalid
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "input",
+		dir,
+		children: [/* @__PURE__ */ jsx(Checkbox$1, {
+			className: "choice",
+			isSelected,
+			defaultSelected,
+			onChange,
+			isDisabled,
+			isRequired,
+			isInvalid,
+			isIndeterminate,
+			validationBehavior: "aria",
+			name,
+			value,
+			id,
+			"aria-describedby": describedBy,
+			"aria-invalid": isInvalid || void 0,
+			children: ({ isSelected: selected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "checkbox__control",
+				"data-state": isIndeterminate ? "indeterminate" : selected ? "checked" : "unchecked",
+				"data-disabled": disabled || void 0,
+				"data-invalid": isInvalid || void 0,
+				"data-focus-visible": isFocusVisible || void 0,
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: "checkbox__check" }), /* @__PURE__ */ jsx("span", { className: "checkbox__dash" })]
+			}), /* @__PURE__ */ jsx("span", {
+				className: "choice__label",
+				children: label
+			})] })
+		}), feedback]
+	});
+}
+//#endregion
+//#region src/RadioGroup.tsx
+function RadioGroup({ label, options, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isRequired = false, name, id, orientation = "vertical", dir }) {
+	const { describedBy, feedback } = useFeedback({
+		description,
+		errorMessage,
+		isInvalid
+	});
+	const group = /* @__PURE__ */ jsxs(RadioGroup$1, {
+		className: "input radio-group",
+		value,
+		defaultValue,
+		onChange,
+		isDisabled,
+		isRequired,
+		isInvalid,
+		validationBehavior: "aria",
+		name,
+		id,
+		orientation,
+		dir,
+		"aria-describedby": describedBy,
+		children: [
+			/* @__PURE__ */ jsx(Label$4, {
+				className: "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "radio-group__items",
+				"data-orientation": orientation,
+				children: options.map((option) => /* @__PURE__ */ jsx(Radio, {
+					value: option.id,
+					isDisabled: option.isDisabled,
+					className: "choice",
+					children: ({ isSelected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "radio__control",
+						"data-state": isSelected ? "checked" : "unchecked",
+						"data-disabled": disabled || void 0,
+						"data-invalid": isInvalid || void 0,
+						"data-focus-visible": isFocusVisible || void 0,
+						children: /* @__PURE__ */ jsx("span", { className: "radio__dot" })
+					}), /* @__PURE__ */ jsx("span", {
+						className: "choice__label",
+						children: option.label
+					})] })
+				}, option.id))
+			}),
+			feedback
+		]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: group
+	}) : group;
+}
+//#endregion
+//#region src/Switch.tsx
+function Switch({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, name, value = "on", id, dir }) {
+	return /* @__PURE__ */ jsxs(SwitchField, {
+		className: "input",
+		dir,
+		isSelected,
+		defaultSelected,
+		onChange,
+		isDisabled,
+		isInvalid,
+		validationBehavior: "aria",
+		name,
+		value,
+		id,
+		children: [
+			/* @__PURE__ */ jsx(SwitchButton, {
+				className: "choice",
+				children: ({ isSelected: selected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "switch__control",
+					"data-state": selected ? "checked" : "unchecked",
+					"data-disabled": disabled || void 0,
+					"data-invalid": isInvalid || void 0,
+					"data-focus-visible": isFocusVisible || void 0,
+					children: /* @__PURE__ */ jsx("span", { className: "switch__thumb" })
+				}), /* @__PURE__ */ jsx("span", {
+					className: "choice__label",
+					children: label
+				})] })
+			}),
+			description && /* @__PURE__ */ jsx(Text$1, {
+				slot: "description",
+				className: "input__description",
+				children: description
+			}),
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$1, {
+				className: "input__error",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/form-context.ts
+var FormErrorsContext = /* @__PURE__ */ createContext({});
+//#endregion
+//#region src/FieldComponent.tsx
+function Field({ label, name, children, id, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, dir }) {
+	const errors = useContext(FormErrorsContext);
+	const error = Object.hasOwn(errors, name) && typeof errors[name] === "string" ? errors[name] || void 0 : void 0;
+	const invalid = isInvalid || !!error;
+	const message = isInvalid && errorMessage || error || void 0;
+	const generated = useId();
+	const controlId = id ?? generated;
+	const { describedBy, feedback } = useFeedback({
+		description,
+		isInvalid: invalid,
+		errorMessage: message
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "input field",
+		dir,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: controlId,
+				children: label
+			}),
+			children({
+				controlProps: {
+					id: controlId,
+					name,
+					className: "input__control field__control",
+					disabled: isDisabled,
+					readOnly: isReadOnly,
+					required: isRequired,
+					"aria-required": isRequired || void 0,
+					"aria-invalid": invalid || void 0,
+					"aria-describedby": describedBy
+				},
+				isInvalid: invalid,
+				errorMessage: message
+			}),
+			feedback
+		]
+	});
+}
+//#endregion
+//#region src/Form.tsx
+function Form({ children, validationErrors = {}, onSubmit, onReset, noValidate = false, id, "aria-label": ariaLabel, "aria-labelledby": labelledBy, dir }) {
+	function submit(event) {
+		event.preventDefault();
+		const form = event.currentTarget;
+		if (!noValidate && !form.checkValidity()) {
+			form.reportValidity();
+			return;
+		}
+		for (const element of form.querySelectorAll("[aria-invalid=\"true\"]")) {
+			const selector = "input:not([type=\"hidden\"]), textarea, select, button, [role=\"listbox\"]";
+			const invalid = (element.matches(selector) ? [element] : [...element.querySelectorAll(selector)]).find((control) => !control.matches(":disabled, [aria-disabled=\"true\"]"));
+			if (invalid) {
+				invalid.focus();
+				return;
+			}
+		}
+		onSubmit?.(new FormData(form, event.nativeEvent.submitter), event);
+	}
+	return /* @__PURE__ */ jsx(FormErrorsContext.Provider, {
+		value: validationErrors,
+		children: /* @__PURE__ */ jsx("form", {
+			className: "form",
+			id,
+			dir,
+			"aria-label": ariaLabel,
+			"aria-labelledby": labelledBy,
+			noValidate,
+			onSubmit: submit,
+			onReset,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/listbox-selection.ts
+/** Stable option order, unique enabled IDs, and at most one ID in single mode. */
+function listboxSelection(value, options, mode) {
+	const requested = new Set(value);
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const option of options) if (option.id && !option.isDisabled && requested.has(option.id) && !seen.has(option.id)) {
+		seen.add(option.id);
+		result.push(option.id);
+		if (mode === "single") break;
+	}
+	return result;
+}
+//#endregion
+//#region src/Listbox.tsx
+function Listbox({ label, options, value, defaultValue = [], onChange, selectionMode = "single", isDisabled = false, description, errorMessage, isInvalid = false, name, id, dir, emptyMessage = "Tidak ada pilihan." }) {
+	const [local, setLocal] = useState(defaultValue);
+	const selected = listboxSelection(value ?? local, options, selectionMode);
+	const nodeRef = useRef(null);
+	const tabIndexBeforeDisable = useRef(void 0);
+	function listRef(node) {
+		if (!node) return;
+		if (nodeRef.current !== node) tabIndexBeforeDisable.current = void 0;
+		nodeRef.current = node;
+		if (isInvalid) node.setAttribute("aria-invalid", "true");
+		else node.removeAttribute("aria-invalid");
+		if (isDisabled) {
+			node.setAttribute("aria-disabled", "true");
+			if (tabIndexBeforeDisable.current === void 0) tabIndexBeforeDisable.current = node.getAttribute("tabindex");
+			node.tabIndex = -1;
+		} else {
+			node.removeAttribute("aria-disabled");
+			if (tabIndexBeforeDisable.current !== void 0) {
+				if (tabIndexBeforeDisable.current === null) node.removeAttribute("tabindex");
+				else node.setAttribute("tabindex", tabIndexBeforeDisable.current);
+				tabIndexBeforeDisable.current = void 0;
+			}
+		}
+	}
+	const generated = useId();
+	const labelId = `${id ?? generated}-label`;
+	const { describedBy, feedback } = useFeedback({
+		description,
+		errorMessage,
+		isInvalid
+	});
+	function change(keys) {
+		if (isDisabled || keys === "all") return;
+		const next = listboxSelection([...keys].map(String), options, selectionMode);
+		if (next.length === selected.length && next.every((key, index) => key === selected[index])) return;
+		setLocal(next);
+		onChange?.(next);
+	}
+	const list = /* @__PURE__ */ jsxs("div", {
+		className: "input listbox",
+		dir,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(ListBox$1, {
+				ref: listRef,
+				id,
+				className: "listbox__list",
+				"aria-labelledby": labelId,
+				"aria-describedby": describedBy,
+				"aria-invalid": isInvalid || void 0,
+				"aria-disabled": isDisabled || void 0,
+				selectionMode,
+				selectionBehavior: selectionMode === "single" ? "replace" : "toggle",
+				disallowEmptySelection: selectionMode === "single",
+				selectedKeys: selected,
+				onSelectionChange: change,
+				disabledKeys: options.filter((option) => isDisabled || option.isDisabled).map((option) => option.id),
+				renderEmptyState: () => /* @__PURE__ */ jsx("span", {
+					className: "listbox__empty",
+					children: emptyMessage
+				}),
+				children: options.map((option) => /* @__PURE__ */ jsxs(ListBoxItem$1, {
+					id: option.id,
+					textValue: option.label,
+					isDisabled: isDisabled || option.isDisabled,
+					className: "listbox__item",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "listbox__text",
+						children: option.label
+					}), /* @__PURE__ */ jsx(CheckIcon, { className: "listbox__check" })]
+				}, option.id))
+			}),
+			feedback,
+			name && selected.map((key) => /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: key,
+				disabled: isDisabled
+			}, key))
+		]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: list
+	}) : list;
+}
+//#endregion
+//#region src/NumberField.tsx
+function finite(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function NumberField({ label, value, defaultValue = null, onChange, min, max, step = 1, locale = "id-ID", formatOptions, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, name, id, dir, incrementLabel, decrementLabel }) {
+	const buttonId = useId();
+	const inputRef = useRef(null);
+	const [local, setLocal] = useState(() => finite(defaultValue));
+	const selected = finite(value === void 0 ? local : value);
+	function change(next) {
+		if (isDisabled || isReadOnly) return;
+		const number = finite(next);
+		setLocal(number);
+		onChange?.(number);
+	}
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsx(NumberField$1, {
+			className: "input number-field",
+			id,
+			dir,
+			value: selected ?? NaN,
+			onChange: change,
+			minValue: min,
+			maxValue: max,
+			step,
+			formatOptions,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			isInvalid,
+			validationBehavior: "aria",
+			isWheelDisabled: true,
+			children: ({ state }) => {
+				const empty = state.inputValue.trim() === "";
+				function startEmpty() {
+					const start = Math.min(max ?? Infinity, Math.max(min ?? -Infinity, min ?? 0));
+					state.setNumberValue(start);
+					inputRef.current?.focus();
+				}
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Label$5, {
+						className: "label",
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Group, {
+						className: "number-field__group",
+						onKeyDownCapture: (event) => {
+							if (isDisabled || isReadOnly || !empty || ![
+								"ArrowUp",
+								"ArrowDown",
+								"PageUp",
+								"PageDown"
+							].includes(event.key)) return;
+							event.preventDefault();
+							event.stopPropagation();
+							startEmpty();
+						},
+						children: /* @__PURE__ */ jsx(ButtonContext.Consumer, { children: (buttonContext) => /* @__PURE__ */ jsxs(ButtonContext.Provider, {
+							value: empty ? null : buttonContext,
+							children: [
+								/* @__PURE__ */ jsxs(Button$3, {
+									slot: empty ? void 0 : "decrement",
+									onPress: empty ? startEmpty : void 0,
+									isDisabled: empty ? isDisabled || isReadOnly : void 0,
+									preventFocusOnPress: true,
+									className: "number-field__step",
+									"aria-label": decrementLabel ?? `Kurangi ${label}`,
+									"aria-labelledby": `${buttonId}-decrement`,
+									excludeFromTabOrder: true,
+									children: [/* @__PURE__ */ jsx("span", {
+										id: `${buttonId}-decrement`,
+										hidden: true,
+										children: decrementLabel ?? `Kurangi ${label}`
+									}), "−"]
+								}),
+								/* @__PURE__ */ jsx(Input$2, {
+									ref: inputRef,
+									className: "number-field__control",
+									required: isRequired
+								}),
+								/* @__PURE__ */ jsxs(Button$3, {
+									slot: empty ? void 0 : "increment",
+									onPress: empty ? startEmpty : void 0,
+									isDisabled: empty ? isDisabled || isReadOnly : void 0,
+									preventFocusOnPress: true,
+									className: "number-field__step",
+									"aria-label": incrementLabel ?? `Tambah ${label}`,
+									"aria-labelledby": `${buttonId}-increment`,
+									excludeFromTabOrder: true,
+									children: [/* @__PURE__ */ jsx("span", {
+										id: `${buttonId}-increment`,
+										hidden: true,
+										children: incrementLabel ?? `Tambah ${label}`
+									}), "+"]
+								})
+							]
+						}) })
+					}),
+					description && /* @__PURE__ */ jsx(Text$2, {
+						slot: "description",
+						className: "input__description",
+						children: description
+					}),
+					isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
+						className: "input__error",
+						children: errorMessage
+					}),
+					name && /* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name,
+						value: selected === null ? "" : String(selected),
+						disabled: isDisabled
+					})
+				] });
+			}
+		})
+	});
+}
+//#endregion
+//#region src/Card.tsx
+/** A content container; place links and buttons inside rather than making it clickable. */
+function Card({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, ...props }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: ["card", className].filter(Boolean).join(" "),
+		children: [
+			(title || description || actions || header || titleExtras) && /* @__PURE__ */ jsxs("div", {
+				className: "card__header",
+				children: [(title || description || header || titleExtras) && /* @__PURE__ */ jsx("div", {
+					className: "card__heading",
+					children: header ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [titleExtras ? /* @__PURE__ */ jsxs("div", {
+						className: "card__title-row",
+						children: [title && /* @__PURE__ */ jsx(Heading, {
+							className: "card__title",
+							children: title
+						}), titleExtras]
+					}) : title && /* @__PURE__ */ jsx(Heading, {
+						className: "card__title",
+						children: title
+					}), description && /* @__PURE__ */ jsx("p", {
+						className: "card__description",
+						children: description
+					})] })
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "card__actions",
+					children: actions
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "card__content",
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("div", {
+				className: "card__footer",
+				children: footer
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Badge.tsx
+/** Static status text. Dynamic announcements belong in an application-owned live region. */
+function Badge({ tone = "neutral", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: ["badge", className].filter(Boolean).join(" "),
+		"data-tone": tone
+	});
+}
+//#endregion
+//#region src/Skeleton.tsx
+/** Decorative placeholder. Set aria-busy and loading text on the surrounding content. */
+function Skeleton({ shape = "rectangle", animated = true, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: ["skeleton", className].filter(Boolean).join(" "),
+		"data-shape": shape,
+		"data-animated": animated ? "true" : void 0,
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+//#region src/Separator.tsx
+function Separator({ orientation = "horizontal", decorative = true, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: ["separator", className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		role: decorative ? "presentation" : "separator",
+		"aria-hidden": decorative ? "true" : void 0,
+		"aria-orientation": decorative ? void 0 : orientation
+	});
+}
+//#endregion
+//#region src/tabs-indicator.ts
+function mountTabsIndicator(container) {
+	const list = container.querySelector("[role=\"tablist\"]");
+	if (!list) return () => {};
+	let frame = 0, disposed = false, previous = null, armed = false;
+	const prev = container.querySelector("[data-tabs-scroll=\"prev\"]");
+	const next = container.querySelector("[data-tabs-scroll=\"next\"]");
+	const vertical = () => list.getAttribute("aria-orientation") === "vertical";
+	const reduced = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+	function measure() {
+		if (disposed) return;
+		const selected = list.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+		const rect = list.getBoundingClientRect();
+		if (selected && rect.width > 0 && rect.height > 0) {
+			const tab = selected.getBoundingClientRect();
+			const border = getComputedStyle(list);
+			list.style.setProperty("--tabs-indicator-x", `${tab.left - rect.left + list.scrollLeft - (parseFloat(border.borderLeftWidth) || 0)}px`);
+			list.style.setProperty("--tabs-indicator-y", `${tab.top - rect.top + list.scrollTop - (parseFloat(border.borderTopWidth) || 0)}px`);
+			list.style.setProperty("--tabs-indicator-width", `${tab.width}px`);
+			list.style.setProperty("--tabs-indicator-height", `${tab.height}px`);
+			list.dataset.indicatorReady = "true";
+			if (!armed) {
+				armed = true;
+				requestAnimationFrame(() => {
+					if (!disposed) list.dataset.indicatorAnimated = "true";
+				});
+			}
+			if (selected !== previous && previous && typeof list.scrollBy === "function") {
+				const delta = vertical() ? tab.top < rect.top ? tab.top - rect.top : tab.bottom > rect.bottom ? tab.bottom - rect.bottom : 0 : tab.left < rect.left ? tab.left - rect.left : tab.right > rect.right ? tab.right - rect.right : 0;
+				if (delta) list.scrollBy({
+					[vertical() ? "top" : "left"]: delta,
+					behavior: reduced() ? "instant" : "smooth"
+				});
+			}
+		} else list.dataset.indicatorReady = "false";
+		previous = selected;
+		const max = vertical() ? list.scrollHeight - list.clientHeight : list.scrollWidth - list.clientWidth;
+		const position = Math.abs(vertical() ? list.scrollTop : list.scrollLeft);
+		list.dataset.overflow = String(max > 1);
+		if (prev) {
+			prev.hidden = max <= 1;
+			prev.disabled = position <= 1;
+		}
+		if (next) {
+			next.hidden = max <= 1;
+			next.disabled = position >= max - 1;
+		}
+	}
+	function schedule() {
+		if (disposed) return;
+		cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(measure);
+	}
+	function scroll(direction) {
+		if (typeof list.scrollBy !== "function") return;
+		const rtl = !vertical() && getComputedStyle(list).direction === "rtl";
+		const amount = (vertical() ? list.clientHeight : list.clientWidth) * .7 * direction * (rtl ? -1 : 1);
+		list.scrollBy({
+			[vertical() ? "top" : "left"]: amount,
+			behavior: reduced() ? "instant" : "smooth"
+		});
+	}
+	const backward = () => scroll(-1), forward = () => scroll(1);
+	prev?.addEventListener("click", backward);
+	next?.addEventListener("click", forward);
+	list.addEventListener("scroll", schedule, { passive: true });
+	window.addEventListener("resize", schedule);
+	const observer = new MutationObserver(schedule);
+	observer.observe(list, {
+		subtree: true,
+		childList: true,
+		characterData: true,
+		attributes: true,
+		attributeFilter: [
+			"aria-selected",
+			"aria-orientation",
+			"aria-disabled",
+			"disabled"
+		]
+	});
+	const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
+	resize?.observe(list);
+	for (const tab of list.querySelectorAll("[role=\"tab\"]")) resize?.observe(tab);
+	document.fonts?.ready.then(schedule);
+	schedule();
+	return () => {
+		disposed = true;
+		cancelAnimationFrame(frame);
+		observer.disconnect();
+		resize?.disconnect();
+		prev?.removeEventListener("click", backward);
+		next?.removeEventListener("click", forward);
+		list.removeEventListener("scroll", schedule);
+		window.removeEventListener("resize", schedule);
+	};
+}
+//#endregion
+//#region src/Tabs.tsx
+function Tabs({ 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 }) {
+	const container = useRef(null);
+	const hasToolbar = !!(extras || actions);
+	useEffect(() => container.current ? mountTabsIndicator(container.current) : void 0, [items.length, hasToolbar]);
+	const [local, setLocal] = useState(defaultValue);
+	const selected = items.find((item) => item.id === (value ?? local) && !item.isDisabled)?.id ?? items.find((item) => !item.isDisabled)?.id;
+	const list = items.length > 0 ? /* @__PURE__ */ jsxs("div", {
+		className: "tabs__list-container",
+		ref: container,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "tabs__scroll-button tabs__scroll-button--prev",
+				"data-tabs-scroll": "prev",
+				hidden: true,
+				"aria-label": previousLabel,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m14 6-6 6 6 6" })
+				})
+			}),
+			/* @__PURE__ */ jsx(TabList, {
+				className: "tabs__list",
+				"aria-label": label,
+				children: items.map((item, index) => /* @__PURE__ */ jsxs(Tab, {
+					className: "tabs__trigger",
+					id: item.id,
+					isDisabled: item.isDisabled,
+					children: [
+						showSeparators && index > 0 && /* @__PURE__ */ jsx("span", {
+							className: "tabs__separator",
+							"aria-hidden": "true"
+						}),
+						renderIcon && /* @__PURE__ */ jsx("span", {
+							className: "tabs__icon",
+							"aria-hidden": "true",
+							children: renderIcon(item)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "tabs__label",
+							children: item.label
+						})
+					]
+				}, item.id))
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "tabs__scroll-button tabs__scroll-button--next",
+				"data-tabs-scroll": "next",
+				hidden: true,
+				"aria-label": nextLabel,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("path", { d: "m10 6 6 6-6 6" })
+				})
+			})
+		]
+	}) : null;
+	const content = /* @__PURE__ */ jsxs(Tabs$1, {
+		className: [
+			"tabs",
+			`tabs--${variant === "default" ? "primary" : variant}`,
+			`tabs--align-${align}`,
+			fullWidth && "tabs--full-width",
+			inset === "none" && "tabs--flush",
+			size !== "md" && `tabs--${size}`
+		].filter(Boolean).join(" "),
+		id,
+		orientation,
+		dir,
+		selectedKey: selected ?? "",
+		keyboardActivation: activationMode,
+		disabledKeys: items.filter((item) => item.isDisabled).map((item) => item.id),
+		onSelectionChange: (key) => {
+			const next = String(key);
+			if (next !== selected && items.some((item) => item.id === next && !item.isDisabled)) {
+				setLocal(next);
+				onChange?.(next);
+			}
+		},
+		children: [extras || actions ? /* @__PURE__ */ jsxs("div", {
+			className: "tabs__toolbar",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "tabs__navigation",
+				children: [list, extras && /* @__PURE__ */ jsx("div", {
+					className: "tabs__extras",
+					children: extras
+				})]
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "tabs__actions",
+				children: actions
+			})]
+		}) : list, items.map((item) => /* @__PURE__ */ jsx(TabPanel, {
+			id: item.id,
+			className: "tabs__panel",
+			children: renderPanel(item)
+		}, item.id))]
+	});
+	return dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === "rtl" ? "ar-EG" : "en-US",
+		children: content
+	}) : content;
+}
+//#endregion
+//#region src/pagination-model.ts
+function paginationModel(totalItems, pageSize, value, siblingCount = 1) {
+	const count = Math.max(1, Math.ceil((Number.isFinite(totalItems) ? Math.min(Number.MAX_SAFE_INTEGER, Math.max(0, Math.floor(totalItems))) : 0) / (Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10)));
+	const current = Math.min(count, Math.max(1, Number.isFinite(value) ? Math.floor(value) : 1));
+	const siblings = Number.isFinite(siblingCount) ? Math.min(2, Math.max(0, Math.floor(siblingCount))) : 1;
+	const pages = /* @__PURE__ */ new Set([
+		1,
+		count,
+		current
+	]);
+	for (let offset = 1; offset <= siblings; offset++) {
+		if (current - offset > 1) pages.add(current - offset);
+		if (current + offset < count) pages.add(current + offset);
+	}
+	const ordered = [...pages].sort((a, b) => a - b);
+	const entries = [];
+	ordered.forEach((page, index) => {
+		if (index && page - ordered[index - 1] > 1) entries.push(`gap-${page}`);
+		entries.push(page);
+	});
+	return {
+		current,
+		count,
+		entries
+	};
+}
+//#endregion
+//#region src/Pagination.tsx
+function Pagination({ totalItems, pageSize = 10, value, defaultValue = 1, onChange, isDisabled = false, siblingCount = 1, label = "Navigasi halaman", previousLabel = "Sebelumnya", nextLabel = "Berikutnya", pageLabel = "Halaman", dir, id }) {
+	const [local, setLocal] = useState(defaultValue);
+	const { current, count, entries } = paginationModel(totalItems, pageSize, value ?? local, siblingCount);
+	function change(next) {
+		if (isDisabled || next === current || next < 1 || next > count) return;
+		setLocal(next);
+		onChange?.(next);
+	}
+	return /* @__PURE__ */ jsxs("nav", {
+		className: "pagination",
+		"aria-label": label,
+		dir,
+		id,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pagination__button",
+				disabled: isDisabled || current === 1,
+				onClick: () => change(current - 1),
+				children: previousLabel
+			}),
+			entries.map((entry) => typeof entry === "string" ? /* @__PURE__ */ jsx("span", {
+				className: "pagination__gap",
+				"aria-hidden": "true",
+				children: "..."
+			}, entry) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pagination__button",
+				"aria-label": `${pageLabel} ${entry}`,
+				"aria-current": entry === current ? "page" : void 0,
+				disabled: isDisabled,
+				onClick: () => change(entry),
+				children: entry
+			}, entry)),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pagination__button",
+				disabled: isDisabled || current === count,
+				onClick: () => change(current + 1),
+				children: nextLabel
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "pagination__summary",
+				"aria-live": "polite",
+				children: [
+					current,
+					" / ",
+					count
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Table.tsx
+function Table({ caption, children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "table__scroll",
+		role: "region",
+		"aria-label": caption,
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsxs("table", {
+			...props,
+			className: ["table", className].filter(Boolean).join(" "),
+			children: [/* @__PURE__ */ jsx("caption", {
+				className: "table__caption",
+				children: caption
+			}), children]
+		})
+	});
+}
+//#endregion
+//#region src/DataTable.tsx
+function DataTable({ caption, columns, rows, sort = null, onSortChange, isLoading = false, isDisabled = false, emptyMessage = "Tidak ada data.", loadingMessage = "Memuat data...", errorMessage, renderCell, dir, id }) {
+	function requestSort(column) {
+		if (isLoading || isDisabled || !column.sortable) return;
+		onSortChange?.({
+			columnId: column.id,
+			direction: sort?.columnId === column.id && sort.direction === "ascending" ? "descending" : "ascending"
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "data-table",
+		dir,
+		id,
+		children: [
+			/* @__PURE__ */ jsxs(Table, {
+				caption,
+				"aria-busy": isLoading || void 0,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					"aria-sort": column.sortable ? sort?.columnId === column.id ? sort.direction : "none" : void 0,
+					children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "table__sort",
+						disabled: isLoading || isDisabled,
+						onClick: () => requestSort(column),
+						children: [column.label, /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: sort?.columnId === column.id ? sort.direction === "ascending" ? "↑" : "↓" : "↕"
+						})]
+					}) : column.label
+				}, column.id)) }) }), /* @__PURE__ */ jsx("tbody", { children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("td", { children: renderCell ? renderCell(row, column) : row.cells[column.id] ?? "" }, column.id)) }, row.id)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: Math.max(1, columns.length),
+					className: "table__empty",
+					children: isLoading ? loadingMessage : errorMessage || emptyMessage
+				}) }) })]
+			}),
+			isLoading && /* @__PURE__ */ jsx("p", {
+				className: "data-table__status",
+				role: "status",
+				children: loadingMessage
+			}),
+			errorMessage && !isLoading && /* @__PURE__ */ jsx("p", {
+				className: "input__error",
+				role: "alert",
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Alert.tsx
+function Alert({ title, description, tone = "info", announcement = "off", children, actions, id }) {
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: "alert",
+		"data-tone": tone,
+		role: announcement === "polite" ? "status" : announcement === "assertive" ? "alert" : void 0,
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "alert__title",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "alert__description",
+				children: description
+			}),
+			children,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "alert__actions",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Empty.tsx
+function Empty({ title, description, headingLevel = 3, actions, children, id }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: "empty",
+		children: [
+			/* @__PURE__ */ jsx(Heading, {
+				className: "empty__title",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "empty__description",
+				children: description
+			}),
+			children,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "empty__actions",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Breadcrumb.tsx
+function Breadcrumb({ items, label = "Jejak halaman", dir, id }) {
+	return /* @__PURE__ */ jsx("nav", {
+		id,
+		className: "breadcrumb",
+		"aria-label": label,
+		dir,
+		children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { children: [index > 0 && /* @__PURE__ */ jsx("span", {
+			className: "breadcrumb__separator",
+			"aria-hidden": "true",
+			children: "/"
+		}), index === items.length - 1 ? /* @__PURE__ */ jsx("span", {
+			"aria-current": "page",
+			children: item.label
+		}) : item.href ? /* @__PURE__ */ jsx("a", {
+			href: item.href,
+			children: item.label
+		}) : /* @__PURE__ */ jsx("span", { children: item.label })] }, index)) })
+	});
+}
+//#endregion
+//#region src/useDisclosure.ts
+function useDisclosure(open, defaultOpen = false, onOpenChange) {
+	const [local, setLocal] = useState(defaultOpen);
+	const visible = open ?? local;
+	function change(next) {
+		if (next === visible) return;
+		setLocal(next);
+		onOpenChange?.(next);
+	}
+	return {
+		visible,
+		change
+	};
+}
+//#endregion
+//#region src/Sidebar.tsx
+function Sidebar({ label, items, currentId, open, defaultOpen = true, onOpenChange, toggleLabel = "Menu navigasi", dir, id }) {
+	const generated = useId(), navId = `${id ?? generated}-nav`;
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsxs("aside", {
+		id,
+		className: "sidebar",
+		dir,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "sidebar__header",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "sidebar__title",
+				children: label
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "sidebar__toggle",
+				"aria-label": toggleLabel,
+				"aria-expanded": visible,
+				"aria-controls": navId,
+				onClick: () => change(!visible),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: visible ? "−" : "+"
+				})
+			})]
+		}), /* @__PURE__ */ jsx("nav", {
+			id: navId,
+			"aria-label": label,
+			hidden: !visible,
+			children: /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx("li", { children: item.isDisabled ? /* @__PURE__ */ jsx("span", {
+				className: "sidebar__link",
+				"aria-disabled": "true",
+				children: item.label
+			}) : /* @__PURE__ */ jsx("a", {
+				className: "sidebar__link",
+				href: item.href,
+				"aria-current": item.id === currentId ? "page" : void 0,
+				children: item.label
+			}) }, item.id)) })
+		})]
+	});
+}
+//#endregion
+//#region src/chart-model.ts
+function chartModel(data) {
+	const valid = data.filter((item) => Number.isFinite(item.value));
+	const scale = valid.reduce((max, item) => Math.max(max, Math.abs(item.value)), 1);
+	const min = valid.reduce((min, item) => Math.min(min, item.value / scale), 0);
+	const span = valid.reduce((max, item) => Math.max(max, item.value / scale), 0) - min || 1, step = 560 / Math.max(1, valid.length);
+	const y = (value) => 180 - (value / scale - min) / span * 160;
+	return {
+		items: valid.map((item, index) => ({
+			...item,
+			x: 20 + step * (index + .5),
+			y: y(item.value)
+		})),
+		baseline: y(0),
+		barWidth: Math.min(40, step * .7)
+	};
+}
+//#endregion
+//#region src/Chart.tsx
+function Chart({ label, data, type = "bar", description, locale = "id-ID", formatOptions, categoryLabel = "Kategori", valueLabel = "Nilai", emptyMessage = "Belum ada data grafik.", id, dir }) {
+	const generated = useId(), labelId = `${id ?? generated}-label`, model = chartModel(data), format = new Intl.NumberFormat(locale, formatOptions);
+	return /* @__PURE__ */ jsxs("figure", {
+		id,
+		className: "chart",
+		dir,
+		"aria-labelledby": labelId,
+		children: [
+			/* @__PURE__ */ jsx("figcaption", {
+				id: labelId,
+				className: "chart__title",
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "chart__description",
+				children: description
+			}),
+			model.items.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
+				className: "chart__plot",
+				viewBox: "0 0 600 210",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: [
+					/* @__PURE__ */ jsx("line", {
+						className: "chart__axis",
+						x1: "20",
+						x2: "580",
+						y1: model.baseline,
+						y2: model.baseline
+					}),
+					type === "line" ? /* @__PURE__ */ jsx("polyline", {
+						className: "chart__line",
+						points: model.items.map((item) => `${item.x},${item.y}`).join(" ")
+					}) : null,
+					model.items.map((item) => /* @__PURE__ */ jsxs("g", { children: [type === "bar" ? /* @__PURE__ */ jsx("rect", {
+						className: "chart__bar",
+						x: item.x - model.barWidth / 2,
+						y: Math.min(item.y, model.baseline),
+						width: model.barWidth,
+						height: Math.abs(item.y - model.baseline)
+					}) : /* @__PURE__ */ jsx("circle", {
+						className: "chart__bar",
+						cx: item.x,
+						cy: item.y,
+						r: "4"
+					}), model.items.length <= 12 && /* @__PURE__ */ jsx("text", {
+						className: "chart__label",
+						x: item.x,
+						y: "202",
+						textAnchor: "middle",
+						children: item.label.slice(0, 12)
+					})] }, item.id))
+				]
+			}), /* @__PURE__ */ jsxs(Table, {
+				caption: label,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: categoryLabel
+				}), /* @__PURE__ */ jsx("th", {
+					scope: "col",
+					children: valueLabel
+				})] }) }), /* @__PURE__ */ jsx("tbody", { children: model.items.map((item) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					children: item.label
+				}), /* @__PURE__ */ jsx("td", { children: format.format(item.value) })] }, item.id)) })]
+			})] }) : /* @__PURE__ */ jsx(Empty, { title: emptyMessage })
+		]
+	});
+}
+//#endregion
+//#region src/Dialog.tsx
+function Dialog(props) {
+	const { triggerLabel, title, description, children, footer, isDisabled = false, closeLabel = "Tutup", dir, size = "md", placement = "center", scroll = "outside", backdrop = "opaque", isDismissable = true, isKeyboardDismissDisabled = false, showCloseButton = true, showFooterClose = true } = props;
+	const { visible, change } = useDisclosure(props.open, props.defaultOpen ?? false, props.onOpenChange);
+	const descriptionId = useId();
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: `button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`,
+				"aria-label": triggerLabel,
+				isDisabled,
+				children: props.triggerContent ?? triggerLabel
+			}), /* @__PURE__ */ jsx(ModalOverlay, {
+				className: "dialog__backdrop dialog__viewport",
+				"data-size": size,
+				"data-placement": placement,
+				"data-scroll": scroll,
+				"data-backdrop": backdrop,
+				isDismissable,
+				isKeyboardDismissDisabled,
+				children: /* @__PURE__ */ jsx(Modal, {
+					className: "dialog__panel",
+					dir,
+					children: /* @__PURE__ */ jsxs(Dialog$1, {
+						className: "dialog__content",
+						"aria-describedby": description ? descriptionId : void 0,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "overlay__header",
+								"data-close-button": showCloseButton || void 0,
+								children: [
+									/* @__PURE__ */ jsx(Heading, {
+										level: 2,
+										slot: "title",
+										className: "overlay__title",
+										children: title
+									}),
+									description && /* @__PURE__ */ jsx("p", {
+										id: descriptionId,
+										className: "overlay__description",
+										children: description
+									}),
+									showCloseButton && /* @__PURE__ */ jsx(Button$1, {
+										className: "dialog__close",
+										"aria-label": props.closeIconLabel ?? `${closeLabel} dialog`,
+										onPress: () => change(false),
+										children: /* @__PURE__ */ jsx(CloseIcon, {})
+									})
+								]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "overlay__body",
+								children
+							}),
+							(footer || showFooterClose) && /* @__PURE__ */ jsxs("div", {
+								className: "overlay__footer",
+								children: [footer, showFooterClose && /* @__PURE__ */ jsx(Button$1, {
+									className: "button button--secondary",
+									onPress: () => change(false),
+									children: closeLabel
+								})]
+							})
+						]
+					})
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/overlay-model.ts
+function menuGroups(items) {
+	const groups = [];
+	for (const item of items) {
+		const previous = groups.at(-1);
+		if (!previous || previous.label !== item.section || item.separatorBefore) groups.push({
+			key: item.id,
+			label: item.section,
+			items: [item]
+		});
+		else previous.items.push(item);
+	}
+	return groups;
+}
+function menuLeaves(items, disabled = false) {
+	return items.flatMap((item) => item.children?.length ? menuLeaves(item.children, disabled || !!item.isDisabled) : [{
+		...item,
+		isDisabled: disabled || item.isDisabled
+	}]);
+}
+function menuSelection(keys, items, mode) {
+	const wanted = new Set(keys);
+	const result = menuLeaves(items).filter((item) => wanted.has(item.id)).map((item) => item.id);
+	return mode === "none" ? [] : mode === "single" ? result.slice(0, 1) : result;
+}
+//#endregion
+//#region src/DropdownMenu.tsx
+function DropdownMenu(props) {
+	const { triggerLabel, items, isDisabled = false, dir, selectionMode = "none", placement = "bottom-start" } = props;
+	const { visible, change } = useDisclosure(props.open, props.defaultOpen ?? false, props.onOpenChange);
+	const [local, setLocal] = useState(props.defaultSelectedKeys ?? []);
+	const selected = menuSelection(props.selectedKeys ?? local, items, selectionMode);
+	const [side, align] = placement.split("-");
+	const popoverPlacement = `${side} ${side === "left" || side === "right" ? align === "start" ? "top" : "bottom" : align}`;
+	const closeOnSelect = props.closeOnSelect ?? selectionMode !== "multiple";
+	const leaves = menuLeaves(items, isDisabled);
+	function action(id) {
+		const item = leaves.find((item) => item.id === id);
+		if (item && !item.isDisabled) props.onAction?.(id);
+	}
+	function select(keys, level) {
+		if (isDisabled || selectionMode === "none") return;
+		const levelIds = new Set(level.filter((item) => !item.children?.length).map((item) => item.id));
+		const next = menuSelection(selectionMode === "multiple" ? [...selected.filter((id) => !levelIds.has(id)), ...keys] : keys, items, selectionMode);
+		setLocal(next);
+		props.onSelectionChange?.(next);
+	}
+	function content(item) {
+		const icon = props.renderIcon?.(item);
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			selectionMode !== "none" && !item.children?.length && /* @__PURE__ */ jsx(CheckIcon, { className: "menu__check" }),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "menu__icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "menu__text",
+				children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx("span", {
+					className: "menu__description",
+					children: item.description
+				})]
+			}),
+			item.shortcut && /* @__PURE__ */ jsx("kbd", {
+				className: "menu__shortcut",
+				"aria-hidden": "true",
+				children: item.shortcut
+			}),
+			!!item.children?.length && /* @__PURE__ */ jsx(ChevronIcon, { className: "menu__arrow" })
+		] });
+	}
+	function renderMenu(level, label, blocked = false) {
+		return /* @__PURE__ */ jsx(Menu, {
+			className: "menu__list",
+			"aria-label": label,
+			selectionMode,
+			selectedKeys: selected,
+			onSelectionChange: (keys) => select(keys === "all" ? level.filter((i) => !i.isDisabled && !i.children?.length).map((i) => i.id) : Array.from(keys, String), level),
+			disallowEmptySelection: selectionMode === "single",
+			shouldCloseOnSelect: closeOnSelect,
+			onAction: (key) => action(String(key)),
+			children: menuGroups(level).flatMap((group, index) => {
+				const rows = group.items.map((item) => {
+					const disabled = isDisabled || blocked || !!item.isDisabled;
+					const row = /* @__PURE__ */ jsx(MenuItem, {
+						id: item.id,
+						textValue: item.label,
+						className: "menu__item",
+						isDisabled: disabled,
+						"data-tone": item.tone ?? "default",
+						shouldCloseOnSelect: closeOnSelect,
+						children: content(item)
+					}, item.id);
+					return item.children?.length ? /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [row, /* @__PURE__ */ jsx(Popover$2, {
+						className: "menu__panel",
+						offset: 4,
+						containerPadding: 16,
+						dir,
+						children: renderMenu(item.children, item.label, disabled)
+					})] }, item.id) : row;
+				});
+				return [index > 0 ? /* @__PURE__ */ jsx(Separator$1, { className: "menu__separator" }, `${group.key}-separator`) : null, /* @__PURE__ */ jsxs(MenuSection, {
+					"aria-label": group.label,
+					children: [group.label && /* @__PURE__ */ jsx(Header, {
+						className: "menu__heading",
+						children: group.label
+					}), rows]
+				}, group.key)];
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(MenuTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: `button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`,
+				"aria-label": triggerLabel,
+				isDisabled: isDisabled || !items.length,
+				children: props.triggerContent ?? triggerLabel
+			}), /* @__PURE__ */ jsx(Popover$2, {
+				className: "menu__panel",
+				placement: popoverPlacement,
+				offset: 8,
+				containerPadding: 16,
+				dir,
+				children: renderMenu(items, triggerLabel)
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/Popover.tsx
+function Popover({ triggerLabel, title, description, children, open, defaultOpen = false, onOpenChange, isDisabled = false, closeLabel = "Tutup", dir }) {
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange), descriptionId = useId();
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: "button button--secondary",
+				isDisabled,
+				children: triggerLabel
+			}), /* @__PURE__ */ jsx(Popover$2, {
+				className: "popover__panel",
+				isNonModal: true,
+				placement: "bottom start",
+				offset: 8,
+				containerPadding: 16,
+				dir,
+				children: /* @__PURE__ */ jsxs(Dialog$1, {
+					className: "popover__content",
+					"aria-describedby": description ? descriptionId : void 0,
+					children: [
+						/* @__PURE__ */ jsx(Heading, {
+							level: 2,
+							slot: "title",
+							className: "overlay__title",
+							children: title
+						}),
+						description && /* @__PURE__ */ jsx("p", {
+							id: descriptionId,
+							className: "overlay__description",
+							children: description
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "overlay__body",
+							children
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "overlay__footer",
+							children: /* @__PURE__ */ jsx(Button$1, {
+								className: "button button--secondary",
+								onPress: () => change(false),
+								children: closeLabel
+							})
+						})
+					]
+				})
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/Tooltip.tsx
+function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly = false, triggerVariant = "secondary", triggerSize = "md", open, defaultOpen = false, onOpenChange, isDisabled = false, dir }) {
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir,
+		children: /* @__PURE__ */ jsxs(TooltipTrigger, {
+			isOpen: visible,
+			onOpenChange: change,
+			delay: 300,
+			closeDelay: 0,
+			isDisabled,
+			children: [/* @__PURE__ */ jsx(Button$1, {
+				className: [
+					"button",
+					`button--${triggerVariant}`,
+					triggerSize !== "md" && `button--${triggerSize}`,
+					triggerIconOnly && "button--icon-only"
+				].filter(Boolean).join(" "),
+				"aria-label": triggerLabel,
+				isDisabled,
+				children: triggerContent ?? triggerLabel
+			}), /* @__PURE__ */ jsx(Tooltip$1, {
+				className: "tooltip__panel",
+				placement: "top",
+				offset: 8,
+				containerPadding: 16,
+				dir,
+				children: text
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/Spinner.tsx
+/** Decorative by default. Use label for a standalone loading status; omit it inside a labeled Button. */
+function Spinner({ size = "md", color = "current", label, id }) {
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		className: `spinner spinner--${size}`,
+		"data-color": color,
+		role: label ? "status" : void 0,
+		"aria-label": label || void 0,
+		"aria-hidden": !label || void 0,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 20 20",
+			fill: "none",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "spinner__track",
+				cx: "10",
+				cy: "10",
+				r: "8"
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "spinner__arc",
+				cx: "10",
+				cy: "10",
+				r: "8",
+				pathLength: "100",
+				strokeDasharray: "36 64"
+			})]
+		}), label && /* @__PURE__ */ jsx("span", {
+			className: "spinner__label",
+			children: label
+		})]
+	});
+}
+//#endregion
+//#region src/Combobox.tsx
+/** Searchable single selection. Draft text is never submitted as a value. */
+function Combobox(props) {
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const [draft, setDraft] = useState(null);
+	const [tried, setTried] = useState(false);
+	const resetting = useRef(false);
+	const input = useRef(null);
+	const id = selectionIds(props.value !== void 0 ? props.value : local, props.options, false)[0] ?? null;
+	const selected = props.options.find((o) => o.id === id);
+	const [previous, setPrevious] = useState(selected);
+	if (previous !== selected) {
+		setPrevious(selected);
+		setDraft(null);
+	}
+	const text = draft ?? selected?.label ?? "";
+	const invalid = props.isInvalid || tried && props.isRequired && !id;
+	const { describedBy, feedback } = useFeedback({
+		description: props.description,
+		isInvalid: invalid,
+		errorMessage: props.errorMessage ?? (props.isRequired && !id ? props.requiredMessage ?? "Pilihan wajib diisi." : void 0)
+	});
+	function change(value) {
+		if (props.isDisabled || resetting.current) return;
+		const next = selectionIds(value, props.options, false)[0] ?? null;
+		setLocal(next);
+		props.onChange?.(next);
+		setDraft(null);
+	}
+	const content = /* @__PURE__ */ jsxs(ComboBox, {
+		className: "select combobox",
+		value: id,
+		onChange: change,
+		inputValue: text,
+		onInputChange: (text) => {
+			if (resetting.current) return;
+			setDraft(text);
+			if (text === "" && id) {
+				setLocal(null);
+				props.onChange?.(null);
+			}
+		},
+		defaultItems: props.options,
+		defaultFilter: (label, query) => filterOptions(props.options, query).some((option) => option.label === label),
+		allowsEmptyCollection: true,
+		allowsCustomValue: false,
+		isDisabled: props.isDisabled,
+		isRequired: props.isRequired,
+		isInvalid: !!invalid,
+		validationBehavior: "aria",
+		children: [
+			/* @__PURE__ */ jsxs(Label$6, {
+				className: "select__label",
+				children: [props.label, props.isRequired && /* @__PURE__ */ jsxs("span", {
+					className: "selection__required",
+					"aria-hidden": "true",
+					children: [" ", "*"]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "combobox__control",
+				"data-invalid": invalid || void 0,
+				"data-disabled": props.isDisabled || void 0,
+				children: [
+					props.startContent && /* @__PURE__ */ jsx("span", {
+						className: "selection__leading",
+						"aria-hidden": "true",
+						children: props.startContent
+					}),
+					/* @__PURE__ */ jsx(Input$3, {
+						ref: input,
+						className: "combobox__input",
+						placeholder: props.placeholder,
+						"aria-describedby": describedBy
+					}),
+					props.isClearable && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "combobox__clear",
+						"data-empty": !id && !text || void 0,
+						"aria-hidden": !id && !text || void 0,
+						tabIndex: !id && !text ? -1 : void 0,
+						disabled: props.isDisabled || !id && !text,
+						"aria-label": props.clearLabel ?? "Hapus pilihan",
+						onClick: () => {
+							change(null);
+							input.current?.focus();
+						},
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" })
+					}),
+					/* @__PURE__ */ jsx(Button$4, {
+						className: "combobox__toggle",
+						"aria-label": props.toggleLabel ?? "Buka pilihan",
+						children: /* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Popover$3, {
+				className: "select__popover combobox__popover",
+				children: /* @__PURE__ */ jsx(ListBox$2, {
+					className: "select__list",
+					renderEmptyState: () => /* @__PURE__ */ jsx("span", {
+						className: "selection__empty",
+						children: props.emptyMessage ?? "Tidak ada pilihan."
+					}),
+					children: (option) => /* @__PURE__ */ jsxs(ListBoxItem$2, {
+						id: option.id,
+						textValue: option.label,
+						isDisabled: option.isDisabled,
+						className: "select__item",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "select__item-label",
+							children: props.renderOption?.(option) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [option.label, option.description && /* @__PURE__ */ jsx("span", {
+								className: "selection__description",
+								children: option.description
+							})] })
+						}), /* @__PURE__ */ jsx(CheckIcon, { className: "select__check" })]
+					})
+				})
+			}),
+			feedback,
+			props.name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: props.name,
+				value: id ?? "",
+				disabled: props.isDisabled
+			}),
+			/* @__PURE__ */ jsx(SelectionValidation, {
+				hasValue: !!id,
+				required: props.isRequired,
+				disabled: props.isDisabled,
+				onInvalid: () => {
+					setTried(true);
+					input.current?.focus();
+				},
+				onResetStart: () => {
+					resetting.current = true;
+				},
+				onReset: (cancelled) => {
+					resetting.current = false;
+					if (!cancelled) {
+						setTried(false);
+						setDraft(null);
+						if (props.value === void 0) setLocal(props.defaultValue ?? null);
+					}
+				}
+			})
+		]
+	});
+	return props.dir ? /* @__PURE__ */ jsx(I18nProvider, {
+		locale: props.dir === "rtl" ? "ar-EG" : "en-US",
+		children: content
+	}) : content;
+}
+//#endregion
+//#region src/toggle-group-model.ts
+/** Normalize IDs without discarding existing disabled selections. */
+function toggleIds(value, items, multiple) {
+	const wanted = new Set(Array.isArray(value) ? value : typeof value === "string" ? [value] : []);
+	const result = [...new Set(items.filter((item) => item.id !== "" && wanted.has(item.id)).map((item) => item.id))];
+	return multiple ? result : result.slice(0, 1);
+}
+//#endregion
+//#region src/ToggleGroup.tsx
+function ToggleGroup(props) {
+	const multiple = props.selectionMode === "multiple";
+	const [local, setLocal] = useState(props.defaultValue);
+	const ids = toggleIds(props.value !== void 0 ? props.value : local, props.items, multiple);
+	function update(keys) {
+		if (props.isDisabled) return;
+		const requested = new Set(Array.from(keys, String));
+		for (const item of props.items.filter((item) => item.isDisabled)) if (multiple && ids.includes(item.id)) requested.add(item.id);
+		else if (!ids.includes(item.id)) requested.delete(item.id);
+		const next = toggleIds([...requested], props.items, multiple);
+		if (next.length === ids.length && next.every((id, index) => id === ids[index])) return;
+		if (props.disallowEmptySelection && ids.length && !next.length) return;
+		const value = multiple ? next : next[0] ?? null;
+		setLocal(value);
+		if (props.selectionMode === "multiple") props.onChange?.(next);
+		else props.onChange?.(next[0] ?? null);
+	}
+	return /* @__PURE__ */ jsx(OverlayDirection, {
+		dir: props.dir,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup$1, {
+			className: "toggle-group",
+			"aria-label": props.label,
+			dir: props.dir,
+			selectionMode: multiple ? "multiple" : "single",
+			selectedKeys: ids,
+			onSelectionChange: update,
+			disallowEmptySelection: props.disallowEmptySelection,
+			isDisabled: props.isDisabled,
+			orientation: props.orientation ?? "horizontal",
+			"data-variant": props.variant ?? "outline",
+			"data-size": props.size ?? "md",
+			"data-icon-only": props.isIconOnly || void 0,
+			children: props.items.map((item) => /* @__PURE__ */ jsxs(ToggleButton$1, {
+				id: item.id,
+				className: "toggle-group__item",
+				"aria-label": item.label,
+				isDisabled: props.isDisabled || item.isDisabled,
+				children: [props.renderIcon && /* @__PURE__ */ jsx("span", {
+					className: "toggle-group__icon",
+					"aria-hidden": "true",
+					children: props.renderIcon(item)
+				}), !props.isIconOnly && /* @__PURE__ */ jsx("span", { children: item.label })]
+			}, item.id))
+		})
+	});
+}
+//#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.",
+		required: "A date range is required."
+	};
+}
+function validDate(value) {
+	if (!/^(?!0000)\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+	try {
+		return parseDate(value).toString() === value;
+	} catch {
+		return false;
+	}
+}
+function asDate(value) {
+	return value && validDate(value) ? parseDate(value) : void 0;
+}
+function currentDate() {
+	return today(getLocalTimeZone()).toString();
+}
+function rangeError(value, constraints = {}) {
+	if (!value) return null;
+	if (!validDate(value.start) || !validDate(value.end)) return "incomplete";
+	if (value.end < value.start) return "order";
+	if (constraints.minDate && value.start < constraints.minDate || constraints.maxDate && value.end > constraints.maxDate) return "bounds";
+	const start = parseDate(value.start), end = parseDate(value.end);
+	const days = end.calendar.toJulianDay(end) - start.calendar.toJulianDay(start) + 1;
+	if (constraints.minDays && days < constraints.minDays || constraints.maxDays && days > constraints.maxDays) return "length";
+	if (constraints.isDateUnavailable) for (let day = start; day.compare(end) <= 0; day = day.add({ days: 1 })) {
+		if (constraints.isDateUnavailable(day.toString())) return "unavailable";
+		if (day.compare(end) === 0) break;
+	}
+	return null;
+}
+function rangeText(value, locale = "id-ID") {
+	if (!value || !validDate(value.start) || !validDate(value.end)) return "";
+	const formatter = new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC",
+		calendar: "gregory"
+	});
+	const date = (s) => parseDate(s).toDate("UTC");
+	return value.start === value.end ? formatter.format(date(value.start)) : `${formatter.format(date(value.start))} – ${formatter.format(date(value.end))}`;
+}
+function createDateRangePresets(referenceDate = currentDate(), locale = "id-ID", weekStartsOn = 1) {
+	const day = parseDate(referenceDate), week = startOfWeek(day, locale, weekStartsOn === 1 ? "mon" : "sun");
+	const id = locale.startsWith("id");
+	return [
+		{
+			id: "this-week",
+			label: id ? "Minggu ini" : "This Week",
+			start: week,
+			end: week.add({ days: 6 })
+		},
+		{
+			id: "last-week",
+			label: id ? "Minggu lalu" : "Last Week",
+			start: week.subtract({ days: 7 }),
+			end: week.subtract({ days: 1 })
+		},
+		{
+			id: "last-7-days",
+			label: id ? "7 hari terakhir" : "Last 7 Days",
+			start: day.subtract({ days: 6 }),
+			end: day
+		},
+		{
+			id: "last-30-days",
+			label: id ? "30 hari terakhir" : "Last 30 Days",
+			start: day.subtract({ days: 29 }),
+			end: day
+		},
+		{
+			id: "this-month",
+			label: id ? "Bulan ini" : "Current Month",
+			start: startOfMonth(day),
+			end: endOfMonth(day)
+		},
+		{
+			id: "next-month",
+			label: id ? "Bulan depan" : "Next Month",
+			start: startOfMonth(day.add({ months: 1 })),
+			end: endOfMonth(day.add({ months: 1 }))
+		}
+	].map(({ id, label, start, end }) => ({
+		id,
+		label,
+		value: {
+			start: start.toString(),
+			end: end.toString()
+		}
+	}));
+}
+//#endregion
+//#region src/DateRangePicker.tsx
+var empty = () => ({
+	start: "",
+	end: ""
+});
+function CalendarContent({ onPending, dir, children }) {
+	const state = useContext(RangeCalendarStateContext);
+	const { direction } = useLocale();
+	const pending = !!state?.anchorDate;
+	useEffect(() => onPending(pending), [pending, onPending]);
+	return /* @__PURE__ */ jsx("div", {
+		onKeyDownCapture: (event) => {
+			if (!state || !dir || dir === direction || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || !["ArrowLeft", "ArrowRight"].includes(event.key) || !event.target.closest(".date-range__day")) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (event.key === "ArrowRight" === (dir === "rtl")) state.focusPreviousDay();
+			else state.focusNextDay();
+		},
+		children
+	});
+}
+function DateRangePicker(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 labels = {
+		...dateRangeLabels(locale),
+		...props.labels
+	};
+	const [local, setLocal] = useState(props.defaultValue ?? null);
+	const committed = props.value !== void 0 ? props.value : local;
+	const start = committed?.start ?? "", end = committed?.end ?? "";
+	const [draft, setDraft] = useState({
+		start,
+		end
+	});
+	const initialFocus = () => {
+		const date = asDate(start) ?? asDate(props.referenceDate) ?? asDate(currentDate());
+		const min = asDate(props.minDate), max = asDate(props.maxDate);
+		return min && date.compare(min) < 0 ? min : max && date.compare(max) > 0 ? max : date;
+	};
+	const [focused, setFocused] = useState(initialFocus);
+	const [formError, setFormError] = useState(false);
+	const [pending, setPending] = useState(false), [calendarKey, setCalendarKey] = useState(0);
+	const trigger = useRef(null);
+	const id = useId();
+	const disclosure = useDisclosure(props.open, props.defaultOpen, props.onOpenChange);
+	const visible = disclosure.visible && !isDisabled;
+	useEffect(() => setDraft({
+		start,
+		end
+	}), [start, end]);
+	function replaceDraft(next) {
+		setDraft(next);
+		setPending(false);
+		setCalendarKey((k) => k + 1);
+	}
+	function resetDraft() {
+		replaceDraft({
+			start,
+			end
+		});
+		setFocused(initialFocus());
+	}
+	function changeOpen(next) {
+		if (isDisabled && next) return;
+		resetDraft();
+		disclosure.change(next);
+	}
+	const nullableDraft = draft.start || draft.end ? draft : null;
+	const errorCode = pending ? "incomplete" : rangeError(nullableDraft, props) ?? (isRequired && !nullableDraft ? "required" : null);
+	const error = errorCode ? labels[errorCode] : void 0;
+	const committedError = rangeError(committed, props);
+	const outerError = props.isInvalid || committedError || formError;
+	const matchingPreset = presets.find((p) => p.value.start === start && p.value.end === end);
+	const text = committed ? props.formatRange?.(committed, locale) ?? matchingPreset?.label ?? rangeText(committed, locale) : labels.placeholder;
+	const feedbackId = outerError ? `${id}-error` : props.description ? `${id}-description` : void 0;
+	function apply() {
+		if (isDisabled || isReadOnly || errorCode) return;
+		const next = nullableDraft ? { ...nullableDraft } : null;
+		setLocal(next);
+		setFormError(false);
+		props.onChange?.(next);
+		props.onApply?.(next);
+		disclosure.change(false);
+	}
+	function edit(part, value) {
+		if (isDisabled || isReadOnly) return;
+		replaceDraft({
+			...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 panel = /* @__PURE__ */ jsxs("div", {
+		className: "date-range__content",
+		"data-readonly": isReadOnly || void 0,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "date-range__intro",
+				children: [/* @__PURE__ */ jsx("h2", {
+					id: `${id}-title`,
+					children: labels.title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "date-range__summary",
+					"aria-live": "polite",
+					children: pending ? labels.incomplete : rangeText(nullableDraft, locale) || labels.incomplete
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "date-range__body",
+				children: [presets.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "date-range__presets",
+					role: "group",
+					"aria-label": labels.presets,
+					children: presets.map((p) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "date-range__preset",
+						disabled: isDisabled || isReadOnly || !!rangeError(p.value, props),
+						"aria-pressed": !pending && draft.start === p.value.start && draft.end === p.value.end,
+						onClick: () => {
+							replaceDraft({ ...p.value });
+							setFocused(asDate(p.value.start));
+						},
+						children: p.label
+					}, p.id))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "date-range__main",
+					children: [
+						showInputs && /* @__PURE__ */ jsx("div", {
+							className: "date-range__inputs",
+							children: ["start", "end"].map((part) => /* @__PURE__ */ jsxs("label", {
+								className: "date-range__field",
+								children: [/* @__PURE__ */ jsx("span", { children: labels[part] }), /* @__PURE__ */ jsx("input", {
+									type: "date",
+									form: "",
+									value: draft[part],
+									min: props.minDate,
+									max: props.maxDate,
+									disabled: isDisabled,
+									readOnly: isReadOnly,
+									"aria-invalid": !!errorCode,
+									"aria-describedby": error ? `${id}-draft-error` : void 0,
+									onChange: (e) => edit(part, e.target.value)
+								})]
+							}, part))
+						}),
+						props.showMonthYearPicker && /* @__PURE__ */ jsxs("div", {
+							className: "date-range__jump",
+							children: [/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: locale.startsWith("id") ? "Bulan" : "Month" }), /* @__PURE__ */ jsx("select", {
+								form: "",
+								disabled: isDisabled,
+								"aria-label": locale.startsWith("id") ? "Bulan" : "Month",
+								value: focused.month,
+								onChange: (e) => setFocused(focused.set({ month: Number(e.target.value) })),
+								children: Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ jsx("option", {
+									value: i + 1,
+									children: new Intl.DateTimeFormat(locale, {
+										month: "long",
+										timeZone: "UTC",
+										calendar: "gregory"
+									}).format(focused.set({
+										month: i + 1,
+										day: 1
+									}).toDate("UTC"))
+								}, i))
+							})] }), /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: locale.startsWith("id") ? "Tahun" : "Year" }), /* @__PURE__ */ jsx("input", {
+								type: "number",
+								form: "",
+								disabled: isDisabled,
+								min: asDate(props.minDate)?.year ?? 1,
+								max: asDate(props.maxDate)?.year ?? 9999,
+								defaultValue: focused.year,
+								onBlur: (e) => {
+									const year = Number(e.target.value);
+									if (Number.isInteger(year) && year >= 1 && year <= 9999) setFocused(focused.set({ year }));
+									else e.target.value = String(focused.year);
+								}
+							}, focused.year)] })]
+						}),
+						/* @__PURE__ */ jsx(RangeCalendar, {
+							dir,
+							className: "date-range__calendar",
+							"aria-label": labels.title,
+							value: calendarValue,
+							focusedValue: focused,
+							onFocusChange: setFocused,
+							createCalendar: () => new GregorianCalendar(),
+							onChange: (v) => {
+								if (v) setDraft({
+									start: v.start.toString(),
+									end: v.end.toString()
+								});
+							},
+							visibleDuration: { months: visibleMonths },
+							firstDayOfWeek: weekStartsOn === 1 ? "mon" : "sun",
+							pageBehavior: "single",
+							minValue: asDate(props.minDate),
+							maxValue: asDate(props.maxDate),
+							isDisabled,
+							isReadOnly,
+							isDateUnavailable: props.isDateUnavailable ? (d) => props.isDateUnavailable(d.toString()) : void 0,
+							children: /* @__PURE__ */ jsxs(CalendarContent, {
+								onPending: setPending,
+								dir,
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "date-range__navigation",
+									children: [/* @__PURE__ */ jsx(Button$1, {
+										slot: "previous",
+										className: "date-range__nav date-range__nav--previous",
+										"aria-label": labels.previousMonth,
+										children: /* @__PURE__ */ jsx(ChevronIcon, {})
+									}), /* @__PURE__ */ jsx(Button$1, {
+										slot: "next",
+										className: "date-range__nav date-range__nav--next",
+										"aria-label": labels.nextMonth,
+										children: /* @__PURE__ */ jsx(ChevronIcon, {})
+									})]
+								}), /* @__PURE__ */ jsx("div", {
+									className: "date-range__months",
+									children: Array.from({ length: visibleMonths }, (_, i) => /* @__PURE__ */ jsxs("div", {
+										className: "date-range__month",
+										children: [/* @__PURE__ */ jsx(CalendarHeading, {
+											offset: { months: i },
+											className: "date-range__heading"
+										}), /* @__PURE__ */ jsxs(CalendarGrid, {
+											offset: { months: i },
+											className: "date-range__grid",
+											weekdayStyle: "short",
+											children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
+												className: "date-range__weekday",
+												children: day
+											}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+												date,
+												className: "date-range__day"
+											}) })]
+										})]
+									}, i))
+								})]
+							})
+						}, calendarKey),
+						/* @__PURE__ */ jsx("div", {
+							className: "date-range__validation",
+							"aria-live": "polite",
+							children: error && /* @__PURE__ */ jsx("p", {
+								id: `${id}-draft-error`,
+								role: "alert",
+								children: error
+							})
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("footer", {
+				className: "date-range__footer",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "button button--ghost button--sm",
+					disabled: isDisabled || isReadOnly,
+					onClick: () => replaceDraft(empty()),
+					children: labels.clear
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "button button--secondary button--sm",
+					onClick: () => changeOpen(false),
+					children: labels.cancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "button button--primary button--sm",
+					disabled: isDisabled || isReadOnly || !!errorCode,
+					onClick: apply,
+					children: labels.apply
+				})] })]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: new Intl.Locale(locale, {
+			calendar: "gregory",
+			...dir ? { script: dir === "rtl" ? "Arab" : "Latn" } : {}
+		}).toString(),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: [
+				"date-range",
+				`date-range--${size}`,
+				`date-range--${variant}`,
+				!fullWidth && "date-range--fit",
+				hideLabel && "date-range--label-hidden",
+				props.triggerDisplay === "icon" && "date-range--icon-trigger"
+			].filter(Boolean).join(" "),
+			dir,
+			"data-disabled": isDisabled || void 0,
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					id: `${id}-label`,
+					className: "date-range__label",
+					children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: " *"
+					})]
+				}),
+				display === "inline" ? /* @__PURE__ */ jsx("section", {
+					className: "date-range__panel date-range__inline",
+					"aria-labelledby": `${id}-title`,
+					dir,
+					children: panel
+				}) : /* @__PURE__ */ jsxs(DialogTrigger, {
+					isOpen: visible,
+					onOpenChange: changeOpen,
+					children: [/* @__PURE__ */ jsxs(Button$1, {
+						ref: trigger,
+						className: "date-range__trigger",
+						isDisabled,
+						"aria-labelledby": `${id}-label ${id}-value`,
+						"aria-describedby": feedbackId,
+						"aria-invalid": !!outerError,
+						children: [
+							/* @__PURE__ */ jsxs("svg", {
+								className: "date-range__icon",
+								"aria-hidden": "true",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.8",
+								strokeLinecap: "round",
+								children: [/* @__PURE__ */ jsx("rect", {
+									x: "3",
+									y: "5",
+									width: "18",
+									height: "16",
+									rx: "2"
+								}), /* @__PURE__ */ jsx("path", { d: "M7 3v4m10-4v4M3 10h18" })]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								id: `${id}-value`,
+								className: "date-range__value",
+								"data-placeholder": !committed || void 0,
+								children: text
+							}),
+							/* @__PURE__ */ jsx(ChevronIcon, { className: "date-range__chevron" })
+						]
+					}), /* @__PURE__ */ jsx(Popover$2, {
+						className: "date-range__panel",
+						placement: "bottom start",
+						offset: 8,
+						containerPadding: 16,
+						dir,
+						children: /* @__PURE__ */ jsx(Dialog$1, {
+							className: "date-range__dialog",
+							"aria-labelledby": `${id}-title`,
+							children: panel
+						})
+					})]
+				}),
+				props.description && /* @__PURE__ */ jsx("span", {
+					id: `${id}-description`,
+					className: "input__description",
+					children: props.description
+				}),
+				outerError && /* @__PURE__ */ jsx("span", {
+					id: `${id}-error`,
+					className: "input__error",
+					role: "alert",
+					children: props.errorMessage ?? (committedError ? labels[committedError] : labels.required)
+				}),
+				props.name && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: `${props.name}.start`,
+					value: start,
+					disabled: isDisabled
+				}), /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name: `${props.name}.end`,
+					value: end,
+					disabled: isDisabled
+				})] }),
+				/* @__PURE__ */ jsx(SelectionValidation, {
+					hasValue: !!committed && !committedError,
+					required: isRequired || !!committedError,
+					disabled: isDisabled,
+					onInvalid: () => {
+						setFormError(true);
+						trigger.current?.focus();
+					},
+					onResetStart: () => {},
+					onReset: (cancelled) => {
+						if (!cancelled) {
+							if (props.value === void 0) setLocal(props.defaultValue ?? null);
+							setFormError(false);
+							changeOpen(false);
+						}
+					}
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Alert, Badge, Breadcrumb, Button, ButtonGroup, ButtonGroupSeparator, Card, Chart, Checkbox, Combobox, DataTable, DateRangePicker, Dialog, DropdownMenu, Empty, Field, Form, Input, Label, Listbox, NumberField, Pagination, Popover, RadioGroup, Select, SelectGroup, Separator, Sidebar, Skeleton, Spinner, Switch, Table, Tabs, Textarea, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, createDateRangePresets, rangeText as formatDateRange };
+
+//# sourceMappingURL=index.js.map