@rotki/ui-library 2.15.0 → 2.16.1

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,180 @@
+import { tv } from "../../../utils/tv.js";
+import { useTimeoutManager } from "../../../composables/timeout-manager.js";
+import { getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-visible",
+	"data-position",
+	"data-mini",
+	"aria-label",
+	"aria-hidden"
+];
+var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiNavigationDrawer",
+	inheritAttrs: false,
+	__name: "RuiNavigationDrawer",
+	props: /* @__PURE__ */ mergeModels({
+		temporary: {
+			type: Boolean,
+			default: false
+		},
+		stateless: {
+			type: Boolean,
+			default: false
+		},
+		width: { default: 360 },
+		miniVariant: {
+			type: Boolean,
+			default: false
+		},
+		overlay: {
+			type: Boolean,
+			default: false
+		},
+		position: { default: "left" },
+		classNames: {},
+		contentClass: { default: "" },
+		ariaLabel: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			default: false
+		},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["closed"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const modelValue = useModel(__props, "modelValue");
+		const emit = __emit;
+		const transitioning = ref(false);
+		const content = useTemplateRef("content");
+		const leaveTimeout = useTimeoutManager();
+		const clickOutsideTimeout = useTimeoutManager();
+		const alive = computed(() => get$1(modelValue) || get$1(transitioning) || __props.miniVariant);
+		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
+		const activatorAttrs = { onClick: toggle };
+		const drawer = tv({
+			base: "transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]",
+			variants: {
+				position: {
+					left: "left-0",
+					right: "right-0"
+				},
+				visible: {
+					true: "translate-x-0",
+					false: ""
+				},
+				mini: {
+					true: "translate-x-0",
+					false: ""
+				},
+				withOverlay: {
+					true: "z-[10000]",
+					false: "z-[7]"
+				}
+			},
+			compoundVariants: [
+				{
+					position: "left",
+					visible: false,
+					mini: false,
+					class: "-translate-x-full"
+				},
+				{
+					position: "right",
+					visible: false,
+					mini: false,
+					class: "translate-x-full"
+				},
+				{
+					mini: true,
+					visible: false,
+					class: "!w-14"
+				}
+			],
+			defaultVariants: {
+				position: "left",
+				visible: false,
+				mini: false,
+				withOverlay: false
+			}
+		});
+		const ui = computed(() => drawer({
+			position: __props.position,
+			visible: modelValue.value,
+			mini: __props.miniVariant,
+			withOverlay: __props.overlay
+		}));
+		function toggle() {
+			set$1(modelValue, !get$1(modelValue));
+		}
+		function close() {
+			set$1(modelValue, false);
+		}
+		function onLeaveComplete() {
+			leaveTimeout.clear();
+			if (get$1(transitioning)) {
+				set$1(transitioning, false);
+				emit("closed");
+			}
+		}
+		watch(modelValue, (value) => {
+			if (!value) {
+				set$1(transitioning, true);
+				leaveTimeout.create(onLeaveComplete, 250);
+			}
+		});
+		onClickOutside(content, () => {
+			if (get$1(modelValue) && __props.temporary && !__props.stateless) clickOutsideTimeout.create(close, 50);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", null, [renderSlot(_ctx.$slots, "activator", normalizeProps(guardReactiveProps({
+				open: modelValue.value,
+				attrs: activatorAttrs
+			}))), (openBlock(), createBlock(Teleport, { to: "body" }, [__props.overlay ? (openBlock(), createBlock(Transition, {
+				key: 0,
+				"enter-from-class": "opacity-0",
+				"enter-active-class": "transition-opacity ease-out duration-200",
+				"enter-to-class": "opacity-100",
+				"leave-from-class": "opacity-100",
+				"leave-active-class": "transition-opacity ease-in duration-200",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: withCtx(() => [modelValue.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-id": "overlay",
+					class: "absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => close(), ["stop"]))
+				})) : createCommentVNode("", true)]),
+				_: 1
+			})) : createCommentVNode("", true), unref(alive) ? (openBlock(), createElementBlock("aside", mergeProps({
+				key: 1,
+				ref_key: "content",
+				ref: content,
+				"data-id": "drawer-content",
+				style: unref(style),
+				"data-visible": modelValue.value || void 0,
+				"data-position": __props.position,
+				"data-mini": __props.miniVariant || void 0,
+				class: [
+					unref(ui),
+					__props.temporary && modelValue.value && "shadow-5",
+					__props.classNames?.content ?? __props.contentClass,
+					__props.classNames?.root
+				],
+				"aria-label": __props.ariaLabel,
+				"aria-hidden": __props.miniVariant && !modelValue.value ? "true" : void 0
+			}, unref(getRootAttrs)(_ctx.$attrs)), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+				attrs: activatorAttrs,
+				close
+			})))], 16, _hoisted_1)) : createCommentVNode("", true)]))]);
+		};
+	}
+});
+//#endregion
+export { RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { MaybeElement } from '@vueuse/core';\nimport type { VueClassValue } from '@/types/class-value';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiNavigationDrawerClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n}\n\nexport interface NavigationDrawerProps {\n  temporary?: boolean;\n  stateless?: boolean;\n  width?: string | number;\n  miniVariant?: boolean;\n  overlay?: boolean;\n  position?: 'left' | 'right';\n  classNames?: RuiNavigationDrawerClassNames;\n  /** @deprecated Use `classNames.content` instead */\n  contentClass?: string | object | string[];\n  ariaLabel?: string;\n}\n\ndefineOptions({\n  name: 'RuiNavigationDrawer',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ default: false });\n\nconst {\n  temporary = false,\n  stateless = false,\n  width = 360,\n  miniVariant = false,\n  overlay = false,\n  position = 'left',\n  classNames,\n  contentClass = '',\n  ariaLabel,\n} = defineProps<NavigationDrawerProps>();\n\nconst emit = defineEmits<{\n  closed: [];\n}>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; attrs: { onClick: () => void } }) => any;\n  default?: (props: { attrs: { onClick: () => void }; close: () => void }) => any;\n}>();\n\nconst transitioning = ref<boolean>(false);\nconst content = useTemplateRef<MaybeElement>('content');\nconst leaveTimeout = useTimeoutManager();\nconst clickOutsideTimeout = useTimeoutManager();\n\nconst alive = computed<boolean>(() => get(modelValue) || get(transitioning) || miniVariant);\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst activatorAttrs: { onClick: () => void } = {\n  onClick: toggle,\n};\n\nconst drawer = tv({\n  base: 'transition-[transform,width] duration-200 ease-in-out top-0 h-full fixed text-rui-text bg-white dark:bg-[#363636]',\n  variants: {\n    position: {\n      left: 'left-0',\n      right: 'right-0',\n    },\n    visible: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    mini: {\n      true: 'translate-x-0',\n      false: '',\n    },\n    withOverlay: {\n      true: 'z-[10000]',\n      false: 'z-[7]',\n    },\n  },\n  compoundVariants: [\n    { position: 'left', visible: false, mini: false, class: '-translate-x-full' },\n    { position: 'right', visible: false, mini: false, class: 'translate-x-full' },\n    { mini: true, visible: false, class: '!w-14' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false },\n});\n\nconst ui = computed<string>(() => drawer({ position, visible: modelValue.value, mini: miniVariant, withOverlay: overlay }));\n\nfunction toggle(): void {\n  set(modelValue, !get(modelValue));\n}\n\nfunction close(): void {\n  set(modelValue, false);\n}\n\nfunction onLeaveComplete(): void {\n  leaveTimeout.clear();\n  if (get(transitioning)) {\n    set(transitioning, false);\n    emit('closed');\n  }\n}\n\nwatch(modelValue, (value) => {\n  if (!value) {\n    set(transitioning, true);\n    // Match CSS transition duration (200ms) + buffer\n    leaveTimeout.create(onLeaveComplete, 250);\n  }\n});\n\n// Debounce prevents activator click from immediately triggering close\n// (click bubbles to body → onClickOutside fires in the same tick)\nonClickOutside(content, () => {\n  if (get(modelValue) && temporary && !stateless) {\n    clickOutsideTimeout.create(close, 50);\n  }\n});\n</script>\n\n<template>\n  <div>\n    <slot\n      name=\"activator\"\n      v-bind=\"{ open: modelValue, attrs: activatorAttrs }\"\n    />\n    <Teleport to=\"body\">\n      <Transition\n        v-if=\"overlay\"\n        enter-from-class=\"opacity-0\"\n        enter-active-class=\"transition-opacity ease-out duration-200\"\n        enter-to-class=\"opacity-100\"\n        leave-from-class=\"opacity-100\"\n        leave-active-class=\"transition-opacity ease-in duration-200\"\n        leave-to-class=\"opacity-0\"\n      >\n        <div\n          v-if=\"modelValue\"\n          data-id=\"overlay\"\n          class=\"absolute inset-0 backdrop-blur bg-rui-grey-500/50 dark:bg-black/50 z-[10000]\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <aside\n        v-if=\"alive\"\n        ref=\"content\"\n        data-id=\"drawer-content\"\n        :style=\"style\"\n        :data-visible=\"modelValue || undefined\"\n        :data-position=\"position\"\n        :data-mini=\"miniVariant || undefined\"\n        :class=\"[\n          ui,\n          temporary && modelValue && 'shadow-5',\n          classNames?.content ?? contentClass,\n          classNames?.root,\n        ]\"\n        :aria-label=\"ariaLabel\"\n        :aria-hidden=\"miniVariant && !modelValue ? 'true' : undefined\"\n        v-bind=\"getRootAttrs($attrs)\"\n      >\n        <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n      </aside>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/notification/RuiNotification.js

@@ -0,0 +1,7 @@
+import RuiNotification_vue_vue_type_script_setup_true_lang_default from "./RuiNotification.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/notification/RuiNotification.vue
+var RuiNotification_default = RuiNotification_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiNotification_default as default };
+
+//# sourceMappingURL=RuiNotification.js.map

package/dist/components/overlays/notification/RuiNotification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiNotification.js","names":[],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        class=\"top-2 right-2 fixed drop-shadow-lg rounded-sm z-50\"\n        :class=\"{\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }\"\n        :style=\"style\"\n        v-bind=\"$attrs\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,70 @@
+import { transformPropsUnit } from "../../../utils/helpers.js";
+import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
+import { useTimeoutFn, watchImmediate } from "@vueuse/core";
+import { set as set$1 } from "@vueuse/shared";
+//#region src/components/overlays/notification/RuiNotification.vue?vue&type=script&setup=true&lang.ts
+var RuiNotification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiNotification",
+	inheritAttrs: false,
+	__name: "RuiNotification",
+	props: /* @__PURE__ */ mergeModels({
+		timeout: {},
+		width: { default: 400 },
+		theme: {}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			required: true
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
+		const { start, stop } = useTimeoutFn(() => {
+			set$1(modelValue, false);
+		}, __props.timeout, { immediate: false });
+		function dismiss() {
+			if (__props.timeout < 0) return;
+			set$1(modelValue, false);
+		}
+		watchImmediate(modelValue, (display) => {
+			if (!display) {
+				stop();
+				return;
+			}
+			if (__props.timeout > 0) {
+				stop();
+				start();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, {
+				"enter-from-class": "opacity-0",
+				"enter-active-class": "ease-out duration-150",
+				"enter-to-class": "opacity-100",
+				"leave-from-class": "opacity-100",
+				"leave-active-class": "ease-in duration-100",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: withCtx(() => [modelValue.value ? (openBlock(), createElementBlock("div", mergeProps({
+					key: 0,
+					role: "alert",
+					"aria-live": "polite",
+					class: ["top-2 right-2 fixed drop-shadow-lg rounded-sm z-50", {
+						"bg-white dark:bg-[#363636]": !__props.theme,
+						"bg-white text-rui-light-text": __props.theme === "light",
+						"bg-[#363636] text-rui-dark-text": __props.theme === "dark"
+					}],
+					style: unref(style)
+				}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => dismiss()) }), [renderSlot(_ctx.$slots, "default")], 16)) : createCommentVNode("", true)]),
+				_: 3
+			})]);
+		};
+	}
+});
+//#endregion
+export { RuiNotification_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiNotification.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\n\nexport interface NotificationProps {\n  timeout: number;\n  width?: number | string;\n  theme?: 'light' | 'dark';\n}\n\ndefineOptions({\n  name: 'RuiNotification',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\n\nconst { timeout, width = 400, theme } = defineProps<NotificationProps>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst style = computed<{ width: string | undefined }>(() => ({\n  width: transformPropsUnit(width),\n}));\n\nconst { start, stop } = useTimeoutFn(() => {\n  set(modelValue, false);\n}, timeout, { immediate: false });\n\nfunction dismiss(): void {\n  if (timeout < 0)\n    return;\n\n  set(modelValue, false);\n}\n\nwatchImmediate(modelValue, (display) => {\n  if (!display) {\n    stop();\n    return;\n  }\n\n  if (timeout > 0) {\n    stop();\n    start();\n  }\n});\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition\n      enter-from-class=\"opacity-0\"\n      enter-active-class=\"ease-out duration-150\"\n      enter-to-class=\"opacity-100\"\n      leave-from-class=\"opacity-100\"\n      leave-active-class=\"ease-in duration-100\"\n      leave-to-class=\"opacity-0\"\n    >\n      <div\n        v-if=\"modelValue\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        class=\"top-2 right-2 fixed drop-shadow-lg rounded-sm z-50\"\n        :class=\"{\n          'bg-white dark:bg-[#363636]': !theme,\n          'bg-white text-rui-light-text': theme === 'light',\n          'bg-[#363636] text-rui-dark-text': theme === 'dark',\n        }\"\n        :style=\"style\"\n        v-bind=\"$attrs\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,aAAa,SAAoB,SAAA,aAAoB;EAQ3D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,MAAM,EACjC,EAAE;EAEH,MAAM,EAAE,OAAO,SAAS,mBAAmB;AACzC,SAAI,YAAY,MAAM;KACrB,QAAA,SAAS,EAAE,WAAW,OAAO,CAAC;EAEjC,SAAS,UAAgB;AACvB,OAAI,QAAA,UAAU,EACZ;AAEF,SAAI,YAAY,MAAM;;AAGxB,iBAAe,aAAa,YAAY;AACtC,OAAI,CAAC,SAAS;AACZ,UAAM;AACN;;AAGF,OAAI,QAAA,UAAU,GAAG;AACf,UAAM;AACN,WAAO;;IAET;;uBAIA,YA0BW,UAAA,EA1BD,IAAG,QAAM,EAAA,CACjB,YAwBa,YAAA;IAvBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;2BAiBT,CAdE,WAAA,SAAA,WAAA,EADR,mBAeM,OAfN,WAeM;;KAbJ,MAAK;KACL,aAAU;KACV,OAAK,CAAC,sDAAoD;qCACP,QAAA;sCAAiD,QAAA,UAAK;yCAA2D,QAAA,UAAK;;KAKxK,OAAO,MAAA,MAAA;OACAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAO,GAAA,CAAA,EAAA,CAEf,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/overlays/tooltip/RuiTooltip.js

@@ -0,0 +1,7 @@
+import RuiTooltip_vue_vue_type_script_setup_true_lang_default from "./RuiTooltip.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/overlays/tooltip/RuiTooltip.vue
+var RuiTooltip_default = RuiTooltip_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiTooltip_default as default };
+
+//# sourceMappingURL=RuiTooltip.js.map

package/dist/components/overlays/tooltip/RuiTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTooltip.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    class=\"relative inline-flex\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/overlays/tooltip/RuiTooltip.vue.d.ts

@@ -1,4 +1,10 @@
+import type { VueClassValue } from '../../../types/class-value';
+import { type FloatingOptions } from '../../../composables/floating.js';
 import { type PopperOptions } from '../../../composables/popper.js';
+export interface RuiTooltipClassNames {
+    root?: VueClassValue;
+    tooltip?: VueClassValue;
+}
 export interface Props {
     text?: string | null;
     disabled?: boolean;
@@ -6,7 +12,11 @@ export interface Props {
     openDelay?: number;
     closeDelay?: number;
     persistOnTooltipHover?: boolean;
+    options?: FloatingOptions;
+    /** @deprecated Use `options` instead */
     popper?: PopperOptions;
+    classNames?: RuiTooltipClassNames;
+    /** @deprecated Use `classNames.tooltip` instead */
     tooltipClass?: string;
 }
 type __VLS_Slots = {

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,107 @@
+import { useFloating } from "../../../composables/floating.js";
+import { toFloatingOptions } from "../../../composables/popper.js";
+import { tooltipStyles } from "./tooltip-styles.js";
+import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/overlays/tooltip/RuiTooltip.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-tooltip-disabled", "aria-describedby"];
+var _hoisted_2 = ["id", "data-placement"];
+var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTooltip",
+	__name: "RuiTooltip",
+	props: {
+		text: { default: null },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		hideArrow: {
+			type: Boolean,
+			default: false
+		},
+		openDelay: { default: 0 },
+		closeDelay: { default: 500 },
+		persistOnTooltipHover: {
+			type: Boolean,
+			default: false
+		},
+		options: {},
+		popper: {},
+		classNames: {},
+		tooltipClass: { default: "" }
+	},
+	setup(__props, { expose: __expose }) {
+		const tooltipId = useId();
+		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.popper ? toFloatingOptions(__props.popper) : __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
+		const placementSide = computed(() => {
+			const placement = get(currentPlacement);
+			if (placement.startsWith("top")) return "top";
+			if (placement.startsWith("left")) return "left";
+			if (placement.startsWith("right")) return "right";
+			return "bottom";
+		});
+		__expose({
+			onOpen,
+			onClose
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "activator",
+				ref: activator,
+				class: "relative inline-flex",
+				"data-tooltip-disabled": __props.disabled,
+				"aria-describedby": !__props.disabled && unref(open) ? unref(tooltipId) : void 0,
+				onMouseover: _cache[4] || (_cache[4] = ($event) => unref(onOpen)()),
+				onMouseleave: _cache[5] || (_cache[5] = ($event) => unref(onClose)()),
+				onFocusin: _cache[6] || (_cache[6] = ($event) => unref(onOpen)()),
+				onFocusout: _cache[7] || (_cache[7] = ($event) => unref(onClose)())
+			}, [renderSlot(_ctx.$slots, "activator", {
+				open: unref(open),
+				close: unref(onClose)
+			}), !__props.disabled ? (openBlock(), createBlock(Teleport, {
+				key: 0,
+				to: "body"
+			}, [unref(visible) ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(tooltipId),
+				ref_key: "tooltip",
+				ref: tooltip,
+				class: normalizeClass(["w-max z-[9999]", __props.classNames?.tooltip ?? __props.tooltipClass]),
+				role: "tooltip",
+				"data-placement": unref(currentPlacement)
+			}, [createVNode(TransitionGroup, {
+				"enter-active-class": "transition ease-out duration-200",
+				"enter-from-class": "opacity-0 translate-y-1",
+				"enter-to-class": "opacity-100 translate-y-0",
+				"leave-active-class": "transition ease-in duration-150",
+				"leave-from-class": "opacity-100 translate-y-0",
+				"leave-to-class": "opacity-0 translate-y-1",
+				onBeforeEnter: _cache[2] || (_cache[2] = ($event) => unref(updatePosition)()),
+				onAfterLeave: _cache[3] || (_cache[3] = ($event) => unref(onLeaveComplete)())
+			}, {
+				default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", {
+					key: "tooltip",
+					class: "px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow",
+					"data-id": "content",
+					onMouseover: _cache[0] || (_cache[0] = ($event) => __props.persistOnTooltipHover && unref(onOpen)()),
+					onMouseleave: _cache[1] || (_cache[1] = ($event) => __props.persistOnTooltipHover && unref(onClose)())
+				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])], 32)) : createCommentVNode("", true), !__props.hideArrow ? (openBlock(), createElementBlock("span", {
+					key: "arrow",
+					class: normalizeClass(unref(tooltipStyles)({
+						open: unref(open),
+						side: unref(placementSide)
+					}).arrow()),
+					"data-id": "arrow"
+				}, [createElementVNode("span", { class: normalizeClass(unref(tooltipStyles)({
+					open: unref(open),
+					side: unref(placementSide)
+				}).diamond()) }, null, 2)], 2)) : createCommentVNode("", true)]),
+				_: 3
+			})], 10, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 40, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiTooltip_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTooltip.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTooltip.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { type PopperOptions, toFloatingOptions } from '@/composables/popper';\nimport { tooltipStyles } from './tooltip-styles';\n\nexport interface RuiTooltipClassNames {\n  root?: VueClassValue;\n  tooltip?: VueClassValue;\n}\n\nexport interface Props {\n  text?: string | null;\n  disabled?: boolean;\n  hideArrow?: boolean;\n  openDelay?: number;\n  closeDelay?: number;\n  persistOnTooltipHover?: boolean;\n  options?: FloatingOptions;\n  /** @deprecated Use `options` instead */\n  popper?: PopperOptions;\n  classNames?: RuiTooltipClassNames;\n  /** @deprecated Use `classNames.tooltip` instead */\n  tooltipClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  popper,\n  classNames,\n  tooltipClass = '',\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst tooltipId = useId();\n\nconst {\n  reference: activator,\n  popover: tooltip,\n  open,\n  visible,\n  currentPlacement,\n  onOpen,\n  onClose,\n  onLeaveComplete,\n  updatePosition,\n} = useFloating(\n  () => popper ? toFloatingOptions(popper) : (options ?? {}),\n  () => disabled,\n  () => openDelay,\n  () => closeDelay,\n);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\nconst placementSide = computed<PlacementSide>(() => {\n  const placement = get(currentPlacement);\n  if (placement.startsWith('top'))\n    return 'top';\n  if (placement.startsWith('left'))\n    return 'left';\n  if (placement.startsWith('right'))\n    return 'right';\n  return 'bottom';\n});\n\ndefineExpose({\n  onOpen,\n  onClose,\n});\n</script>\n\n<template>\n  <div\n    ref=\"activator\"\n    class=\"relative inline-flex\"\n    :data-tooltip-disabled=\"disabled\"\n    :aria-describedby=\"!disabled && open ? tooltipId : undefined\"\n    @mouseover=\"onOpen()\"\n    @mouseleave=\"onClose()\"\n    @focusin=\"onOpen()\"\n    @focusout=\"onClose()\"\n  >\n    <slot\n      name=\"activator\"\n      :open=\"open\"\n      :close=\"onClose\"\n    />\n\n    <Teleport\n      v-if=\"!disabled\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        class=\"w-max z-[9999]\"\n        :class=\"classNames?.tooltip ?? tooltipClass\"\n        role=\"tooltip\"\n        :data-placement=\"currentPlacement\"\n      >\n        <TransitionGroup\n          enter-active-class=\"transition ease-out duration-200\"\n          enter-from-class=\"opacity-0 translate-y-1\"\n          enter-to-class=\"opacity-100 translate-y-0\"\n          leave-active-class=\"transition ease-in duration-150\"\n          leave-from-class=\"opacity-100 translate-y-0\"\n          leave-to-class=\"opacity-0 translate-y-1\"\n          @before-enter=\"updatePosition()\"\n          @after-leave=\"onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-2 text-xs font-normal bg-rui-grey-700/90 text-white rounded shadow\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <slot>\n              {{ text }}\n            </slot>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide }).diamond()\" />\n          </span>\n        </TransitionGroup>\n      </div>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,MAAM,YAAY,OAAO;EAEzB,MAAM,EACJ,WAAW,WACX,SAAS,SACT,MACA,SACA,kBACA,QACA,SACA,iBACA,mBACE,kBACI,QAAA,SAAS,kBAAkB,QAAA,OAAO,GAAI,QAAA,WAAW,EAAE,QACnD,QAAA,gBACA,QAAA,iBACA,QAAA,WACP;EAID,MAAM,gBAAgB,eAA8B;GAClD,MAAM,YAAY,IAAI,iBAAiB;AACvC,OAAI,UAAU,WAAW,MAAM,CAC7B,QAAO;AACT,OAAI,UAAU,WAAW,OAAO,CAC9B,QAAO;AACT,OAAI,UAAU,WAAW,QAAQ,CAC/B,QAAO;AACT,UAAO;IACP;AAEF,WAAa;GACX;GACA;GACD,CAAC;;uBAIA,mBA8DM,OAAA;aA7DA;IAAJ,KAAI;IACJ,OAAM;IACL,yBAAuB,QAAA;IACvB,oBAAgB,CAAG,QAAA,YAAY,MAAA,KAAI,GAAG,MAAA,UAAS,GAAG,KAAA;IAClD,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,EAAA;IACjB,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAO,EAAA;IACnB,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,OAAM,EAAA;IACf,YAAQ,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,QAAO,EAAA;OAElB,WAIE,KAAA,QAAA,aAAA;IAFC,MAAM,MAAA,KAAI;IACV,OAAO,MAAA,QAAA;QAID,QAAA,YAAA,WAAA,EADT,YA6CW,UAAA;;IA3CT,IAAG;OAGK,MAAA,QAAO,IAAA,WAAA,EADf,mBAwCM,OAAA;;IAtCH,IAAI,MAAA,UAAS;aACV;IAAJ,KAAI;IACJ,OAAK,eAAA,CAAC,kBACE,QAAA,YAAY,WAAW,QAAA,aAAY,CAAA;IAC3C,MAAK;IACJ,kBAAgB,MAAA,iBAAA;OAEjB,YA8BkB,iBAAA;IA7BhB,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;IACjB,kBAAe;IACd,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,eAAc,EAAA;IAC5B,cAAW,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,gBAAe,EAAA;;2BAavB,CAVE,MAAA,KAAI,IAAA,WAAA,EADZ,mBAWM,OAAA;KATJ,KAAI;KACJ,OAAM;KACN,WAAQ;KACP,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,yBAAyB,MAAA,OAAM,EAAA;KAC1C,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,yBAAyB,MAAA,QAAO,EAAA;QAE7C,WAEO,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,KAAA,EAAA,CAIF,QAAA,aAAA,WAAA,EADT,mBAOO,QAAA;KALL,KAAI;KACH,OAAK,eAAE,MAAA,cAAa,CAAA;MAAA,MAAG,MAAA,KAAI;MAAA,MAAQ,MAAA,cAAA;MAAa,CAAA,CAAI,OAAK,CAAA;KAC1D,WAAQ;QAER,mBAAwE,QAAA,EAAjE,OAAK,eAAE,MAAA,cAAa,CAAA;KAAA,MAAG,MAAA,KAAI;KAAA,MAAQ,MAAA,cAAA;KAAa,CAAA,CAAI,SAAO,CAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/overlays/tooltip/tooltip-styles.d.ts

@@ -0,0 +1,91 @@
+export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            arrow: string;
+        };
+        false: {
+            arrow: string;
+        };
+    };
+    side: {
+        top: {
+            arrow: string;
+            diamond: string;
+        };
+        bottom: {
+            arrow: string;
+            diamond: string;
+        };
+        left: {
+            arrow: string;
+            diamond: string;
+        };
+        right: {
+            arrow: string;
+            diamond: string;
+        };
+    };
+}, {
+    arrow: string;
+    diamond: string;
+}, undefined, {
+    open: {
+        true: {
+            arrow: string;
+        };
+        false: {
+            arrow: string;
+        };
+    };
+    side: {
+        top: {
+            arrow: string;
+            diamond: string;
+        };
+        bottom: {
+            arrow: string;
+            diamond: string;
+        };
+        left: {
+            arrow: string;
+            diamond: string;
+        };
+        right: {
+            arrow: string;
+            diamond: string;
+        };
+    };
+}, {
+    arrow: string;
+    diamond: string;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            arrow: string;
+        };
+        false: {
+            arrow: string;
+        };
+    };
+    side: {
+        top: {
+            arrow: string;
+            diamond: string;
+        };
+        bottom: {
+            arrow: string;
+            diamond: string;
+        };
+        left: {
+            arrow: string;
+            diamond: string;
+        };
+        right: {
+            arrow: string;
+            diamond: string;
+        };
+    };
+}, {
+    arrow: string;
+    diamond: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/overlays/tooltip/tooltip-styles.js

@@ -0,0 +1,40 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/overlays/tooltip/tooltip-styles.ts
+var tooltipStyles = tv({
+	slots: {
+		arrow: "absolute block w-2.5 h-2.5 transition-opacity",
+		diamond: "block border-[0.3125rem] origin-center border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90 rounded-[0_0.125rem_0_0]"
+	},
+	variants: {
+		open: {
+			true: { arrow: "opacity-100" },
+			false: { arrow: "opacity-0" }
+		},
+		side: {
+			top: {
+				arrow: "bottom-[calc(0.5px-0.3125rem)]",
+				diamond: "rotate-[135deg]"
+			},
+			bottom: {
+				arrow: "top-[calc(0.5px-0.3125rem)]",
+				diamond: "-rotate-45"
+			},
+			left: {
+				arrow: "right-[calc(0.5px-0.3125rem)]",
+				diamond: "rotate-45"
+			},
+			right: {
+				arrow: "left-[calc(0.5px-0.3125rem)]",
+				diamond: "-rotate-[135deg]"
+			}
+		}
+	},
+	defaultVariants: {
+		open: false,
+		side: "bottom"
+	}
+});
+//#endregion
+export { tooltipStyles };
+
+//# sourceMappingURL=tooltip-styles.js.map

package/dist/components/overlays/tooltip/tooltip-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-styles.js","names":[],"sources":["../../../../src/components/overlays/tooltip/tooltip-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const tooltipStyles = tv({\n  slots: {\n    arrow: 'absolute block w-2.5 h-2.5 transition-opacity',\n    diamond: 'block border-[0.3125rem] origin-center border-l-transparent border-b-transparent border-t-rui-grey-700/90 border-r-rui-grey-700/90 rounded-[0_0.125rem_0_0]',\n  },\n  variants: {\n    open: {\n      true: { arrow: 'opacity-100' },\n      false: { arrow: 'opacity-0' },\n    },\n    side: {\n      top: {\n        arrow: 'bottom-[calc(0.5px-0.3125rem)]',\n        diamond: 'rotate-[135deg]',\n      },\n      bottom: {\n        arrow: 'top-[calc(0.5px-0.3125rem)]',\n        diamond: '-rotate-45',\n      },\n      left: {\n        arrow: 'right-[calc(0.5px-0.3125rem)]',\n        diamond: 'rotate-45',\n      },\n      right: {\n        arrow: 'left-[calc(0.5px-0.3125rem)]',\n        diamond: '-rotate-[135deg]',\n      },\n    },\n  },\n  defaultVariants: { open: false, side: 'bottom' },\n});\n"],"mappings":";;AAEA,IAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,OAAO;EACP,SAAS;EACV;CACD,UAAU;EACR,MAAM;GACJ,MAAM,EAAE,OAAO,eAAe;GAC9B,OAAO,EAAE,OAAO,aAAa;GAC9B;EACD,MAAM;GACJ,KAAK;IACH,OAAO;IACP,SAAS;IACV;GACD,QAAQ;IACN,OAAO;IACP,SAAS;IACV;GACD,MAAM;IACJ,OAAO;IACP,SAAS;IACV;GACD,OAAO;IACL,OAAO;IACP,SAAS;IACV;GACF;EACF;CACD,iBAAiB;EAAE,MAAM;EAAO,MAAM;EAAU;CACjD,CAAC"}

package/dist/components/progress/RuiProgress.js

@@ -0,0 +1,7 @@
+import RuiProgress_vue_vue_type_script_setup_true_lang_default from "./RuiProgress.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/progress/RuiProgress.vue
+var RuiProgress_default = RuiProgress_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiProgress_default as default };
+
+//# sourceMappingURL=RuiProgress.js.map

