ropav 0.0.2

package/dist/tabs.js

@@ -0,0 +1,205 @@
+import './tabs.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
+import { computed, createIf, createInvoker, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, provide, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref, useId } from "vue";
+//#region src/components/tabs/types.ts
+var tabsKey = Symbol("tabs");
+//#endregion
+//#region src/components/tabs/useTabs.ts
+function safeTabId(value) {
+	return value.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function useTabs(props, tabsId, emitUpdate) {
+	function select(value) {
+		emitUpdate(value);
+	}
+	function getTriggerId(value) {
+		return `${tabsId}-trigger-${safeTabId(value)}`;
+	}
+	function getPanelId(value) {
+		return `${tabsId}-panel-${safeTabId(value)}`;
+	}
+	const rootClass = computed(() => bem("rp-tabs"));
+	provide(tabsKey, {
+		get activeTab() {
+			return props.modelValue;
+		},
+		select,
+		getTriggerId,
+		getPanelId
+	});
+	return { rootClass };
+}
+function getEnabledTabs(list) {
+	if (!list) return [];
+	return Array.from(list.querySelectorAll("[role=\"tab\"]")).filter((tab) => !tab.disabled && tab.getAttribute("aria-disabled") !== "true");
+}
+function useTabsList() {
+	const tabs = useRequiredInject(tabsKey, "RpTabsList");
+	const listRef = ref(null);
+	const rootClass = computed(() => bem("rp-tabs__list"));
+	function focusTab(index) {
+		const items = getEnabledTabs(listRef.value);
+		if (items.length === 0) return;
+		const item = items[(index + items.length) % items.length];
+		item.focus();
+		const value = item.dataset.value;
+		if (value) tabs.select(value);
+	}
+	function onKeydown(e) {
+		if (![
+			"ArrowRight",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		const items = getEnabledTabs(listRef.value);
+		if (items.length === 0) return;
+		e.preventDefault();
+		const current = items.indexOf(document.activeElement);
+		if (e.key === "Home") focusTab(0);
+		else if (e.key === "End") focusTab(items.length - 1);
+		else if (e.key === "ArrowRight" || e.key === "ArrowDown") focusTab(current + 1);
+		else focusTab(current - 1);
+	}
+	return {
+		listRef,
+		rootClass,
+		onKeydown
+	};
+}
+function useTabsTrigger(props) {
+	const tabs = useRequiredInject(tabsKey, "RpTabsTrigger");
+	const isActive = computed(() => tabs.activeTab === props.value);
+	const rootClass = computed(() => bem("rp-tabs__trigger", {
+		active: isActive.value,
+		disabled: props.disabled
+	}));
+	function select() {
+		if (!props.disabled) tabs.select(props.value);
+	}
+	return {
+		tabs,
+		isActive,
+		rootClass,
+		select
+	};
+}
+function useTabPanel(props) {
+	const tabs = useRequiredInject(tabsKey, "RpTabPanel");
+	return {
+		tabs,
+		isActive: computed(() => tabs.activeTab === props.value)
+	};
+}
+//#endregion
+//#region src/components/tabs/tabs.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$3 = template("<div data-v-f9df84ad>", 1);
+//#endregion
+//#region src/components/tabs/tabs.vue
+var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTabs",
+	__name: "tabs",
+	props: { modelValue: {} },
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { rootClass } = useTabs(props, useId(), (value) => {
+			emit("update:modelValue", value);
+		});
+		const n1 = t0$3();
+		renderEffect(() => setClass(n1, unref(rootClass)));
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		return n1;
+	}
+}), [["__scopeId", "data-v-f9df84ad"]]);
+//#endregion
+//#region src/components/tabs/tabs-list.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$2 = template("<div data-v-f020ecc8 role=tablist>", 1);
+delegateEvents("keydown");
+//#endregion
+//#region src/components/tabs/tabs-list.vue
+var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTabsList",
+	__name: "tabs-list",
+	setup(__props) {
+		const { listRef, rootClass, onKeydown } = useTabsList();
+		const _setTemplateRef = createTemplateRefSetter();
+		const n1 = t0$2();
+		renderEffect(() => setClass(n1, unref(rootClass)));
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		n1.$evtkeydown = createInvoker((e) => unref(onKeydown)(e));
+		_setTemplateRef(n1, listRef, null, "listRef");
+		return n1;
+	}
+}), [["__scopeId", "data-v-f020ecc8"]]);
+//#endregion
+//#region src/components/tabs/tabs-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<button data-v-7fa65d85 type=button role=tab>", 1);
+delegateEvents("click");
+//#endregion
+//#region src/components/tabs/tabs-trigger.vue
+var tabs_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTabsTrigger",
+	__name: "tabs-trigger",
+	props: {
+		value: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const { tabs, isActive, rootClass, select } = useTabsTrigger(__props);
+		const n1 = t0$1();
+		renderEffect(() => {
+			const _value = __props.value;
+			const _isActive = unref(isActive);
+			setProp(n1, "id", unref(tabs).getTriggerId(_value));
+			setClass(n1, unref(rootClass));
+			setProp(n1, "disabled", __props.disabled || void 0);
+			setAttr(n1, "aria-selected", _isActive);
+			setAttr(n1, "aria-controls", unref(tabs).getPanelId(_value));
+			setProp(n1, "tabindex", _isActive ? 0 : -1);
+			setAttr(n1, "data-value", _value);
+			setAttr(n1, "data-state", _isActive ? "active" : "inactive");
+			setAttr(n1, "data-disabled", __props.disabled || void 0);
+		});
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		n1.$evtclick = createInvoker((e) => unref(select)(e));
+		return n1;
+	}
+}), [["__scopeId", "data-v-7fa65d85"]]);
+//#endregion
+//#region src/components/tabs/tab-panel.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-6205e839 class=rp-tab-panel role=tabpanel tabindex=0>", 1);
+//#endregion
+//#region src/components/tabs/tab-panel.vue
+var tab_panel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTabPanel",
+	__name: "tab-panel",
+	props: { value: {} },
+	setup(__props) {
+		const { tabs, isActive } = useTabPanel(__props);
+		return createIf(() => unref(isActive), () => {
+			const n3 = t0();
+			renderEffect(() => {
+				setProp(n3, "id", unref(tabs).getPanelId(__props.value));
+				setAttr(n3, "aria-labelledby", unref(tabs).getTriggerId(__props.value));
+			});
+			setInsertionState(n3, null, 0);
+			createSlot("default", null, null, 1);
+			return n3;
+		});
+	}
+}), [["__scopeId", "data-v-6205e839"]]);
+//#endregion
+export { tabs_default as i, tabs_trigger_default as n, tabs_list_default as r, tab_panel_default as t };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../src/components/tabs/types.ts","../src/components/tabs/useTabs.ts","../src/components/tabs/tabs.vue","../src/components/tabs/tabs.vue","../src/components/tabs/tabs-list.vue","../src/components/tabs/tabs-list.vue","../src/components/tabs/tabs-trigger.vue","../src/components/tabs/tabs-trigger.vue","../src/components/tabs/tab-panel.vue","../src/components/tabs/tab-panel.vue"],"sourcesContent":["import type { InjectionKey } from 'vue';\n\nexport interface TabsProps {\n    modelValue: string;\n}\n\nexport interface TabPanelProps {\n    value: string;\n}\n\nexport interface TabsTriggerProps {\n    value: string;\n    disabled?: boolean;\n}\n\nexport interface TabsContext {\n    activeTab: string;\n    select: (value: string) => void;\n    getTriggerId: (value: string) => string;\n    getPanelId: (value: string) => string;\n}\n\nexport const tabsKey = Symbol('tabs') as InjectionKey<TabsContext>;\n","import { computed, provide, ref } from 'vue';\nimport { useRequiredInject } from '@/composables/useRequiredInject';\nimport { bem } from '@/utils/bem';\nimport { tabsKey } from './types';\nimport type { TabPanelProps, TabsContext, TabsProps, TabsTriggerProps } from './types';\n\nfunction safeTabId(value: string) {\n    return value.replace(/[^a-zA-Z0-9_-]/g, '-');\n}\n\nexport function useTabs(\n    props: Readonly<TabsProps>,\n    tabsId: string,\n    emitUpdate: (value: string) => void,\n) {\n    function select(value: string) {\n        emitUpdate(value);\n    }\n\n    function getTriggerId(value: string) {\n        return `${tabsId}-trigger-${safeTabId(value)}`;\n    }\n\n    function getPanelId(value: string) {\n        return `${tabsId}-panel-${safeTabId(value)}`;\n    }\n\n    const rootClass = computed(() =>\n        bem('rp-tabs'),\n    );\n\n    provide<TabsContext>(tabsKey, {\n        get activeTab() { return props.modelValue; },\n        select,\n        getTriggerId,\n        getPanelId,\n    });\n\n    return { rootClass };\n}\n\nfunction getEnabledTabs(list: HTMLElement | null) {\n    if (!list) return [];\n    return Array.from(list.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'))\n        .filter((tab) => !tab.disabled && tab.getAttribute('aria-disabled') !== 'true');\n}\n\nexport function useTabsList() {\n    const tabs = useRequiredInject(tabsKey, 'RpTabsList');\n    const listRef = ref<HTMLElement | null>(null);\n\n    const rootClass = computed(() => bem('rp-tabs__list'));\n\n    function focusTab(index: number) {\n        const items = getEnabledTabs(listRef.value);\n        if (items.length === 0) return;\n\n        const next = (index + items.length) % items.length;\n        const item = items[next]!;\n        item.focus();\n\n        const value = item.dataset.value;\n        if (value) tabs.select(value);\n    }\n\n    function onKeydown(e: KeyboardEvent) {\n        const keys = ['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End'];\n        if (!keys.includes(e.key)) return;\n\n        const items = getEnabledTabs(listRef.value);\n        if (items.length === 0) return;\n\n        e.preventDefault();\n        const current = items.indexOf(document.activeElement as HTMLButtonElement);\n\n        if (e.key === 'Home') {\n            focusTab(0);\n        } else if (e.key === 'End') {\n            focusTab(items.length - 1);\n        } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            focusTab(current + 1);\n        } else {\n            focusTab(current - 1);\n        }\n    }\n\n    return {\n        listRef,\n        rootClass,\n        onKeydown,\n    };\n}\n\nexport function useTabsTrigger(props: Readonly<TabsTriggerProps>) {\n    const tabs = useRequiredInject(tabsKey, 'RpTabsTrigger');\n    const isActive = computed(() => tabs.activeTab === props.value);\n\n    const rootClass = computed(() =>\n        bem('rp-tabs__trigger', {\n            active: isActive.value,\n            disabled: props.disabled,\n        }),\n    );\n\n    function select() {\n        if (!props.disabled) tabs.select(props.value);\n    }\n\n    return {\n        tabs,\n        isActive,\n        rootClass,\n        select,\n    };\n}\n\nexport function useTabPanel(props: Readonly<TabPanelProps>) {\n    const tabs = useRequiredInject(tabsKey, 'RpTabPanel');\n    const isActive = computed(() => tabs.activeTab === props.value);\n\n    return {\n        tabs,\n        isActive,\n    };\n}\n","<template>\n    <div :class=\"rootClass\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useId } from 'vue';\nimport { useTabs } from './useTabs';\nimport type { TabsProps } from './types';\n\ndefineOptions({ name: 'RpTabs' });\n\nconst props = defineProps<TabsProps>();\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst tabsId = useId();\nconst { rootClass } = useTabs(props, tabsId, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./tabs.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useId } from 'vue';\nimport { useTabs } from './useTabs';\nimport type { TabsProps } from './types';\n\ndefineOptions({ name: 'RpTabs' });\n\nconst props = defineProps<TabsProps>();\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst tabsId = useId();\nconst { rootClass } = useTabs(props, tabsId, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./tabs.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" role=\"tablist\" ref=\"listRef\" @keydown=\"onKeydown\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTabsList } from './useTabs';\n\ndefineOptions({ name: 'RpTabsList' });\n\nconst { listRef, rootClass, onKeydown } = useTabsList();\nvoid listRef;\n</script>\n\n<style src=\"./tabs-list.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" role=\"tablist\" ref=\"listRef\" @keydown=\"onKeydown\">\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTabsList } from './useTabs';\n\ndefineOptions({ name: 'RpTabsList' });\n\nconst { listRef, rootClass, onKeydown } = useTabsList();\nvoid listRef;\n</script>\n\n<style src=\"./tabs-list.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button\n        :id=\"tabs.getTriggerId(value)\"\n        type=\"button\"\n        role=\"tab\"\n        :class=\"rootClass\"\n        :disabled=\"disabled || undefined\"\n        :aria-selected=\"isActive\"\n        :aria-controls=\"tabs.getPanelId(value)\"\n        :tabindex=\"isActive ? 0 : -1\"\n        :data-value=\"value\"\n        :data-state=\"isActive ? 'active' : 'inactive'\"\n        :data-disabled=\"disabled || undefined\"\n        @click=\"select\"\n    >\n        <slot />\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTabsTrigger } from './useTabs';\nimport type { TabsTriggerProps } from './types';\n\ndefineOptions({ name: 'RpTabsTrigger' });\n\nconst props = withDefaults(defineProps<TabsTriggerProps>(), {\n    disabled: false,\n});\n\nconst { tabs, isActive, rootClass, select } = useTabsTrigger(props);\n</script>\n\n<style src=\"./tabs-trigger.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <button\n        :id=\"tabs.getTriggerId(value)\"\n        type=\"button\"\n        role=\"tab\"\n        :class=\"rootClass\"\n        :disabled=\"disabled || undefined\"\n        :aria-selected=\"isActive\"\n        :aria-controls=\"tabs.getPanelId(value)\"\n        :tabindex=\"isActive ? 0 : -1\"\n        :data-value=\"value\"\n        :data-state=\"isActive ? 'active' : 'inactive'\"\n        :data-disabled=\"disabled || undefined\"\n        @click=\"select\"\n    >\n        <slot />\n    </button>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTabsTrigger } from './useTabs';\nimport type { TabsTriggerProps } from './types';\n\ndefineOptions({ name: 'RpTabsTrigger' });\n\nconst props = withDefaults(defineProps<TabsTriggerProps>(), {\n    disabled: false,\n});\n\nconst { tabs, isActive, rootClass, select } = useTabsTrigger(props);\n</script>\n\n<style src=\"./tabs-trigger.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        v-if=\"isActive\"\n        :id=\"tabs.getPanelId(value)\"\n        class=\"rp-tab-panel\"\n        role=\"tabpanel\"\n        tabindex=\"0\"\n        :aria-labelledby=\"tabs.getTriggerId(value)\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTabPanel } from './useTabs';\nimport type { TabPanelProps } from './types';\n\ndefineOptions({ name: 'RpTabPanel' });\n\nconst props = defineProps<TabPanelProps>();\n\nconst { tabs, isActive } = useTabPanel(props);\n</script>\n\n<style src=\"./tab-panel.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div\n        v-if=\"isActive\"\n        :id=\"tabs.getPanelId(value)\"\n        class=\"rp-tab-panel\"\n        role=\"tabpanel\"\n        tabindex=\"0\"\n        :aria-labelledby=\"tabs.getTriggerId(value)\"\n    >\n        <slot />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTabPanel } from './useTabs';\nimport type { TabPanelProps } from './types';\n\ndefineOptions({ name: 'RpTabPanel' });\n\nconst props = defineProps<TabPanelProps>();\n\nconst { tabs, isActive } = useTabPanel(props);\n</script>\n\n<style src=\"./tab-panel.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/textarea.css

@@ -0,0 +1,46 @@
+.rp-textarea[data-v-84020885] {
+  display: inline-flex;
+  font-family: var(--rp-font-family);
+  font-weight: var(--rp-font-weight-normal);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-textarea[data-v-84020885]:hover:not(.rp-textarea--disabled) {
+  border-color: var(--rp-color-control-border-hover);
+}
+.rp-textarea[data-v-84020885]:focus-within:not(.rp-textarea--disabled) {
+  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-84020885] {
+  padding: var(--rp-spacing-3) var(--rp-spacing-4);
+  font-size: var(--rp-font-size-base);
+  border-radius: var(--rp-radius-lg);
+}
+.rp-textarea--disabled[data-v-84020885] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-textarea--invalid[data-v-84020885] {
+  border-color: var(--rp-color-danger-fg);
+}
+.rp-textarea--readonly[data-v-84020885] {
+  background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-textarea__native[data-v-84020885] {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: var(--rp-color-control-fg);
+  line-height: var(--rp-line-height-relaxed);
+}
+.rp-textarea__native[data-v-84020885]::placeholder {
+  color: var(--rp-color-control-placeholder);
+}
+.rp-textarea__native[data-v-84020885]:disabled {
+  cursor: not-allowed;
+}

package/dist/textarea.js

@@ -0,0 +1,91 @@
+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";
+//#region src/components/textarea/useTextarea.ts
+function useTextarea(props, emitUpdate) {
+	const control = useControlState(props);
+	const rootClass = computed(() => bem("rp-textarea", {
+		disabled: control.disabled,
+		invalid: control.invalid,
+		readonly: props.readonly
+	}));
+	function onInput(e) {
+		emitUpdate(e.target.value);
+	}
+	return {
+		control,
+		rootClass,
+		onInput
+	};
+}
+//#endregion
+//#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-84020885><textarea data-v-84020885 class=rp-textarea__native>", 1);
+delegateEvents("input");
+//#endregion
+//#region src/components/textarea/textarea.vue
+var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTextarea",
+	__name: "textarea",
+	props: {
+		id: {},
+		name: {},
+		modelValue: {},
+		placeholder: { default: "" },
+		rows: { default: 3 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		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 { control, rootClass, onInput } = useTextarea(props, (value) => {
+			emit("update:modelValue", value);
+		});
+		const n1 = t0();
+		const n0 = child(n1);
+		n0.$evtinput = createInvoker((e) => unref(onInput)(e));
+		renderEffect(() => {
+			const _control = unref(control);
+			const _control_required = _control.required;
+			setClass(n1, unref(rootClass));
+			setProp(n0, "id", _control.id);
+			setProp(n0, "name", __props.name);
+			setValue(n0, __props.modelValue);
+			setProp(n0, "placeholder", __props.placeholder);
+			setProp(n0, "rows", __props.rows);
+			setProp(n0, "disabled", _control.disabled || void 0);
+			setProp(n0, "readonly", __props.readonly || void 0);
+			setProp(n0, "required", _control_required || void 0);
+			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
+			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
+			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
+			setAttr(n0, "aria-invalid", _control.invalid || void 0);
+			setAttr(n0, "aria-required", _control_required || void 0);
+		});
+		return n1;
+	}
+}), [["__scopeId", "data-v-84020885"]]);
+//#endregion
+export { textarea_default as t };
+
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/components/textarea/useTextarea.ts","../src/components/textarea/textarea.vue","../src/components/textarea/textarea.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { TextareaProps } from './types';\n\nexport function useTextarea(\n    props: Readonly<TextareaProps>,\n    emitUpdate: (value: string) => void,\n) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            disabled: control.disabled,\n            invalid: control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n    }\n\n    return {\n        control,\n        rootClass,\n        onInput,\n    };\n}\n","<template>\n    <div :class=\"rootClass\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAgB,YACZ,OACA,YACF;CACE,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;EACf,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,UAAU,MAAM;CACpB,CAAC,CACL;CAEA,SAAS,QAAQ,GAAU;EACvB,WAAY,EAAE,OAA+B,KAAK;CACtD;CAEA,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECAA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,YAAY,YAAY,QAAQ,UAAU;GAClE,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;sCA1BmB,MAAA,OAAA,CAAO,CAAA,CAAA,CAAA;;;;gBAhBV,MAAA,SAAA,CAAS;eAEb,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;gBAEH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,QAAM,QAAA,IAAI;eACV,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS"}

