@kazee-ds/react 0.5.4 → 0.6.0

package/dist/index.js

@@ -1,31 +1,34 @@
 "use client";
 import { Button as Button$1, ButtonContext } from "react-aria-components/Button";
-import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Children, Fragment, cloneElement, createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } 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 { Button as Button$2, Label as Label$1, ListBox as ListBox$1, ListBoxItem, Popover as Popover$1, Select as Select$1, SelectStateContext, SelectValue } from "react-aria-components/Select";
+import { Popover as Popover$2 } from "react-aria-components/Popover";
+import { ListBox as ListBox$2, ListBoxItem as ListBoxItem$1, ListBoxSection } from "react-aria-components/ListBox";
+import { Text } from "react-aria-components/Text";
+import { Header, Header as Header$1 } from "react-aria-components/Header";
+import { FieldError as FieldError$1 } from "react-aria-components/FieldError";
+import { FieldError as FieldError$2, Input as Input$1, Label as Label$2, Text as Text$1, TextArea, TextField } from "react-aria-components/TextField";
+import { Group } from "react-aria-components/Group";
 import { Label as Label$3 } from "react-aria-components/Label";
 import { Checkbox as Checkbox$1 } from "react-aria-components/Checkbox";
+import { FieldError as FieldError$3, SwitchButton, SwitchField, Text as Text$2 } from "react-aria-components/Switch";
 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 { Button as Button$3, FieldError as FieldError$4, Group as Group$1, Input as Input$2, Label as Label$5, NumberField as NumberField$1, Text as Text$3 } from "react-aria-components/NumberField";
+import { Button as Button$4, I18nProvider as I18nProvider$1, Text as Text$4, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastList, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, composeRenderProps } from "react-aria-components";
 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 { Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components/Tooltip";
 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 { Button as Button$5, ComboBox, ComboBoxStateContext, Input as Input$3, Label as Label$6, ListBox as ListBox$3, ListBoxItem as ListBoxItem$2, Popover as Popover$3 } from "react-aria-components/ComboBox";
 import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, RangeCalendar, RangeCalendarStateContext } from "react-aria-components/RangeCalendar";
 import { GregorianCalendar, endOfMonth, getLocalTimeZone, parseDate, startOfMonth, startOfWeek, today } from "@internationalized/date";
-import { Button as Button$5, I18nProvider as I18nProvider$1, Text as Text$3, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastList, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion } from "react-aria-components";
 //#region src/Button.tsx
 function PendingLabelAnchor() {
 	const context = useContext(ProgressBarContext);
@@ -36,9 +39,11 @@ function PendingLabelAnchor() {
 		"aria-hidden": "true"
 	}) : null;
 }
-function Button({ variant = "primary", size = "md", isIconOnly = false, isPending = false, isDisabled = false, fullWidth = false, type = "button", children, ...props }) {
+function Button({ variant = "primary", size = "md", isIconOnly = false, isPending = false, isDisabled = false, fullWidth = false, type = "button", children, className: consumerClassName, classNames, style, ...props }) {
 	const className = [
 		"button",
+		classNames?.root,
+		consumerClassName,
 		`button--${variant}`,
 		size !== "md" && `button--${size}`,
 		isIconOnly && "button--icon-only",
@@ -48,6 +53,7 @@ function Button({ variant = "primary", size = "md", isIconOnly = false, isPendin
 		...props,
 		type: isPending ? "button" : type,
 		className,
+		style,
 		isDisabled,
 		isPending,
 		children: (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [typeof children === "function" ? children({
@@ -61,14 +67,20 @@ function Button({ variant = "primary", size = "md", isIconOnly = false, isPendin
 	});
 }
 //#endregion
+//#region src/styling.ts
+function partClass(base, override) {
+	return override ? `${base} ${override}` : base;
+}
+//#endregion
 //#region src/ButtonGroup.tsx
-function ButtonGroupSeparator() {
+function ButtonGroupSeparator({ className, style, classNames } = {}) {
 	return /* @__PURE__ */ jsx("span", {
-		className: "button-group__separator",
+		className: partClass(partClass("button-group__separator", classNames?.root), className),
+		style,
 		"aria-hidden": "true"
 	});
 }
-function Root$1({ children, label, variant, size, isDisabled, fullWidth, orientation = "horizontal", dir }) {
+function Root$1({ children, label, variant, size, isDisabled, fullWidth, orientation = "horizontal", dir, className, style, classNames }) {
 	function defaults(nodes) {
 		return Children.map(nodes, (child) => {
 			if (!isValidElement(child)) return child;
@@ -87,7 +99,8 @@ function Root$1({ children, label, variant, size, isDisabled, fullWidth, orienta
 		"aria-label": label,
 		dir,
 		"data-orientation": orientation,
-		className: `button-group${fullWidth ? " button-group--full-width" : ""}`,
+		className: partClass(partClass(`button-group${fullWidth ? " button-group--full-width" : ""}`, classNames?.root), className),
+		style,
 		children: defaults(children)
 	});
 }
@@ -95,13 +108,16 @@ var ButtonGroup = /* @__PURE__ */ Object.assign(Root$1, { Separator: ButtonGroup
 //#endregion
 //#region src/ToggleButton.tsx
 var ToggleButtonSizeContext = createContext("md");
-function ToggleButton({ children, variant = "default", size, isIconOnly, ...props }) {
+function ToggleButton({ children, variant = "default", size, isIconOnly, className: consumerClassName, classNames, style, ...props }) {
 	const inheritedSize = useContext(ToggleButtonSizeContext);
 	const resolvedSize = size ?? inheritedSize;
 	return /* @__PURE__ */ jsx(ToggleButton$1, {
 		...props,
+		style,
 		className: [
 			"button",
+			classNames?.root,
+			consumerClassName,
 			"toggle-button",
 			`toggle-button--${variant}`,
 			resolvedSize !== "md" && `button--${resolvedSize}`,
@@ -138,10 +154,13 @@ function Root(props) {
 				dir: props.dir,
 				className: [
 					"button-group",
+					props.classNames?.root,
+					props.className,
 					"toggle-button-group",
 					props.isDetached && "button-group--detached",
 					props.fullWidth && "button-group--full-width"
 				].filter(Boolean).join(" "),
+				style: props.style,
 				orientation: props.orientation ?? "horizontal",
 				selectionMode: props.selectionMode ?? "single",
 				selectedKeys: props.value === void 0 ? void 0 : keys(props.value),
@@ -161,6 +180,12 @@ function Root(props) {
 }
 var ToggleButtonGroup = /* @__PURE__ */ Object.assign(Root, { Separator: ButtonGroupSeparator });
 //#endregion
+//#region src/label-context.ts
+/** Item labels use Text slots rather than introducing native label elements. */
+var ItemLabelContext = createContext(false);
+/** Field feedback parts share styling without coupling labels to a specific control. */
+var FieldPartClassesContext = createContext({});
+//#endregion
 //#region src/icons.tsx
 function ChevronIcon({ className }) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -202,8 +227,236 @@ function CloseIcon({ className }) {
 	});
 }
 //#endregion
+//#region src/control-composition.tsx
+var SelectPartsContext = createContext({
+	clearButtons: 0,
+	registerClear: () => () => {}
+});
+var InSelectTrigger = createContext(false);
+function SelectComposition({ className, style, classNames, onClear, onChange, size = "md", variant = "primary", fullWidth = true, hideLabel = false, ...props }) {
+	const [clearButtons, setClearButtons] = useState(0);
+	const triggerRef = useRef(null);
+	const [registerClear] = useState(() => () => {
+		setClearButtons((count) => count + 1);
+		return () => setClearButtons((count) => count - 1);
+	});
+	return /* @__PURE__ */ jsx(SelectPartsContext.Provider, {
+		value: {
+			classNames,
+			onClear,
+			disabled: props.isDisabled,
+			clearButtons,
+			registerClear,
+			triggerRef
+		},
+		children: /* @__PURE__ */ jsx(FieldPartClassesContext.Provider, {
+			value: classNames ?? {},
+			children: /* @__PURE__ */ jsx(Select$1, {
+				...props,
+				"data-multiple": props.selectionMode === "multiple" || void 0,
+				className: partClass(partClass(`select select--${size} select--${variant}${fullWidth ? "" : " select--fit"}${hideLabel ? " select--label-hidden" : ""}`, classNames?.root), className),
+				style,
+				onChange: (value) => {
+					if (props.isDisabled) return;
+					if (Array.isArray(value)) onChange?.(value.map(String));
+					else onChange?.(value == null ? null : String(value));
+				}
+			})
+		})
+	});
+}
+function SelectControl({ className, ...props }) {
+	const { classNames, clearButtons } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-clearable": clearButtons > 0 || void 0,
+		className: partClass(partClass("select__control", classNames?.control), className)
+	});
+}
+function SelectTrigger({ ref, className, children, onKeyDown, ...props }) {
+	const state = useContext(SelectStateContext);
+	const context = useContext(SelectPartsContext);
+	const element = useRef(null);
+	useImperativeHandle(ref, () => element.current);
+	useImperativeHandle(context.triggerRef, () => element.current);
+	const clear = () => {
+		state?.setValue(Array.isArray(state.value) ? [] : null);
+		context.onClear?.();
+	};
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		ref: element,
+		className: partClass(partClass("select__trigger select__composed-trigger", context.classNames?.trigger), className),
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			if (!event.defaultPrevented && !context.disabled && context.clearButtons > 0 && !state?.isOpen && (event.key === "Backspace" || event.key === "Delete") && state?.value != null && (!Array.isArray(state.value) || state.value.length > 0)) {
+				event.preventDefault();
+				clear();
+			}
+		},
+		children: (state) => /* @__PURE__ */ jsx(InSelectTrigger.Provider, {
+			value: true,
+			children: typeof children === "function" ? children(state) : children
+		})
+	});
+}
+function SelectValuePart({ className, ...props }) {
+	const { classNames } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx(SelectValue, {
+		...props,
+		className: partClass(partClass("select__value", classNames?.value), className)
+	});
+}
+function SelectIndicator({ className, children, ...props }) {
+	const { classNames } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass(partClass("select__icon", classNames?.indicator), className),
+		"aria-hidden": "true",
+		children: children ?? /* @__PURE__ */ jsx(ChevronIcon, {})
+	});
+}
+/** Nested clear is decorative to AT; Backspace/Delete on the trigger supplies keyboard clearing. Outside Trigger it is a named native button. */
+function SelectClearButton({ className, children, "aria-label": label = "Hapus pilihan", ...props }) {
+	const state = useContext(SelectStateContext);
+	const context = useContext(SelectPartsContext);
+	const nested = useContext(InSelectTrigger);
+	const registerClear = context.registerClear;
+	useEffect(() => registerClear(), [registerClear]);
+	const empty = state?.value == null || Array.isArray(state.value) && state.value.length === 0;
+	const disabled = context.disabled || empty;
+	const classes = partClass(partClass("selection__clear", context.classNames?.clearButton), className);
+	const clear = () => {
+		if (disabled) return;
+		state?.setValue(Array.isArray(state.value) ? [] : null);
+		context.onClear?.();
+		context.triggerRef?.current?.focus();
+	};
+	const content = children ?? /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" });
+	if (nested) return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: classes,
+		"aria-hidden": "true",
+		"data-empty": empty || void 0,
+		onPointerDown: (event) => event.stopPropagation(),
+		onClick: (event) => {
+			event.stopPropagation();
+			if (event.button === 0) clear();
+		},
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className: classes,
+		"aria-label": label,
+		disabled,
+		"data-empty": empty || void 0,
+		onClick: clear,
+		children: content
+	});
+}
+function SelectPopover({ className, ...props }) {
+	const { classNames } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx(Popover$2, {
+		...props,
+		className: partClass(partClass("select__popover", classNames?.popover), className)
+	});
+}
+function ListBoxRoot({ className, ...props }) {
+	const { classNames } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx(ListBox$2, {
+		...props,
+		className: partClass(partClass("listbox__list select__list", classNames?.list), className)
+	});
+}
+function ListBoxItemPart({ className, children, ...props }) {
+	const { classNames } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx(ListBoxItem$1, {
+		...props,
+		textValue: props.textValue ?? (typeof children === "string" || typeof children === "number" ? String(children) : void 0),
+		className: partClass(partClass("listbox__item select__item", classNames?.item), className),
+		children: (state) => /* @__PURE__ */ jsx(ItemLabelContext.Provider, {
+			value: true,
+			children: typeof children === "function" ? children(state) : children
+		})
+	});
+}
+function ListBoxSectionPart({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ListBoxSection, {
+		...props,
+		className: partClass("listbox__section", className)
+	});
+}
+function ListBoxItemIndicator({ className, children, ...props }) {
+	const { classNames } = useContext(SelectPartsContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass(partClass("listbox__check select__check", classNames?.itemIndicator), className),
+		"aria-hidden": "true",
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
+	});
+}
+var ListBox = /* @__PURE__ */ Object.assign(ListBoxRoot, {
+	Item: ListBoxItemPart,
+	Section: ListBoxSectionPart,
+	ItemIndicator: ListBoxItemIndicator
+});
+function Description({ className, ...props }) {
+	const fieldClasses = useContext(FieldPartClassesContext);
+	const inItem = useContext(ItemLabelContext);
+	return /* @__PURE__ */ jsx(Text, {
+		slot: "description",
+		...props,
+		className: partClass(partClass("input__description", inItem ? void 0 : fieldClasses.description), className)
+	});
+}
+function FieldError({ className, ...props }) {
+	const fieldClasses = useContext(FieldPartClassesContext);
+	return /* @__PURE__ */ jsx(FieldError$1, {
+		...props,
+		className: partClass(partClass("input__error", fieldClasses.error), className)
+	});
+}
+function InputRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TextField, {
+		...props,
+		className: partClass("input", className)
+	});
+}
+var InputControlRefContext = createContext(void 0);
+var InputControl = /* @__PURE__ */ forwardRef(function InputControl({ className, ...props }, ref) {
+	const inheritedRef = useContext(InputControlRefContext);
+	const control = useRef(null);
+	useImperativeHandle(ref, () => control.current);
+	useImperativeHandle(inheritedRef, () => control.current);
+	return /* @__PURE__ */ jsx(Input$1, {
+		...props,
+		ref: control,
+		className: partClass("input__control", className)
+	});
+});
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Group, {
+		...props,
+		className: partClass("input__group", className)
+	});
+}
+function InputPrefix({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("input__prefix", className)
+	});
+}
+function InputSuffix({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("input__suffix", className)
+	});
+}
+//#endregion
 //#region src/field.tsx
-function useFeedback({ description, errorMessage, isInvalid }) {
+function useFeedback({ description, errorMessage, isInvalid, classNames }) {
 	const id = useId();
 	const descriptionId = `${id}-description`;
 	const errorId = `${id}-error`;
@@ -212,11 +465,11 @@ function useFeedback({ description, errorMessage, isInvalid }) {
 		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",
+			className: partClass("input__description", classNames?.description),
 			children: description
 		}), showError && /* @__PURE__ */ jsx("span", {
 			id: errorId,
-			className: "input__error",
+			className: partClass("input__error", classNames?.error),
 			children: errorMessage
 		})] })
 	};
@@ -265,7 +518,7 @@ function filterOptions(options, query) {
 }
 //#endregion
 //#region src/Select.tsx
-function Select(props) {
+function SelectCompact(props) {
 	const { label, options, placeholder, isDisabled, isRequired, isClearable, clearLabel = "Hapus pilihan", dir } = props;
 	const multiple = props.selectionMode === "multiple";
 	const [local, setLocal] = useState(props.defaultValue);
@@ -276,6 +529,7 @@ function Select(props) {
 	const selected = options.filter((o) => ids.includes(o.id));
 	const invalid = props.isInvalid || tried && isRequired && ids.length === 0;
 	const { describedBy, feedback } = useFeedback({
+		classNames: props.classNames,
 		description: props.description,
 		isInvalid: invalid,
 		errorMessage: props.errorMessage ?? (isRequired && ids.length === 0 ? props.requiredMessage ?? "Pilihan wajib diisi." : void 0)
@@ -297,11 +551,14 @@ function Select(props) {
 	const select = /* @__PURE__ */ jsxs(Select$1, {
 		className: [
 			"select",
+			props.classNames?.root,
+			props.className,
 			`select--${props.size ?? "md"}`,
 			`select--${props.variant ?? "primary"}`,
 			props.hideLabel && "select--label-hidden",
 			props.fullWidth === false && "select--fit"
 		].filter(Boolean).join(" "),
+		style: props.style,
 		"data-multiple": multiple || void 0,
 		selectionMode: multiple ? "multiple" : "single",
 		value: multiple ? ids : ids[0] ?? null,
@@ -314,61 +571,61 @@ function Select(props) {
 		"aria-describedby": describedBy,
 		children: [
 			/* @__PURE__ */ jsxs(Label$1, {
-				className: "select__label",
+				className: partClass("select__label", props.classNames?.label),
 				children: [label, isRequired && /* @__PURE__ */ jsxs("span", {
-					className: "selection__required",
+					className: partClass("selection__required", props.classNames?.required),
 					"aria-hidden": "true",
 					children: [" ", "*"]
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "select__control",
+				className: partClass("select__control", props.classNames?.control),
 				"data-clearable": isClearable || void 0,
 				children: [/* @__PURE__ */ jsxs(Button$2, {
 					ref: trigger,
-					className: "select__trigger",
+					className: partClass("select__trigger", props.classNames?.trigger),
 					"aria-describedby": describedBy,
 					children: [
 						props.startContent && /* @__PURE__ */ jsx("span", {
-							className: "selection__leading",
+							className: partClass("selection__leading", props.classNames?.leading),
 							"aria-hidden": "true",
 							children: props.startContent
 						}),
 						/* @__PURE__ */ jsx(SelectValue, {
-							className: "select__value",
+							className: partClass("select__value", props.classNames?.value),
 							children: () => selected.length ? props.renderValue?.(selected) ?? selected.map((o) => o.label).join(", ") : placeholder
 						}),
-						/* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+						/* @__PURE__ */ jsx(ChevronIcon, { className: partClass("select__icon", props.classNames?.indicator) })
 					]
 				}), isClearable && /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "selection__clear",
+					className: partClass("selection__clear", props.classNames?.clearButton),
 					"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" })
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: partClass("selection__close-icon", props.classNames?.clearIcon) })
 				})]
 			}),
 			/* @__PURE__ */ jsx(Popover$1, {
-				className: "select__popover",
-				children: /* @__PURE__ */ jsx(ListBox, {
-					className: "select__list",
+				className: partClass("select__popover", props.classNames?.popover),
+				children: /* @__PURE__ */ jsx(ListBox$1, {
+					className: partClass("select__list", props.classNames?.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",
+						className: partClass("select__item", props.classNames?.item),
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "select__item-label",
+							className: partClass("select__item-label", props.classNames?.itemLabel),
 							children: props.renderOption?.(option) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [option.label, option.description && /* @__PURE__ */ jsx("span", {
-								className: "selection__description",
+								className: partClass("selection__description", props.classNames?.itemDescription),
 								children: option.description
 							})] })
-						}), /* @__PURE__ */ jsx(CheckIcon, { className: "select__check" })]
+						}), /* @__PURE__ */ jsx(CheckIcon, { className: partClass("select__check", props.classNames?.itemIndicator) })]
 					}, option.id))
 				})
 			}),
