pxd 0.1.2 → 0.1.3

package/dist/components/theme-switcher/index.vue

@@ -1,4 +1,5 @@
 <script setup>
+import DeviceAlternateIcon from "@gdsicon/vue/device-alternate";
 import MoonIcon from "@gdsicon/vue/moon";
 import SunIcon from "@gdsicon/vue/sun";
 import { computed, watch } from "vue";
@@ -9,22 +10,29 @@ defineOptions({
 	inheritAttrs: false
 });
 const emits = defineEmits(["toggle"]);
-const { isDark, toggleDarkMode } = useColorScheme({ syncStatus: true });
-const renderIcon = computed(() => isDark.value ? MoonIcon : SunIcon);
-watch(() => isDark.value, (newVal) => {
-	emits("toggle", newVal ? "dark" : "light");
+const SCHEME_ICONS = {
+	auto: DeviceAlternateIcon,
+	light: SunIcon,
+	dark: MoonIcon
+};
+const { colorScheme, toggleDarkMode } = useColorScheme({ syncStatus: true });
+const renderIcon = computed(() => SCHEME_ICONS[colorScheme.value]);
+watch(() => colorScheme.value, (newVal) => {
+	emits("toggle", newVal);
 });
 </script>
 
 <template>
   <PButton
+    icon
     data-theme-switcher
     aria-label="Toggle color mode"
     class="pxd-theme-switcher"
     v-bind="$attrs"
-    icon
-    @click="toggleDarkMode"
+    @click="toggleDarkMode()"
   >
-    <Component :is="renderIcon" class="size-em" />
+    <Transition name="pxd-transition--fade-scale" mode="out-in">
+      <Component :is="renderIcon" class="size-em" />
+    </Transition>
   </PButton>
 </template>

package/dist/components/theme-switcher/types.d.ts

@@ -1,5 +1,5 @@
-import type { ColorScheme } from '../../composables/use-color-scheme'
+import type { ColorPreference } from '../../composables/use-color-scheme'
 
 export interface ThemeSwitcherEmits {
-  toggle: [ColorScheme]
+  toggle: [ColorPreference]
 }

package/dist/components/time-ago/index.d.vue.ts

@@ -0,0 +1,6 @@
+import type { TimeAgoProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<TimeAgoProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimeAgoProps> & Readonly<{}>, {
+    refresh: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/time-ago/index.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { computed, onActivated, onDeactivated, onMounted, onUnmounted, shallowRef, watch } from "vue";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { dayjs } from "../../utils/date.js";
+import { cachedOn, cachedOff } from "../../utils/event.js";
+defineOptions({
+	name: "PTimeAgo",
+	inheritAttrs: false
+});
+const props = defineProps({
+	value: {
+		type: [
+			String,
+			Number,
+			Date
+		],
+		required: true
+	},
+	refresh: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const SECOND = 1e3;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const BUCKETS = [
+	{
+		unit: "now",
+		size: MINUTE,
+		limit: MINUTE
+	},
+	{
+		unit: "minute",
+		size: MINUTE,
+		limit: HOUR
+	},
+	{
+		unit: "hour",
+		size: HOUR,
+		limit: DAY
+	},
+	{
+		unit: "day",
+		size: DAY,
+		limit: MONTH
+	},
+	{
+		unit: "month",
+		size: MONTH,
+		limit: YEAR
+	},
+	{
+		unit: "year",
+		size: YEAR,
+		limit: Infinity
+	}
+];
+let refreshTimer;
+const timestamp = computed(() => dayjs(props.value).valueOf());
+const now = shallowRef(Date.now());
+const dateTime = computed(() => Number.isFinite(timestamp.value) ? dayjs(timestamp.value).toISOString() : undefined);
+const configProvider = useConfigProvider();
+const text = computed(() => {
+	const locale = configProvider.locale.timeAgo;
+	if (!Number.isFinite(timestamp.value)) {
+		return locale.invalid;
+	}
+	const diff = now.value - timestamp.value;
+	const { bucket, value } = resolveBucket(Math.abs(diff));
+	if (bucket.unit === "now") {
+		return locale.now;
+	}
+	const labels = locale.unit[bucket.unit];
+	const unit = value === 1 ? labels.one : labels.other;
+	return (diff >= 0 ? locale.past : locale.future).replace("{value}", String(value)).replace("{unit}", unit);
+});
+function resolveBucket(age) {
+	const bucket = BUCKETS.find((item) => age < item.limit) ?? BUCKETS[BUCKETS.length - 1];
+	return {
+		bucket,
+		value: Math.floor(age / bucket.size)
+	};
+}
+function getNextDelay() {
+	const age = Math.abs(now.value - timestamp.value);
+	const { bucket, value } = resolveBucket(age);
+	return Math.min((value + 1) * bucket.size, bucket.limit) - age;
+}
+function stopTimer() {
+	clearTimeout(refreshTimer);
+}
+function startTimer() {
+	stopTimer();
+	if (!props.refresh) {
+		return;
+	}
+	const delay = getNextDelay();
+	if (!Number.isFinite(delay) || delay > DAY) {
+		return;
+	}
+	refreshTimer = setTimeout(syncNow, delay);
+}
+function syncNow() {
+	if (!props.refresh) {
+		return;
+	}
+	now.value = Date.now();
+	startTimer();
+}
+function handleVisibilityChange() {
+	if (document.visibilityState === "visible") {
+		syncNow();
+	}
+}
+watch(() => [timestamp.value, props.refresh], startTimer);
+onActivated(syncNow);
+onDeactivated(stopTimer);
+onMounted(() => {
+	startTimer();
+	cachedOn(document, "visibilitychange", handleVisibilityChange);
+});
+onUnmounted(() => {
+	stopTimer();
+	cachedOff(document, "visibilitychange", handleVisibilityChange);
+});
+</script>
+
+<template>
+  <time
+    class="pxd-time-ago"
+    data-time-ago
+    data-allow-mismatch="text"
+    :datetime="dateTime"
+    v-bind="$attrs"
+  >
+    {{ text }}
+  </time>
+</template>

package/dist/components/time-ago/types.d.ts

@@ -0,0 +1,4 @@
+export interface TimeAgoProps {
+  value: string | number | Date
+  refresh?: boolean
+}

package/dist/components/time-picker/index.d.vue.ts

@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<TimePickerProps, {}, {
     closeOnPressEscape: boolean;
     valueFormat: string;
     suffixIcon: boolean;
-    presets: import("./types").DateTimePreset[];
+    presets: import("./types").DateTimePreset<Date>[];
     showSeconds: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/time-picker/index.vue

@@ -92,18 +92,12 @@ const paddedTimes = {
 	minutes: Array.from({ length: 60 }, (_, i) => padStringZero(i)),
 	seconds: Array.from({ length: 60 }, (_, i) => padStringZero(i))
 };
-const configProvider = useConfigProvider();
-const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const scrollTimers = [];
 const timeHoursRef = shallowRef();
 const timeMinutesRef = shallowRef();
 const timeSecondsRef = shallowRef();
 const popoverVisible = shallowRef(false);
 const dayjsDateTime = shallowRef(null);
-const committedValue = shallowRef("");
-const modelValue = useModelValue(props, emits, { get() {
-	return dayjsDateTime.value ? dayjsDateTime.value.format(props.labelFormat ?? "HH:mm:ss") : "";
-} });
-const scrollTimers = [];
 const onTimeListScroll = throttleByRaf((ev) => {
 	const target = ev.target;
 	const value = Math.round(target.scrollTop / HEIGHT);
@@ -122,6 +116,12 @@ const onTimeListScroll = throttleByRaf((ev) => {
 		dayjsDateTime.value = dayjsDateTime.value.set(type, clampedValue);
 	}, 100);
 });
+const committedValue = shallowRef("");
+const configProvider = useConfigProvider();
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const modelValue = useModelValue(props, emits, { get() {
+	return dayjsDateTime.value ? dayjsDateTime.value.format(props.labelFormat ?? "HH:mm:ss") : "";
+} });
 function padStringZero(value) {
 	return String(value).padStart(2, "0");
 }

package/dist/components/time-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentDateTimeValue } from '../../types/shared'
+import type { ComponentSize, ComponentDateTimeValue } from '../../types/shared/props'
 
 export interface DateTimePreset<T = Date> {
   label: string

package/dist/components/toc/index.d.vue.ts

@@ -1,6 +1,6 @@
 import type { TocItem, TocProps } from './types';
 declare function scrollTo(id: string): boolean;
-declare var __VLS_1: {
+declare var __VLS_2: {
     active: boolean;
     select: (event: PointerEvent) => void;
     item: TocItem;
@@ -8,7 +8,7 @@ declare var __VLS_1: {
     depth: number;
 };
 type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_1) => any;
+    item?: (props: typeof __VLS_2) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TocProps, {
     activeId: import("vue").ComputedRef<string | null>;

package/dist/components/toc/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref, shallowRef, watch } from "vue";
-import { useMotionReduced } from "../../composables/_internal/use-motion-reduce.js";
+import { useMotionReduced } from "../../composables/use-motion-reduce.js";
 import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
 import { useMutationObserver } from "../../composables/use-mutation-observer.js";
 import { useScrollspy } from "../../composables/use-scrollspy.js";

package/dist/components/todo-list/index.d.vue.ts

@@ -11,12 +11,12 @@ declare var __VLS_6: {
     stats: TodoStats;
     title: string | number;
     summary: string;
-}, __VLS_13: {}, __VLS_15: {
+}, __VLS_13: {}, __VLS_16: {
     item: TodoOption;
     index: number;
     status: TodoStatus;
     toggle: () => void;
-}, __VLS_32: {
+}, __VLS_33: {
     item: TodoOption;
     index: number;
     status: TodoStatus;
@@ -26,9 +26,9 @@ type __VLS_Slots = {} & {
 } & {
     empty?: (props: typeof __VLS_13) => any;
 } & {
-    item?: (props: typeof __VLS_15) => any;
+    item?: (props: typeof __VLS_16) => any;
 } & {
-    'item-content'?: (props: typeof __VLS_32) => any;
+    'item-content'?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TodoProps, {
     isExpanded: import("vue").ShallowRef<boolean, boolean>;

package/dist/components/todo-list/index.vue

@@ -58,11 +58,6 @@ const emits = defineEmits([
 	"update:modelValue",
 	"toggle"
 ]);
-const configProvider = useConfigProvider();
-const slots = useSlots();
-const hasItemSlot = computed(() => !!slots.item);
-const hasEmptySlot = computed(() => !!slots.empty);
-const hasItemContentSlot = computed(() => !!slots["item-content"]);
 const MARKER_CLASSES = {
 	pending: "border-2 border-gray-alpha-400",
 	in_progress: "",
@@ -79,16 +74,7 @@ const innerValue = shallowRef(props.defaultValue);
 const isExpanded = shallowRef(props.defaultExpanded);
 const contentRef = shallowRef();
 const currentOptions = computed(() => props.modelValue ?? innerValue.value ?? props.options);
-watch(() => props.options, (options) => {
-	if (props.modelValue === undefined) {
-		innerValue.value = options;
-	}
-});
 const expanded = computed(() => !props.collapsible || isExpanded.value);
-const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, expanded);
-function resolveStatus(item) {
-	return item.status ?? "pending";
-}
 const stats = computed(() => {
 	const options = currentOptions.value;
 	const result = {
@@ -112,14 +98,23 @@ const stats = computed(() => {
 	}
 	return result;
 });
-const headerTitle = computed(() => props.title ?? configProvider.locale.todo.title);
 const summaryText = computed(() => {
 	const { inProgress, pending, total, canceled } = stats.value;
 	const totalCount = total - canceled;
 	const currentCount = totalCount - inProgress - pending;
 	return totalCount > 0 ? `${currentCount}/${totalCount}` : "";
 });
+const configProvider = useConfigProvider();
+const headerTitle = computed(() => props.title ?? configProvider.locale.todo.title);
 const emptyText = computed(() => props.empty ?? configProvider.locale.results.noData);
+const slots = useSlots();
+const hasItemSlot = computed(() => !!slots.item);
+const hasEmptySlot = computed(() => !!slots.empty);
+const hasItemContentSlot = computed(() => !!slots["item-content"]);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, expanded);
+function resolveStatus(item) {
+	return item.status ?? "pending";
+}
 function commit(index, status) {
 	const prev = currentOptions.value[index];
 	if (!prev) {
@@ -203,6 +198,11 @@ function onDetailsToggle(ev) {
 		isExpanded.value = true;
 	}
 }
+watch(() => props.options, (options) => {
+	if (props.modelValue === undefined) {
+		innerValue.value = options;
+	}
+});
 defineExpose({
 	isExpanded,
 	stats,

package/dist/components/todo-list/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel } from '../../types/shared'
+import type { ComponentLabel } from '../../types/shared/props'
 
 export type TodoStatus = 'pending' | 'in_progress' | 'completed' | 'canceled'
 

package/dist/components/toggle/index.vue

@@ -82,11 +82,11 @@ const SIZES = {
 	lg: "w-11 h-6"
 };
 const uniqueId = getUniqueId();
+const isDisabled = computed(() => props.disabled || props.loading);
 const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const modelValue = useModelValue(props, emits);
 const isChecked = computed(() => modelValue.value === props.activeValue);
-const isDisabled = computed(() => props.disabled || props.loading);
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 async function onCheckboxChange(e) {
 	if (props.loading) {
 		return;
@@ -142,7 +142,7 @@ async function onCheckboxChange(e) {
       <div
         :data-checked="isChecked"
         :data-disabled="isDisabled"
-        class="pxd-toggle--handle-icon text-xs shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-foreground-secondary motion-safe:transition-appearance dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
+        class="pxd-toggle--handle-icon shadow-sm bg-white relative flex aspect-square h-full translate-x-(--tx) transform-gpu items-center justify-center overflow-hidden rounded-full text-[10px] text-foreground-secondary motion-safe:transition-appearance dark:data-[checked=true]:bg-background-100 dark:data-[disabled=true]:bg-gray-900 dark:data-[disabled=true]:text-gray-500"
       >
         <div class="inset-0 pointer-events-none absolute flex items-center justify-center">
           <Transition name="pxd-transition--fade" mode="out-in">

package/dist/components/toggle/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentBeforeChange, ComponentSize } from '../../types/shared'
+import type { ComponentBeforeChange, ComponentSize } from '../../types/shared/props'
 
 export type ValueType = boolean | number | string | undefined
 

package/dist/components/toggle-button/index.vue

@@ -52,20 +52,20 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const toggleButtonGroupContext = useToggleButtonGroupContext();
-const modelValue = useModelValue(toggleButtonGroupContext?.props ?? props, toggleButtonGroupContext?.emits ?? emits);
-const configProvider = useConfigProvider();
 const isDisabled = computed(() => props.disabled || toggleButtonGroupContext?.props.disabled || false);
+const computedVariant = computed(() => {
+	return props.variant || toggleButtonGroupContext?.props.variant || "default";
+});
+const modelValue = useModelValue(toggleButtonGroupContext?.props ?? props, toggleButtonGroupContext?.emits ?? emits);
 const isChecked = computed(() => {
 	if (toggleButtonGroupContext?.props.multiple) {
 		return toArray(modelValue.value).includes(props.value);
 	}
 	return modelValue.value === props.value;
 });
-const computedVariant = computed(() => {
-	return props.variant || toggleButtonGroupContext?.props.variant || "ghost";
-});
+const configProvider = useConfigProvider();
 const { attrs, classes } = useTailwindVariant({
-	base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border outline-none group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-first:border-l-0 group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none motion-safe:transition-colors",
+	base: "pxd-toggle-button gap-2 font-medium relative inline-flex shrink-0 appearance-none items-center justify-center border self-focus-ring outline-none group-data-[gap=0]/toggle-button-group:not-first:rounded-l-none group-data-[gap=0]/toggle-button-group:not-first:border-l-0 group-data-[gap=0]/toggle-button-group:not-last:rounded-r-none focus-visible:z-1 motion-safe:transition-colors",
 	variants: {
 		size: {
 			xs: `${BASIC_HEIGHTS.xs} px-1.25 text-xs rounded-sm`,
@@ -74,10 +74,13 @@ const { attrs, classes } = useTailwindVariant({
 			lg: `${BASIC_HEIGHTS.lg} px-2.75 text-base rounded-lg`
 		},
 		variant: {
-			outline: "border-gray-400 bg-background-100",
+			default: "border-gray-400 bg-background-100",
 			ghost: "border-transparent bg-transparent"
 		},
-		disabled: {},
+		disabled: {
+			true: "cursor-not-allowed",
+			false: "cursor-pointer"
+		},
 		checked: {}
 	},
 	compoundVariants: [
@@ -94,15 +97,15 @@ const { attrs, classes } = useTailwindVariant({
 		{
 			checked: false,
 			disabled: true,
-			class: "cursor-not-allowed text-gray-400"
+			class: "text-gray-400"
 		},
 		{
 			checked: false,
 			disabled: false,
-			class: "hover:bg-background-hover hover:text-gray-900"
+			class: "hover:bg-background-hover"
 		},
 		{
-			variant: "outline",
+			variant: "default",
 			checked: true,
 			disabled: true,
 			class: "bg-gray-100"

package/dist/components/toggle-button/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentSize, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentSize, ComponentValue } from '../../types/shared/props'
 import type { CheckboxProps } from '../checkbox/types'
 
 type ToggleButtonModelValue = ComponentValue | boolean
@@ -7,7 +7,7 @@ export interface ToggleButtonProps {
   size?: ComponentSize
   label?: ComponentLabel
   value?: ToggleButtonModelValue
-  variant?: 'ghost' | 'outline'
+  variant?: 'default' | 'ghost'
   disabled?: boolean
   modelValue?: ToggleButtonModelValue | ToggleButtonModelValue[]
 }

package/dist/components/toggle-button-group/index.d.vue.ts

@@ -1,7 +1,7 @@
 import type { ToggleButtonGroupProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ToggleButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any;
@@ -10,7 +10,7 @@ declare const __VLS_base: import("vue").DefineComponent<ToggleButtonGroupProps,
     onChange?: ((args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: NonNullable<import("../checkbox/types.js").CheckboxModelValue | import("../checkbox/types.js").CheckboxModelValue[] | undefined>) => any) | undefined;
 }>, {
-    variant: "ghost" | "outline";
+    variant: "default" | "ghost";
     modelValue: import("../../types/shared/props.js").ComponentValue | import("../../types/shared/props.js").ComponentValue[];
     gap: import("../../types/shared/props.js").ResponsiveValue<string | number>;
     multiple: boolean;

package/dist/components/toggle-button-group/index.vue

@@ -42,7 +42,7 @@ const props = defineProps({
 	variant: {
 		type: String,
 		required: false,
-		default: "ghost"
+		default: "default"
 	},
 	modelValue: {
 		type: [
@@ -57,7 +57,7 @@ const props = defineProps({
 const emits = defineEmits(["change", "update:modelValue"]);
 const configProvider = useConfigProvider();
 const { attrs, classes } = useTailwindVariant({
-	base: "pxd-toggle-button-group group/toggle-button-group w-max overflow-hidden",
+	base: "pxd-toggle-button-group group/toggle-button-group w-max",
 	variants: { size: {
 		sm: "rounded-md",
 		md: "rounded-md",

package/dist/components/toggle-button-group/types.d.ts

@@ -3,7 +3,7 @@ import type {
   ComponentValue,
   ComponentOption,
   ResponsiveValue,
-} from '../../types/shared'
+} from '../../types/shared/props'
 import type { CheckboxProps } from '../checkbox/types'
 
 export interface ToggleButtonGroupProps {
@@ -12,7 +12,7 @@ export interface ToggleButtonGroupProps {
   disabled?: boolean
   multiple?: boolean
   options?: ComponentOption[]
-  variant?: 'ghost' | 'outline'
+  variant?: 'default' | 'ghost'
   modelValue?: ComponentValue | ComponentValue[]
 }
 

package/dist/components/tool-call/index.vue

@@ -31,10 +31,6 @@ const props = defineProps({
 		required: false
 	}
 });
-const isOpen = shallowRef(true);
-const configProvider = useConfigProvider();
-const contentRef = shallowRef();
-const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isOpen);
 const STATUS_META = {
 	pending: {
 		icon: ClockIcon,
@@ -57,12 +53,16 @@ const STATUS_META = {
 		badge: "red-subtle"
 	}
 };
+const isOpen = shallowRef(true);
+const contentRef = shallowRef();
 const statusMeta = computed(() => STATUS_META[props.status]);
-const statusLabel = computed(() => configProvider.locale.toolCall[props.status]);
 const inputText = computed(() => formatPayload(props.input));
 const outputText = computed(() => formatPayload(props.output));
 const inputTokens = computed(() => inputText.value ? tokenizeJson(inputText.value) : []);
 const outputTokens = computed(() => outputText.value ? tokenizeJson(outputText.value) : []);
+const configProvider = useConfigProvider();
+const statusLabel = computed(() => configProvider.locale.toolCall[props.status]);
+const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isOpen);
 function formatPayload(value) {
 	if (value === undefined) {
 		return "";

package/dist/components/tooltip/index.d.vue.ts

@@ -1,19 +1,18 @@
 import type { TooltipProps } from './types';
-declare var __VLS_8: {}, __VLS_11: {
+declare var __VLS_7: {}, __VLS_10: {
     activeTrigger: HTMLElement | null;
     activeTriggerIndex: number;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 } & {
-    content?: (props: typeof __VLS_11) => any;
+    content?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
-    variant: "default" | "error" | "warning" | "success" | "invert" | "violet";
+    variant: "default" | "violet" | "error" | "warning" | "success" | "invert";
     position: import("../../types/shared/props.js").ComponentPosition;
     showDelay: number;
     hideDelay: number;
-    showArrow: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;