ropav 0.0.4 → 0.0.6

package/dist/switch.css

@@ -1,27 +1,33 @@
-.rp-switch[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-control-selected-bg);
-  --_switch-font-size: var(--rp-font-size-base);
-  --_track-w: 40px;
-  --_track-h: 22px;
-  --_thumb-size: 18px;
-  --_thumb-offset: 2px;
-  --_track-bg: var(--rp-color-control-track-bg);
-  --_thumb-bg: var(--rp-color-control-thumb-bg);
+.rp-switch[data-v-e9d95947] {
+  --_rp-switch-color: var(--_rp-switch-custom-color, var(--rp-color-control-selected-bg));
+  --_rp-switch-font-size: var(--rp-font-size-base);
+  --_rp-switch-track-width: 40px;
+  --_rp-switch-track-height: 22px;
+  --_rp-switch-thumb-size: 18px;
+  --_rp-switch-thumb-offset: 2px;
+  --_rp-switch-track-bg: var(--rp-color-control-track-bg);
+  --_rp-switch-thumb-bg: var(--rp-color-control-thumb-bg);
+  --_rp-switch-invalid-border: var(--rp-color-danger);
+  --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
-.rp-switch--disabled[data-v-aeef0d94] {
+html.dark .rp-switch[data-v-e9d95947] {
+  --_rp-switch-invalid-border: var(--rp-color-danger-fg);
+  --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
+.rp-switch--disabled[data-v-e9d95947] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-switch[data-v-aeef0d94] {
+.rp-switch[data-v-e9d95947] {
   gap: var(--rp-spacing-2);
-  font-size: var(--_switch-font-size);
+  font-size: var(--_rp-switch-font-size);
 }
-.rp-switch__native[data-v-aeef0d94] {
+.rp-switch__native[data-v-e9d95947] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -33,93 +39,96 @@
   border-width: 0;
   pointer-events: none;
 }
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-aeef0d94] {
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-e9d95947] {
   border-color: var(--rp-color-primary);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-switch__track[data-v-aeef0d94] {
+.rp-switch__track[data-v-e9d95947] {
   position: relative;
   display: inline-flex;
   align-items: center;
-  width: var(--_track-w);
-  height: var(--_track-h);
+  width: var(--_rp-switch-track-width);
+  height: var(--_rp-switch-track-height);
   flex-shrink: 0;
-  background-color: var(--_track-bg);
+  background-color: var(--_rp-switch-track-bg);
   border-radius: var(--rp-radius-full);
   transition: background-color var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__track[data-v-aeef0d94] {
-  background-color: var(--_switch-color);
+.rp-switch--checked .rp-switch__track[data-v-e9d95947] {
+  background-color: var(--_rp-switch-color);
+}
+.rp-switch--invalid .rp-switch__track[data-v-e9d95947] {
+  outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
+  outline-offset: var(--_rp-switch-thumb-offset);
 }
-.rp-switch--invalid .rp-switch__track[data-v-aeef0d94] {
-  outline: var(--rp-border-width-thin) solid var(--rp-color-danger-fg);
-  outline-offset: var(--_thumb-offset);
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-e9d95947] {
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
 }
-.rp-switch__thumb[data-v-aeef0d94] {
+.rp-switch__thumb[data-v-e9d95947] {
   position: absolute;
-  left: var(--_thumb-offset);
-  width: var(--_thumb-size);
-  height: var(--_thumb-size);
-  background-color: var(--_thumb-bg);
+  left: var(--_rp-switch-thumb-offset);
+  width: var(--_rp-switch-thumb-size);
+  height: var(--_rp-switch-thumb-size);
+  background-color: var(--_rp-switch-thumb-bg);
   border-radius: var(--rp-radius-full);
   box-shadow: var(--rp-shadow-sm);
   transition: transform var(--rp-transition-fast);
 }
-.rp-switch--checked .rp-switch__thumb[data-v-aeef0d94] {
-  transform: translateX(calc(var(--_track-w) - var(--_thumb-size) - var(--_thumb-offset) * 2));
+.rp-switch--checked .rp-switch__thumb[data-v-e9d95947] {
+  transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
 }
-.rp-switch__label[data-v-aeef0d94] {
+.rp-switch__label[data-v-e9d95947] {
   line-height: var(--rp-line-height-normal);
   color: var(--rp-color-text);
 }
-.rp-switch--color-primary[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-primary);
+.rp-switch--color-primary[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-primary);
 }
-.rp-switch--color-secondary[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-secondary);
+.rp-switch--color-secondary[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-secondary);
 }
-.rp-switch--color-success[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-success);
+.rp-switch--color-success[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-success);
 }
-.rp-switch--color-warning[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-warning);
+.rp-switch--color-warning[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-warning);
 }
-.rp-switch--color-danger[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-danger);
+.rp-switch--color-danger[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-danger);
 }
-.rp-switch--color-info[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-info);
+.rp-switch--color-info[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-info);
 }
-.rp-switch--color-neutral[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-neutral);
+.rp-switch--color-neutral[data-v-e9d95947] {
+  --_rp-switch-color: var(--rp-color-neutral);
 }
-.rp-switch--size-xs[data-v-aeef0d94] {
-  --_track-w: 28px;
-  --_track-h: 16px;
-  --_thumb-size: 12px;
-  --_switch-font-size: var(--rp-font-size-xs);
+.rp-switch--size-xs[data-v-e9d95947] {
+  --_rp-switch-track-width: 28px;
+  --_rp-switch-track-height: 16px;
+  --_rp-switch-thumb-size: 12px;
+  --_rp-switch-font-size: var(--rp-font-size-xs);
 }
-.rp-switch--size-sm[data-v-aeef0d94] {
-  --_track-w: 34px;
-  --_track-h: 18px;
-  --_thumb-size: 14px;
-  --_switch-font-size: var(--rp-font-size-sm);
+.rp-switch--size-sm[data-v-e9d95947] {
+  --_rp-switch-track-width: 34px;
+  --_rp-switch-track-height: 18px;
+  --_rp-switch-thumb-size: 14px;
+  --_rp-switch-font-size: var(--rp-font-size-sm);
 }
-.rp-switch--size-md[data-v-aeef0d94] {
-  --_track-w: 40px;
-  --_track-h: 22px;
-  --_thumb-size: 18px;
-  --_switch-font-size: var(--rp-font-size-base);
+.rp-switch--size-md[data-v-e9d95947] {
+  --_rp-switch-track-width: 40px;
+  --_rp-switch-track-height: 22px;
+  --_rp-switch-thumb-size: 18px;
+  --_rp-switch-font-size: var(--rp-font-size-base);
 }
-.rp-switch--size-lg[data-v-aeef0d94] {
-  --_track-w: 48px;
-  --_track-h: 26px;
-  --_thumb-size: 22px;
-  --_switch-font-size: var(--rp-font-size-lg);
+.rp-switch--size-lg[data-v-e9d95947] {
+  --_rp-switch-track-width: 48px;
+  --_rp-switch-track-height: 26px;
+  --_rp-switch-thumb-size: 22px;
+  --_rp-switch-font-size: var(--rp-font-size-lg);
 }
-.rp-switch--size-xl[data-v-aeef0d94] {
-  --_track-w: 56px;
-  --_track-h: 30px;
-  --_thumb-size: 26px;
-  --_switch-font-size: var(--rp-font-size-xl);
+.rp-switch--size-xl[data-v-e9d95947] {
+  --_rp-switch-track-width: 56px;
+  --_rp-switch-track-height: 30px;
+  --_rp-switch-thumb-size: 26px;
+  --_rp-switch-font-size: var(--rp-font-size-xl);
 }

package/dist/switch.js

@@ -1,30 +1,38 @@
 import './switch.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, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
+function getSwitchColorStyle(color) {
+	const customColor = getComponentCustomColor(color);
+	if (!customColor) return void 0;
+	return { "--_rp-switch-custom-color": customColor };
+}
 function useSwitch(props, emitUpdate) {
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-switch", {
 		checked: props.modelValue,
 		disabled: control.disabled,
 		invalid: control.invalid,
-		[`color-${props.color}`]: Boolean(props.color),
+		[`color-${props.color}`]: isComponentPresetColor(props.color),
 		[`size-${props.size}`]: Boolean(props.size)
 	}));
+	const rootStyle = computed(() => getSwitchColorStyle(props.color));
 	function onChange(e) {
 		emitUpdate(e.target.checked);
 	}
 	return {
 		control,
 		rootClass,
+		rootStyle,
 		onChange
 	};
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-aeef0d94 class=rp-switch__label>");
-var t1 = template("<label data-v-aeef0d94><input data-v-aeef0d94 type=checkbox class=rp-switch__native role=switch><span data-v-aeef0d94 class=rp-switch__track><span data-v-aeef0d94 class=rp-switch__thumb></span></span>", 1);
+var t0 = template("<span data-v-e9d95947 class=rp-switch__label>");
+var t1 = template("<label data-v-e9d95947><input data-v-e9d95947 type=checkbox class=rp-switch__native role=switch><span data-v-e9d95947 class=rp-switch__track><span data-v-e9d95947 class=rp-switch__thumb></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -56,7 +64,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	setup(__props, { emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, onChange } = useSwitch(props, (value) => {
+		const { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {
 			emit("update:modelValue", value);
 		});
 		const n5 = t1();
@@ -68,6 +76,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			const _control_disabled = _control.disabled;
 			const _control_required = _control.required;
 			setClass(n5, unref(rootClass));
+			setStyle(n5, unref(rootStyle));
 			setAttr(n5, "data-disabled", _control_disabled || void 0);
 			setAttr(n5, "data-state", _modelValue ? "checked" : "unchecked");
 			setProp(n0, "id", _control.id);
@@ -91,7 +100,7 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		});
 		return n5;
 	}
-}), [["__scopeId", "data-v-aeef0d94"]]);
+}), [["__scopeId", "data-v-e9d95947"]]);
 //#endregion
 export { switch_default as t };
 

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/components/switch/useSwitch.ts","../src/components/switch/switch.vue","../src/components/switch/switch.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { SwitchProps } from './types';\n\nexport function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-switch', {\n            checked: props.modelValue,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [`color-${props.color}`]: Boolean(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\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=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAgB,UAAU,OAA8B,YAAsC;CAC1F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK;GAC5C,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;CAC9C,CAAC,CACL;CAEA,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECWA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,aAAa,UAAU,QAAQ,UAAU;GACjE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;SA7BY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;gBAnBb,MAAA,SAAA,CAAS;eAChB,iBAAe,qBAAoB,KAAA,CAAS;eAC5C,cAAY,cAAU,YAAA,WAAA;eAGlB,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAIV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,gBAAc,WAAU;eACxB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAMrC,OAAM,eAAA"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/components/switch/useSwitch.ts","../src/components/switch/switch.vue","../src/components/switch/switch.vue"],"sourcesContent":["import { computed, type CSSProperties } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { SwitchProps } from './types';\n\nfunction getSwitchColorStyle(color: SwitchProps['color']) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-switch-custom-color': customColor,\n    } satisfies CSSProperties;\n}\n\nexport function useSwitch(props: Readonly<SwitchProps>, emitUpdate: (value: boolean) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-switch', {\n            checked: props.modelValue,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            [`color-${props.color}`]: isComponentPresetColor(props.color),\n            [`size-${props.size}`]: Boolean(props.size),\n        }),\n    );\n\n    const rootStyle = computed(() => getSwitchColorStyle(props.color));\n\n    function onChange(e: Event) {\n        emitUpdate((e.target as HTMLInputElement).checked);\n    }\n\n    return {\n        control,\n        rootClass,\n        rootStyle,\n        onChange,\n    };\n}\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <label\n        :class=\"rootClass\"\n        :style=\"rootStyle\"\n        :data-disabled=\"control.disabled || undefined\"\n        :data-state=\"modelValue ? 'checked' : 'unchecked'\"\n    >\n        <input\n            :id=\"control.id\"\n            :name=\"name\"\n            type=\"checkbox\"\n            class=\"rp-switch__native\"\n            role=\"switch\"\n            :checked=\"modelValue\"\n            :disabled=\"control.disabled || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-checked=\"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-switch__track\">\n            <span class=\"rp-switch__thumb\" />\n        </span>\n        <span v-if=\"$slots.default\" class=\"rp-switch__label\">\n            <slot />\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useSwitch } from './useSwitch';\nimport type { SwitchProps } from './types';\n\ndefineOptions({ name: 'RpSwitch' });\n\nconst props = withDefaults(defineProps<SwitchProps>(), {\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: boolean];\n}>();\n\nconst { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./switch.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;;AAMA,SAAS,oBAAoB,OAA6B;CACtD,MAAM,cAAc,wBAAwB,KAAK;CACjD,IAAI,CAAC,aAAa,OAAO,KAAA;CAEzB,OAAO,EACH,6BAA6B,YACjC;AACJ;AAEA,SAAgB,UAAU,OAA8B,YAAsC;CAC1F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;GAChB,SAAS,MAAM,UAAU,uBAAuB,MAAM,KAAK;GAC3D,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;CAC9C,CAAC,CACL;CAEA,MAAM,YAAY,eAAe,oBAAoB,MAAM,KAAK,CAAC;CAEjE,SAAS,SAAS,GAAU;EACxB,WAAY,EAAE,OAA4B,OAAO;CACrD;CAEA,OAAO;EACH;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECDA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,WAAW,aAAa,UAAU,QAAQ,UAAU;GAC5E,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;SA7BY,WAAM,MAAE,MAAA,QAAA,CAAQ,CAAA,CAAA,CAAA;;;;;;gBApBb,MAAA,SAAA,CAAS;gBACT,MAAA,SAAA,CAAS;eAChB,iBAAe,qBAAoB,KAAA,CAAS;eAC5C,cAAY,cAAU,YAAA,WAAA;eAGlB,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;eAIV,WAAS,WAAU;eACnB,YAAU,qBAAoB,KAAA,CAAS;eACvC,YAAU,qBAAoB,KAAA,CAAS;eACvC,gBAAc,WAAU;eACxB,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS;;;iBAMrC,OAAM,eAAA"}

package/dist/textarea.css

@@ -1,11 +1,11 @@
-.rp-textarea[data-v-2c68871d] {
+.rp-textarea[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-3);
   --_rp-textarea-padding-x: var(--rp-spacing-3);
   --_rp-textarea-font-size: var(--rp-font-size-base);
   --_rp-textarea-radius: var(--rp-radius-sm);
   --_rp-textarea-valid-border: var(--rp-color-success-border-hover);
   --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
-  --_rp-textarea-invalid-border: var(--rp-color-danger-border-hover);
+  --_rp-textarea-invalid-border: var(--rp-color-danger);
   --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   box-sizing: border-box;
@@ -16,101 +16,108 @@
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-textarea[data-v-2c68871d]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-6c62dc31]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-textarea[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-6c62dc31]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--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-textarea[data-v-2c68871d] {
-  padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
+.rp-textarea[data-v-6c62dc31] {
   font-size: var(--_rp-textarea-font-size);
   border-radius: var(--_rp-textarea-radius);
 }
-.rp-textarea--size-xs[data-v-2c68871d] {
+.rp-textarea--size-xs[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-1);
   --_rp-textarea-padding-x: var(--rp-spacing-1);
   --_rp-textarea-font-size: var(--rp-font-size-xs);
 }
-.rp-textarea--size-sm[data-v-2c68871d] {
+.rp-textarea--size-sm[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-2);
   --_rp-textarea-padding-x: var(--rp-spacing-2);
   --_rp-textarea-font-size: var(--rp-font-size-sm);
 }
-.rp-textarea--size-md[data-v-2c68871d] {
+.rp-textarea--size-md[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-3);
   --_rp-textarea-padding-x: var(--rp-spacing-3);
   --_rp-textarea-font-size: var(--rp-font-size-base);
 }
-.rp-textarea--size-lg[data-v-2c68871d] {
+.rp-textarea--size-lg[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-4);
   --_rp-textarea-padding-x: var(--rp-spacing-4);
   --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
-.rp-textarea--size-xl[data-v-2c68871d] {
+.rp-textarea--size-xl[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-5);
   --_rp-textarea-padding-x: var(--rp-spacing-5);
   --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
-.rp-textarea--radius-xs[data-v-2c68871d] {
-  --_rp-textarea-radius: var(--rp-radius-sm);
+.rp-textarea--radius-xs[data-v-6c62dc31] {
+  --_rp-textarea-radius: var(--rp-radius-xs);
 }
-.rp-textarea--radius-sm[data-v-2c68871d] {
+.rp-textarea--radius-sm[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-sm);
 }
-.rp-textarea--radius-md[data-v-2c68871d] {
+.rp-textarea--radius-md[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-md);
 }
-.rp-textarea--radius-lg[data-v-2c68871d] {
+.rp-textarea--radius-lg[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-lg);
 }
-.rp-textarea--radius-xl[data-v-2c68871d] {
+.rp-textarea--radius-xl[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-2c68871d] {
+html.dark .rp-textarea[data-v-6c62dc31] {
   --_rp-textarea-valid-border: var(--rp-color-success-fg);
   --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
   --_rp-textarea-invalid-border: var(--rp-color-danger-fg);
   --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
 }
-.rp-textarea--disabled[data-v-2c68871d] {
+.rp-textarea--disabled[data-v-6c62dc31] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-textarea--valid[data-v-2c68871d] {
+.rp-textarea--valid[data-v-6c62dc31] {
   border-color: var(--_rp-textarea-valid-border);
 }
-.rp-textarea--valid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--valid[data-v-6c62dc31]:focus-within:not(.rp-textarea--disabled) {
   border-color: var(--_rp-textarea-valid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-valid-ring);
 }
-.rp-textarea--invalid[data-v-2c68871d] {
+.rp-textarea--invalid[data-v-6c62dc31] {
   border-color: var(--_rp-textarea-invalid-border);
 }
-.rp-textarea--invalid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--invalid[data-v-6c62dc31]:focus-within:not(.rp-textarea--disabled) {
   border-color: var(--_rp-textarea-invalid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-invalid-ring);
 }
-.rp-textarea--readonly[data-v-2c68871d] {
+.rp-textarea--readonly[data-v-6c62dc31] {
   background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-textarea__native[data-v-2c68871d] {
+.rp-textarea--resize-vertical .rp-textarea__native[data-v-6c62dc31] {
+  resize: vertical;
+}
+.rp-textarea--resize-both .rp-textarea__native[data-v-6c62dc31] {
+  resize: both;
+}
+.rp-textarea__native[data-v-6c62dc31] {
   box-sizing: border-box;
   flex: 1;
   width: 100%;
   min-width: 0;
-  padding: 0;
+  min-height: calc(1lh + var(--_rp-textarea-padding-y) + var(--_rp-textarea-padding-y));
+  padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
   border: none;
   outline: none;
+  resize: none;
   background: transparent;
   font: inherit;
   color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-relaxed);
 }
-.rp-textarea__native[data-v-2c68871d]::placeholder {
+.rp-textarea__native[data-v-6c62dc31]::placeholder {
   color: var(--rp-color-control-placeholder);
 }
-.rp-textarea__native[data-v-2c68871d]:disabled {
+.rp-textarea__native[data-v-6c62dc31]:disabled {
   cursor: not-allowed;
 }

package/dist/textarea.js

@@ -1,48 +1,130 @@
 import './textarea.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, createInvoker, createTemplateRefSetter, defineVaporComponent, delegateEvents, nextTick, onMounted, ref, renderEffect, setAttr, setClass, setProp, setValue, template, unref, watch } from "vue";
 //#region src/components/textarea/useTextarea.ts
+var MIN_ROWS = 1;
+var INTERACTIVE_SELECTOR = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	`textarea:not(.rp-textarea__native)`,
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
 function isInteractiveElement(target) {
-	return Boolean(target.closest([
-		"button",
-		"a[href]",
-		"input",
-		"select",
-		"textarea:not(.rp-textarea__native)",
-		"[contenteditable=\"true\"]",
-		"[tabindex]:not([tabindex=\"-1\"])"
-	].join(",")));
+	return Boolean(target.closest(INTERACTIVE_SELECTOR));
+}
+function normalizeRows(value, fallback) {
+	if (value === void 0 || !Number.isFinite(value)) return fallback;
+	return Math.max(MIN_ROWS, Math.floor(value));
+}
+function getPixelValue(value) {
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+function getLineHeight(styles) {
+	const lineHeight = getPixelValue(styles.lineHeight);
+	if (lineHeight > 0) return lineHeight;
+	const fontSize = getPixelValue(styles.fontSize);
+	return fontSize > 0 ? fontSize * 1.2 : 0;
+}
+function getTextareaMetrics(textarea) {
+	const styles = getComputedStyle(textarea);
+	return {
+		lineHeight: getLineHeight(styles),
+		paddingHeight: getPixelValue(styles.paddingTop) + getPixelValue(styles.paddingBottom),
+		borderHeight: getPixelValue(styles.borderTopWidth) + getPixelValue(styles.borderBottomWidth)
+	};
+}
+function getRowsHeight(metrics, rows) {
+	return rows * metrics.lineHeight + metrics.paddingHeight + metrics.borderHeight;
+}
+function getAutosizeMeasurement(textarea, rows) {
+	const metrics = getTextareaMetrics(textarea);
+	const maxHeight = rows.maxRows === void 0 ? void 0 : getRowsHeight(metrics, rows.maxRows);
+	return {
+		contentHeight: textarea.scrollHeight + metrics.borderHeight,
+		minHeight: getRowsHeight(metrics, rows.minRows),
+		maxHeight
+	};
+}
+function resetTextareaHeight(textarea) {
+	textarea.style.height = "";
+	textarea.style.overflowY = "";
 }
 function useTextarea(props, emitUpdate) {
+	const textareaRef = ref(null);
 	const control = useControlState(props);
+	const autosizeRows = computed(() => {
+		const minRows = normalizeRows(props.minRows, normalizeRows(props.rows, MIN_ROWS)) ?? MIN_ROWS;
+		const maxRows = normalizeRows(props.maxRows);
+		return {
+			minRows,
+			maxRows: maxRows === void 0 ? void 0 : Math.max(minRows, maxRows)
+		};
+	});
+	const nativeRows = computed(() => props.autosize ? autosizeRows.value.minRows : props.rows);
 	const rootClass = computed(() => bem("rp-textarea", {
 		[`size-${props.size}`]: Boolean(props.size),
 		[`radius-${props.radius}`]: Boolean(props.radius),
+		[`resize-${props.resize}`]: props.resize !== void 0 && props.resize !== "none",
+		autosize: props.autosize,
 		disabled: control.disabled,
 		invalid: control.invalid,
 		valid: control.valid && !control.invalid,
 		readonly: props.readonly
 	}));
+	const autosizeWatchSource = computed(() => [
+		props.modelValue,
+		props.autosize,
+		props.minRows,
+		props.maxRows,
+		props.rows,
+		props.size
+	]);
+	function syncTextareaHeight() {
+		const textarea = textareaRef.value;
+		if (!textarea) return;
+		if (!props.autosize) {
+			resetTextareaHeight(textarea);
+			return;
+		}
+		textarea.style.height = "auto";
+		const { contentHeight, minHeight, maxHeight } = getAutosizeMeasurement(textarea, autosizeRows.value);
+		const heightLimit = maxHeight ?? Number.POSITIVE_INFINITY;
+		const nextHeight = Math.min(Math.max(contentHeight, minHeight), heightLimit);
+		textarea.style.height = `${nextHeight}px`;
+		textarea.style.overflowY = maxHeight !== void 0 && contentHeight > maxHeight ? "auto" : "hidden";
+	}
+	function scheduleTextareaHeightSync() {
+		nextTick(syncTextareaHeight);
+	}
 	function onInput(e) {
 		emitUpdate(e.target.value);
+		syncTextareaHeight();
 	}
 	function focusTextarea(e) {
 		if (control.disabled) return;
 		const target = e.target;
 		if (target instanceof Element && isInteractiveElement(target)) return;
-		e.currentTarget.querySelector(".rp-textarea__native")?.focus();
+		textareaRef.value?.focus();
 	}
+	onMounted(scheduleTextareaHeightSync);
+	watch(autosizeWatchSource, scheduleTextareaHeightSync);
 	return {
+		textareaRef,
 		control,
 		rootClass,
+		nativeRows,
 		onInput,
 		focusTextarea
 	};
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-2c68871d><textarea data-v-2c68871d class=rp-textarea__native>", 1);
+var t0 = template("<div data-v-6c62dc31><textarea data-v-6c62dc31 class=rp-textarea__native>", 1);
 delegateEvents("input", "mousedown");
 //#endregion
 //#region src/components/textarea/textarea.vue
@@ -55,6 +137,13 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		modelValue: {},
 		size: {},
 		radius: {},
+		resize: { default: "none" },
+		autosize: {
+			type: Boolean,
+			default: false
+		},
+		minRows: { default: void 0 },
+		maxRows: { default: void 0 },
 		placeholder: { default: "" },
 		rows: { default: 3 },
 		disabled: {
@@ -85,12 +174,14 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {
+		const { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const _setTemplateRef = createTemplateRefSetter();
 		const n1 = t0();
 		const n0 = child(n1);
 		n0.$evtinput = createInvoker((e) => unref(onInput)(e));
+		_setTemplateRef(n0, textareaRef, null, "textareaRef");
 		n1.$evtmousedown = createInvoker((e) => unref(focusTextarea)(e));
 		renderEffect(() => {
 			const _control = unref(control);
@@ -100,7 +191,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			setProp(n0, "name", __props.name);
 			setValue(n0, __props.modelValue);
 			setProp(n0, "placeholder", __props.placeholder);
-			setProp(n0, "rows", __props.rows);
+			setProp(n0, "rows", unref(nativeRows));
 			setProp(n0, "disabled", _control.disabled || void 0);
 			setProp(n0, "readonly", __props.readonly || void 0);
 			setProp(n0, "required", _control_required || void 0);
@@ -112,7 +203,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-2c68871d"]]);
+}), [["__scopeId", "data-v-6c62dc31"]]);
 //#endregion
 export { textarea_default as t };