ropav 0.0.2

package/dist/select.js

@@ -0,0 +1,362 @@
+import './select.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 { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch } from "vue";
+//#region src/components/_internal/icons/ChevronDownIcon.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=1.5><path d=\"M4 6l4 4 4-4\">", 3, 1);
+//#endregion
+//#region src/components/_internal/icons/ChevronDownIcon.vue
+var ChevronDownIcon_default = /* @__PURE__ */ defineVaporComponent({
+	name: "ChevronDownIcon",
+	__name: "ChevronDownIcon",
+	setup(__props) {
+		return t0$1();
+	}
+});
+//#endregion
+//#region src/components/_internal/optionList.ts
+function hasOptionListValue(value) {
+	return value != null && value !== "";
+}
+function getOptionListDisplayLabel(options, value) {
+	if (!hasOptionListValue(value)) return "";
+	return options?.find((option) => option.value === value)?.label ?? "";
+}
+function getOptionListActiveDescendantId(baseId, focusedIndex) {
+	return focusedIndex < 0 ? void 0 : `${baseId}-option-${focusedIndex}`;
+}
+//#endregion
+//#region src/composables/useClickOutside.ts
+function useClickOutside(target, active, callback) {
+	let isListening = false;
+	let stopWatch;
+	function handler(e) {
+		if (target.value && !target.value.contains(e.target)) callback();
+	}
+	function setListening(value) {
+		if (typeof document === "undefined" || value === isListening) return;
+		isListening = value;
+		if (value) document.addEventListener("click", handler, true);
+		else document.removeEventListener("click", handler, true);
+	}
+	onMounted(() => {
+		stopWatch = watch(active, setListening, { immediate: true });
+	});
+	onBeforeUnmount(() => {
+		stopWatch?.();
+		setListening(false);
+	});
+}
+//#endregion
+//#region src/composables/useListNavigation.ts
+function useListNavigation(options) {
+	const localFocusedIndex = ref(-1);
+	const loop = options.loop ?? true;
+	const enabledIndexes = computed(() => options.items().map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0));
+	function resetFocus() {
+		localFocusedIndex.value = -1;
+	}
+	function setNearest(index, direction) {
+		const indexes = enabledIndexes.value;
+		if (indexes.length === 0) {
+			resetFocus();
+			return;
+		}
+		if (options.items()[index] && !options.items()[index]?.disabled) {
+			localFocusedIndex.value = index;
+			return;
+		}
+		const next = direction === 1 ? indexes.find((i) => i > index) : [...indexes].reverse().find((i) => i < index);
+		if (next !== void 0) localFocusedIndex.value = next;
+		else if (loop) localFocusedIndex.value = direction === 1 ? indexes[0] : indexes[indexes.length - 1];
+	}
+	function focusSelected() {
+		const items = options.items();
+		const selectedIndex = options.isSelected ? items.findIndex((item) => options.isSelected(item) && !item.disabled) : -1;
+		if (selectedIndex >= 0) localFocusedIndex.value = selectedIndex;
+		else focusFirst();
+	}
+	function focusFirst() {
+		const first = enabledIndexes.value[0];
+		localFocusedIndex.value = first ?? -1;
+	}
+	function focusLast() {
+		const indexes = enabledIndexes.value;
+		localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;
+	}
+	function moveFocus(delta) {
+		if (localFocusedIndex.value < 0) {
+			delta === 1 ? focusFirst() : focusLast();
+			return;
+		}
+		setNearest(localFocusedIndex.value + delta, delta);
+	}
+	return {
+		focusedIndex: localFocusedIndex,
+		resetFocus,
+		focusSelected,
+		focusFirst,
+		focusLast,
+		moveFocus
+	};
+}
+//#endregion
+//#region src/components/select/useSelect.ts
+function useSelect(props, emitUpdate) {
+	const selectRef = ref(null);
+	const triggerRef = ref(null);
+	const isOpen = ref(false);
+	const selectId = useId();
+	const listboxId = `${selectId}-listbox`;
+	const control = useControlState(props);
+	const visibleOptions = computed(() => props.options ?? []);
+	const navigation = useListNavigation({
+		items: () => visibleOptions.value,
+		isSelected: (item) => item.value === props.modelValue
+	});
+	const focusedIndex = navigation.focusedIndex;
+	const activeDescendantId = computed(() => getOptionListActiveDescendantId(selectId, focusedIndex.value));
+	const rootClass = computed(() => bem("rp-select", {
+		open: isOpen.value,
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	const hasValue = computed(() => hasOptionListValue(props.modelValue));
+	const displayLabel = computed(() => getOptionListDisplayLabel(props.options, props.modelValue));
+	function focusTrigger() {
+		nextTick(() => triggerRef.value?.focus());
+	}
+	function open() {
+		if (control.disabled || isOpen.value) return;
+		isOpen.value = true;
+		navigation.focusSelected();
+	}
+	function close() {
+		isOpen.value = false;
+		navigation.resetFocus();
+	}
+	function toggle() {
+		if (control.disabled) return;
+		if (isOpen.value) {
+			close();
+			focusTrigger();
+		} else open();
+	}
+	function selectOption(option) {
+		if (option.disabled) return;
+		emitUpdate(option.value);
+		close();
+		focusTrigger();
+	}
+	function onOptionMouseenter(option, index) {
+		if (!option.disabled) focusedIndex.value = index;
+	}
+	function selectFocusedOption() {
+		if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;
+		selectOption(visibleOptions.value[focusedIndex.value]);
+	}
+	function onTriggerKeydown(e) {
+		if (control.disabled) return;
+		switch (e.key) {
+			case "Enter":
+				e.preventDefault();
+				if (!isOpen.value) open();
+				else selectFocusedOption();
+				break;
+			case " ":
+				e.preventDefault();
+				if (!isOpen.value) open();
+				else selectFocusedOption();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				if (!isOpen.value) open();
+				else navigation.moveFocus(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (!isOpen.value) {
+					open();
+					navigation.focusLast();
+				} else navigation.moveFocus(-1);
+				break;
+			case "Home":
+				if (isOpen.value) {
+					e.preventDefault();
+					navigation.focusFirst();
+				}
+				break;
+			case "End":
+				if (isOpen.value) {
+					e.preventDefault();
+					navigation.focusLast();
+				}
+				break;
+			case "Escape":
+				e.preventDefault();
+				close();
+				focusTrigger();
+				break;
+		}
+	}
+	useClickOutside(selectRef, isOpen, close);
+	return {
+		selectRef,
+		triggerRef,
+		isOpen,
+		selectId,
+		listboxId,
+		control,
+		visibleOptions,
+		focusedIndex,
+		activeDescendantId,
+		rootClass,
+		hasValue,
+		displayLabel,
+		toggle,
+		selectOption,
+		onOptionMouseenter,
+		onTriggerKeydown
+	};
+}
+//#endregion
+//#region src/components/select/select.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<input data-v-692ef421 type=hidden>");
+var t1 = template("No options", 2);
+var t2 = template("<div data-v-692ef421 class=rp-select__empty>");
+var t3 = template("<div data-v-692ef421 role=option> ");
+var t4 = template("<div data-v-692ef421 class=rp-select__dropdown role=listbox>");
+var t5 = template("<div data-v-692ef421><div data-v-692ef421 class=rp-select__trigger role=combobox aria-haspopup=listbox><span data-v-692ef421> </span><span data-v-692ef421>", 1);
+delegateEvents("click", "keydown");
+//#endregion
+//#region src/components/select/select.vue
+var select_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpSelect",
+	__name: "select",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		options: { default: () => [] },
+		placeholder: { default: "Select..." },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { selectRef, triggerRef, isOpen, selectId, listboxId, control, visibleOptions, focusedIndex, activeDescendantId, rootClass, hasValue, displayLabel, toggle, selectOption, onOptionMouseenter, onTriggerKeydown } = useSelect(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		const _setTemplateRef = createTemplateRefSetter();
+		const n20 = t5();
+		const n6 = child(n20, 1);
+		const n3 = child(n6);
+		const n5 = next(n3, 1);
+		renderEffect(() => setClass(n20, unref(rootClass)));
+		setInsertionState(n20, 0, 0);
+		createIf(() => __props.name, () => {
+			const n2 = t0();
+			renderEffect(() => {
+				setProp(n2, "name", __props.name);
+				setValue(n2, __props.modelValue ?? "");
+				setProp(n2, "disabled", unref(control).disabled || void 0);
+			});
+			return n2;
+		});
+		const x3 = txt(n3);
+		renderEffect(() => {
+			const _control = unref(control);
+			const _isOpen = unref(isOpen);
+			const _control_disabled = _control.disabled;
+			setProp(n6, "id", _control.id);
+			setAttr(n6, "aria-expanded", _isOpen);
+			setAttr(n6, "aria-activedescendant", unref(activeDescendantId));
+			setAttr(n6, "aria-controls", unref(listboxId));
+			setAttr(n6, "aria-disabled", _control_disabled || void 0);
+			setAttr(n6, "aria-invalid", _control.invalid || void 0);
+			setAttr(n6, "aria-required", _control.required || void 0);
+			setAttr(n6, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n6, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n6, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n6, "data-state", _isOpen ? "open" : "closed");
+			setAttr(n6, "data-disabled", _control_disabled || void 0);
+			setProp(n6, "tabindex", _control_disabled ? -1 : 0);
+			setClassName(n3, !unref(hasValue) ? 1 : 0, " rp-select__placeholder", "rp-select__value");
+			setText(x3, toDisplayString(unref(displayLabel) || __props.placeholder));
+			setClassName(n5, _isOpen ? 1 : 0, " rp-select__arrow--open", "rp-select__arrow");
+		});
+		setInsertionState(n5, null, 0);
+		createComponent(unref(ChevronDownIcon_default));
+		n6.$evtclick = createInvoker((e) => unref(toggle)(e));
+		n6.$evtkeydown = createInvoker((e) => unref(onTriggerKeydown)(e));
+		_setTemplateRef(n6, triggerRef, null, "triggerRef");
+		setInsertionState(n20, null, 2);
+		createComponent(VaporTransition, { name: "rp-select-dropdown" }, extend(() => {
+			return createIf(() => unref(isOpen), () => {
+				const n18 = t4();
+				renderEffect(() => setProp(n18, "id", unref(listboxId)));
+				setInsertionState(n18, null, 0);
+				createIf(() => unref(visibleOptions).length === 0, () => {
+					const n14 = t2();
+					setInsertionState(n14, null, 0);
+					createSlot("empty", null, () => {
+						return t1();
+					}, 1);
+					return n14;
+				});
+				setInsertionState(n18, null, 1);
+				const _selector15 = createSelector(() => __props.modelValue);
+				createFor(() => unref(visibleOptions), (_for_item0, _for_key0) => {
+					const n17 = t3();
+					const x17 = txt(n17);
+					n17.$evtclick = createInvoker(() => unref(selectOption)(_for_item0.value));
+					on(n17, "mouseenter", () => unref(onOptionMouseenter)(_for_item0.value, _for_key0.value));
+					let _index, _option, _modelValue, _option_disabled, _option_value;
+					renderEffect(() => {
+						_index = _for_key0.value;
+						_option = _for_item0.value;
+						_modelValue = __props.modelValue;
+						_option_disabled = _option.disabled;
+						_option_value = _option.value;
+						setProp(n17, "id", `${unref(selectId)}-option-${_index}`);
+						setAttr(n17, "aria-disabled", _option_disabled || void 0);
+						setAttr(n17, "data-selected", _option_value === _modelValue || void 0);
+						setAttr(n17, "data-disabled", _option_disabled || void 0);
+						setClass(n17, ["rp-select__option", {
+							"rp-select__option--selected": _option_value === _modelValue,
+							"rp-select__option--focused": _index === unref(focusedIndex),
+							"rp-select__option--disabled": _option_disabled
+						}]);
+						setText(x17, toDisplayString(_option.label));
+					});
+					_selector15(_option.value, () => {
+						setAttr(n17, "aria-selected", _option.value === _modelValue);
+					});
+					return n17;
+				}, (option, index) => option.value, 8).onReset(_selector15.reset);
+				return n18;
+			}, null, 129);
+		}, { _: 8 }));
+		_setTemplateRef(n20, selectRef, null, "selectRef");
+		return n20;
+	}
+}), [["__scopeId", "data-v-692ef421"]]);
+//#endregion
+export { select_default as t };
+
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../src/components/_internal/icons/ChevronDownIcon.vue","../src/components/_internal/icons/ChevronDownIcon.vue","../src/components/_internal/optionList.ts","../src/composables/useClickOutside.ts","../src/composables/useListNavigation.ts","../src/components/select/useSelect.ts","../src/components/select/select.vue","../src/components/select/select.vue"],"sourcesContent":["<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n        <path d=\"M4 6l4 4 4-4\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'ChevronDownIcon' });\n</script>\n","<template>\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n        <path d=\"M4 6l4 4 4-4\" />\n    </svg>\n</template>\n\n<script lang=\"ts\" setup vapor>\ndefineOptions({ name: 'ChevronDownIcon' });\n</script>\n","export interface OptionListItem {\n    label: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\nexport type OptionListValue = string | number | null;\n\nexport function hasOptionListValue(value: OptionListValue) {\n    return value != null && value !== '';\n}\n\nexport function getOptionListDisplayLabel<T extends OptionListItem>(\n    options: T[] | undefined,\n    value: OptionListValue,\n) {\n    if (!hasOptionListValue(value)) return '';\n    return options?.find((option) => option.value === value)?.label ?? '';\n}\n\nexport function getOptionListActiveDescendantId(baseId: string, focusedIndex: number) {\n    return focusedIndex < 0 ? undefined : `${baseId}-option-${focusedIndex}`;\n}\n","import { watch, onMounted, onBeforeUnmount, type Ref } from 'vue';\n\nexport function useClickOutside(\n    target: Ref<HTMLElement | null>,\n    active: Ref<boolean>,\n    callback: () => void,\n) {\n    let isListening = false;\n    let stopWatch: (() => void) | undefined;\n\n    function handler(e: MouseEvent) {\n        if (target.value && !target.value.contains(e.target as Node)) {\n            callback();\n        }\n    }\n\n    function setListening(value: boolean) {\n        if (typeof document === 'undefined' || value === isListening) return;\n        isListening = value;\n\n        if (value) {\n            document.addEventListener('click', handler, true);\n        } else {\n            document.removeEventListener('click', handler, true);\n        }\n    }\n\n    onMounted(() => {\n        stopWatch = watch(active, setListening, { immediate: true });\n    });\n\n    onBeforeUnmount(() => {\n        stopWatch?.();\n        setListening(false);\n    });\n}\n","import { computed, ref } from 'vue';\n\nexport interface ListNavigationItem {\n    disabled?: boolean;\n}\n\nexport interface UseListNavigationOptions<T extends ListNavigationItem> {\n    items: () => T[];\n    isSelected?: (item: T) => boolean;\n    loop?: boolean;\n}\n\nexport function useListNavigation<T extends ListNavigationItem>(\n    options: UseListNavigationOptions<T>,\n) {\n    const localFocusedIndex = ref(-1);\n    const loop = options.loop ?? true;\n\n    const enabledIndexes = computed(() =>\n        options.items()\n            .map((item, index) => item.disabled ? -1 : index)\n            .filter((index) => index >= 0),\n    );\n\n    function resetFocus() {\n        localFocusedIndex.value = -1;\n    }\n\n    function setNearest(index: number, direction: 1 | -1) {\n        const indexes = enabledIndexes.value;\n        if (indexes.length === 0) {\n            resetFocus();\n            return;\n        }\n\n        if (options.items()[index] && !options.items()[index]?.disabled) {\n            localFocusedIndex.value = index;\n            return;\n        }\n\n        const next = direction === 1\n            ? indexes.find((i) => i > index)\n            : [...indexes].reverse().find((i) => i < index);\n\n        if (next !== undefined) {\n            localFocusedIndex.value = next;\n        } else if (loop) {\n            localFocusedIndex.value = direction === 1 ? indexes[0]! : indexes[indexes.length - 1]!;\n        }\n    }\n\n    function focusSelected() {\n        const items = options.items();\n        const selectedIndex = options.isSelected\n            ? items.findIndex((item) => options.isSelected!(item) && !item.disabled)\n            : -1;\n        if (selectedIndex >= 0) {\n            localFocusedIndex.value = selectedIndex;\n        } else {\n            focusFirst();\n        }\n    }\n\n    function focusFirst() {\n        const first = enabledIndexes.value[0];\n        localFocusedIndex.value = first ?? -1;\n    }\n\n    function focusLast() {\n        const indexes = enabledIndexes.value;\n        localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;\n    }\n\n    function moveFocus(delta: 1 | -1) {\n        if (localFocusedIndex.value < 0) {\n            delta === 1 ? focusFirst() : focusLast();\n            return;\n        }\n        setNearest(localFocusedIndex.value + delta, delta);\n    }\n\n    return {\n        focusedIndex: localFocusedIndex,\n        resetFocus,\n        focusSelected,\n        focusFirst,\n        focusLast,\n        moveFocus,\n    };\n}\n","import { computed, nextTick, ref, useId } from 'vue';\nimport {\n    getOptionListActiveDescendantId,\n    getOptionListDisplayLabel,\n    hasOptionListValue,\n} from '@/components/_internal/optionList';\nimport { useClickOutside } from '@/composables/useClickOutside';\nimport { useControlState } from '@/composables/useControlState';\nimport { useListNavigation } from '@/composables/useListNavigation';\nimport { bem } from '@/utils/bem';\nimport type { SelectOption, SelectProps } from './types';\n\ntype SelectValue = string | number | null;\n\nexport function useSelect(\n    props: Readonly<SelectProps>,\n    emitUpdate: (value: SelectValue) => void,\n) {\n    const selectRef = ref<HTMLElement | null>(null);\n    const triggerRef = ref<HTMLElement | null>(null);\n    const isOpen = ref(false);\n\n    const selectId = useId();\n    const listboxId = `${selectId}-listbox`;\n\n    const control = useControlState(props);\n    const visibleOptions = computed(() => props.options ?? []);\n\n    const navigation = useListNavigation<SelectOption>({\n        items: () => visibleOptions.value,\n        isSelected: (item) => item.value === props.modelValue,\n    });\n\n    const focusedIndex = navigation.focusedIndex;\n    const activeDescendantId = computed(() =>\n        getOptionListActiveDescendantId(selectId, focusedIndex.value),\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-select', {\n            open: isOpen.value,\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const hasValue = computed(() => hasOptionListValue(props.modelValue));\n    const displayLabel = computed(() => getOptionListDisplayLabel(props.options, props.modelValue));\n\n    function focusTrigger() {\n        nextTick(() => triggerRef.value?.focus());\n    }\n\n    function open() {\n        if (control.disabled || isOpen.value) return;\n        isOpen.value = true;\n        navigation.focusSelected();\n    }\n\n    function close() {\n        isOpen.value = false;\n        navigation.resetFocus();\n    }\n\n    function toggle() {\n        if (control.disabled) return;\n        if (isOpen.value) {\n            close();\n            focusTrigger();\n        } else {\n            open();\n        }\n    }\n\n    function selectOption(option: SelectOption) {\n        if (option.disabled) return;\n        emitUpdate(option.value);\n        close();\n        focusTrigger();\n    }\n\n    function onOptionMouseenter(option: SelectOption, index: number) {\n        if (!option.disabled) focusedIndex.value = index;\n    }\n\n    function selectFocusedOption() {\n        if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;\n        selectOption(visibleOptions.value[focusedIndex.value]!);\n    }\n\n    function onTriggerKeydown(e: KeyboardEvent) {\n        if (control.disabled) return;\n\n        switch (e.key) {\n            case 'Enter':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case ' ':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case 'ArrowDown':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else navigation.moveFocus(1);\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                if (!isOpen.value) {\n                    open();\n                    navigation.focusLast();\n                } else {\n                    navigation.moveFocus(-1);\n                }\n                break;\n            case 'Home':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusFirst();\n                }\n                break;\n            case 'End':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusLast();\n                }\n                break;\n            case 'Escape':\n                e.preventDefault();\n                close();\n                focusTrigger();\n                break;\n        }\n    }\n\n    useClickOutside(selectRef, isOpen, close);\n\n    return {\n        selectRef,\n        triggerRef,\n        isOpen,\n        selectId,\n        listboxId,\n        control,\n        visibleOptions,\n        focusedIndex,\n        activeDescendantId,\n        rootClass,\n        hasValue,\n        displayLabel,\n        toggle,\n        selectOption,\n        onOptionMouseenter,\n        onTriggerKeydown,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"modelValue ?? ''\" :disabled=\"control.disabled || undefined\" />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__arrow\" :class=\"{ 'rp-select__arrow--open': isOpen }\">\n                <ChevronDownIcon />\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div\n                    v-if=\"visibleOptions.length === 0\"\n                    class=\"rp-select__empty\"\n                >\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { ChevronDownIcon } from '@/components/_internal/icons';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    toggle,\n    selectOption,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"modelValue ?? ''\" :disabled=\"control.disabled || undefined\" />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__arrow\" :class=\"{ 'rp-select__arrow--open': isOpen }\">\n                <ChevronDownIcon />\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div\n                    v-if=\"visibleOptions.length === 0\"\n                    class=\"rp-select__empty\"\n                >\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { ChevronDownIcon } from '@/components/_internal/icons';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    toggle,\n    selectOption,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/switch.css

@@ -0,0 +1,70 @@
+.rp-switch[data-v-8d0cc56f] {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  font-family: var(--rp-font-family);
+  user-select: none;
+}
+.rp-switch--disabled[data-v-8d0cc56f] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-switch[data-v-8d0cc56f] {
+  gap: var(--rp-spacing-2);
+  font-size: var(--rp-font-size-base);
+  --_track-w: 40px;
+  --_track-h: 22px;
+  --_thumb-size: 18px;
+  --_thumb-offset: 2px;
+}
+.rp-switch__native[data-v-8d0cc56f] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  pointer-events: none;
+}
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-8d0cc56f] {
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-switch__track[data-v-8d0cc56f] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: var(--_track-w);
+  height: var(--_track-h);
+  flex-shrink: 0;
+  background-color: var(--rp-color-control-track-bg);
+  border-radius: var(--rp-radius-full);
+  transition: background-color var(--rp-transition-fast);
+}
+.rp-switch--checked .rp-switch__track[data-v-8d0cc56f] {
+  background-color: var(--rp-color-control-selected-bg);
+}
+.rp-switch--invalid .rp-switch__track[data-v-8d0cc56f] {
+  outline: var(--rp-border-width-thin) solid var(--rp-color-danger-fg);
+  outline-offset: var(--_thumb-offset);
+}
+.rp-switch__thumb[data-v-8d0cc56f] {
+  position: absolute;
+  left: var(--_thumb-offset);
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  background-color: var(--rp-color-control-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-8d0cc56f] {
+  transform: translateX(calc(var(--_track-w) - var(--_thumb-size) - var(--_thumb-offset) * 2));
+}
+.rp-switch__label[data-v-8d0cc56f] {
+  line-height: var(--rp-line-height-normal);
+  color: var(--rp-color-text);
+}

package/dist/switch.js

@@ -0,0 +1,94 @@
+import './switch.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, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref } from "vue";
+//#region src/components/switch/useSwitch.ts
+function useSwitch(props, emitUpdate) {
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-switch", {
+		checked: props.modelValue,
+		disabled: control.disabled,
+		invalid: control.invalid
+	}));
+	function onChange(e) {
+		emitUpdate(e.target.checked);
+	}
+	return {
+		control,
+		rootClass,
+		onChange
+	};
+}
+//#endregion
+//#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-8d0cc56f class=rp-switch__label>");
+var t1 = template("<label data-v-8d0cc56f><input data-v-8d0cc56f type=checkbox class=rp-switch__native role=switch><span data-v-8d0cc56f class=rp-switch__track><span data-v-8d0cc56f 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({
+	name: "RpSwitch",
+	__name: "switch",
+	props: {
+		id: {},
+		name: {},
+		modelValue: { type: Boolean },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const { control, rootClass, onChange } = useSwitch(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		const n5 = t1();
+		const n0 = child(n5);
+		on(n0, "change", (e) => unref(onChange)(e));
+		renderEffect(() => {
+			const _control = unref(control);
+			const _modelValue = __props.modelValue;
+			const _control_disabled = _control.disabled;
+			const _control_required = _control.required;
+			setClass(n5, unref(rootClass));
+			setAttr(n5, "data-disabled", _control_disabled || void 0);
+			setAttr(n5, "data-state", _modelValue ? "checked" : "unchecked");
+			setProp(n0, "id", _control.id);
+			setProp(n0, "name", __props.name);
+			setProp(n0, "checked", _modelValue);
+			setProp(n0, "disabled", _control_disabled || void 0);
+			setProp(n0, "required", _control_required || void 0);
+			setAttr(n0, "aria-checked", _modelValue);
+			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n0, "aria-invalid", _control.invalid || void 0);
+			setAttr(n0, "aria-required", _control_required || void 0);
+		});
+		setInsertionState(n5, null, 2);
+		createIf(() => $slots.default, () => {
+			const n4 = t0();
+			setInsertionState(n4, null, 0);
+			createSlot("default", null, null, 1);
+			return n4;
+		});
+		return n5;
+	}
+}), [["__scopeId", "data-v-8d0cc56f"]]);
+//#endregion
+export { switch_default as t };
+
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +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(\n    props: Readonly<SwitchProps>,\n    emitUpdate: (value: boolean) => void,\n) {\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        }),\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 :class=\"rootClass\" :data-disabled=\"control.disabled || undefined\" :data-state=\"modelValue ? 'checked' : 'unchecked'\">\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 :class=\"rootClass\" :data-disabled=\"control.disabled || undefined\" :data-state=\"modelValue ? 'checked' : 'unchecked'\">\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,UACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,aAAa;EACb,SAAS,MAAM;EACf,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECMA,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;;;;;;gBAhBV,MAAA,SAAA,CAAS;eAAG,iBAAe,qBAAoB,KAAA,CAAS;eAAG,cAAY,cAAU,YAAA,WAAA;eAEvF,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,45 @@
+.rp-tabs[data-v-f9df84ad] {
+  font-family: var(--rp-font-family);
+}.rp-tabs__list[data-v-f020ecc8] {
+  display: flex;
+  border-bottom: var(--rp-border-width-medium) solid var(--rp-color-border);
+  gap: var(--rp-spacing-1);
+}.rp-tabs__trigger[data-v-7fa65d85] {
+  padding: 0;
+  font: inherit;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: var(--rp-font-weight-medium);
+  color: var(--rp-color-text-secondary);
+}
+.rp-tabs__trigger[data-v-7fa65d85]:hover:not(:disabled) {
+  color: var(--rp-color-text);
+}
+.rp-tabs__trigger[data-v-7fa65d85]:focus-visible {
+  outline: none;
+  border-color: var(--rp-color-control-border-focus);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-tabs__trigger[data-v-7fa65d85] {
+  padding: var(--rp-spacing-2) var(--rp-spacing-4);
+  font-size: var(--rp-font-size-sm);
+  position: relative;
+  transition: color var(--rp-transition-fast);
+  margin-bottom: calc(-1 * var(--rp-border-width-medium));
+  border-bottom: var(--rp-border-width-medium) solid transparent;
+}
+.rp-tabs__trigger--active[data-v-7fa65d85] {
+  color: var(--rp-color-primary-fg);
+  border-bottom-color: var(--rp-color-primary-fg);
+}
+.rp-tabs__trigger--disabled[data-v-7fa65d85] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}.rp-tab-panel[data-v-6205e839] {
+  font-family: var(--rp-font-family);
+  font-size: var(--rp-font-size-base);
+  color: var(--rp-color-text);
+  line-height: var(--rp-line-height-loose);
+  padding: var(--rp-spacing-4) 0;
+}