@matta-trade/ui 0.0.0-stage → 0.2.2

package/src/popover/PopoverContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { PopoverContent, type PopoverContentEmits, type PopoverContentProps, PopoverPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(), {
+    align: "center",
+    sideOffset: 4,
+});
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <PopoverPortal>
+        <PopoverContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'border-gray-200 dark:border-gray-800 dark:bg-gray-900 p-3 text-gray-950 dark:text-gray-50 z-50 w-auto rounded-xl border bg-white 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,
+                )
+            "
+        >
+            <slot />
+        </PopoverContent>
+    </PopoverPortal>
+</template>

package/src/popover/PopoverTrigger.vue

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

package/src/popover/index.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";

package/src/range-calendar/RangeCalendar.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import {
+    RangeCalendarCell,
+    RangeCalendarCellTrigger,
+    RangeCalendarGrid,
+    RangeCalendarGridBody,
+    RangeCalendarGridHead,
+    RangeCalendarGridRow,
+    RangeCalendarHeadCell,
+    RangeCalendarHeader,
+    RangeCalendarHeading,
+    RangeCalendarNextButton,
+    RangeCalendarPrevButton,
+} from ".";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from "reka-ui";
+import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>();
+
+const emits = defineEmits<RangeCalendarRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <RangeCalendarRoot v-slot="{ grid, weekDays }" :class="cn('p-3', props.class)" v-bind="forwarded">
+        <RangeCalendarHeader>
+            <RangeCalendarPrevButton />
+            <RangeCalendarHeading />
+            <RangeCalendarNextButton />
+        </RangeCalendarHeader>
+
+        <div class="gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0 flex flex-col">
+            <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+                <RangeCalendarGridHead>
+                    <RangeCalendarGridRow>
+                        <RangeCalendarHeadCell v-for="day in weekDays" :key="day">
+                            {{ day }}
+                        </RangeCalendarHeadCell>
+                    </RangeCalendarGridRow>
+                </RangeCalendarGridHead>
+                <RangeCalendarGridBody>
+                    <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+                        <RangeCalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+                            <RangeCalendarCellTrigger :day="weekDate" :month="month.value" />
+                        </RangeCalendarCell>
+                    </RangeCalendarGridRow>
+                </RangeCalendarGridBody>
+            </RangeCalendarGrid>
+        </div>
+    </RangeCalendarRoot>
+</template>

package/src/range-calendar/RangeCalendarCell.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { RangeCalendarCellProps } from "reka-ui";
+import { RangeCalendarCell, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarCell
+        :class="
+            cn(
+                'h-9 w-9 p-0 relative text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-brand-50 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected])]:dark:bg-brand-950/40 [&:has([data-selected][data-outside-view])]:bg-brand-50/50 [&:has([data-selected][data-outside-view])]:dark:bg-brand-950/20 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
+                props.class,
+            )
+        "
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </RangeCalendarCell>
+</template>

package/src/range-calendar/RangeCalendarCellTrigger.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { RangeCalendarCellTriggerProps } from "reka-ui";
+import { RangeCalendarCellTrigger, useForwardProps } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarCellTrigger
+        :class="
+            cn(
+                buttonVariants({ variant: 'ghost' }),
+                'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
+                '[&[data-today]:not([data-selected])]:bg-secondary [&[data-today]:not([data-selected])]:text-primary',
+                // Selection Start
+                'data-[selection-start]:bg-brand-600 data-[selection-start]:text-white data-[selection-start]:hover:bg-brand-700 data-[selection-start]:focus:bg-brand-700',
+                // Selection End
+                'data-[selection-end]:bg-brand-600 data-[selection-end]:text-white data-[selection-end]:hover:bg-brand-700 data-[selection-end]:focus:bg-brand-700',
+                // Outside months
+                'data-[outside-view]:text-placeholder data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-brand-50 [&[data-outside-view][data-selected]]:text-placeholder [&[data-outside-view][data-selected]]:opacity-30 [&[data-outside-view][data-selected]]:dark:bg-brand-950/40',
+                // Disabled
+                'data-[disabled]:text-placeholder data-[disabled]:opacity-50',
+                // Unavailable
+                'data-[unavailable]:text-error-primary data-[unavailable]:line-through',
+                props.class,
+            )
+        "
+        v-bind="forwardedProps"
+    >
+        <slot />
+    </RangeCalendarCellTrigger>
+</template>

package/src/range-calendar/RangeCalendarGrid.vue

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

package/src/range-calendar/RangeCalendarGridBody.vue

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

package/src/range-calendar/RangeCalendarGridHead.vue

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

package/src/range-calendar/RangeCalendarGridRow.vue

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

package/src/range-calendar/RangeCalendarHeadCell.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { RangeCalendarHeadCellProps } from "reka-ui";
+import { RangeCalendarHeadCell, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarHeadCell :class="cn('w-9 font-normal rounded-md text-[0.8rem] text-tertiary', props.class)" v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarHeadCell>
+</template>

package/src/range-calendar/RangeCalendarHeader.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { RangeCalendarHeaderProps } from "reka-ui";
+import { RangeCalendarHeader, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarHeader :class="cn('pt-1 relative flex w-full items-center justify-between', props.class)" v-bind="forwardedProps">
+        <slot />
+    </RangeCalendarHeader>
+</template>

package/src/range-calendar/RangeCalendarHeading.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { RangeCalendarHeadingProps } from "reka-ui";
+import { RangeCalendarHeading, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes["class"] }>();
+
+defineSlots<{
+    default: (props: { headingValue: string }) => any;
+}>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarHeading v-slot="{ headingValue }" :class="cn('font-medium text-sm', props.class)" v-bind="forwardedProps">
+        <slot :heading-value>
+            {{ headingValue }}
+        </slot>
+    </RangeCalendarHeading>
+</template>

package/src/range-calendar/RangeCalendarNextButton.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronRight } from "lucide-vue-next";
+import type { RangeCalendarNextProps } from "reka-ui";
+import { RangeCalendarNext, useForwardProps } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarNext
+        :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 p-0 bg-transparent opacity-50 hover:opacity-100', props.class)"
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <ChevronRight class="h-4 w-4" />
+        </slot>
+    </RangeCalendarNext>
+</template>

package/src/range-calendar/RangeCalendarPrevButton.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronLeft } from "lucide-vue-next";
+import type { RangeCalendarPrevProps } from "reka-ui";
+import { RangeCalendarPrev, useForwardProps } from "reka-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../lib/utils";
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <RangeCalendarPrev
+        :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 p-0 bg-transparent opacity-50 hover:opacity-100', props.class)"
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <ChevronLeft class="h-4 w-4" />
+        </slot>
+    </RangeCalendarPrev>
+</template>

package/src/range-calendar/index.ts

@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from "./RangeCalendar.vue";
+export { default as RangeCalendarCell } from "./RangeCalendarCell.vue";
+export { default as RangeCalendarCellTrigger } from "./RangeCalendarCellTrigger.vue";
+export { default as RangeCalendarGrid } from "./RangeCalendarGrid.vue";
+export { default as RangeCalendarGridBody } from "./RangeCalendarGridBody.vue";
+export { default as RangeCalendarGridHead } from "./RangeCalendarGridHead.vue";
+export { default as RangeCalendarGridRow } from "./RangeCalendarGridRow.vue";
+export { default as RangeCalendarHeadCell } from "./RangeCalendarHeadCell.vue";
+export { default as RangeCalendarHeader } from "./RangeCalendarHeader.vue";
+export { default as RangeCalendarHeading } from "./RangeCalendarHeading.vue";
+export { default as RangeCalendarNextButton } from "./RangeCalendarNextButton.vue";
+export { default as RangeCalendarPrevButton } from "./RangeCalendarPrevButton.vue";

package/src/scroll-area/ScrollArea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import ScrollBar from "./ScrollBar.vue";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ScrollAreaRootProps } from "reka-ui";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"]; viewportClass?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class", "viewportClass");
+</script>
+
+<template>
+    <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+        <ScrollAreaViewport :class="cn('h-full max-h-[inherit] w-full rounded-[inherit]', props.viewportClass)">
+            <slot />
+        </ScrollAreaViewport>
+        <ScrollBar />
+        <ScrollAreaCorner />
+    </ScrollAreaRoot>
+</template>

