@matta-trade/ui 0.0.0-stage → 0.2.2

package/src/command/index.ts

@@ -0,0 +1,25 @@
+import type { Ref } from "vue";
+import { createContext } from "reka-ui";
+
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
+
+export const [useCommand, provideCommandContext] = createContext<{
+    allItems: Ref<Map<string, string>>;
+    allGroups: Ref<Map<string, Set<string>>>;
+    filterState: {
+        search: string;
+        filtered: { count: number; items: Map<string, number>; groups: Set<string> };
+    };
+}>("Command");
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+    id?: string;
+}>("CommandGroup");

package/src/dialog/Dialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { DialogRoot, useForwardPropsEmits } 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/dialog/DialogClose.vue

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

package/src/dialog/DialogContent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="inset-0 backdrop-blur-xs fixed z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
+        <DialogContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'max-w-lg gap-4 p-6 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border-secondary bg-primary text-primary shadow-2xl duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=open]:zoom-in-95',
+                    props.class,
+                )
+            "
+        >
+            <slot />
+
+            <DialogClose
+                class="right-4 top-4 bg-gray-100 dark:bg-gray-800 p-1.5 hover:bg-gray-200 dark:hover:bg-gray-700 absolute rounded-lg text-tertiary transition-colors hover:text-primary focus:ring-2 focus:ring-brand-500/20 focus:outline-none"
+            >
+                <X class="w-4 h-4" />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/src/dialog/DialogDescription.vue

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

package/src/dialog/DialogFooter.vue

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

package/src/dialog/DialogHeader.vue

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

package/src/dialog/DialogScrollContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { X } from "lucide-vue-next";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="inset-0 fixed z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        >
+            <DialogContent
+                :class="
+                    cn(
+                        'max-w-lg my-8 gap-4 border-border bg-background p-6 sm:rounded-lg md:w-full relative z-50 grid w-full border shadow-lg duration-200',
+                        props.class,
+                    )
+                "
+                v-bind="forwarded"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target as HTMLElement;
+                        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+                            event.preventDefault();
+                        }
+                    }
+                "
+            >
+                <slot />
+
+                <DialogClose class="top-3 right-3 p-0.5 absolute rounded-md transition-colors hover:bg-secondary">
+                    <X class="w-4 h-4" />
+                    <span class="sr-only">Close</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
+</template>

package/src/dialog/DialogTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { DialogTitleProps } from "reka-ui";
+import { DialogTitle, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DialogTitle v-bind="forwardedProps" :class="cn('font-semibold tracking-tight text-lg leading-none', props.class)">
+        <slot />
+    </DialogTitle>
+</template>

package/src/dialog/DialogTrigger.vue

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

package/src/dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogScrollContent } from "./DialogScrollContent.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";

package/src/drawer/Drawer.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { ComputedRef } from "vue";
+import { useForwardPropsEmits } from "reka-ui";
+import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+import { DrawerRoot } from "vaul-vue";
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+    shouldScaleBackground: true,
+});
+
+const emits = defineEmits<DrawerRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits) as ComputedRef<Record<string, unknown>>;
+</script>
+
+<template>
+    <DrawerRoot v-bind="forwarded">
+        <slot />
+    </DrawerRoot>
+</template>

package/src/drawer/DrawerContent.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import DrawerOverlay from "./DrawerOverlay.vue";
+import type { HTMLAttributes } from "vue";
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+import { useForwardPropsEmits } from "reka-ui";
+import { DrawerContent, DrawerPortal } from "vaul-vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DrawerPortal>
+        <DrawerOverlay />
+        <DrawerContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'inset-x-0 bottom-0 mt-24 border-gray-200 dark:border-gray-800 dark:bg-gray-900 text-gray-900 dark:text-gray-100 fixed z-50 flex h-auto flex-col rounded-t-2xl border bg-white shadow-2xl',
+                    props.class,
+                )
+            "
+        >
+            <div class="mt-3 h-1.5 bg-gray-300 dark:bg-gray-700 mx-auto w-[48px] rounded-full" />
+            <slot />
+        </DrawerContent>
+    </DrawerPortal>
+</template>

package/src/drawer/DrawerDescription.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { DrawerDescriptionProps } from "vaul-vue";
+import { DrawerDescription } from "vaul-vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <DrawerDescription v-bind="delegatedProps" :class="cn('text-gray-500 dark:text-gray-400 text-xs', props.class)">
+        <slot />
+    </DrawerDescription>
+</template>

package/src/drawer/DrawerFooter.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('gap-2 p-4 mt-auto flex flex-col', props.class)">
+        <slot />
+    </div>
+</template>