package/dist/tooltip.css

@@ -0,0 +1,78 @@
+.rp-tooltip[data-v-87be39f8] {
+  position: relative;
+  display: inline-flex;
+}
+.rp-tooltip__tip[data-v-87be39f8] {
+  --_arrow: 5px;
+  --_gap: var(--rp-border-width-medium);
+  position: absolute;
+  z-index: var(--rp-z-index-tooltip);
+  padding: var(--rp-spacing-1) var(--rp-spacing-2);
+  font-family: var(--rp-font-family);
+  font-size: var(--rp-font-size-xs);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: var(--rp-line-height-normal);
+  color: var(--rp-color-text-inverted);
+  background-color: var(--rp-color-surface-inverted);
+  border-radius: var(--rp-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: rp-tooltip-fade-87be39f8 var(--rp-transition-fast);
+}
+.rp-tooltip__tip[data-v-87be39f8]::after {
+  content: "";
+  position: absolute;
+  border: var(--_arrow) solid transparent;
+}
+.rp-tooltip__tip--top[data-v-87be39f8] {
+  bottom: calc(100% + var(--_arrow) + var(--_gap));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rp-tooltip__tip--top[data-v-87be39f8]::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--rp-color-surface-inverted);
+}
+.rp-tooltip__tip--bottom[data-v-87be39f8] {
+  top: calc(100% + var(--_arrow) + var(--_gap));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.rp-tooltip__tip--bottom[data-v-87be39f8]::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--rp-color-surface-inverted);
+}
+.rp-tooltip__tip--left[data-v-87be39f8] {
+  right: calc(100% + var(--_arrow) + var(--_gap));
+  top: 50%;
+  transform: translateY(-50%);
+}
+.rp-tooltip__tip--left[data-v-87be39f8]::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--rp-color-surface-inverted);
+}
+.rp-tooltip__tip--right[data-v-87be39f8] {
+  left: calc(100% + var(--_arrow) + var(--_gap));
+  top: 50%;
+  transform: translateY(-50%);
+}
+.rp-tooltip__tip--right[data-v-87be39f8]::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--rp-color-surface-inverted);
+}
+@keyframes rp-tooltip-fade-87be39f8 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}

