@matta-trade/ui 0.0.0-stage → 0.2.1

package/src/checkbox/Checkbox.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+import type { CheckboxRootEmits, CheckboxRootProps } from "reka-ui";
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <CheckboxRoot
+        v-bind="forwarded"
+        :class="
+            cn(
+                'peer h-4 w-4 grid shrink-0 place-content-center rounded-sm border border-primary transition-colors focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-brand-solid data-[state=checked]:text-white',
+                props.class,
+            )
+        "
+    >
+        <CheckboxIndicator class="grid place-content-center text-current">
+            <slot>
+                <Check class="h-4 w-4" />
+            </slot>
+        </CheckboxIndicator>
+    </CheckboxRoot>
+</template>

package/src/checkbox/index.ts

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

package/src/combobox/Combobox.vue

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

package/src/combobox/ComboboxAnchor.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxAnchorProps } from "reka-ui";
+import { ComboboxAnchor, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ComboboxAnchor v-bind="forwarded" :class="cn('w-[200px]', props.class)">
+        <slot />
+    </ComboboxAnchor>
+</template>

package/src/combobox/ComboboxEmpty.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxEmptyProps } from "reka-ui";
+import { ComboboxEmpty } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+        <slot />
+    </ComboboxEmpty>
+</template>

package/src/combobox/ComboboxGroup.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxGroupProps } from "reka-ui";
+import { ComboboxGroup, ComboboxLabel } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<
+    ComboboxGroupProps & {
+        class?: HTMLAttributes["class"];
+        heading?: string;
+    }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <ComboboxGroup
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:text-xs',
+                props.class,
+            )
+        "
+    >
+        <ComboboxLabel v-if="heading" class="px-2 py-1.5 font-medium text-muted-foreground text-xs">
+            {{ heading }}
+        </ComboboxLabel>
+        <slot />
+    </ComboboxGroup>
+</template>

package/src/combobox/ComboboxInput.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxInputEmits, ComboboxInputProps } from "reka-ui";
+import { ComboboxInput, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<
+    ComboboxInputProps & {
+        class?: HTMLAttributes["class"];
+    }
+>();
+
+const emits = defineEmits<ComboboxInputEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxInput
+        v-bind="forwarded"
+        :class="
+            cn(
+                'h-9 px-3 py-1 file:font-medium flex w-full rounded-md 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,
+            )
+        "
+    >
+        <slot />
+    </ComboboxInput>
+</template>

package/src/combobox/ComboboxItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxItemEmits, ComboboxItemProps } from "reka-ui";
+import { ComboboxItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxItem
+        v-bind="forwarded"
+        :class="
+            cn(
+                'gap-2 px-2 py-1.5 [&_svg]:size-4 relative flex cursor-default items-center justify-between rounded-sm text-sm text-primary outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-active [&_svg]:shrink-0',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </ComboboxItem>
+</template>

package/src/combobox/ComboboxList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxContentEmits, ComboboxContentProps } from "reka-ui";
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(), {
+    position: "popper",
+    align: "center",
+    sideOffset: 4,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxPortal>
+        <ComboboxContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'z-50 w-[200px] rounded-md border border-border-secondary bg-primary text-primary shadow-lg outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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,
+                )
+            "
+        >
+            <ComboboxViewport>
+                <slot />
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>

package/src/combobox/ComboboxSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxSeparatorProps } from "reka-ui";
+import { ComboboxSeparator } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 bg-border h-px', props.class)">
+        <slot />
+    </ComboboxSeparator>
+</template>

