ropav 0.0.2 → 0.0.4

package/dist/components/select/types.d.ts

@@ -3,12 +3,15 @@ export interface SelectOption {
     value: string | number;
     disabled?: boolean;
 }
+export type SelectRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SelectProps {
     id?: string;
     name?: string;
     modelValue: string | number | null;
     options?: SelectOption[];
+    radius?: SelectRadius;
     placeholder?: string;
+    clearable?: boolean;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;

package/dist/components/select/useSelect.d.ts

@@ -13,8 +13,10 @@ export declare function useSelect(props: Readonly<SelectProps>, emitUpdate: (val
     rootClass: import('vue').ComputedRef<string[]>;
     hasValue: import('vue').ComputedRef<boolean>;
     displayLabel: import('vue').ComputedRef<string>;
+    canClear: import('vue').ComputedRef<boolean>;
     toggle: () => void;
     selectOption: (option: SelectOption) => void;
+    clearSelection: () => void;
     onOptionMouseenter: (option: SelectOption, index: number) => void;
     onTriggerKeydown: (e: KeyboardEvent) => void;
 };

package/dist/components/switch/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Switch } from './switch';
-export type { SwitchProps } from './types';
+export type { SwitchColor, SwitchProps, SwitchSize } from './types';

package/dist/components/switch/types.d.ts

@@ -1,7 +1,11 @@
+export type SwitchColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SwitchProps {
     id?: string;
     name?: string;
     modelValue: boolean;
+    color?: SwitchColor;
+    size?: SwitchSize;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;

package/dist/components/textarea/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Textarea } from './textarea';
-export type { TextareaProps } from './types';
+export type { TextareaProps, TextareaRadius, TextareaSize } from './types';

package/dist/components/textarea/types.d.ts

@@ -1,13 +1,18 @@
+export type TextareaRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextareaSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface TextareaProps {
     id?: string;
     name?: string;
     modelValue: string;
+    size?: TextareaSize;
+    radius?: TextareaRadius;
     placeholder?: string;
     rows?: number;
     disabled?: boolean;
     readonly?: boolean;
     required?: boolean;
     invalid?: boolean;
+    valid?: boolean;
     ariaLabel?: string;
     describedby?: string;
     labelledby?: string;

package/dist/components/textarea/useTextarea.d.ts

@@ -3,4 +3,5 @@ export declare function useTextarea(props: Readonly<TextareaProps>, emitUpdate:
     control: import('../../composables/useControlState').ControlState;
     rootClass: import('vue').ComputedRef<string[]>;
     onInput: (e: Event) => void;
+    focusTextarea: (e: MouseEvent) => void;
 };

package/dist/index.d.ts

@@ -4,6 +4,4 @@ export * from './components/input';
 export * from './components/radio';
 export * from './components/select';
 export * from './components/switch';
-export * from './components/tabs';
 export * from './components/textarea';
-export * from './components/tooltip';

package/dist/index.js

@@ -1,10 +1,8 @@
 import { t as button_default } from "./button.js";
 import { t as checkbox_default } from "./checkbox.js";
-import { t as select_default } from "./select.js";
 import { t as input_default } from "./input.js";
 import { n as radio_default, t as radio_group_default } from "./radio.js";
+import { t as select_default } from "./select.js";
 import { t as switch_default } from "./switch.js";
-import { i as tabs_default, n as tabs_trigger_default, r as tabs_list_default, t as tab_panel_default } from "./tabs.js";
 import { t as textarea_default } from "./textarea.js";
-import { t as tooltip_default } from "./tooltip.js";
-export { button_default as Button, checkbox_default as Checkbox, input_default as Input, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, switch_default as Switch, tab_panel_default as TabPanel, tabs_default as Tabs, tabs_list_default as TabsList, tabs_trigger_default as TabsTrigger, textarea_default as Textarea, tooltip_default as Tooltip };
+export { button_default as Button, checkbox_default as Checkbox, input_default as Input, radio_default as Radio, radio_group_default as RadioGroup, select_default as Select, switch_default as Switch, textarea_default as Textarea };

package/dist/input.css

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

package/dist/input.js

@@ -1,10 +1,12 @@
 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";
+import { child, computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, renderEffect, setAttr, setClass, setInsertionState, 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");
+var t0 = template("<span data-v-fedf15e7 class=rp-input__left>");
+var t1 = template("<span data-v-fedf15e7 class=rp-input__right>");
+var t2 = template("<label data-v-fedf15e7><input data-v-fedf15e7 class=rp-input__native>", 1);
+delegateEvents("input", "mousedown");
 //#endregion
 //#region src/components/input/input.vue
 var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -15,6 +17,8 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		name: {},
 		modelValue: {},
 		type: { default: "text" },
+		size: {},
+		radius: {},
 		placeholder: { default: "" },
 		disabled: {
 			type: Boolean,
@@ -32,47 +36,86 @@ var input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: void 0
 		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
 		ariaLabel: {},
 		describedby: {},
 		labelledby: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
 		const control = useControlState(props);
 		const rootClass = computed(() => bem("rp-input", {
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius),
 			disabled: control.disabled,
 			invalid: control.invalid,
+			valid: control.valid && !control.invalid,
 			readonly: props.readonly
 		}));
 		function onInput(e) {
 			emit("update:modelValue", e.target.value);
 		}
-		const n1 = t0();
-		const n0 = child(n1);
-		n0.$evtinput = createInvoker(onInput);
+		function focusInput(e) {
+			if (control.disabled) return;
+			const target = e.target;
+			if (target instanceof Element && isInteractiveElement(target)) return;
+			e.currentTarget.querySelector(".rp-input__native")?.focus();
+		}
+		function isInteractiveElement(target) {
+			return Boolean(target.closest([
+				"button",
+				"a[href]",
+				"input:not(.rp-input__native)",
+				"select",
+				"textarea",
+				"[contenteditable=\"true\"]",
+				"[tabindex]:not([tabindex=\"-1\"])"
+			].join(",")));
+		}
+		const n9 = t2();
+		const n4 = child(n9, 1);
+		renderEffect(() => setClass(n9, rootClass.value));
+		setInsertionState(n9, 0, 0);
+		createIf(() => $slots.left, () => {
+			const n3 = t0();
+			setInsertionState(n3, null, 0);
+			createSlot("left", null, null, 1);
+			return n3;
+		});
+		n4.$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);
+			setProp(n4, "id", _control.id);
+			setProp(n4, "name", __props.name);
+			setProp(n4, "type", __props.type);
+			setValue(n4, __props.modelValue);
+			setProp(n4, "placeholder", __props.placeholder);
+			setProp(n4, "disabled", _control.disabled || void 0);
+			setProp(n4, "readonly", __props.readonly || void 0);
+			setProp(n4, "required", _control_required || void 0);
+			setAttr(n4, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n4, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n4, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n4, "aria-invalid", _control.invalid || void 0);
+			setAttr(n4, "aria-required", _control_required || void 0);
+		});
+		setInsertionState(n9, null, 2);
+		createIf(() => $slots.right, () => {
+			const n8 = t1();
+			setInsertionState(n8, null, 0);
+			createSlot("right", null, null, 1);
+			return n8;
 		});
