@rotki/ui-library 3.1.7 → 3.3.0

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

@@ -1,8 +1,9 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { onClickOutside } from "../../../vendor/@vueuse/core/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.js";
 import { useTimeoutManager } from "../../../composables/timeout-manager.js";
 import { getRootAttrs, transformPropsUnit } from "../../../utils/helpers.js";
+import { navigationDrawerStyles } from "./navigation-drawer-styles.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, openBlock, ref, renderSlot, unref, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 //#region src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -58,72 +59,6 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		const alive = computed(() => get(modelValue) || get(transitioning) || __props.miniVariant);
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
 		const activatorAttrs = { onClick: toggle };
-		const drawer = tv({
-			base: "transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text",
-			variants: {
-				belowAppBar: {
-					true: "top-rui-app-bar",
-					false: "top-0"
-				},
-				temporary: {
-					true: "bg-rui-overlay",
-					false: "bg-rui-surface"
-				},
-				position: {
-					left: "left-0",
-					right: "right-0"
-				},
-				visible: {
-					true: "translate-x-0",
-					false: ""
-				},
-				mini: {
-					true: "translate-x-0",
-					false: ""
-				},
-				withOverlay: {
-					true: "z-rui-drawer",
-					false: "z-rui-app-bar"
-				}
-			},
-			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!"
-				},
-				{
-					temporary: false,
-					position: "left",
-					class: "border-r border-rui-divider"
-				},
-				{
-					temporary: false,
-					position: "right",
-					class: "border-l border-rui-divider"
-				}
-			],
-			defaultVariants: {
-				position: "left",
-				visible: false,
-				mini: false,
-				withOverlay: false,
-				temporary: false,
-				belowAppBar: false
-			}
-		});
 		/**
 		* Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for
 		* its first frame. Important, because the open position is already on the element.
@@ -131,13 +66,13 @@ var RuiNavigationDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE_
 		const enterFromClass = computed(() => __props.position === "left" ? "-translate-x-full!" : "translate-x-full!");
 		const overlayClass = computed(() => cn(["fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer", __props.belowAppBar ? "top-rui-app-bar" : "top-0"]) ?? "");
 		/**
-		* Consumer classes go through `drawer()` rather than alongside it, so
+		* Consumer classes go through `navigationDrawerStyles()` rather than alongside it, so
 		* tailwind-variants' twMerge resolves conflicts in the consumer's favour.
 		* Passed as an argument instead of read off `$attrs` here, so the template
 		* keeps using `$attrs` directly.
 		*/
 		function rootClass(attrsClass) {
-			return drawer({
+			return navigationDrawerStyles({
 				position: __props.position,
 				visible: modelValue.value,
 				mini: __props.miniVariant,

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_Transition","_withCtx","_normalizeClass","_unref","_withModifiers","_createCommentVNode","_createVNode","_mergeProps"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn, 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  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\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  ariaLabel,\n  belowAppBar = false,\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,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\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    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\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    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n\n/**\n * Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for\n * its first frame. Important, because the open position is already on the element.\n */\nconst enterFromClass = computed<string>(() => (position === 'left' ? '-translate-x-full!' : 'translate-x-full!'));\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `drawer()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return drawer({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\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// Debounced, so the activator's own click, which bubbles to the body, does not close it again\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=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <!-- leaves with no transition: it has already slid out, and its own would hold the removal for a transitionend that never comes -->\n      <Transition\n        :enter-from-class=\"enterFromClass\"\n        leave-active-class=\"duration-0!\"\n      >\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=\"rootClass($attrs.class)\"\n          :aria-label=\"ariaLabel\"\n          v-bind=\"getRootAttrs($attrs, [])\"\n        >\n          <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n        </aside>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_renderSlot","_normalizeProps","_guardReactiveProps","_createBlock","_Teleport","_Transition","_withCtx","_normalizeClass","_unref","_withModifiers","_createCommentVNode","_createVNode","_mergeProps"],"sources":["../../../../src/components/overlays/navigation-drawer/RuiNavigationDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ClassValue, HTMLAttributes } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport type { MaybeElement } from '@/types/dom';\nimport { useTimeoutManager } from '@/composables/timeout-manager';\nimport { getRootAttrs, transformPropsUnit } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\nimport { navigationDrawerStyles } from './navigation-drawer-styles';\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  ariaLabel?: string;\n  /**\n   * Starts the drawer, and its overlay, below the app bar (`--rui-app-bar-height`), so the app bar\n   * stays uncovered and usable while the drawer is open. Without it the drawer runs the full height and\n   * a modal one covers the app bar.\n   */\n  belowAppBar?: boolean;\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  ariaLabel,\n  belowAppBar = false,\n} = defineProps<NavigationDrawerProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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\n/**\n * Where the drawer starts its slide in: it mounts open, so the closed position has to be put on it for\n * its first frame. Important, because the open position is already on the element.\n */\nconst enterFromClass = computed<string>(() => (position === 'left' ? '-translate-x-full!' : 'translate-x-full!'));\n\n// the overlay dims what the drawer covers: the whole view, or only the part below the app bar\nconst overlayClass = computed<string>(() => cn([\n  'fixed inset-x-0 bottom-0 backdrop-blur-sm bg-rui-neutral-950/40 dark:bg-black/60 z-rui-drawer',\n  belowAppBar ? 'top-rui-app-bar' : 'top-0',\n]) ?? '');\n\n/**\n * Consumer classes go through `navigationDrawerStyles()` rather than alongside it, so\n * tailwind-variants' twMerge resolves conflicts in the consumer's favour.\n * Passed as an argument instead of read off `$attrs` here, so the template\n * keeps using `$attrs` directly.\n */\nfunction rootClass(attrsClass: ClassValue): string {\n  return navigationDrawerStyles({\n    position,\n    visible: modelValue.value,\n    mini: miniVariant,\n    withOverlay: overlay,\n    temporary,\n    belowAppBar,\n    class: cn([\n      temporary && modelValue.value && 'shadow-rui-drawer',\n      classNames?.content,\n      classNames?.root,\n      attrsClass,\n    ]),\n  });\n}\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// Debounced, so the activator's own click, which bubbles to the body, does not close it again\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=\"overlayClass\"\n          @click.stop=\"close()\"\n        />\n      </Transition>\n      <!-- leaves with no transition: it has already slid out, and its own would hold the removal for a transitionend that never comes -->\n      <Transition\n        :enter-from-class=\"enterFromClass\"\n        leave-active-class=\"duration-0!\"\n      >\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=\"rootClass($attrs.class)\"\n          :aria-label=\"ariaLabel\"\n          v-bind=\"getRootAttrs($attrs, [])\"\n        >\n          <slot v-bind=\"{ attrs: activatorAttrs, close }\" />\n        </aside>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/overlays/navigation-drawer/navigation-drawer-styles.d.ts

@@ -0,0 +1,76 @@
+export declare const navigationDrawerStyles: import("tailwind-variants").TVReturnType<{
+    belowAppBar: {
+        true: "top-rui-app-bar";
+        false: "top-0";
+    };
+    temporary: {
+        true: "bg-rui-overlay";
+        false: "bg-rui-surface";
+    };
+    position: {
+        left: "left-0";
+        right: "right-0";
+    };
+    visible: {
+        true: "translate-x-0";
+        false: "";
+    };
+    mini: {
+        true: "translate-x-0";
+        false: "";
+    };
+    withOverlay: {
+        true: "z-rui-drawer";
+        false: "z-rui-app-bar";
+    };
+}, undefined, "transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text", {
+    belowAppBar: {
+        true: "top-rui-app-bar";
+        false: "top-0";
+    };
+    temporary: {
+        true: "bg-rui-overlay";
+        false: "bg-rui-surface";
+    };
+    position: {
+        left: "left-0";
+        right: "right-0";
+    };
+    visible: {
+        true: "translate-x-0";
+        false: "";
+    };
+    mini: {
+        true: "translate-x-0";
+        false: "";
+    };
+    withOverlay: {
+        true: "z-rui-drawer";
+        false: "z-rui-app-bar";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    belowAppBar: {
+        true: "top-rui-app-bar";
+        false: "top-0";
+    };
+    temporary: {
+        true: "bg-rui-overlay";
+        false: "bg-rui-surface";
+    };
+    position: {
+        left: "left-0";
+        right: "right-0";
+    };
+    visible: {
+        true: "translate-x-0";
+        false: "";
+    };
+    mini: {
+        true: "translate-x-0";
+        false: "";
+    };
+    withOverlay: {
+        true: "z-rui-drawer";
+        false: "z-rui-app-bar";
+    };
+}, undefined>>;

package/dist/components/overlays/navigation-drawer/navigation-drawer-styles.js

@@ -0,0 +1,72 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/overlays/navigation-drawer/navigation-drawer-styles.ts
+var navigationDrawerStyles = tv({
+	base: "transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text",
+	variants: {
+		belowAppBar: {
+			true: "top-rui-app-bar",
+			false: "top-0"
+		},
+		temporary: {
+			true: "bg-rui-overlay",
+			false: "bg-rui-surface"
+		},
+		position: {
+			left: "left-0",
+			right: "right-0"
+		},
+		visible: {
+			true: "translate-x-0",
+			false: ""
+		},
+		mini: {
+			true: "translate-x-0",
+			false: ""
+		},
+		withOverlay: {
+			true: "z-rui-drawer",
+			false: "z-rui-app-bar"
+		}
+	},
+	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!"
+		},
+		{
+			temporary: false,
+			position: "left",
+			class: "border-r border-rui-divider"
+		},
+		{
+			temporary: false,
+			position: "right",
+			class: "border-l border-rui-divider"
+		}
+	],
+	defaultVariants: {
+		position: "left",
+		visible: false,
+		mini: false,
+		withOverlay: false,
+		temporary: false,
+		belowAppBar: false
+	}
+});
+//#endregion
+export { navigationDrawerStyles };
+
+//# sourceMappingURL=navigation-drawer-styles.js.map

package/dist/components/overlays/navigation-drawer/navigation-drawer-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer-styles.js","names":[],"sources":["../../../../src/components/overlays/navigation-drawer/navigation-drawer-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const navigationDrawerStyles = tv({\n  base: 'transition-[transform,translate,width] duration-200 ease-in-out bottom-0 fixed text-rui-text',\n  variants: {\n    belowAppBar: {\n      true: 'top-rui-app-bar',\n      false: 'top-0',\n    },\n    // a temporary drawer floats on the overlay surface; a docked one is part of the page, edged by a hairline\n    temporary: {\n      true: 'bg-rui-overlay',\n      false: 'bg-rui-surface',\n    },\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    // a modal drawer covers the app bar; a docked one sits level with it\n    withOverlay: {\n      true: 'z-rui-drawer',\n      false: 'z-rui-app-bar',\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    { temporary: false, position: 'left', class: 'border-r border-rui-divider' },\n    { temporary: false, position: 'right', class: 'border-l border-rui-divider' },\n  ],\n  defaultVariants: { position: 'left', visible: false, mini: false, withOverlay: false, temporary: false, belowAppBar: false },\n});\n"],"mappings":";;AAEA,IAAa,yBAAyB,GAAG;CACvC,MAAM;CACN,UAAU;EACR,aAAa;GACX,MAAM;GACN,OAAO;EACT;EAEA,WAAW;GACT,MAAM;GACN,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;EACA,SAAS;GACP,MAAM;GACN,OAAO;EACT;EACA,MAAM;GACJ,MAAM;GACN,OAAO;EACT;EAEA,aAAa;GACX,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,UAAU;GAAQ,SAAS;GAAO,MAAM;GAAO,OAAO;EAAoB;EAC5E;GAAE,UAAU;GAAS,SAAS;GAAO,MAAM;GAAO,OAAO;EAAmB;EAC5E;GAAE,MAAM;GAAM,SAAS;GAAO,OAAO;EAAQ;EAC7C;GAAE,WAAW;GAAO,UAAU;GAAQ,OAAO;EAA8B;EAC3E;GAAE,WAAW;GAAO,UAAU;GAAS,OAAO;EAA8B;CAC9E;CACA,iBAAiB;EAAE,UAAU;EAAQ,SAAS;EAAO,MAAM;EAAO,aAAa;EAAO,WAAW;EAAO,aAAa;CAAM;AAC7H,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\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\n// a popup like a menu: panel corners, a hairline edge for dark backgrounds, and never wider than the screen\nconst rootStyle = tv({ base: 'top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu' });\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=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiNotification.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\nimport { notificationStyles } from './notification-styles';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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=\"notificationStyles({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":""}

package/dist/components/overlays/notification/RuiNotification.vue.d.ts

@@ -1,9 +1,10 @@
+import type { HTMLAttributes } from 'vue';
 export interface NotificationProps {
     timeout: number;
     width?: number | string;
     theme?: 'light' | 'dark';
 }
-type __VLS_Props = NotificationProps;
+type __VLS_Props = NotificationProps & /* @vue-ignore */ Omit<HTMLAttributes, keyof NotificationProps>;
 type __VLS_Slots = {
     default?: () => any;
 };

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

@@ -1,6 +1,7 @@
 import { set, useTimeoutFn, watchImmediate } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.js";
 import { transformPropsUnit } from "../../../utils/helpers.js";
+import { notificationStyles } from "./notification-styles.js";
 import { Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
 //#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({
@@ -22,7 +23,6 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
 		const style = computed(() => ({ width: transformPropsUnit(__props.width) }));
-		const rootStyle = tv({ base: "top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu" });
 		const { start, stop } = useTimeoutFn(() => {
 			set(modelValue, false);
 		}, __props.timeout, { immediate: false });
@@ -53,7 +53,7 @@ var RuiNotification_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					key: 0,
 					role: "alert",
 					"aria-live": "polite",
-					class: unref(rootStyle)({ class: unref(cn)([_ctx.$attrs.class, {
+					class: unref(notificationStyles)({ class: unref(cn)([_ctx.$attrs.class, {
 						"bg-rui-overlay border-rui-divider": !__props.theme,
 						"bg-rui-light-overlay text-rui-light-text border-rui-light-divider": __props.theme === "light",
 						"bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider": __props.theme === "dark"

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

@@ -1 +1 @@
-{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_Teleport","_createVNode","_Transition","_withCtx","_createElementBlock","_mergeProps","_unref","_renderSlot","_createCommentVNode"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn, tv } from '@/utils/tv';\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\n// a popup like a menu: panel corners, a hairline edge for dark backgrounds, and never wider than the screen\nconst rootStyle = tv({ base: 'top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu' });\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=\"rootStyle({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,aAAaC,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAGF,MAAM,YAAY,GAAG,EAAE,MAAM,oHAAoH,CAAC;EAElJ,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,IAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,IAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAAC,UAAA,GAAAC,YAyBWC,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjBC,YAuBaC,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAAC,cAcM,CAbE,WAAA,SADRL,UAAA,GAAAM,mBAcM,OAdNC,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAOC,MAAA,SAAA,CAAS,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAEV,KAAAA,OAAO,OAAK;MAAoD,qCAAA,CAAA,QAAA;MAAsF,qEAAA,QAAA,UAAK;MAA0F,kEAAA,QAAA,UAAK;;KAKxR,OAAOU,MAAA,KAAA;IACKV,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEfW,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiNotification.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createBlock","_Teleport","_createVNode","_Transition","_withCtx","_createElementBlock","_mergeProps","_unref","_renderSlot","_createCommentVNode"],"sources":["../../../../src/components/overlays/notification/RuiNotification.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport { useTimeoutFn } from '@vueuse/core';\nimport { transformPropsUnit } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\nimport { notificationStyles } from './notification-styles';\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 & /* @vue-ignore */ Omit<HTMLAttributes, keyof 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=\"notificationStyles({ class: cn([$attrs.class, {\n          'bg-rui-overlay border-rui-divider': !theme,\n          'bg-rui-light-overlay text-rui-light-text border-rui-light-divider': theme === 'light',\n          'bg-rui-dark-overlay text-rui-dark-text border-rui-dark-divider': theme === 'dark',\n        }]) })\"\n        :style=\"style\"\n        v-bind=\"{ ...$attrs, class: undefined }\"\n        @click=\"dismiss()\"\n      >\n        <slot />\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,aAAaC,SAAoB,SAAA,YAAmB;EAQ1D,MAAM,QAAQ,gBAA+C,EAC3D,OAAO,mBAAmB,QAAA,KAAK,EACjC,EAAE;EAEF,MAAM,EAAE,OAAO,SAAS,mBAAmB;GACzC,IAAI,YAAY,KAAK;EACvB,GAAG,QAAA,SAAS,EAAE,WAAW,MAAM,CAAC;EAEhC,SAAS,UAAgB;GACvB,IAAI,QAAA,UAAU,GACZ;GAEF,IAAI,YAAY,KAAK;EACvB;EAEA,eAAe,aAAa,YAAY;GACtC,IAAI,CAAC,SAAS;IACZ,KAAK;IACL;GACF;GAEA,IAAI,QAAA,UAAU,GAAG;IACf,KAAK;IACL,MAAM;GACR;EACF,CAAC;;GAIC,OAAAC,UAAA,GAAAC,YAyBWC,UAAA,EAzBD,IAAG,OAAM,GAAA,CACjBC,YAuBaC,YAAA;IAtBX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;;IAEf,SAAAC,cAcM,CAbE,WAAA,SADRL,UAAA,GAAAM,mBAcM,OAdNC,WAcM;;KAZJ,MAAK;KACL,aAAU;KACT,OAAOC,MAAA,kBAAA,CAAkB,CAAA,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAEV,KAAAA,OAAO,OAAK;MAAoD,qCAAA,CAAA,QAAA;MAAsF,qEAAA,QAAA,UAAK;MAA0F,kEAAA,QAAA,UAAK;;KAKjS,OAAOU,MAAA,KAAA;IACKV,GAAAA;KAAAA,GAAAA,KAAAA;KAAM,OAAS,KAAA;IAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA,CAEfW,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

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

@@ -0,0 +1 @@
+export declare const notificationStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

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

@@ -0,0 +1,7 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/overlays/notification/notification-styles.ts
+var notificationStyles = tv({ base: "top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu" });
+//#endregion
+export { notificationStyles };
+
+//# sourceMappingURL=notification-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification-styles.js","names":[],"sources":["../../../../src/components/overlays/notification/notification-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n// a popup like a menu: panel corners, a hairline edge for dark backgrounds, and never wider than the screen\nexport const notificationStyles = tv({ base: 'top-4 right-4 fixed z-rui-toast max-w-[calc(100vw-2rem)] overflow-hidden rounded-rui-panel border shadow-rui-menu' });\n"],"mappings":";;AAGA,IAAa,qBAAqB,GAAG,EAAE,MAAM,oHAAoH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTooltip.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating } from '@/composables/floating';\nimport { cn, tv } from '@/utils/tv';\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  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst rootStyle = tv({ base: 'relative inline-flex' });\n\n// wraps at `--rui-tooltip-max-width`; a `max-w-*` in `classNames.tooltip` replaces it\nconst popoverStyle = tv({ base: 'w-max max-w-rui-tooltip z-rui-tooltip' });\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  () => 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    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"rootStyle({ class: cn($attrs.class) })\"\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=\"popoverStyle({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\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-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\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":""}
+{"version":3,"file":"RuiTooltip.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/tooltip/RuiTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes, Reactive } from 'vue';\nimport type { VueClassValue } from '@/types/class-value';\nimport { ButtonGroupBoundary } from '@/components/buttons/button-group/button-group-context';\nimport { type FloatingOptions, useFloating, type UseFloatingReturn } from '@/composables/floating';\nimport { cn } from '@/utils/tv';\nimport { tooltipPopoverStyles, tooltipRootStyles, 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  classNames?: RuiTooltipClassNames;\n}\n\ndefineOptions({\n  name: 'RuiTooltip',\n  inheritAttrs: false,\n});\n\nconst {\n  text = null,\n  disabled = false,\n  hideArrow = false,\n  openDelay = 0,\n  closeDelay = 500,\n  persistOnTooltipHover = false,\n  options,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineSlots<{\n  activator?: (props: { open: boolean; close: () => void }) => any;\n  default?: () => any;\n}>();\n\nconst tooltipId = useId();\nconst activator = useTemplateRef<HTMLElement>('activator');\nconst tooltip = useTemplateRef<HTMLElement>('tooltip');\n// Owned by this component, so a setup run on first use still stops on unmount\nconst setupScope = effectScope();\nconst floating = shallowRef<Reactive<UseFloatingReturn>>();\n\nconst open = computed<boolean>(() => get(floating)?.open ?? false);\nconst visible = computed<boolean>(() => get(floating)?.visible ?? false);\n\ntype PlacementSide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * Sets the floating state up on the first hover, focus or `onOpen`, so a\n * table with a tooltip on every row pays only for the tooltips it shows. An\n * event that reaches the activator after unmount gets nothing back.\n */\nfunction setUp(): Reactive<UseFloatingReturn> | undefined {\n  if (setupScope.active && !disabled && !get(floating)) {\n    set(floating, setupScope.run(() => reactive(useFloating(\n      () => options ?? {},\n      () => disabled,\n      () => openDelay,\n      () => closeDelay,\n      () => get(activator) ?? undefined,\n      tooltip,\n    ))));\n  }\n  return setupScope.active ? get(floating) : undefined;\n}\n\nfunction onOpen(immediate?: boolean): void {\n  setUp()?.onOpen(immediate);\n}\n\nfunction onClose(immediate?: boolean): void {\n  if (setupScope.active)\n    get(floating)?.onClose(immediate);\n}\n\nfunction placementSide(placement: string): PlacementSide {\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    v-bind=\"{ ...$attrs, class: undefined }\"\n    :class=\"tooltipRootStyles({ class: cn($attrs.class) })\"\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 && floating\"\n      to=\"body\"\n    >\n      <div\n        v-if=\"visible\"\n        :id=\"tooltipId\"\n        ref=\"tooltip\"\n        :class=\"tooltipPopoverStyles({ class: cn(classNames?.tooltip) })\"\n        :role=\"open ? 'tooltip' : undefined\"\n        :data-placement=\"floating.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=\"floating?.updatePosition()\"\n          @after-leave=\"floating?.onLeaveComplete()\"\n        >\n          <div\n            v-if=\"open\"\n            key=\"tooltip\"\n            class=\"px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip\"\n            data-id=\"content\"\n            @mouseover=\"persistOnTooltipHover && onOpen()\"\n            @mouseleave=\"persistOnTooltipHover && onClose()\"\n          >\n            <ButtonGroupBoundary>\n              <slot>\n                {{ text }}\n              </slot>\n            </ButtonGroupBoundary>\n          </div>\n          <span\n            v-if=\"!hideArrow\"\n            key=\"arrow\"\n            :class=\"tooltipStyles({ open, side: placementSide(floating.currentPlacement) }).arrow()\"\n            data-id=\"arrow\"\n          >\n            <span :class=\"tooltipStyles({ open, side: placementSide(floating.currentPlacement) }).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,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { VueClassValue } from '../../../types/class-value.js';
 import { type FloatingOptions } from '../../../composables/floating.js';
 export interface RuiTooltipClassNames {
@@ -14,6 +15,7 @@ export interface Props {
     options?: FloatingOptions;
     classNames?: RuiTooltipClassNames;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     activator?: (props: {
         open: boolean;
@@ -21,10 +23,12 @@ type __VLS_Slots = {
     }) => any;
     default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {
-    onOpen: (immediate?: boolean) => void;
-    onClose: (immediate?: boolean) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare function onOpen(immediate?: boolean): void;
+declare function onClose(immediate?: boolean): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    onOpen: typeof onOpen;
+    onClose: typeof onClose;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,9 +1,9 @@
-import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { cn } from "../../../utils/tv.js";
 import { ButtonGroupBoundary } from "../../buttons/button-group/button-group-context.js";
 import { useFloating } from "../../../composables/floating.js";
-import { tooltipStyles } from "./tooltip-styles.js";
-import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+import { tooltipPopoverStyles, tooltipRootStyles, tooltipStyles } from "./tooltip-styles.js";
+import { Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, effectScope, mergeProps, normalizeClass, openBlock, reactive, renderSlot, shallowRef, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
 //#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 = [
@@ -11,6 +11,11 @@ var _hoisted_2 = [
 	"role",
 	"data-placement"
 ];
+/**
+* Sets the floating state up on the first hover, focus or `onOpen`, so a
+* table with a tooltip on every row pays only for the tooltips it shows. An
+* event that reaches the activator after unmount gets nothing back.
+*/
 var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTooltip",
 	inheritAttrs: false,
@@ -35,17 +40,29 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		classNames: {}
 	},
 	setup(__props, { expose: __expose }) {
-		const rootStyle = tv({ base: "relative inline-flex" });
-		const popoverStyle = tv({ base: "w-max max-w-rui-tooltip z-rui-tooltip" });
 		const tooltipId = useId();
-		const { reference: activator, popover: tooltip, open, visible, currentPlacement, onOpen, onClose, onLeaveComplete, updatePosition } = useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay);
-		const placementSide = computed(() => {
-			const placement = get(currentPlacement);
+		const activator = useTemplateRef("activator");
+		const tooltip = useTemplateRef("tooltip");
+		const setupScope = effectScope();
+		const floating = shallowRef();
+		const open = computed(() => get(floating)?.open ?? false);
+		const visible = computed(() => get(floating)?.visible ?? false);
+		function setUp() {
+			if (setupScope.active && !__props.disabled && !get(floating)) set(floating, setupScope.run(() => reactive(useFloating(() => __props.options ?? {}, () => __props.disabled, () => __props.openDelay, () => __props.closeDelay, () => get(activator) ?? void 0, tooltip))));
+			return setupScope.active ? get(floating) : void 0;
+		}
+		function onOpen(immediate) {
+			setUp()?.onOpen(immediate);
+		}
+		function onClose(immediate) {
+			if (setupScope.active) get(floating)?.onClose(immediate);
+		}
+		function placementSide(placement) {
 			if (placement.startsWith("top")) return "top";
 			if (placement.startsWith("left")) return "left";
 			if (placement.startsWith("right")) return "right";
 			return "bottom";
-		});
+		}
 		__expose({
 			onOpen,
 			onClose
@@ -58,17 +75,17 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				..._ctx.$attrs,
 				class: void 0
 			}, {
-				class: unref(rootStyle)({ class: unref(cn)(_ctx.$attrs.class) }),
+				class: unref(tooltipRootStyles)({ class: unref(cn)(_ctx.$attrs.class) }),
 				"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)())
+				onMouseover: _cache[4] || (_cache[4] = ($event) => onOpen()),
+				onMouseleave: _cache[5] || (_cache[5] = ($event) => onClose()),
+				onFocusin: _cache[6] || (_cache[6] = ($event) => onOpen()),
+				onFocusout: _cache[7] || (_cache[7] = ($event) => onClose())
 			}), [renderSlot(_ctx.$slots, "activator", {
 				open: unref(open),
-				close: unref(onClose)
-			}), !__props.disabled ? (openBlock(), createBlock(Teleport, {
+				close: onClose
+			}), !__props.disabled && unref(floating) ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: "body"
 			}, [unref(visible) ? (openBlock(), createElementBlock("div", {
@@ -76,9 +93,9 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				id: unref(tooltipId),
 				ref_key: "tooltip",
 				ref: tooltip,
-				class: normalizeClass(unref(popoverStyle)({ class: unref(cn)(__props.classNames?.tooltip) })),
+				class: normalizeClass(unref(tooltipPopoverStyles)({ class: unref(cn)(__props.classNames?.tooltip) })),
 				role: unref(open) ? "tooltip" : void 0,
-				"data-placement": unref(currentPlacement)
+				"data-placement": unref(floating).currentPlacement
 			}, [createVNode(TransitionGroup, {
 				"enter-active-class": "transition ease-out duration-200",
 				"enter-from-class": "opacity-0 translate-y-1",
@@ -86,15 +103,15 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				"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)())
+				onBeforeEnter: _cache[2] || (_cache[2] = ($event) => unref(floating)?.updatePosition()),
+				onAfterLeave: _cache[3] || (_cache[3] = ($event) => unref(floating)?.onLeaveComplete())
 			}, {
 				default: withCtx(() => [unref(open) ? (openBlock(), createElementBlock("div", {
 					key: "tooltip",
 					class: "px-2 py-1.5 text-xs font-normal wrap-break-word bg-rui-neutral-900 dark:bg-rui-neutral-700 text-white rounded-rui-control shadow-rui-tooltip",
 					"data-id": "content",
-					onMouseover: _cache[0] || (_cache[0] = ($event) => __props.persistOnTooltipHover && unref(onOpen)()),
-					onMouseleave: _cache[1] || (_cache[1] = ($event) => __props.persistOnTooltipHover && unref(onClose)())
+					onMouseover: _cache[0] || (_cache[0] = ($event) => __props.persistOnTooltipHover && onOpen()),
+					onMouseleave: _cache[1] || (_cache[1] = ($event) => __props.persistOnTooltipHover && onClose())
 				}, [createVNode(unref(ButtonGroupBoundary), null, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.text), 1)])]),
 					_: 3
@@ -102,12 +119,12 @@ var RuiTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					key: "arrow",
 					class: normalizeClass(unref(tooltipStyles)({
 						open: unref(open),
-						side: unref(placementSide)
+						side: placementSide(unref(floating).currentPlacement)
 					}).arrow()),
 					"data-id": "arrow"
 				}, [createElementVNode("span", { class: normalizeClass(unref(tooltipStyles)({
 					open: unref(open),
-					side: unref(placementSide)
+					side: placementSide(unref(floating).currentPlacement)
 				}).diamond()) }, null, 2)], 2)) : createCommentVNode("", true)]),
 				_: 3
 			})], 10, _hoisted_2)) : createCommentVNode("", true)])) : createCommentVNode("", true)], 16, _hoisted_1);