@@ -405,10 +662,24 @@ function Select(props) {
 		children: select
 	}) : select;
 }
+function SelectRoot(props) {
+	if (props.options) return props.selectionMode === "multiple" ? /* @__PURE__ */ jsx(SelectCompact, { ...props }) : /* @__PURE__ */ jsx(SelectCompact, { ...props });
+	if (props.selectionMode === "multiple") return /* @__PURE__ */ jsx(SelectComposition, { ...props });
+	return /* @__PURE__ */ jsx(SelectComposition, { ...props });
+}
+var Select = /* @__PURE__ */ Object.assign(SelectRoot, {
+	Root: SelectComposition,
+	Control: SelectControl,
+	Trigger: SelectTrigger,
+	Value: SelectValuePart,
+	Indicator: SelectIndicator,
+	ClearButton: SelectClearButton,
+	Popover: SelectPopover
+});
 //#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 SelectGroup({ label, children, size, variant, fullWidth = true, isDisabled, dir, className, style, classNames }) {
 	function defaults(nodes) {
 		return Children.map(nodes, (child) => {
 			if (!isValidElement(child)) return child;
@@ -426,27 +697,33 @@ function SelectGroup({ label, children, size, variant, fullWidth = true, isDisab
 		});
 	}
 	return /* @__PURE__ */ jsxs("fieldset", {
-		className: ["select-group", !fullWidth && "select-group--fit"].filter(Boolean).join(" "),
+		className: [
+			"select-group",
+			!fullWidth && "select-group--fit",
+			classNames?.root,
+			className
+		].filter(Boolean).join(" "),
+		style,
 		disabled: isDisabled,
 		dir,
 		children: [/* @__PURE__ */ jsx("legend", {
-			className: "select-group__legend",
+			className: partClass("select-group__legend", classNames?.label),
 			children: label
 		}), /* @__PURE__ */ jsx("div", {
-			className: "select-group__controls",
+			className: partClass("select-group__controls", classNames?.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) {
+var CompactInput = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, type = "text", size = "md", variant = "primary", fullWidth = true, prefix, suffix, name, id, autoComplete, maxLength, minLength, pattern, inputMode, enterKeyHint, autoFocus, spellCheck, form, onFocus, onBlur, onKeyDown, onKeyUp, dir, className, style, classNames }, ref) {
 	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",
+		className: partClass(partClass("input__control", classNames?.input), classNames?.control),
 		placeholder,
 		required: isRequired,
 		minLength,
@@ -462,7 +739,8 @@ var Input = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultVal
 		onKeyUp
 	});
 	return /* @__PURE__ */ jsxs(TextField, {
-		className: `input input--${size} input--${variant}${fullWidth ? "" : " input--fit"}`,
+		className: partClass(partClass(`input input--${size} input--${variant}${fullWidth ? "" : " input--fit"}`, classNames?.root), className),
+		style,
 		value,
 		defaultValue,
 		onChange,
@@ -479,15 +757,15 @@ var Input = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultVal
 		dir,
 		children: [
 			/* @__PURE__ */ jsx(Label$2, {
-				className: "input__label",
+				className: partClass("input__label", classNames?.label),
 				children: label
 			}),
 			/* @__PURE__ */ jsx("fieldset", {
-				className: "input__boundary",
+				className: partClass("input__boundary", classNames?.boundary),
 				role: "presentation",
 				disabled: isDisabled,
 				children: /* @__PURE__ */ jsxs("div", {
-					className: hasAdornment ? "input__group" : "input__plain",
+					className: partClass(hasAdornment ? "input__group" : "input__plain", classNames?.group),
 					"data-invalid": isInvalid || void 0,
 					"data-readonly": isReadOnly || void 0,
 					onPointerDown: (event) => {
@@ -498,34 +776,51 @@ var Input = /* @__PURE__ */ forwardRef(function Input({ label, value, defaultVal
 					},
 					children: [
 						prefix != null && /* @__PURE__ */ jsx("span", {
-							className: "input__prefix",
+							className: partClass("input__prefix", classNames?.prefix),
 							children: prefix
 						}),
 						input,
 						suffix != null && /* @__PURE__ */ jsx("span", {
-							className: "input__suffix",
+							className: partClass("input__suffix", classNames?.suffix),
 							children: suffix
 						})
 					]
 				})
 			}),
-			description && /* @__PURE__ */ jsx(Text, {
+			description && /* @__PURE__ */ jsx(Text$1, {
 				slot: "description",
-				className: "input__description",
+				className: partClass("input__description", classNames?.description),
 				children: description
 			}),
-			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError, {
-				className: "input__error",
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
+				className: partClass("input__error", classNames?.error),
 				children: errorMessage
 			})
 		]
 	});
 });
+var Input = /* @__PURE__ */ Object.assign(/* @__PURE__ */ forwardRef(function InputWithComposition(props, ref) {
+	if ("label" in props && props.label !== void 0) return /* @__PURE__ */ jsx(CompactInput, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsx(InputControlRefContext.Provider, {
+		value: ref,
+		children: /* @__PURE__ */ jsx(InputRoot, { ...props })
+	});
+}), {
+	Root: InputRoot,
+	Control: InputControl,
+	Group: InputGroup,
+	Prefix: InputPrefix,
+	Suffix: InputSuffix
+});
 //#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 }) {
+function CompactTextarea({ label, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, placeholder, rows = 3, resize = "vertical", name, id, autoComplete, maxLength, dir, className, style, classNames }) {
 	return /* @__PURE__ */ jsxs(TextField, {
-		className: "input textarea",
+		className: partClass(partClass("input textarea", classNames?.root), className),
+		style,
 		"data-resize": resize,
 		value,
 		defaultValue,
@@ -542,51 +837,189 @@ function Textarea({ label, value, defaultValue, onChange, description, errorMess
 		dir,
 		children: [
 			/* @__PURE__ */ jsx(Label$2, {
-				className: "input__label",
+				className: partClass("input__label", classNames?.label),
 				children: label
 			}),
 			/* @__PURE__ */ jsx(TextArea, {
-				className: "input__control textarea__control",
+				className: partClass("input__control textarea__control", classNames?.input),
 				rows,
 				placeholder,
 				required: isRequired
 			}),
-			description && /* @__PURE__ */ jsx(Text, {
+			description && /* @__PURE__ */ jsx(Text$1, {
 				slot: "description",
-				className: "input__description",
+				className: partClass("input__description", classNames?.description),
 				children: description
 			}),
-			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError, {
-				className: "input__error",
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
+				className: partClass("input__error", classNames?.error),
 				children: errorMessage
 			})
 		]
 	});
 }
+function TextareaControl({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TextArea, {
+		...props,
+		className: partClass("input__control textarea__control", className)
+	});
+}
+function TextareaRoot(props) {
+	if ("label" in props && props.label !== void 0) return /* @__PURE__ */ jsx(CompactTextarea, { ...props });
+	return /* @__PURE__ */ jsx(InputRoot, { ...props });
+}
+var Textarea = /* @__PURE__ */ Object.assign(TextareaRoot, {
+	Root: InputRoot,
+	Control: TextareaControl
+});
 //#endregion
 //#region src/Label.tsx
 /** Associates visible text with a separately rendered control. */
-function Label({ children, htmlFor, id }) {
+function Label({ children, htmlFor, id, className, style, classNames }) {
+	const inItem = useContext(ItemLabelContext);
+	const fieldClasses = useContext(FieldPartClassesContext);
+	if (inItem) return /* @__PURE__ */ jsx(Text, {
+		slot: "label",
+		id,
+		className: partClass(partClass("label", classNames?.root), className),
+		style,
+		children
+	});
 	return /* @__PURE__ */ jsx(Label$3, {
-		className: "label",
+		className: partClass(partClass(partClass("label", fieldClasses.label), classNames?.root), className),
+		style,
 		htmlFor,
 		id,
 		children
 	});
 }
 //#endregion
+//#region src/choice-composition.tsx
+var ChoiceStateContext = createContext({
+	isSelected: false,
+	isDisabled: false
+});
+function CheckboxComposition({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox$1, {
+		...props,
+		className: partClass("choice", className),
+		children: (state) => /* @__PURE__ */ jsx(ChoiceStateContext.Provider, {
+			value: state,
+			children: /* @__PURE__ */ jsx(ItemLabelContext.Provider, {
+				value: true,
+				children: typeof children === "function" ? children(state) : children
+			})
+		})
+	});
+}
+function CheckboxControl({ className, ...props }) {
+	const state = useContext(ChoiceStateContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("checkbox__control", className),
+		"aria-hidden": "true",
+		"data-state": state.isIndeterminate ? "indeterminate" : state.isSelected ? "checked" : "unchecked",
+		"data-disabled": state.isDisabled || void 0,
+		"data-invalid": state.isInvalid || void 0,
+		"data-focus-visible": state.isFocusVisible || void 0
+	});
+}
+function CheckboxIndicator({ className, children, ...props }) {
+	const state = useContext(ChoiceStateContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className,
+		children: children ?? (state.isIndeterminate ? /* @__PURE__ */ jsx("span", { className: "checkbox__dash" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "checkbox__check" }))
+	});
+}
+function ChoiceContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("choice__label", className)
+	});
+}
+function SwitchComposition({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(SwitchField, {
+		...props,
+		className: partClass("input", className),
+		children: (fieldState) => /* @__PURE__ */ jsx(SwitchButton, {
+			className: "choice",
+			children: (state) => /* @__PURE__ */ jsx(ChoiceStateContext.Provider, {
+				value: state,
+				children: typeof children === "function" ? children(fieldState) : children
+			})
+		})
+	});
+}
+function SwitchControl({ className, ...props }) {
+	const state = useContext(ChoiceStateContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("switch__control", className),
+		"aria-hidden": "true",
+		"data-state": state.isSelected ? "checked" : "unchecked",
+		"data-disabled": state.isDisabled || void 0,
+		"data-invalid": state.isInvalid || void 0,
+		"data-focus-visible": state.isFocusVisible || void 0
+	});
+}
+function SwitchThumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("switch__thumb", className),
+		"aria-hidden": "true"
+	});
+}
+function RadioGroupComposition({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		...props,
+		className: partClass("input radio-group", className)
+	});
+}
+function RadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Radio, {
+		...props,
+		className: partClass("choice", className),
+		children: (state) => /* @__PURE__ */ jsx(ChoiceStateContext.Provider, {
+			value: state,
+			children: typeof children === "function" ? children(state) : children
+		})
+	});
+}
+function RadioControl({ className, ...props }) {
+	const state = useContext(ChoiceStateContext);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("radio__control", className),
+		"aria-hidden": "true",
+		"data-state": state.isSelected ? "checked" : "unchecked",
+		"data-disabled": state.isDisabled || void 0,
+		"data-focus-visible": state.isFocusVisible || void 0
+	});
+}
+function RadioIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("radio__dot", className),
+		"aria-hidden": "true"
+	});
+}
+//#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 }) {
+function CompactCheckbox({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, isRequired = false, isIndeterminate = false, name, value = "on", id, dir, className, style, classNames }) {
 	const { describedBy, feedback } = useFeedback({
+		classNames,
 		description,
 		errorMessage,
 		isInvalid
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "input",
+		className: partClass(partClass("input", classNames?.root), className),
+		style,
 		dir,
 		children: [/* @__PURE__ */ jsx(Checkbox$1, {
-			className: "choice",
+			className: partClass("choice", classNames?.choice),
 			isSelected,
 			defaultSelected,
 			onChange,
@@ -602,29 +1035,41 @@ function Checkbox({ label, description, errorMessage, isInvalid = false, isSelec
 			"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",
+				className: partClass("checkbox__control", classNames?.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" })]
+				children: [/* @__PURE__ */ jsx(CheckIcon, { className: partClass("checkbox__check", classNames?.indicator) }), /* @__PURE__ */ jsx("span", { className: partClass("checkbox__dash", classNames?.dash) })]
 			}), /* @__PURE__ */ jsx("span", {
-				className: "choice__label",
+				className: partClass("choice__label", classNames?.label),
 				children: label
 			})] })
 		}), feedback]
 	});
 }
+function CheckboxRoot(props) {
+	if ("label" in props) return /* @__PURE__ */ jsx(CompactCheckbox, { ...props });
+	return /* @__PURE__ */ jsx(CheckboxComposition, { ...props });
+}
+var Checkbox = /* @__PURE__ */ Object.assign(CheckboxRoot, {
+	Root: CheckboxComposition,
+	Control: CheckboxControl,
+	Indicator: CheckboxIndicator,
+	Content: ChoiceContent
+});
 //#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 }) {
