ropav 0.0.6 → 0.0.7

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,10 +131,10 @@ 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 };
 

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../src/components/input/input.vue","../src/components/input/input.vue"],"sourcesContent":["<template>\n    <label :class=\"rootClass\" @mousedown=\"focusInput\">\n        <span v-if=\"$slots.left\" class=\"rp-input__left\">\n            <slot name=\"left\" />\n        </span>\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-input__native\"\n            :type=\"type\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n        <span v-if=\"$slots.right\" class=\"rp-input__right\">\n            <slot name=\"right\" />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { InputProps } from './types';\n\ndefineOptions({ name: 'RpInput' });\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    placeholder: '',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst control = useControlState(props);\n\nconst rootClass = computed(() =>\n    bem('rp-input', {\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        disabled: control.disabled,\n        invalid: control.invalid,\n        valid: control.valid && !control.invalid,\n        readonly: props.readonly,\n    }),\n);\n\nfunction onInput(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n\nfunction focusInput(e: MouseEvent) {\n    if (control.disabled) return;\n\n    const target = e.target;\n    if (target instanceof Element && isInteractiveElement(target)) return;\n\n    (e.currentTarget as HTMLElement).querySelector<HTMLInputElement>('.rp-input__native')?.focus();\n}\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input:not(.rp-input__native)',\n                'select',\n                'textarea',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label :class=\"rootClass\" @mousedown=\"focusInput\">\n        <span v-if=\"$slots.left\" class=\"rp-input__left\">\n            <slot name=\"left\" />\n        </span>\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-input__native\"\n            :type=\"type\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n        <span v-if=\"$slots.right\" class=\"rp-input__right\">\n            <slot name=\"right\" />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { InputProps } from './types';\n\ndefineOptions({ name: 'RpInput' });\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    placeholder: '',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst control = useControlState(props);\n\nconst rootClass = computed(() =>\n    bem('rp-input', {\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        disabled: control.disabled,\n        invalid: control.invalid,\n        valid: control.valid && !control.invalid,\n        readonly: props.readonly,\n    }),\n);\n\nfunction onInput(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n\nfunction focusInput(e: MouseEvent) {\n    if (control.disabled) return;\n\n    const target = e.target;\n    if (target instanceof Element && isInteractiveElement(target)) return;\n\n    (e.currentTarget as HTMLElement).querySelector<HTMLInputElement>('.rp-input__native')?.focus();\n}\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input:not(.rp-input__native)',\n                'select',\n                'textarea',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAIb,MAAM,UAAU,gBAAgB,KAAK;EAErC,MAAM,YAAY,eACd,IAAI,YAAY;IACX,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;GAChD,UAAU,QAAQ;GAClB,SAAS,QAAQ;GACjB,OAAO,QAAQ,SAAS,CAAC,QAAQ;GACjC,UAAU,MAAM;EACpB,CAAC,CACL;EAEA,SAAS,QAAQ,GAAU;GACvB,KAAK,qBAAsB,EAAE,OAA4B,KAAK;EAClE;EAEA,SAAS,WAAW,GAAe;GAC/B,IAAI,QAAQ,UAAU;GAEtB,MAAM,SAAS,EAAE;GACjB,IAAI,kBAAkB,WAAW,qBAAqB,MAAM,GAAG;GAE/D,EAAG,cAA8B,cAAgC,mBAAmB,CAAC,EAAE,MAAM;EACjG;EAEA,SAAS,qBAAqB,QAAiB;GAC3C,OAAO,QACH,OAAO,QACH;IACI;IACA;IACA;IACA;IACA;IACA;IACA;GACJ,CAAC,CAAC,KAAK,GAAG,CACd,CACJ;EACJ;;;kCAzFmB,UAAA,KAAS,CAAA;;iBACR,OAAM,YAAA;;;cACR,QAAW,MAAA,MAAA,CAAA;;;+BAiBT,OAAO;;;;eAdd,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAEV,QAAM,QAAA,IAAI;gBACH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAGrC,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA;;;mCAtBY,UAAU"}
+{"version":3,"file":"input.js","names":[],"sources":["../src/components/input/useInput.ts","../src/components/input/input.vue","../src/components/input/input.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { InputProps } from './types';\n\nconst NATIVE_INPUT_SELECTOR = '.rp-input__native';\nconst INTERACTIVE_SELECTOR = [\n    'button',\n    'a[href]',\n    `input:not(${NATIVE_INPUT_SELECTOR})`,\n    'select',\n    'textarea',\n    '[contenteditable=\"true\"]',\n    '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(target.closest(INTERACTIVE_SELECTOR));\n}\n\nexport function useInput(props: Readonly<InputProps>, emitUpdate: (value: string) => void) {\n    const inputRef = ref<HTMLInputElement | null>(null);\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-input', {\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).value);\n    }\n\n    function focusInput(e: MouseEvent) {\n        if (control.disabled) return;\n\n        const target = e.target;\n        if (target instanceof Element && isInteractiveElement(target)) return;\n\n        inputRef.value?.focus();\n    }\n\n    return {\n        inputRef,\n        control,\n        rootClass,\n        onInput,\n        focusInput,\n    };\n}\n","<template>\n    <label :class=\"rootClass\" @mousedown=\"focusInput\">\n        <span v-if=\"$slots.left\" class=\"rp-input__left\">\n            <slot name=\"left\" />\n        </span>\n        <input\n            :id=\"control.id\"\n            ref=\"inputRef\"\n            :name=\"name\"\n            class=\"rp-input__native\"\n            :type=\"type\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n        <span v-if=\"$slots.right\" class=\"rp-input__right\">\n            <slot name=\"right\" />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useInput } from './useInput';\nimport type { InputProps } from './types';\n\ndefineOptions({ name: 'RpInput' });\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    placeholder: '',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid inputRef;\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label :class=\"rootClass\" @mousedown=\"focusInput\">\n        <span v-if=\"$slots.left\" class=\"rp-input__left\">\n            <slot name=\"left\" />\n        </span>\n        <input\n            :id=\"control.id\"\n            ref=\"inputRef\"\n            :name=\"name\"\n            class=\"rp-input__native\"\n            :type=\"type\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n        <span v-if=\"$slots.right\" class=\"rp-input__right\">\n            <slot name=\"right\" />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useInput } from './useInput';\nimport type { InputProps } from './types';\n\ndefineOptions({ name: 'RpInput' });\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    placeholder: '',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { inputRef, control, rootClass, onInput, focusInput } = useInput(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid inputRef;\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;AAMA,IAAM,uBAAuB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;AACJ,CAAC,CAAC,KAAK,GAAG;AAEV,SAAS,qBAAqB,QAAiB;CAC3C,OAAO,QAAQ,OAAO,QAAQ,oBAAoB,CAAC;AACvD;AAEA,SAAgB,SAAS,OAA6B,YAAqC;CACvF,MAAM,WAAW,IAA6B,IAAI;CAClD,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,YAAY;GACX,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EAChD,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,OAAO,QAAQ,SAAS,CAAC,QAAQ;EACjC,UAAU,MAAM;CACpB,CAAC,CACL;CAEA,SAAS,QAAQ,GAAU;EACvB,WAAY,EAAE,OAA4B,KAAK;CACnD;CAEA,SAAS,WAAW,GAAe;EAC/B,IAAI,QAAQ,UAAU;EAEtB,MAAM,SAAS,EAAE;EACjB,IAAI,kBAAkB,WAAW,qBAAqB,MAAM,GAAG;EAE/D,SAAS,OAAO,MAAM;CAC1B;CAEA,OAAO;EACH;EACA;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECpBA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAIb,MAAM,EAAE,UAAU,SAAS,WAAW,SAAS,eAAe,SAAS,QAAQ,UAAU;GACrF,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;kCAlDkB,MAAA,SAAA,CAAS,CAAA;;iBACR,OAAM,YAAA;;;cACR,QAAW,MAAA,MAAA,CAAA;;;sCAkBT,MAAA,OAAA,CAAO,CAAA,CAAA,CAAA;;;;;eAfd,MAAI,SAAO,EAAA;eAEX,QAAM,QAAA,IAAI;eAEV,QAAM,QAAA,IAAI;gBACH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAGrC,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA;;;0CAvBY,MAAA,UAAA,CAAU,CAAA,CAAA,CAAA"}

package/dist/modal.css

@@ -0,0 +1,134 @@
+.rp-modal[data-v-fe44cbf7] {
+  --_rp-modal-width: 32rem;
+  --_rp-modal-max-height: calc(100vh - var(--rp-spacing-12));
+  --_rp-modal-radius: var(--rp-radius-sm);
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  padding: var(--rp-spacing-6);
+  overflow: auto;
+  font-family: var(--rp-font-family);
+}
+.rp-modal--size-sm[data-v-fe44cbf7] {
+  --_rp-modal-width: 22rem;
+}
+.rp-modal--size-lg[data-v-fe44cbf7] {
+  --_rp-modal-width: 45rem;
+}
+.rp-modal--size-xl[data-v-fe44cbf7] {
+  --_rp-modal-width: 58rem;
+}
+.rp-modal--size-full[data-v-fe44cbf7] {
+  --_rp-modal-width: 100vw;
+  --_rp-modal-max-height: 100vh;
+  --_rp-modal-radius: var(--rp-radius-none);
+  padding: 0;
+}
+.rp-modal__overlay[data-v-fe44cbf7] {
+  border-radius: 0;
+}
+.rp-modal__panel[data-v-fe44cbf7] {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: min(var(--_rp-modal-width), 100%);
+  max-height: var(--_rp-modal-max-height);
+  color: var(--rp-color-text);
+  overflow: hidden;
+  background-color: var(--rp-color-surface-raised);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-radius: var(--_rp-modal-radius);
+  box-shadow: var(--rp-shadow-lg);
+  outline: none;
+}
+.rp-modal--size-full .rp-modal__panel[data-v-fe44cbf7] {
+  min-height: 100vh;
+  border: 0;
+}
+.rp-modal__header[data-v-fe44cbf7] {
+  box-sizing: border-box;
+  padding: var(--rp-spacing-5) calc(var(--rp-spacing-6) + var(--rp-size-control-sm)) var(--rp-spacing-4) var(--rp-spacing-5);
+  border-bottom: var(--rp-border-width-thin) solid var(--rp-color-border);
+}
+.rp-modal__heading[data-v-fe44cbf7] {
+  display: grid;
+  gap: var(--rp-spacing-1);
+}
+.rp-modal__title[data-v-fe44cbf7] {
+  margin: 0;
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-xl);
+  font-weight: var(--rp-font-weight-semibold);
+  line-height: var(--rp-line-height-tight);
+}
+.rp-modal__description[data-v-fe44cbf7] {
+  margin: 0;
+  color: var(--rp-color-text-secondary);
+  font-size: var(--rp-font-size-sm);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-modal__close[data-v-fe44cbf7] {
+  position: absolute;
+  top: var(--rp-spacing-3);
+  right: var(--rp-spacing-3);
+  z-index: 1;
+}
+.rp-modal__body[data-v-fe44cbf7] {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--rp-spacing-5);
+  overflow: auto;
+  color: var(--rp-color-text);
+  font-size: var(--rp-font-size-base);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-modal--closable.rp-modal--headerless .rp-modal__body[data-v-fe44cbf7] {
+  padding-right: calc(var(--rp-spacing-6) + var(--rp-size-control-sm));
+}
+.rp-modal__footer[data-v-fe44cbf7] {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--rp-spacing-2);
+  justify-content: flex-end;
+  padding: var(--rp-spacing-4) var(--rp-spacing-5);
+  border-top: var(--rp-border-width-thin) solid var(--rp-color-border);
+}
+.rp-modal-enter-active[data-v-fe44cbf7],
+.rp-modal-leave-active[data-v-fe44cbf7] {
+  transition: opacity var(--rp-transition-fast);
+}
+.rp-modal-enter-active .rp-modal__panel[data-v-fe44cbf7],
+.rp-modal-leave-active .rp-modal__panel[data-v-fe44cbf7] {
+  transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
+}
+.rp-modal-enter-from[data-v-fe44cbf7],
+.rp-modal-leave-to[data-v-fe44cbf7] {
+  opacity: 0;
+}
+.rp-modal-enter-from .rp-modal__panel[data-v-fe44cbf7],
+.rp-modal-leave-to .rp-modal__panel[data-v-fe44cbf7] {
+  opacity: 0;
+  transform: translateY(var(--rp-spacing-2)) scale(0.98);
+}
+@media (max-width: 480px) {
+.rp-modal[data-v-fe44cbf7] {
+    padding: var(--rp-spacing-3);
+}
+.rp-modal__header[data-v-fe44cbf7] {
+    padding-left: var(--rp-spacing-4);
+}
+.rp-modal__body[data-v-fe44cbf7] {
+    padding: var(--rp-spacing-4);
+}
+.rp-modal__footer[data-v-fe44cbf7] {
+    padding: var(--rp-spacing-4);
+}
+}