@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/ui/range-calendar/RangeCalendarGrid.vue

@@ -0,0 +1,19 @@
+<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/runtime/components/ui/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/runtime/components/ui/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/runtime/components/ui/range-calendar/RangeCalendarGridRow.vue

@@ -0,0 +1,19 @@
+<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 w-full', props.class)" v-bind="forwardedProps">
+		<slot />
+	</RangeCalendarGridRow>
+</template>

package/src/runtime/components/ui/range-calendar/RangeCalendarHeadCell.vue

@@ -0,0 +1,19 @@
+<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('text-text-body-subtle dark:text-text-body-subtle h-9 w-11 text-[0.8rem] font-normal', props.class)" v-bind="forwardedProps">
+		<slot />
+	</RangeCalendarHeadCell>
+</template>

package/src/runtime/components/ui/range-calendar/RangeCalendarHeader.vue

@@ -0,0 +1,19 @@
+<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('text-text-heading dark:text-text-heading relative flex w-full items-center justify-center pt-1 text-sm leading-5 font-semibold', props.class)" v-bind="forwardedProps">
+		<slot />
+	</RangeCalendarHeader>
+</template>

package/src/runtime/components/ui/range-calendar/RangeCalendarHeading.vue

@@ -0,0 +1,25 @@
+<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-text-heading text-sm font-medium', props.class)" v-bind="forwardedProps">
+		<slot :heading-value>
+			{{ headingValue }}
+		</slot>
+	</RangeCalendarHeading>
+</template>

package/src/runtime/components/ui/range-calendar/RangeCalendarNextButton.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RangeCalendarNext, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/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({ size: 'xs', iconOnly: true, color: 'ghost' }), 'absolute right-1 size-7 p-0', props.class)" v-bind="forwardedProps">
+		<slot>
+			<SvgIconArrowRight filled :font-controlled="false" class="size-4" />
+		</slot>
+	</RangeCalendarNext>
+</template>

package/src/runtime/components/ui/range-calendar/RangeCalendarPrevButton.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RangeCalendarPrev, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/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({ size: 'xs', iconOnly: true, color: 'ghost' }), 'absolute left-1 size-7 p-0', props.class)" v-bind="forwardedProps">
+		<slot>
+			<SvgIconArrowLeft filled :font-controlled="false" class="size-4" />
+		</slot>
+	</RangeCalendarPrev>
+</template>

package/src/runtime/components/ui/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/runtime/components/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { GripVertical } from 'lucide-vue-next';
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class']; withHandle?: boolean }>();
+const emits = defineEmits<SplitterResizeHandleEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'withHandle');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<SplitterResizeHandle
+		data-slot="resizable-handle"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90',
+				props.class
+			)
+		"
+	>
+		<template v-if="props.withHandle">
+			<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+				<slot>
+					<GripVertical class="size-2.5" />
+				</slot>
+			</div>
+		</template>
+	</SplitterResizeHandle>
+</template>

package/src/runtime/components/ui/resizable/ResizablePanel.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from 'reka-ui';
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<SplitterPanelProps>();
+const emits = defineEmits<SplitterPanelEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+	<SplitterPanel :ref="forwardRef" v-slot="slotProps" data-slot="resizable-panel" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</SplitterPanel>
+</template>

package/src/runtime/components/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SplitterGroupEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<SplitterGroup v-slot="slotProps" data-slot="resizable-panel-group" v-bind="forwarded" :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)">
+		<slot v-bind="slotProps" />
+	</SplitterGroup>
+</template>

package/src/runtime/components/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue';
+export { default as ResizablePanel } from './ResizablePanel.vue';
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';

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

@@ -0,0 +1,22 @@
+<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] outline-none focus-visible:ring-[3px] focus-visible:outline-1">
+			<slot />
+		</ScrollAreaViewport>
+		<ScrollBar />
+		<ScrollAreaCorner />
+	</ScrollAreaRoot>
+</template>

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

@@ -0,0 +1,19 @@
+<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 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/runtime/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/runtime/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/runtime/components/ui/select/SelectContent.vue

@@ -0,0 +1,43 @@
+<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-bg-primary-medium dark:bg-bg-primary-medium text-text-body dark:text-text-body 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 border-border-base-medium dark:border-border-base-medium relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded-xl border',
+					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('flex max-h-40 flex-col gap-1.5 overflow-y-auto p-2', position === 'popper' && 'w-full min-w-(--reka-select-trigger-width) scroll-my-1')">
+				<slot />
+			</SelectViewport>
+			<SelectScrollDownButton />
+		</SelectContent>
+	</SelectPortal>
+</template>

package/src/runtime/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/runtime/components/ui/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 { Check } from 'lucide-vue-next';
+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-bg-tertiary-medium dark:focus:bg-bg-tertiary-medium focus:text-text-heading dark:focus:text-text-heading [&_svg:not([class*=\'text-\'])]:text-text-body text-text-body dark:text-text-body relative flex w-full cursor-default items-center gap-1.5 rounded-lg p-2 text-sm leading-3.5 font-medium 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',
+				props.class
+			)
+		"
+	>
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			<SelectItemIndicator>
+				<slot name="indicator-icon">
+					<Check class="size-4" />
+				</slot>
+			</SelectItemIndicator>
+		</span>
+
+		<SelectItemText class="capitalize">
+			<slot />
+		</SelectItemText>
+	</SelectItem>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronDown } from 'lucide-vue-next';
+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>
+			<ChevronDown class="size-4" />
+		</slot>
+	</SelectScrollDownButton>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronUp } from 'lucide-vue-next';
+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>
+			<ChevronUp class="size-4" />
+		</slot>
+	</SelectScrollUpButton>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronDown } from 'lucide-vue-next';
+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(
+				'border-input group [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap capitalize disabled:cursor-not-allowed disabled:opacity-50 *: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',
+				props.class
+			)
+		"
+	>
+		<slot />
+		<SelectIcon as-child>
+			<ChevronDown class="transition-transform duration-200 group-data-[state=open]:rotate-180" />
+		</SelectIcon>
+	</SelectTrigger>
+</template>

package/src/runtime/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/runtime/components/ui/select/index.ts

@@ -0,0 +1,11 @@
+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 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';

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

@@ -0,0 +1,18 @@
+<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-base shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px', props.class)" />
+</template>

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

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

package/src/runtime/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/runtime/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>