+function CompactRadioGroup({ label, options, value, defaultValue, onChange, description, errorMessage, isInvalid = false, isDisabled = false, isRequired = false, name, id, orientation = "vertical", dir, className, style, classNames }) {
 	const { describedBy, feedback } = useFeedback({
+		classNames,
 		description,
 		errorMessage,
 		isInvalid
 	});
 	const group = /* @__PURE__ */ jsxs(RadioGroup$1, {
-		className: "input radio-group",
+		className: partClass(partClass("input radio-group", classNames?.root), className),
+		style,
 		value,
 		defaultValue,
 		onChange,
@@ -639,26 +1084,26 @@ function RadioGroup({ label, options, value, defaultValue, onChange, description
 		"aria-describedby": describedBy,
 		children: [
 			/* @__PURE__ */ jsx(Label$4, {
-				className: "label",
+				className: partClass("label", classNames?.label),
 				children: label
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "radio-group__items",
+				className: partClass("radio-group__items", classNames?.items),
 				"data-orientation": orientation,
 				children: options.map((option) => /* @__PURE__ */ jsx(Radio, {
 					value: option.id,
 					isDisabled: option.isDisabled,
-					className: "choice",
+					className: partClass("choice", classNames?.item),
 					children: ({ isSelected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
-						className: "radio__control",
+						className: partClass("radio__control", classNames?.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" })
+						children: /* @__PURE__ */ jsx("span", { className: partClass("radio__dot", classNames?.indicator) })
 					}), /* @__PURE__ */ jsx("span", {
-						className: "choice__label",
+						className: partClass("choice__label", classNames?.itemLabel),
 						children: option.label
 					})] })
 				}, option.id))
@@ -671,11 +1116,23 @@ function RadioGroup({ label, options, value, defaultValue, onChange, description
 		children: group
 	}) : group;
 }
+function RadioGroupRoot(props) {
+	if ("options" in props && props.options) return /* @__PURE__ */ jsx(CompactRadioGroup, { ...props });
+	return /* @__PURE__ */ jsx(RadioGroupComposition, { ...props });
+}
+var RadioGroup = /* @__PURE__ */ Object.assign(RadioGroupRoot, {
+	Root: RadioGroupComposition,
+	Item: RadioItem,
+	Control: RadioControl,
+	Indicator: RadioIndicator,
+	Content: ChoiceContent
+});
 //#endregion
 //#region src/Switch.tsx
-function Switch({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, name, value = "on", id, dir }) {
+function CompactSwitch({ label, description, errorMessage, isInvalid = false, isSelected, defaultSelected, onChange, isDisabled = false, name, value = "on", id, dir, className, style, classNames }) {
 	return /* @__PURE__ */ jsxs(SwitchField, {
-		className: "input",
+		className: partClass(partClass("input", classNames?.root), className),
+		style,
 		dir,
 		isSelected,
 		defaultSelected,
@@ -688,38 +1145,48 @@ function Switch({ label, description, errorMessage, isInvalid = false, isSelecte
 		id,
 		children: [
 			/* @__PURE__ */ jsx(SwitchButton, {
-				className: "choice",
+				className: partClass("choice", classNames?.choice),
 				children: ({ isSelected: selected, isDisabled: disabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: "switch__control",
+					className: partClass("switch__control", classNames?.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" })
+					children: /* @__PURE__ */ jsx("span", { className: partClass("switch__thumb", classNames?.thumb) })
 				}), /* @__PURE__ */ jsx("span", {
-					className: "choice__label",
+					className: partClass("choice__label", classNames?.label),
 					children: label
 				})] })
 			}),
-			description && /* @__PURE__ */ jsx(Text$1, {
+			description && /* @__PURE__ */ jsx(Text$2, {
 				slot: "description",
-				className: "input__description",
+				className: partClass("input__description", classNames?.description),
 				children: description
 			}),
-			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$1, {
-				className: "input__error",
+			isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$3, {
+				className: partClass("input__error", classNames?.error),
 				children: errorMessage
 			})
 		]
 	});
 }
+function SwitchRoot(props) {
+	if ("label" in props) return /* @__PURE__ */ jsx(CompactSwitch, { ...props });
+	return /* @__PURE__ */ jsx(SwitchComposition, { ...props });
+}
+var Switch = /* @__PURE__ */ Object.assign(SwitchRoot, {
+	Root: SwitchComposition,
+	Control: SwitchControl,
+	Thumb: SwitchThumb,
+	Content: ChoiceContent
+});
 //#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 }) {
+function Field({ label, name, children, id, description, errorMessage, isInvalid = false, isDisabled = false, isReadOnly = false, isRequired = false, dir, className, style, classNames }) {
 	const errors = useContext(FormErrorsContext);
 	const error = Object.hasOwn(errors, name) && typeof errors[name] === "string" ? errors[name] || void 0 : void 0;
 	const invalid = isInvalid || !!error;
@@ -727,30 +1194,34 @@ function Field({ label, name, children, id, description, errorMessage, isInvalid
 	const generated = useId();
 	const controlId = id ?? generated;
 	const { describedBy, feedback } = useFeedback({
+		classNames,
 		description,
 		isInvalid: invalid,
 		errorMessage: message
 	});
+	const controlProps = {
+		id: controlId,
+		name,
+		className: partClass("input__control field__control", classNames?.input),
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		required: isRequired,
+		"aria-required": isRequired || void 0,
+		"aria-invalid": invalid || void 0,
+		"aria-describedby": describedBy
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "input field",
+		className: partClass(partClass("input field", classNames?.root), className),
+		style,
 		dir,
 		children: [
 			/* @__PURE__ */ jsx(Label, {
 				htmlFor: controlId,
+				className: classNames?.label,
 				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
-				},
+				controlProps,
 				isInvalid: invalid,
 				errorMessage: message
 			}),
@@ -760,7 +1231,7 @@ function Field({ label, name, children, id, description, errorMessage, isInvalid
 }
 //#endregion
 //#region src/Form.tsx
-function Form({ children, validationErrors = {}, onSubmit, onReset, noValidate = false, id, "aria-label": ariaLabel, "aria-labelledby": labelledBy, dir }) {
+function Form({ children, validationErrors = {}, onSubmit, onReset, noValidate = false, id, "aria-label": ariaLabel, "aria-labelledby": labelledBy, dir, className, style, classNames }) {
 	function submit(event) {
 		event.preventDefault();
 		const form = event.currentTarget;
@@ -781,7 +1252,8 @@ function Form({ children, validationErrors = {}, onSubmit, onReset, noValidate =
 	return /* @__PURE__ */ jsx(FormErrorsContext.Provider, {
 		value: validationErrors,
 		children: /* @__PURE__ */ jsx("form", {
-			className: "form",
+			className: partClass(partClass("form", classNames?.root), className),
+			style,
 			id,
 			dir,
 			"aria-label": ariaLabel,
@@ -809,7 +1281,7 @@ function listboxSelection(value, options, mode) {
 }
 //#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." }) {
+function CompactListbox({ label, options, value, defaultValue = [], onChange, selectionMode = "single", isDisabled = false, description, errorMessage, isInvalid = false, name, id, dir, emptyMessage = "Tidak ada pilihan.", className, style, classNames }) {
 	const [local, setLocal] = useState(defaultValue);
 	const selected = listboxSelection(value ?? local, options, selectionMode);
 	const nodeRef = useRef(null);
@@ -836,6 +1308,7 @@ function Listbox({ label, options, value, defaultValue = [], onChange, selection
 	const generated = useId();
 	const labelId = `${id ?? generated}-label`;
 	const { describedBy, feedback } = useFeedback({
+		classNames,
 		description,
 		errorMessage,
 		isInvalid
@@ -848,18 +1321,19 @@ function Listbox({ label, options, value, defaultValue = [], onChange, selection
 		onChange?.(next);
 	}
 	const list = /* @__PURE__ */ jsxs("div", {
-		className: "input listbox",
+		className: partClass(partClass("input listbox", classNames?.root), className),
+		style,
 		dir,
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				id: labelId,
-				className: "label",
+				className: partClass("label", classNames?.label),
 				children: label
 			}),
-			/* @__PURE__ */ jsx(ListBox$1, {
+			/* @__PURE__ */ jsx(ListBox$2, {
 				ref: listRef,
 				id,
-				className: "listbox__list",
+				className: partClass("listbox__list", classNames?.list),
 				"aria-labelledby": labelId,
 				"aria-describedby": describedBy,
 				"aria-invalid": isInvalid || void 0,
@@ -871,18 +1345,18 @@ function Listbox({ label, options, value, defaultValue = [], onChange, selection
 				onSelectionChange: change,
 				disabledKeys: options.filter((option) => isDisabled || option.isDisabled).map((option) => option.id),
 				renderEmptyState: () => /* @__PURE__ */ jsx("span", {
-					className: "listbox__empty",
+					className: partClass("listbox__empty", classNames?.empty),
 					children: emptyMessage
 				}),
 				children: options.map((option) => /* @__PURE__ */ jsxs(ListBoxItem$1, {
 					id: option.id,
 					textValue: option.label,
 					isDisabled: isDisabled || option.isDisabled,
-					className: "listbox__item",
+					className: partClass("listbox__item", classNames?.item),
 					children: [/* @__PURE__ */ jsx("span", {
-						className: "listbox__text",
+						className: partClass("listbox__text", classNames?.itemLabel),
 						children: option.label
-					}), /* @__PURE__ */ jsx(CheckIcon, { className: "listbox__check" })]
+					}), /* @__PURE__ */ jsx(CheckIcon, { className: partClass("listbox__check", classNames?.indicator) })]
 				}, option.id))
 			}),
 			feedback,
@@ -899,12 +1373,66 @@ function Listbox({ label, options, value, defaultValue = [], onChange, selection
 		children: list
 	}) : list;
 }
+function ListboxRoot(props) {
+	if ("options" in props) return /* @__PURE__ */ jsx(CompactListbox, { ...props });
+	return /* @__PURE__ */ jsx(ListBoxRoot, { ...props });
+}
+var Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {
+	Root: ListBoxRoot,
+	Item: ListBoxItemPart,
+	Section: ListBoxSectionPart,
+	ItemIndicator: ListBoxItemIndicator
+});
+//#endregion
+//#region src/number-composition.tsx
+function NumberFieldComposition({ className, locale = "id-ID", value, defaultValue, onChange, min, max, ...props }) {
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsx(NumberField$1, {
+			...props,
+			minValue: min,
+			maxValue: max,
+			value: value === void 0 ? void 0 : value ?? NaN,
+			defaultValue: defaultValue ?? NaN,
+			onChange: (next) => onChange?.(Number.isFinite(next) ? next : null),
+			className: partClass("input number-field", className)
+		})
+	});
+}
+function NumberFieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Group$1, {
+		...props,
+		className: partClass("number-field__group", className)
+	});
+}
+function NumberFieldInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input$2, {
+		...props,
+		className: partClass("number-field__control", className)
+	});
+}
+function NumberFieldIncrement({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button$3, {
+		"aria-label": "Tambah",
+		...props,
+		slot: "increment",
+		className: partClass("number-field__step", className)
+	});
+}
+function NumberFieldDecrement({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button$3, {
+		"aria-label": "Kurangi",
+		...props,
+		slot: "decrement",
+		className: partClass("number-field__step", className)
+	});
+}
 //#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 }) {
+function CompactNumberField({ 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, className, style, classNames }) {
 	const buttonId = useId();
 	const inputRef = useRef(null);
 	const [local, setLocal] = useState(() => finite(defaultValue));
@@ -918,7 +1446,8 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 	return /* @__PURE__ */ jsx(I18nProvider, {
 		locale,
 		children: /* @__PURE__ */ jsx(NumberField$1, {
-			className: "input number-field",
+			className: partClass(partClass("input number-field", classNames?.root), className),
+			style,
 			id,
 			dir,
 			value: selected ?? NaN,
@@ -942,11 +1471,11 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 				}
 				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Label$5, {
-						className: "label",
+						className: partClass("label", classNames?.label),
 						children: label
 					}),
-					/* @__PURE__ */ jsx(Group, {
-						className: "number-field__group",
+					/* @__PURE__ */ jsx(Group$1, {
+						className: partClass("number-field__group", classNames?.group),
 						onKeyDownCapture: (event) => {
 							if (isDisabled || isReadOnly || !empty || ![
 								"ArrowUp",
@@ -966,7 +1495,7 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 									onPress: empty ? startEmpty : void 0,
 									isDisabled: empty ? isDisabled || isReadOnly : void 0,
 									preventFocusOnPress: true,
-									className: "number-field__step",
+									className: partClass(partClass("number-field__step", classNames?.button), classNames?.decrementButton),
 									"aria-label": decrementLabel ?? `Kurangi ${label}`,
 									"aria-labelledby": `${buttonId}-decrement`,
 									excludeFromTabOrder: true,
@@ -978,7 +1507,7 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 								}),
 								/* @__PURE__ */ jsx(Input$2, {
 									ref: inputRef,
-									className: "number-field__control",
+									className: partClass("number-field__control", classNames?.input),
 									required: isRequired
 								}),
 								/* @__PURE__ */ jsxs(Button$3, {
@@ -986,7 +1515,7 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 									onPress: empty ? startEmpty : void 0,
 									isDisabled: empty ? isDisabled || isReadOnly : void 0,
 									preventFocusOnPress: true,
-									className: "number-field__step",
+									className: partClass(partClass("number-field__step", classNames?.button), classNames?.incrementButton),
 									"aria-label": incrementLabel ?? `Tambah ${label}`,
 									"aria-labelledby": `${buttonId}-increment`,
 									excludeFromTabOrder: true,
@@ -999,13 +1528,13 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 							]
 						}) })
 					}),
-					description && /* @__PURE__ */ jsx(Text$2, {
+					description && /* @__PURE__ */ jsx(Text$3, {
 						slot: "description",
-						className: "input__description",
+						className: partClass("input__description", classNames?.description),
 						children: description
 					}),
-					isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$2, {
-						className: "input__error",
+					isInvalid && errorMessage && /* @__PURE__ */ jsx(FieldError$4, {
+						className: partClass("input__error", classNames?.error),
 						children: errorMessage
 					}),
 					name && /* @__PURE__ */ jsx("input", {
@@ -1019,65 +1548,142 @@ function NumberField({ label, value, defaultValue = null, onChange, min, max, st
 		})
 	});
 }
+function NumberFieldRoot(props) {
+	if ("label" in props) return /* @__PURE__ */ jsx(CompactNumberField, { ...props });
+	return /* @__PURE__ */ jsx(NumberFieldComposition, { ...props });
+}
+var NumberField = /* @__PURE__ */ Object.assign(NumberFieldRoot, {
+	Root: NumberFieldComposition,
+	Group: NumberFieldGroup,
+	Input: NumberFieldInput,
+	IncrementButton: NumberFieldIncrement,
+	DecrementButton: NumberFieldDecrement
+});
 //#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 }) {
+function CompactCard({ title, description, headingLevel = 3, actions, header, titleExtras, footer, children, className, classNames, ...props }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: ["card", className].filter(Boolean).join(" "),
+		className: partClass(partClass("card", classNames?.root), className),
 		children: [
 			(title || description || actions || header || titleExtras) && /* @__PURE__ */ jsxs("div", {
-				className: "card__header",
+				className: partClass("card__header", classNames?.header),
 				children: [(title || description || header || titleExtras) && /* @__PURE__ */ jsx("div", {
-					className: "card__heading",
+					className: partClass("card__heading", classNames?.heading),
 					children: header ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [titleExtras ? /* @__PURE__ */ jsxs("div", {
-						className: "card__title-row",
+						className: partClass("card__title-row", classNames?.titleRow),
 						children: [title && /* @__PURE__ */ jsx(Heading, {
-							className: "card__title",
+							className: partClass("card__title", classNames?.title),
 							children: title
 						}), titleExtras]
 					}) : title && /* @__PURE__ */ jsx(Heading, {
-						className: "card__title",
+						className: partClass("card__title", classNames?.title),
 						children: title
 					}), description && /* @__PURE__ */ jsx("p", {
-						className: "card__description",
+						className: partClass("card__description", classNames?.description),
 						children: description
 					})] })
 				}), actions && /* @__PURE__ */ jsx("div", {
-					className: "card__actions",
+					className: partClass("card__actions", classNames?.actions),
 					children: actions
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "card__content",
+				className: partClass("card__content", classNames?.content),
 				children
 			}),
 			footer && /* @__PURE__ */ jsx("div", {
-				className: "card__footer",
+				className: partClass("card__footer", classNames?.footer),
 				children: footer
 			})
 		]
 	});
 }
+function CardRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card", className)
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card__header", className)
+	});
+}
+function CardHeading({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card__heading", className)
+	});
+}
+function CardTitleRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card__title-row", className)
+	});
+}
+function CardTitle({ className, headingLevel = 3, ...props }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsx(Heading, {
+		...props,
+		className: partClass("card__title", className)
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: partClass("card__description", className)
+	});
+}
+function CardActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card__actions", className)
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card__content", className)
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("card__footer", className)
+	});
+}
+var Card = /* @__PURE__ */ Object.assign(CompactCard, {
+	Root: CardRoot,
+	Header: CardHeader,
+	Heading: CardHeading,
+	TitleRow: CardTitleRow,
+	Title: CardTitle,
+	Description: CardDescription,
+	Actions: CardActions,
+	Content: CardContent,
+	Footer: CardFooter
+});
 //#endregion
 //#region src/Badge.tsx
 /** Static status text. Dynamic announcements belong in an application-owned live region. */
-function Badge({ tone = "neutral", className, ...props }) {
+function Badge({ tone = "neutral", className, classNames, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: ["badge", className].filter(Boolean).join(" "),
+		className: partClass(partClass("badge", classNames?.root), className),
 		"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 }) {
+function Skeleton({ shape = "rectangle", animated = true, className, classNames, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		...props,
-		className: ["skeleton", className].filter(Boolean).join(" "),
+		className: partClass(partClass("skeleton", classNames?.root), className),
 		"data-shape": shape,
 		"data-animated": animated ? "true" : void 0,
 		"aria-hidden": "true"
@@ -1085,10 +1691,10 @@ function Skeleton({ shape = "rectangle", animated = true, className, ...props })
 }
 //#endregion
 //#region src/Separator.tsx
-function Separator({ orientation = "horizontal", decorative = true, className, ...props }) {
+function Separator({ orientation = "horizontal", decorative = true, className, classNames, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
-		className: ["separator", className].filter(Boolean).join(" "),
+		className: partClass(partClass("separator", classNames?.root), className),
 		"data-orientation": orientation,
 		role: decorative ? "presentation" : "separator",
 		"aria-hidden": decorative ? "true" : void 0,
@@ -1194,19 +1800,19 @@ function mountTabsIndicator(container) {
 }
 //#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 }) {
+function CompactTabs({ className, style, classNames, label, variant = "primary", size = "md", orientation = "horizontal", align = "center", fullWidth = false, inset = "default", showSeparators = false, renderIcon, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", extras, actions, items, value, defaultValue, onChange, renderPanel, activationMode = "manual", dir, id }) {
 	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",
+		className: partClass("tabs__list-container", classNames?.listContainer),
 		ref: container,
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "tabs__scroll-button tabs__scroll-button--prev",
+				className: partClass("tabs__scroll-button tabs__scroll-button--prev", classNames?.scrollButton),
 				"data-tabs-scroll": "prev",
 				hidden: true,
 				"aria-label": previousLabel,
@@ -1217,24 +1823,24 @@ function Tabs({ label, variant = "primary", size = "md", orientation = "horizont
 				})
 			}),
 			/* @__PURE__ */ jsx(TabList, {
-				className: "tabs__list",
+				className: partClass("tabs__list", classNames?.list),
 				"aria-label": label,
 				children: items.map((item, index) => /* @__PURE__ */ jsxs(Tab, {
-					className: "tabs__trigger",
+					className: partClass("tabs__trigger", classNames?.tab),
 					id: item.id,
 					isDisabled: item.isDisabled,
 					children: [
 						showSeparators && index > 0 && /* @__PURE__ */ jsx("span", {
-							className: "tabs__separator",
+							className: partClass("tabs__separator", classNames?.separator),
 							"aria-hidden": "true"
 						}),
 						renderIcon && /* @__PURE__ */ jsx("span", {
-							className: "tabs__icon",
+							className: partClass("tabs__icon", classNames?.icon),
 							"aria-hidden": "true",
 							children: renderIcon(item)
 						}),
 						/* @__PURE__ */ jsx("span", {
-							className: "tabs__label",
+							className: partClass("tabs__label", classNames?.label),
 							children: item.label
 						})
 					]
@@ -1242,7 +1848,7 @@ function Tabs({ label, variant = "primary", size = "md", orientation = "horizont
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "tabs__scroll-button tabs__scroll-button--next",
+				className: partClass("tabs__scroll-button tabs__scroll-button--next", classNames?.scrollButton),
 				"data-tabs-scroll": "next",
 				hidden: true,
 				"aria-label": nextLabel,
@@ -1257,12 +1863,15 @@ function Tabs({ label, variant = "primary", size = "md", orientation = "horizont
 	const content = /* @__PURE__ */ jsxs(Tabs$1, {
 		className: [
 			"tabs",
+			classNames?.root,
+			className,
 			`tabs--${variant === "default" ? "primary" : variant}`,
 			`tabs--align-${align}`,
 			fullWidth && "tabs--full-width",
 			inset === "none" && "tabs--flush",
 			size !== "md" && `tabs--${size}`
 		].filter(Boolean).join(" "),
+		style,
 		id,
 		orientation,
 		dir,
@@ -1277,20 +1886,20 @@ function Tabs({ label, variant = "primary", size = "md", orientation = "horizont
 			}
 		},
 		children: [extras || actions ? /* @__PURE__ */ jsxs("div", {
-			className: "tabs__toolbar",
+			className: partClass("tabs__toolbar", classNames?.toolbar),
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "tabs__navigation",
+				className: partClass("tabs__navigation", classNames?.navigation),
 				children: [list, extras && /* @__PURE__ */ jsx("div", {
-					className: "tabs__extras",
+					className: partClass("tabs__extras", classNames?.extras),
 					children: extras
 				})]
 			}), actions && /* @__PURE__ */ jsx("div", {
-				className: "tabs__actions",
+				className: partClass("tabs__actions", classNames?.actions),
 				children: actions
 			})]
 		}) : list, items.map((item) => /* @__PURE__ */ jsx(TabPanel, {
 			id: item.id,
-			className: "tabs__panel",
+			className: partClass("tabs__panel", classNames?.panel),
 			children: renderPanel(item)
 		}, item.id))]
 	});
@@ -1299,16 +1908,113 @@ function Tabs({ label, variant = "primary", size = "md", orientation = "horizont
 		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
+function TabsRoot({ className, classNames, value, defaultValue, onChange, variant = "primary", size = "md", align = "center", fullWidth, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs$1, {
+		...props,
+		selectedKey: value,
+		defaultSelectedKey: defaultValue,
+		onSelectionChange: onChange ? (key) => onChange(String(key)) : void 0,
+		className: [
+			"tabs",
+			`tabs--${variant === "default" ? "primary" : variant}`,
+			`tabs--align-${align}`,
+			size !== "md" && `tabs--${size}`,
+			fullWidth && "tabs--full-width",
+			classNames?.root,
+			className
+		].filter(Boolean).join(" ")
+	});
+}
+function TabsListContainer({ className, children, previousLabel = "Tab sebelumnya / Previous tabs", nextLabel = "Tab berikutnya / Next tabs", ...props }) {
+	const ref = useRef(null);
+	useEffect(() => ref.current ? mountTabsIndicator(ref.current) : void 0, []);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		ref,
+		className: partClass("tabs__list-container", className),
+		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" })
+				})
+			}),
+			children,
+			/* @__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" })
+				})
+			})
+		]
+	});
+}
+function TabsList(props) {
+	return /* @__PURE__ */ jsx(TabList, {
+		...props,
+		className: composeRenderProps(props.className, (value) => partClass("tabs__list", value))
+	});
+}
+function TabsTab(props) {
+	return /* @__PURE__ */ jsx(Tab, {
+		...props,
+		className: composeRenderProps(props.className, (value) => partClass("tabs__trigger", value))
+	});
+}
+function TabsPanel(props) {
+	return /* @__PURE__ */ jsx(TabPanel, {
+		...props,
+		className: composeRenderProps(props.className, (value) => partClass("tabs__panel", value))
+	});
+}
+function TabsIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className: partClass("tabs__indicator", className)
+	});
+}
+function TabsSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className: partClass("tabs__separator", className)
+	});
+}
+function TabsComponent(props) {
+	return "items" in props ? /* @__PURE__ */ jsx(CompactTabs, { ...props }) : /* @__PURE__ */ jsx(TabsRoot, { ...props });
+}
+var Tabs = /* @__PURE__ */ Object.assign(TabsComponent, {
+	Root: TabsRoot,
+	ListContainer: TabsListContainer,
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel,
+	Indicator: TabsIndicator,
+	Separator: TabsSeparator
+});
+//#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);
@@ -1328,7 +2034,7 @@ function paginationModel(totalItems, pageSize, value, siblingCount = 1) {
 }
 //#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 }) {
+function CompactPagination({ className, style, classNames, 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) {
@@ -1337,25 +2043,26 @@ function Pagination({ totalItems, pageSize = 10, value, defaultValue = 1, onChan
 		onChange?.(next);
 	}
 	return /* @__PURE__ */ jsxs("nav", {
-		className: "pagination",
+		className: partClass(partClass("pagination", classNames?.root), className),
+		style,
 		"aria-label": label,
 		dir,
 		id,
 		children: [
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "pagination__button",
+				className: partClass("pagination__button", classNames?.button),
 				disabled: isDisabled || current === 1,
 				onClick: () => change(current - 1),
 				children: previousLabel
 			}),
 			entries.map((entry) => typeof entry === "string" ? /* @__PURE__ */ jsx("span", {
-				className: "pagination__gap",
+				className: partClass("pagination__gap", classNames?.gap),
 				"aria-hidden": "true",
 				children: "..."
 			}, entry) : /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "pagination__button",
+				className: partClass("pagination__button", classNames?.button),
 				"aria-label": `${pageLabel} ${entry}`,
 				"aria-current": entry === current ? "page" : void 0,
 				disabled: isDisabled,
@@ -1364,13 +2071,13 @@ function Pagination({ totalItems, pageSize = 10, value, defaultValue = 1, onChan
 			}, entry)),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "pagination__button",
+				className: partClass("pagination__button", classNames?.button),
 				disabled: isDisabled || current === count,
 				onClick: () => change(current + 1),
 				children: nextLabel
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: "pagination__summary",
+				className: partClass("pagination__summary", classNames?.summary),
 				"aria-live": "polite",
 				children: [
 					current,
@@ -1381,27 +2088,538 @@ function Pagination({ totalItems, pageSize = 10, value, defaultValue = 1, onChan
 		]
 	});
 }
+var PaginationContext = createContext(null);
+function usePagination() {
+	const context = useContext(PaginationContext);
+	if (!context) throw new Error("Pagination parts must be used inside Pagination.Root.");
+	return context;
+}
+function PaginationRoot({ totalItems, pageSize = 10, value, defaultValue = 1, onChange, isDisabled = false, siblingCount = 1, label = "Navigasi halaman / Pagination", className, classNames, style, dir, id, children }) {
+	const [local, setLocal] = useState(defaultValue);
+	const { current, count } = paginationModel(totalItems, pageSize, value ?? local, siblingCount);
+	function change(page) {
+		if (isDisabled || !Number.isInteger(page) || page < 1 || page > count || page === current) return;
+		setLocal(page);
+		onChange?.(page);
+	}
+	return /* @__PURE__ */ jsx(PaginationContext.Provider, {
+		value: {
+			current,
+			count,
+			disabled: isDisabled,
+			change
+		},
+		children: /* @__PURE__ */ jsx("nav", {
+			id,
+			dir,
+			style,
+			"aria-label": label,
+			className: partClass(partClass("pagination", classNames?.root), className),
+			children
+		})
+	});
+}
+function PaginationPageButton({ page, className, onClick, disabled, ...props }) {
+	const state = usePagination();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className: partClass("pagination__button", className),
+		disabled: disabled || state.disabled || !Number.isInteger(page) || page < 1 || page > state.count,
+		"aria-current": page === state.current ? "page" : void 0,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) state.change(page);
+		}
+	});
+}
+function PaginationPrevious(props) {
+	const state = usePagination();
+	return /* @__PURE__ */ jsx(PaginationPageButton, {
+		"aria-label": props.children ? void 0 : "Halaman sebelumnya / Previous page",
+		...props,
+		page: state.current - 1
+	});
+}
+function PaginationNext(props) {
+	const state = usePagination();
+	return /* @__PURE__ */ jsx(PaginationPageButton, {
+		"aria-label": props.children ? void 0 : "Halaman berikutnya / Next page",
+		...props,
+		page: state.current + 1
+	});
+}
+function PaginationSummary({ className, children, ...props }) {
+	const state = usePagination();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-live": "polite",
+		className: partClass("pagination__summary", className),
+		children: children ?? `${state.current} / ${state.count}`
+	});
+}
+function PaginationContent(props) {
+	return /* @__PURE__ */ jsx("div", { ...props });
+}
+function PaginationItem(props) {
+	return /* @__PURE__ */ jsx("span", { ...props });
+}
+function PaginationEllipsis({ className, children = "…", ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className: partClass("pagination__gap", className),
+		children
+	});
+}
+function PaginationComponent(props) {
+	return "children" in props ? /* @__PURE__ */ jsx(PaginationRoot, { ...props }) : /* @__PURE__ */ jsx(CompactPagination, { ...props });
+}
+var Pagination = /* @__PURE__ */ Object.assign(PaginationComponent, {
+	Root: PaginationRoot,
+	Content: PaginationContent,
+	Item: PaginationItem,
+	PageButton: PaginationPageButton,
+	Previous: PaginationPrevious,
+	Next: PaginationNext,
+	Summary: PaginationSummary,
+	Ellipsis: PaginationEllipsis
+});
+//#endregion
+//#region src/structural-parts.tsx
+/** Preserve the primitive's complete props, ref and state-based className contract. */
+function ariaPart(Component, base) {
+	return function Part({ className, ...props }) {
+		return createElement(Component, {
+			...props,
+			className: typeof className === "function" ? (state) => partClass(base, className(state)) : partClass(base, className)
+		});
+	};
+}
+function divPart(base) {
+	return function Part({ className, ...props }) {
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			className: partClass(base, className)
+		});
+	};
+}
+function DialogRoot({ open, defaultOpen, ...props }) {
+	return /* @__PURE__ */ jsx(DialogTrigger, {
+		...props,
+		isOpen: open,
+		defaultOpen
+	});
+}
+var DialogTriggerPart = ariaPart(Button$1, "button button--secondary");
+var DialogBackdrop = ariaPart(ModalOverlay, "dialog__backdrop dialog__viewport");
+var DialogPanel = ariaPart(Modal, "dialog__panel");
+var OverlayDescriptionContext = createContext(null);
+function DescribedDialog({ base, ...props }) {
+	const [descriptions, setDescriptions] = useState([]);
+	const register = useCallback((id) => {
+		setDescriptions((current) => current.includes(id) ? current : [...current, id]);
+		return () => setDescriptions((current) => current.filter((value) => value !== id));
+	}, []);
+	const describedBy = [props["aria-describedby"], ...descriptions].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsx(OverlayDescriptionContext.Provider, {
+		value: register,
+		children: /* @__PURE__ */ jsx(Dialog$1, {
+			...props,
+			"aria-describedby": describedBy,
+			className: partClass(base, props.className)
+		})
+	});
+}
+function DialogContent(props) {
+	return /* @__PURE__ */ jsx(DescribedDialog, {
+		...props,
+		base: "dialog__content"
+	});
+}
+var OverlayHeader = divPart("overlay__header");
+var OverlayBody = divPart("overlay__body");
+var OverlayFooter = divPart("overlay__footer");
+function OverlayHeading({ level = 2, slot = "title", ...props }) {
+	return /* @__PURE__ */ jsx(Heading, {
+		...props,
+		level,
+		slot,
+		className: partClass("overlay__title", props.className)
+	});
+}
+function OverlayDescription({ className, slot = "description", id, ...props }) {
+	const generated = useId();
+	const descriptionId = id ?? generated;
+	const register = useContext(OverlayDescriptionContext);
+	useEffect(() => register?.(descriptionId), [descriptionId, register]);
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		id: descriptionId,
+		slot,
+		className: partClass("overlay__description", className)
+	});
+}
+function DialogCloseButton({ slot = "close", ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		slot,
+		className: composeRenderProps(props.className, (value) => partClass("dialog__close", value))
+	});
+}
+var PopoverTrigger = DialogTriggerPart;
+var PopoverContent = ariaPart(Popover$2, "popover__panel");
+function PopoverDialog(props) {
+	return /* @__PURE__ */ jsx(DescribedDialog, {
+		...props,
+		base: "popover__content"
+	});
+}
+function PopoverCloseButton({ slot = "close", ...props }) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...props,
+		slot,
+		className: composeRenderProps(props.className, (value) => partClass("button button--secondary", value))
+	});
+}
+function TooltipRoot({ open, defaultOpen, ...props }) {
+	return /* @__PURE__ */ jsx(TooltipTrigger, {
+		...props,
+		isOpen: open,
+		defaultOpen
+	});
+}
+var TooltipTriggerPart = DialogTriggerPart;
+var TooltipContent = ariaPart(Tooltip$1, "tooltip__panel");
+function DropdownRoot({ open, defaultOpen, ...props }) {
+	return /* @__PURE__ */ jsx(MenuTrigger, {
+		...props,
+		isOpen: open,
+		defaultOpen
+	});
+}
+var DropdownTrigger = DialogTriggerPart;
+var DropdownPopover = ariaPart(Popover$2, "menu__panel");
+function DropdownList(props) {
+	return /* @__PURE__ */ jsx(Menu, {
+		...props,
+		className: composeRenderProps(props.className, (value) => partClass("menu__list", value))
+	});
+}
+var DropdownItem = ariaPart(MenuItem, "menu__item");
+var DropdownSection = MenuSection;
+var DropdownHeading = ariaPart(Header$1, "menu__heading");
+var DropdownSeparator = ariaPart(Separator$1, "menu__separator");
+var DropdownSubmenuTrigger = SubmenuTrigger;
+function DropdownItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		"aria-hidden": "true",
+		className: partClass("menu__check", className),
+		children: children ?? /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5" })
+	});
+}
+function DropdownSubmenuIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		"aria-hidden": "true",
+		className: partClass("menu__arrow", className),
+		children: children ?? /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+	});
+}
+function TableRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("table", {
+		...props,
+		className: partClass("table", className)
+	});
+}
+function TableScrollContainer({ className, "aria-label": label = "Tabel / Table", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "region",
+		tabIndex: 0,
+		"aria-label": label,
+		className: partClass("table__scroll", className)
+	});
+}
+function TableHeader(props) {
+	return /* @__PURE__ */ jsx("thead", { ...props });
+}
+function TableBody(props) {
+	return /* @__PURE__ */ jsx("tbody", { ...props });
+}
+function TableFooter(props) {
+	return /* @__PURE__ */ jsx("tfoot", { ...props });
+}
+function TableRow(props) {
+	return /* @__PURE__ */ jsx("tr", { ...props });
+}
+function TableColumn({ scope = "col", ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		...props,
+		scope
+	});
+}
+function TableCell(props) {
+	return /* @__PURE__ */ jsx("td", { ...props });
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		...props,
+		className: partClass("table__caption", className)
+	});
+}
 //#endregion
 //#region src/Table.tsx