package/src/combobox/ComboboxTrigger.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ComboboxTriggerProps } from "reka-ui";
+import { ComboboxTrigger, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ComboboxTrigger
+        v-bind="forwarded"
+        :class="cn('rounded-md focus-visible:ring-2 focus-visible:ring-brand-500/20 focus-visible:outline-none', props.class)"
+        tabindex="0"
+    >
+        <slot />
+    </ComboboxTrigger>
+</template>

package/src/combobox/index.ts

@@ -0,0 +1,11 @@
+export { default as Combobox } from "./Combobox.vue";
+export { default as ComboboxAnchor } from "./ComboboxAnchor.vue";
+export { default as ComboboxEmpty } from "./ComboboxEmpty.vue";
+export { default as ComboboxGroup } from "./ComboboxGroup.vue";
+export { default as ComboboxInput } from "./ComboboxInput.vue";
+export { default as ComboboxItem } from "./ComboboxItem.vue";
+export { default as ComboboxList } from "./ComboboxList.vue";
+export { default as ComboboxSeparator } from "./ComboboxSeparator.vue";
+export { default as ComboboxTrigger } from "./ComboboxTrigger.vue";
+
+export { ComboboxCancel, ComboboxItemIndicator } from "reka-ui";

package/src/command/Command.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { provideCommandContext } from ".";
+import type { HTMLAttributes } from "vue";
+import { reactive, ref, watch } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui";
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+    modelValue: "",
+});
+
+const emits = defineEmits<ListboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const allItems = ref<Map<string, string>>(new Map());
+const allGroups = ref<Map<string, Set<string>>>(new Map());
+
+const { contains } = useFilter({ sensitivity: "base" });
+const filterState = reactive({
+    search: "",
+    filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: new Map() as Map<string, number>,
+        /** Set of groups with at least one visible item. */
+        groups: new Set() as Set<string>,
+    },
+});
+
+function filterItems() {
+    if (!filterState.search) {
+        filterState.filtered.count = allItems.value.size;
+        // Do nothing, each item will know to show itself because search is empty
+        return;
+    }
+
+    // Reset the groups
+    filterState.filtered.groups = new Set();
+    let itemCount = 0;
+
+    // Check which items should be included
+    for (const [id, value] of allItems.value) {
+        const score = contains(value, filterState.search);
+        filterState.filtered.items.set(id, score ? 1 : 0);
+        if (score) itemCount++;
+    }
+
+    // Check which groups have at least 1 item shown
+    for (const [groupId, group] of allGroups.value) {
+        for (const itemId of group) {
+            if (filterState.filtered.items.get(itemId)! > 0) {
+                filterState.filtered.groups.add(groupId);
+                break;
+            }
+        }
+    }
+
+    filterState.filtered.count = itemCount;
+}
+
+watch(
+    () => filterState.search,
+    () => {
+        filterItems();
+    },
+);
+
+provideCommandContext({
+    allItems,
+    allGroups,
+    filterState,
+});
+</script>
+
+<template>
+    <ListboxRoot v-bind="forwarded" :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-primary text-primary', props.class)">
+        <slot />
+    </ListboxRoot>
+</template>

package/src/command/CommandDialog.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import Command from "./Command.vue";
+import type { DialogRootEmits, DialogRootProps } from "reka-ui";
+import { useForwardPropsEmits } from "reka-ui";
+import { Dialog, DialogContent } from "../dialog";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <Dialog v-bind="forwarded">
+        <DialogContent class="p-0 overflow-hidden shadow-lg">
+            <Command
+                class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 [&_[cmdk-group-heading]]:text-tertiary"
+            >
+                <slot />
+            </Command>
+        </DialogContent>
+    </Dialog>
+</template>

package/src/command/CommandEmpty.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useCommand } from ".";
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { PrimitiveProps } from "reka-ui";
+import { Primitive } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const { filterState } = useCommand();
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0);
+</script>
+
+<template>
+    <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+        <slot />
+    </Primitive>
+</template>

package/src/command/CommandGroup.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { provideCommandGroupContext, useCommand } from ".";
+import type { HTMLAttributes } from "vue";
+import { computed, onMounted, onUnmounted } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ListboxGroupProps } from "reka-ui";
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<
+    ListboxGroupProps & {
+        class?: HTMLAttributes["class"];
+        heading?: string;
+    }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const { allGroups, filterState } = useCommand();
+const id = useId();
+
+const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)));
+
+provideCommandGroupContext({ id });
+onMounted(() => {
+    if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+});
+onUnmounted(() => {
+    allGroups.value.delete(id);
+});
+</script>
+
+<template>
+    <ListboxGroup
+        v-bind="delegatedProps"
+        :id="id"
+        :class="
+            cn(
+                'p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium overflow-hidden text-primary [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:text-tertiary',
+                props.class,
+            )
+        "
+        :hidden="isRender ? undefined : true"
+    >
+        <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 font-medium text-xs text-tertiary">
+            {{ heading }}
+        </ListboxGroupLabel>
+        <slot />
+    </ListboxGroup>
+</template>

