docs-please 0.2.0-beta.0

package/app/components/content/UPageHero.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  title?: string
+  description?: string
+  headline?: string
+  orientation?: 'vertical' | 'horizontal'
+  reverse?: boolean
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <section
+    :class="[
+      'py-16 md:py-24',
+      props.class,
+    ]"
+  >
+    <div class="container">
+      <div
+        :class="[
+          'flex gap-8 lg:gap-12',
+          props.orientation === 'horizontal'
+            ? props.reverse
+              ? 'flex-col lg:flex-row-reverse items-center'
+              : 'flex-col lg:flex-row items-center'
+            : 'flex-col items-center text-center',
+        ]"
+      >
+        <!-- Header -->
+        <div
+          :class="[
+            'flex flex-col gap-4',
+            props.orientation === 'horizontal' ? 'lg:flex-1' : 'max-w-3xl',
+          ]"
+        >
+          <!-- Headline slot -->
+          <div v-if="$slots.headline || props.headline">
+            <slot name="headline">
+              <span class="text-sm font-medium text-primary">
+                {{ props.headline }}
+              </span>
+            </slot>
+          </div>
+
+          <!-- Title -->
+          <h1
+            v-if="$slots.title || props.title"
+            class="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
+          >
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </h1>
+
+          <!-- Description -->
+          <p
+            v-if="$slots.description || props.description"
+            class="text-lg text-muted-foreground sm:text-xl"
+          >
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </p>
+
+          <!-- Links slot -->
+          <div
+            v-if="$slots.links"
+            :class="[
+              'flex flex-wrap gap-3 mt-4',
+              props.orientation !== 'horizontal' && 'justify-center',
+            ]"
+          >
+            <slot name="links" />
+          </div>
+        </div>
+
+        <!-- Default slot (illustration) -->
+        <div
+          v-if="$slots.default"
+          :class="[
+            props.orientation === 'horizontal' ? 'lg:flex-1' : 'w-full max-w-2xl',
+          ]"
+        >
+          <slot />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/app/components/content/UPageSection.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  title?: string
+  description?: string
+  headline?: string
+  orientation?: 'vertical' | 'horizontal'
+  reverse?: boolean
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <section
+    :class="[
+      'py-12 md:py-16',
+      props.class,
+    ]"
+  >
+    <div class="container">
+      <div
+        :class="[
+          'flex gap-8 lg:gap-12',
+          props.orientation === 'horizontal'
+            ? props.reverse
+              ? 'flex-col lg:flex-row-reverse items-center'
+              : 'flex-col lg:flex-row items-center'
+            : 'flex-col',
+        ]"
+      >
+        <!-- Header -->
+        <div
+          v-if="$slots.title || $slots.description || $slots.headline || props.title || props.description || props.headline"
+          :class="[
+            'flex flex-col gap-3',
+            props.orientation === 'horizontal' ? 'lg:flex-1' : 'max-w-2xl',
+          ]"
+        >
+          <!-- Headline -->
+          <div v-if="$slots.headline || props.headline">
+            <slot name="headline">
+              <span class="text-sm font-medium text-primary uppercase tracking-wide">
+                {{ props.headline }}
+              </span>
+            </slot>
+          </div>
+
+          <!-- Title -->
+          <h2
+            v-if="$slots.title || props.title"
+            class="text-3xl font-bold tracking-tight sm:text-4xl"
+          >
+            <slot name="title">
+              {{ props.title }}
+            </slot>
+          </h2>
+
+          <!-- Description -->
+          <p
+            v-if="$slots.description || props.description"
+            class="text-lg text-muted-foreground"
+          >
+            <slot name="description">
+              {{ props.description }}
+            </slot>
+          </p>
+
+          <!-- Links slot -->
+          <div
+            v-if="$slots.links"
+            class="flex flex-wrap gap-3 mt-2"
+          >
+            <slot name="links" />
+          </div>
+        </div>
+
+        <!-- Default slot (content/illustration) -->
+        <div
+          v-if="$slots.default"
+          :class="[
+            props.orientation === 'horizontal' ? 'lg:flex-1' : 'w-full',
+          ]"
+        >
+          <slot />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/app/components/content/Warning.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Callout from './Callout.vue'
+
+defineProps<{
+  title?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Callout
+    type="warning"
+    :title
+    :class
+  >
+    <template
+      v-if="$slots.title"
+      #title
+    >
+      <slot name="title" />
+    </template>
+    <slot />
+  </Callout>
+</template>

package/app/components/docs/DocsPageHeader.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="space-y-2">
+    <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
+      {{ title }}
+    </h1>
+    <p
+      v-if="description"
+      class="text-lg text-muted-foreground"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>

package/app/components/docs/DocsPageNav.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+
+defineProps<{
+  prev?: { path: string, title: string } | null
+  next?: { path: string, title: string } | null
+}>()
+</script>
+
+<template>
+  <div class="flex flex-row items-center justify-between pt-8">
+    <NuxtLink
+      v-if="prev"
+      :to="prev.path"
+      class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
+    >
+      <ChevronLeft class="size-4" />
+      {{ prev.title }}
+    </NuxtLink>
+    <div v-else />
+
+    <NuxtLink
+      v-if="next"
+      :to="next.path"
+      class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground"
+    >
+      {{ next.title }}
+      <ChevronRight class="size-4" />
+    </NuxtLink>
+  </div>
+</template>

package/app/components/docs/DocsSidebar.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next'
+
+const { data: navigation } = await useNavigation()
+const route = useRoute()
+
+function isActive(path: string) {
+  return route.path === path || route.path.startsWith(`${path}/`)
+}
+</script>
+
+<template>
+  <nav class="sticky top-20 -ml-2 h-[calc(100vh-5rem)] overflow-y-auto pb-10 pr-4">
+    <div class="space-y-4">
+      <template
+        v-for="section in navigation"
+        :key="section.path"
+      >
+        <!-- Section with children (group) -->
+        <div
+          v-if="section.children?.length"
+          class="space-y-2"
+        >
+          <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
+            {{ section.title }}
+          </h4>
+          <div class="space-y-1">
+            <template
+              v-for="item in section.children"
+              :key="item.path"
+            >
+              <!-- Nested group -->
+              <div
+                v-if="item.children?.length"
+                class="space-y-1"
+              >
+                <NuxtLink
+                  :to="item.path"
+                  class="flex w-full items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+                  :class="[
+                    isActive(item.path)
+                      ? 'bg-accent font-medium text-accent-foreground'
+                      : 'text-muted-foreground',
+                  ]"
+                >
+                  {{ item.title }}
+                  <ChevronRight class="ml-auto size-4" />
+                </NuxtLink>
+                <div class="ml-4 space-y-1 border-l pl-2">
+                  <NuxtLink
+                    v-for="child in item.children"
+                    :key="child.path"
+                    :to="child.path"
+                    class="block rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+                    :class="[
+                      route.path === child.path
+                        ? 'bg-accent font-medium text-accent-foreground'
+                        : 'text-muted-foreground',
+                    ]"
+                  >
+                    {{ child.title }}
+                  </NuxtLink>
+                </div>
+              </div>
+              <!-- Single item -->
+              <NuxtLink
+                v-else
+                :to="item.path"
+                class="block rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+                :class="[
+                  route.path === item.path
+                    ? 'bg-accent font-medium text-accent-foreground'
+                    : 'text-muted-foreground',
+                ]"
+              >
+                {{ item.title }}
+              </NuxtLink>
+            </template>
+          </div>
+        </div>
+        <!-- Single item without children -->
+        <NuxtLink
+          v-else
+          :to="section.path"
+          class="block rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
+          :class="[
+            route.path === section.path
+              ? 'bg-accent font-medium text-accent-foreground'
+              : 'text-muted-foreground',
+          ]"
+        >
+          {{ section.title }}
+        </NuxtLink>
+      </template>
+    </div>
+  </nav>
+</template>

