@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/ui/popover/Popover.vue

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

package/src/components/ui/popover/PopoverAnchor.vue

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

package/src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  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 = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent data-slot="popover-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 z-50 w-72 rounded border border-border p-4 transition-colors duration-300 ease-in-out origin-(--reka-popover-content-transform-origin) outline-hidden',
+      props.class,
+    )
+      ">
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/components/ui/popover/PopoverTrigger.vue

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

package/src/components/ui/popover/index.ts

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

package/src/components/ui/progress/Progress.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-[var(--bg-selected-light)] dark:bg-[var(--bg-selected-dark)] relative h-2 w-full overflow-hidden',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

package/src/components/ui/progress/index.ts

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

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+} from "reka-ui"
+import { cn } from "../../../lib/utils"
+import ScrollBar from "./ScrollBar.vue"
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+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
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none p-px transition-colors select-none',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent',
+         props.class)"
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>

package/src/components/ui/scroll-area/index.ts

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

package/src/components/ui/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/components/ui/select/SelectContent.vue

@@ -0,0 +1,50 @@
+<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"] }>(),
+  {
+    align: "start",
+    position: "popper",
+    sideOffset: 4,
+    collisionPadding: 8,
+  },
+)
+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 border border-border transition-colors duration-300 ease-in-out max-sm:w-[calc(100vw-1rem)] max-sm:max-w-[calc(100vw-1rem)] max-sm:min-w-0',
+      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) scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/components/ui/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/components/ui/select/SelectItem.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+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-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed 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">
+          <HugeiconsIcon :icon="Tick02Icon" class="size-4" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <template v-if="props.textValue">
+      <SelectItemText>
+        <span class="sr-only">{{ props.textValue }}</span>
+      </SelectItemText>
+
+      <div class="flex min-w-0 flex-1 flex-col">
+        <slot />
+      </div>
+    </template>
+
+    <SelectItemText v-else>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

package/src/components/ui/select/SelectItemContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { cn } from "../../../lib/utils"
+
+type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+
+// Props
+const props = defineProps<{
+    class?: HTMLAttributes["class"]
+    icon?: HugeiconsIconDefinition | null
+    label?: string | number | null
+    description?: string | number | null
+    iconClass?: HTMLAttributes["class"]
+    textClass?: HTMLAttributes["class"]
+    descriptionClass?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+    <div data-slot="select-item-content" :class="cn('flex min-w-0 flex-1 items-center gap-2', props.class)">
+        <!-- Icon -->
+        <div v-if="props.icon" data-slot="select-item-content-icon" :class="cn('shrink-0 self-center', props.iconClass)">
+            <HugeiconsIcon :icon="props.icon" class="block size-3 sm:size-4" />
+        </div>
+
+        <!-- Text and description -->
+        <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+            <!-- Text -->
+            <span data-slot="select-item-content-text" :class="cn('min-w-0 truncate font-semibold text-xs sm:text-sm leading-5', props.textClass)">
+                {{ props.label }}
+            </span>
+
+            <!-- Description -->
+            <span v-if="props.description" data-slot="select-item-content-description" :class="cn('font-regular text-[11px] sm:text-xs leading-4 sm:leading-5 text-(--text-secondary-light) dark:text-(--text-secondary-dark)', props.descriptionClass)">
+                {{ props.description }}
+            </span>
+        </div>
+    </div>
+</template>

package/src/components/ui/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/components/ui/select/SelectLabel.vue

@@ -0,0 +1,14 @@
+<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/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ArrowDown01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+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>
+      <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

package/src/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ArrowUp01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+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 data-slot="select-scroll-up-button" v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <HugeiconsIcon :icon="ArrowUp01Icon" class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

package/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectSeparator } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <SelectSeparator data-slot="select-separator" v-bind="delegatedProps" :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)" />
+</template>

package/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ArrowDown01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
+)
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger data-slot="select-trigger" :data-size="size" v-bind="forwardedProps" :class="cn(
+    'data-[placeholder]:text-(--text-secondary-light) [&_svg:not([class*=\'text-\'])]:text-(--text-secondary-light) flex w-fit cursor-pointer items-center justify-between gap-2 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold whitespace-nowrap text-(--text-primary-light) transition-all duration-300 ease-in-out outline-none disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:data-[placeholder]:text-(--text-secondary-dark) dark:[&_svg:not([class*=\'text-\'])]:text-(--text-secondary-dark) sm:text-sm',
+    'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
+    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+    props.class,
+  )">
+    <slot />
+    <SelectIcon as-child>
+      <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/components/ui/select/SelectValue.vue

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

package/src/components/ui/select/SelectValueContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { HugeiconsIcon } from "@hugeicons/vue"
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+
+// Props
+const props = defineProps<SelectValueProps & {
+    class?: HTMLAttributes["class"]
+    icon?: HugeiconsIconDefinition | null
+    label?: string | number | null
+    description?: string | number | null
+    iconClass?: HTMLAttributes["class"]
+    textClass?: HTMLAttributes["class"]
+    descriptionClass?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+    <SelectValue data-slot="select-value-content" :placeholder="props.placeholder" :class="cn('flex min-w-0 flex-1 gap-1.5 text-left sm:gap-2', props.description ? 'items-start' : 'items-center', props.class)">
+        <template v-if="props.label != null || props.description != null">
+            <!-- Icon -->
+            <div v-if="props.icon" data-slot="select-value-content-icon" :class="cn('shrink-0', props.iconClass)">
+                <HugeiconsIcon :icon="props.icon" />
+            </div>
+
+            <!-- Text and description -->
+            <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+                <!-- Text -->
+                <span data-slot="select-value-content-text" :class="cn('min-w-0 whitespace-normal break-words text-xs leading-5 sm:truncate sm:text-sm max-sm:[display:-webkit-box] max-sm:[overflow:hidden] max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:2]', props.textClass)">
+                    {{ props.label }}
+                </span>
+
+                <!-- Description -->
+                <span v-if="props.description" data-slot="select-value-content-description" :class="cn('min-w-0 whitespace-normal break-words text-[11px] leading-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:[overflow:hidden] max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]', props.descriptionClass)">
+                    {{ props.description }}
+                </span>
+            </div>
+        </template>
+    </SelectValue>
+</template>

package/src/components/ui/select/index.ts

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

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "../../../lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator data-slot="separator" v-bind="delegatedProps" :class="cn(
+    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+    props.class,
+  )
+    " />
+</template>

package/src/components/ui/separator/index.ts

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

package/src/components/ui/sheet/Sheet.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-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>

package/src/components/ui/sheet/SheetClose.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 data-slot="sheet-close" v-bind="props">
+    <slot />
+  </DialogClose>
+</template>