package/dist/tooltip.js

@@ -0,0 +1,112 @@
+import './tooltip.css';
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, on, onBeforeUnmount, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, template, unref, useId } from "vue";
+//#region src/composables/useDelayedOpen.ts
+function readOption(value, fallback) {
+	return typeof value === "function" ? value() ?? fallback : value ?? fallback;
+}
+function useDelayedOpen(options = {}) {
+	const isOpen = ref(false);
+	let openTimer = null;
+	function clearTimers() {
+		if (openTimer) {
+			clearTimeout(openTimer);
+			openTimer = null;
+		}
+	}
+	function isDisabled() {
+		return readOption(options.disabled, false);
+	}
+	function open() {
+		if (isDisabled()) return;
+		const delay = readOption(options.openDelay, 0);
+		if (delay <= 0) {
+			isOpen.value = true;
+			return;
+		}
+		if (openTimer) clearTimeout(openTimer);
+		openTimer = setTimeout(() => {
+			isOpen.value = true;
+			openTimer = null;
+		}, delay);
+	}
+	function closeImmediate() {
+		clearTimers();
+		isOpen.value = false;
+	}
+	onBeforeUnmount(clearTimers);
+	return {
+		isOpen,
+		open,
+		closeImmediate
+	};
+}
+//#endregion
+//#region src/components/tooltip/useTooltip.ts
+function useTooltip(props) {
+	const tooltipId = useId();
+	const visibility = useDelayedOpen({
+		openDelay: () => props.delay,
+		disabled: () => props.disabled
+	});
+	function onShow() {
+		visibility.open();
+	}
+	function onHide() {
+		visibility.closeImmediate();
+	}
+	const tipClass = computed(() => bem("rp-tooltip__tip", props.placement ?? "top"));
+	return {
+		tooltipId,
+		isVisible: visibility.isOpen,
+		tipClass,
+		onShow,
+		onHide
+	};
+}
+//#endregion
+//#region src/components/tooltip/tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span data-v-87be39f8 role=tooltip>");
+var t1 = template("<span data-v-87be39f8 class=rp-tooltip>", 1);
+delegateEvents("focusin", "focusout");
+//#endregion
+//#region src/components/tooltip/tooltip.vue
+var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTooltip",
+	__name: "tooltip",
+	props: {
+		placement: { default: "top" },
+		delay: { default: 200 },
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { slots: $slots }) {
+		const { tooltipId, isVisible, tipClass, onShow, onHide } = useTooltip(__props);
+		const n5 = t1();
+		renderEffect(() => setAttr(n5, "aria-describedby", unref(isVisible) && !__props.disabled && $slots.content ? unref(tooltipId) : void 0));
+		setInsertionState(n5, null, 0);
+		createSlot("default", null, null, 1);
+		setInsertionState(n5, null, 1);
+		createIf(() => unref(isVisible) && !__props.disabled && $slots.content, () => {
+			const n4 = t0();
+			renderEffect(() => {
+				setProp(n4, "id", unref(tooltipId));
+				setClass(n4, unref(tipClass));
+			});
+			setInsertionState(n4, null, 0);
+			createSlot("content", null, null, 1);
+			return n4;
+		});
+		on(n5, "mouseenter", (e) => unref(onShow)(e));
+		on(n5, "mouseleave", (e) => unref(onHide)(e));
+		n5.$evtfocusin = createInvoker((e) => unref(onShow)(e));
+		n5.$evtfocusout = createInvoker((e) => unref(onHide)(e));
+		return n5;
+	}
+}), [["__scopeId", "data-v-87be39f8"]]);
+//#endregion
+export { tooltip_default as t };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../src/composables/useDelayedOpen.ts","../src/components/tooltip/useTooltip.ts","../src/components/tooltip/tooltip.vue","../src/components/tooltip/tooltip.vue"],"sourcesContent":["import { onBeforeUnmount, ref } from 'vue';\n\nexport interface UseDelayedOpenOptions {\n    openDelay?: number | (() => number | undefined);\n    disabled?: boolean | (() => boolean | undefined);\n}\n\nfunction readOption<T>(value: T | (() => T | undefined) | undefined, fallback: T): T {\n    return typeof value === 'function'\n        ? (value as () => T | undefined)() ?? fallback\n        : value ?? fallback;\n}\n\nexport function useDelayedOpen(options: UseDelayedOpenOptions = {}) {\n    const isOpen = ref(false);\n    let openTimer: ReturnType<typeof setTimeout> | null = null;\n\n    function clearTimers() {\n        if (openTimer) { clearTimeout(openTimer); openTimer = null; }\n    }\n\n    function isDisabled() {\n        return readOption(options.disabled, false);\n    }\n\n    function open() {\n        if (isDisabled()) return;\n        const delay = readOption(options.openDelay, 0);\n        if (delay <= 0) {\n            isOpen.value = true;\n            return;\n        }\n        if (openTimer) clearTimeout(openTimer);\n        openTimer = setTimeout(() => { isOpen.value = true; openTimer = null; }, delay);\n    }\n\n    function closeImmediate() {\n        clearTimers();\n        isOpen.value = false;\n    }\n\n    onBeforeUnmount(clearTimers);\n\n    return {\n        isOpen,\n        open,\n        closeImmediate,\n    };\n}\n","import { computed, useId } from 'vue';\nimport { useDelayedOpen } from '@/composables/useDelayedOpen';\nimport { bem } from '@/utils/bem';\nimport type { TooltipProps } from './types';\n\nexport function useTooltip(props: Readonly<TooltipProps>) {\n    const tooltipId = useId();\n    const visibility = useDelayedOpen({\n        openDelay: () => props.delay,\n        disabled: () => props.disabled,\n    });\n\n    function onShow() {\n        visibility.open();\n    }\n\n    function onHide() {\n        visibility.closeImmediate();\n    }\n\n    const tipClass = computed(() =>\n        bem('rp-tooltip__tip', props.placement ?? 'top'),\n    );\n\n    return {\n        tooltipId,\n        isVisible: visibility.isOpen,\n        tipClass,\n        onShow,\n        onHide,\n    };\n}\n","<template>\n    <span\n        class=\"rp-tooltip\"\n        :aria-describedby=\"isVisible && !disabled && $slots.content ? tooltipId : undefined\"\n        @mouseenter=\"onShow\"\n        @mouseleave=\"onHide\"\n        @focusin=\"onShow\"\n        @focusout=\"onHide\"\n    >\n        <slot />\n        <span v-if=\"isVisible && !disabled && $slots.content\" :id=\"tooltipId\" :class=\"tipClass\" role=\"tooltip\">\n            <slot name=\"content\" />\n        </span>\n    </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTooltip } from './useTooltip';\nimport type { TooltipProps } from './types';\n\ndefineOptions({ name: 'RpTooltip' });\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n    placement: 'top',\n    delay: 200,\n    disabled: false,\n});\n\nconst { tooltipId, isVisible, tipClass, onShow, onHide } = useTooltip(props);\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <span\n        class=\"rp-tooltip\"\n        :aria-describedby=\"isVisible && !disabled && $slots.content ? tooltipId : undefined\"\n        @mouseenter=\"onShow\"\n        @mouseleave=\"onHide\"\n        @focusin=\"onShow\"\n        @focusout=\"onHide\"\n    >\n        <slot />\n        <span v-if=\"isVisible && !disabled && $slots.content\" :id=\"tooltipId\" :class=\"tipClass\" role=\"tooltip\">\n            <slot name=\"content\" />\n        </span>\n    </span>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTooltip } from './useTooltip';\nimport type { TooltipProps } from './types';\n\ndefineOptions({ name: 'RpTooltip' });\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n    placement: 'top',\n    delay: 200,\n    disabled: false,\n});\n\nconst { tooltipId, isVisible, tipClass, onShow, onHide } = useTooltip(props);\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;AAOA,SAAS,WAAc,OAA8C,UAAgB;CACjF,OAAO,OAAO,UAAU,aACjB,MAA8B,KAAK,WACpC,SAAS;AACnB;AAEA,SAAgB,eAAe,UAAiC,CAAC,GAAG;CAChE,MAAM,SAAS,IAAI,KAAK;CACxB,IAAI,YAAkD;CAEtD,SAAS,cAAc;EACnB,IAAI,WAAW;GAAE,aAAa,SAAS;GAAG,YAAY;EAAM;CAChE;CAEA,SAAS,aAAa;EAClB,OAAO,WAAW,QAAQ,UAAU,KAAK;CAC7C;CAEA,SAAS,OAAO;EACZ,IAAI,WAAW,GAAG;EAClB,MAAM,QAAQ,WAAW,QAAQ,WAAW,CAAC;EAC7C,IAAI,SAAS,GAAG;GACZ,OAAO,QAAQ;GACf;EACJ;EACA,IAAI,WAAW,aAAa,SAAS;EACrC,YAAY,iBAAiB;GAAE,OAAO,QAAQ;GAAM,YAAY;EAAM,GAAG,KAAK;CAClF;CAEA,SAAS,iBAAiB;EACtB,YAAY;EACZ,OAAO,QAAQ;CACnB;CAEA,gBAAgB,WAAW;CAE3B,OAAO;EACH;EACA;EACA;CACJ;AACJ;;;AC3CA,SAAgB,WAAW,OAA+B;CACtD,MAAM,YAAY,MAAM;CACxB,MAAM,aAAa,eAAe;EAC9B,iBAAiB,MAAM;EACvB,gBAAgB,MAAM;CAC1B,CAAC;CAED,SAAS,SAAS;EACd,WAAW,KAAK;CACpB;CAEA,SAAS,SAAS;EACd,WAAW,eAAe;CAC9B;CAEA,MAAM,WAAW,eACb,IAAI,mBAAmB,MAAM,aAAa,KAAK,CACnD;CAEA,OAAO;EACH;EACA,WAAW,WAAW;EACtB;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;ECHA,MAAM,EAAE,WAAW,WAAW,UAAU,QAAQ,WAAW,WAAW,OAAK;;iCAzBlE,oBAAkB,MAAA,SAAA,KAAS,CAAK,QAAA,YAAY,OAAM,UAAW,MAAA,SAAA,IAAY,KAAA,CAAS,CAAA;;;;iBAOvE,MAAA,SAAA,KAAS,CAAK,QAAA,YAAY,OAAM,eAAA;;;gBAAW,MAAI,MAAA,SAAA,CAAS;iBAAU,MAAA,QAAA,CAAQ;;;cAC5E,WAAc,MAAA,MAAA,CAAA;;;SAPvB,eAAU,MAAE,MAAA,MAAA,CAAM,CAAA,CAAA,CAAA;SAClB,eAAU,MAAE,MAAA,MAAA,CAAM,CAAA,CAAA,CAAA;wCACT,MAAA,MAAA,CAAM,CAAA,CAAA,CAAA;yCACL,MAAA,MAAA,CAAM,CAAA,CAAA,CAAA"}

