@sveda-ai/vue 0.1.0

package/src/ui/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

package/src/ui/sheet/Sheet.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'reka-ui';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DialogRoot v-bind="forwarded">
+        <slot />
+    </DialogRoot>
+</template>

package/src/ui/sheet/SheetClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+    <DialogClose v-bind="props">
+        <slot />
+    </DialogClose>
+</template>

package/src/ui/sheet/SheetContent.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import { X } from 'lucide-vue-next';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+    type DialogContentEmits,
+    type DialogContentProps,
+} from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+import { sheetVariants, type SheetVariants } from './index.js';
+
+interface SheetContentProps extends DialogContentProps {
+    class?: HTMLAttributes['class'];
+    side?: SheetVariants['side'];
+}
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<SheetContentProps>();
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, side, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        />
+        <DialogContent :class="cn('sveda-chat', sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
+            <slot />
+
+            <DialogClose
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-card transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+            >
+                <X class="h-4 w-4 text-muted-foreground" />
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/src/ui/sheet/SheetDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import { DialogDescription, type DialogDescriptionProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
+        <slot />
+    </DialogDescription>
+</template>

package/src/ui/sheet/SheetFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <div :class="cn('flex flex-col-reverse main-sm:flex-row main-sm:justify-end main-sm:gap-x-2', props.class)">
+        <slot />
+    </div>
+</template>

package/src/ui/sheet/SheetHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import type { HTMLAttributes } from 'vue';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+    <div :class="cn('flex flex-col gap-y-2 text-center main-sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/ui/sheet/SheetTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js';
+import { DialogTitle, type DialogTitleProps } from 'reka-ui';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+</script>
+
+<template>
+    <DialogTitle :class="cn('text-lg font-semibold text-foreground', props.class)" v-bind="delegatedProps">
+        <slot />
+    </DialogTitle>
+</template>

package/src/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+    <DialogTrigger v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>

package/src/ui/sheet/index.ts

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';
+
+export const sheetVariants = cva(
+    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    {
+        variants: {
+            side: {
+                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+                bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+                right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            },
+        },
+        defaultVariants: {
+            side: 'right',
+        },
+    },
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;

package/src/ui/switch/Switch.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class']; size?: 'default' | 'sm' }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, size: __, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const sizeClasses = computed(() =>
+  props.size === 'sm'
+    ? {
+        root: 'h-5 w-9',
+        thumb: 'h-4 w-4 data-[state=checked]:translate-x-4',
+      }
+    : {
+        root: 'h-6 w-11',
+        thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',
+      },
+)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex shrink-0 cursor-pointer items-center rounded-full p-0.5 shadow-inner transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand-primary-purple data-[state=checked]:shadow-[inset_0_1px_2px_rgba(0,0,0,0.22),0_1px_8px_-2px_rgba(0,0,0,0.35)] data-[state=unchecked]:bg-muted-foreground/35 data-[state=unchecked]:shadow-[inset_0_1px_3px_rgba(0,0,0,0.28)] dark:data-[state=unchecked]:bg-white/25 dark:data-[state=unchecked]:shadow-[inset_0_1px_3px_rgba(0,0,0,0.5)]',
+      sizeClasses.root,
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn(
+        'pointer-events-none block rounded-full bg-brand-primary-purple-foreground shadow-[0_1px_2px_rgba(0,0,0,0.28),0_2px_6px_rgba(0,0,0,0.18)] ring-0 transition-transform data-[state=unchecked]:translate-x-0',
+        sizeClasses.thumb,
+      )"
+    >
+      <slot name="thumb" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

package/src/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'

package/src/ui/textarea/Textarea.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../lib/utils.js'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-[var(--sveda-radius)] border border-input-border bg-input px-3 py-2 text-sm ring-offset-card placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>

package/src/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

package/src/ui/toast/Toast.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { type ToastProps, toastVariants } from './index.js'
+
+const props = defineProps<ToastProps>()
+
+const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>

package/src/ui/toast/ToastAction.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { ToastAction, type ToastActionProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-[var(--sveda-radius)] border bg-transparent px-3 text-sm font-medium ring-offset-card transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>

package/src/ui/toast/ToastClose.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { X } from 'lucide-vue-next'
+import { ToastClose, type ToastCloseProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-[var(--sveda-radius)] p-1 text-inherit opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-destructive-foreground/70 group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)" aria-label="Close notification">
+    <X class="h-4 w-4" />
+  </ToastClose>
+</template>

package/src/ui/toast/ToastDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { ToastDescription, type ToastDescriptionProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90 break-words whitespace-pre-wrap', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>

package/src/ui/toast/ToastProvider.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ToastProvider, type ToastProviderProps } from 'reka-ui'
+
+const props = defineProps<ToastProviderProps>()
+</script>
+
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>

package/src/ui/toast/ToastTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { ToastTitle, type ToastTitleProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
+    <slot />
+  </ToastTitle>
+</template>

package/src/ui/toast/ToastViewport.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '../../lib/utils.js'
+import { ToastViewport, type ToastViewportProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('sveda-chat pointer-events-none absolute inset-x-0 bottom-0 top-auto z-[100] flex h-auto max-h-48 w-full flex-col justify-end gap-2 p-3', props.class)" />
+</template>

package/src/ui/toast/Toaster.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { isVNode } from 'vue'
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  useToast,
+} from './index.js'
+
+const { toasts } = useToast()
+
+const isStringDescription = (value: unknown): value is string => typeof value === 'string'
+const isRenderableDescription = (value: unknown) => isVNode(value) || typeof value === 'function'
+</script>
+
+<template>
+  <ToastProvider>
+    <Toast
+      v-for="toastItem in toasts"
+      :key="toastItem.id"
+      v-bind="toastItem"
+    >
+      <div class="grid gap-1">
+        <ToastTitle v-if="toastItem.title">
+          {{ toastItem.title }}
+        </ToastTitle>
+        <ToastDescription v-if="toastItem.description">
+          <template v-if="isStringDescription(toastItem.description)">
+            {{ toastItem.description }}
+          </template>
+          <component
+            :is="toastItem.description"
+            v-else-if="isRenderableDescription(toastItem.description)"
+          />
+        </ToastDescription>
+      </div>
+      <component
+        :is="toastItem.action"
+        v-if="toastItem.action"
+      />
+      <ToastClose />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>

package/src/ui/toast/index.ts

@@ -0,0 +1,39 @@
+import type { ToastRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export { default as Toast } from './Toast.vue'
+export { default as ToastAction } from './ToastAction.vue'
+export { default as ToastClose } from './ToastClose.vue'
+export { default as ToastDescription } from './ToastDescription.vue'
+export { default as ToastProvider } from './ToastProvider.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
+export { default as Toaster } from './Toaster.vue'
+export { toast, useToast } from './use-toast.js'
+export type { StringOrVNode, ToasterToast, ToastOptions } from './use-toast.js'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export const toastVariants = cva(
+  'sveda-chat group pointer-events-auto relative flex w-full flex-none items-center justify-between space-x-4 overflow-hidden rounded-[var(--sveda-radius)] border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--reka-toast-swipe-end-x] data-[swipe=move]:translate-x-[--reka-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-card text-card-foreground',
+        destructive:
+                    'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class']
+  variant?: ToastVariants['variant']
+  onOpenChange?: ((value: boolean) => void) | undefined
+}

package/src/ui/toast/use-toast.ts

@@ -0,0 +1,109 @@
+import type { Component, ComputedRef, VNode } from 'vue'
+import { computed, shallowRef } from 'vue'
+import type { ToastProps } from './index.js'
+
+const TOAST_LIMIT = 3
+const TOAST_REMOVE_DELAY = 5000
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
+
+export type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+let count = 0
+
+function genId(): string {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+interface ToastState {
+  toasts: ToasterToast[]
+}
+
+const state = shallowRef<ToastState>({ toasts: [] })
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function removeToast(toastId: string): void {
+  state.value.toasts = state.value.toasts.filter(toast => toast.id !== toastId)
+}
+
+function addToRemoveQueue(toastId: string): void {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    removeToast(toastId)
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+function dismiss(toastId?: string): void {
+  if (toastId) {
+    addToRemoveQueue(toastId)
+    state.value.toasts = state.value.toasts.map(toast =>
+      toast.id === toastId ? { ...toast, open: false } : toast
+    )
+    return
+  }
+
+  for (const toast of state.value.toasts) {
+    addToRemoveQueue(toast.id)
+  }
+  state.value.toasts = state.value.toasts.map(toast => ({ ...toast, open: false }))
+}
+
+export type ToastOptions = Omit<ToasterToast, 'id'>
+
+function toast(props: ToastOptions) {
+  const id = genId()
+
+  const update = (next: ToastOptions) => {
+    state.value.toasts = state.value.toasts.map(toast =>
+      toast.id === id ? { ...toast, ...next, id } : toast
+    )
+  }
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      dismiss(id)
+    }
+  }
+
+  state.value.toasts = [
+    { ...props, id, open: true, onOpenChange },
+    ...state.value.toasts,
+  ].slice(0, TOAST_LIMIT)
+
+  return {
+    id,
+    dismiss: () => dismiss(id),
+    update,
+  }
+}
+
+export interface UseToastReturn {
+  toasts: ComputedRef<ToasterToast[]>
+  toast: typeof toast
+  dismiss: (toastId?: string) => void
+}
+
+function useToast(): UseToastReturn {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss,
+  }
+}
+
+export { toast, useToast }

package/src/ui/tooltip/Tooltip.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipRoot, useForwardPropsEmits, type TooltipRootEmits, type TooltipRootProps } from 'reka-ui';
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <TooltipRoot v-bind="forwarded">
+        <slot />
+    </TooltipRoot>
+</template>