-function Table({ caption, children, className, ...props }) {
+function CompactTable({ caption, children, className, classNames, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "table__scroll",
+		className: partClass("table__scroll", classNames?.scroll),
 		role: "region",
 		"aria-label": caption,
 		tabIndex: 0,
 		children: /* @__PURE__ */ jsxs("table", {
 			...props,
-			className: ["table", className].filter(Boolean).join(" "),
+			className: partClass(partClass("table", classNames?.root), className),
 			children: [/* @__PURE__ */ jsx("caption", {
-				className: "table__caption",
+				className: partClass("table__caption", classNames?.caption),
 				children: caption
 			}), children]
 		})
 	});
 }
+var Table = /* @__PURE__ */ Object.assign(CompactTable, {
+	Root: TableRoot,
+	ScrollContainer: TableScrollContainer,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	Column: TableColumn,
+	Cell: TableCell,
+	Caption: TableCaption
+});
+//#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/layout-parts.tsx
+function EmptyRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("empty", className)
+	});
+}
+function EmptyTitle({ className, headingLevel = 3, ...props }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsx(Heading, {
+		...props,
+		className: partClass("empty__title", className)
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: partClass("empty__description", className)
+	});
+}
+function EmptyActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("empty__actions", className)
+	});
+}
+var SidebarContext = createContext(null);
+function useSidebar() {
+	const state = useContext(SidebarContext);
+	if (!state) throw new Error("Sidebar parts must be used inside Sidebar.Root.");
+	return state;
+}
+function SidebarRoot({ label, open, defaultOpen = true, onOpenChange, id, className, ...props }) {
+	const generated = useId();
+	const { visible, change } = useDisclosure(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: {
+			visible,
+			change,
+			label,
+			navId: `${id ?? generated}-nav`
+		},
+		children: /* @__PURE__ */ jsx("aside", {
+			...props,
+			id,
+			className: partClass("sidebar", className)
+		})
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("sidebar__header", className)
+	});
+}
+function SidebarTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("sidebar__title", className)
+	});
+}
+function SidebarToggle({ className, onClick, ...props }) {
+	const state = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className: partClass("sidebar__toggle", className),
+		"aria-expanded": state.visible,
+		"aria-controls": state.navId,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) state.change(!state.visible);
+		}
+	});
+}
+function SidebarNavigation(props) {
+	const state = useSidebar();
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		id: state.navId,
+		"aria-label": state.label,
+		hidden: !state.visible
+	});
+}
+function SidebarList(props) {
+	return /* @__PURE__ */ jsx("ul", { ...props });
+}
+function SidebarItem(props) {
+	return /* @__PURE__ */ jsx("li", { ...props });
+}
+function SidebarLink({ className, isDisabled, href, onClick, children, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		href: isDisabled ? void 0 : href,
+		"aria-disabled": isDisabled || props["aria-disabled"],
+		tabIndex: isDisabled ? -1 : props.tabIndex,
+		onClick: (event) => {
+			if (isDisabled) event.preventDefault();
+			else onClick?.(event);
+		},
+		className: partClass("sidebar__link", className),
+		children
+	});
+}
+function ChartRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("figure", {
+		...props,
+		className: partClass("chart", className)
+	});
+}
+function ChartTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("figcaption", {
+		...props,
+		className: partClass("chart__title", className)
+	});
+}
+function ChartDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: partClass("chart__description", className)
+	});
+}
+function ChartPlot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		...props,
+		"aria-hidden": "true",
+		focusable: "false",
+		className: partClass("chart__plot", className)
+	});
+}
+var DataTableContext = createContext(null);
+function DataTableRoot({ sort = null, onSortChange, isLoading, isDisabled, className, ...props }) {
+	return /* @__PURE__ */ jsx(DataTableContext.Provider, {
+		value: {
+			sort,
+			onSortChange,
+			disabled: !!(isLoading || isDisabled)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"aria-busy": isLoading || void 0,
+			className: partClass("data-table", className)
+		})
+	});
+}
+function DataTableSortButton({ columnId, className, onClick, disabled, ...props }) {
+	const state = useContext(DataTableContext);
+	if (!state) throw new Error("DataTable.SortButton must be used inside DataTable.Root.");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		disabled: disabled || state.disabled,
+		className: partClass("table__sort", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented && !state.disabled) state.onSortChange?.({
+				columnId,
+				direction: state.sort?.columnId === columnId && state.sort.direction === "ascending" ? "descending" : "ascending"
+			});
+		}
+	});
+}
+function DataTableColumn({ columnId, scope = "col", ...props }) {
+	const state = useContext(DataTableContext);
+	const sort = columnId && state ? state.sort?.columnId === columnId ? state.sort.direction : "none" : props["aria-sort"];
+	return /* @__PURE__ */ jsx("th", {
+		...props,
+		scope,
+		"aria-sort": sort
+	});
+}
+function DataTableEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		...props,
+		className: partClass("table__empty", className)
+	});
+}
+function DataTableStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		role: "status",
+		className: partClass("data-table__status", className)
+	});
+}
+function DataTableError({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		role: "alert",
+		className: partClass("input__error", className)
+	});
+}
 //#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 CompactDataTable({ className, style, classNames, 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?.({
