ropav 0.0.2

package/dist/input.css

@@ -0,0 +1,51 @@
+.rp-input[data-v-7e1222cc] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  gap: var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  font-weight: var(--rp-font-weight-normal);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-input[data-v-7e1222cc]:hover:not(.rp-input--disabled) {
+  border-color: var(--rp-color-control-border-hover);
+}
+.rp-input[data-v-7e1222cc]:focus-within:not(.rp-input--disabled) {
+  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-7e1222cc] {
+  height: var(--rp-size-control-md);
+  padding: 0 var(--rp-spacing-4);
+  font-size: var(--rp-font-size-base);
+  border-radius: var(--rp-radius-lg);
+}
+.rp-input--disabled[data-v-7e1222cc] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-input--invalid[data-v-7e1222cc] {
+  border-color: var(--rp-color-danger-fg);
+}
+.rp-input--readonly[data-v-7e1222cc] {
+  background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-input__native[data-v-7e1222cc] {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: var(--rp-color-control-fg);
+  line-height: var(--rp-line-height-none);
+}
+.rp-input__native[data-v-7e1222cc]::placeholder {
+  color: var(--rp-color-control-placeholder);
+}
+.rp-input__native[data-v-7e1222cc]:disabled {
+  cursor: not-allowed;
+}

package/dist/input.js

@@ -0,0 +1,79 @@
+import './input.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useControlState } from "./useControlState.js";
+import { child, computed, createInvoker, defineVaporComponent, delegateEvents, renderEffect, setAttr, setClass, setProp, setValue, template, unref } from "vue";
+//#region src/components/input/input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-7e1222cc><input data-v-7e1222cc class=rp-input__native>", 1);
+delegateEvents("input");
+//#endregion
+//#region src/components/input/input.vue
+var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpInput",
+	__name: "input",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		type: { default: "text" },
+		placeholder: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const control = useControlState(props);
+		const rootClass = computed(() => bem("rp-input", {
+			disabled: control.disabled,
+			invalid: control.invalid,
+			readonly: props.readonly
+		}));
+		function onInput(e) {
+			emit("update:modelValue", e.target.value);
+		}
+		const n1 = t0();
+		const n0 = child(n1);
+		n0.$evtinput = createInvoker(onInput);
+		renderEffect(() => {
+			const _control = unref(control);
+			const _control_required = _control.required;
+			setClass(n1, rootClass.value);
+			setProp(n0, "id", _control.id);
+			setProp(n0, "name", __props.name);
+			setProp(n0, "type", __props.type);
+			setValue(n0, __props.modelValue);
+			setProp(n0, "placeholder", __props.placeholder);
+			setProp(n0, "disabled", _control.disabled || void 0);
+			setProp(n0, "readonly", __props.readonly || void 0);
+			setProp(n0, "required", _control_required || void 0);
+			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n0, "aria-invalid", _control.invalid || void 0);
+			setAttr(n0, "aria-required", _control_required || void 0);
+		});
+		return n1;
+	}
+}), [["__scopeId", "data-v-7e1222cc"]]);
+//#endregion
+export { input_default as t };
+
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../src/components/input/input.vue","../src/components/input/input.vue"],"sourcesContent":["<template>\n    <div :class=\"rootClass\">\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    </div>\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    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        disabled: control.disabled,\n        invalid: control.invalid,\n        readonly: props.readonly,\n    }),\n);\n\nfunction onInput(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\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    </div>\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    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        disabled: control.disabled,\n        invalid: control.invalid,\n        readonly: props.readonly,\n    }),\n);\n\nfunction onInput(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,UAAU,gBAAgB,KAAK;EAErC,MAAM,YAAY,eACd,IAAI,YAAY;GACZ,UAAU,QAAQ;GAClB,SAAS,QAAQ;GACjB,UAAU,MAAM;EACpB,CAAC,CACL;EAEA,SAAS,QAAQ,GAAU;GACvB,KAAK,qBAAsB,EAAE,OAA4B,KAAK;EAClE;;;+BAtCoB,OAAO;;;;gBAhBV,UAAA,KAAS;eAEb,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"}

