Rebuild website!

src/components/ui/button/Button.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
+
+const props = defineProps({
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: 'button' },
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

src/components/ui/button/index.js

@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)

src/components/ui/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = defineProps({
+  modelValue: { type: String, required: false },
+  defaultValue: { type: String, required: false },
+  dir: { type: String, required: false },
+  orientation: { type: String, required: false },
+  delayDuration: { type: Number, required: false },
+  skipDelayDuration: { type: Number, required: false },
+  disableClickTrigger: { type: Boolean, required: false },
+  disableHoverTrigger: { type: Boolean, required: false },
+  disablePointerLeaveClose: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup>
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  disableOutsidePointerEvents: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+})
+
+const emits = defineEmits([
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+])
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+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>

src/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuIndicator, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+        props.class
+      )
+    "
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>

src/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { NavigationMenuItem } from 'reka-ui'
+
+const props = defineProps({
+  value: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+})
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>

src/components/ui/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps({
+  active: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+})
+const emits = defineEmits(['select'])
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>

src/components/ui/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuList, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="cn('group flex flex-1 list-none items-center justify-center gap-x-1', props.class)"
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup>
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import { NavigationMenuTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { navigationMenuTriggerStyle } from '.'
+
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', 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>

src/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { reactiveOmit } from '@vueuse/core'
+import { NavigationMenuViewport, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  forceMount: { type: Boolean, required: false },
+  align: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width] left-[var(--reka-navigation-menu-viewport-left)]',
+          props.class
+        )
+      "
+    />
+  </div>
+</template>

src/components/ui/navigation-menu/index.js

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority'
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue'
+
+export const navigationMenuTriggerStyle = cva(
+  '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'
+)