@@ -1410,147 +2628,277 @@ function DataTable({ caption, columns, rows, sort = null, onSortChange, isLoadin
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "data-table",
+		className: partClass(partClass("data-table", classNames?.root), className),
+		style,
 		dir,
 		id,
 		children: [
 			/* @__PURE__ */ jsxs(Table, {
+				className: classNames?.table,
+				classNames: {
+					scroll: classNames?.scroll,
+					caption: classNames?.caption
+				},
 				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
-				}) }) })]
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: classNames?.header,
+					children: /* @__PURE__ */ jsx("tr", {
+						className: classNames?.row,
+						children: columns.map((column) => /* @__PURE__ */ jsx("th", {
+							className: classNames?.column,
+							scope: "col",
+							"aria-sort": column.sortable ? sort?.columnId === column.id ? sort.direction : "none" : void 0,
+							children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: partClass("table__sort", classNames?.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", {
+					className: classNames?.body,
+					children: rows.length ? rows.map((row) => /* @__PURE__ */ jsx("tr", {
+						className: classNames?.row,
+						children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+							className: classNames?.cell,
+							children: renderCell ? renderCell(row, column) : row.cells[column.id] ?? ""
+						}, column.id))
+					}, row.id)) : /* @__PURE__ */ jsx("tr", {
+						className: classNames?.row,
+						children: /* @__PURE__ */ jsx("td", {
+							colSpan: Math.max(1, columns.length),
+							className: partClass("table__empty", classNames?.empty),
+							children: isLoading ? loadingMessage : errorMessage || emptyMessage
+						})
+					})
+				})]
 			}),
 			isLoading && /* @__PURE__ */ jsx("p", {
-				className: "data-table__status",
+				className: partClass("data-table__status", classNames?.status),
 				role: "status",
 				children: loadingMessage
 			}),
 			errorMessage && !isLoading && /* @__PURE__ */ jsx("p", {
-				className: "input__error",
+				className: partClass("input__error", classNames?.error),
 				role: "alert",
 				children: errorMessage
 			})
 		]
 	});
 }
+function DataTableComponent(props) {
+	return "columns" in props ? /* @__PURE__ */ jsx(CompactDataTable, { ...props }) : /* @__PURE__ */ jsx(DataTableRoot, { ...props });
+}
+var DataTable = /* @__PURE__ */ Object.assign(DataTableComponent, {
+	Root: DataTableRoot,
+	SortButton: DataTableSortButton,
+	Status: DataTableStatus,
+	Error: DataTableError,
+	Table: TableRoot,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	Column: DataTableColumn,
+	Empty: DataTableEmpty,
+	Cell: TableCell,
+	Caption: TableCaption,
+	ScrollContainer: TableScrollContainer
+});
 //#endregion
 //#region src/Alert.tsx
-function Alert({ title, description, tone = "info", announcement = "off", children, actions, id }) {
+function AlertRoot({ className, style, classNames, title, description, tone = "info", announcement = "off", children, actions, id }) {
 	return /* @__PURE__ */ jsxs("div", {
 		id,
-		className: "alert",
+		className: partClass(partClass("alert", classNames?.root), className),
+		style,
 		"data-tone": tone,
 		role: announcement === "polite" ? "status" : announcement === "assertive" ? "alert" : void 0,
 		children: [
-			/* @__PURE__ */ jsx("p", {
-				className: "alert__title",
+			title && /* @__PURE__ */ jsx("p", {
+				className: partClass("alert__title", classNames?.title),
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "alert__description",
+				className: partClass("alert__description", classNames?.description),
 				children: description
 			}),
 			children,
 			actions && /* @__PURE__ */ jsx("div", {
-				className: "alert__actions",
+				className: partClass("alert__actions", classNames?.actions),
 				children: actions
 			})
 		]
 	});
 }
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: partClass("alert__title", className)
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: partClass("alert__description", className)
+	});
+}
+function AlertContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("alert__content", className)
+	});
+}
+function AlertActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("alert__actions", className)
+	});
+}
+function AlertIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className: partClass("alert__indicator", className)
+	});
+}
+var Alert = /* @__PURE__ */ Object.assign(AlertRoot, {
+	Root: AlertRoot,
+	Title: AlertTitle,
+	Description: AlertDescription,
+	Content: AlertContent,
+	Actions: AlertActions,
+	Indicator: AlertIndicator
+});
 //#endregion
 //#region src/Empty.tsx
-function Empty({ title, description, headingLevel = 3, actions, children, id }) {
+function CompactEmpty({ className, style, classNames, title, description, headingLevel = 3, actions, children, id }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs("div", {
 		id,
-		className: "empty",
+		className: partClass(partClass("empty", classNames?.root), className),
+		style,
 		children: [
 			/* @__PURE__ */ jsx(Heading, {
-				className: "empty__title",
+				className: partClass("empty__title", classNames?.title),
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "empty__description",
+				className: partClass("empty__description", classNames?.description),
 				children: description
 			}),
 			children,
 			actions && /* @__PURE__ */ jsx("div", {
-				className: "empty__actions",
+				className: partClass("empty__actions", classNames?.actions),
 				children: actions
 			})
 		]
 	});
 }
+var Empty = /* @__PURE__ */ Object.assign(CompactEmpty, {
+	Root: EmptyRoot,
+	Title: EmptyTitle,
+	Description: EmptyDescription,
+	Actions: EmptyActions
+});
 //#endregion
 //#region src/Breadcrumb.tsx
-function Breadcrumb({ items, label = "Jejak halaman", dir, id }) {
+function CompactBreadcrumb({ className, style, classNames, items, label = "Jejak halaman", dir, id }) {
 	return /* @__PURE__ */ jsx("nav", {
 		id,
-		className: "breadcrumb",
+		className: partClass(partClass("breadcrumb", classNames?.root), className),
+		style,
 		"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)) })
+		children: /* @__PURE__ */ jsx("ol", {
+			className: classNames?.list,
+			children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+				className: classNames?.item,
+				children: [index > 0 && /* @__PURE__ */ jsx("span", {
+					className: partClass("breadcrumb__separator", classNames?.separator),
+					"aria-hidden": "true",
+					children: "/"
+				}), index === items.length - 1 ? /* @__PURE__ */ jsx("span", {
+					className: classNames?.current,
+					"aria-current": "page",
+					children: item.label
+				}) : item.href ? /* @__PURE__ */ jsx("a", {
+					className: classNames?.link,
+					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
-	};
+function BreadcrumbRoot({ className, label = "Jejak halaman / Breadcrumbs", ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"aria-label": label,
+		className: partClass("breadcrumb", className)
+	});
+}
+function BreadcrumbList(props) {
+	return /* @__PURE__ */ jsx("ol", { ...props });
+}
+function BreadcrumbItemPart(props) {
+	return /* @__PURE__ */ jsx("li", { ...props });
+}
+function BreadcrumbLink({ children, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		children
+	});
+}
+function BreadcrumbCurrent(props) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-current": "page"
+	});
 }
+function BreadcrumbSeparator({ className, children = "/", ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className: partClass("breadcrumb__separator", className),
+		children
+	});
+}
+function BreadcrumbComponent(props) {
+	return "items" in props ? /* @__PURE__ */ jsx(CompactBreadcrumb, { ...props }) : /* @__PURE__ */ jsx(BreadcrumbRoot, { ...props });
+}
+var Breadcrumb = /* @__PURE__ */ Object.assign(BreadcrumbComponent, {
+	Root: BreadcrumbRoot,
+	List: BreadcrumbList,
+	Item: BreadcrumbItemPart,
+	Link: BreadcrumbLink,
+	Current: BreadcrumbCurrent,
+	Separator: BreadcrumbSeparator
+});
 //#endregion
 //#region src/Sidebar.tsx
-function Sidebar({ label, items, currentId, open, defaultOpen = true, onOpenChange, toggleLabel = "Menu navigasi", dir, id }) {
+function CompactSidebar({ className, style, classNames, 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",
+		className: partClass(partClass("sidebar", classNames?.root), className),
+		style,
 		dir,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "sidebar__header",
+			className: partClass("sidebar__header", classNames?.header),
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "sidebar__title",
+				className: partClass("sidebar__title", classNames?.title),
 				children: label
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "sidebar__toggle",
+				className: partClass("sidebar__toggle", classNames?.toggle),
 				"aria-label": toggleLabel,
 				"aria-expanded": visible,
 				"aria-controls": navId,
@@ -1561,22 +2909,42 @@ function Sidebar({ label, items, currentId, open, defaultOpen = true, onOpenChan
 				})
 			})]
 		}), /* @__PURE__ */ jsx("nav", {
+			className: classNames?.navigation,
 			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)) })
+			children: /* @__PURE__ */ jsx("ul", {
+				className: classNames?.list,
+				children: items.map((item) => /* @__PURE__ */ jsx("li", {
+					className: classNames?.item,
+					children: item.isDisabled ? /* @__PURE__ */ jsx("span", {
+						className: partClass("sidebar__link", classNames?.link),
+						"aria-disabled": "true",
+						children: item.label
+					}) : /* @__PURE__ */ jsx("a", {
+						className: partClass("sidebar__link", classNames?.link),
+						href: item.href,
+						"aria-current": item.id === currentId ? "page" : void 0,
+						children: item.label
+					})
+				}, item.id))
+			})
 		})]
 	});
 }
+function SidebarComponent(props) {
+	return "items" in props ? /* @__PURE__ */ jsx(CompactSidebar, { ...props }) : /* @__PURE__ */ jsx(SidebarRoot, { ...props });
+}
+var Sidebar = /* @__PURE__ */ Object.assign(SidebarComponent, {
+	Root: SidebarRoot,
+	Header: SidebarHeader,
+	Title: SidebarTitle,
+	Toggle: SidebarToggle,
+	Navigation: SidebarNavigation,
+	List: SidebarList,
+	Item: SidebarItem,
+	Link: SidebarLink
+});
 //#endregion
 //#region src/chart-model.ts
 function chartModel(data) {
@@ -1597,53 +2965,54 @@ function chartModel(data) {
 }
 //#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 }) {
+function CompactChart({ className, style, classNames, 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",
+		className: partClass(partClass("chart", classNames?.root), className),
+		style,
 		dir,
 		"aria-labelledby": labelId,
 		children: [
 			/* @__PURE__ */ jsx("figcaption", {
 				id: labelId,
-				className: "chart__title",
+				className: partClass("chart__title", classNames?.title),
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "chart__description",
+				className: partClass("chart__description", classNames?.description),
 				children: description
 			}),
 			model.items.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("svg", {
-				className: "chart__plot",
+				className: partClass("chart__plot", classNames?.plot),
 				viewBox: "0 0 600 210",
 				"aria-hidden": "true",
 				focusable: "false",
 				children: [
 					/* @__PURE__ */ jsx("line", {
-						className: "chart__axis",
+						className: partClass("chart__axis", classNames?.axis),
 						x1: "20",
 						x2: "580",
 						y1: model.baseline,
 						y2: model.baseline
 					}),
 					type === "line" ? /* @__PURE__ */ jsx("polyline", {
-						className: "chart__line",
+						className: partClass("chart__line", classNames?.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",
+						className: partClass("chart__bar", classNames?.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",
+						className: partClass("chart__bar", classNames?.bar),
 						cx: item.x,
 						cy: item.y,
 						r: "4"
 					}), model.items.length <= 12 && /* @__PURE__ */ jsx("text", {
-						className: "chart__label",
+						className: partClass("chart__label", classNames?.label),
 						x: item.x,
 						y: "202",
 						textAnchor: "middle",
@@ -1652,6 +3021,7 @@ function Chart({ label, data, type = "bar", description, locale = "id-ID", forma
 				]
 			}), /* @__PURE__ */ jsxs(Table, {
 				caption: label,
+				className: classNames?.table,
 				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
 					scope: "col",
 					children: categoryLabel
@@ -1662,13 +3032,26 @@ function Chart({ label, data, type = "bar", description, locale = "id-ID", forma
 					scope: "row",
 					children: item.label
 				}), /* @__PURE__ */ jsx("td", { children: format.format(item.value) })] }, item.id)) })]
-			})] }) : /* @__PURE__ */ jsx(Empty, { title: emptyMessage })
+			})] }) : /* @__PURE__ */ jsx(Empty, {
+				title: emptyMessage,
+				className: classNames?.empty
+			})
 		]
 	});
 }
+function ChartComponent(props) {
+	return "data" in props ? /* @__PURE__ */ jsx(CompactChart, { ...props }) : /* @__PURE__ */ jsx(ChartRoot, { ...props });
+}
+var Chart = /* @__PURE__ */ Object.assign(ChartComponent, {
+	Root: ChartRoot,
+	Title: ChartTitle,
+	Description: ChartDescription,
+	Plot: ChartPlot
+});
 //#endregion
 //#region src/Dialog.tsx
