ropav 0.0.2 → 0.0.3

package/dist/button.js

@@ -1,18 +1,41 @@
 import './button.css';
 import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setProp, template } from "vue";
+import { child, computed, createComponent, createElementBlock, createElementVNode, createIf, createSlot, defineVaporComponent, markRaw, openBlock, renderEffect, setClass, setInsertionState, setProp, template, unref } from "vue";
+//#region ~icons/lucide/loader-circle
+var _hoisted_1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M21 12a9 9 0 1 1-6.219-8.56"
+	}, null, -1)])]);
+}
+var loader_circle_default = markRaw({
+	name: "lucide-loader-circle",
+	render
+});
+//#endregion
 //#region src/components/button/button.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-c2d151de class=rp-button__spinner aria-hidden=true>", 2);
-var t1 = template("<span data-v-c2d151de class=rp-button__prefix>");
-var t2 = template("<span data-v-c2d151de class=rp-button__suffix>");
-var t3 = template("<button data-v-c2d151de><span data-v-c2d151de class=rp-button__label></span>", 1);
+var t0 = template("<span data-v-b8d57358 class=rp-button__left>");
+var t1 = template("<span data-v-b8d57358 class=rp-button__right>");
+var t2 = template("<button data-v-b8d57358><span data-v-b8d57358 class=rp-button__label></span>", 1);
 //#endregion
 //#region src/components/button/button.vue
 var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpButton",
 	__name: "button",
 	props: {
-		variant: { default: "solid" },
+		variant: {},
+		color: {},
+		size: {},
+		radius: {},
 		type: { default: "button" },
 		disabled: {
 			type: Boolean,
@@ -25,37 +48,46 @@ var button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	},
 	setup(__props, { slots: $slots }) {
 		const props = __props;
-		const rootClass = computed(() => bem("rp-button", props.variant));
-		const n13 = t3();
+		const isLoading = computed(() => props.loading && !props.disabled);
+		const rootClass = computed(() => bem("rp-button", {
+			[props.variant ?? ""]: Boolean(props.variant),
+			[`color-${props.color}`]: Boolean(props.color),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius)
+		}));
+		const n13 = t2();
 		const n8 = child(n13, 2);
 		renderEffect(() => {
 			setClass(n13, rootClass.value);
-			setProp(n13, "disabled", __props.disabled || __props.loading || void 0);
+			setProp(n13, "disabled", __props.disabled || isLoading.value || void 0);
 			setProp(n13, "type", __props.type);
 		});
 		setInsertionState(n13, 0, 0);
-		createIf(() => __props.loading, () => {
-			return t0();
-		}, null, 33);
+		createIf(() => isLoading.value, () => {
+			return createComponent(unref(loader_circle_default), {
+				class: "rp-button__spinner",
+				"aria-hidden": "true"
+			});
+		});
 		setInsertionState(n13, 0, 1);
-		createIf(() => $slots.prefix && !__props.loading, () => {
-			const n6 = t1();
+		createIf(() => $slots.left && !isLoading.value, () => {
+			const n6 = t0();
 			setInsertionState(n6, null, 0);
-			createSlot("prefix", null, null, 1);
+			createSlot("left", null, null, 1);
 			return n6;
 		});
 		setInsertionState(n8, null, 0);
 		createSlot("default", null, null, 1);
 		setInsertionState(n13, null, 3);
-		createIf(() => $slots.suffix, () => {
-			const n12 = t2();
+		createIf(() => $slots.right, () => {
+			const n12 = t1();
 			setInsertionState(n12, null, 0);
-			createSlot("suffix", null, null, 1);
+			createSlot("right", null, null, 1);
 			return n12;
 		});
 		return n13;
 	}
-}), [["__scopeId", "data-v-c2d151de"]]);
+}), [["__scopeId", "data-v-b8d57358"]]);
 //#endregion
 export { button_default as t };
 

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || loading || undefined\" :type=\"type\">\n        <span v-if=\"loading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.prefix && !loading\" class=\"rp-button__prefix\">\n            <slot name=\"prefix\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.suffix\" class=\"rp-button__suffix\">\n            <slot name=\"suffix\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    variant: 'solid',\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() => bem('rp-button', props.variant));\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || loading || undefined\" :type=\"type\">\n        <span v-if=\"loading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.prefix && !loading\" class=\"rp-button__prefix\">\n            <slot name=\"prefix\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.suffix\" class=\"rp-button__suffix\">\n            <slot name=\"suffix\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    variant: 'solid',\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst rootClass = computed(() => bem('rp-button', props.variant));\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAOd,MAAM,YAAY,eAAe,IAAI,aAAa,MAAM,OAAO,CAAC;;;;iBA5B5C,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,QAAA,WAAW,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACnE,QAAA,eAAO;;;;iBACP,OAAM,UAAA,CAAY,QAAA,eAAO;;;cAC3B,UAAa,MAAA,MAAA,CAAA;;;;;;iBAKX,OAAM,cAAA;;;cACR,UAAa,MAAA,MAAA,CAAA"}
+{"version":3,"file":"button.js","names":[],"sources":["../src/components/button/button.vue","../src/components/button/button.vue"],"sourcesContent":["<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button :class=\"rootClass\" :disabled=\"disabled || isLoading || undefined\" :type=\"type\">\n        <IconLoaderCircle v-if=\"isLoading\" class=\"rp-button__spinner\" aria-hidden=\"true\" />\n        <span v-if=\"$slots.left && !isLoading\" class=\"rp-button__left\">\n            <slot name=\"left\" />\n        </span>\n        <span class=\"rp-button__label\">\n            <slot />\n        </span>\n        <span v-if=\"$slots.right\" class=\"rp-button__right\">\n            <slot name=\"right\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { computed } from 'vue';\nimport IconLoaderCircle from '~icons/lucide/loader-circle';\nimport { bem } from '@/utils/bem';\nimport type { ButtonProps } from './types';\n\ndefineOptions({ name: 'RpButton' });\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    type: 'button',\n    disabled: false,\n    loading: false,\n});\n\nconst isLoading = computed(() => props.loading && !props.disabled);\n\nconst rootClass = computed(() =>\n    bem('rp-button', {\n        [props.variant ?? '']: Boolean(props.variant),\n        [`color-${props.color}`]: Boolean(props.color),\n        [`size-${props.size}`]: Boolean(props.size),\n        [`radius-${props.radius}`]: Boolean(props.radius),\n    }),\n);\n</script>\n\n<style src=\"./button.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAMd,MAAM,YAAY,eAAe,MAAM,WAAW,CAAC,MAAM,QAAQ;EAEjE,MAAM,YAAY,eACd,IAAI,aAAa;IACZ,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;IAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;IAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;IACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EACpD,CAAC,CACL;;;;iBArCoB,UAAA,KAAS;gBAAG,YAAU,QAAA,YAAY,UAAA,SAAa,KAAA,CAAS;gBAAG,QAAM,QAAA,IAAI;;;iBACzD,UAAA,aAAS;;IAAE,OAAM;IAAqB,eAAY;;;;iBAC9D,OAAM,QAAA,CAAU,UAAA,aAAS;;;cAC3B,QAAW,MAAA,MAAA,CAAA;;;;;;iBAKT,OAAM,aAAA;;;cACR,SAAY,MAAA,MAAA,CAAA"}

package/dist/checkbox.css

@@ -1,20 +1,28 @@
-.rp-checkbox[data-v-03521fec] {
+.rp-checkbox[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-primary);
+  --_checkbox-on-color: var(--rp-color-on-primary);
+  --_checkbox-size: 18px;
+  --_checkbox-icon-size: 14px;
+  --_checkbox-font-size: var(--rp-font-size-base);
+  --_checkbox-radius: 4px;
+  --_checkbox-checked-bg: var(--_checkbox-color);
+  --_checkbox-checked-border: var(--_checkbox-color);
+  --_checkbox-checked-icon: var(--_checkbox-on-color);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
-.rp-checkbox--disabled[data-v-03521fec] {
+.rp-checkbox--disabled[data-v-7333dac7] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-checkbox[data-v-03521fec] {
+.rp-checkbox[data-v-7333dac7] {
   gap: var(--rp-spacing-2);
-  font-size: var(--rp-font-size-base);
-  --_checkbox-size: 18px;
+  font-size: var(--_checkbox-font-size);
 }
-.rp-checkbox__native[data-v-03521fec] {
+.rp-checkbox__native[data-v-7333dac7] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -26,35 +34,131 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-03521fec] {
-  border-color: var(--rp-color-control-border-focus);
+.rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-7333dac7] {
+  border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-checkbox__box[data-v-03521fec] {
+.rp-checkbox__box[data-v-7333dac7] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--_checkbox-size);
   height: var(--_checkbox-size);
   flex-shrink: 0;
-  border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
-  border-radius: var(--rp-radius-base);
-  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border-radius: var(--_checkbox-radius);
+  background-color: var(--rp-color-button-default-bg);
   transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-checkbox--checked .rp-checkbox__box[data-v-03521fec], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-03521fec] {
-  background-color: var(--rp-color-control-selected-bg);
-  border-color: var(--rp-color-control-selected-bg);
+.rp-checkbox--checked .rp-checkbox__box[data-v-7333dac7], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-7333dac7] {
+  background-color: var(--_checkbox-checked-bg);
+  border-color: var(--_checkbox-checked-border);
 }
-.rp-checkbox--invalid .rp-checkbox__box[data-v-03521fec] {
+.rp-checkbox--invalid .rp-checkbox__box[data-v-7333dac7] {
   border-color: var(--rp-color-danger-fg);
 }
-.rp-checkbox__icon[data-v-03521fec] {
-  width: 12px;
-  height: 12px;
-  color: var(--rp-color-control-selected-fg);
+.rp-checkbox__icon[data-v-7333dac7] {
+  width: var(--_checkbox-icon-size);
+  height: var(--_checkbox-icon-size);
+  color: var(--_checkbox-checked-icon);
+  transform-origin: center;
 }
-.rp-checkbox__label[data-v-03521fec] {
+.rp-checkbox__icon[data-v-7333dac7] [stroke-width] {
+  stroke-width: 3;
+}
+.rp-checkbox__label[data-v-7333dac7] {
   line-height: var(--rp-line-height-normal);
   color: var(--rp-color-text);
+}
+.rp-checkbox--color-primary[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-primary);
+  --_checkbox-on-color: var(--rp-color-on-primary);
+}
+.rp-checkbox--color-secondary[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-secondary);
+  --_checkbox-on-color: var(--rp-color-on-secondary);
+}
+.rp-checkbox--color-success[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-success);
+  --_checkbox-on-color: var(--rp-color-on-success);
+}
+.rp-checkbox--color-warning[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-warning);
+  --_checkbox-on-color: var(--rp-color-on-warning);
+}
+.rp-checkbox--color-danger[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-danger);
+  --_checkbox-on-color: var(--rp-color-on-danger);
+}
+.rp-checkbox--color-info[data-v-7333dac7] {
+  --_checkbox-color: var(--rp-color-info);
+  --_checkbox-on-color: var(--rp-color-on-info);
+}
+.rp-checkbox--outline[data-v-7333dac7] {
+  --_checkbox-checked-bg: var(--rp-color-button-default-bg);
+  --_checkbox-checked-border: var(--_checkbox-color);
+  --_checkbox-checked-icon: var(--_checkbox-color);
+}
+.rp-checkbox--size-xs[data-v-7333dac7] {
+  --_checkbox-size: 14px;
+  --_checkbox-icon-size: 10px;
+  --_checkbox-font-size: var(--rp-font-size-xs);
+}
+.rp-checkbox--size-sm[data-v-7333dac7] {
+  --_checkbox-size: 16px;
+  --_checkbox-icon-size: 12px;
+  --_checkbox-font-size: var(--rp-font-size-sm);
+}
+.rp-checkbox--size-md[data-v-7333dac7] {
+  --_checkbox-size: 18px;
+  --_checkbox-icon-size: 14px;
+  --_checkbox-font-size: var(--rp-font-size-base);
+}
+.rp-checkbox--size-lg[data-v-7333dac7] {
+  --_checkbox-size: 22px;
+  --_checkbox-icon-size: 16px;
+  --_checkbox-font-size: var(--rp-font-size-lg);
+}
+.rp-checkbox--size-xl[data-v-7333dac7] {
+  --_checkbox-size: 26px;
+  --_checkbox-icon-size: 20px;
+  --_checkbox-font-size: var(--rp-font-size-xl);
+}
+.rp-checkbox--radius-xs[data-v-7333dac7] {
+  --_checkbox-radius: 2px;
+}
+.rp-checkbox--radius-sm[data-v-7333dac7] {
+  --_checkbox-radius: 4px;
+}
+.rp-checkbox--radius-md[data-v-7333dac7] {
+  --_checkbox-radius: 6px;
+}
+.rp-checkbox--radius-lg[data-v-7333dac7] {
+  --_checkbox-radius: 8px;
+}
+.rp-checkbox--radius-xl[data-v-7333dac7] {
+  --_checkbox-radius: var(--rp-radius-full);
+}
+.rp-checkbox-icon-enter-active[data-v-7333dac7],
+.rp-checkbox-icon-leave-active[data-v-7333dac7] {
+  transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
+}
+.rp-checkbox-icon-enter-from[data-v-7333dac7],
+.rp-checkbox-icon-leave-to[data-v-7333dac7] {
+  opacity: 0;
+  transform: translateY(3px) scale(0.85);
+}
+.rp-checkbox-icon-enter-to[data-v-7333dac7],
+.rp-checkbox-icon-leave-from[data-v-7333dac7] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.rp-checkbox-icon-leave-to[data-v-7333dac7] {
+  transform: translateY(-3px) scale(0.85);
+}
+@media (prefers-reduced-motion: reduce) {
+.rp-checkbox-icon-enter-active[data-v-7333dac7],
+  .rp-checkbox-icon-leave-active[data-v-7333dac7] {
+    transition: none;
+}
 }

package/dist/checkbox.js

@@ -1,29 +1,47 @@
 import './checkbox.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, createComponent, createIf, createSlot, defineVaporComponent, next, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
-//#region src/components/_internal/icons/CheckIcon.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<svg viewBox=\"0 0 16 16\"fill=none stroke=currentColor stroke-width=2><path d=\"M3.5 8.5L6.5 11.5L12.5 4.5\">", 3, 1);
-//#endregion
-//#region src/components/_internal/icons/CheckIcon.vue
-var CheckIcon_default = /* @__PURE__ */ defineVaporComponent({
-	name: "CheckIcon",
-	__name: "CheckIcon",
-	setup(__props) {
-		return t0$2();
-	}
+import { VaporTransition, child, computed, createComponent, createElementBlock, createElementVNode, createIf, createSlot, defineVaporComponent, extend, markRaw, next, on, openBlock, renderEffect, setAttr, setBlockKey, setClass, setInsertionState, setProp, template, unref } from "vue";
+//#region ~icons/lucide/check
+var _hoisted_1$1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M20 6L9 17l-5-5"
+	}, null, -1)])]);
+}
+var check_default = markRaw({
+	name: "lucide-check",
+	render: render$1
 });
 //#endregion
