ropav 0.0.4 → 0.0.6

package/dist/input.css

@@ -5,7 +5,7 @@
   --_rp-input-radius: var(--rp-radius-sm);
   --_rp-input-valid-border: var(--rp-color-success-border-hover);
   --_rp-input-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
-  --_rp-input-invalid-border: var(--rp-color-danger-border-hover);
+  --_rp-input-invalid-border: var(--rp-color-danger);
   --_rp-input-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   align-items: center;
@@ -58,7 +58,7 @@
   --_rp-input-font-size: var(--rp-font-size-lg);
 }
 .rp-input--radius-xs[data-v-fedf15e7] {
-  --_rp-input-radius: var(--rp-radius-sm);
+  --_rp-input-radius: var(--rp-radius-xs);
 }
 .rp-input--radius-sm[data-v-fedf15e7] {
   --_rp-input-radius: var(--rp-radius-sm);

package/dist/progress.css

@@ -0,0 +1,125 @@
+.rp-progress[data-v-7870ef03] {
+  --_rp-progress-color: var(--_rp-progress-custom-color, var(--rp-color-control-selected-bg));
+  --_rp-progress-track-bg: var(--rp-color-control-track-bg);
+  --_rp-progress-track-height: 8px;
+  --_rp-progress-font-size: var(--rp-font-size-base);
+  --_rp-progress-radius: var(--rp-radius-full);
+  --_rp-progress-value: 0%;
+  --_rp-progress-ratio: 0;
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  gap: var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  font-size: var(--_rp-progress-font-size);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-progress__header[data-v-7870ef03] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: var(--rp-spacing-3);
+}
+.rp-progress__label[data-v-7870ef03] {
+  min-width: 0;
+  color: var(--rp-color-text);
+}
+.rp-progress__value[data-v-7870ef03] {
+  flex-shrink: 0;
+  color: var(--rp-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.rp-progress__track[data-v-7870ef03] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--_rp-progress-track-height);
+  overflow: hidden;
+  background: var(--_rp-progress-track-bg);
+  border-radius: var(--_rp-progress-radius);
+}
+.rp-progress__indicator[data-v-7870ef03] {
+  display: block;
+  width: var(--_rp-progress-value);
+  height: 100%;
+  background: var(--_rp-progress-color);
+  border-radius: inherit;
+  transition: width var(--rp-transition-base);
+}
+.rp-progress--indeterminate .rp-progress__indicator[data-v-7870ef03] {
+  position: absolute;
+  width: 38%;
+  min-width: 2rem;
+  animation: rp-progress-indeterminate-7870ef03 1200ms ease-in-out infinite;
+}
+.rp-progress--color-primary[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-primary);
+}
+.rp-progress--color-secondary[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-secondary);
+}
+.rp-progress--color-success[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-success);
+}
+.rp-progress--color-warning[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-warning);
+}
+.rp-progress--color-danger[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-danger);
+}
+.rp-progress--color-info[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-info);
+}
+.rp-progress--color-neutral[data-v-7870ef03] {
+  --_rp-progress-color: var(--rp-color-neutral);
+}
+.rp-progress--size-xs[data-v-7870ef03] {
+  --_rp-progress-track-height: 4px;
+  --_rp-progress-font-size: var(--rp-font-size-xs);
+}
+.rp-progress--size-sm[data-v-7870ef03] {
+  --_rp-progress-track-height: 6px;
+  --_rp-progress-font-size: var(--rp-font-size-sm);
+}
+.rp-progress--size-md[data-v-7870ef03] {
+  --_rp-progress-track-height: 8px;
+  --_rp-progress-font-size: var(--rp-font-size-base);
+}
+.rp-progress--size-lg[data-v-7870ef03] {
+  --_rp-progress-track-height: 10px;
+  --_rp-progress-font-size: var(--rp-font-size-lg);
+}
+.rp-progress--size-xl[data-v-7870ef03] {
+  --_rp-progress-track-height: 12px;
+  --_rp-progress-font-size: var(--rp-font-size-xl);
+}
+.rp-progress--radius-none[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-none);
+}
+.rp-progress--radius-xs[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-xs);
+}
+.rp-progress--radius-sm[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-sm);
+}
+.rp-progress--radius-md[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-md);
+}
+.rp-progress--radius-lg[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-lg);
+}
+.rp-progress--radius-xl[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-xl);
+}
+.rp-progress--radius-full[data-v-7870ef03] {
+  --_rp-progress-radius: var(--rp-radius-full);
+}
+@keyframes rp-progress-indeterminate-7870ef03 {
+0% {
+    transform: translateX(-110%);
+}
+100% {
+    transform: translateX(270%);
+}
+}

