1

frontendNew/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot data-slot="accordion" v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

frontendNew/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import { AccordionContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="props"
+    :class="cn('overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down', props.class)"
+  >
+    <div class="pb-3 pt-0">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

frontendNew/src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import { AccordionItem } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionItem data-slot="accordion-item" v-bind="props" :class="cn('border-b', props.class)">
+    <slot />
+  </AccordionItem>
+</template>

frontendNew/src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ChevronDown } from 'lucide-vue-next'
+import type { AccordionTriggerProps } from 'reka-ui'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: string }>()
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="props"
+      :class="cn('group/accordion-trigger flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', props.class)"
+    >
+      <slot />
+      <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

frontendNew/src/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
+export { default as AccordionContent } from './AccordionContent.vue'

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import { ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ScrollAreaRootProps & { class?: string }>()
+</script>
+
+<template>
+  <ScrollAreaRoot data-slot="scroll-area" :class="cn('relative overflow-hidden', props.class)" v-bind="props">
+    <ScrollAreaViewport class="size-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <slot name="scrollbar" />
+  </ScrollAreaRoot>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'reka-ui'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: string }>(), {
+  orientation: 'vertical',
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="props"
+    :class="cn(
+      'flex touch-none select-none p-px transition-colors',
+      props.orientation === 'vertical' ? 'h-full w-2.5 border-l border-l-transparent' : 'h-2.5 w-full border-t border-t-transparent',
+      props.class,
+    )"
+  >
+    <ScrollAreaThumb data-slot="scroll-area-thumb" class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

frontendNew/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'