-//#region src/components/_internal/icons/MinusIcon.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<svg viewBox=\"0 0 16 16\"fill=none stroke=currentColor stroke-width=2><path d=\"M4 8h8\">", 3, 1);
-//#endregion
-//#region src/components/_internal/icons/MinusIcon.vue
-var MinusIcon_default = /* @__PURE__ */ defineVaporComponent({
-	name: "MinusIcon",
-	__name: "MinusIcon",
-	setup(__props) {
-		return t0$1();
-	}
+//#region ~icons/lucide/minus
+var _hoisted_1 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "none",
+		stroke: "currentColor",
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		"stroke-width": "2",
+		d: "M5 12h14"
+	}, null, -1)])]);
+}
+var minus_default = markRaw({
+	name: "lucide-minus",
+	render
 });
 //#endregion
 //#region src/components/checkbox/useCheckbox.ts
@@ -33,7 +51,11 @@ function useCheckbox(props, emitUpdate) {
 		checked: props.modelValue,
 		indeterminate: props.indeterminate,
 		disabled: control.disabled,
-		invalid: control.invalid
+		invalid: control.invalid,
+		[props.variant ?? ""]: Boolean(props.variant),
+		[`color-${props.color}`]: Boolean(props.color),
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius)
 	}));
 	function onChange(e) {
 		emitUpdate(e.target.checked);
@@ -46,8 +68,8 @@ function useCheckbox(props, emitUpdate) {
 }
 //#endregion
 //#region src/components/checkbox/checkbox.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-03521fec class=rp-checkbox__label>");
-var t1 = template("<label data-v-03521fec><input data-v-03521fec type=checkbox class=rp-checkbox__native><span data-v-03521fec class=rp-checkbox__box></span>", 1);
+var t0 = template("<span data-v-7333dac7 class=rp-checkbox__label>");
+var t1 = template("<label data-v-7333dac7><input data-v-7333dac7 type=checkbox class=rp-checkbox__native><span data-v-7333dac7 class=rp-checkbox__box></span>", 1);
 //#endregion
 //#region src/components/checkbox/checkbox.vue
 var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -57,6 +79,10 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		id: {},
 		name: {},
 		modelValue: { type: Boolean },
+		variant: {},
+		color: {},
+		size: {},
+		radius: {},
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -84,9 +110,9 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const { control, rootClass, onChange } = useCheckbox(props, (value) => {
 			emit("update:modelValue", value);
 		});
-		const n11 = t1();
-		const n0 = child(n11);
-		const n6 = next(n0, 1);
+		const n13 = t1();
+		const n0 = child(n13);
+		const n8 = next(n0, 1);
 		on(n0, "change", (e) => unref(onChange)(e));
 		renderEffect(() => {
 			const _control = unref(control);
@@ -94,9 +120,9 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			const _modelValue = __props.modelValue;
 			const _control_disabled = _control.disabled;
 			const _control_required = _control.required;
-			setClass(n11, unref(rootClass));
-			setAttr(n11, "data-disabled", _control_disabled || void 0);
-			setAttr(n11, "data-state", _indeterminate ? "indeterminate" : _modelValue ? "checked" : "unchecked");
+			setClass(n13, unref(rootClass));
+			setAttr(n13, "data-disabled", _control_disabled || void 0);
+			setAttr(n13, "data-state", _indeterminate ? "indeterminate" : _modelValue ? "checked" : "unchecked");
 			setProp(n0, "id", _control.id);
 			setProp(n0, "name", __props.name);
 			setProp(n0, "checked", _modelValue);
@@ -110,22 +136,31 @@ var checkbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			setAttr(n0, "aria-invalid", _control.invalid || void 0);
 			setAttr(n0, "aria-required", _control_required || void 0);
 		});
-		setInsertionState(n6, null, 0);
-		createIf(() => __props.indeterminate, () => {
-			return createComponent(unref(MinusIcon_default), { class: "rp-checkbox__icon" });
-		}, () => createIf(() => __props.modelValue, () => {
-			return createComponent(unref(CheckIcon_default), { class: "rp-checkbox__icon" });
-		}), 261);
-		setInsertionState(n11, null, 2);
+		setInsertionState(n8, null, 0);
+		createComponent(VaporTransition, {
+			name: "rp-checkbox-icon",
+			mode: "out-in"
+		}, extend(() => {
+			return createIf(() => __props.indeterminate, () => {
+				const n3 = createComponent(unref(minus_default), { class: "rp-checkbox__icon" });
+				setBlockKey(n3, "minus");
+				return n3;
+			}, () => createIf(() => __props.modelValue, () => {
+				const n5 = createComponent(unref(check_default), { class: "rp-checkbox__icon" });
+				setBlockKey(n5, "check");
+				return n5;
+			}, null, 129), 389);
+		}, { _: 8 }));
+		setInsertionState(n13, null, 2);
 		createIf(() => $slots.default, () => {
-			const n10 = t0();
-			setInsertionState(n10, null, 0);
+			const n12 = t0();
+			setInsertionState(n12, null, 0);
 			createSlot("default", null, null, 1);
-			return n10;
+			return n12;
 		});
-		return n11;
+		return n13;
 	}
