@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/shadcn/radio-group/RadioGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>();
+  const emits = defineEmits<RadioGroupRootEmits>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <RadioGroupRoot
+    #default="slotProps"
+    data-slot="radio-group"
+    :class="cn('grid gap-3', props.class)"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </RadioGroupRoot>
+</template>

package/src/primitives/shadcn/radio-group/RadioGroupItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import type { RadioGroupItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { CircleIcon } from 'lucide-vue-next';
+  import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RadioGroupItem
+    data-slot="radio-group-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      data-slot="radio-group-indicator"
+      class="relative flex items-center justify-center"
+    >
+      <slot>
+        <CircleIcon
+          class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+        />
+      </slot>
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/src/primitives/shadcn/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';

package/src/primitives/shadcn/range-calendar/RangeCalendar.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+  import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { RangeCalendarRoot, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import {
+    RangeCalendarCell,
+    RangeCalendarCellTrigger,
+    RangeCalendarGrid,
+    RangeCalendarGridBody,
+    RangeCalendarGridHead,
+    RangeCalendarGridRow,
+    RangeCalendarHeadCell,
+    RangeCalendarHeader,
+    RangeCalendarHeading,
+    RangeCalendarNextButton,
+    RangeCalendarPrevButton,
+  } from '.';
+
+  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 }"
+    data-slot="range-calendar"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarHeading />
+
+      <div class="flex items-center gap-1">
+        <RangeCalendarPrevButton />
+        <RangeCalendarNextButton />
+      </div>
+    </RangeCalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <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/primitives/shadcn/range-calendar/RangeCalendarCell.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+  import type { RangeCalendarCellProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  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
+    data-slot="range-calendar-cell"
+    :class="
+      cn(
+        'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&: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/primitives/shadcn/range-calendar/RangeCalendarCellTrigger.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+  import type { RangeCalendarCellTriggerProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { RangeCalendarCellTrigger, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/button';
+
+  const props = withDefaults(
+    defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(),
+    {
+      as: 'button',
+    },
+  );
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    data-slot="range-calendar-trigger"
+    :class="
+      cn(
+        buttonVariants({ variant: 'ghost' }),
+        'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selection Start
+        'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+        // Selection End
+        'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+        // Outside months
+        'data-[outside-view]:text-muted-foreground',
+        // Disabled
+        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+        // Unavailable
+        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarGrid.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { RangeCalendarGridProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  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
+    data-slot="range-calendar-grid"
+    :class="cn('w-full border-collapse space-x-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>

package/src/primitives/shadcn/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 data-slot="range-calendar-grid-body" v-bind="props">
+    <slot />
+  </RangeCalendarGridBody>
+</template>

package/src/primitives/shadcn/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 data-slot="range-calendar-grid-head" v-bind="props">
+    <slot />
+  </RangeCalendarGridHead>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarGridRow.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { RangeCalendarGridRowProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  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
+    data-slot="range-calendar-grid-row"
+    :class="cn('flex', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGridRow>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarHeadCell.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { RangeCalendarHeadCellProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  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
+    data-slot="range-calendar-head-cell"
+    :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeadCell>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarHeader.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+  import type { RangeCalendarHeaderProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  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
+    data-slot="range-calendar-header"
+    :class="cn('flex justify-center pt-1 relative items-center w-full', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarHeader>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarHeading.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+  import type { RangeCalendarHeadingProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  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 }"
+    data-slot="range-calendar-heading"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarNextButton.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+  import type { RangeCalendarNextProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Icon } from '@/primitives/shadcn/icon';
+  import { RangeCalendarNext, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/button';
+
+  const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RangeCalendarNext
+    data-slot="range-calendar-next-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'absolute right-1',
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Icon icon="i-material-symbols-keyboard-arrow-right" class="text-base" />
+    </slot>
+  </RangeCalendarNext>
+</template>

package/src/primitives/shadcn/range-calendar/RangeCalendarPrevButton.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+  import type { RangeCalendarPrevProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Icon } from '@/primitives/shadcn/icon';
+  import { RangeCalendarPrev, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { buttonVariants } from '@/primitives/shadcn/button';
+
+  const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>();
+
+  const delegatedProps = reactiveOmit(props, 'class');
+
+  const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <RangeCalendarPrev
+    data-slot="range-calendar-prev-button"
+    :class="
+      cn(
+        buttonVariants({ variant: 'outline' }),
+        'absolute left-1',
+        'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        props.class,
+      )
+    "
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Icon icon="i-material-symbols-keyboard-arrow-left" class="text-base" />
+    </slot>
+  </RangeCalendarPrev>
+</template>

package/src/primitives/shadcn/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/primitives/shadcn/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-slot="slotProps" data-slot="select" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>

package/src/primitives/shadcn/select/SelectContent.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+  import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { SelectScrollDownButton, SelectScrollUpButton } from '.';
+
+  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
+      data-slot="select-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          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-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
+          )
+        "
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/primitives/shadcn/select/SelectGroup.vue

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

package/src/primitives/shadcn/select/SelectItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+  import type { SelectItemProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Icon } from '@/primitives/shadcn/icon';
+  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
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <Icon icon="i-material-symbols-check" class="text-base" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

package/src/primitives/shadcn/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 data-slot="select-item-text" v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>

package/src/primitives/shadcn/select/SelectLabel.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import type { SelectLabelProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { SelectLabel } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>

package/src/primitives/shadcn/select/SelectScrollDownButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { SelectScrollDownButtonProps } from 'reka-ui';
+  import type { HTMLAttributes } from 'vue';
+  import { reactiveOmit } from '@vueuse/core';
+  import { Icon } from '@/primitives/shadcn/icon';
+  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
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <Icon icon="i-material-symbols-keyboard-arrow-down" class="text-base" />
+    </slot>
+  </SelectScrollDownButton>
+</template>