package/src/drawer/DrawerHeader.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div :class="cn('gap-1.5 p-4 sm:text-left grid text-center', props.class)">
+        <slot />
+    </div>
+</template>

package/src/drawer/DrawerOverlay.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { DialogOverlayProps } from "reka-ui";
+import { DrawerOverlay } from "vaul-vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <DrawerOverlay v-bind="delegatedProps" :class="cn('inset-0 backdrop-blur-xs fixed z-50 bg-black/50', props.class)" />
+</template>

package/src/drawer/DrawerTitle.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { DrawerTitleProps } from "vaul-vue";
+import { DrawerTitle } from "vaul-vue";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DrawerTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <DrawerTitle v-bind="delegatedProps" :class="cn('font-semibold text-gray-900 tracking-tight text-lg leading-none dark:text-white', props.class)">
+        <slot />
+    </DrawerTitle>
+</template>

package/src/drawer/index.ts

@@ -0,0 +1,8 @@
+export { default as Drawer } from "./Drawer.vue";
+export { default as DrawerContent } from "./DrawerContent.vue";
+export { default as DrawerDescription } from "./DrawerDescription.vue";
+export { default as DrawerFooter } from "./DrawerFooter.vue";
+export { default as DrawerHeader } from "./DrawerHeader.vue";
+export { default as DrawerOverlay } from "./DrawerOverlay.vue";
+export { default as DrawerTitle } from "./DrawerTitle.vue";
+export { DrawerClose, DrawerPortal, DrawerTrigger } from "vaul-vue";

package/src/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import {
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRoot,
+    type DropdownMenuRootEmits,
+    type DropdownMenuRootProps,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuRoot v-bind="forwarded">
+        <slot />
+    </DropdownMenuRoot>
+</template>

package/src/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { DropdownMenuContent, type DropdownMenuContentEmits, type DropdownMenuContentProps, DropdownMenuPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(), {
+    sideOffset: 4,
+});
+
+const emits = defineEmits<DropdownMenuContentEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            :class="
+                cn(
+                    'p-1 z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border-secondary bg-primary text-primary shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+                    props.class,
+                )
+            "
+            v-bind="forwarded"
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
+</template>

package/src/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { DropdownMenuItem, type DropdownMenuItemEmits, type DropdownMenuItemProps, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuItemEmits>();
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuItem
+        :class="
+            cn(
+                'gap-2 px-2.5 py-1.5 relative flex cursor-pointer items-center rounded-md text-sm transition-colors outline-none select-none focus:bg-secondary focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+        v-bind="forwarded"
+    >
+        <slot />
+    </DropdownMenuItem>
+</template>

package/src/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { DropdownMenuLabel, type DropdownMenuLabelProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <DropdownMenuLabel :class="cn('px-2.5 py-1.5 font-semibold text-xs text-quaternary', props.class)" v-bind="props">
+        <slot />
+    </DropdownMenuLabel>
+</template>

package/src/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<DropdownMenuSeparatorProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <DropdownMenuSeparator :class="cn('-mx-1 my-1 h-px bg-border-secondary', props.class)" v-bind="props" />
+</template>

package/src/dropdown-menu/DropdownMenuTrigger.vue

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

package/src/dropdown-menu/index.ts

@@ -0,0 +1,6 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";

package/src/index.ts

@@ -0,0 +1,2 @@
+export { cn } from "./lib/utils";
+export * from "./avatar-colors";

package/src/input/Input.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "../lib/utils";
+
+interface Props {
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    class?: HTMLAttributes["class"];
+    type?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    type: "text",
+    disabled: false,
+});
+
+const emits = defineEmits<{
+    (e: "update:modelValue", payload: string | number): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+    passive: true,
+    defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+    <input
+        v-model="modelValue"
+        :type="props.type"
+        :placeholder="props.placeholder"
+        :disabled="props.disabled"
+        :class="
+            cn(
+                'h-10 px-3 py-2 ring-offset-primary file:font-medium flex w-full rounded-lg border border-border-primary bg-primary text-sm text-primary shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm placeholder:text-placeholder focus-visible:border-border-brand focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+                props.class,
+            )
+        "
+    />
+</template>

package/src/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";

package/src/label/Label.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes } from "vue";
+import { type LabelProps, Label as RekaLabel } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <RekaLabel
+        :class="cn('font-medium text-sm leading-none text-primary select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)"
+        v-bind="props"
+    >
+        <slot />
+    </RekaLabel>
+</template>

package/src/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/src/popover/Popover.vue

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