-function Dialog(props) {
+function CompactDialog(props) {
+	const { className, style, classNames } = 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();
@@ -1678,12 +3061,12 @@ function Dialog(props) {
 			isOpen: visible,
 			onOpenChange: change,
 			children: [/* @__PURE__ */ jsx(Button$1, {
-				className: `button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`,
+				className: partClass(`button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`, classNames?.trigger),
 				"aria-label": triggerLabel,
 				isDisabled,
 				children: props.triggerContent ?? triggerLabel
 			}), /* @__PURE__ */ jsx(ModalOverlay, {
-				className: "dialog__backdrop dialog__viewport",
+				className: partClass("dialog__backdrop dialog__viewport", classNames?.backdrop),
 				"data-size": size,
 				"data-placement": placement,
 				"data-scroll": scroll,
@@ -1691,29 +3074,30 @@ function Dialog(props) {
 				isDismissable,
 				isKeyboardDismissDisabled,
 				children: /* @__PURE__ */ jsx(Modal, {
-					className: "dialog__panel",
+					className: partClass("dialog__panel", classNames?.panel),
 					dir,
 					children: /* @__PURE__ */ jsxs(Dialog$1, {
-						className: "dialog__content",
+						className: partClass(partClass(partClass("dialog__content", classNames?.content), classNames?.root), className),
+						style,
 						"aria-describedby": description ? descriptionId : void 0,
 						children: [
 							/* @__PURE__ */ jsxs("div", {
-								className: "overlay__header",
+								className: partClass("overlay__header", classNames?.header),
 								"data-close-button": showCloseButton || void 0,
 								children: [
 									/* @__PURE__ */ jsx(Heading, {
 										level: 2,
 										slot: "title",
-										className: "overlay__title",
+										className: partClass("overlay__title", classNames?.title),
 										children: title
 									}),
 									description && /* @__PURE__ */ jsx("p", {
 										id: descriptionId,
-										className: "overlay__description",
+										className: partClass("overlay__description", classNames?.description),
 										children: description
 									}),
 									showCloseButton && /* @__PURE__ */ jsx(Button$1, {
-										className: "dialog__close",
+										className: partClass("dialog__close", classNames?.close),
 										"aria-label": props.closeIconLabel ?? `${closeLabel} dialog`,
 										onPress: () => change(false),
 										children: /* @__PURE__ */ jsx(CloseIcon, {})
@@ -1721,13 +3105,13 @@ function Dialog(props) {
 								]
 							}),
 							/* @__PURE__ */ jsx("div", {
-								className: "overlay__body",
+								className: partClass("overlay__body", classNames?.body),
 								children
 							}),
 							(footer || showFooterClose) && /* @__PURE__ */ jsxs("div", {
-								className: "overlay__footer",
+								className: partClass("overlay__footer", classNames?.footer),
 								children: [footer, showFooterClose && /* @__PURE__ */ jsx(Button$1, {
-									className: "button button--secondary",
+									className: partClass("button button--secondary", classNames?.footerClose),
 									onPress: () => change(false),
 									children: closeLabel
 								})]
@@ -1739,6 +3123,22 @@ function Dialog(props) {
 		})
 	});
 }
+function DialogComponent(props) {
+	return "triggerLabel" in props ? /* @__PURE__ */ jsx(CompactDialog, { ...props }) : /* @__PURE__ */ jsx(DialogRoot, { ...props });
+}
+var Dialog = /* @__PURE__ */ Object.assign(DialogComponent, {
+	Root: DialogRoot,
+	Trigger: DialogTriggerPart,
+	Backdrop: DialogBackdrop,
+	Panel: DialogPanel,
+	Content: DialogContent,
+	Header: OverlayHeader,
+	Heading: OverlayHeading,
+	Description: OverlayDescription,
+	Body: OverlayBody,
+	Footer: OverlayFooter,
+	CloseButton: DialogCloseButton
+});
 //#endregion
 //#region src/overlay-model.ts
 function menuGroups(items) {
@@ -1767,7 +3167,8 @@ function menuSelection(keys, items, mode) {
 }
 //#endregion
 //#region src/DropdownMenu.tsx
-function DropdownMenu(props) {
+function CompactDropdownMenu(props) {
+	const { className, style, classNames } = 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 ?? []);
@@ -1790,30 +3191,30 @@ function DropdownMenu(props) {
 	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" }),
+			selectionMode !== "none" && !item.children?.length && /* @__PURE__ */ jsx(CheckIcon, { className: partClass("menu__check", classNames?.check) }),
 			icon && /* @__PURE__ */ jsx("span", {
-				className: "menu__icon",
+				className: partClass("menu__icon", classNames?.icon),
 				"aria-hidden": "true",
 				children: icon
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				className: "menu__text",
+				className: partClass("menu__text", classNames?.text),
 				children: [/* @__PURE__ */ jsx("span", { children: item.label }), item.description && /* @__PURE__ */ jsx("span", {
-					className: "menu__description",
+					className: partClass("menu__description", classNames?.description),
 					children: item.description
 				})]
 			}),
 			item.shortcut && /* @__PURE__ */ jsx("kbd", {
-				className: "menu__shortcut",
+				className: partClass("menu__shortcut", classNames?.shortcut),
 				"aria-hidden": "true",
 				children: item.shortcut
 			}),
-			!!item.children?.length && /* @__PURE__ */ jsx(ChevronIcon, { className: "menu__arrow" })
+			!!item.children?.length && /* @__PURE__ */ jsx(ChevronIcon, { className: partClass("menu__arrow", classNames?.arrow) })
 		] });
 	}
 	function renderMenu(level, label, blocked = false) {
 		return /* @__PURE__ */ jsx(Menu, {
-			className: "menu__list",
+			className: partClass("menu__list", classNames?.list),
 			"aria-label": label,
 			selectionMode,
 			selectedKeys: selected,
@@ -1827,24 +3228,24 @@ function DropdownMenu(props) {
 					const row = /* @__PURE__ */ jsx(MenuItem, {
 						id: item.id,
 						textValue: item.label,
-						className: "menu__item",
+						className: partClass("menu__item", classNames?.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",
+						className: partClass("menu__panel", classNames?.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, {
+				return [index > 0 ? /* @__PURE__ */ jsx(Separator$1, { className: partClass("menu__separator", classNames?.separator) }, `${group.key}-separator`) : null, /* @__PURE__ */ jsxs(MenuSection, {
 					"aria-label": group.label,
-					children: [group.label && /* @__PURE__ */ jsx(Header, {
-						className: "menu__heading",
+					children: [group.label && /* @__PURE__ */ jsx(Header$1, {
+						className: partClass("menu__heading", classNames?.heading),
 						children: group.label
 					}), rows]
 				}, group.key)];
@@ -1857,12 +3258,13 @@ function DropdownMenu(props) {
 			isOpen: visible,
 			onOpenChange: change,
 			children: [/* @__PURE__ */ jsx(Button$1, {
-				className: `button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`,
+				style,
+				className: partClass(partClass(partClass(`button button--${props.triggerVariant ?? "secondary"}${props.triggerIconOnly ? " button--icon-only" : ""}`, classNames?.trigger), classNames?.root), className),
 				"aria-label": triggerLabel,
 				isDisabled: isDisabled || !items.length,
 				children: props.triggerContent ?? triggerLabel
 			}), /* @__PURE__ */ jsx(Popover$2, {
-				className: "menu__panel",
+				className: partClass("menu__panel", classNames?.panel),
 				placement: popoverPlacement,
 				offset: 8,
 				containerPadding: 16,
@@ -1872,9 +3274,25 @@ function DropdownMenu(props) {
 		})
 	});
 }
+function DropdownMenuComponent(props) {
+	return "triggerLabel" in props ? /* @__PURE__ */ jsx(CompactDropdownMenu, { ...props }) : /* @__PURE__ */ jsx(DropdownRoot, { ...props });
+}
+var DropdownMenu = /* @__PURE__ */ Object.assign(DropdownMenuComponent, {
+	Root: DropdownRoot,
+	Trigger: DropdownTrigger,
+	Popover: DropdownPopover,
+	Menu: DropdownList,
+	Item: DropdownItem,
+	Section: DropdownSection,
+	Heading: DropdownHeading,
+	Separator: DropdownSeparator,
+	ItemIndicator: DropdownItemIndicator,
+	SubmenuTrigger: DropdownSubmenuTrigger,
+	SubmenuIndicator: DropdownSubmenuIndicator
+});
 //#endregion
 //#region src/Popover.tsx
-function Popover({ triggerLabel, title, description, children, open, defaultOpen = false, onOpenChange, isDisabled = false, closeLabel = "Tutup", dir }) {
+function CompactPopover({ className, style, classNames, 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,
@@ -1882,39 +3300,40 @@ function Popover({ triggerLabel, title, description, children, open, defaultOpen
 			isOpen: visible,
 			onOpenChange: change,
 			children: [/* @__PURE__ */ jsx(Button$1, {
-				className: "button button--secondary",
+				className: partClass("button button--secondary", classNames?.trigger),
 				isDisabled,
 				children: triggerLabel
 			}), /* @__PURE__ */ jsx(Popover$2, {
-				className: "popover__panel",
+				className: partClass(partClass(partClass("popover__panel", classNames?.panel), classNames?.root), className),
+				style,
 				isNonModal: true,
 				placement: "bottom start",
 				offset: 8,
 				containerPadding: 16,
 				dir,
 				children: /* @__PURE__ */ jsxs(Dialog$1, {
-					className: "popover__content",
+					className: partClass("popover__content", classNames?.content),
 					"aria-describedby": description ? descriptionId : void 0,
 					children: [
 						/* @__PURE__ */ jsx(Heading, {
 							level: 2,
 							slot: "title",
-							className: "overlay__title",
+							className: partClass("overlay__title", classNames?.title),
 							children: title
 						}),
 						description && /* @__PURE__ */ jsx("p", {
 							id: descriptionId,
-							className: "overlay__description",
+							className: partClass("overlay__description", classNames?.description),
 							children: description
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "overlay__body",
+							className: partClass("overlay__body", classNames?.body),
 							children
 						}),
 						/* @__PURE__ */ jsx("div", {
-							className: "overlay__footer",
+							className: partClass("overlay__footer", classNames?.footer),
 							children: /* @__PURE__ */ jsx(Button$1, {
-								className: "button button--secondary",
+								className: partClass("button button--secondary", classNames?.close),
 								onPress: () => change(false),
 								children: closeLabel
 							})
@@ -1925,9 +3344,24 @@ function Popover({ triggerLabel, title, description, children, open, defaultOpen
 		})
 	});
 }
+function PopoverComponent(props) {
+	return "triggerLabel" in props ? /* @__PURE__ */ jsx(CompactPopover, { ...props }) : /* @__PURE__ */ jsx(DialogRoot, { ...props });
+}
+var Popover = /* @__PURE__ */ Object.assign(PopoverComponent, {
+	Root: DialogRoot,
+	Trigger: PopoverTrigger,
+	Content: PopoverContent,
+	Dialog: PopoverDialog,
+	Heading: OverlayHeading,
+	Description: OverlayDescription,
+	Header: OverlayHeader,
+	Body: OverlayBody,
+	Footer: OverlayFooter,
+	CloseButton: PopoverCloseButton
+});
 //#endregion
 //#region src/Tooltip.tsx
-function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly = false, triggerVariant = "secondary", triggerSize = "md", open, defaultOpen = false, onOpenChange, isDisabled = false, dir }) {
+function CompactTooltip({ className, style, classNames, 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,
@@ -1940,6 +3374,7 @@ function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly = false,
 			children: [/* @__PURE__ */ jsx(Button$1, {
 				className: [
 					"button",
+					classNames?.trigger,
 					`button--${triggerVariant}`,
 					triggerSize !== "md" && `button--${triggerSize}`,
 					triggerIconOnly && "button--icon-only"
@@ -1948,7 +3383,8 @@ function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly = false,
 				isDisabled,
 				children: triggerContent ?? triggerLabel
 			}), /* @__PURE__ */ jsx(Tooltip$1, {
-				className: "tooltip__panel",
+				className: partClass(partClass(partClass("tooltip__panel", classNames?.panel), classNames?.root), className),
+				style,
 				placement: "top",
 				offset: 8,
 				containerPadding: 16,
@@ -1958,13 +3394,22 @@ function Tooltip({ triggerLabel, text, triggerContent, triggerIconOnly = false,
 		})
 	});
 }
+function TooltipComponent(props) {
+	return "triggerLabel" in props ? /* @__PURE__ */ jsx(CompactTooltip, { ...props }) : /* @__PURE__ */ jsx(TooltipRoot, { ...props });
+}
+var Tooltip = /* @__PURE__ */ Object.assign(TooltipComponent, {
+	Root: TooltipRoot,
+	Trigger: TooltipTriggerPart,
+	Content: TooltipContent
+});
 //#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 }) {
+function Spinner({ size = "md", color = "current", label, id, className, style, classNames }) {
 	return /* @__PURE__ */ jsxs("span", {
 		id,
-		className: `spinner spinner--${size}`,
+		className: partClass(partClass(`spinner spinner--${size}`, classNames?.root), className),
+		style,
 		"data-color": color,
 		role: label ? "status" : void 0,
 		"aria-label": label || void 0,
@@ -1975,12 +3420,12 @@ function Spinner({ size = "md", color = "current", label, id }) {
 			"aria-hidden": "true",
 			focusable: "false",
 			children: [/* @__PURE__ */ jsx("circle", {
-				className: "spinner__track",
+				className: partClass("spinner__track", classNames?.track),
 				cx: "10",
 				cy: "10",
 				r: "8"
 			}), /* @__PURE__ */ jsx("circle", {
-				className: "spinner__arc",
+				className: partClass("spinner__arc", classNames?.arc),
 				cx: "10",
 				cy: "10",
 				r: "8",
@@ -1988,15 +3433,70 @@ function Spinner({ size = "md", color = "current", label, id }) {
 				strokeDasharray: "36 64"
 			})]
 		}), label && /* @__PURE__ */ jsx("span", {
-			className: "spinner__label",
+			className: partClass("spinner__label", classNames?.label),
 			children: label
 		})]
 	});
 }
 //#endregion
+//#region src/combobox-composition.tsx
+var ComboboxDisabledContext = createContext(false);
+function ComboboxComposition({ className, onChange, ...props }) {
+	return /* @__PURE__ */ jsx(ComboboxDisabledContext.Provider, {
+		value: !!props.isDisabled,
+		children: /* @__PURE__ */ jsx(ComboBox, {
+			...props,
+			onChange: (key) => onChange?.(key == null ? null : String(key)),
+			className: partClass("select combobox", className)
+		})
+	});
+}
+function ComboboxInputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("combobox__control", className)
+	});
+}
+function ComboboxInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input$3, {
+		...props,
+		className: partClass("combobox__input", className)
+	});
+}
+function ComboboxTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button$5, {
+		"aria-label": "Buka pilihan",
+		...props,
+		className: partClass("combobox__toggle", className),
+		children: children ?? /* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+	});
+}
+function ComboboxPopover({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover$3, {
+		...props,
+		className: partClass("select__popover combobox__popover", className)
+	});
+}
+function ComboboxClearButton({ className, children, "aria-label": label = "Hapus pilihan", ...props }) {
+	const state = useContext(ComboBoxStateContext);
+	const disabled = useContext(ComboboxDisabledContext);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		className: partClass("combobox__clear", className),
+		"aria-label": label,
+		disabled: disabled || state?.value == null && !state?.inputValue,
+		onClick: () => {
+			state?.setValue(null);
+			state?.setInputValue("");
+		},
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" })
+	});
+}
+//#endregion
 //#region src/Combobox.tsx
 /** Searchable single selection. Draft text is never submitted as a value. */
-function Combobox(props) {
+function CompactCombobox(props) {
 	const [local, setLocal] = useState(props.defaultValue ?? null);
 	const [draft, setDraft] = useState(null);
 	const [tried, setTried] = useState(false);
@@ -2012,6 +3512,7 @@ function Combobox(props) {
 	const text = draft ?? selected?.label ?? "";
 	const invalid = props.isInvalid || tried && props.isRequired && !id;
 	const { describedBy, feedback } = useFeedback({
+		classNames: props.classNames,
 		description: props.description,
 		isInvalid: invalid,
 		errorMessage: props.errorMessage ?? (props.isRequired && !id ? props.requiredMessage ?? "Pilihan wajib diisi." : void 0)
@@ -2024,7 +3525,8 @@ function Combobox(props) {
 		setDraft(null);
 	}
 	const content = /* @__PURE__ */ jsxs(ComboBox, {
-		className: "select combobox",
+		className: partClass(partClass("select combobox", props.classNames?.root), props.className),
+		style: props.style,
 		value: id,
 		onChange: change,
 		inputValue: text,
@@ -2046,32 +3548,32 @@ function Combobox(props) {
 		validationBehavior: "aria",
 		children: [
 			/* @__PURE__ */ jsxs(Label$6, {
-				className: "select__label",
+				className: partClass("select__label", props.classNames?.label),
 				children: [props.label, props.isRequired && /* @__PURE__ */ jsxs("span", {
-					className: "selection__required",
+					className: partClass("selection__required", props.classNames?.required),
 					"aria-hidden": "true",
 					children: [" ", "*"]
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "combobox__control",
+				className: partClass("combobox__control", props.classNames?.control),
 				"data-invalid": invalid || void 0,
 				"data-disabled": props.isDisabled || void 0,
 				children: [
 					props.startContent && /* @__PURE__ */ jsx("span", {
-						className: "selection__leading",
+						className: partClass("selection__leading", props.classNames?.leading),
 						"aria-hidden": "true",
 						children: props.startContent
 					}),
 					/* @__PURE__ */ jsx(Input$3, {
 						ref: input,
-						className: "combobox__input",
+						className: partClass("combobox__input", props.classNames?.input),
 						placeholder: props.placeholder,
 						"aria-describedby": describedBy
 					}),
 					props.isClearable && /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "combobox__clear",
+						className: partClass("combobox__clear", props.classNames?.clearButton),
 						"data-empty": !id && !text || void 0,
 						"aria-hidden": !id && !text || void 0,
 						tabIndex: !id && !text ? -1 : void 0,
@@ -2081,35 +3583,35 @@ function Combobox(props) {
 							change(null);
 							input.current?.focus();
 						},
-						children: /* @__PURE__ */ jsx(CloseIcon, { className: "selection__close-icon" })
+						children: /* @__PURE__ */ jsx(CloseIcon, { className: partClass("selection__close-icon", props.classNames?.clearIcon) })
 					}),
-					/* @__PURE__ */ jsx(Button$4, {
-						className: "combobox__toggle",
+					/* @__PURE__ */ jsx(Button$5, {
+						className: partClass("combobox__toggle", props.classNames?.trigger),
 						"aria-label": props.toggleLabel ?? "Buka pilihan",
-						children: /* @__PURE__ */ jsx(ChevronIcon, { className: "select__icon" })
+						children: /* @__PURE__ */ jsx(ChevronIcon, { className: partClass("select__icon", props.classNames?.indicator) })
 					})
 				]
 			}),
 			/* @__PURE__ */ jsx(Popover$3, {
-				className: "select__popover combobox__popover",
-				children: /* @__PURE__ */ jsx(ListBox$2, {
-					className: "select__list",
+				className: partClass("select__popover combobox__popover", props.classNames?.popover),
+				children: /* @__PURE__ */ jsx(ListBox$3, {
+					className: partClass("select__list", props.classNames?.list),
 					renderEmptyState: () => /* @__PURE__ */ jsx("span", {
-						className: "selection__empty",
+						className: partClass("selection__empty", props.classNames?.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",
+						className: partClass("select__item", props.classNames?.item),
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "select__item-label",
+							className: partClass("select__item-label", props.classNames?.itemLabel),
 							children: props.renderOption?.(option) ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [option.label, option.description && /* @__PURE__ */ jsx("span", {
-								className: "selection__description",
+								className: partClass("selection__description", props.classNames?.itemDescription),
 								children: option.description
 							})] })
-						}), /* @__PURE__ */ jsx(CheckIcon, { className: "select__check" })]
+						}), /* @__PURE__ */ jsx(CheckIcon, { className: partClass("select__check", props.classNames?.itemIndicator) })]
 					})
 				})
 			}),
@@ -2147,6 +3649,18 @@ function Combobox(props) {
 		children: content
 	}) : content;
 }
+function ComboboxRoot(props) {
+	if ("options" in props && props.options) return /* @__PURE__ */ jsx(CompactCombobox, { ...props });
+	return /* @__PURE__ */ jsx(ComboboxComposition, { ...props });
+}
+var Combobox = /* @__PURE__ */ Object.assign(ComboboxRoot, {
+	Root: ComboboxComposition,
+	InputGroup: ComboboxInputGroup,
+	Input: ComboboxInput,
+	Trigger: ComboboxTrigger,
+	Popover: ComboboxPopover,
+	ClearButton: ComboboxClearButton
+});
 //#endregion
 //#region src/toggle-group-model.ts
 /** Normalize IDs without discarding existing disabled selections. */
@@ -2157,7 +3671,7 @@ function toggleIds(value, items, multiple) {
 }
 //#endregion
 //#region src/ToggleGroup.tsx
-function ToggleGroup(props) {
+function CompactToggleGroup(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);
@@ -2177,7 +3691,8 @@ function ToggleGroup(props) {
 	return /* @__PURE__ */ jsx(OverlayDirection, {
 		dir: props.dir,
 		children: /* @__PURE__ */ jsx(ToggleButtonGroup$1, {
-			className: "toggle-group",
+			className: partClass(partClass("toggle-group", props.classNames?.root), props.className),
+			style: props.style,
 			"aria-label": props.label,
 			dir: props.dir,
 			selectionMode: multiple ? "multiple" : "single",
@@ -2191,18 +3706,160 @@ function ToggleGroup(props) {
 			"data-icon-only": props.isIconOnly || void 0,
 			children: props.items.map((item) => /* @__PURE__ */ jsxs(ToggleButton$1, {
 				id: item.id,
-				className: "toggle-group__item",
+				className: partClass("toggle-group__item", props.classNames?.item),
 				"aria-label": item.label,
 				isDisabled: props.isDisabled || item.isDisabled,
 				children: [props.renderIcon && /* @__PURE__ */ jsx("span", {
-					className: "toggle-group__icon",
+					className: partClass("toggle-group__icon", props.classNames?.icon),
 					"aria-hidden": "true",
 					children: props.renderIcon(item)
-				}), !props.isIconOnly && /* @__PURE__ */ jsx("span", { children: item.label })]
+				}), !props.isIconOnly && /* @__PURE__ */ jsx("span", {
+					className: props.classNames?.label,
+					children: item.label
+				})]
 			}, item.id))
 		})
 	});
 }
+function ToggleGroupRoot(props) {
+	if ("items" in props) return props.selectionMode === "multiple" ? /* @__PURE__ */ jsx(CompactToggleGroup, { ...props }) : /* @__PURE__ */ jsx(CompactToggleGroup, { ...props });
+	return /* @__PURE__ */ jsx(ToggleButtonGroup, { ...props });
+}
+var ToggleGroup = /* @__PURE__ */ Object.assign(ToggleGroupRoot, {
+	Root: ToggleButtonGroup,
+	Item: ToggleButton,
+	Separator: ButtonGroupSeparator
+});
+//#endregion
+//#region src/date-range-composition.tsx
+var DateRangeCompositionContext = createContext(null);
+function useRange() {
+	const context = useContext(DateRangeCompositionContext);
+	if (!context) throw new Error("DateRangePicker parts must be used inside DateRangePicker.");
+	return context;
+}
+function DateRangeTrigger({ className, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx(Button$1, {
+		"aria-labelledby": `${range.id}-label ${range.id}-value`,
+		"aria-describedby": range.feedbackId,
+		"aria-invalid": range.invalid || void 0,
+		isDisabled: range.disabled,
+		ref: range.trigger,
+		...props,
+		className: partClass("date-range__trigger", className),
+		children: children ?? /* @__PURE__ */ jsx(DateRangeValue, {})
+	});
+}
+function DateRangeValue({ className, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("span", {
+		id: `${range.id}-value`,
+		...props,
+		className: partClass("date-range__value", className),
+		children: children ?? range.text
+	});
+}
+function DateRangeIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: partClass("date-range__chevron", className),
+		"aria-hidden": "true",
+		children: children ?? /* @__PURE__ */ jsx(ChevronIcon, {})
+	});
+}
+function DateRangePopover({ className, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx(Popover$2, {
+		placement: "bottom start",
+		offset: 8,
+		dir: range.dir,
+		...props,
+		className: partClass("date-range__panel", className),
+		children: (state) => /* @__PURE__ */ jsx(Dialog$1, {
+			"aria-labelledby": `${range.id}-label`,
+			className: "date-range__dialog",
+			children: typeof children === "function" ? children(state) : children ?? range.panel
+		})
+	});
+}
+/** Render the standard model-bound panel, or compose a custom panel through children. */
+function DateRangeContent({ className, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		children: children ?? range.panel
+	});
+}
+function DateRangeCalendar({ className, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		children: range.calendar
+	});
+}
+function DateRangeInput({ part, className, onChange, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("input", {
+		type: "date",
+		form: "",
+		min: range.min,
+		max: range.max,
+		disabled: range.disabled,
+		readOnly: range.readOnly,
+		"aria-invalid": range.invalid || void 0,
+		...props,
+		className: partClass("input__control", className),
+		value: range.draft[part],
+		onChange: (event) => {
+			onChange?.(event);
+			if (!event.defaultPrevented) range.edit(part, event.target.value);
+		}
+	});
+}
+function DateRangeApplyButton({ className, onClick, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		className: partClass("button button--primary button--sm", className),
+		disabled: range.disabled || range.readOnly || range.invalid || props.disabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) range.apply();
+		},
+		children: children ?? range.labels.apply
+	});
+}
+function DateRangeClearButton({ className, onClick, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		className: partClass("button button--ghost button--sm", className),
+		disabled: range.disabled || range.readOnly || props.disabled,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) range.clear();
+		},
+		children: children ?? range.labels.clear
+	});
+}
+function DateRangeCancelButton({ className, onClick, children, ...props }) {
+	const range = useRange();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		...props,
+		className: partClass("button button--secondary button--sm", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) range.cancel();
+		},
+		children: children ?? range.labels.cancel
+	});
+}
 //#endregion
 //#region src/date-range-model.ts
 function dateRangeLabels(locale = "id-ID") {
@@ -2353,7 +4010,7 @@ function CalendarContent({ onPending, dir, children }) {
 		children
 	});
 }
-function DateRangePicker(props) {
+function DateRangePickerRoot(props) {
 	const { label, locale = "id-ID", dir, size = "md", variant = "primary", fullWidth = true, hideLabel = false, visibleMonths = 2, weekStartsOn = 1, display = "popover", showInputs = true, presets = [], isDisabled = false, isReadOnly = false, isRequired = false } = props;
 	const labels = {
 		...dateRangeLabels(locale),
@@ -2428,30 +4085,92 @@ function DateRangePicker(props) {
 		start: asDate(draft.start),
 		end: asDate(draft.end)
 	} : null;
+	const calendar = /* @__PURE__ */ jsx(RangeCalendar, {
+		dir,
+		className: partClass("date-range__calendar", props.classNames?.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: partClass("date-range__navigation", props.classNames?.navigation),
+				children: [/* @__PURE__ */ jsx(Button$1, {
+					slot: "previous",
+					className: partClass("date-range__nav date-range__nav--previous", props.classNames?.navigationButton),
+					"aria-label": labels.previousMonth,
+					children: /* @__PURE__ */ jsx(ChevronIcon, {})
+				}), /* @__PURE__ */ jsx(Button$1, {
+					slot: "next",
+					className: partClass("date-range__nav date-range__nav--next", props.classNames?.navigationButton),
+					"aria-label": labels.nextMonth,
+					children: /* @__PURE__ */ jsx(ChevronIcon, {})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: partClass("date-range__months", props.classNames?.months),
+				children: Array.from({ length: visibleMonths }, (_, i) => /* @__PURE__ */ jsxs("div", {
+					className: partClass("date-range__month", props.classNames?.month),
+					children: [/* @__PURE__ */ jsx(CalendarHeading, {
+						offset: { months: i },
+						className: partClass("date-range__heading", props.classNames?.heading)
+					}), /* @__PURE__ */ jsxs(CalendarGrid, {
+						offset: { months: i },
+						className: partClass("date-range__grid", props.classNames?.grid),
+						weekdayStyle: "short",
+						children: [/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, {
+							className: partClass("date-range__weekday", props.classNames?.weekday),
+							children: day
+						}) }), /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+							date,
+							className: partClass("date-range__day", props.classNames?.day)
+						}) })]
+					})]
+				}, i))
+			})]
+		})
+	}, calendarKey);
 	const panel = /* @__PURE__ */ jsxs("div", {
-		className: "date-range__content",
+		className: partClass("date-range__content", props.classNames?.content),
 		"data-readonly": isReadOnly || void 0,
 		children: [
 			/* @__PURE__ */ jsxs("header", {
-				className: "date-range__intro",
+				className: partClass("date-range__intro", props.classNames?.intro),
 				children: [/* @__PURE__ */ jsx("h2", {
 					id: `${id}-title`,
+					className: props.classNames?.title,
 					children: labels.title
 				}), /* @__PURE__ */ jsx("p", {
-					className: "date-range__summary",
+					className: partClass("date-range__summary", props.classNames?.summary),
 					"aria-live": "polite",
 					children: pending ? labels.incomplete : rangeText(nullableDraft, locale) || labels.incomplete
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "date-range__body",
+				className: partClass("date-range__body", props.classNames?.body),
 				children: [presets.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "date-range__presets",
+					className: partClass("date-range__presets", props.classNames?.presets),
 					role: "group",
 					"aria-label": labels.presets,
 					children: presets.map((p) => /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "date-range__preset",
+						className: partClass("date-range__preset", props.classNames?.preset),
 						disabled: isDisabled || isReadOnly || !!rangeError(p.value, props),
 						"aria-pressed": !pending && draft.start === p.value.start && draft.end === p.value.end,
 						onClick: () => {
@@ -2461,13 +4180,17 @@ function DateRangePicker(props) {
 						children: p.label
 					}, p.id))
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "date-range__main",
+					className: partClass("date-range__main", props.classNames?.main),
 					children: [
 						showInputs && /* @__PURE__ */ jsx("div", {
-							className: "date-range__inputs",
+							className: partClass("date-range__inputs", props.classNames?.inputs),
 							children: ["start", "end"].map((part) => /* @__PURE__ */ jsxs("label", {
-								className: "date-range__field",
-								children: [/* @__PURE__ */ jsx("span", { children: labels[part] }), /* @__PURE__ */ jsx("input", {
+								className: partClass("date-range__field", props.classNames?.field),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: props.classNames?.inputLabel,
+									children: labels[part]
+								}), /* @__PURE__ */ jsx("input", {
+									className: props.classNames?.input,
 									type: "date",
 									form: "",
 									value: draft[part],
@@ -2482,8 +4205,9 @@ function DateRangePicker(props) {
 							}, part))
 						}),
 						props.showMonthYearPicker && /* @__PURE__ */ jsxs("div", {
-							className: "date-range__jump",
+							className: partClass("date-range__jump", props.classNames?.jump),
 							children: [/* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: locale.startsWith("id") ? "Bulan" : "Month" }), /* @__PURE__ */ jsx("select", {
+								className: props.classNames?.monthSelect,
 								form: "",
 								disabled: isDisabled,
 								"aria-label": locale.startsWith("id") ? "Bulan" : "Month",
@@ -2501,6 +4225,7 @@ function DateRangePicker(props) {
 									}).toDate("UTC"))
 								}, i))
 							})] }), /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("span", { children: locale.startsWith("id") ? "Tahun" : "Year" }), /* @__PURE__ */ jsx("input", {
+								className: props.classNames?.yearInput,
 								type: "number",
 								form: "",
 								disabled: isDisabled,
@@ -2514,73 +4239,14 @@ function DateRangePicker(props) {
 								}
 							}, 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),
+						calendar,
 						/* @__PURE__ */ jsx("div", {
-							className: "date-range__validation",
+							className: partClass("date-range__validation", props.classNames?.validation),
 							"aria-live": "polite",
 							children: error && /* @__PURE__ */ jsx("p", {
 								id: `${id}-draft-error`,
 								role: "alert",
+								className: props.classNames?.draftError,
 								children: error
 							})
 						})
@@ -2588,21 +4254,21 @@ function DateRangePicker(props) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("footer", {
-				className: "date-range__footer",
+				className: partClass("date-range__footer", props.classNames?.footer),
 				children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "button button--ghost button--sm",
+					className: partClass("button button--ghost button--sm", props.classNames?.clearButton),
 					disabled: isDisabled || isReadOnly,
 					onClick: () => replaceDraft(empty()),
 					children: labels.clear
 				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "button button--secondary button--sm",
+					className: partClass("button button--secondary button--sm", props.classNames?.cancelButton),
 					onClick: () => changeOpen(false),
 					children: labels.cancel
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "button button--primary button--sm",
+					className: partClass("button button--primary button--sm", props.classNames?.applyButton),
 					disabled: isDisabled || isReadOnly || !!errorCode,
 					onClick: apply,
 					children: labels.apply
@@ -2615,122 +4281,164 @@ function DateRangePicker(props) {
 			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,
+		children: /* @__PURE__ */ jsx(DateRangeCompositionContext.Provider, {
+			value: {
+				id,
+				text,
+				labels,
+				draft,
+				disabled: isDisabled,
+				readOnly: isReadOnly,
+				invalid: !!errorCode,
+				feedbackId,
+				min: props.minDate,
+				max: props.maxDate,
+				dir,
+				trigger,
+				calendar,
+				panel,
+				edit,
+				apply,
+				clear: () => replaceDraft(empty()),
+				cancel: () => changeOpen(false)
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: [
+					"date-range",
+					props.classNames?.root,
+					props.className,
+					`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(" "),
+				style: props.style,
+				dir,
+				"data-disabled": isDisabled || void 0,
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						id: `${id}-label`,
+						className: partClass("date-range__label", props.classNames?.label),
+						children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: " *"
+						})]
+					}),
+					props.children ? /* @__PURE__ */ jsx(DialogTrigger, {
+						isOpen: visible,
+						onOpenChange: changeOpen,
+						children: props.children
+					}) : display === "inline" ? /* @__PURE__ */ jsx("section", {
+						className: partClass("date-range__panel date-range__inline", props.classNames?.panel),
+						"aria-labelledby": `${id}-title`,
 						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);
+						children: panel
+					}) : /* @__PURE__ */ jsxs(DialogTrigger, {
+						isOpen: visible,
+						onOpenChange: changeOpen,
+						children: [/* @__PURE__ */ jsxs(Button$1, {
+							ref: trigger,
+							className: partClass("date-range__trigger", props.classNames?.trigger),
+							isDisabled,
+							"aria-labelledby": `${id}-label ${id}-value`,
+							"aria-describedby": feedbackId,
+							"aria-invalid": !!outerError,
+							children: [
+								/* @__PURE__ */ jsxs("svg", {
+									className: partClass("date-range__icon", props.classNames?.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: partClass("date-range__value", props.classNames?.value),
+									"data-placeholder": !committed || void 0,
+									children: text
+								}),
+								/* @__PURE__ */ jsx(ChevronIcon, { className: partClass("date-range__chevron", props.classNames?.chevron) })
+							]
+						}), /* @__PURE__ */ jsx(Popover$2, {
+							className: partClass("date-range__panel", props.classNames?.panel),
+							placement: "bottom start",
+							offset: 8,
+							containerPadding: 16,
+							dir,
+							children: /* @__PURE__ */ jsx(Dialog$1, {
+								className: partClass("date-range__dialog", props.classNames?.dialog),
+								"aria-labelledby": `${id}-title`,
+								children: panel
+							})
+						})]
+					}),
+					props.description && /* @__PURE__ */ jsx("span", {
+						id: `${id}-description`,
+						className: partClass("input__description", props.classNames?.description),
+						children: props.description
+					}),
+					outerError && /* @__PURE__ */ jsx("span", {
+						id: `${id}-error`,
+						className: partClass("input__error", props.classNames?.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);
+							}
 						}
-					}
-				})
-			]
+					})
+				]
+			})
 		})
 	});
 }
+var DateRangePicker = /* @__PURE__ */ Object.assign(DateRangePickerRoot, {
+	Root: DateRangePickerRoot,
+	Trigger: DateRangeTrigger,
+	Value: DateRangeValue,
+	Indicator: DateRangeIndicator,
+	Popover: DateRangePopover,
+	Content: DateRangeContent,
+	Calendar: DateRangeCalendar,
+	Input: DateRangeInput,
+	ApplyButton: DateRangeApplyButton,
+	ClearButton: DateRangeClearButton,
+	CancelButton: DateRangeCancelButton
+});
 //#endregion
 //#region src/toast-model.ts
 var EMPTY = Object.freeze([]);
@@ -3056,7 +4764,7 @@ var QueueAdapter = class extends UNSTABLE_ToastQueue {
 	}
 };
 var ToastContext = createContext(null);
-function ToastProvider({ children, manager: suppliedManager, placement = "bottom-end", label = "Notifikasi / Notifications", closeLabel = "Tutup notifikasi / Close notification", hotkey = ["Alt", "t"], dir = "ltr", showProgress = false, showCloseButton = false, swipeThreshold = 50, renderToast }) {
+function ToastProvider({ className, classNames, style, children, manager: suppliedManager, placement = "bottom-end", label = "Notifikasi / Notifications", closeLabel = "Tutup notifikasi / Close notification", hotkey = ["Alt", "t"], dir = "ltr", showProgress = false, showCloseButton = false, swipeThreshold = 50, renderToast }) {
 	const [ownedManager] = useState(() => createToastManager());
 	const manager = suppliedManager ?? ownedManager;
 	const queue = useMemo(() => new QueueAdapter(manager), [manager]);
@@ -3201,12 +4909,13 @@ function ToastProvider({ children, manager: suppliedManager, placement = "bottom
 			children: /* @__PURE__ */ jsx(UNSTABLE_ToastRegion, {
 				queue,
 				ref: region,
-				className: "toast-region",
+				className: partClass(partClass("toast-region", classNames?.root), className),
+				style,
 				"data-placement": placement,
 				"aria-label": label,
 				"aria-keyshortcuts": hotkey.length ? hotkey.join("+") : void 0,
 				children: /* @__PURE__ */ jsx(UNSTABLE_ToastList, {
-					className: "toast-list",
+					className: partClass("toast-list", classNames?.list),
 					children: ({ toast }) => /* @__PURE__ */ jsx(Fragment$1, { children: renderToast ? renderToast(toast.content) : /* @__PURE__ */ jsx(Toast, { entry: toast.content }) })
 				})
 			})
@@ -3218,6 +4927,122 @@ function useToast() {
 	if (!context) throw new Error("useToast must be used within a ToastProvider.");
 	return context.manager;
 }
+var ToastPresentationContext = createContext(null);
+function useToastPresentation() {
+	const state = useContext(ToastPresentationContext);
+	if (!state) throw new Error("Toast parts must be used inside Toast.Root.");
+	return state;
+}
+function ToastRoot(props) {
+	return /* @__PURE__ */ jsx(ToastRenderer, {
+		...props,
+		composed: true
+	});
+}
+function ToastIndicator({ className, children, ...props }) {
+	const { entry } = useToastPresentation();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className: partClass("toast__indicator", className),
+		children: children ?? /* @__PURE__ */ jsx(Indicator, { entry })
+	});
+}
+function ToastBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx(UNSTABLE_ToastContent, {
+		...props,
+		role: "status",
+		"aria-live": "polite",
+		className: partClass("toast__body", className)
+	});
+}
+function ToastTitle({ className, children, ...props }) {
+	const { entry } = useToastPresentation();
+	return /* @__PURE__ */ jsx(Text$4, {
+		...props,
+		slot: "title",
+		className: partClass("toast__title", className),
+		children: children ?? entry.title
+	});
+}
+function ToastDescription({ className, children, ...props }) {
+	const { entry } = useToastPresentation();
+	if (!children && !entry.description) return null;
+	return /* @__PURE__ */ jsx(Text$4, {
+		...props,
+		slot: "description",
+		className: partClass("toast__description", className),
+		children: children ?? entry.description
+	});
+}
+function ToastActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: partClass("toast__actions", className)
+	});
+}
+function ToastActionButton({ className, children, cancel = false, onPress, ...props }) {
+	const state = useToastPresentation();
+	const id = useId();
+	const action = cancel ? state.entry.cancel : state.entry.action;
+	if (!action) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		id,
+		hidden: true,
+		children: action.altText
+	}), /* @__PURE__ */ jsx(Button$4, {
+		...props,
+		"aria-describedby": [props["aria-describedby"], id].filter(Boolean).join(" "),
+		isDisabled: props.isDisabled || state.closing,
+		className: typeof className === "function" ? (values) => partClass("toast__action", className(values)) : partClass("toast__action", className),
+		onPress: (event) => {
+			onPress?.(event);
+			if (!state.closing) state.invoke(cancel);
+		},
+		children: children ?? action.label
+	})] });
+}
+function ToastCloseButton({ className, children = "×", ...props }) {
+	const state = useToastPresentation();
+	return /* @__PURE__ */ jsx(Button$4, {
+		...props,
+		slot: "close",
+		"aria-label": props["aria-label"] ?? state.closeLabel,
+		isDisabled: props.isDisabled || state.closing,
+		className: typeof className === "function" ? (values) => partClass("toast__close", className(values)) : partClass("toast__close", className),
+		children
+	});
+}
+function ToastProgress({ className, style, ...props }) {
+	const { entry } = useToastPresentation();
+	if (entry.duration <= 0 || entry.isLoading) return null;
+	return /* @__PURE__ */ createElement("span", {
+		...props,
+		key: `${entry.generation}-${entry.remaining}-${entry.paused}`,
+		className: partClass("toast__progress", className),
+		"aria-hidden": "true",
+		style: {
+			...style,
+			"--toast-progress": entry.remaining / entry.duration,
+			"--toast-remaining": `${entry.remaining}ms`
+		}
+	});
+}
+function CompactToast(props) {
+	return /* @__PURE__ */ jsx(ToastRenderer, { ...props });
+}
+var Toast = /* @__PURE__ */ Object.assign(CompactToast, {
+	Root: ToastRoot,
+	Provider: ToastProvider,
+	Indicator: ToastIndicator,
+	Content: ToastBody,
+	Title: ToastTitle,
+	Description: ToastDescription,
+	Actions: ToastActions,
+	ActionButton: ToastActionButton,
+	CloseButton: ToastCloseButton,
+	Progress: ToastProgress
+});
 function Indicator({ entry }) {
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: "0 0 24 24",
@@ -3239,7 +5064,7 @@ function Indicator({ entry }) {
 		}), /* @__PURE__ */ jsx("path", { d: "M12 10v7m0-11v1" })] })
 	});
 }
-function Toast({ entry, indicator, children, className, showCloseButton: closeOverride, showProgress: progressOverride }) {
+function ToastRenderer({ composed = false, style, classNames, entry, indicator, children, className, showCloseButton: closeOverride, showProgress: progressOverride }) {
 	const actionDescriptionId = useId();
 	const cancelDescriptionId = useId();
 	const context = useContext(ToastContext);
@@ -3332,109 +5157,121 @@ function Toast({ entry, indicator, children, className, showCloseButton: closeOv
 			if (active) manager.resume("swipe");
 		}
 	}, [manager]);
-	return /* @__PURE__ */ jsxs(UNSTABLE_Toast, {
-		toast: {
-			key: entry.id,
-			content: entry
-		},
-		ref,
-		className: `toast${className ? ` ${className}` : ""}`,
-		"data-toast-id": entry.id,
-		"data-tone": entry.tone,
-		"data-has-close": showCloseButton || void 0,
-		"data-loading": entry.isLoading || void 0,
-		"data-state": entry.state,
-		"data-placement": placement,
-		"data-paused": entry.paused || void 0,
-		"data-swipe": swipe,
-		inert: closing || void 0,
-		"aria-hidden": closing || void 0,
-		style: {
-			"--toast-swipe-x": `${offset}px`,
-			touchAction: "pan-y"
+	return /* @__PURE__ */ jsx(ToastPresentationContext.Provider, {
+		value: {
+			entry,
+			closing,
+			closeLabel,
+			invoke: (cancel) => {
+				const item = cancel ? entry.cancel : entry.action;
+				if (item) action(item, cancel ? "cancel" : "action");
+			}
 		},
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "toast__indicator",
-				"aria-hidden": "true",
-				children: indicator ?? /* @__PURE__ */ jsx(Indicator, { entry })
-			}),
-			/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
-				className: "toast__body",
-				role: "status",
-				"aria-live": "polite",
-				children: [
-					/* @__PURE__ */ jsx(Text$3, {
-						slot: "title",
-						className: "toast__title",
-						children: entry.title
-					}),
-					entry.description && /* @__PURE__ */ jsx(Text$3, {
-						slot: "description",
-						className: "toast__description",
-						children: entry.description
-					}),
-					children,
-					(entry.action || entry.cancel) && /* @__PURE__ */ jsxs("div", {
-						className: "toast__actions",
-						children: [
-							entry.action && /* @__PURE__ */ jsx("span", {
-								id: actionDescriptionId,
-								hidden: true,
-								children: entry.action.altText
-							}),
-							entry.cancel && /* @__PURE__ */ jsx("span", {
-								id: cancelDescriptionId,
-								hidden: true,
-								children: entry.cancel.altText
-							}),
-							entry.action && /* @__PURE__ */ jsx(Button$5, {
-								className: "toast__action",
-								"aria-describedby": actionDescriptionId,
-								isDisabled: closing,
-								onPress: () => action(entry.action, "action"),
-								children: entry.action.label
-							}),
-							entry.cancel && /* @__PURE__ */ jsx(Button$5, {
-								className: "toast__action",
-								"data-cancel": true,
-								"aria-describedby": cancelDescriptionId,
-								isDisabled: closing,
-								onPress: () => action(entry.cancel, "cancel"),
-								children: entry.cancel.label
-							})
-						]
+		children: /* @__PURE__ */ jsx(UNSTABLE_Toast, {
+			toast: {
+				key: entry.id,
+				content: entry
+			},
+			ref,
+			className: partClass(partClass("toast", classNames?.root), className),
+			"data-toast-id": entry.id,
+			"data-tone": entry.tone,
+			"data-has-close": showCloseButton || void 0,
+			"data-loading": entry.isLoading || void 0,
+			"data-state": entry.state,
+			"data-placement": placement,
+			"data-paused": entry.paused || void 0,
+			"data-swipe": swipe,
+			inert: closing || void 0,
+			"aria-hidden": closing || void 0,
+			style: {
+				...style,
+				"--toast-swipe-x": `${offset}px`,
+				touchAction: "pan-y"
+			},
+			children: composed ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: partClass("toast__indicator", classNames?.indicator),
+					"aria-hidden": "true",
+					children: indicator ?? /* @__PURE__ */ jsx(Indicator, { entry })
+				}),
+				/* @__PURE__ */ jsxs(UNSTABLE_ToastContent, {
+					className: partClass("toast__body", classNames?.body),
+					role: "status",
+					"aria-live": "polite",
+					children: [
+						/* @__PURE__ */ jsx(Text$4, {
+							slot: "title",
+							className: partClass("toast__title", classNames?.title),
+							children: entry.title
+						}),
+						entry.description && /* @__PURE__ */ jsx(Text$4, {
+							slot: "description",
+							className: partClass("toast__description", classNames?.description),
+							children: entry.description
+						}),
+						children,
+						(entry.action || entry.cancel) && /* @__PURE__ */ jsxs("div", {
+							className: partClass("toast__actions", classNames?.actions),
+							children: [
+								entry.action && /* @__PURE__ */ jsx("span", {
+									id: actionDescriptionId,
+									hidden: true,
+									children: entry.action.altText
+								}),
+								entry.cancel && /* @__PURE__ */ jsx("span", {
+									id: cancelDescriptionId,
+									hidden: true,
+									children: entry.cancel.altText
+								}),
+								entry.action && /* @__PURE__ */ jsx(Button$4, {
+									className: partClass("toast__action", classNames?.action),
+									"aria-describedby": actionDescriptionId,
+									isDisabled: closing,
+									onPress: () => action(entry.action, "action"),
+									children: entry.action.label
+								}),
+								entry.cancel && /* @__PURE__ */ jsx(Button$4, {
+									className: partClass("toast__action", classNames?.action),
+									"data-cancel": true,
+									"aria-describedby": cancelDescriptionId,
+									isDisabled: closing,
+									onPress: () => action(entry.cancel, "cancel"),
+									children: entry.cancel.label
+								})
+							]
+						})
+					]
+				}),
+				showCloseButton && /* @__PURE__ */ jsx(Button$4, {
+					slot: "close",
+					className: partClass("toast__close", classNames?.close),
+					"aria-label": closeLabel,
+					isDisabled: closing,
+					children: /* @__PURE__ */ jsx("svg", {
+						viewBox: "0 0 24 24",
+						width: "16",
+						height: "16",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M6 18 18 6" })
 					})
-				]
-			}),
-			showCloseButton && /* @__PURE__ */ jsx(Button$5, {
-				slot: "close",
-				className: "toast__close",
-				"aria-label": closeLabel,
-				isDisabled: closing,
-				children: /* @__PURE__ */ jsx("svg", {
-					viewBox: "0 0 24 24",
-					width: "16",
-					height: "16",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: "2",
+				}),
+				showProgress && entry.duration > 0 && !entry.isLoading && /* @__PURE__ */ jsx("span", {
+					className: partClass("toast__progress", classNames?.progress),
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ jsx("path", { d: "m6 6 12 12M6 18 18 6" })
-				})
-			}),
-			showProgress && entry.duration > 0 && !entry.isLoading && /* @__PURE__ */ jsx("span", {
-				className: "toast__progress",
-				"aria-hidden": "true",
-				style: {
-					"--toast-progress": entry.remaining / entry.duration,
-					"--toast-remaining": `${entry.remaining}ms`
-				}
-			}, `${entry.generation}-${entry.remaining}-${entry.paused}`)
-		]
+					style: {
+						"--toast-progress": entry.remaining / entry.duration,
+						"--toast-remaining": `${entry.remaining}ms`
+					}
+				}, `${entry.generation}-${entry.remaining}-${entry.paused}`)
+			] })
+		})
 	});
 }
 //#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, Toast, ToastProvider, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, createDateRangePresets, createToastManager, rangeText as formatDateRange, useToast };
+export { Alert, AlertActions, AlertContent, AlertDescription, AlertIndicator, AlertTitle, Badge, Breadcrumb, BreadcrumbCurrent, BreadcrumbItemPart, BreadcrumbLink, BreadcrumbList, BreadcrumbRoot, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, Card, CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardRoot, CardTitle, CardTitleRow, Chart, ChartDescription, ChartPlot, ChartRoot, ChartTitle, Checkbox, Combobox, DataTable, DataTableColumn as DataTableColumnPart, DataTableEmpty, DataTableError, DataTableRoot, DataTableSortButton, DataTableStatus, DateRangePicker, Description, Dialog, DialogBackdrop as DialogBackdropPart, DialogCloseButton, DialogContent, DialogPanel, DialogRoot, DialogTriggerPart, DropdownHeading, DropdownItem, DropdownItemIndicator, DropdownList, DropdownMenu, DropdownPopover, DropdownRoot, DropdownSection, DropdownSeparator, DropdownSubmenuIndicator, DropdownSubmenuTrigger, DropdownTrigger, Empty, EmptyActions, EmptyDescription, EmptyRoot, EmptyTitle, Field, FieldError, Form, Header, Input, Label, ListBox, Listbox, NumberField, OverlayBody, OverlayDescription, OverlayFooter, OverlayHeader, OverlayHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPageButton, PaginationPrevious, PaginationRoot, PaginationSummary, Popover, PopoverCloseButton, PopoverContent, PopoverDialog, PopoverTrigger, RadioGroup, Select, SelectGroup, Separator, Sidebar, SidebarHeader, SidebarItem, SidebarLink, SidebarList, SidebarNavigation, SidebarRoot, SidebarTitle, SidebarToggle, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableColumn, TableFooter, TableHeader, TableRoot, TableRow, TableScrollContainer, Tabs, TabsIndicator, TabsList, TabsListContainer, TabsPanel, TabsRoot, TabsSeparator, TabsTab, Textarea, Toast, ToastActionButton, ToastActions, ToastBody, ToastCloseButton, ToastDescription, ToastIndicator, ToastProgress, ToastProvider, ToastRoot, ToastTitle, ToggleButton, ToggleButtonGroup, ToggleGroup, Tooltip, TooltipContent, TooltipRoot, TooltipTriggerPart, createDateRangePresets, createToastManager, rangeText as formatDateRange, useToast };
 
 //# sourceMappingURL=index.js.map