package/dist/useControlState.js

@@ -0,0 +1,38 @@
+import { computed } from "vue";
+//#region src/composables/useControlState.ts
+function mergeIds(...values) {
+	const ids = values.flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
+	return ids.length > 0 ? Array.from(new Set(ids)).join(" ") : void 0;
+}
+function useControlState(options = {}) {
+	const id = computed(() => options.id);
+	const disabled = computed(() => options.disabled ?? false);
+	const required = computed(() => options.required ?? false);
+	const invalid = computed(() => options.invalid ?? false);
+	const ariaDescribedby = computed(() => mergeIds(options.describedby));
+	const ariaLabelledby = computed(() => mergeIds(options.labelledby));
+	return {
+		get id() {
+			return id.value;
+		},
+		get disabled() {
+			return disabled.value;
+		},
+		get required() {
+			return required.value;
+		},
+		get invalid() {
+			return invalid.value;
+		},
+		get ariaDescribedby() {
+			return ariaDescribedby.value;
+		},
+		get ariaLabelledby() {
+			return ariaLabelledby.value;
+		}
+	};
+}
+//#endregion
+export { useControlState as t };
+
+//# sourceMappingURL=useControlState.js.map

package/dist/useControlState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlState.js","names":[],"sources":["../src/composables/useControlState.ts"],"sourcesContent":["import { computed } from 'vue';\n\nexport interface ControlStateOptions {\n    id?: string;\n    disabled?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    describedby?: string;\n    labelledby?: string;\n}\n\nexport interface ControlState {\n    id: string | undefined;\n    disabled: boolean;\n    required: boolean;\n    invalid: boolean;\n    ariaDescribedby: string | undefined;\n    ariaLabelledby: string | undefined;\n}\n\nfunction mergeIds(...values: Array<string | undefined>): string | undefined {\n    const ids = values\n        .flatMap((value) => value?.split(/\\s+/) ?? [])\n        .filter(Boolean);\n    return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;\n}\n\nexport function useControlState(options: ControlStateOptions = {}): ControlState {\n    const id = computed(() => options.id);\n    const disabled = computed(() => options.disabled ?? false);\n    const required = computed(() => options.required ?? false);\n    const invalid = computed(() => options.invalid ?? false);\n\n    const ariaDescribedby = computed(() => mergeIds(options.describedby));\n    const ariaLabelledby = computed(() => mergeIds(options.labelledby));\n\n    return {\n        get id() { return id.value; },\n        get disabled() { return disabled.value; },\n        get required() { return required.value; },\n        get invalid() { return invalid.value; },\n        get ariaDescribedby() { return ariaDescribedby.value; },\n        get ariaLabelledby() { return ariaLabelledby.value; },\n    };\n}\n"],"mappings":";;AAoBA,SAAS,SAAS,GAAG,QAAuD;CACxE,MAAM,MAAM,OACP,SAAS,UAAU,OAAO,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,CAC7C,OAAO,OAAO;CACnB,OAAO,IAAI,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,KAAA;AACjE;AAEA,SAAgB,gBAAgB,UAA+B,CAAC,GAAiB;CAC7E,MAAM,KAAK,eAAe,QAAQ,EAAE;CACpC,MAAM,WAAW,eAAe,QAAQ,YAAY,KAAK;CACzD,MAAM,WAAW,eAAe,QAAQ,YAAY,KAAK;CACzD,MAAM,UAAU,eAAe,QAAQ,WAAW,KAAK;CAEvD,MAAM,kBAAkB,eAAe,SAAS,QAAQ,WAAW,CAAC;CACpE,MAAM,iBAAiB,eAAe,SAAS,QAAQ,UAAU,CAAC;CAElE,OAAO;EACH,IAAI,KAAK;GAAE,OAAO,GAAG;EAAO;EAC5B,IAAI,WAAW;GAAE,OAAO,SAAS;EAAO;EACxC,IAAI,WAAW;GAAE,OAAO,SAAS;EAAO;EACxC,IAAI,UAAU;GAAE,OAAO,QAAQ;EAAO;EACtC,IAAI,kBAAkB;GAAE,OAAO,gBAAgB;EAAO;EACtD,IAAI,iBAAiB;GAAE,OAAO,eAAe;EAAO;CACxD;AACJ"}

package/dist/useRequiredInject.js

@@ -0,0 +1,11 @@
+import { inject } from "vue";
+//#region src/composables/useRequiredInject.ts
+function useRequiredInject(key, componentName) {
+	const value = inject(key);
+	if (value == null) throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);
+	return value;
+}
+//#endregion
+export { useRequiredInject as t };
+
+//# sourceMappingURL=useRequiredInject.js.map

package/dist/useRequiredInject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRequiredInject.js","names":[],"sources":["../src/composables/useRequiredInject.ts"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\n\nexport function useRequiredInject<T>(key: InjectionKey<T>, componentName: string): T {\n    const value = inject(key);\n    if (value == null) {\n        throw new Error(`[Ropav] <${componentName}> must be used inside its parent provider component.`);\n    }\n    return value;\n}\n"],"mappings":";;AAEA,SAAgB,kBAAqB,KAAsB,eAA0B;CACjF,MAAM,QAAQ,OAAO,GAAG;CACxB,IAAI,SAAS,MACT,MAAM,IAAI,MAAM,YAAY,cAAc,qDAAqD;CAEnG,OAAO;AACX"}