package/src/command/CommandInput.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useCommand } from ".";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Search } from "lucide-vue-next";
+import type { ListboxFilterProps } from "reka-ui";
+import { ListboxFilter, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps<
+    ListboxFilterProps & {
+        class?: HTMLAttributes["class"];
+    }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const { filterState } = useCommand();
+</script>
+
+<template>
+    <div class="px-3 flex items-center border-b border-border-secondary" cmdk-input-wrapper>
+        <Search class="mr-2 h-4 w-4 shrink-0 text-tertiary" />
+        <ListboxFilter
+            v-bind="{ ...forwardedProps, ...$attrs }"
+            v-model="filterState.search"
+            auto-focus
+            :class="
+                cn(
+                    'h-10 py-3 flex w-full rounded-md bg-transparent text-sm text-primary outline-none placeholder:text-placeholder disabled:cursor-not-allowed disabled:opacity-50',
+                    props.class,
+                )
+            "
+        />
+    </div>
+</template>

package/src/command/CommandItem.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useCommand, useCommandGroup } from ".";
+import type { HTMLAttributes } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { reactiveOmit, useCurrentElement } from "@vueuse/core";
+import type { ListboxItemEmits, ListboxItemProps } from "reka-ui";
+import { ListboxItem, useForwardPropsEmits, useId } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ListboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const id = useId();
+const { filterState, allItems, allGroups } = useCommand();
+const groupContext = useCommandGroup();
+
+const isRender = computed(() => {
+    if (!filterState.search) {
+        return true;
+    } else {
+        const filteredCurrentItem = filterState.filtered.items.get(id);
+        // If the filtered items is undefined means not in the all times map yet
+        // Do the first render to add into the map
+        if (filteredCurrentItem === undefined) {
+            return true;
+        }
+
+        // Check with filter
+        return filteredCurrentItem > 0;
+    }
+});
+
+const itemRef = ref();
+const currentElement = useCurrentElement(itemRef);
+onMounted(() => {
+    if (!(currentElement.value instanceof HTMLElement)) return;
+
+    // textValue to perform filter
+    allItems.value.set(id, currentElement.value.textContent ?? props?.value!.toString());
+
+    const groupId = groupContext?.id;
+    if (groupId) {
+        if (!allGroups.value.has(groupId)) {
+            allGroups.value.set(groupId, new Set([id]));
+        } else {
+            allGroups.value.get(groupId)?.add(id);
+        }
+    }
+});
+onUnmounted(() => {
+    allItems.value.delete(id);
+});
+</script>
+
+<template>
+    <ListboxItem
+        v-if="isRender"
+        v-bind="forwarded"
+        :id="id"
+        ref="itemRef"
+        :class="
+            cn(
+                'gap-2 px-2 py-1.5 [&_svg]:size-4 relative flex cursor-default items-center rounded-sm text-sm text-primary outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-active [&_svg]:shrink-0',
+                props.class,
+            )
+        "
+        @select="
+            () => {
+                filterState.search = '';
+            }
+        "
+    >
+        <slot />
+    </ListboxItem>
+</template>

package/src/command/CommandList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ListboxContentProps } from "reka-ui";
+import { ListboxContent, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+import { ScrollArea } from "../scroll-area";
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ListboxContent v-bind="forwarded">
+        <!-- [&>div]:!block stops the viewport's table wrapper growing past the popover, so long options still truncate. -->
+        <ScrollArea :class="cn('max-h-[300px]', props.class)" viewport-class="[&>div]:!block">
+            <div role="presentation">
+                <slot />
+            </div>
+        </ScrollArea>
+    </ListboxContent>
+</template>

package/src/command/CommandSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { SeparatorProps } from "reka-ui";
+import { Separator } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <Separator v-bind="delegatedProps" :class="cn('-mx-1 bg-gray-200 dark:bg-gray-800 h-px', props.class)">
+        <slot />
+    </Separator>
+</template>

package/src/command/CommandShortcut.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>
+    <span :class="cn('tracking-widest ml-auto text-xs text-tertiary', props.class)">
+        <slot />
+    </span>
+</template>