-}), [["__scopeId", "data-v-03521fec"]]);
+}), [["__scopeId", "data-v-7333dac7"]]);
 //#endregion
 export { checkbox_default as t };
 

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/_internal/icons/CheckIcon.vue","../src/components/_internal/icons/CheckIcon.vue","../src/components/_internal/icons/MinusIcon.vue","../src/components/_internal/icons/MinusIcon.vue","../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M3.5 8.5L6.5 11.5L12.5 4.5\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'CheckIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M3.5 8.5L6.5 11.5L12.5 4.5\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'CheckIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 8h8\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'MinusIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <path d=\"M4 8h8\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'MinusIcon' });\n</script>\n","import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(\n    props: Readonly<CheckboxProps>,\n    emitUpdate: (value: boolean) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-checkbox', {\n            checked: props.modelValue,\n            indeterminate: props.indeterminate,\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\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            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <MinusIcon v-if=\"indeterminate\" class=\"rp-checkbox__icon\" />\n            <CheckIcon v-else-if=\"modelValue\" class=\"rp-checkbox__icon\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { CheckIcon, MinusIcon } from '@/components/_internal/icons';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\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            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <MinusIcon v-if=\"indeterminate\" class=\"rp-checkbox__icon\" />\n            <CheckIcon v-else-if=\"modelValue\" class=\"rp-checkbox__icon\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { CheckIcon, MinusIcon } from '@/components/_internal/icons';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AIKA,SAAgB,YACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;CACrB,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECWA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAhCY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;;iBAnBb,MAAA,SAAA,CAAS;gBAChB,iBAAe,qBAAoB,KAAA,CAAS;gBAC5C,cAAY,iBAAa,kBAAqB,cAAU,YAAA,WAAA;eAGpD,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAGV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,iBAAe,cAAa;eAC5B,gBAAc,iBAAa,UAAa,WAAU;eAClD,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAI5B,QAAA,qBAAa;sDAAE,OAAM,oBAAmB,CAAA;0BACnC,QAAA,kBAAU;sDAAE,OAAM,oBAAmB,CAAA;;;iBAEnD,OAAM,eAAA"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../src/components/checkbox/useCheckbox.ts","../src/components/checkbox/checkbox.vue","../src/components/checkbox/checkbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { CheckboxProps } from './types';\n\nexport function useCheckbox(props: Readonly<CheckboxProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-checkbox', {\n            checked: props.modelValue,\n            indeterminate: props.indeterminate,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [props.variant ?? '']: Boolean(props.variant),\n            [`color-${props.color}`]: Boolean(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n        }),\n    );\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\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            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport CheckIcon from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"indeterminate ? 'indeterminate' : modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-checkbox__native\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :indeterminate=\"indeterminate\"\n            :aria-checked=\"indeterminate ? 'mixed' : modelValue\"\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            @change=\"onChange\"\n        />\n        <span class=\"rp-checkbox__box\">\n            <Transition name=\"rp-checkbox-icon\" mode=\"out-in\">\n                <MinusIcon v-if=\"indeterminate\" key=\"minus\" class=\"rp-checkbox__icon\" />\n                <CheckIcon v-else-if=\"modelValue\" key=\"check\" class=\"rp-checkbox__icon\" />\n            </Transition>\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-checkbox__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport CheckIcon from '~icons/lucide/check';\nimport MinusIcon from '~icons/lucide/minus';\nimport { useCheckbox } from './useCheckbox';\nimport type { CheckboxProps } from './types';\n\ndefineOptions({ name: 'RpCheckbox' });\n\nconst props = withDefaults(defineProps<CheckboxProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    indeterminate: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useCheckbox(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./checkbox.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,SAAgB,YAAY,OAAgC,YAAsC;CAC9F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,SAAS,MAAM;EACf,eAAe,MAAM;EACrB,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,MAAM,WAAW,KAAK,QAAQ,MAAM,OAAO;GAC3C,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;CACpD,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,YAAY,QAAQ,UAAU;GACnE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;;SAnCY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;;iBAnBb,MAAA,SAAA,CAAS;gBAChB,iBAAe,qBAAoB,KAAA,CAAS;gBAC5C,cAAY,iBAAa,kBAAqB,cAAU,YAAA,WAAA;eAGpD,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAGV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,iBAAe,cAAa;eAC5B,gBAAc,iBAAa,UAAa,WAAU;eAClD,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;;GAIjC,MAAK;GAAmB,MAAK;;yBACpB,QAAA,qBAAa;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;2BACrB,QAAA,kBAAU;uDAAc,OAAM,oBAAmB,CAAA;oBAAjC,OAAO;;;;;iBAGzC,OAAM,eAAA"}

package/dist/components/button/button.d.ts

@@ -6,11 +6,11 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        prefix?: (props: {}) => any;
+        left?: (props: {}) => any;
     } & {
         default?: (props: {}) => any;
     } & {
-        suffix?: (props: {}) => any;
+        right?: (props: {}) => any;
     };
     emit: {};
 }>) => import('vue').VNode & {

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

@@ -1,2 +1,2 @@
 export { default as Button } from './button';
-export type { ButtonProps } from './types';
+export type { ButtonColor, ButtonProps, ButtonRadius, ButtonSize, ButtonVariant } from './types';

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

@@ -1,5 +1,12 @@
+export type ButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonVariant = 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';
 export interface ButtonProps {
-    variant?: 'solid' | 'ghost';
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    radius?: ButtonRadius;
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     loading?: boolean;

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

@@ -1,2 +1,2 @@
 export { default as Checkbox } from './checkbox';
-export type { CheckboxProps } from './types';
+export type { CheckboxColor, CheckboxProps, CheckboxRadius, CheckboxSize, CheckboxVariant, } from './types';

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

@@ -1,7 +1,15 @@
+export type CheckboxColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxVariant = 'solid' | 'outline';
 export interface CheckboxProps {
     id?: string;
     name?: string;
     modelValue: boolean;
+    variant?: CheckboxVariant;
+    color?: CheckboxColor;
+    size?: CheckboxSize;
+    radius?: CheckboxRadius;
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;

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

@@ -1,2 +1,2 @@
 export { default as Input } from './input';
-export type { InputProps } from './types';
+export type { InputProps, InputRadius, InputSize } from './types';

package/dist/components/input/input.d.ts

@@ -7,7 +7,11 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        left?: (props: {}) => any;
+    } & {
+        right?: (props: {}) => any;
+    };
     emit: (evt: "update:modelValue", value: string) => void;
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;

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

@@ -1,13 +1,18 @@
+export type InputRadius = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface InputProps {
     id?: string;
     name?: string;
     modelValue: string;
     type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    size?: InputSize;
+    radius?: InputRadius;
     placeholder?: string;
     disabled?: boolean;
     readonly?: boolean;
     required?: boolean;
     invalid?: boolean;
+    valid?: boolean;
     ariaLabel?: string;
     describedby?: string;
     labelledby?: string;

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

@@ -1,3 +1,3 @@
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radio-group';
-export type { RadioProps, RadioGroupProps } from './types';
+export type { RadioColor, RadioGroupProps, RadioProps, RadioSize, RadioVariant } from './types';