package/app/components/docs/DocsTableOfContents.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface TocItem {
+  id: string
+  text: string
+  depth: number
+}
+
+const props = defineProps<{
+  toc?: TocItem[]
+}>()
+
+const activeId = ref('')
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          activeId.value = entry.target.id
+        }
+      })
+    },
+    {
+      rootMargin: '-80px 0px -80% 0px',
+    },
+  )
+
+  props.toc?.forEach((item) => {
+    const el = document.getElementById(item.id)
+    if (el)
+      observer.observe(el)
+  })
+
+  onUnmounted(() => observer.disconnect())
+})
+</script>
+
+<template>
+  <nav
+    v-if="toc?.length"
+    class="sticky top-20 -ml-2 h-[calc(100vh-5rem)] overflow-y-auto pb-10"
+  >
+    <p class="mb-4 text-sm font-semibold">
+      On this page
+    </p>
+    <ul class="space-y-2 text-sm">
+      <li
+        v-for="item in toc"
+        :key="item.id"
+        :style="{ paddingLeft: `${(item.depth - 2) * 12}px` }"
+      >
+        <a
+          :href="`#${item.id}`"
+          class="block py-1 text-muted-foreground transition-colors hover:text-foreground"
+          :class="[
+            activeId === item.id && 'font-medium text-foreground',
+          ]"
+        >
+          {{ item.text }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>

package/app/components/ui/accordion/Accordion.vue

@@ -0,0 +1,22 @@
+<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
+    v-slot="slotProps"
+    data-slot="accordion"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

package/app/components/ui/accordion/AccordionContent.vue

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

package/app/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionItem, useForwardProps } from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>

package/app/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+} from 'reka-ui'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/app/components/ui/accordion/index.ts

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

package/app/components/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '~/lib/utils'
+import { alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/ui/alert/index.ts

@@ -0,0 +1,28 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+        info: 'border-blue-500/50 bg-blue-500/10 text-blue-700 dark:text-blue-300 [&>svg]:text-blue-500',
+        warning: 'border-amber-500/50 bg-amber-500/10 text-amber-700 dark:text-amber-300 [&>svg]:text-amber-500',
+        success: 'border-emerald-500/50 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300 [&>svg]:text-emerald-500',
+        error: 'border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-300 [&>svg]:text-red-500',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

package/app/components/ui/button/Button.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '~/lib/utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>