ropav 0.0.2 → 0.0.3

package/dist/radio.js

@@ -1,8 +1,14 @@
 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";
+import { child, computed, createIf, createSlot, defineVaporComponent, inject, on, provide, renderEffect, setAttr, setClass, setInsertionState, setProp, setValue, template, unref, useId } from "vue";
+//#region src/composables/useRequiredInject.ts
+function useRequiredInject(key, componentName) {
+	const value = inject(key);
+	if (value == null) throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);
+	return value;
+}
+//#endregion
 //#region src/components/radio/types.ts
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
@@ -11,9 +17,15 @@ function useRadio(props) {
 	const group = useRequiredInject(radioGroupKey, "RpRadio");
 	const isChecked = computed(() => group.modelValue === props.value);
 	const isDisabled = computed(() => props.disabled || group.disabled);
+	const variant = computed(() => props.variant ?? group.variant);
+	const color = computed(() => props.color ?? group.color);
+	const size = computed(() => props.size ?? group.size);
 	const rootClass = computed(() => bem("rp-radio", {
 		checked: isChecked.value,
-		disabled: isDisabled.value
+		disabled: isDisabled.value,
+		[variant.value ?? ""]: Boolean(variant.value),
+		[`color-${color.value}`]: Boolean(color.value),
+		[`size-${size.value}`]: Boolean(size.value)
 	}));
 	function onSelect() {
 		if (isDisabled.value) return;
@@ -48,6 +60,15 @@ function useRadioGroup(props, emitUpdate) {
 		get required() {
 			return control.required;
 		},
+		get variant() {
+			return props.variant;
+		},
+		get color() {
+			return props.color;
+		},
+		get size() {
+			return props.size;
+		},
 		select(value) {
 			emitUpdate(value);
 		}
@@ -59,8 +80,8 @@ function useRadioGroup(props, emitUpdate) {
 }
 //#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);
+var t0$1 = template("<span data-v-ecddd6c8 class=rp-radio__label>");
+var t1 = template("<label data-v-ecddd6c8><input data-v-ecddd6c8 type=radio class=rp-radio__native><span data-v-ecddd6c8 class=rp-radio__dot></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -68,6 +89,9 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 	__name: "radio",
 	props: {
 		value: {},
+		variant: { default: void 0 },
+		color: { default: void 0 },
+		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: false
@@ -99,10 +123,10 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n5;
 	}
-}), [["__scopeId", "data-v-67524919"]]);
+}), [["__scopeId", "data-v-ecddd6c8"]]);
 //#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);
+var t0 = template("<div data-v-a2c46e46 role=radiogroup>", 1);
 //#endregion
 //#region src/components/radio/radio-group.vue
 var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -112,6 +136,9 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		id: {},
 		name: {},
 		modelValue: {},
+		variant: { default: void 0 },
+		color: { default: void 0 },
+		size: { default: void 0 },
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -153,7 +180,7 @@ var radio_group_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		createSlot("default", null, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-ba5e60e5"]]);
+}), [["__scopeId", "data-v-a2c46e46"]]);
 //#endregion
 export { radio_default as n, radio_group_default as t };
 

package/dist/radio.js.map

@@ -1 +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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../src/composables/useRequiredInject.ts","../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 { inject, type InjectionKey } from 'vue';\n\nexport function useRequiredInject<T>(key: InjectionKey<T>, componentName: string): T {\n    const value = inject(key);\n    if (value == null) {\n        throw new Error(\n            `[Ropav] <${componentName}> must be used inside its parent provider component.`,\n        );\n    }\n    return value;\n}\n","import type { InjectionKey } from 'vue';\n\nexport type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';\n\nexport type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type RadioVariant = 'solid' | 'outline';\n\nexport interface RadioProps {\n    value: string | number;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\n    disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n    id?: string;\n    name?: string;\n    modelValue: string | number | null;\n    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\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    variant?: RadioVariant;\n    color?: RadioColor;\n    size?: RadioSize;\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    const variant = computed(() => props.variant ?? group.variant);\n    const color = computed(() => props.color ?? group.color);\n    const size = computed(() => props.size ?? group.size);\n\n    const rootClass = computed(() =>\n        bem('rp-radio', {\n            checked: isChecked.value,\n            disabled: isDisabled.value,\n            [variant.value ?? '']: Boolean(variant.value),\n            [`color-${color.value}`]: Boolean(color.value),\n            [`size-${size.value}`]: Boolean(size.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() {\n            return props.modelValue;\n        },\n        get name() {\n            return groupName.value;\n        },\n        get disabled() {\n            return control.disabled;\n        },\n        get required() {\n            return control.required;\n        },\n        get variant() {\n            return props.variant;\n        },\n        get color() {\n            return props.color;\n        },\n        get size() {\n            return props.size;\n        },\n        select(value) {\n            emitUpdate(value);\n        },\n    });\n\n    return {\n        control,\n        rootClass,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\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    variant: undefined,\n    color: undefined,\n    size: undefined,\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\n        :class=\"rootClass\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-state=\"isChecked ? 'checked' : 'unchecked'\"\n    >\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    variant: undefined,\n    color: undefined,\n    size: undefined,\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    variant: undefined,\n    color: undefined,\n    size: undefined,\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    variant: undefined,\n    color: undefined,\n    size: undefined,\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":"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"}

package/dist/select.css

