ropav 0.0.5 → 0.0.7

package/dist/switch.css

@@ -1,33 +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);
-  --_switch-invalid-border: var(--rp-color-danger);
-  --_switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+.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;
 }
-html.dark .rp-switch[data-v-aeef0d94] {
-  --_switch-invalid-border: var(--rp-color-danger-fg);
-  --_switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+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-aeef0d94] {
+.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;
@@ -39,96 +39,96 @@ html.dark .rp-switch[data-v-aeef0d94] {
   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-aeef0d94] {
-  outline: var(--rp-border-width-thin) solid var(--_switch-invalid-border);
-  outline-offset: var(--_thumb-offset);
+.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__native:focus-visible + .rp-switch__track[data-v-aeef0d94] {
-  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_switch-invalid-ring);
+.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,39 @@
 import './switch.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.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 +65,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 +77,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 +101,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/tabs.css

@@ -0,0 +1,279 @@
+.rp-tabs[data-v-32e41419] {
+  box-sizing: border-box;
+  display: grid;
+  min-width: 0;
+  gap: var(--rp-spacing-4);
+  font-family: var(--rp-font-family);
+  color: var(--rp-color-text);
+}
+.rp-tabs--disabled[data-v-32e41419] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-tabs--vertical[data-v-32e41419] {
+  display: flex;
+  align-items: start;
+  gap: var(--rp-spacing-5);
+}.rp-tabs-content[data-v-3ff419c3] {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--rp-color-text);
+  font-family: var(--rp-font-family);
+  font-size: var(--rp-font-size-base);
+  line-height: var(--rp-line-height-normal);
+}
+.rp-tabs-content[data-v-3ff419c3]:focus-visible {
+  outline: none;
+  border-color: var(--rp-color-primary);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-tabs-content--vertical[data-v-3ff419c3] {
+  flex: 1 1 0;
+}.rp-tabs-list[data-v-7f168d05] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  gap: 0;
+  font-family: var(--rp-font-family);
+  background-color: transparent;
+  border: 0;
+}
+.rp-tabs-list--vertical[data-v-7f168d05] {
+  flex-direction: column;
+  width: max-content;
+}
+.rp-tabs-list--line[data-v-7f168d05] {
+  border-bottom: var(--rp-border-width-medium) solid var(--rp-color-border);
+}
+.rp-tabs-list--line.rp-tabs-list--vertical[data-v-7f168d05] {
+  border-bottom: 0;
+  border-left: var(--rp-border-width-medium) solid var(--rp-color-border);
+}
+.rp-tabs-list--line.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-7f168d05] {
+  border-right: var(--rp-border-width-medium) solid var(--rp-color-border);
+  border-left: 0;
+}
+.rp-tabs-list--pills[data-v-7f168d05], .rp-tabs-list--outline[data-v-7f168d05] {
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.rp-tabs-list--pills[data-v-7f168d05] {
+  gap: var(--rp-spacing-2);
+}
+.rp-tabs-list--outline[data-v-7f168d05] {
+  position: relative;
+}
+.rp-tabs-list--outline[data-v-7f168d05]::after {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--rp-border-width-thin);
+  content: "";
+  background-color: var(--rp-color-border);
+  pointer-events: none;
+}
+.rp-tabs-list--outline.rp-tabs-list--vertical[data-v-7f168d05]::after {
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: 0;
+  width: var(--rp-border-width-thin);
+  height: auto;
+}
+.rp-tabs-list--outline.rp-tabs-list--vertical.rp-tabs-list--placement-right[data-v-7f168d05]::after {
+  right: 0;
+  left: auto;
+}
+.rp-tabs-list--disabled[data-v-7f168d05] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}.rp-tabs-trigger[data-v-4adec360] {
+  --_rp-tabs-trigger-fg: var(--rp-color-text-secondary);
+  --_rp-tabs-trigger-bg: transparent;
+  --_rp-tabs-trigger-bg-hover: transparent;
+  --_rp-tabs-trigger-border: transparent;
+  --_rp-tabs-trigger-border-hover: transparent;
+  --_rp-tabs-trigger-radius: var(--rp-radius-none);
+  --_rp-tabs-trigger-shadow: none;
+  --_rp-tabs-trigger-outline-bg: var(--rp-color-background);
+  --_rp-tabs-trigger-indicator: transparent;
+  --_rp-tabs-trigger-height: var(--rp-size-control-md);
+  --_rp-tabs-trigger-padding-y: var(--rp-spacing-2);
+  --_rp-tabs-trigger-padding-x: var(--rp-spacing-3);
+  --_rp-tabs-trigger-gap: var(--rp-spacing-2);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-base);
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--_rp-tabs-trigger-height);
+  padding: var(--_rp-tabs-trigger-padding-y) var(--_rp-tabs-trigger-padding-x);
+  gap: var(--_rp-tabs-trigger-gap);
+  color: var(--_rp-tabs-trigger-fg);
+  font-family: var(--rp-font-family);
+  font-size: var(--_rp-tabs-trigger-font-size);
+  font-weight: var(--rp-font-weight-normal);
+  line-height: var(--rp-line-height-tight);
+  text-align: center;
+  background-color: var(--_rp-tabs-trigger-bg);
+  border: 0;
+  border-radius: var(--_rp-tabs-trigger-radius);
+  box-shadow: var(--_rp-tabs-trigger-shadow);
+  transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast), color var(--rp-transition-fast);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.rp-tabs-trigger[data-v-4adec360]::after {
+  position: absolute;
+  right: 0;
+  bottom: calc(-1 * var(--rp-border-width-medium));
+  left: 0;
+  height: var(--rp-border-width-medium);
+  content: "";
+  background-color: var(--_rp-tabs-trigger-indicator);
+  transition: background-color var(--rp-transition-fast);
+}
+.rp-tabs-trigger[data-v-4adec360] svg {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  color: currentColor;
+}
+.rp-tabs-trigger--size-xs[data-v-4adec360] {
+  --_rp-tabs-trigger-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-1));
+  --_rp-tabs-trigger-padding-y: var(--rp-spacing-1);
+  --_rp-tabs-trigger-padding-x: 0.375rem;
+  --_rp-tabs-trigger-gap: var(--rp-spacing-1);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-xs);
+}
+.rp-tabs-trigger--size-sm[data-v-4adec360] {
+  --_rp-tabs-trigger-height: var(--rp-size-control-sm);
+  --_rp-tabs-trigger-padding-y: var(--rp-spacing-1);
+  --_rp-tabs-trigger-padding-x: var(--rp-spacing-2);
+  --_rp-tabs-trigger-gap: var(--rp-spacing-2);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-sm);
+}
+.rp-tabs-trigger--size-md[data-v-4adec360] {
+  --_rp-tabs-trigger-height: var(--rp-size-control-md);
+  --_rp-tabs-trigger-padding-y: var(--rp-spacing-2);
+  --_rp-tabs-trigger-padding-x: var(--rp-spacing-3);
+  --_rp-tabs-trigger-gap: var(--rp-spacing-2);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-base);
+}
+.rp-tabs-trigger--size-lg[data-v-4adec360] {
+  --_rp-tabs-trigger-height: var(--rp-size-control-lg);
+  --_rp-tabs-trigger-padding-y: var(--rp-spacing-3);
+  --_rp-tabs-trigger-padding-x: var(--rp-spacing-4);
+  --_rp-tabs-trigger-gap: var(--rp-spacing-3);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-lg);
+}
+.rp-tabs-trigger--size-xl[data-v-4adec360] {
+  --_rp-tabs-trigger-height: calc(var(--rp-size-control-lg) + var(--rp-spacing-2));
+  --_rp-tabs-trigger-padding-y: var(--rp-spacing-4);
+  --_rp-tabs-trigger-padding-x: var(--rp-spacing-5);
+  --_rp-tabs-trigger-gap: var(--rp-spacing-3);
+  --_rp-tabs-trigger-font-size: var(--rp-font-size-lg);
+}
+.rp-tabs-trigger[data-v-4adec360]:hover:not(:disabled) {
+  --_rp-tabs-trigger-fg: var(--rp-color-text);
+  --_rp-tabs-trigger-bg: var(--_rp-tabs-trigger-bg-hover);
+  --_rp-tabs-trigger-border: var(--_rp-tabs-trigger-border-hover);
+}
+.rp-tabs-trigger[data-v-4adec360]:focus-visible {
+  z-index: 2;
+  outline: none;
+  border-color: var(--rp-color-primary);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-tabs-trigger--active[data-v-4adec360] {
+  --_rp-tabs-trigger-fg: var(--rp-color-text);
+  --_rp-tabs-trigger-indicator: var(--rp-color-primary);
+}
+.rp-tabs-trigger--pills[data-v-4adec360]::after, .rp-tabs-trigger--outline[data-v-4adec360]::after {
+  display: none;
+}
+.rp-tabs-trigger--pills[data-v-4adec360] {
+  --_rp-tabs-trigger-bg-hover: var(--rp-color-surface-hover);
+  --_rp-tabs-trigger-radius: var(--rp-radius-md);
+}
+.rp-tabs-trigger--pills.rp-tabs-trigger--active[data-v-4adec360] {
+  --_rp-tabs-trigger-fg: var(--rp-color-on-primary);
+  --_rp-tabs-trigger-bg: var(--rp-color-primary);
+  --_rp-tabs-trigger-bg-hover: var(--rp-color-primary-hover);
+}
+.rp-tabs-trigger--outline[data-v-4adec360] {
+  --_rp-tabs-trigger-bg-hover: var(--rp-color-surface-hover);
+  --_rp-tabs-trigger-radius: var(--rp-radius-md) var(--rp-radius-md) 0 0;
+  z-index: 1;
+  border: var(--rp-border-width-thin) solid var(--_rp-tabs-trigger-border);
+}
+.rp-tabs-trigger--outline.rp-tabs-trigger--active[data-v-4adec360] {
+  --_rp-tabs-trigger-fg: var(--rp-color-text);
+  --_rp-tabs-trigger-bg: var(--_rp-tabs-trigger-outline-bg);
+  --_rp-tabs-trigger-bg-hover: var(--_rp-tabs-trigger-outline-bg);
+  --_rp-tabs-trigger-border: var(--rp-color-border);
+  --_rp-tabs-trigger-border-hover: var(--rp-color-border);
+  z-index: 1;
+  border-bottom-color: var(--_rp-tabs-trigger-bg);
+}
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical[data-v-4adec360] {
+  --_rp-tabs-trigger-radius: 0 var(--rp-radius-md) var(--rp-radius-md) 0;
+}
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--active[data-v-4adec360] {
+  border-bottom-color: var(--_rp-tabs-trigger-border);
+  border-left-color: var(--_rp-tabs-trigger-bg);
+}
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right[data-v-4adec360] {
+  --_rp-tabs-trigger-radius: var(--rp-radius-md) 0 0 var(--rp-radius-md);
+}
+.rp-tabs-trigger--outline.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right.rp-tabs-trigger--active[data-v-4adec360] {
+  border-right-color: var(--_rp-tabs-trigger-bg);
+  border-left-color: var(--_rp-tabs-trigger-border);
+}
+.rp-tabs-trigger--disabled[data-v-4adec360], .rp-tabs-trigger[data-v-4adec360]:disabled {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-tabs-trigger--vertical[data-v-4adec360] {
+  justify-content: flex-start;
+  width: 100%;
+  text-align: left;
+}
+.rp-tabs-trigger--vertical[data-v-4adec360]::after {
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: calc(-1 * var(--rp-border-width-medium));
+  width: var(--rp-border-width-medium);
+  height: auto;
+}
+.rp-tabs-trigger--vertical.rp-tabs-trigger--placement-right[data-v-4adec360]::after {
+  right: calc(-1 * var(--rp-border-width-medium));
+  left: auto;
+}
+.rp-tabs-trigger--align-left[data-v-4adec360] {
+  justify-content: flex-start;
+  text-align: left;
+}
+.rp-tabs-trigger--align-center[data-v-4adec360] {
+  justify-content: center;
+  text-align: center;
+}
+.rp-tabs-trigger--align-right[data-v-4adec360] {
+  justify-content: flex-end;
+  text-align: right;
+}