ropav 0.0.4 → 0.0.6

package/dist/textarea.js.map

@@ -1 +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\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input',\n                'select',\n                'textarea:not(.rp-textarea__native)',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n\nexport function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n    }\n\n    function focusTextarea(e: MouseEvent) {\n        if (control.disabled) return;\n\n        const target = e.target;\n        if (target instanceof Element && isInteractiveElement(target)) return;\n\n        (e.currentTarget as HTMLElement)\n            .querySelector<HTMLTextAreaElement>('.rp-textarea__native')\n            ?.focus();\n    }\n\n    return {\n        control,\n        rootClass,\n        onInput,\n        focusTextarea,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\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    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput, focusTextarea } = 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\" @mousedown=\"focusTextarea\">\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    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAS,qBAAqB,QAAiB;CAC3C,OAAO,QACH,OAAO,QACH;EACI;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC,CAAC,KAAK,GAAG,CACd,CACJ;AACJ;AAEA,SAAgB,YAAY,OAAgC,YAAqC;CAC7F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;GACd,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EAChD,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,OAAO,QAAQ,SAAS,CAAC,QAAQ;EACjC,UAAU,MAAM;CACpB,CAAC,CACL;CAEA,SAAS,QAAQ,GAAU;EACvB,WAAY,EAAE,OAA+B,KAAK;CACtD;CAEA,SAAS,cAAc,GAAe;EAClC,IAAI,QAAQ,UAAU;EAEtB,MAAM,SAAS,EAAE;EACjB,IAAI,kBAAkB,WAAW,qBAAqB,MAAM,GAAG;EAE/D,EAAG,cACE,cAAmC,sBAAsB,CAAC,EACzD,MAAM;CAChB;CAEA,OAAO;EACH;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC5BA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,SAAS,kBAAkB,YAAY,QAAQ,UAAU;GACjF,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;sCA3BmB,MAAA,OAAA,CAAO,CAAA,CAAA,CAAA;0CAhBa,MAAA,aAAA,CAAa,CAAA,CAAA,CAAA;;;;gBAApC,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"}
+{"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, nextTick, onMounted, ref, watch } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { TextareaProps } from './types';\n\nconst MIN_ROWS = 1;\nconst NATIVE_TEXTAREA_SELECTOR = '.rp-textarea__native';\nconst INTERACTIVE_SELECTOR = [\n    'button',\n    'a[href]',\n    'input',\n    'select',\n    `textarea:not(${NATIVE_TEXTAREA_SELECTOR})`,\n    '[contenteditable=\"true\"]',\n    '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\ninterface AutosizeRows {\n    minRows: number;\n    maxRows: number | undefined;\n}\n\ninterface TextareaMetrics {\n    lineHeight: number;\n    paddingHeight: number;\n    borderHeight: number;\n}\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(target.closest(INTERACTIVE_SELECTOR));\n}\n\nfunction normalizeRows(value: number | undefined, fallback?: number) {\n    if (value === undefined || !Number.isFinite(value)) return fallback;\n    return Math.max(MIN_ROWS, Math.floor(value));\n}\n\nfunction getPixelValue(value: string) {\n    const parsed = Number.parseFloat(value);\n    return Number.isFinite(parsed) ? parsed : 0;\n}\n\nfunction getLineHeight(styles: CSSStyleDeclaration) {\n    const lineHeight = getPixelValue(styles.lineHeight);\n    if (lineHeight > 0) return lineHeight;\n\n    const fontSize = getPixelValue(styles.fontSize);\n    return fontSize > 0 ? fontSize * 1.2 : 0;\n}\n\nfunction getTextareaMetrics(textarea: HTMLTextAreaElement): TextareaMetrics {\n    const styles = getComputedStyle(textarea);\n\n    return {\n        lineHeight: getLineHeight(styles),\n        paddingHeight: getPixelValue(styles.paddingTop) + getPixelValue(styles.paddingBottom),\n        borderHeight:\n            getPixelValue(styles.borderTopWidth) + getPixelValue(styles.borderBottomWidth),\n    };\n}\n\nfunction getRowsHeight(metrics: TextareaMetrics, rows: number) {\n    return rows * metrics.lineHeight + metrics.paddingHeight + metrics.borderHeight;\n}\n\nfunction getAutosizeMeasurement(textarea: HTMLTextAreaElement, rows: AutosizeRows) {\n    const metrics = getTextareaMetrics(textarea);\n    const maxHeight = rows.maxRows === undefined ? undefined : getRowsHeight(metrics, rows.maxRows);\n\n    return {\n        contentHeight: textarea.scrollHeight + metrics.borderHeight,\n        minHeight: getRowsHeight(metrics, rows.minRows),\n        maxHeight,\n    };\n}\n\nfunction resetTextareaHeight(textarea: HTMLTextAreaElement) {\n    textarea.style.height = '';\n    textarea.style.overflowY = '';\n}\n\nexport function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void) {\n    const textareaRef = ref<HTMLTextAreaElement | null>(null);\n    const control = useControlState(props);\n\n    const autosizeRows = computed<AutosizeRows>(() => {\n        const minRows =\n            normalizeRows(props.minRows, normalizeRows(props.rows, MIN_ROWS)) ?? MIN_ROWS;\n        const maxRows = normalizeRows(props.maxRows);\n\n        return {\n            minRows,\n            maxRows: maxRows === undefined ? undefined : Math.max(minRows, maxRows),\n        };\n    });\n\n    const nativeRows = computed(() => (props.autosize ? autosizeRows.value.minRows : props.rows));\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            [`resize-${props.resize}`]: props.resize !== undefined && props.resize !== 'none',\n            autosize: props.autosize,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    const autosizeWatchSource = computed(() => [\n        props.modelValue,\n        props.autosize,\n        props.minRows,\n        props.maxRows,\n        props.rows,\n        props.size,\n    ]);\n\n    function syncTextareaHeight() {\n        const textarea = textareaRef.value;\n        if (!textarea) return;\n\n        if (!props.autosize) {\n            resetTextareaHeight(textarea);\n            return;\n        }\n\n        textarea.style.height = 'auto';\n\n        const { contentHeight, minHeight, maxHeight } = getAutosizeMeasurement(\n            textarea,\n            autosizeRows.value,\n        );\n        const heightLimit = maxHeight ?? Number.POSITIVE_INFINITY;\n        const nextHeight = Math.min(Math.max(contentHeight, minHeight), heightLimit);\n\n        textarea.style.height = `${nextHeight}px`;\n        textarea.style.overflowY =\n            maxHeight !== undefined && contentHeight > maxHeight ? 'auto' : 'hidden';\n    }\n\n    function scheduleTextareaHeightSync() {\n        void nextTick(syncTextareaHeight);\n    }\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n        syncTextareaHeight();\n    }\n\n    function focusTextarea(e: MouseEvent) {\n        if (control.disabled) return;\n\n        const target = e.target;\n        if (target instanceof Element && isInteractiveElement(target)) return;\n\n        textareaRef.value?.focus();\n    }\n\n    onMounted(scheduleTextareaHeightSync);\n\n    watch(autosizeWatchSource, scheduleTextareaHeightSync);\n\n    return {\n        textareaRef,\n        control,\n        rootClass,\n        nativeRows,\n        onInput,\n        focusTextarea,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            ref=\"textareaRef\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"nativeRows\"\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    resize: 'none',\n    autosize: false,\n    minRows: undefined,\n    maxRows: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(\n    props,\n    (value) => {\n        emit('update:modelValue', value);\n    },\n);\n\nvoid textareaRef;\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            ref=\"textareaRef\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"nativeRows\"\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    resize: 'none',\n    autosize: false,\n    minRows: undefined,\n    maxRows: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(\n    props,\n    (value) => {\n        emit('update:modelValue', value);\n    },\n);\n\nvoid textareaRef;\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/tooltip.css

@@ -0,0 +1,136 @@
+.rp-tooltip[data-v-13c39164] {
+  --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
+  --_rp-tooltip-cross-axis-offset: 0px;
+  --_rp-tooltip-arrow-size: 0.5rem;
+  --_rp-tooltip-bg: var(--_rp-tooltip-custom-bg, var(--rp-color-surface-inverted));
+  --_rp-tooltip-fg: var(--_rp-tooltip-custom-fg, var(--rp-color-text-inverted));
+  position: relative;
+  display: inline-flex;
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+.rp-tooltip__content[data-v-13c39164] {
+  position: absolute;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(20rem, 100vw - var(--rp-spacing-6));
+  padding: var(--rp-spacing-2) var(--rp-spacing-3);
+  color: var(--_rp-tooltip-fg);
+  font-size: var(--rp-font-size-sm);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: var(--rp-line-height-normal);
+  text-align: center;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  background-color: var(--_rp-tooltip-bg);
+  border-radius: var(--rp-radius-sm);
+  box-shadow: var(--rp-shadow-md);
+}
+.rp-tooltip--arrow .rp-tooltip__content[data-v-13c39164]::before {
+  position: absolute;
+  width: var(--_rp-tooltip-arrow-size);
+  height: var(--_rp-tooltip-arrow-size);
+  content: "";
+  background-color: inherit;
+  rotate: 45deg;
+}
+.rp-tooltip--color-primary[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-primary);
+  --_rp-tooltip-fg: var(--rp-color-on-primary);
+}
+.rp-tooltip--color-secondary[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-secondary);
+  --_rp-tooltip-fg: var(--rp-color-on-secondary);
+}
+.rp-tooltip--color-success[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-success);
+  --_rp-tooltip-fg: var(--rp-color-on-success);
+}
+.rp-tooltip--color-warning[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-warning);
+  --_rp-tooltip-fg: var(--rp-color-on-warning);
+}
+.rp-tooltip--color-danger[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-danger);
+  --_rp-tooltip-fg: var(--rp-color-on-danger);
+}
+.rp-tooltip--color-info[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-info);
+  --_rp-tooltip-fg: var(--rp-color-on-info);
+}
+.rp-tooltip--color-neutral[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-neutral);
+  --_rp-tooltip-fg: var(--rp-color-on-neutral);
+}
+.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
+  bottom: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  translate: -50% 0;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164]::before {
+  top: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  left: 50%;
+  translate: -50% 0;
+}
+.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164] {
+  top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  left: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  translate: 0 -50%;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164]::before {
+  top: 50%;
+  right: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  translate: 0 -50%;
+}
+.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164] {
+  top: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  translate: -50% 0;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164]::before {
+  bottom: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  left: 50%;
+  translate: -50% 0;
+}
+.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164] {
+  top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  right: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  translate: 0 -50%;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164]::before {
+  top: 50%;
+  left: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  translate: 0 -50%;
+}
+.rp-tooltip--target[data-v-13c39164] {
+  display: contents;
+}
+.rp-tooltip--target .rp-tooltip__content[data-v-13c39164] {
+  position: fixed;
+  top: var(--_rp-tooltip-target-y, 0);
+  right: auto;
+  bottom: auto;
+  left: var(--_rp-tooltip-target-x, 0);
+}
+.rp-tooltip--target.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
+  translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) calc(-100% - var(--_rp-tooltip-main-axis-offset));
+}
+.rp-tooltip--target.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164] {
+  translate: var(--_rp-tooltip-main-axis-offset) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
+}
+.rp-tooltip--target.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164] {
+  translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) var(--_rp-tooltip-main-axis-offset);
+}
+.rp-tooltip--target.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164] {
+  translate: calc(-100% - var(--_rp-tooltip-main-axis-offset)) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
+}
+.rp-tooltip-content-enter-active[data-v-13c39164],
+.rp-tooltip-content-leave-active[data-v-13c39164] {
+  transition: opacity var(--rp-transition-fast);
+}
+.rp-tooltip-content-enter-from[data-v-13c39164],
+.rp-tooltip-content-leave-to[data-v-13c39164] {
+  opacity: 0;
+}