package/src/scroll-area/ScrollBar.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { ScrollAreaScrollbarProps } from "reka-ui";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+    orientation: "vertical",
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+    <ScrollAreaScrollbar
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'flex touch-none transition-colors select-none',
+                orientation === 'vertical' && 'w-2.5 h-full border-l border-l-transparent p-px',
+                orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
+                props.class,
+            )
+        "
+    >
+        <ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
+    </ScrollAreaScrollbar>
+</template>

package/src/scroll-area/index.ts

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

package/src/select/Select.vue

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

package/src/select/SelectContent.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { SelectScrollDownButton, SelectScrollUpButton } from ".";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import type { SelectContentEmits, SelectContentProps } from "reka-ui";
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from "reka-ui";
+import { cn } from "../lib/utils";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(), {
+    position: "popper",
+});
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SelectPortal>
+        <SelectContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'max-h-96 min-w-32 relative z-50 overflow-hidden rounded-lg border border-border-secondary bg-primary text-primary shadow-lg 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',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class,
+                )
+            "
+        >
+            <SelectScrollUpButton />
+            <SelectViewport :class="cn('p-1', position === 'popper' && 'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)')">
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
+</template>

package/src/select/SelectGroup.vue

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

package/src/select/SelectItem.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Check } from "lucide-vue-next";
+import type { SelectItemProps } from "reka-ui";
+import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'py-1.5 pl-8 pr-2 relative flex w-full cursor-default items-center rounded-sm text-sm text-primary outline-none select-none focus:bg-active data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <span class="left-2 h-3.5 w-3.5 absolute flex items-center justify-center">
+            <SelectItemIndicator>
+                <Check class="h-4 w-4" />
+            </SelectItemIndicator>
+        </span>
+
+        <SelectItemText>
+            <slot />
+        </SelectItemText>
+    </SelectItem>
+</template>

package/src/select/SelectItemText.vue

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

package/src/select/SelectLabel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import type { SelectLabelProps } from "reka-ui";
+import { SelectLabel } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <SelectLabel :class="cn('py-1.5 pl-8 pr-2 font-semibold text-sm', props.class)">
+        <slot />
+    </SelectLabel>
+</template>

package/src/select/SelectScrollDownButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronDown } from "lucide-vue-next";
+import type { SelectScrollDownButtonProps } from "reka-ui";
+import { SelectScrollDownButton, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectScrollDownButton v-bind="forwardedProps" :class="cn('py-1 flex cursor-default items-center justify-center', props.class)">
+        <slot>
+            <ChevronDown class="h-4 w-4" />
+        </slot>
+    </SelectScrollDownButton>
+</template>

package/src/select/SelectScrollUpButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ChevronUp } from "lucide-vue-next";
+import type { SelectScrollUpButtonProps } from "reka-ui";
+import { SelectScrollUpButton, useForwardProps } from "reka-ui";
+import { cn } from "../lib/utils";
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectScrollUpButton v-bind="forwardedProps" :class="cn('py-1 flex cursor-default items-center justify-center', props.class)">
+        <slot>
+            <ChevronUp class="h-4 w-4" />
+        </slot>
+    </SelectScrollUpButton>
+</template>