package/dist/radio.css

@@ -0,0 +1,66 @@
+.rp-radio[data-v-67524919] {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: var(--rp-font-family);
+  user-select: none;
+}
+.rp-radio--disabled[data-v-67524919] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-radio[data-v-67524919] {
+  gap: var(--rp-spacing-2);
+  font-size: var(--rp-font-size-base);
+  --_radio-size: 18px;
+  --_radio-dot: 8px;
+}
+.rp-radio__native[data-v-67524919] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  pointer-events: none;
+}
+.rp-radio__dot[data-v-67524919] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_radio-size);
+  height: var(--_radio-size);
+  flex-shrink: 0;
+  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
+  border-radius: var(--rp-radius-full);
+  background-color: var(--rp-color-control-bg);
+  transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-radio__dot[data-v-67524919]::after {
+  content: "";
+  width: var(--_radio-dot);
+  height: var(--_radio-dot);
+  border-radius: var(--rp-radius-full);
+  background-color: var(--rp-color-control-selected-fg);
+  transform: scale(0);
+  transition: transform var(--rp-transition-fast);
+}
+.rp-radio--checked .rp-radio__dot[data-v-67524919] {
+  background-color: var(--rp-color-control-selected-bg);
+  border-color: var(--rp-color-control-selected-bg);
+}
+.rp-radio--checked .rp-radio__dot[data-v-67524919]::after {
+  transform: scale(1);
+}
+.rp-radio__label[data-v-67524919] {
+  line-height: var(--rp-line-height-normal);
+  color: var(--rp-color-text);
+}.rp-radio-group[data-v-ba5e60e5] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rp-spacing-3);
+  font-family: var(--rp-font-family);
+}

package/dist/radio.js

@@ -0,0 +1,160 @@
+import './radio.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
+import { child, computed, createIf, createSlot, defineVaporComponent, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref, useId } from "vue";
+//#region src/components/radio/types.ts
+var radioGroupKey = Symbol("radioGroup");
+//#endregion
+//#region src/components/radio/useRadio.ts
+function useRadio(props) {
+	const group = useRequiredInject(radioGroupKey, "RpRadio");
+	const isChecked = computed(() => group.modelValue === props.value);
+	const isDisabled = computed(() => props.disabled || group.disabled);
+	const rootClass = computed(() => bem("rp-radio", {
+		checked: isChecked.value,
+		disabled: isDisabled.value
+	}));
+	function onSelect() {
+		if (isDisabled.value) return;
+		group.select(props.value);
+	}
+	return {
+		group,
+		isChecked,
+		isDisabled,
+		rootClass,
+		onSelect
+	};
+}
+function useRadioGroup(props, emitUpdate) {
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-radio-group", {
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	const generatedName = useId();
+	const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);
+	provide(radioGroupKey, {
+		get modelValue() {
+			return props.modelValue;
+		},
+		get name() {
+			return groupName.value;
+		},
+		get disabled() {
+			return control.disabled;
+		},
+		get required() {
+			return control.required;
+		},
+		select(value) {
+			emitUpdate(value);
+		}
+	});
+	return {
+		control,
+		rootClass
+	};
+}
+//#endregion
+//#region src/components/radio/radio.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<span data-v-67524919 class=rp-radio__label>");
+var t1 = template("<label data-v-67524919><input data-v-67524919 type=radio class=rp-radio__native><span data-v-67524919 class=rp-radio__dot></span>", 1);
+//#endregion
+//#region src/components/radio/radio.vue
+var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpRadio",
+	__name: "radio",
+	props: {
+		value: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { slots: $slots }) {
+		const { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(__props);
+		const n5 = t1();
+		const n0 = child(n5);
+		on(n0, "change", (e) => unref(onSelect)(e));
+		renderEffect(() => {
+			const _isChecked = unref(isChecked);
+			const _group = unref(group);
+			setClass(n5, unref(rootClass));
+			setAttr(n5, "data-disabled", unref(isDisabled) || void 0);
+			setAttr(n5, "data-state", _isChecked ? "checked" : "unchecked");
+			setProp(n0, "name", _group.name);
+			setValue(n0, __props.value);
+			setProp(n0, "checked", _isChecked);
+			setProp(n0, "disabled", unref(isDisabled) || void 0);
+			setProp(n0, "required", _group.required || void 0);
+		});
+		setInsertionState(n5, null, 2);
+		createIf(() => $slots.default, () => {
+			const n4 = t0$1();
+			setInsertionState(n4, null, 0);
+			createSlot("default", null, null, 1);
+			return n4;
+		});
+		return n5;
+	}
+}), [["__scopeId", "data-v-67524919"]]);
+//#endregion
+//#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-ba5e60e5 role=radiogroup>", 1);
+//#endregion
+//#region src/components/radio/radio-group.vue
+var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpRadioGroup",
+	__name: "radio-group",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, rootClass } = useRadioGroup(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			const _control = unref(control);
+			const _control_invalid = _control.invalid;
+			setProp(n1, "id", _control.id);
+			setClass(n1, unref(rootClass));
+			setAttr(n1, "data-disabled", _control.disabled || void 0);
+			setAttr(n1, "data-invalid", _control_invalid || void 0);
+			setAttr(n1, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n1, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n1, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n1, "aria-invalid", _control_invalid || void 0);
+			setAttr(n1, "aria-required", _control.required || void 0);
+		});
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		return n1;
+	}
+}), [["__scopeId", "data-v-ba5e60e5"]]);
+//#endregion
+export { radio_default as n, radio_group_default as t };
+
+//# sourceMappingURL=radio.js.map