package/dist/components/progress/RuiProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiProgress.js","names":[],"sources":["../../../src/components/progress/RuiProgress.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ProgressVariant } from '@/components/progress/progress-props';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  /**\n   * in percentage value, required when variant === determinate or buffer\n   * @example - 0 <= value <= 100\n   */\n  value?: number;\n  /**\n   * in percentage value, required when variant === buffer\n   * @example - 0 <= value <= 100\n   */\n  bufferValue?: number;\n  variant?: ProgressVariant;\n  color?: ContextColorsType | 'inherit';\n  circular?: boolean;\n  showLabel?: boolean;\n  /**\n   * Sets the stroke thickness in pixels\n   */\n  thickness?: number | string;\n  /**\n   * only used for circular progress\n   */\n  size?: number | string;\n}\n\ndefineOptions({\n  name: 'RuiProgress',\n});\n\nconst {\n  value = 0,\n  bufferValue = 0,\n  variant = ProgressVariant.determinate,\n  color = 'inherit',\n  circular = false,\n  showLabel = false,\n  thickness = 4,\n  size = 40,\n} = defineProps<Props>();\n\ndefineSlots<Record<string, never>>();\n\nconst CIRCLE_RADIUS = 20;\nconst CIRCLE_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_RADIUS; // ~125.66\n\nfunction clampPercent(val: number | undefined): number {\n  return Math.max(0, Math.min(val ?? 100, 100));\n}\n\nconst progressStyles = tv({\n  slots: {\n    wrapper: '',\n    progressbar: 'w-full overflow-hidden relative',\n    rail: 'w-full h-full',\n    bar: 'transition-all duration-150 ease-in-out absolute left-0 top-0 h-full w-full',\n    indeterminateBar: 'absolute left-0 top-0 h-full w-auto transition-transform duration-200 ease-linear origin-left animate-slide-rail',\n    bufferDots: 'absolute h-0 w-[200%] -top-px -left-full border-dashed border-y-[0.2rem] animate-buffer-pulse',\n    bufferRail: 'w-full h-full transition-transform duration-200 ease-linear origin-left',\n    circularContainer: 'inline-block relative',\n    svg: 'block',\n    circle: 'stroke-current',\n    label: 'dark:text-white',\n  },\n  variants: {\n    color: {\n      primary: { circularContainer: 'text-rui-primary' },\n      secondary: { circularContainer: 'text-rui-secondary' },\n      error: { circularContainer: 'text-rui-error' },\n      warning: { circularContainer: 'text-rui-warning' },\n      info: { circularContainer: 'text-rui-info' },\n      success: { circularContainer: 'text-rui-success' },\n      inherit: { circularContainer: 'text-current' },\n    },\n    variant: {\n      [ProgressVariant.determinate]: { svg: '-rotate-90' },\n      [ProgressVariant.indeterminate]: {\n        svg: 'animate-circular-spin',\n        circle: 'animate-collapse-stroke [stroke-dasharray:80px,200px] [stroke-linecap:round]',\n      },\n      [ProgressVariant.buffer]: {},\n    },\n    circular: {\n      true: { wrapper: 'inline-flex' },\n      false: { wrapper: 'w-full' },\n    },\n    hasLabel: {\n      true: { wrapper: 'inline-flex items-center relative' },\n    },\n  },\n  compoundVariants: [\n    // Linear label\n    { circular: false, hasLabel: true, class: { label: 'block text-sm ml-4' } },\n    // Circular label (overlays the circle)\n    { circular: true, hasLabel: true, class: { label: 'absolute inset-0 flex items-center justify-center text-[0.6rem] leading-none' } },\n  ],\n  compoundSlots: [\n    // Rail background (track behind the bar)\n    { slots: ['rail', 'bufferDots'], color: 'primary', class: 'bg-rui-primary/20 border-rui-primary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'secondary', class: 'bg-rui-secondary/20 border-rui-secondary/20' },\n    { slots: ['rail', 'bufferDots'], color: 'error', class: 'bg-rui-error/20 border-rui-error/20' },\n    { slots: ['rail', 'bufferDots'], color: 'warning', class: 'bg-rui-warning/20 border-rui-warning/20' },\n    { slots: ['rail', 'bufferDots'], color: 'info', class: 'bg-rui-info/20 border-rui-info/20' },\n    { slots: ['rail', 'bufferDots'], color: 'success', class: 'bg-rui-success/20 border-rui-success/20' },\n    { slots: ['rail', 'bufferDots'], color: 'inherit', class: 'bg-current opacity-20 border-current' },\n\n    // Bar fill (active progress)\n    { slots: ['bar', 'indeterminateBar'], color: 'primary', class: 'bg-rui-primary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'secondary', class: 'bg-rui-secondary' },\n    { slots: ['bar', 'indeterminateBar'], color: 'error', class: 'bg-rui-error' },\n    { slots: ['bar', 'indeterminateBar'], color: 'warning', class: 'bg-rui-warning' },\n    { slots: ['bar', 'indeterminateBar'], color: 'info', class: 'bg-rui-info' },\n    { slots: ['bar', 'indeterminateBar'], color: 'success', class: 'bg-rui-success' },\n    { slots: ['bar', 'indeterminateBar'], color: 'inherit', class: 'bg-current' },\n  ],\n});\n\nconst hasLabel = computed<boolean>(() => showLabel && variant !== ProgressVariant.indeterminate);\n\nconst ui = computed<ReturnType<typeof progressStyles>>(() => progressStyles({\n  color,\n  variant,\n  circular,\n  hasLabel: get(hasLabel),\n}));\n\nconst currentValue = computed<number>(() => clampPercent(value));\n\nconst label = computed<string>(() => `${Math.floor(get(currentValue))}%`);\n\nconst progress = computed<number>(() => -100 + get(currentValue));\n\nconst barStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${get(progress)}%)`,\n}));\n\nconst bufferRailStyle = computed<Record<string, string>>(() => ({\n  transform: `translateX(${-100 + clampPercent(bufferValue)}%)`,\n}));\n\nconst linearStyle = computed<Record<string, string>>(() => ({\n  height: `${+thickness}px`,\n}));\n\nconst circularSize = computed<Record<string, string>>(() => ({\n  width: `${+size}px`,\n  height: `${+size}px`,\n}));\n\nconst circularGeometry = computed<{ scaledThickness: number; viewSize: number }>(() => {\n  const scaledThickness = (+thickness * 32) / +size;\n  return { scaledThickness, viewSize: 40 + scaledThickness };\n});\n\nconst circularStrokeStyle = computed<Record<string, string>>(() => ({\n  strokeDasharray: `${CIRCLE_CIRCUMFERENCE}`,\n  strokeDashoffset: `${(get(progress) / 100) * -CIRCLE_CIRCUMFERENCE}`,\n  transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',\n}));\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <!-- Circular progress (not supported for buffer variant) -->\n    <div\n      v-if=\"circular && variant !== ProgressVariant.buffer\"\n      :aria-valuenow=\"value\"\n      :class=\"ui.circularContainer()\"\n      :style=\"circularSize\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <svg\n        :class=\"ui.svg()\"\n        :viewBox=\"`0 0 ${circularGeometry.viewSize} ${circularGeometry.viewSize}`\"\n      >\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          :r=\"CIRCLE_RADIUS\"\n          :class=\"ui.circle()\"\n          :style=\"variant === ProgressVariant.determinate ? circularStrokeStyle : undefined\"\n          :stroke-width=\"circularGeometry.scaledThickness\"\n        />\n      </svg>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"ui.label()\"\n      >\n        {{ label }}\n      </div>\n    </div>\n\n    <!-- Linear progress (also used as fallback for circular + buffer) -->\n    <div\n      v-else\n      :aria-valuenow=\"value\"\n      :class=\"ui.progressbar()\"\n      :style=\"linearStyle\"\n      :data-variant=\"variant\"\n      :data-color=\"color\"\n      aria-valuemax=\"100\"\n      aria-valuemin=\"0\"\n      role=\"progressbar\"\n    >\n      <div\n        v-if=\"variant === ProgressVariant.buffer\"\n        :class=\"ui.bufferDots()\"\n      />\n      <div\n        :class=\"variant === ProgressVariant.buffer ? [ui.rail(), ui.bufferRail()] : ui.rail()\"\n        :style=\"variant === ProgressVariant.buffer ? bufferRailStyle : undefined\"\n      />\n      <div\n        v-if=\"variant === ProgressVariant.indeterminate\"\n        :class=\"ui.indeterminateBar()\"\n      />\n      <div\n        v-else\n        :class=\"ui.bar()\"\n        :style=\"barStyle\"\n      />\n    </div>\n\n    <!-- Linear label -->\n    <div\n      v-if=\"hasLabel && !circular\"\n      :class=\"ui.label()\"\n    >\n      {{ label }}\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/progress/RuiProgress.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ContextColorsType } from '../../consts/colors.js';
+import { ProgressVariant } from '../../components/progress/progress-props.js';
 export interface Props {
     /**
      * in percentage value, required when variant === determinate or buffer
@@ -10,7 +11,7 @@ export interface Props {
      * @example - 0 <= value <= 100
      */
     bufferValue?: number;
-    variant?: 'determinate' | 'indeterminate' | 'buffer';
+    variant?: ProgressVariant;
     color?: ContextColorsType | 'inherit';
     circular?: boolean;
     showLabel?: boolean;