ropav 0.0.6 → 0.0.8

package/dist/field.css

@@ -1,4 +1,4 @@
-.rp-field[data-v-b8c3dcbe] {
+.rp-field[data-v-0d027ead] {
   --_rp-field-danger: var(--rp-color-danger);
   display: grid;
   gap: var(--rp-spacing-1);
@@ -6,10 +6,10 @@
   font-family: var(--rp-font-family);
   color: var(--rp-color-text);
 }
-html.dark .rp-field[data-v-b8c3dcbe] {
+html.dark .rp-field[data-v-0d027ead] {
   --_rp-field-danger: var(--rp-color-danger-fg);
 }
-.rp-field__label[data-v-b8c3dcbe] {
+.rp-field__label[data-v-0d027ead] {
   display: inline-flex;
   width: fit-content;
   align-items: center;
@@ -19,22 +19,25 @@ html.dark .rp-field[data-v-b8c3dcbe] {
   font-weight: var(--rp-font-weight-medium);
   line-height: var(--rp-line-height-normal);
 }
-.rp-field__required[data-v-b8c3dcbe] {
+.rp-field__required[data-v-0d027ead] {
   color: var(--_rp-field-danger);
   line-height: var(--rp-line-height-none);
 }
-.rp-field__control[data-v-b8c3dcbe] {
+.rp-field__label + .rp-field__control[data-v-0d027ead] {
+  margin-block-start: var(--rp-spacing-1);
+}
+.rp-field__control[data-v-0d027ead] {
   min-width: 0;
 }
-.rp-field__description[data-v-b8c3dcbe], .rp-field__message[data-v-b8c3dcbe] {
+.rp-field__description[data-v-0d027ead], .rp-field__message[data-v-0d027ead] {
   margin: 0;
   color: var(--rp-color-text-secondary);
   font-size: var(--rp-font-size-sm);
   line-height: var(--rp-line-height-normal);
 }
-.rp-field--invalid .rp-field__message[data-v-b8c3dcbe] {
+.rp-field--invalid .rp-field__message[data-v-0d027ead] {
   color: var(--_rp-field-danger);
 }
-.rp-field--disabled .rp-field__label[data-v-b8c3dcbe], .rp-field--disabled .rp-field__description[data-v-b8c3dcbe], .rp-field--disabled .rp-field__message[data-v-b8c3dcbe] {
+.rp-field--disabled .rp-field__label[data-v-0d027ead], .rp-field--disabled .rp-field__description[data-v-0d027ead], .rp-field--disabled .rp-field__message[data-v-0d027ead] {
   color: var(--rp-color-text-disabled);
 }

package/dist/field.js

@@ -1,13 +1,81 @@
 import './field.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, useId, useSlots } from "vue";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setClass, setInsertionState, setProp, setText, template, toDisplayString, unref, useId, useSlots } from "vue";
+//#region src/components/field/useField.ts
+var INTERACTIVE_LABEL_SELECTOR = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function isInteractiveLabelTarget(target) {
+	return Boolean(target.closest(INTERACTIVE_LABEL_SELECTOR));
+}
+function useField(props) {
+	const slots = useSlots();
+	const generatedId = useId();
+	const controlId = computed(() => props.id ?? `${generatedId}-control`);
+	const labelId = computed(() => `${controlId.value}-label`);
+	const descriptionId = computed(() => `${controlId.value}-description`);
+	const messageId = computed(() => `${controlId.value}-message`);
+	const isInvalid = computed(() => Boolean(props.invalid || props.error));
+	const messageText = computed(() => props.error || props.message);
+	const hasLabel = computed(() => Boolean(props.label || slots.label));
+	const hasDescription = computed(() => Boolean(props.description || slots.description));
+	const hasMessage = computed(() => Boolean(messageText.value || slots.message));
+	const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
+	const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
+	const rootClass = computed(() => bem("rp-field", {
+		disabled: props.disabled,
+		required: props.required,
+		invalid: isInvalid.value
+	}));
+	const controlProps = computed(() => ({
+		id: controlId.value,
+		disabled: props.disabled || void 0,
+		required: props.required || void 0,
+		invalid: isInvalid.value || void 0,
+		labelledby: controlLabelledby.value,
+		describedby: controlDescribedby.value
+	}));
+	function focusControl(e) {
+		if (props.disabled) return;
+		const target = e.target;
+		if (target instanceof Element && isInteractiveLabelTarget(target)) return;
+		const label = e.currentTarget;
+		const control = label instanceof HTMLLabelElement ? label.control ?? label.ownerDocument.getElementById(controlId.value) : void 0;
+		if (control instanceof HTMLElement) control.focus();
+	}
+	return {
+		controlId,
+		labelId,
+		descriptionId,
+		messageId,
+		isInvalid,
+		messageText,
+		hasLabel,
+		hasDescription,
+		hasMessage,
+		controlLabelledby,
+		controlDescribedby,
+		rootClass,
+		controlProps,
+		focusControl
+	};
+}
+//#endregion
 //#region src/components/field/field.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
-var t1 = template("<span data-v-b8c3dcbe class=rp-field__required aria-hidden=true>*", 2);
-var t2 = template("<label data-v-b8c3dcbe class=rp-field__label>");
-var t3 = template("<p data-v-b8c3dcbe class=rp-field__description>");
-var t4 = template("<p data-v-b8c3dcbe class=rp-field__message>");
-var t5 = template("<div data-v-b8c3dcbe><div data-v-b8c3dcbe class=rp-field__control></div>", 1);
+var t1 = template("<span data-v-0d027ead class=rp-field__required aria-hidden=true>*", 2);
+var t2 = template("<label data-v-0d027ead class=rp-field__label>");
+var t3 = template("<p data-v-0d027ead class=rp-field__description>");
+var t4 = template("<p data-v-0d027ead class=rp-field__message>");
+var t5 = template("<div data-v-0d027ead><div data-v-0d027ead class=rp-field__control></div>", 1);
+delegateEvents("mousedown");
 //#endregion
 //#region src/components/field/field.vue
 var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -33,42 +101,16 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}
 	},
 	setup(__props) {
-		const props = __props;
-		const slots = useSlots();
-		const generatedId = useId();
-		const controlId = computed(() => props.id ?? `${generatedId}-control`);
-		const labelId = computed(() => `${controlId.value}-label`);
-		const descriptionId = computed(() => `${controlId.value}-description`);
-		const messageId = computed(() => `${controlId.value}-message`);
-		const isInvalid = computed(() => Boolean(props.invalid || props.error));
-		const messageText = computed(() => props.error || props.message);
-		const hasLabel = computed(() => Boolean(props.label || slots.label));
-		const hasDescription = computed(() => Boolean(props.description || slots.description));
-		const hasMessage = computed(() => Boolean(messageText.value || slots.message));
-		const controlLabelledby = computed(() => hasLabel.value ? labelId.value : void 0);
-		const controlDescribedby = computed(() => [hasDescription.value ? descriptionId.value : void 0, hasMessage.value ? messageId.value : void 0].filter(Boolean).join(" ") || void 0);
-		const rootClass = computed(() => bem("rp-field", {
-			disabled: props.disabled,
-			required: props.required,
-			invalid: isInvalid.value
-		}));
-		const controlProps = computed(() => ({
-			id: controlId.value,
-			disabled: props.disabled || void 0,
-			required: props.required || void 0,
-			invalid: isInvalid.value || void 0,
-			labelledby: controlLabelledby.value,
-			describedby: controlDescribedby.value
-		}));
+		const { controlId, labelId, descriptionId, messageId, isInvalid, messageText, hasLabel, hasDescription, hasMessage, controlLabelledby, controlDescribedby, rootClass, controlProps, focusControl } = useField(__props);
 		const n23 = t5();
 		const n10 = child(n23, 1);
-		renderEffect(() => setClass(n23, rootClass.value));
+		renderEffect(() => setClass(n23, unref(rootClass)));
 		setInsertionState(n23, 0, 0);
-		createIf(() => hasLabel.value, () => {
+		createIf(() => unref(hasLabel), () => {
 			const n8 = t2();
 			renderEffect(() => {
-				setProp(n8, "id", labelId.value);
-				setProp(n8, "for", controlId.value);
+				setProp(n8, "id", unref(labelId));
+				setProp(n8, "for", unref(controlId));
 			});
 			setInsertionState(n8, null, 0);
 			createSlot("label", null, () => {
@@ -80,22 +122,23 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			createIf(() => __props.required, () => {
 				return t1();
 			});
+			n8.$evtmousedown = createInvoker((e) => unref(focusControl)(e));
 			return n8;
 		});
 		setInsertionState(n10, null, 0);
 		createSlot("default", {
-			id: () => controlId.value,
+			id: () => unref(controlId),
 			disabled: () => __props.disabled || void 0,
 			required: () => __props.required || void 0,
-			invalid: () => isInvalid.value || void 0,
-			labelledby: () => controlLabelledby.value,
-			describedby: () => controlDescribedby.value,
-			controlProps: () => controlProps.value
+			invalid: () => unref(isInvalid) || void 0,
+			labelledby: () => unref(controlLabelledby),
+			describedby: () => unref(controlDescribedby),
+			controlProps: () => unref(controlProps)
 		}, null, 1);
 		setInsertionState(n23, null, 2);
-		createIf(() => hasDescription.value, () => {
+		createIf(() => unref(hasDescription), () => {
 			const n16 = t3();
-			renderEffect(() => setProp(n16, "id", descriptionId.value));
+			renderEffect(() => setProp(n16, "id", unref(descriptionId)));
 			setInsertionState(n16, null, 0);
 			createSlot("description", null, () => {
 				const n15 = t0();
@@ -105,24 +148,22 @@ var field_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			return n16;
 		});
 		setInsertionState(n23, null, 3);
-		createIf(() => hasMessage.value, () => {
+		createIf(() => unref(hasMessage), () => {
 			const n22 = t4();
 			renderEffect(() => {
-				setProp(n22, "id", messageId.value);
-				setProp(n22, "role", isInvalid.value ? "alert" : void 0);
+				setProp(n22, "id", unref(messageId));
+				setProp(n22, "role", unref(isInvalid) ? "alert" : void 0);
 			});
 			setInsertionState(n22, null, 0);
 			createSlot("message", null, () => {
 				const n21 = t0();
-				renderEffect(() => setText(n21, toDisplayString(messageText.value)));
+				renderEffect(() => setText(n21, toDisplayString(unref(messageText))));
 				return n21;
 			}, 1);
 			return n22;
 		});
 		return n23;
 	}
-}), [["__scopeId", "data-v-b8c3dcbe"]]);
+}), [["__scopeId", "data-v-0d027ead"]]);
 //#endregion
 export { field_default as t };
-
-//# sourceMappingURL=field.js.map

package/dist/icon-button.css

@@ -352,7 +352,7 @@ to {
   justify-content: center;
   line-height: 0;
 }
-.rp-icon-button__icon svg[data-v-7005752e-s] {
+.rp-icon-button__icon[data-v-7005752e] >  svg {
   display: block;
   width: 1em;
   height: 1em;

package/dist/icon-button.js

@@ -1,7 +1,8 @@
 import './icon-button.css';
-import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as isComponentPresetColor } from "./componentColors.js";
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as loader_circle_default, t as getButtonColorStyle } from "./useButtonColor.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/icon-button/icon-button.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<span data-v-7005752e class=rp-icon-button__icon aria-hidden=true>");
@@ -63,5 +64,3 @@ var icon_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 }), [["__scopeId", "data-v-7005752e"]]);
 //#endregion
 export { icon_button_default as t };
-
-//# sourceMappingURL=icon-button.js.map

package/dist/index.d.ts

@@ -1,14 +1,22 @@
+export * from './components/accordion';
+export * from './components/badge';
 export * from './components/button';
 export * from './components/button-group';
 export * from './components/card';
 export * from './components/checkbox';
+export * from './components/collapse';
+export * from './components/dropdown-menu';
 export * from './components/field';
 export * from './components/icon-button';
 export * from './components/input';
+export * from './components/modal';
+export * from './components/overlay';
+export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio';
 export * from './components/select';
 export * from './components/slider';
 export * from './components/switch';
+export * from './components/tabs';
 export * from './components/textarea';
 export * from './components/tooltip';

package/dist/index.js

@@ -1,16 +1,27 @@
+import { t as useCollapse } from "./useCollapse.js";
+import { i as useAccordionItem, n as accordion_default, r as useAccordion, t as accordion_item_default } from "./accordion.js";
+import { a as badge_default, i as badgeVariants, n as badgeRadiuses, r as badgeSizes, t as badgeColors } from "./badge.js";
 import { t as button_default } from "./button.js";
 import { t as button_group_default } from "./button-group.js";
 import { t as card_default } from "./card.js";
 import { t as checkbox_default } from "./checkbox.js";
+import { t as collapse_default } from "./collapse.js";
+import { n as useDropdownMenu, t as dropdown_menu_default } from "./dropdown-menu.js";
 import { t as field_default } from "./field.js";
 import { t as icon_button_default } from "./icon-button.js";
+import "./components/icon-button/index.js";
 import { t as input_default } from "./input.js";
+import { t as overlay_default } from "./overlay.js";
+import { t as modal_default } from "./modal.js";
+import "./components/overlay/index.js";
+import { t as popover_default } from "./popover.js";
 import { i as progress_default, n as progressRadiuses, r as progressSizes, t as progressColors } from "./progress.js";
 import { n as radio_default, t as radio_group_default } from "./radio.js";
 import { t as select_default } from "./select.js";
 import { t as tooltip_default } from "./tooltip.js";
 import { i as sliderSizes, n as sliderColors, r as sliderOrientations, t as slider_default } from "./slider.js";
 import { t as switch_default } from "./switch.js";
+import { a as useTabs, c as useTabsTrigger, i as tabs_default, n as tabs_list_default, o as useTabsContent, r as tabs_content_default, s as useTabsList, t as tabs_trigger_default } from "./tabs.js";
 import { t as textarea_default } from "./textarea.js";
 import "./components/tooltip/index.js";
-export { button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, field_default as Field, icon_button_default as IconButton, input_default as Input, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, slider_default as Slider, switch_default as Switch, textarea_default as Textarea, tooltip_default as Tooltip, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes };
+export { accordion_default as Accordion, accordion_item_default as AccordionItem, badge_default as Badge, button_default as Button, button_group_default as ButtonGroup, card_default as Card, checkbox_default as Checkbox, collapse_default as Collapse, dropdown_menu_default as DropdownMenu, field_default as Field, icon_button_default as IconButton, input_default as Input, modal_default as Modal, overlay_default as Overlay, popover_default as Popover, progress_default as Progress, radio_default as Radio, radio_group_default as RadioGroup, 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, textarea_default as Textarea, tooltip_default as Tooltip, badgeColors, badgeRadiuses, badgeSizes, badgeVariants, progressColors, progressRadiuses, progressSizes, sliderColors, sliderOrientations, sliderSizes, useAccordion, useAccordionItem, useCollapse, useDropdownMenu, useTabs, useTabsContent, useTabsList, useTabsTrigger };

package/dist/input.css

@@ -1,4 +1,4 @@
-.rp-input[data-v-fedf15e7] {
+.rp-input[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-md);
   --_rp-input-padding-x: var(--rp-spacing-3);
   --_rp-input-font-size: var(--rp-font-size-base);
@@ -19,87 +19,87 @@
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-input[data-v-fedf15e7]:hover:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-e5ad32a7]: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-fedf15e7]:focus-within:not(.rp-input--disabled):not(.rp-input--invalid):not(.rp-input--valid) {
+.rp-input[data-v-e5ad32a7]: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-fedf15e7] {
+.rp-input[data-v-e5ad32a7] {
   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-fedf15e7] {
+.rp-input--size-xs[data-v-e5ad32a7] {
   --_rp-input-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
   --_rp-input-padding-x: var(--rp-spacing-1);
   --_rp-input-font-size: var(--rp-font-size-xs);
 }
-.rp-input--size-sm[data-v-fedf15e7] {
+.rp-input--size-sm[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-sm);
   --_rp-input-padding-x: var(--rp-spacing-2);
   --_rp-input-font-size: var(--rp-font-size-sm);
 }
-.rp-input--size-md[data-v-fedf15e7] {
+.rp-input--size-md[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-md);
   --_rp-input-padding-x: var(--rp-spacing-3);
   --_rp-input-font-size: var(--rp-font-size-base);
 }
-.rp-input--size-lg[data-v-fedf15e7] {
+.rp-input--size-lg[data-v-e5ad32a7] {
   --_rp-input-height: var(--rp-size-control-lg);
   --_rp-input-padding-x: var(--rp-spacing-4);
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--size-xl[data-v-fedf15e7] {
+.rp-input--size-xl[data-v-e5ad32a7] {
   --_rp-input-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
   --_rp-input-padding-x: var(--rp-spacing-5);
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
-.rp-input--radius-xs[data-v-fedf15e7] {
+.rp-input--radius-xs[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-xs);
 }
-.rp-input--radius-sm[data-v-fedf15e7] {
+.rp-input--radius-sm[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-sm);
 }
-.rp-input--radius-md[data-v-fedf15e7] {
+.rp-input--radius-md[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-md);
 }
-.rp-input--radius-lg[data-v-fedf15e7] {
+.rp-input--radius-lg[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-lg);
 }
-.rp-input--radius-xl[data-v-fedf15e7] {
+.rp-input--radius-xl[data-v-e5ad32a7] {
   --_rp-input-radius: var(--rp-radius-xl);
 }
-html.dark .rp-input[data-v-fedf15e7] {
+html.dark .rp-input[data-v-e5ad32a7] {
   --_rp-input-valid-border: var(--rp-color-success-fg);
   --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
   --_rp-input-invalid-border: var(--rp-color-danger-fg);
   --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
 }
-.rp-input--disabled[data-v-fedf15e7] {
+.rp-input--disabled[data-v-e5ad32a7] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-input--valid[data-v-fedf15e7] {
+.rp-input--valid[data-v-e5ad32a7] {
   border-color: var(--_rp-input-valid-border);
 }
-.rp-input--valid[data-v-fedf15e7]:focus-within:not(.rp-input--disabled) {
+.rp-input--valid[data-v-e5ad32a7]: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-fedf15e7] {
+.rp-input--invalid[data-v-e5ad32a7] {
   border-color: var(--_rp-input-invalid-border);
 }
-.rp-input--invalid[data-v-fedf15e7]:focus-within:not(.rp-input--disabled) {
+.rp-input--invalid[data-v-e5ad32a7]: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-fedf15e7] {
+.rp-input--readonly[data-v-e5ad32a7] {
   background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-input__native[data-v-fedf15e7] {
+.rp-input__native[data-v-e5ad32a7] {
   box-sizing: border-box;
   flex: 1;
   width: 100%;
@@ -113,13 +113,13 @@ html.dark .rp-input[data-v-fedf15e7] {
   color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-none);
 }
-.rp-input__native[data-v-fedf15e7]::placeholder {
+.rp-input__native[data-v-e5ad32a7]::placeholder {
   color: var(--rp-color-control-placeholder);
 }
-.rp-input__native[data-v-fedf15e7]:disabled {
+.rp-input__native[data-v-e5ad32a7]:disabled {
   cursor: not-allowed;
 }
-.rp-input__left[data-v-fedf15e7], .rp-input__right[data-v-fedf15e7] {
+.rp-input__left[data-v-e5ad32a7], .rp-input__right[data-v-e5ad32a7] {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;

package/dist/input.js

@@ -1,11 +1,54 @@
 import './input.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref } from "vue";
+import { child, computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref } from "vue";
+//#region src/components/input/useInput.ts
+var INTERACTIVE_SELECTOR = [
+	"button",
+	"a[href]",
+	`input:not(.rp-input__native)`,
+	"select",
+	"textarea",
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function isInteractiveElement(target) {
+	return Boolean(target.closest(INTERACTIVE_SELECTOR));
+}
+function useInput(props, emitUpdate) {
+	const inputRef = ref(null);
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: control.invalid,
+		valid: control.valid && !control.invalid,
+		readonly: props.readonly
+	}));
+	function onInput(e) {
+		emitUpdate(e.target.value);
+	}
+	function focusInput(e) {
+		if (control.disabled) return;
+		const target = e.target;
+		if (target instanceof Element && isInteractiveElement(target)) return;
+		inputRef.value?.focus();
+	}
+	return {
+		inputRef,
+		control,
+		rootClass,
+		onInput,
+		focusInput
+	};
+}
+//#endregion
 //#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-fedf15e7 class=rp-input__left>");
-var t1 = template("<span data-v-fedf15e7 class=rp-input__right>");
-var t2 = template("<label data-v-fedf15e7><input data-v-fedf15e7 class=rp-input__native>", 1);
+var t0 = template("<span data-v-e5ad32a7 class=rp-input__left>");
+var t1 = template("<span data-v-e5ad32a7 class=rp-input__right>");
+var t2 = template("<label data-v-e5ad32a7><input data-v-e5ad32a7 class=rp-input__native>", 1);
 delegateEvents("input", "mousedown");
 //#endregion
 //#region src/components/input/input.vue
@@ -48,38 +91,13 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	setup(__props, { emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const control = useControlState(props);
-		const rootClass = computed(() => bem("rp-input", {
-			[`size-${props.size}`]: Boolean(props.size),
-			[`radius-${props.radius}`]: Boolean(props.radius),
-			disabled: control.disabled,
-			invalid: control.invalid,
-			valid: control.valid && !control.invalid,
-			readonly: props.readonly
-		}));
-		function onInput(e) {
-			emit("update:modelValue", e.target.value);
-		}
-		function focusInput(e) {
-			if (control.disabled) return;
-			const target = e.target;
-			if (target instanceof Element && isInteractiveElement(target)) return;
-			e.currentTarget.querySelector(".rp-input__native")?.focus();
-		}
-		function isInteractiveElement(target) {
-			return Boolean(target.closest([
-				"button",
-				"a[href]",
-				"input:not(.rp-input__native)",
-				"select",
-				"textarea",
-				"[contenteditable=\"true\"]",
-				"[tabindex]:not([tabindex=\"-1\"])"
-			].join(",")));
-		}
+		const { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		const _setTemplateRef = createTemplateRefSetter();
 		const n9 = t2();
 		const n4 = child(n9, 1);
-		renderEffect(() => setClass(n9, rootClass.value));
+		renderEffect(() => setClass(n9, unref(rootClass)));
 		setInsertionState(n9, 0, 0);
 		createIf(() => $slots.left, () => {
 			const n3 = t0();
@@ -87,7 +105,8 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			createSlot("left", null, null, 1);
 			return n3;
 		});
-		n4.$evtinput = createInvoker(onInput);
+		n4.$evtinput = createInvoker((e) => unref(onInput)(e));
+		_setTemplateRef(n4, inputRef, null, "inputRef");
 		renderEffect(() => {
 			const _control = unref(control);
 			const _control_required = _control.required;
@@ -112,11 +131,9 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			createSlot("right", null, null, 1);
 			return n8;
 		});
-		n9.$evtmousedown = createInvoker(focusInput);
+		n9.$evtmousedown = createInvoker((e) => unref(focusInput)(e));
 		return n9;
 	}
-}), [["__scopeId", "data-v-fedf15e7"]]);
+}), [["__scopeId", "data-v-e5ad32a7"]]);
 //#endregion
 export { input_default as t };
-
-//# sourceMappingURL=input.js.map