@@ -1,109 +1,174 @@
-.rp-select[data-v-692ef421] {
+.rp-select[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-sm);
   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] {
+.rp-select--disabled[data-v-9838513c] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-select__trigger[data-v-692ef421] {
+.rp-select__trigger[data-v-9838513c] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   justify-content: space-between;
   width: 100%;
-  min-width: var(--rp-component-menu-min-width);
+  min-width: 180px;
   height: var(--rp-size-control-md);
-  padding: 0 var(--rp-spacing-4);
+  padding: 0 var(--rp-spacing-3);
   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);
+  background-color: var(--rp-color-button-default-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-radius: var(--_rp-select-radius);
   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-9838513c]:hover {
+  border-color: var(--rp-color-border-hover);
 }
-.rp-select__trigger[data-v-692ef421]:focus-visible {
+.rp-select__trigger[data-v-9838513c]:focus-visible {
   outline: none;
-  border-color: var(--rp-color-control-border-focus);
+  border-color: var(--rp-color-primary);
   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);
+.rp-select--radius-xs[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-sm);
+}
+.rp-select--radius-sm[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-sm);
+}
+.rp-select--radius-md[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-md);
+}
+.rp-select--radius-lg[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-lg);
+}
+.rp-select--radius-xl[data-v-9838513c] {
+  --_rp-select-radius: var(--rp-radius-xl);
+}
+.rp-select--open .rp-select__trigger[data-v-9838513c] {
+  border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-select--invalid .rp-select__trigger[data-v-692ef421] {
+.rp-select--invalid .rp-select__trigger[data-v-9838513c] {
   border-color: var(--rp-color-danger-fg);
 }
-.rp-select__value[data-v-692ef421] {
+.rp-select__value[data-v-9838513c] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--rp-color-control-fg);
+  color: var(--rp-color-text);
+}
+.rp-select__placeholder[data-v-9838513c] {
+  color: var(--rp-color-text-disabled);
+}
+.rp-select__indicator[data-v-9838513c] {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.rp-select__indicator svg[data-v-9838513c] {
+  width: 100%;
+  height: 100%;
+}
+.rp-select__indicator[data-v-9838513c] {
+  position: relative;
+  color: var(--rp-color-text-disabled);
+  transform: translateX(var(--rp-spacing-1));
+}
+.rp-select__arrow[data-v-9838513c] {
+  display: inline-flex;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
 }
-.rp-select__placeholder[data-v-692ef421] {
-  color: var(--rp-color-control-placeholder);
+.rp-select__arrow svg[data-v-9838513c] {
+  width: 100%;
+  height: 100%;
 }
-.rp-select__arrow[data-v-692ef421] {
+.rp-select__arrow[data-v-9838513c] {
+  transition: opacity var(--rp-transition-fast);
+}
+.rp-select__clear[data-v-9838513c] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   width: 1em;
   height: 1em;
   flex-shrink: 0;
 }
-.rp-select__arrow svg[data-v-692ef421] {
+.rp-select__clear svg[data-v-9838513c] {
   width: 100%;
   height: 100%;
 }
-.rp-select__arrow[data-v-692ef421] {
-  color: var(--rp-color-control-icon);
-  transition: transform var(--rp-transition-fast);
+.rp-select__clear[data-v-9838513c] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  color: var(--rp-color-text-secondary);
+  opacity: 0;
+  pointer-events: none;
+  transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
 }
-.rp-select__arrow--open[data-v-692ef421] {
-  transform: rotate(180deg);
+.rp-select__clear[data-v-9838513c]:hover {
+  color: var(--rp-color-text);
+}
+.rp-select__trigger:hover .rp-select__clear[data-v-9838513c] {
+  opacity: 1;
+  pointer-events: auto;
+}
+.rp-select__trigger:hover .rp-select__clear + .rp-select__arrow[data-v-9838513c] {
+  opacity: 0;
 }
-.rp-select__dropdown[data-v-692ef421] {
+.rp-select__dropdown[data-v-9838513c] {
   position: absolute;
   top: calc(100% + var(--rp-spacing-1));
   left: 0;
   right: 0;
-  z-index: var(--rp-z-index-dropdown);
+  z-index: 100;
   background-color: var(--rp-color-surface-raised);
   border: var(--rp-border-width-thin) solid var(--rp-color-border);
-  border-radius: var(--rp-radius-lg);
+  border-radius: var(--_rp-select-radius);
   box-shadow: var(--rp-shadow-md);
   padding: var(--rp-spacing-1) 0;
-  max-height: var(--rp-component-menu-max-height);
+  max-height: 240px;
   overflow-y: auto;
+  padding: var(--rp-spacing-1);
 }
-.rp-select__option[data-v-692ef421] {
+.rp-select__option[data-v-9838513c] {
   display: flex;
   align-items: center;
   padding: var(--rp-spacing-2) var(--rp-spacing-4);
+  border-radius: calc(var(--_rp-select-radius) - var(--rp-spacing-1));
   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] {
+.rp-select__option--focused[data-v-9838513c] {
   background-color: var(--rp-color-surface-hover);
 }
-.rp-select__option--selected[data-v-692ef421] {
+.rp-select__option--selected[data-v-9838513c] {
   color: var(--rp-color-primary-fg);
   font-weight: var(--rp-font-weight-medium);
 }
-.rp-select__option--disabled[data-v-692ef421] {
+.rp-select__option--disabled[data-v-9838513c] {
   color: var(--rp-color-text-disabled);
   cursor: not-allowed;
 }
-.rp-select__empty[data-v-692ef421] {
+.rp-select__empty[data-v-9838513c] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -111,12 +176,12 @@
   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] {
+.rp-select-dropdown-enter-active[data-v-9838513c],
+.rp-select-dropdown-leave-active[data-v-9838513c] {
   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] {
+.rp-select-dropdown-enter-from[data-v-9838513c],
+.rp-select-dropdown-leave-to[data-v-9838513c] {
   opacity: 0;
   transform: translateY(calc(-1 * var(--rp-spacing-1)));
 }