@reinvented/design 0.2.0 → 0.3.0

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>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { X } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+type SheetVariants = VariantProps<typeof sheetVariants>
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
+}
+
+const props = withDefaults(defineProps<SheetContentProps>(), { side: 'right' })
+const emits = defineEmits<DialogContentEmits>()
+const delegatedProps = computed(() => { const { class: _, side: _s, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="cn(sheetVariants({ side }), props.class)"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

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

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

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

@@ -0,0 +1,12 @@
+<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('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+<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('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

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

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

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

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

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

@@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'

package/src/components/ui/slider/Slider.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SliderRange, SliderRoot, type SliderRootEmits, type SliderRootProps, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SliderRootEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="forwarded"
+    :class="cn('relative flex w-full touch-none select-none items-center', props.class)"
+  >
+    <SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderRange class="absolute h-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, i) in (modelValue || [0])"
+      :key="i"
+      class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>

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

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

package/src/components/ui/switch/Switch.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SwitchRoot, type SwitchRootEmits, type SwitchRootProps, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SwitchRootEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+    />
+  </SwitchRoot>
+</template>

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

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

package/src/components/ui/table/Table.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

package/src/components/ui/table/TableBody.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><tbody :class="cn('[&_tr:last-child]:border-0', props.class)"><slot /></tbody></template>

package/src/components/ui/table/TableCaption.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><caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)"><slot /></caption></template>

package/src/components/ui/table/TableCell.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><td :class="cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"><slot /></td></template>

package/src/components/ui/table/TableFooter.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><tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)"><slot /></tfoot></template>

package/src/components/ui/table/TableHead.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><th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"><slot /></th></template>

package/src/components/ui/table/TableHeader.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><thead :class="cn('[&_tr]:border-b', props.class)"><slot /></thead></template>

package/src/components/ui/table/TableRow.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><tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)"><slot /></tr></template>

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

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'

package/src/components/ui/tabs/Tabs.vue

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

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsContent, type TabsContentProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsContent
+    v-bind="forwardedProps"
+    :class="cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsList, type TabsListProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsList
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>