package/dist/progress.js

@@ -0,0 +1,177 @@
+import './progress.css';
+import { n as getComponentCustomColor, r as isComponentPresetColor, t as componentColors } from "./componentColors.js";
+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 { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/progress/useProgress.ts
+function normalizeProgressBounds(min, max) {
+	const safeMin = Number.isFinite(min) ? min : 0;
+	const safeMax = Number.isFinite(max) ? max : 100;
+	return safeMax >= safeMin ? {
+		min: safeMin,
+		max: safeMax
+	} : {
+		min: safeMax,
+		max: safeMin
+	};
+}
+function normalizeProgressValue(value, min, max) {
+	const safeValue = Number.isFinite(value) ? Number(value) : min;
+	return Math.min(max, Math.max(min, safeValue));
+}
+function getProgressValuePercent(value, min, max) {
+	if (max <= min) return 0;
+	const percent = (value - min) / (max - min) * 100;
+	return Math.min(100, Math.max(0, percent));
+}
+function getFormattedProgressValue(value, percent, formatter) {
+	return formatter ? formatter(value, percent) : `${Math.round(percent)}%`;
+}
+function getProgressAriaValueText(value, percent, ariaValueText, formatter) {
+	if (typeof ariaValueText === "function") return String(ariaValueText(value, percent));
+	if (ariaValueText != null && ariaValueText !== "") return String(ariaValueText);
+	if (formatter) return String(formatter(value, percent));
+}
+function setProgressStyleValue(style, property, value) {
+	if (value) style[property] = value;
+}
+function useProgress(props) {
+	const control = useControlState(props);
+	const bounds = computed(() => normalizeProgressBounds(props.min, props.max));
+	const isIndeterminate = computed(() => props.indeterminate || props.value == null);
+	const normalizedValue = computed(() => normalizeProgressValue(props.value, bounds.value.min, bounds.value.max));
+	const valuePercent = computed(() => getProgressValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max));
+	const formattedValue = computed(() => getFormattedProgressValue(normalizedValue.value, valuePercent.value, props.formatValue));
+	const ariaValueText = computed(() => isIndeterminate.value ? void 0 : getProgressAriaValueText(normalizedValue.value, valuePercent.value, props.ariaValueText, props.formatValue));
+	return {
+		control,
+		rootClass: computed(() => bem("rp-progress", {
+			[`color-${props.color}`]: isComponentPresetColor(props.color),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius),
+			indeterminate: isIndeterminate.value
+		})),
+		rootStyle: computed(() => {
+			const style = {
+				"--_rp-progress-value": `${valuePercent.value}%`,
+				"--_rp-progress-ratio": `${valuePercent.value / 100}`
+			};
+			setProgressStyleValue(style, "--_rp-progress-custom-color", getComponentCustomColor(props.color));
+			return style;
+		}),
+		isIndeterminate,
+		normalizedValue,
+		valuePercent,
+		formattedValue,
+		ariaValueText,
+		ariaValueMin: computed(() => isIndeterminate.value ? void 0 : bounds.value.min),
+		ariaValueMax: computed(() => isIndeterminate.value ? void 0 : bounds.value.max),
+		ariaValueNow: computed(() => isIndeterminate.value ? void 0 : normalizedValue.value)
+	};
+}
+//#endregion
+//#region src/components/progress/progress.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-7870ef03 class=rp-progress__label>");
+var t1 = template(" ");
+var t2 = template("<span data-v-7870ef03 class=rp-progress__value aria-hidden=true>");
+var t3 = template("<span data-v-7870ef03 class=rp-progress__header>");
+var t4 = template("<div data-v-7870ef03 role=progressbar><span data-v-7870ef03 class=rp-progress__track aria-hidden=true><span data-v-7870ef03 class=rp-progress__indicator>", 1);
+//#endregion
+//#region src/components/progress/progress.vue
+var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpProgress",
+	__name: "progress",
+	props: {
+		id: {},
+		value: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		color: {},
+		size: {},
+		radius: {},
+		indeterminate: {
+			type: Boolean,
+			default: false
+		},
+		showValue: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: {},
+		ariaLabel: {},
+		ariaValueText: {},
+		describedby: {},
+		labelledby: {}
+	},
+	setup(__props, { slots: $slots }) {
+		const { control, rootClass, rootStyle, isIndeterminate, normalizedValue, valuePercent, formattedValue, ariaValueText, ariaValueMin, ariaValueMax, ariaValueNow } = useProgress(__props);
+		const n15 = t4();
+		renderEffect(() => {
+			const _control = unref(control);
+			setProp(n15, "id", _control.id);
+			setClass(n15, unref(rootClass));
+			setStyle(n15, unref(rootStyle));
+			setAttr(n15, "data-state", unref(isIndeterminate) ? "indeterminate" : "determinate");
+			setAttr(n15, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n15, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n15, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n15, "aria-valuemin", unref(ariaValueMin));
+			setAttr(n15, "aria-valuemax", unref(ariaValueMax));
+			setAttr(n15, "aria-valuenow", unref(ariaValueNow));
+			setAttr(n15, "aria-valuetext", unref(ariaValueText));
+		});
+		setInsertionState(n15, 0, 0);
+		createIf(() => $slots.default || !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
+			const n14 = t3();
+			setInsertionState(n14, null, 0);
+			createIf(() => $slots.default, () => {
+				const n5 = t0();
+				setInsertionState(n5, null, 0);
+				createSlot("default", null, null, 1);
+				return n5;
+			});
+			setInsertionState(n14, null, 1);
+			createIf(() => !unref(isIndeterminate) && ($slots.value || __props.showValue), () => {
+				const n13 = t2();
+				setInsertionState(n13, null, 0);
+				createIf(() => $slots.value, () => {
+					return createSlot("value", {
+						value: () => unref(normalizedValue),
+						formattedValue: () => unref(formattedValue),
+						percent: () => unref(valuePercent)
+					}, null, 1);
+				}, () => {
+					const n12 = t1();
+					renderEffect(() => setText(n12, toDisplayString(unref(formattedValue))));
+					return n12;
+				}, 517);
+				return n13;
+			});
+			return n14;
+		});
+		return n15;
+	}
+}), [["__scopeId", "data-v-7870ef03"]]);
+//#endregion
+//#region src/components/progress/types.ts
+var progressColors = componentColors;
+var progressSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var progressRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+//#endregion
+export { progress_default as i, progressRadiuses as n, progressSizes as r, progressColors as t };
+
+//# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../src/components/progress/useProgress.ts","../src/components/progress/progress.vue","../src/components/progress/progress.vue","../src/components/progress/types.ts"],"sourcesContent":["import { computed, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport type { ProgressProps } from './types';\n\ntype ProgressStateProps = Readonly<\n    ProgressProps & {\n        min: number;\n        max: number;\n        indeterminate: boolean;\n        showValue: boolean;\n    }\n>;\n\nexport function normalizeProgressBounds(min: number, max: number) {\n    const safeMin = Number.isFinite(min) ? min : 0;\n    const safeMax = Number.isFinite(max) ? max : 100;\n\n    return safeMax >= safeMin ? { min: safeMin, max: safeMax } : { min: safeMax, max: safeMin };\n}\n\nexport function normalizeProgressValue(value: number | null | undefined, min: number, max: number) {\n    const safeValue = Number.isFinite(value) ? Number(value) : min;\n\n    return Math.min(max, Math.max(min, safeValue));\n}\n\nexport function getProgressValuePercent(value: number, min: number, max: number) {\n    if (max <= min) return 0;\n\n    const percent = ((value - min) / (max - min)) * 100;\n    return Math.min(100, Math.max(0, percent));\n}\n\nfunction getFormattedProgressValue(\n    value: number,\n    percent: number,\n    formatter: ProgressProps['formatValue'],\n) {\n    return formatter ? formatter(value, percent) : `${Math.round(percent)}%`;\n}\n\nfunction getProgressAriaValueText(\n    value: number,\n    percent: number,\n    ariaValueText: ProgressProps['ariaValueText'],\n    formatter: ProgressProps['formatValue'],\n) {\n    if (typeof ariaValueText === 'function') return String(ariaValueText(value, percent));\n    if (ariaValueText != null && ariaValueText !== '') return String(ariaValueText);\n    if (formatter) return String(formatter(value, percent));\n\n    return undefined;\n}\n\nfunction setProgressStyleValue(\n    style: CSSProperties,\n    property: `--_rp-progress-${string}`,\n    value: string | undefined,\n) {\n    if (value) {\n        style[property] = value;\n    }\n}\n\nexport function useProgress(props: ProgressStateProps) {\n    const control = useControlState(props);\n\n    const bounds = computed(() => normalizeProgressBounds(props.min, props.max));\n    const isIndeterminate = computed(() => props.indeterminate || props.value == null);\n    const normalizedValue = computed(() =>\n        normalizeProgressValue(props.value, bounds.value.min, bounds.value.max),\n    );\n    const valuePercent = computed(() =>\n        getProgressValuePercent(normalizedValue.value, bounds.value.min, bounds.value.max),\n    );\n    const formattedValue = computed(() =>\n        getFormattedProgressValue(normalizedValue.value, valuePercent.value, props.formatValue),\n    );\n    const ariaValueText = computed(() =>\n        isIndeterminate.value\n            ? undefined\n            : getProgressAriaValueText(\n                  normalizedValue.value,\n                  valuePercent.value,\n                  props.ariaValueText,\n                  props.formatValue,\n              ),\n    );\n    const rootClass = computed(() =>\n        bem('rp-progress', {\n            [`color-${props.color}`]: isComponentPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            indeterminate: isIndeterminate.value,\n        }),\n    );\n    const rootStyle = computed<CSSProperties>(() => {\n        const style: CSSProperties = {\n            '--_rp-progress-value': `${valuePercent.value}%`,\n            '--_rp-progress-ratio': `${valuePercent.value / 100}`,\n        };\n\n        setProgressStyleValue(\n            style,\n            '--_rp-progress-custom-color',\n            getComponentCustomColor(props.color),\n        );\n\n        return style;\n    });\n\n    return {\n        control,\n        rootClass,\n        rootStyle,\n        isIndeterminate,\n        normalizedValue,\n        valuePercent,\n        formattedValue,\n        ariaValueText,\n        ariaValueMin: computed(() => (isIndeterminate.value ? undefined : bounds.value.min)),\n        ariaValueMax: computed(() => (isIndeterminate.value ? undefined : bounds.value.max)),\n        ariaValueNow: computed(() => (isIndeterminate.value ? undefined : normalizedValue.value)),\n    };\n}\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        role=\"progressbar\"\n        :data-state=\"isIndeterminate ? 'indeterminate' : 'determinate'\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-valuemin=\"ariaValueMin\"\n        :aria-valuemax=\"ariaValueMax\"\n        :aria-valuenow=\"ariaValueNow\"\n        :aria-valuetext=\"ariaValueText\"\n    >\n        <span\n            v-if=\"$slots.default || (!isIndeterminate && ($slots.value || showValue))\"\n            class=\"rp-progress__header\"\n        >\n            <span v-if=\"$slots.default\" class=\"rp-progress__label\">\n                <slot />\n            </span>\n            <span\n                v-if=\"!isIndeterminate && ($slots.value || showValue)\"\n                class=\"rp-progress__value\"\n                aria-hidden=\"true\"\n            >\n                <slot\n                    v-if=\"$slots.value\"\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n                <template v-else>{{ formattedValue }}</template>\n            </span>\n        </span>\n        <span class=\"rp-progress__track\" aria-hidden=\"true\">\n            <span class=\"rp-progress__indicator\" />\n        </span>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport type { ProgressProps } from './types';\nimport { useProgress } from './useProgress';\n\ndefineOptions({ name: 'RpProgress' });\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    min: 0,\n    max: 100,\n    indeterminate: false,\n    showValue: false,\n});\n\nconst {\n    control,\n    rootClass,\n    rootStyle,\n    isIndeterminate,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    ariaValueMin,\n    ariaValueMax,\n    ariaValueNow,\n} = useProgress(props);\n</script>\n\n<style src=\"./progress.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        :id=\"control.id\"\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        role=\"progressbar\"\n        :data-state=\"isIndeterminate ? 'indeterminate' : 'determinate'\"\n        :aria-label=\"ariaLabel || undefined\"\n        :aria-labelledby=\"control.ariaLabelledby\"\n        :aria-describedby=\"control.ariaDescribedby\"\n        :aria-valuemin=\"ariaValueMin\"\n        :aria-valuemax=\"ariaValueMax\"\n        :aria-valuenow=\"ariaValueNow\"\n        :aria-valuetext=\"ariaValueText\"\n    >\n        <span\n            v-if=\"$slots.default || (!isIndeterminate && ($slots.value || showValue))\"\n            class=\"rp-progress__header\"\n        >\n            <span v-if=\"$slots.default\" class=\"rp-progress__label\">\n                <slot />\n            </span>\n            <span\n                v-if=\"!isIndeterminate && ($slots.value || showValue)\"\n                class=\"rp-progress__value\"\n                aria-hidden=\"true\"\n            >\n                <slot\n                    v-if=\"$slots.value\"\n                    name=\"value\"\n                    :value=\"normalizedValue\"\n                    :formatted-value=\"formattedValue\"\n                    :percent=\"valuePercent\"\n                />\n                <template v-else>{{ formattedValue }}</template>\n            </span>\n        </span>\n        <span class=\"rp-progress__track\" aria-hidden=\"true\">\n            <span class=\"rp-progress__indicator\" />\n        </span>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport type { ProgressProps } from './types';\nimport { useProgress } from './useProgress';\n\ndefineOptions({ name: 'RpProgress' });\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n    min: 0,\n    max: 100,\n    indeterminate: false,\n    showValue: false,\n});\n\nconst {\n    control,\n    rootClass,\n    rootStyle,\n    isIndeterminate,\n    normalizedValue,\n    valuePercent,\n    formattedValue,\n    ariaValueText,\n    ariaValueMin,\n    ariaValueMax,\n    ariaValueNow,\n} = useProgress(props);\n</script>\n\n<style src=\"./progress.scss\" lang=\"scss\" scoped></style>\n","import { componentColors, type ComponentColorValue } from '../../utils/componentColors';\n\nexport const progressColors = componentColors;\n\nexport const progressSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nexport const progressRadiuses = ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'] as const;\n\nexport type ProgressColor = ComponentColorValue;\n\nexport type ProgressSize = (typeof progressSizes)[number];\n\nexport type ProgressRadius = (typeof progressRadiuses)[number];\n\nexport type ProgressValueFormatter = (value: number, percent: number) => string | number;\n\nexport interface ProgressProps {\n    id?: string;\n    value?: number | null;\n    min?: number;\n    max?: number;\n    color?: ProgressColor;\n    size?: ProgressSize;\n    radius?: ProgressRadius;\n    indeterminate?: boolean;\n    showValue?: boolean;\n    formatValue?: ProgressValueFormatter;\n    ariaLabel?: string;\n    ariaValueText?: string | ProgressValueFormatter;\n    describedby?: string;\n    labelledby?: string;\n}\n"],"mappings":"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"}