package/dist/tooltip.js

@@ -0,0 +1,384 @@
+import './tooltip.css';
+import { n as getComponentCustomColor, r as isComponentPresetColor } from "./componentColors.js";
+import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, isRef, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
+//#region src/composables/useDelayedOpen.ts
+function readOption(value, fallback) {
+	return typeof value === "function" ? value() ?? fallback : value ?? fallback;
+}
+function readOptional(value) {
+	return typeof value === "function" ? value() : value;
+}
+function useDelayedOpen(options = {}) {
+	const uncontrolledOpen = ref(false);
+	let openTimer = null;
+	const isOpen = computed(() => readOptional(options.open) ?? uncontrolledOpen.value);
+	function clearTimers() {
+		if (openTimer) {
+			clearTimeout(openTimer);
+			openTimer = null;
+		}
+	}
+	function isDisabled() {
+		return readOption(options.disabled, false);
+	}
+	function setOpen(nextOpen) {
+		const previousOpen = isOpen.value;
+		if (readOptional(options.open) === void 0) uncontrolledOpen.value = nextOpen;
+		if (previousOpen !== nextOpen) options.onOpenChange?.(nextOpen);
+	}
+	function open() {
+		if (isDisabled()) return;
+		const delay = readOption(options.openDelay, 0);
+		if (delay <= 0) {
+			setOpen(true);
+			return;
+		}
+		if (openTimer) clearTimeout(openTimer);
+		openTimer = setTimeout(() => {
+			setOpen(true);
+			openTimer = null;
+		}, delay);
+	}
+	function closeImmediate() {
+		clearTimers();
+		setOpen(false);
+	}
+	onBeforeUnmount(clearTimers);
+	return {
+		isOpen,
+		open,
+		closeImmediate
+	};
+}
+//#endregion
+//#region src/components/tooltip/useTooltip.ts
+function isHTMLElement(value) {
+	return typeof HTMLElement !== "undefined" && value instanceof HTMLElement;
+}
+function getTargetPosition(rect, placement) {
+	switch (placement) {
+		case "right": return {
+			x: rect.right,
+			y: rect.top + rect.height / 2
+		};
+		case "bottom": return {
+			x: rect.left + rect.width / 2,
+			y: rect.bottom
+		};
+		case "left": return {
+			x: rect.left,
+			y: rect.top + rect.height / 2
+		};
+		default: return {
+			x: rect.left + rect.width / 2,
+			y: rect.top
+		};
+	}
+}
+function resolveOffsetStyle(offset) {
+	if (offset == null) return void 0;
+	if (typeof offset === "number") return { "--_rp-tooltip-main-axis-offset": `${offset}px` };
+	const style = {};
+	if (offset.mainAxis != null) style["--_rp-tooltip-main-axis-offset"] = `${offset.mainAxis}px`;
+	if (offset.crossAxis != null) style["--_rp-tooltip-cross-axis-offset"] = `${offset.crossAxis}px`;
+	return Object.keys(style).length > 0 ? style : void 0;
+}
+function resolveTooltipColorStyle(color) {
+	const customColor = getComponentCustomColor(color);
+	if (!customColor) return void 0;
+	return {
+		"--_rp-tooltip-bg": customColor,
+		"--_rp-tooltip-fg": "var(--rp-color-on-primary)"
+	};
+}
+function useTooltip(props, emitOpenChange) {
+	const slots = useSlots();
+	const generatedId = useId();
+	const targetElement = ref(null);
+	const targetPosition = ref(null);
+	let isMounted = false;
+	let removeTargetListeners;
+	let removePositionListeners;
+	let describedTarget = null;
+	let previousTargetDescribedby = null;
+	const tooltipId = computed(() => props.id ?? `${generatedId}-tooltip`);
+	const placement = computed(() => props.placement ?? "top");
+	const isTargetMode = computed(() => props.target != null && props.target !== "");
+	const hasContent = computed(() => Boolean(props.content || slots.content));
+	const isDecorative = computed(() => Boolean(props.decorative));
+	const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));
+	const shouldRenderContent = computed(() => !isDisabled.value);
+	const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);
+	const { isOpen, open, closeImmediate } = useDelayedOpen({
+		open: () => props.open,
+		openDelay: () => props.openDelay ?? 300,
+		disabled: () => isDisabled.value,
+		onOpenChange: emitOpenChange
+	});
+	const isVisible = computed(() => isOpen.value && !isDisabled.value);
+	const rootClass = computed(() => bem("rp-tooltip", {
+		[`placement-${placement.value}`]: true,
+		[`color-${props.color}`]: isComponentPresetColor(props.color),
+		arrow: props.arrow,
+		target: isTargetMode.value,
+		open: isVisible.value,
+		disabled: props.disabled
+	}));
+	const triggerProps = computed(() => ({ "aria-describedby": shouldDescribeContent.value ? tooltipId.value : void 0 }));
+	const contentRole = computed(() => isDecorative.value ? void 0 : "tooltip");
+	const contentAriaHidden = computed(() => isDecorative.value ? "true" : void 0);
+	const contentStyle = computed(() => {
+		const style = {
+			...resolveOffsetStyle(props.offset),
+			...resolveTooltipColorStyle(props.color)
+		};
+		if (!isTargetMode.value || !targetPosition.value) return Object.keys(style).length > 0 ? style : void 0;
+		return {
+			...style,
+			"--_rp-tooltip-target-x": `${targetPosition.value.x}px`,
+			"--_rp-tooltip-target-y": `${targetPosition.value.y}px`
+		};
+	});
+	function openTooltip() {
+		open();
+	}
+	function closeTooltip() {
+		closeImmediate();
+	}
+	function onKeydown(event) {
+		if (event.key === "Escape") closeTooltip();
+	}
+	function readTarget() {
+		return isRef(props.target) ? props.target.value : props.target;
+	}
+	function resolveTarget() {
+		const target = readTarget();
+		if (!target) return null;
+		if (typeof target === "string") {
+			if (typeof document === "undefined") return null;
+			try {
+				const element = document.querySelector(target);
+				return isHTMLElement(element) ? element : null;
+			} catch {
+				return null;
+			}
+		}
+		return isHTMLElement(target) ? target : null;
+	}
+	function restoreTargetDescription() {
+		if (!describedTarget) return;
+		if (previousTargetDescribedby) describedTarget.setAttribute("aria-describedby", previousTargetDescribedby);
+		else describedTarget.removeAttribute("aria-describedby");
+		describedTarget = null;
+		previousTargetDescribedby = null;
+	}
+	function syncTargetDescription() {
+		restoreTargetDescription();
+		if (!isTargetMode.value || !shouldDescribeContent.value || !targetElement.value) return;
+		describedTarget = targetElement.value;
+		previousTargetDescribedby = describedTarget.getAttribute("aria-describedby");
+		const ids = (previousTargetDescribedby ?? "").split(/\s+/).filter(Boolean);
+		if (!ids.includes(tooltipId.value)) ids.push(tooltipId.value);
+		describedTarget.setAttribute("aria-describedby", ids.join(" "));
+	}
+	function updateTargetPosition() {
+		if (!isTargetMode.value || !targetElement.value) {
+			targetPosition.value = null;
+			return;
+		}
+		targetPosition.value = getTargetPosition(targetElement.value.getBoundingClientRect(), placement.value);
+	}
+	function onTargetOpen() {
+		updateTargetPosition();
+		openTooltip();
+	}
+	function bindTargetListeners(element) {
+		removeTargetListeners?.();
+		element.addEventListener("mouseenter", onTargetOpen);
+		element.addEventListener("mouseleave", closeTooltip);
+		element.addEventListener("focusin", onTargetOpen);
+		element.addEventListener("focusout", closeTooltip);
+		element.addEventListener("keydown", onKeydown);
+		removeTargetListeners = () => {
+			element.removeEventListener("mouseenter", onTargetOpen);
+			element.removeEventListener("mouseleave", closeTooltip);
+			element.removeEventListener("focusin", onTargetOpen);
+			element.removeEventListener("focusout", closeTooltip);
+			element.removeEventListener("keydown", onKeydown);
+			removeTargetListeners = void 0;
+		};
+	}
+	function removeViewportListeners() {
+		removePositionListeners?.();
+		removePositionListeners = void 0;
+	}
+	function bindViewportListeners() {
+		if (typeof window === "undefined" || removePositionListeners) return;
+		window.addEventListener("resize", updateTargetPosition);
+		window.addEventListener("scroll", updateTargetPosition, true);
+		removePositionListeners = () => {
+			window.removeEventListener("resize", updateTargetPosition);
+			window.removeEventListener("scroll", updateTargetPosition, true);
+		};
+	}
+	function syncTarget() {
+		if (!isTargetMode.value) {
+			removeTargetListeners?.();
+			removeViewportListeners();
+			restoreTargetDescription();
+			targetElement.value = null;
+			targetPosition.value = null;
+			return;
+		}
+		const nextTarget = resolveTarget();
+		if (targetElement.value === nextTarget) {
+			syncTargetDescription();
+			updateTargetPosition();
+			return;
+		}
+		removeTargetListeners?.();
+		removeViewportListeners();
+		restoreTargetDescription();
+		targetElement.value = nextTarget;
+		if (!nextTarget) {
+			targetPosition.value = null;
+			return;
+		}
+		bindTargetListeners(nextTarget);
+		syncTargetDescription();
+		updateTargetPosition();
+	}
+	watch(isDisabled, (disabled) => {
+		if (disabled) closeTooltip();
+	});
+	watch(() => readTarget(), () => {
+		if (isMounted) syncTarget();
+	}, { flush: "post" });
+	watch([
+		isTargetMode,
+		shouldDescribeContent,
+		tooltipId
+	], () => {
+		if (isMounted) syncTargetDescription();
+	});
+	watch([placement, isVisible], () => {
+		if (isMounted && isVisible.value) updateTargetPosition();
+	});
+	watch(isVisible, (visible) => {
+		if (!isMounted || !isTargetMode.value) return;
+		if (visible) {
+			updateTargetPosition();
+			bindViewportListeners();
+		} else removeViewportListeners();
+	});
+	onMounted(() => {
+		isMounted = true;
+		syncTarget();
+	});
+	onBeforeUnmount(() => {
+		isMounted = false;
+		removeTargetListeners?.();
+		removeViewportListeners();
+		restoreTargetDescription();
+	});
+	return {
+		tooltipId,
+		isOpen,
+		isVisible,
+		isTargetMode,
+		shouldRenderContent,
+		rootClass,
+		triggerProps,
+		contentRole,
+		contentAriaHidden,
+		contentStyle,
+		openTooltip,
+		closeTooltip,
+		onKeydown
+	};
+}
+//#endregion
+//#region src/components/tooltip/tooltip.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<span data-v-13c39164 class=rp-tooltip__content>");
+var t2 = template("<span data-v-13c39164>", 1);
+delegateEvents("focusin", "focusout", "keydown");
+//#endregion
+//#region src/components/tooltip/tooltip.vue
+var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpTooltip",
+	__name: "tooltip",
+	props: {
+		id: {},
+		content: { default: "" },
+		target: {},
+		placement: { default: "top" },
+		color: {},
+		offset: {},
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openDelay: { default: 300 },
+		arrow: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		decorative: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:open"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { tooltipId, isVisible, isTargetMode, shouldRenderContent, rootClass, triggerProps, contentRole, contentAriaHidden, contentStyle, openTooltip, closeTooltip, onKeydown } = useTooltip(props, (open) => {
+			emit("update:open", open);
+		});
+		const n10 = t2();
+		renderEffect(() => setClass(n10, unref(rootClass)));
+		setInsertionState(n10, null, 0);
+		createIf(() => !unref(isTargetMode), () => {
+			return createSlot("default", { triggerProps: () => unref(triggerProps) }, null, 1);
+		});
+		setInsertionState(n10, null, 1);
+		createComponent(VaporTransition, {
+			name: "rp-tooltip-content",
+			persisted: ""
+		}, extend(() => {
+			return createIf(() => unref(shouldRenderContent), () => {
+				const n8 = t1();
+				renderEffect(() => {
+					setProp(n8, "id", unref(tooltipId));
+					setProp(n8, "role", unref(contentRole));
+					setAttr(n8, "aria-hidden", unref(contentAriaHidden));
+					setStyle(n8, unref(contentStyle));
+				});
+				setInsertionState(n8, null, 0);
+				createSlot("content", null, () => {
+					const n7 = t0();
+					renderEffect(() => setText(n7, toDisplayString(__props.content)));
+					return n7;
+				}, 1);
+				applyVShow(n8, () => unref(isVisible));
+				return n8;
+			}, null, 129);
+		}, { _: 8 }));
+		on(n10, "mouseenter", (e) => unref(openTooltip)(e));
+		on(n10, "mouseleave", (e) => unref(closeTooltip)(e));
+		n10.$evtfocusin = createInvoker((e) => unref(openTooltip)(e));
+		n10.$evtfocusout = createInvoker((e) => unref(closeTooltip)(e));
+		n10.$evtkeydown = createInvoker((e) => unref(onKeydown)(e));
+		return n10;
+	}
+}), [["__scopeId", "data-v-13c39164"]]);
+//#endregion
+export { useDelayedOpen as n, 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 { computed, onBeforeUnmount, ref } from 'vue';\n\nexport interface UseDelayedOpenOptions {\n    open?: boolean | (() => boolean | undefined);\n    openDelay?: number | (() => number | undefined);\n    disabled?: boolean | (() => boolean | undefined);\n    onOpenChange?: (open: boolean) => void;\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\nfunction readOptional<T>(value: T | (() => T | undefined) | undefined): T | undefined {\n    return typeof value === 'function' ? (value as () => T | undefined)() : value;\n}\n\nexport function useDelayedOpen(options: UseDelayedOpenOptions = {}) {\n    const uncontrolledOpen = ref(false);\n    let openTimer: ReturnType<typeof setTimeout> | null = null;\n\n    const isOpen = computed(() => readOptional(options.open) ?? uncontrolledOpen.value);\n\n    function clearTimers() {\n        if (openTimer) {\n            clearTimeout(openTimer);\n            openTimer = null;\n        }\n    }\n\n    function isDisabled() {\n        return readOption(options.disabled, false);\n    }\n\n    function setOpen(nextOpen: boolean) {\n        const previousOpen = isOpen.value;\n        if (readOptional(options.open) === undefined) uncontrolledOpen.value = nextOpen;\n        if (previousOpen !== nextOpen) options.onOpenChange?.(nextOpen);\n    }\n\n    function open() {\n        if (isDisabled()) return;\n        const delay = readOption(options.openDelay, 0);\n        if (delay <= 0) {\n            setOpen(true);\n            return;\n        }\n        if (openTimer) clearTimeout(openTimer);\n        openTimer = setTimeout(() => {\n            setOpen(true);\n            openTimer = null;\n        }, delay);\n    }\n\n    function closeImmediate() {\n        clearTimers();\n        setOpen(false);\n    }\n\n    onBeforeUnmount(clearTimers);\n\n    return {\n        isOpen,\n        open,\n        closeImmediate,\n    };\n}\n","import {\n    computed,\n    isRef,\n    onBeforeUnmount,\n    onMounted,\n    ref,\n    useId,\n    useSlots,\n    watch,\n    type CSSProperties,\n} from 'vue';\nimport { useDelayedOpen } from '@/composables/useDelayedOpen';\nimport { getComponentCustomColor, isComponentPresetColor } from '@/utils/componentColors';\nimport { bem } from '@/utils/bem';\nimport type { TooltipOffset, TooltipPlacement, TooltipProps, TooltipTriggerProps } from './types';\n\ninterface TooltipPosition {\n    x: number;\n    y: number;\n}\n\nfunction isHTMLElement(value: unknown): value is HTMLElement {\n    return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;\n}\n\nfunction getTargetPosition(rect: DOMRect, placement: TooltipPlacement): TooltipPosition {\n    switch (placement) {\n        case 'right':\n            return { x: rect.right, y: rect.top + rect.height / 2 };\n        case 'bottom':\n            return { x: rect.left + rect.width / 2, y: rect.bottom };\n        case 'left':\n            return { x: rect.left, y: rect.top + rect.height / 2 };\n        case 'top':\n        default:\n            return { x: rect.left + rect.width / 2, y: rect.top };\n    }\n}\n\nfunction resolveOffsetStyle(offset: TooltipOffset | undefined): CSSProperties | undefined {\n    if (offset == null) return undefined;\n\n    if (typeof offset === 'number') {\n        return {\n            '--_rp-tooltip-main-axis-offset': `${offset}px`,\n        };\n    }\n\n    const style: CSSProperties = {};\n\n    if (offset.mainAxis != null) {\n        style['--_rp-tooltip-main-axis-offset'] = `${offset.mainAxis}px`;\n    }\n\n    if (offset.crossAxis != null) {\n        style['--_rp-tooltip-cross-axis-offset'] = `${offset.crossAxis}px`;\n    }\n\n    return Object.keys(style).length > 0 ? style : undefined;\n}\n\nfunction resolveTooltipColorStyle(color: TooltipProps['color']): CSSProperties | undefined {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-tooltip-bg': customColor,\n        '--_rp-tooltip-fg': 'var(--rp-color-on-primary)',\n    };\n}\n\nexport function useTooltip(\n    props: Readonly<TooltipProps>,\n    emitOpenChange?: (open: boolean) => void,\n) {\n    const slots = useSlots();\n    const generatedId = useId();\n    const targetElement = ref<HTMLElement | null>(null);\n    const targetPosition = ref<TooltipPosition | null>(null);\n\n    let isMounted = false;\n    let removeTargetListeners: (() => void) | undefined;\n    let removePositionListeners: (() => void) | undefined;\n    let describedTarget: HTMLElement | null = null;\n    let previousTargetDescribedby: string | null = null;\n\n    const tooltipId = computed(() => props.id ?? `${generatedId}-tooltip`);\n    const placement = computed(() => props.placement ?? 'top');\n    const isTargetMode = computed(() => props.target != null && props.target !== '');\n    const hasContent = computed(() => Boolean(props.content || slots.content));\n    const isDecorative = computed(() => Boolean(props.decorative));\n    const isDisabled = computed(() => Boolean(props.disabled || !hasContent.value));\n    const shouldRenderContent = computed(() => !isDisabled.value);\n    const shouldDescribeContent = computed(() => shouldRenderContent.value && !isDecorative.value);\n\n    const { isOpen, open, closeImmediate } = useDelayedOpen({\n        open: () => props.open,\n        openDelay: () => props.openDelay ?? 300,\n        disabled: () => isDisabled.value,\n        onOpenChange: emitOpenChange,\n    });\n\n    const isVisible = computed(() => isOpen.value && !isDisabled.value);\n\n    const rootClass = computed(() =>\n        bem('rp-tooltip', {\n            [`placement-${placement.value}`]: true,\n            [`color-${props.color}`]: isComponentPresetColor(props.color),\n            arrow: props.arrow,\n            target: isTargetMode.value,\n            open: isVisible.value,\n            disabled: props.disabled,\n        }),\n    );\n\n    const triggerProps = computed<TooltipTriggerProps>(() => ({\n        'aria-describedby': shouldDescribeContent.value ? tooltipId.value : undefined,\n    }));\n\n    const contentRole = computed(() => (isDecorative.value ? undefined : 'tooltip'));\n    const contentAriaHidden = computed(() => (isDecorative.value ? 'true' : undefined));\n\n    const contentStyle = computed<CSSProperties | undefined>(() => {\n        const style: CSSProperties = {\n            ...resolveOffsetStyle(props.offset),\n            ...resolveTooltipColorStyle(props.color),\n        };\n\n        if (!isTargetMode.value || !targetPosition.value) {\n            return Object.keys(style).length > 0 ? style : undefined;\n        }\n\n        return {\n            ...style,\n            '--_rp-tooltip-target-x': `${targetPosition.value.x}px`,\n            '--_rp-tooltip-target-y': `${targetPosition.value.y}px`,\n        };\n    });\n\n    function openTooltip() {\n        open();\n    }\n\n    function closeTooltip() {\n        closeImmediate();\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n        if (event.key === 'Escape') closeTooltip();\n    }\n\n    function readTarget() {\n        return isRef(props.target) ? props.target.value : props.target;\n    }\n\n    function resolveTarget() {\n        const target = readTarget();\n        if (!target) return null;\n\n        if (typeof target === 'string') {\n            if (typeof document === 'undefined') return null;\n\n            try {\n                const element = document.querySelector(target);\n                return isHTMLElement(element) ? element : null;\n            } catch {\n                return null;\n            }\n        }\n\n        return isHTMLElement(target) ? target : null;\n    }\n\n    function restoreTargetDescription() {\n        if (!describedTarget) return;\n\n        if (previousTargetDescribedby) {\n            describedTarget.setAttribute('aria-describedby', previousTargetDescribedby);\n        } else {\n            describedTarget.removeAttribute('aria-describedby');\n        }\n\n        describedTarget = null;\n        previousTargetDescribedby = null;\n    }\n\n    function syncTargetDescription() {\n        restoreTargetDescription();\n\n        if (!isTargetMode.value || !shouldDescribeContent.value || !targetElement.value) return;\n\n        describedTarget = targetElement.value;\n        previousTargetDescribedby = describedTarget.getAttribute('aria-describedby');\n\n        const ids = (previousTargetDescribedby ?? '').split(/\\s+/).filter(Boolean);\n        if (!ids.includes(tooltipId.value)) ids.push(tooltipId.value);\n        describedTarget.setAttribute('aria-describedby', ids.join(' '));\n    }\n\n    function updateTargetPosition() {\n        if (!isTargetMode.value || !targetElement.value) {\n            targetPosition.value = null;\n            return;\n        }\n\n        targetPosition.value = getTargetPosition(\n            targetElement.value.getBoundingClientRect(),\n            placement.value,\n        );\n    }\n\n    function onTargetOpen() {\n        updateTargetPosition();\n        openTooltip();\n    }\n\n    function bindTargetListeners(element: HTMLElement) {\n        removeTargetListeners?.();\n\n        element.addEventListener('mouseenter', onTargetOpen);\n        element.addEventListener('mouseleave', closeTooltip);\n        element.addEventListener('focusin', onTargetOpen);\n        element.addEventListener('focusout', closeTooltip);\n        element.addEventListener('keydown', onKeydown);\n\n        removeTargetListeners = () => {\n            element.removeEventListener('mouseenter', onTargetOpen);\n            element.removeEventListener('mouseleave', closeTooltip);\n            element.removeEventListener('focusin', onTargetOpen);\n            element.removeEventListener('focusout', closeTooltip);\n            element.removeEventListener('keydown', onKeydown);\n            removeTargetListeners = undefined;\n        };\n    }\n\n    function removeViewportListeners() {\n        removePositionListeners?.();\n        removePositionListeners = undefined;\n    }\n\n    function bindViewportListeners() {\n        if (typeof window === 'undefined' || removePositionListeners) return;\n\n        window.addEventListener('resize', updateTargetPosition);\n        window.addEventListener('scroll', updateTargetPosition, true);\n\n        removePositionListeners = () => {\n            window.removeEventListener('resize', updateTargetPosition);\n            window.removeEventListener('scroll', updateTargetPosition, true);\n        };\n    }\n\n    function syncTarget() {\n        if (!isTargetMode.value) {\n            removeTargetListeners?.();\n            removeViewportListeners();\n            restoreTargetDescription();\n            targetElement.value = null;\n            targetPosition.value = null;\n            return;\n        }\n\n        const nextTarget = resolveTarget();\n        if (targetElement.value === nextTarget) {\n            syncTargetDescription();\n            updateTargetPosition();\n            return;\n        }\n\n        removeTargetListeners?.();\n        removeViewportListeners();\n        restoreTargetDescription();\n        targetElement.value = nextTarget;\n\n        if (!nextTarget) {\n            targetPosition.value = null;\n            return;\n        }\n\n        bindTargetListeners(nextTarget);\n        syncTargetDescription();\n        updateTargetPosition();\n    }\n\n    watch(isDisabled, (disabled) => {\n        if (disabled) closeTooltip();\n    });\n\n    watch(\n        () => readTarget(),\n        () => {\n            if (isMounted) syncTarget();\n        },\n        { flush: 'post' },\n    );\n\n    watch([isTargetMode, shouldDescribeContent, tooltipId], () => {\n        if (isMounted) syncTargetDescription();\n    });\n\n    watch([placement, isVisible], () => {\n        if (isMounted && isVisible.value) updateTargetPosition();\n    });\n\n    watch(isVisible, (visible) => {\n        if (!isMounted || !isTargetMode.value) return;\n\n        if (visible) {\n            updateTargetPosition();\n            bindViewportListeners();\n        } else {\n            removeViewportListeners();\n        }\n    });\n\n    onMounted(() => {\n        isMounted = true;\n        syncTarget();\n    });\n\n    onBeforeUnmount(() => {\n        isMounted = false;\n        removeTargetListeners?.();\n        removeViewportListeners();\n        restoreTargetDescription();\n    });\n\n    return {\n        tooltipId,\n        isOpen,\n        isVisible,\n        isTargetMode,\n        shouldRenderContent,\n        rootClass,\n        triggerProps,\n        contentRole,\n        contentAriaHidden,\n        contentStyle,\n        openTooltip,\n        closeTooltip,\n        onKeydown,\n    };\n}\n","<template>\n    <span\n        :class=\"rootClass\"\n        @mouseenter=\"openTooltip\"\n        @mouseleave=\"closeTooltip\"\n        @focusin=\"openTooltip\"\n        @focusout=\"closeTooltip\"\n        @keydown=\"onKeydown\"\n    >\n        <slot v-if=\"!isTargetMode\" :trigger-props=\"triggerProps\" />\n\n        <Transition name=\"rp-tooltip-content\">\n            <span\n                v-if=\"shouldRenderContent\"\n                v-show=\"isVisible\"\n                :id=\"tooltipId\"\n                class=\"rp-tooltip__content\"\n                :role=\"contentRole\"\n                :aria-hidden=\"contentAriaHidden\"\n                :style=\"contentStyle\"\n            >\n                <slot name=\"content\">{{ content }}</slot>\n            </span>\n        </Transition>\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    content: '',\n    placement: 'top',\n    open: undefined,\n    openDelay: 300,\n    arrow: false,\n    disabled: false,\n    decorative: false,\n});\n\nconst emit = defineEmits<{\n    'update:open': [value: boolean];\n}>();\n\nconst {\n    tooltipId,\n    isVisible,\n    isTargetMode,\n    shouldRenderContent,\n    rootClass,\n    triggerProps,\n    contentRole,\n    contentAriaHidden,\n    contentStyle,\n    openTooltip,\n    closeTooltip,\n    onKeydown,\n} = useTooltip(props, (open) => {\n    emit('update:open', open);\n});\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <span\n        :class=\"rootClass\"\n        @mouseenter=\"openTooltip\"\n        @mouseleave=\"closeTooltip\"\n        @focusin=\"openTooltip\"\n        @focusout=\"closeTooltip\"\n        @keydown=\"onKeydown\"\n    >\n        <slot v-if=\"!isTargetMode\" :trigger-props=\"triggerProps\" />\n\n        <Transition name=\"rp-tooltip-content\">\n            <span\n                v-if=\"shouldRenderContent\"\n                v-show=\"isVisible\"\n                :id=\"tooltipId\"\n                class=\"rp-tooltip__content\"\n                :role=\"contentRole\"\n                :aria-hidden=\"contentAriaHidden\"\n                :style=\"contentStyle\"\n            >\n                <slot name=\"content\">{{ content }}</slot>\n            </span>\n        </Transition>\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    content: '',\n    placement: 'top',\n    open: undefined,\n    openDelay: 300,\n    arrow: false,\n    disabled: false,\n    decorative: false,\n});\n\nconst emit = defineEmits<{\n    'update:open': [value: boolean];\n}>();\n\nconst {\n    tooltipId,\n    isVisible,\n    isTargetMode,\n    shouldRenderContent,\n    rootClass,\n    triggerProps,\n    contentRole,\n    contentAriaHidden,\n    contentStyle,\n    openTooltip,\n    closeTooltip,\n    onKeydown,\n} = useTooltip(props, (open) => {\n    emit('update:open', open);\n});\n</script>\n\n<style src=\"./tooltip.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/useButtonColor.js

@@ -0,0 +1,33 @@
+import { n as getComponentCustomColor } from "./componentColors.js";
+import { defineVaporComponent, markRaw, template } from "vue";
+//#region ~icons/lucide/loader-circle
+var t0 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M21 12a9 9 0 1 1-6.219-8.56\">", 3, 1);
+function render(_ctx) {
+	return t0();
+}
+var loader_circle_default = markRaw(defineVaporComponent({
+	name: "lucide-loader-circle",
+	render
+}));
+//#endregion
+//#region src/components/button/useButtonColor.ts
+function getButtonColorStyle(color) {
+	const customColor = getComponentCustomColor(color);
+	if (!customColor) return void 0;
+	return {
+		"--_rp-button-custom-color": customColor,
+		"--_rp-button-custom-hover": `color-mix(in srgb, ${customColor} 90%, #111111)`,
+		"--_rp-button-custom-active": `color-mix(in srgb, ${customColor} 80%, #111111)`,
+		"--_rp-button-custom-on": "var(--rp-color-on-primary)",
+		"--_rp-button-custom-subtle-bg": `color-mix(in srgb, ${customColor} 12%, transparent)`,
+		"--_rp-button-custom-subtle-bg-hover": `color-mix(in srgb, ${customColor} 18%, transparent)`,
+		"--_rp-button-custom-subtle-bg-active": `color-mix(in srgb, ${customColor} 24%, transparent)`,
+		"--_rp-button-custom-border": `color-mix(in srgb, ${customColor} 45%, transparent)`,
+		"--_rp-button-custom-border-hover": `color-mix(in srgb, ${customColor} 62%, transparent)`,
+		"--_rp-button-custom-fg": customColor
+	};
+}
+//#endregion
+export { loader_circle_default as n, getButtonColorStyle as t };
+
+//# sourceMappingURL=useButtonColor.js.map

package/dist/useButtonColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButtonColor.js","names":[],"sources":["../src/components/button/useButtonColor.ts"],"sourcesContent":["import type { CSSProperties } from 'vue';\nimport { getComponentCustomColor } from '@/utils/componentColors';\nimport type { ButtonColor } from './types';\n\nexport function getButtonColorStyle(color: ButtonColor | undefined) {\n    const customColor = getComponentCustomColor(color);\n    if (!customColor) return undefined;\n\n    return {\n        '--_rp-button-custom-color': customColor,\n        '--_rp-button-custom-hover': `color-mix(in srgb, ${customColor} 90%, #111111)`,\n        '--_rp-button-custom-active': `color-mix(in srgb, ${customColor} 80%, #111111)`,\n        '--_rp-button-custom-on': 'var(--rp-color-on-primary)',\n        '--_rp-button-custom-subtle-bg': `color-mix(in srgb, ${customColor} 12%, transparent)`,\n        '--_rp-button-custom-subtle-bg-hover': `color-mix(in srgb, ${customColor} 18%, transparent)`,\n        '--_rp-button-custom-subtle-bg-active': `color-mix(in srgb, ${customColor} 24%, transparent)`,\n        '--_rp-button-custom-border': `color-mix(in srgb, ${customColor} 45%, transparent)`,\n        '--_rp-button-custom-border-hover': `color-mix(in srgb, ${customColor} 62%, transparent)`,\n        '--_rp-button-custom-fg': customColor,\n    } satisfies CSSProperties;\n}\n"],"mappings":";;;;;;;;;;;;;AAIA,SAAgB,oBAAoB,OAAgC;CAChE,MAAM,cAAc,wBAAwB,KAAK;CACjD,IAAI,CAAC,aAAa,OAAO,KAAA;CAEzB,OAAO;EACH,6BAA6B;EAC7B,6BAA6B,sBAAsB,YAAY;EAC/D,8BAA8B,sBAAsB,YAAY;EAChE,0BAA0B;EAC1B,iCAAiC,sBAAsB,YAAY;EACnE,uCAAuC,sBAAsB,YAAY;EACzE,wCAAwC,sBAAsB,YAAY;EAC1E,8BAA8B,sBAAsB,YAAY;EAChE,oCAAoC,sBAAsB,YAAY;EACtE,0BAA0B;CAC9B;AACJ"}