@reinvented/design 0.2.0 → 0.2.1

package/src/components/ui/form/FormItem.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+<template><div :class="cn('space-y-2', props.class)"><slot /></div></template>

package/src/components/ui/form/FormLabel.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class']; error?: boolean }>()
+</script>
+<template>
+  <label :class="cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', error && 'text-destructive', props.class)">
+    <slot />
+  </label>
+</template>

package/src/components/ui/form/FormMessage.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class']; message?: string }>()
+</script>
+<template>
+  <p v-if="message" :class="cn('text-[0.8rem] font-medium text-destructive', props.class)">
+    {{ message }}
+  </p>
+</template>

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

@@ -0,0 +1,9 @@
+// Form components using vee-validate
+// Re-export vee-validate primitives with standard naming
+export { Form, Field as FormField } from 'vee-validate'
+
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormMessage } from './FormMessage.vue'

package/src/components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>

package/src/components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { HoverCardContent, type HoverCardContentProps, HoverCardPortal, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  { sideOffset: 4, align: 'center' },
+)
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="cn(
+        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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',
+        props.class,
+      )"
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

package/src/components/ui/hover-card/HoverCardTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>

package/src/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'

package/src/components/ui/label/Label.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Label as LabelRoot, type LabelProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <LabelRoot
+    v-bind="forwardedProps"
+    :class="cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)"
+  >
+    <slot />
+  </LabelRoot>
+</template>

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

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

package/src/components/ui/menubar/MenubarContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarContent, type MenubarContentProps, MenubarPortal, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+const props = withDefaults(defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(), { sideOffset: 5, alignOffset: -4 })
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <MenubarPortal>
+    <MenubarContent v-bind="forwardedProps" :class="cn('z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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', props.class)">
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>

package/src/components/ui/menubar/MenubarItem.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarItem, type MenubarItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+const delegatedProps = computed(() => { const { class: _, inset: _i, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <MenubarItem v-bind="forwardedProps" :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', inset && 'pl-8', props.class)">
+    <slot />
+  </MenubarItem>
+</template>

package/src/components/ui/menubar/MenubarTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <MenubarTrigger v-bind="forwardedProps" :class="cn('flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground', props.class)">
+    <slot />
+  </MenubarTrigger>
+</template>

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

@@ -0,0 +1,5 @@
+// Menubar — styled wrappers around radix-vue Menubar primitives
+export { MenubarRoot as Menubar, MenubarMenu, MenubarSeparator, MenubarPortal } from 'radix-vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'

package/src/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuContent, type NavigationMenuContentEmits, type NavigationMenuContentProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NavigationMenuContentEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+<template>
+  <NavigationMenuContent v-bind="forwarded" :class="cn('left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto', props.class)">
+    <slot />
+  </NavigationMenuContent>
+</template>

package/src/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { NavigationMenuTrigger, type NavigationMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <NavigationMenuTrigger v-bind="forwardedProps" :class="cn('group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50', props.class)">
+    <slot />
+    <ChevronDown class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180" aria-hidden="true" />
+  </NavigationMenuTrigger>
+</template>

package/src/components/ui/navigation-menu/index.ts

@@ -0,0 +1,4 @@
+// NavigationMenu — styled wrappers around radix-vue NavigationMenu primitives
+export { NavigationMenuRoot as NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuLink, NavigationMenuViewport, NavigationMenuIndicator } from 'radix-vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'

package/src/components/ui/pagination/PaginationContent.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationList, type PaginationListProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+const props = defineProps<PaginationListProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <PaginationList v-bind="forwardedProps" :class="cn('flex flex-row items-center gap-1', props.class)">
+    <slot />
+  </PaginationList>
+</template>

package/src/components/ui/pagination/PaginationEllipsis.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+</script>
+<template>
+  <PaginationEllipsis v-bind="props" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
+    <slot><MoreHorizontal class="h-4 w-4" /></slot>
+  </PaginationEllipsis>
+</template>

package/src/components/ui/pagination/PaginationNext.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationNext, type PaginationNextProps, useForwardProps } from 'radix-vue'
+import { ChevronRight } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+const props = defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <PaginationNext v-bind="forwardedProps" :class="cn('flex items-center gap-1 pr-2.5', props.class)">
+    <slot><span>Next</span><ChevronRight class="h-4 w-4" /></slot>
+  </PaginationNext>
+</template>

package/src/components/ui/pagination/PaginationPrev.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PaginationPrev, type PaginationPrevProps, useForwardProps } from 'radix-vue'
+import { ChevronLeft } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+const props = defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+<template>
+  <PaginationPrev v-bind="forwardedProps" :class="cn('flex items-center gap-1 pl-2.5', props.class)">
+    <slot><ChevronLeft class="h-4 w-4" /><span>Previous</span></slot>
+  </PaginationPrev>
+</template>

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

@@ -0,0 +1,6 @@
+// Pagination — styled wrappers  
+export { PaginationRoot as Pagination, PaginationFirst, PaginationLast, PaginationListItem } from 'radix-vue'
+export { default as PaginationContent } from './PaginationContent.vue'
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { PopoverRoot, type PopoverRootEmits, type PopoverRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { PopoverContent, type PopoverContentEmits, type PopoverContentProps, PopoverPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  { sideOffset: 4, align: 'center' },
+)
+const emits = defineEmits<PopoverContentEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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',
+        props.class,
+      )"
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

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

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

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

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.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,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ProgressIndicator, ProgressRoot, type ProgressRootProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="forwardedProps"
+    :class="cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', props.class)"
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="{ transform: `translateX(-${100 - (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/radio-group/RadioGroup.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot v-bind="forwarded" :class="cn('grid gap-2', props.class)">
+    <slot />
+  </RadioGroupRoot>
+</template>

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { RadioGroupIndicator, RadioGroupItem, type RadioGroupItemProps, useForwardProps } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Circle class="h-3.5 w-3.5 fill-primary" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/src/components/ui/radio-group/index.ts

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

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

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

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  { position: 'popper' },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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',
+        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,
+      )"
+    >
+      <SelectViewport
+        :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
+      >
+        <slot />
+      </SelectViewport>
+    </SelectContent>
+  </SelectPortal>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectGroup, type SelectGroupProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectGroup v-bind="forwardedProps" :class="cn('p-1 w-full', props.class)">
+    <slot />
+  </SelectGroup>
+</template>

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

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

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectLabel, type SelectLabelProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectLabel v-bind="forwardedProps" :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectSeparator v-bind="forwardedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+  </SelectTrigger>
+</template>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>

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

@@ -0,0 +1,8 @@
+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 SelectLabel } from './SelectLabel.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

package/src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>