package/dist/radio.css

@@ -1,27 +1,27 @@
-.rp-radio[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-control-selected-bg);
-  --_radio-on-color: var(--rp-color-control-selected-fg);
-  --_radio-size: 18px;
-  --_radio-dot: 8px;
-  --_radio-font-size: var(--rp-font-size-base);
-  --_radio-checked-bg: var(--_radio-color);
-  --_radio-checked-border: var(--_radio-color);
-  --_radio-checked-dot: var(--_radio-on-color);
+.rp-radio[data-v-18269eb4] {
+  --_rp-radio-color: var(--_rp-radio-custom-color, var(--rp-color-control-selected-bg));
+  --_rp-radio-on-color: var(--_rp-radio-custom-on-color, var(--rp-color-control-selected-fg));
+  --_rp-radio-size: 18px;
+  --_rp-radio-dot: 8px;
+  --_rp-radio-font-size: var(--rp-font-size-base);
+  --_rp-radio-checked-bg: var(--_rp-radio-color);
+  --_rp-radio-checked-border: var(--_rp-radio-color);
+  --_rp-radio-checked-dot: var(--_rp-radio-on-color);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
-.rp-radio--disabled[data-v-ecddd6c8] {
+.rp-radio--disabled[data-v-18269eb4] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-radio[data-v-ecddd6c8] {
+.rp-radio[data-v-18269eb4] {
   gap: var(--rp-spacing-2);
-  font-size: var(--_radio-font-size);
+  font-size: var(--_rp-radio-font-size);
 }
-.rp-radio__native[data-v-ecddd6c8] {
+.rp-radio__native[data-v-18269eb4] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -33,99 +33,99 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-radio__native:focus-visible + .rp-radio__dot[data-v-ecddd6c8] {
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-18269eb4] {
   border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-radio__dot[data-v-ecddd6c8] {
+.rp-radio__dot[data-v-18269eb4] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--_radio-size);
-  height: var(--_radio-size);
+  width: var(--_rp-radio-size);
+  height: var(--_rp-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-ecddd6c8]::after {
+.rp-radio__dot[data-v-18269eb4]::after {
   content: "";
-  width: var(--_radio-dot);
-  height: var(--_radio-dot);
+  width: var(--_rp-radio-dot);
+  height: var(--_rp-radio-dot);
   border-radius: var(--rp-radius-full);
-  background-color: var(--_radio-checked-dot);
+  background-color: var(--_rp-radio-checked-dot);
   transform: scale(0);
   transition: transform var(--rp-transition-fast);
 }
-.rp-radio--checked .rp-radio__dot[data-v-ecddd6c8] {
-  background-color: var(--_radio-checked-bg);
-  border-color: var(--_radio-checked-border);
+.rp-radio--checked .rp-radio__dot[data-v-18269eb4] {
+  background-color: var(--_rp-radio-checked-bg);
+  border-color: var(--_rp-radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-ecddd6c8]::after {
+.rp-radio--checked .rp-radio__dot[data-v-18269eb4]::after {
   transform: scale(1);
 }
-.rp-radio__label[data-v-ecddd6c8] {
+.rp-radio__label[data-v-18269eb4] {
   line-height: var(--rp-line-height-normal);
   color: var(--rp-color-text);
 }
-.rp-radio--color-primary[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-primary);
-  --_radio-on-color: var(--rp-color-on-primary);
-}
-.rp-radio--color-secondary[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-secondary);
-  --_radio-on-color: var(--rp-color-on-secondary);
-}
-.rp-radio--color-success[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-success);
-  --_radio-on-color: var(--rp-color-on-success);
-}
-.rp-radio--color-warning[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-warning);
-  --_radio-on-color: var(--rp-color-on-warning);
-}
-.rp-radio--color-danger[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-danger);
-  --_radio-on-color: var(--rp-color-on-danger);
-}
-.rp-radio--color-info[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-info);
-  --_radio-on-color: var(--rp-color-on-info);
-}
-.rp-radio--color-neutral[data-v-ecddd6c8] {
-  --_radio-color: var(--rp-color-neutral);
-  --_radio-on-color: var(--rp-color-on-neutral);
-}
-.rp-radio--outline[data-v-ecddd6c8] {
-  --_radio-checked-bg: var(--rp-color-control-bg);
-  --_radio-checked-border: var(--_radio-color);
-  --_radio-checked-dot: var(--_radio-color);
-}
-.rp-radio--size-xs[data-v-ecddd6c8] {
-  --_radio-size: 14px;
-  --_radio-dot: 6px;
-  --_radio-font-size: var(--rp-font-size-xs);
-}
-.rp-radio--size-sm[data-v-ecddd6c8] {
-  --_radio-size: 16px;
-  --_radio-dot: 7px;
-  --_radio-font-size: var(--rp-font-size-sm);
-}
-.rp-radio--size-md[data-v-ecddd6c8] {
-  --_radio-size: 18px;
-  --_radio-dot: 8px;
-  --_radio-font-size: var(--rp-font-size-base);
-}
-.rp-radio--size-lg[data-v-ecddd6c8] {
-  --_radio-size: 22px;
-  --_radio-dot: 10px;
-  --_radio-font-size: var(--rp-font-size-lg);
-}
-.rp-radio--size-xl[data-v-ecddd6c8] {
-  --_radio-size: 26px;
-  --_radio-dot: 12px;
-  --_radio-font-size: var(--rp-font-size-xl);
+.rp-radio--color-primary[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-primary);
+  --_rp-radio-on-color: var(--rp-color-on-primary);
+}
+.rp-radio--color-secondary[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-secondary);
+  --_rp-radio-on-color: var(--rp-color-on-secondary);
+}
+.rp-radio--color-success[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-success);
+  --_rp-radio-on-color: var(--rp-color-on-success);
+}
+.rp-radio--color-warning[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-warning);
+  --_rp-radio-on-color: var(--rp-color-on-warning);
+}
+.rp-radio--color-danger[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-danger);
+  --_rp-radio-on-color: var(--rp-color-on-danger);
+}
+.rp-radio--color-info[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-info);
+  --_rp-radio-on-color: var(--rp-color-on-info);
+}
+.rp-radio--color-neutral[data-v-18269eb4] {
+  --_rp-radio-color: var(--rp-color-neutral);
+  --_rp-radio-on-color: var(--rp-color-on-neutral);
+}
+.rp-radio--outline[data-v-18269eb4] {
+  --_rp-radio-checked-bg: var(--rp-color-control-bg);
+  --_rp-radio-checked-border: var(--_rp-radio-color);
+  --_rp-radio-checked-dot: var(--_rp-radio-color);
+}
+.rp-radio--size-xs[data-v-18269eb4] {
+  --_rp-radio-size: 14px;
+  --_rp-radio-dot: 6px;
+  --_rp-radio-font-size: var(--rp-font-size-xs);
+}
+.rp-radio--size-sm[data-v-18269eb4] {
+  --_rp-radio-size: 16px;
+  --_rp-radio-dot: 7px;
+  --_rp-radio-font-size: var(--rp-font-size-sm);
+}
+.rp-radio--size-md[data-v-18269eb4] {
+  --_rp-radio-size: 18px;
+  --_rp-radio-dot: 8px;
+  --_rp-radio-font-size: var(--rp-font-size-base);
+}
+.rp-radio--size-lg[data-v-18269eb4] {
+  --_rp-radio-size: 22px;
+  --_rp-radio-dot: 10px;
+  --_rp-radio-font-size: var(--rp-font-size-lg);
+}
+.rp-radio--size-xl[data-v-18269eb4] {
+  --_rp-radio-size: 26px;
+  --_rp-radio-dot: 12px;
+  --_rp-radio-font-size: var(--rp-font-size-xl);
 }.rp-radio-group[data-v-a2c46e46] {
   display: flex;
   flex-direction: column;

package/dist/radio.js

@@ -1,7 +1,8 @@
 import './radio.css';
+import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
 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, createIf, createSlot, defineVaporComponent, inject, 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, setStyle, setValue, template, unref, useId } from "vue";
 //#region src/composables/useRequiredInject.ts
 function useRequiredInject(key, componentName) {
 	const value = inject(key);
@@ -13,6 +14,14 @@ function useRequiredInject(key, componentName) {
 var radioGroupKey = Symbol("radioGroup");
 //#endregion
 //#region src/components/radio/useRadio.ts
+function getRadioColorStyle(color) {
+	const customColor = getComponentCustomColor(color);
+	if (!customColor) return void 0;
+	return {
+		"--_rp-radio-custom-color": customColor,
+		"--_rp-radio-custom-on-color": "var(--rp-color-on-primary)"
+	};
+}
 function useRadio(props) {
 	const group = useRequiredInject(radioGroupKey, "RpRadio");
 	const isChecked = computed(() => group.modelValue === props.value);
@@ -24,9 +33,10 @@ function useRadio(props) {
 		checked: isChecked.value,
 		disabled: isDisabled.value,
 		[variant.value ?? ""]: Boolean(variant.value),
-		[`color-${color.value}`]: Boolean(color.value),
+		[`color-${color.value}`]: isComponentPresetColor(color.value),
 		[`size-${size.value}`]: Boolean(size.value)
 	}));
+	const rootStyle = computed(() => getRadioColorStyle(color.value));
 	function onSelect() {
 		if (isDisabled.value) return;
 		group.select(props.value);
@@ -36,6 +46,7 @@ function useRadio(props) {
 		isChecked,
 		isDisabled,
 		rootClass,
+		rootStyle,
 		onSelect
 	};
 }
@@ -80,8 +91,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-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);
+var t0$1 = template("<span data-v-18269eb4 class=rp-radio__label>");
+var t1 = template("<label data-v-18269eb4><input data-v-18269eb4 type=radio class=rp-radio__native><span data-v-18269eb4 class=rp-radio__dot></span>", 1);
 //#endregion
 //#region src/components/radio/radio.vue
 var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -98,7 +109,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		}
 	},
 	setup(__props, { slots: $slots }) {
-		const { group, isChecked, isDisabled, rootClass, onSelect } = useRadio(__props);
+		const { group, isChecked, isDisabled, rootClass, rootStyle, onSelect } = useRadio(__props);
 		const n5 = t1();
 		const n0 = child(n5);
 		on(n0, "change", (e) => unref(onSelect)(e));
@@ -106,6 +117,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			const _isChecked = unref(isChecked);
 			const _group = unref(group);
 			setClass(n5, unref(rootClass));
+			setStyle(n5, unref(rootStyle));
 			setAttr(n5, "data-disabled", unref(isDisabled) || void 0);
 			setAttr(n5, "data-state", _isChecked ? "checked" : "unchecked");
 			setProp(n0, "name", _group.name);
@@ -123,7 +135,7 @@ var radio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		});
 		return n5;
 	}
-}), [["__scopeId", "data-v-ecddd6c8"]]);
+}), [["__scopeId", "data-v-18269eb4"]]);
 //#endregion
 //#region src/components/radio/radio-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-v-a2c46e46 role=radiogroup>", 1);