ropav 0.0.11 → 0.0.13

package/dist/floating.js

@@ -0,0 +1,403 @@
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, toValue, watch } from "vue";
+//#region src/components/floating/useHoverDisclosure.ts
+var DEFAULT_OPEN_DELAY = 0;
+var DEFAULT_CLOSE_DELAY = 0;
+function isElement(value) {
+	return typeof Element !== "undefined" && value instanceof Element;
+}
+function resolveSelector(selector) {
+	if (typeof document === "undefined") return null;
+	try {
+		return document.querySelector(selector);
+	} catch {
+		return null;
+	}
+}
+function resolveInteractionTarget(target) {
+	if (!target) return null;
+	if (typeof target === "string") return resolveSelector(target);
+	if (isElement(target)) return target;
+	return isElement(target.contextElement) ? target.contextElement : null;
+}
+function resolveContentTarget(target) {
+	if (!target) return null;
+	return typeof target === "string" ? resolveSelector(target) : isElement(target) ? target : null;
+}
+function readDelay(value, fallback) {
+	if (value == null) return fallback;
+	return Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+function eventElement(event) {
+	return isElement(event.currentTarget) ? event.currentTarget : null;
+}
+function focusLeavesCurrentTarget(event) {
+	const currentTarget = eventElement(event);
+	const nextTarget = event.relatedTarget;
+	return !(currentTarget && typeof Node !== "undefined" && nextTarget instanceof Node && currentTarget.contains(nextTarget));
+}
+function useHoverDisclosure(options = {}) {
+	const uncontrolledOpen = ref(options.defaultOpen === true && !toValue(options.disabled));
+	const resolvedInteractionTarget = shallowRef(null);
+	const resolvedContentTarget = shallowRef(null);
+	const controlledOpen = computed(() => toValue(options.open));
+	const isDisabled = computed(() => Boolean(toValue(options.disabled)));
+	const openState = computed(() => controlledOpen.value ?? uncontrolledOpen.value);
+	const isOpen = computed(() => !isDisabled.value && openState.value);
+	const state = computed(() => isOpen.value ? "open" : "closed");
+	let requestedOpen = openState.value;
+	let triggerHovered = false;
+	let contentHovered = false;
+	let triggerFocused = false;
+	let contentFocused = false;
+	let touchPinned = false;
+	let touchPointerActive = false;
+	let touchClickPending = false;
+	let triggerElement = null;
+	let contentElement = null;
+	let openTimer;
+	let closeTimer;
+	let documentListenersActive = false;
+	let disposed = false;
+	function getOpenDelay() {
+		return readDelay(toValue(options.openDelay), DEFAULT_OPEN_DELAY);
+	}
+	function getCloseDelay() {
+		return readDelay(toValue(options.closeDelay), DEFAULT_CLOSE_DELAY);
+	}
+	function getTouchBehavior() {
+		return toValue(options.touchBehavior) ?? "none";
+	}
+	function clearOpenTimer() {
+		if (openTimer === void 0) return;
+		clearTimeout(openTimer);
+		openTimer = void 0;
+	}
+	function clearCloseTimer() {
+		if (closeTimer === void 0) return;
+		clearTimeout(closeTimer);
+		closeTimer = void 0;
+	}
+	function clearTimers() {
+		clearOpenTimer();
+		clearCloseTimer();
+	}
+	function hasActiveInteraction() {
+		return triggerHovered || contentHovered || triggerFocused || contentFocused || touchPinned;
+	}
+	function setOpen(nextOpen, reason, event) {
+		if (disposed || nextOpen && isDisabled.value || requestedOpen === nextOpen) return;
+		requestedOpen = nextOpen;
+		if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
+		options.onOpenChange?.(nextOpen, {
+			reason,
+			event
+		});
+	}
+	function openImmediately(reason, event) {
+		clearTimers();
+		setOpen(true, reason, event);
+	}
+	function closeImmediately(reason, event) {
+		clearTimers();
+		setOpen(false, reason, event);
+	}
+	function scheduleOpen(reason, event) {
+		if (disposed || isDisabled.value) return;
+		clearCloseTimer();
+		clearOpenTimer();
+		if (requestedOpen) return;
+		const delay = getOpenDelay();
+		if (delay === 0) {
+			setOpen(true, reason, event);
+			return;
+		}
+		openTimer = setTimeout(() => {
+			openTimer = void 0;
+			if (!triggerHovered || isDisabled.value) return;
+			setOpen(true, reason, event);
+		}, delay);
+	}
+	function scheduleClose(reason, event) {
+		clearOpenTimer();
+		clearCloseTimer();
+		if (disposed || hasActiveInteraction()) return;
+		closeTimer = setTimeout(() => {
+			closeTimer = void 0;
+			if (hasActiveInteraction()) return;
+			setOpen(false, reason, event);
+		}, getCloseDelay());
+	}
+	function rememberTrigger(event) {
+		triggerElement = eventElement(event) ?? resolvedInteractionTarget.value ?? triggerElement;
+	}
+	function rememberContent(event) {
+		contentElement = eventElement(event) ?? resolvedContentTarget.value ?? contentElement;
+	}
+	function onTriggerPointerenter(event) {
+		rememberTrigger(event);
+		if (event.pointerType === "touch" || isDisabled.value) return;
+		triggerHovered = true;
+		scheduleOpen("hover", event);
+	}
+	function onTriggerPointerleave(event) {
+		rememberTrigger(event);
+		if (event.pointerType === "touch") return;
+		triggerHovered = false;
+		scheduleClose("hover", event);
+	}
+	function onContentPointerenter(event) {
+		rememberContent(event);
+		if (event.pointerType === "touch" || isDisabled.value) return;
+		contentHovered = true;
+		clearCloseTimer();
+	}
+	function onContentPointerleave(event) {
+		rememberContent(event);
+		if (event.pointerType === "touch") return;
+		contentHovered = false;
+		scheduleClose("hover", event);
+	}
+	function onTriggerFocusin(event) {
+		rememberTrigger(event);
+		if (isDisabled.value || toValue(options.openOnFocus) === false) return;
+		triggerFocused = true;
+		openImmediately("focus", event);
+	}
+	function onTriggerFocusout(event) {
+		rememberTrigger(event);
+		if (!focusLeavesCurrentTarget(event)) return;
+		triggerFocused = false;
+		scheduleClose("focus", event);
+	}
+	function onContentFocusin(event) {
+		rememberContent(event);
+		if (isDisabled.value) return;
+		contentFocused = true;
+		clearCloseTimer();
+	}
+	function onContentFocusout(event) {
+		rememberContent(event);
+		if (!focusLeavesCurrentTarget(event)) return;
+		contentFocused = false;
+		scheduleClose("focus", event);
+	}
+	function onTriggerPointerdown(event) {
+		rememberTrigger(event);
+		touchPointerActive = event.pointerType === "touch";
+		touchClickPending = false;
+	}
+	function onTriggerPointerup(event) {
+		rememberTrigger(event);
+		touchClickPending = event.pointerType === "touch" && touchPointerActive;
+		touchPointerActive = false;
+	}
+	function onTriggerPointercancel(event) {
+		rememberTrigger(event);
+		touchPointerActive = false;
+		touchClickPending = false;
+	}
+	function onTriggerClick(event) {
+		rememberTrigger(event);
+		if (!touchClickPending) return;
+		touchClickPending = false;
+		if (getTouchBehavior() !== "toggle" || isDisabled.value) return;
+		event.preventDefault();
+		if (touchPinned || requestedOpen) {
+			touchPinned = false;
+			closeImmediately("touch", event);
+			return;
+		}
+		touchPinned = true;
+		openImmediately("touch", event);
+	}
+	function onContentPointerdown(event) {
+		rememberContent(event);
+	}
+	function onKeydown(event) {
+		if (event.key !== "Escape" || toValue(options.closeOnEscape) === false || !isOpen.value) return;
+		touchPinned = false;
+		closeImmediately("escape", event);
+	}
+	function open() {
+		openImmediately("programmatic");
+	}
+	function close() {
+		touchPinned = false;
+		closeImmediately("programmatic");
+	}
+	function toggle() {
+		if (requestedOpen || isOpen.value) close();
+		else open();
+	}
+	function isEventInside(event) {
+		const elements = [
+			triggerElement,
+			contentElement,
+			resolvedInteractionTarget.value,
+			resolvedContentTarget.value
+		].filter((element) => element !== null);
+		const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+		if (elements.some((element) => path.includes(element))) return true;
+		const target = event.target;
+		return typeof Node !== "undefined" && target instanceof Node && elements.some((element) => element.contains(target));
+	}
+	function onDocumentPointerdown(event) {
+		if (!touchPinned || isEventInside(event)) return;
+		touchPinned = false;
+		closeImmediately("outside", event);
+	}
+	function setDocumentListeners(active) {
+		if (typeof document === "undefined" || active === documentListenersActive) return;
+		documentListenersActive = active;
+		const method = active ? "addEventListener" : "removeEventListener";
+		document[method]("keydown", onKeydown);
+		document[method]("pointerdown", onDocumentPointerdown, true);
+	}
+	function syncInteractionTarget() {
+		resolvedInteractionTarget.value = resolveInteractionTarget(toValue(options.interactionTarget));
+	}
+	function syncContentTarget() {
+		resolvedContentTarget.value = resolveContentTarget(toValue(options.contentTarget));
+	}
+	function bindTriggerTarget(target, cleanup) {
+		triggerElement = target;
+		target.addEventListener("pointerenter", onTriggerPointerenter);
+		target.addEventListener("pointerleave", onTriggerPointerleave);
+		target.addEventListener("pointerdown", onTriggerPointerdown);
+		target.addEventListener("pointerup", onTriggerPointerup);
+		target.addEventListener("pointercancel", onTriggerPointercancel);
+		target.addEventListener("click", onTriggerClick);
+		target.addEventListener("focusin", onTriggerFocusin);
+		target.addEventListener("focusout", onTriggerFocusout);
+		target.addEventListener("keydown", onKeydown);
+		cleanup(() => {
+			target.removeEventListener("pointerenter", onTriggerPointerenter);
+			target.removeEventListener("pointerleave", onTriggerPointerleave);
+			target.removeEventListener("pointerdown", onTriggerPointerdown);
+			target.removeEventListener("pointerup", onTriggerPointerup);
+			target.removeEventListener("pointercancel", onTriggerPointercancel);
+			target.removeEventListener("click", onTriggerClick);
+			target.removeEventListener("focusin", onTriggerFocusin);
+			target.removeEventListener("focusout", onTriggerFocusout);
+			target.removeEventListener("keydown", onKeydown);
+			if (triggerElement === target) triggerElement = null;
+			triggerHovered = false;
+			triggerFocused = false;
+			scheduleClose("hover");
+		});
+	}
+	function bindContentTarget(target, cleanup) {
+		contentElement = target;
+		target.addEventListener("pointerenter", onContentPointerenter);
+		target.addEventListener("pointerleave", onContentPointerleave);
+		target.addEventListener("pointerdown", onContentPointerdown);
+		target.addEventListener("focusin", onContentFocusin);
+		target.addEventListener("focusout", onContentFocusout);
+		target.addEventListener("keydown", onKeydown);
+		cleanup(() => {
+			target.removeEventListener("pointerenter", onContentPointerenter);
+			target.removeEventListener("pointerleave", onContentPointerleave);
+			target.removeEventListener("pointerdown", onContentPointerdown);
+			target.removeEventListener("focusin", onContentFocusin);
+			target.removeEventListener("focusout", onContentFocusout);
+			target.removeEventListener("keydown", onKeydown);
+			if (contentElement === target) contentElement = null;
+			contentHovered = false;
+			contentFocused = false;
+			scheduleClose("hover");
+		});
+	}
+	const triggerProps = computed(() => ({
+		"data-state": state.value,
+		onPointerenter: onTriggerPointerenter,
+		onPointerleave: onTriggerPointerleave,
+		onPointerdown: onTriggerPointerdown,
+		onPointerup: onTriggerPointerup,
+		onPointercancel: onTriggerPointercancel,
+		onClick: onTriggerClick,
+		onFocusin: onTriggerFocusin,
+		onFocusout: onTriggerFocusout,
+		onKeydown
+	}));
+	const contentProps = computed(() => ({
+		"data-state": state.value,
+		onPointerenter: onContentPointerenter,
+		onPointerleave: onContentPointerleave,
+		onPointerdown: onContentPointerdown,
+		onFocusin: onContentFocusin,
+		onFocusout: onContentFocusout,
+		onKeydown
+	}));
+	watch(openState, (value) => {
+		requestedOpen = value;
+		if (!value) {
+			contentHovered = false;
+			contentFocused = false;
+			contentElement = null;
+			touchPinned = false;
+		}
+	}, { flush: "sync" });
+	watch(isDisabled, (disabled) => {
+		if (!disabled) return;
+		triggerHovered = false;
+		contentHovered = false;
+		triggerFocused = false;
+		contentFocused = false;
+		touchPinned = false;
+		touchPointerActive = false;
+		touchClickPending = false;
+		closeImmediately("disabled");
+	});
+	watch(() => getTouchBehavior(), (behavior) => {
+		if (behavior === "toggle" || !touchPinned) return;
+		touchPinned = false;
+		closeImmediately("touch");
+	});
+	watch(() => toValue(options.interactionTarget), syncInteractionTarget, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => toValue(options.contentTarget), syncContentTarget, {
+		flush: "post",
+		immediate: true
+	});
+	watch(resolvedInteractionTarget, (target, _previous, cleanup) => {
+		if (target) bindTriggerTarget(target, cleanup);
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	watch(resolvedContentTarget, (target, _previous, cleanup) => {
+		if (target) bindContentTarget(target, cleanup);
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	watch(isOpen, setDocumentListeners, { flush: "sync" });
+	watch(isOpen, () => {
+		syncInteractionTarget();
+		syncContentTarget();
+	}, { flush: "post" });
+	onMounted(() => {
+		syncInteractionTarget();
+		syncContentTarget();
+		setDocumentListeners(isOpen.value);
+	});
+	onBeforeUnmount(() => {
+		disposed = true;
+		clearTimers();
+		setDocumentListeners(false);
+	});
+	return {
+		isOpen,
+		isDisabled,
+		state,
+		triggerProps,
+		contentProps,
+		open,
+		close,
+		toggle
+	};
+}
+//#endregion
+export { useHoverDisclosure as t };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export * from './components/color-input/index.js';
 export * from './components/color-picker/index.js';
 export * from './components/color-swatch/index.js';
 export * from './components/dropdown-menu/index.js';
+export * from './components/dialog/index.js';
 export * from './components/field/index.js';
 export * from './components/focus-trap/index.js';
 export * from './components/floating/index.js';

package/dist/index.js

@@ -15,13 +15,16 @@ import { t as color_swatch_default } from "./color-swatch.js";
 import { t as color_picker_default } from "./color-picker.js";
 import { t as input_default } from "./input.js";
 import { t as useFocusTrap } from "./useFocusTrap.js";
+import { n as useFloatingPosition } from "./useFloatingPosition.js";
+import { r as useTeleportTarget } from "./useTeleportTarget.js";
 import { t as popover_default } from "./popover.js";
 import { n as colorPickerParts, r as colorPickerSizes, t as colorPickerFormats } from "./color-picker2.js";
 import { t as colorSwatchParts } from "./color-swatch2.js";
-import { _ as DropdownMenuSubTrigger, a as DropdownMenuCheckboxItem, c as DropdownMenuItemIndicator, d as DropdownMenuRadioGroup, f as DropdownMenuRadioItem, g as DropdownMenuSubContent, h as DropdownMenuSub, i as useDropdownMenu, l as DropdownMenuLabel, m as DropdownMenuSeparator, n as dropdownMenuParts, o as DropdownMenuContent, p as DropdownMenuRoot, r as dropdown_menu_default, s as DropdownMenuContextTrigger, t as DropdownMenuItem, u as DropdownMenuPortal, v as DropdownMenuTrigger } from "./dropdown-menu.js";
+import { _ as dropdown_menu_content_default, a as dropdown_menu_trigger_default, c as dropdown_menu_sub_default, d as dropdown_menu_radio_item_default, f as dropdown_menu_radio_group_default, g as dropdown_menu_context_trigger_default, h as dropdown_menu_item_indicator_default, i as useDropdownMenu, l as dropdown_menu_separator_default, m as dropdown_menu_label_default, n as dropdownMenuParts, o as dropdown_menu_sub_trigger_default, p as dropdown_menu_portal_default, r as dropdown_menu_default, s as dropdown_menu_sub_content_default, t as DropdownMenuItem, u as dropdown_menu_root_default, v as dropdown_menu_checkbox_item_default } from "./dropdown-menu.js";
+import { a as dialog_overlay_default, c as dialog_close_default, i as dialog_portal_default, n as dialog_title_default, o as dialog_description_default, r as dialog_root_default, s as dialog_content_default, t as dialog_trigger_default } from "./dialog.js";
 import { n as field_default, t as fieldParts } from "./field.js";
 import { n as focus_trap_default, t as focusTrapParts } from "./focus-trap.js";
-import "./components/floating/index.js";
+import { t as useHoverDisclosure } from "./floating.js";
 import { t as icon_button_default } from "./icon-button.js";
 import { t as iconButtonParts } from "./icon-button2.js";
 import { t as inputParts } from "./input2.js";
@@ -39,6 +42,6 @@ import { n as switch_default, t as switchParts } from "./switch.js";
 import { a as tabs_trigger_default, c as tabs_default, d as useTabsList, f as useTabsTrigger, i as tabsTriggerParts, l as useTabs, n as tabsListParts, o as tabs_list_default, r as tabsParts, s as tabs_content_default, t as tabsContentParts, u as useTabsContent } from "./tabs.js";
 import { t as teleport_provider_default } from "./teleport-provider.js";
 import { n as textarea_default, t as textareaParts } from "./textarea.js";
-import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as toast_default, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
+import { a as toastColors, c as toastRadiuses, d as toastViewportParts, f as createToastStore, i as useToast, l as toastTypes, n as toast_viewport_default, o as toastParts, p as toast_default, r as toast_provider_default, s as toastPositions, t as useToastState, u as toastVariants } from "./toast.js";
 import { t as tooltipParts } from "./tooltip2.js";
-export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dropdown_menu_default as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFocusTrap, useTabs, useTabsContent, useTabsList, useTabsTrigger, useToast, useToastState };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, alert_default as Alert, aspect_ratio_default as AspectRatio, avatar_default as Avatar, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, button_link_default as ButtonLink, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, color_input_default as ColorInput, color_picker_default as ColorPicker, color_swatch_default as ColorSwatch, dialog_close_default as DialogClose, dialog_content_default as DialogContent, dialog_description_default as DialogDescription, dialog_overlay_default as DialogOverlay, dialog_portal_default as DialogPortal, dialog_root_default as DialogRoot, dialog_title_default as DialogTitle, dialog_trigger_default as DialogTrigger, dropdown_menu_default as DropdownMenu, dropdown_menu_checkbox_item_default as DropdownMenuCheckboxItem, dropdown_menu_content_default as DropdownMenuContent, dropdown_menu_context_trigger_default as DropdownMenuContextTrigger, DropdownMenuItem, dropdown_menu_item_indicator_default as DropdownMenuItemIndicator, dropdown_menu_label_default as DropdownMenuLabel, dropdown_menu_portal_default as DropdownMenuPortal, dropdown_menu_radio_group_default as DropdownMenuRadioGroup, dropdown_menu_radio_item_default as DropdownMenuRadioItem, dropdown_menu_root_default as DropdownMenuRoot, dropdown_menu_separator_default as DropdownMenuSeparator, dropdown_menu_sub_default as DropdownMenuSub, dropdown_menu_sub_content_default as DropdownMenuSubContent, dropdown_menu_sub_trigger_default as DropdownMenuSubTrigger, dropdown_menu_trigger_default as DropdownMenuTrigger, field_default as Field, focus_trap_default as FocusTrap, icon_button_default as IconButton, input_default as Input, modal_default as Modal, number_input_default as NumberInput, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, range_slider_default as RangeSlider, select_default as Select, slider_default as Slider, switch_default as Switch, tabs_default as Tabs, tabs_content_default as TabsContent, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, teleport_provider_default as TeleportProvider, textarea_default as Textarea, toast_default as Toast, toast_provider_default as ToastProvider, toast_viewport_default as ToastViewport, tooltip_default as Tooltip, accordionItemParts, accordionParts, alertColors, alertParts, alertRadiuses, alertVariants, aspectRatioParts, avatarColors, avatarParts, avatarRadiuses, avatarSizes, avatarVariants, badgeColors, badgeParts, badgeRadiuses, badgeSizes, badgeVariants, buttonGroupParts, buttonLinkParts, buttonParts, cardParts, checkboxParts, collapseParts, colorInputParts, colorPickerFormats, colorPickerParts, colorPickerSizes, colorSwatchParts, createToastStore, dropdownMenuParts, fieldParts, focusTrapParts, iconButtonParts, inputParts, modalParts, numberInputParts, overlayParts, popoverParts, popoverPlacements, progressColors, progressParts, progressRadiuses, progressSizes, radioGroupParts, radioParts, rangeSliderParts, selectParts, sliderColors, sliderOrientations, sliderParts, sliderSizes, switchParts, tabsContentParts, tabsListParts, tabsParts, tabsTriggerParts, textareaParts, toastColors, toastParts, toastPositions, toastRadiuses, toastTypes, toastVariants, toastViewportParts, tooltipParts, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useFloatingPosition, useFocusTrap, useHoverDisclosure, useTabs, useTabsContent, useTabsList, useTabsTrigger, useTeleportTarget, useToast, useToastState };

package/dist/input.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-input[data-v-e51bce91] {
+.rp-input[data-v-3dd93444] {
     --_rp-input-height: var(--rp-size-control-md);
     --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-input-font-size: var(--rp-font-size-md);
@@ -20,81 +20,81 @@
     cursor: text;
     transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-input[data-v-e51bce91]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-3dd93444]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
     border-color: var(--rp-color-control-border-hover);
 }
-.rp-input[data-v-e51bce91]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-3dd93444]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
     border-color: var(--rp-color-control-border-focus);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-input[data-v-e51bce91] {
+.rp-input[data-v-3dd93444] {
     height: var(--_rp-input-height);
     padding: 0 var(--_rp-input-padding-x);
     font-size: var(--_rp-input-font-size);
     border-radius: var(--_rp-input-radius);
 }
-.rp-input--size-xs[data-v-e51bce91] {
+.rp-input--size-xs[data-v-3dd93444] {
     --_rp-input-height: var(--rp-size-control-xs);
     --_rp-input-padding-x: calc(var(--rp-size-control-xs) / 3);
     --_rp-input-font-size: var(--rp-font-size-xs);
 }
-.rp-input--size-sm[data-v-e51bce91] {
+.rp-input--size-sm[data-v-3dd93444] {
     --_rp-input-height: var(--rp-size-control-sm);
     --_rp-input-padding-x: calc(var(--rp-size-control-sm) / 3);
     --_rp-input-font-size: var(--rp-font-size-sm);
 }
-.rp-input--size-md[data-v-e51bce91] {
+.rp-input--size-md[data-v-3dd93444] {
     --_rp-input-height: var(--rp-size-control-md);
     --_rp-input-padding-x: calc(var(--rp-size-control-md) / 3);
     --_rp-input-font-size: var(--rp-font-size-md);
 }
-.rp-input--size-lg[data-v-e51bce91] {
+.rp-input--size-lg[data-v-3dd93444] {
     --_rp-input-height: var(--rp-size-control-lg);
     --_rp-input-padding-x: calc(var(--rp-size-control-lg) / 3);
     --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--size-xl[data-v-e51bce91] {
+.rp-input--size-xl[data-v-3dd93444] {
     --_rp-input-height: var(--rp-size-control-xl);
     --_rp-input-padding-x: calc(var(--rp-size-control-xl) / 3);
     --_rp-input-font-size: var(--rp-font-size-xl);
 }
-.rp-input--radius-xs[data-v-e51bce91] {
+.rp-input--radius-xs[data-v-3dd93444] {
     --_rp-input-radius: var(--rp-radius-xs);
 }
-.rp-input--radius-sm[data-v-e51bce91] {
+.rp-input--radius-sm[data-v-3dd93444] {
     --_rp-input-radius: var(--rp-radius-sm);
 }
-.rp-input--radius-md[data-v-e51bce91] {
+.rp-input--radius-md[data-v-3dd93444] {
     --_rp-input-radius: var(--rp-radius-md);
 }
-.rp-input--radius-lg[data-v-e51bce91] {
+.rp-input--radius-lg[data-v-3dd93444] {
     --_rp-input-radius: var(--rp-radius-lg);
 }
-.rp-input--radius-xl[data-v-e51bce91] {
+.rp-input--radius-xl[data-v-3dd93444] {
     --_rp-input-radius: var(--rp-radius-xl);
 }
-.rp-input--disabled[data-v-e51bce91] {
+.rp-input--disabled[data-v-3dd93444] {
     opacity: var(--rp-opacity-disabled);
     cursor: not-allowed;
 }
-.rp-input--valid[data-v-e51bce91] {
+.rp-input--valid[data-v-3dd93444] {
     border-color: var(--_rp-input-valid-border);
 }
-.rp-input--valid[data-v-e51bce91]:focus-within:not(.rp-input--disabled) {
+.rp-input--valid[data-v-3dd93444]:focus-within:not(.rp-input--disabled) {
     border-color: var(--_rp-input-valid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-valid-ring);
 }
-.rp-input--invalid[data-v-e51bce91] {
+.rp-input--invalid[data-v-3dd93444] {
     border-color: var(--_rp-input-invalid-border);
 }
-.rp-input--invalid[data-v-e51bce91]:focus-within:not(.rp-input--disabled) {
+.rp-input--invalid[data-v-3dd93444]:focus-within:not(.rp-input--disabled) {
     border-color: var(--_rp-input-invalid-border);
     box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-input-invalid-ring);
 }
-.rp-input--readonly[data-v-e51bce91] {
+.rp-input--readonly[data-v-3dd93444] {
     background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-input__native[data-v-e51bce91] {
+.rp-input__native[data-v-3dd93444] {
     box-sizing: border-box;
     flex: 1;
     width: 100%;
@@ -108,13 +108,13 @@
     color: var(--rp-color-control-fg);
     line-height: 1;
 }
-.rp-input__native[data-v-e51bce91]::placeholder {
+.rp-input__native[data-v-3dd93444]::placeholder {
     color: var(--rp-color-control-placeholder);
 }
-.rp-input__native[data-v-e51bce91]:disabled {
+.rp-input__native[data-v-3dd93444]:disabled {
     cursor: not-allowed;
 }
-.rp-input__left[data-v-e51bce91], .rp-input__right[data-v-e51bce91] {
+.rp-input__left[data-v-3dd93444], .rp-input__right[data-v-3dd93444] {
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;

package/dist/input.js

@@ -2,8 +2,9 @@ import './input.css';
 import { t as bem } from "./bem.js";
 import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as useTextFormControl, o as useControllableValue, t as claimNestedFormControlOwner } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref, watch } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/input/useInput.ts
 var INTERACTIVE_SELECTOR = [
 	"button",
@@ -47,8 +48,8 @@ function useInput(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-e51bce91>");
-var t1 = template("<label data-v-e51bce91><input data-v-e51bce91>", 1);
+var t0 = template("<span data-v-3dd93444>");
+var t1 = template("<label data-v-3dd93444><input data-v-3dd93444>", 1);
 //#endregion
 //#region src/components/input/input.vue
 var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -58,7 +59,9 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	props: {
 		id: {},
 		name: {},
-		modelValue: {},
+		form: {},
+		modelValue: { default: void 0 },
+		defaultValue: { default: "" },
 		type: { default: "text" },
 		size: {},
 		radius: {},
@@ -92,12 +95,18 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
 		const { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {
-			emit("update:modelValue", value);
+			controllable.setValue(value);
 		});
+		if (!claimNestedFormControlOwner()) useTextFormControl(() => inputRef.value, controllable, () => props.validationMessage);
 		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			class: rootClass.value,
@@ -118,8 +127,9 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				}),
 				id: control.id,
 				name: props.name,
+				form: control.form ?? forwardedAttrs.form,
 				type: props.type,
-				value: props.modelValue,
+				value: controllable.value.value,
 				placeholder: props.placeholder,
 				disabled: control.disabled || void 0,
 				readonly: props.readonly || void 0,
@@ -138,9 +148,9 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				}
 			};
 		});
-		watch([inputRef, () => props.validationMessage], ([input, validationMessage]) => input?.setCustomValidity(validationMessage ?? ""), {
-			flush: "post",
-			immediate: true
+		__expose({
+			nativeElement: inputRef,
+			focus: () => inputRef.value?.focus()
 		});
 		const n9 = t1();
 		const n4 = child(n9, 1);
@@ -165,6 +175,6 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n9;
 	}
-}), [["__scopeId", "data-v-e51bce91"]]);
+}), [["__scopeId", "data-v-3dd93444"]]);
 //#endregion
 export { input_default as t };