-		return n1;
+		n9.$evtmousedown = createInvoker(focusInput);
+		return n9;
 	}
-}), [["__scopeId", "data-v-7e1222cc"]]);
+}), [["__scopeId", "data-v-fedf15e7"]]);
 //#endregion
 export { input_default as t };
 

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../src/components/input/input.vue","../src/components/input/input.vue"],"sourcesContent":["<template>\n    <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"}
+{"version":3,"file":"input.js","names":[],"sources":["../src/components/input/input.vue","../src/components/input/input.vue"],"sourcesContent":["<template>\n    <label :class=\"rootClass\" @mousedown=\"focusInput\">\n        <span v-if=\"$slots.left\" class=\"rp-input__left\">\n            <slot name=\"left\" />\n        </span>\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-input__native\"\n            :type=\"type\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n        <span v-if=\"$slots.right\" class=\"rp-input__right\">\n            <slot name=\"right\" />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { InputProps } from './types';\n\ndefineOptions({ name: 'RpInput' });\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    placeholder: '',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst control = useControlState(props);\n\nconst rootClass = computed(() =>\n    bem('rp-input', {\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        disabled: control.disabled,\n        invalid: control.invalid,\n        valid: control.valid && !control.invalid,\n        readonly: props.readonly,\n    }),\n);\n\nfunction onInput(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n\nfunction focusInput(e: MouseEvent) {\n    if (control.disabled) return;\n\n    const target = e.target;\n    if (target instanceof Element && isInteractiveElement(target)) return;\n\n    (e.currentTarget as HTMLElement).querySelector<HTMLInputElement>('.rp-input__native')?.focus();\n}\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input:not(.rp-input__native)',\n                'select',\n                'textarea',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label :class=\"rootClass\" @mousedown=\"focusInput\">\n        <span v-if=\"$slots.left\" class=\"rp-input__left\">\n            <slot name=\"left\" />\n        </span>\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-input__native\"\n            :type=\"type\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n        <span v-if=\"$slots.right\" class=\"rp-input__right\">\n            <slot name=\"right\" />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { InputProps } from './types';\n\ndefineOptions({ name: 'RpInput' });\n\nconst props = withDefaults(defineProps<InputProps>(), {\n    type: 'text',\n    placeholder: '',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst control = useControlState(props);\n\nconst rootClass = computed(() =>\n    bem('rp-input', {\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n        disabled: control.disabled,\n        invalid: control.invalid,\n        valid: control.valid && !control.invalid,\n        readonly: props.readonly,\n    }),\n);\n\nfunction onInput(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n}\n\nfunction focusInput(e: MouseEvent) {\n    if (control.disabled) return;\n\n    const target = e.target;\n    if (target instanceof Element && isInteractiveElement(target)) return;\n\n    (e.currentTarget as HTMLElement).querySelector<HTMLInputElement>('.rp-input__native')?.focus();\n}\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input:not(.rp-input__native)',\n                'select',\n                'textarea',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n</script>\n\n<style src=\"./input.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAIb,MAAM,UAAU,gBAAgB,KAAK;EAErC,MAAM,YAAY,eACd,IAAI,YAAY;IACX,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;GAChD,UAAU,QAAQ;GAClB,SAAS,QAAQ;GACjB,OAAO,QAAQ,SAAS,CAAC,QAAQ;GACjC,UAAU,MAAM;EACpB,CAAC,CACL;EAEA,SAAS,QAAQ,GAAU;GACvB,KAAK,qBAAsB,EAAE,OAA4B,KAAK;EAClE;EAEA,SAAS,WAAW,GAAe;GAC/B,IAAI,QAAQ,UAAU;GAEtB,MAAM,SAAS,EAAE;GACjB,IAAI,kBAAkB,WAAW,qBAAqB,MAAM,GAAG;GAE/D,EAAG,cAA8B,cAAgC,mBAAmB,CAAC,EAAE,MAAM;EACjG;EAEA,SAAS,qBAAqB,QAAiB;GAC3C,OAAO,QACH,OAAO,QACH;IACI;IACA;IACA;IACA;IACA;IACA;IACA;GACJ,CAAC,CAAC,KAAK,GAAG,CACd,CACJ;EACJ;;;kCAzFmB,UAAA,KAAS,CAAA;;iBACR,OAAM,YAAA;;;cACR,QAAW,MAAA,MAAA,CAAA;;;+BAiBT,OAAO;;;;eAdd,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAEV,QAAM,QAAA,IAAI;gBACH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAGrC,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA;;;mCAtBY,UAAU"}

package/dist/radio.css

@@ -1,21 +1,27 @@
-.rp-radio[data-v-67524919] {
+.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);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
-.rp-radio--disabled[data-v-67524919] {
+.rp-radio--disabled[data-v-ecddd6c8] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-radio[data-v-67524919] {
+.rp-radio[data-v-ecddd6c8] {
   gap: var(--rp-spacing-2);
-  font-size: var(--rp-font-size-base);
-  --_radio-size: 18px;
-  --_radio-dot: 8px;
+  font-size: var(--_radio-font-size);
 }
-.rp-radio__native[data-v-67524919] {
+.rp-radio__native[data-v-ecddd6c8] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -27,7 +33,11 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-radio__dot[data-v-67524919] {
+.rp-radio__native:focus-visible + .rp-radio__dot[data-v-ecddd6c8] {
+  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] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -39,26 +49,84 @@
   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 {
+.rp-radio__dot[data-v-ecddd6c8]::after {
   content: "";
   width: var(--_radio-dot);
   height: var(--_radio-dot);
   border-radius: var(--rp-radius-full);
-  background-color: var(--rp-color-control-selected-fg);
+  background-color: var(--_radio-checked-dot);
   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-ecddd6c8] {
+  background-color: var(--_radio-checked-bg);
+  border-color: var(--_radio-checked-border);
 }
-.rp-radio--checked .rp-radio__dot[data-v-67524919]::after {
+.rp-radio--checked .rp-radio__dot[data-v-ecddd6c8]::after {
   transform: scale(1);
 }
-.rp-radio__label[data-v-67524919] {
+.rp-radio__label[data-v-ecddd6c8] {
   line-height: var(--rp-line-height-normal);
   color: var(--rp-color-text);
-}.rp-radio-group[data-v-ba5e60e5] {
+}
+.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-group[data-v-a2c46e46] {
   display: flex;
   flex-direction: column;
   gap: var(--rp-spacing-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 };