package/dist/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":[],"sources":["../src/components/radio/types.ts","../src/components/radio/useRadio.ts","../src/components/radio/radio.vue","../src/components/radio/radio.vue","../src/components/radio/radio-group.vue","../src/components/radio/radio-group.vue"],"sourcesContent":["import type { InjectionKey } from 'vue';\n\nexport interface RadioProps {\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    ariaLabel?: string;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface RadioGroupContext {\n    modelValue: string | number | null;\n    name: string;\n    disabled: boolean;\n    required: boolean;\n    select: (value: string | number) => void;\n}\n\nexport const radioGroupKey = Symbol('radioGroup') as InjectionKey<RadioGroupContext>;\n","import { computed, provide, useId } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { bem } from '@/utils/bem';\nimport { radioGroupKey } from './types';\nimport type { RadioGroupContext, RadioGroupProps, RadioProps } from './types';\n\nexport function useRadio(props: Readonly<RadioProps>) {\n    const group = useRequiredInject(radioGroupKey, 'RpRadio');\n    const isChecked = computed(() => group.modelValue === props.value);\n    const isDisabled = computed(() => props.disabled || group.disabled);\n\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n        }),\n    );\n\n    function onSelect() {\n        if (isDisabled.value) return;\n        group.select(props.value);\n    }\n\n    return {\n        group,\n        isChecked,\n        isDisabled,\n        rootClass,\n        onSelect,\n    };\n}\n\nexport function useRadioGroup(\n    props: Readonly<RadioGroupProps>,\n    emitUpdate: (value: string | number | null) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-radio-group', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const generatedName = useId();\n    const groupName = computed(() => props.name ?? `${control.id ?? generatedName}-radio`);\n\n    provide<RadioGroupContext>(radioGroupKey, {\n        get modelValue() { return props.modelValue; },\n        get name() { return groupName.value; },\n        get disabled() { return control.disabled; },\n        get required() { return control.required; },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label :class=\"rootClass\" :data-disabled=\"isDisabled || undefined\" :data-state=\"isChecked ? 'checked' : 'unchecked'\">\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label :class=\"rootClass\" :data-disabled=\"isDisabled || undefined\" :data-state=\"isChecked ? 'checked' : 'unchecked'\">\n        <input\n            type=\"radio\"\n            class=\"rp-radio__native\"\n            :name=\"group.name\"\n            :value=\"value\"\n            :checked=\"isChecked\"\n            :disabled=\"isDisabled || undefined\"\n            :required=\"group.required || undefined\"\n            @change=\"onSelect\"\n        />\n        <span class=\"rp-radio__dot\" />\n        <span v-if=\"$slots.default\" class=\"rp-radio__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadio } from './useRadio';\nimport type { RadioProps } from './types';\n\ndefineOptions({ name: 'RpRadio' });\n\nconst props = withDefaults(defineProps<RadioProps>(), {\n    disabled: false,\n});\n\nconst { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(props);\n</script>\n\n<style src=\"./radio.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || 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    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        role=\"radiogroup\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-invalid=\"control.invalid || 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    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useRadioGroup } from './useRadio';\nimport type { RadioGroupProps } from './types';\n\ndefineOptions({ name: 'RpRadioGroup' });\n\nconst props = withDefaults(defineProps<RadioGroupProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst { control, rootClass } = useRadioGroup(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./radio-group.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;AA2BA,IAAa,gBAAgB,OAAO,YAAY;;;ACpBhD,SAAgB,SAAS,OAA6B;CAClD,MAAM,QAAQ,kBAAkB,eAAe,SAAS;CACxD,MAAM,YAAY,eAAe,MAAM,eAAe,MAAM,KAAK;CACjE,MAAM,aAAa,eAAe,MAAM,YAAY,MAAM,QAAQ;CAElE,MAAM,YAAY,eACd,IAAI,YAAY;EACZ,SAAS,UAAU;EACnB,UAAU,WAAW;CACzB,CAAC,CACL;CAEA,SAAS,WAAW;EAChB,IAAI,WAAW,OAAO;EACtB,MAAM,OAAO,MAAM,KAAK;CAC5B;CAEA,OAAO;EACH;EACA;EACA;EACA;EACA;CACJ;AACJ;AAEA,SAAgB,cACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,kBAAkB;EAClB,UAAU,QAAQ;EAClB,SAAS,QAAQ;CACrB,CAAC,CACL;CAEA,MAAM,gBAAgB,MAAM;CAC5B,MAAM,YAAY,eAAe,MAAM,QAAQ,GAAG,QAAQ,MAAM,cAAc,OAAO;CAErF,QAA2B,eAAe;EACtC,IAAI,aAAa;GAAE,OAAO,MAAM;EAAY;EAC5C,IAAI,OAAO;GAAE,OAAO,UAAU;EAAO;EACrC,IAAI,WAAW;GAAE,OAAO,QAAQ;EAAU;EAC1C,IAAI,WAAW;GAAE,OAAO,QAAQ;EAAU;EAC1C,OAAO,OAAO;GACV,WAAW,KAAK;EACpB;CACJ,CAAC;CAED,OAAO;EACH;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;EClCA,MAAM,EAAE,OAAO,WAAW,YAAY,WAAW,aAAa,SAAS,OAAK;;;SAnB/D,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;gBATV,MAAA,SAAA,CAAS;eAAG,iBAAe,MAAA,UAAA,KAAc,KAAA,CAAS;eAAG,cAAY,aAAS,YAAA,WAAA;eAIhF,QAAM,OAAK,IAAA;gBACJ,QAAA,KAAK;eACZ,WAAS,UAAS;eAClB,YAAU,MAAA,UAAA,KAAc,KAAA,CAAS;eACjC,YAAU,OAAK,YAAa,KAAA,CAAS;;;iBAI9B,OAAM,eAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEU1B,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,cAAc,cAAc,QAAQ,UAAU;GAC3D,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;;eAjCQ,MAAI,SAAO,EAAA;gBACJ,MAAA,SAAA,CAAS;eAEhB,iBAAe,SAAO,YAAa,KAAA,CAAS;eAC5C,gBAAc,oBAAmB,KAAA,CAAS;eAC1C,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,oBAAmB,KAAA,CAAS;eAC1C,iBAAe,SAAO,YAAa,KAAA,CAAS"}

package/dist/select.css

@@ -0,0 +1,122 @@
+.rp-select[data-v-692ef421] {
+  position: relative;
+  display: inline-flex;
+  font-family: var(--rp-font-family);
+  font-weight: var(--rp-font-weight-normal);
+  line-height: var(--rp-line-height-none);
+}
+.rp-select--disabled[data-v-692ef421] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-select__trigger[data-v-692ef421] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-content: space-between;
+  width: 100%;
+  min-width: var(--rp-component-menu-min-width);
+  height: var(--rp-size-control-md);
+  padding: 0 var(--rp-spacing-4);
+  font-size: var(--rp-font-size-base);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+  border-radius: var(--rp-radius-lg);
+  cursor: pointer;
+  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+  gap: var(--rp-spacing-2);
+}
+.rp-select__trigger[data-v-692ef421]:hover {
+  border-color: var(--rp-color-control-border-hover);
+}
+.rp-select__trigger[data-v-692ef421]:focus-visible {
+  outline: none;
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-select--open .rp-select__trigger[data-v-692ef421] {
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-select--invalid .rp-select__trigger[data-v-692ef421] {
+  border-color: var(--rp-color-danger-fg);
+}
+.rp-select__value[data-v-692ef421] {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--rp-color-control-fg);
+}
+.rp-select__placeholder[data-v-692ef421] {
+  color: var(--rp-color-control-placeholder);
+}
+.rp-select__arrow[data-v-692ef421] {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-select__arrow svg[data-v-692ef421] {
+  width: 100%;
+  height: 100%;
+}
+.rp-select__arrow[data-v-692ef421] {
+  color: var(--rp-color-control-icon);
+  transition: transform var(--rp-transition-fast);
+}
+.rp-select__arrow--open[data-v-692ef421] {
+  transform: rotate(180deg);
+}
+.rp-select__dropdown[data-v-692ef421] {
+  position: absolute;
+  top: calc(100% + var(--rp-spacing-1));
+  left: 0;
+  right: 0;
+  z-index: var(--rp-z-index-dropdown);
+  background-color: var(--rp-color-surface-raised);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-radius: var(--rp-radius-lg);
+  box-shadow: var(--rp-shadow-md);
+  padding: var(--rp-spacing-1) 0;
+  max-height: var(--rp-component-menu-max-height);
+  overflow-y: auto;
+}
+.rp-select__option[data-v-692ef421] {
+  display: flex;
+  align-items: center;
+  padding: var(--rp-spacing-2) var(--rp-spacing-4);
+  font-size: var(--rp-font-size-base);
+  cursor: pointer;
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+  color: var(--rp-color-text);
+}
+.rp-select__option--focused[data-v-692ef421] {
+  background-color: var(--rp-color-surface-hover);
+}
+.rp-select__option--selected[data-v-692ef421] {
+  color: var(--rp-color-primary-fg);
+  font-weight: var(--rp-font-weight-medium);
+}
+.rp-select__option--disabled[data-v-692ef421] {
+  color: var(--rp-color-text-disabled);
+  cursor: not-allowed;
+}
+.rp-select__empty[data-v-692ef421] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--rp-spacing-4);
+  color: var(--rp-color-text-secondary);
+  font-size: var(--rp-font-size-base);
+}
+.rp-select-dropdown-enter-active[data-v-692ef421],
+.rp-select-dropdown-leave-active[data-v-692ef421] {
+  transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
+}
+.rp-select-dropdown-enter-from[data-v-692ef421],
+.rp-select-dropdown-leave-to[data-v-692ef421] {
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--rp-spacing-1)));
+}