@slexn/codecenter-ui 1.0.0

package/src/components/docs/MarkdownContent.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { MarkdownBlock } from "@/docs/markdown"
+
+const props = defineProps<{
+  blocks: MarkdownBlock[]
+}>()
+</script>
+
+<template>
+  <article class="flex min-w-0 flex-col gap-5">
+    <template
+      v-for="block in props.blocks"
+      :key="block.id"
+    >
+      <h1
+        v-if="block.type === 'heading' && block.level === 1"
+        class="text-3xl font-semibold tracking-normal text-foreground"
+        v-html="block.html"
+      />
+
+      <h2
+        v-else-if="block.type === 'heading' && block.level === 2"
+        class="mt-5 scroll-mt-24 border-t pt-8 text-xl font-semibold tracking-normal text-foreground first:mt-0 first:border-t-0 first:pt-0"
+        v-html="block.html"
+      />
+
+      <h3
+        v-else-if="block.type === 'heading'"
+        class="mt-3 scroll-mt-24 text-base font-semibold tracking-normal text-foreground"
+        v-html="block.html"
+      />
+
+      <p
+        v-else-if="block.type === 'paragraph'"
+        class="max-w-3xl text-sm leading-7 text-muted-foreground [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_code]:rounded [&_code]:border [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs [&_code]:text-foreground [&_strong]:font-semibold [&_strong]:text-foreground"
+        v-html="block.html"
+      />
+
+      <ol
+        v-else-if="block.type === 'list' && block.ordered"
+        class="grid max-w-3xl list-decimal gap-2 pl-5 text-sm leading-7 text-muted-foreground [&_code]:rounded [&_code]:border [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs [&_code]:text-foreground"
+      >
+        <li
+          v-for="(item, index) in block.items"
+          :key="index"
+          v-html="item"
+        />
+      </ol>
+
+      <ul
+        v-else-if="block.type === 'list'"
+        class="grid max-w-3xl list-disc gap-2 pl-5 text-sm leading-7 text-muted-foreground [&_code]:rounded [&_code]:border [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs [&_code]:text-foreground"
+      >
+        <li
+          v-for="(item, index) in block.items"
+          :key="index"
+          v-html="item"
+        />
+      </ul>
+
+      <div
+        v-else-if="block.type === 'table'"
+        class="min-w-0 overflow-x-auto rounded-lg border"
+      >
+        <table class="w-full min-w-[520px] border-collapse text-sm">
+          <thead class="bg-muted/70 text-foreground">
+            <tr>
+              <th
+                v-for="(header, index) in block.headers"
+                :key="index"
+                class="border-b px-3 py-2 text-left font-medium"
+                v-html="header"
+              />
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, rowIndex) in block.rows"
+              :key="rowIndex"
+              class="border-b last:border-b-0"
+            >
+              <td
+                v-for="(cell, cellIndex) in row"
+                :key="cellIndex"
+                class="px-3 py-2 text-muted-foreground [&_code]:rounded [&_code]:border [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs [&_code]:text-foreground"
+                v-html="cell"
+              />
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        v-else-if="block.type === 'code'"
+        class="min-w-0 overflow-hidden rounded-lg border bg-muted/40"
+      >
+        <div class="flex h-9 items-center justify-between border-b bg-muted/70 px-3">
+          <span class="font-mono text-xs text-muted-foreground">
+            {{ block.language || "text" }}
+          </span>
+        </div>
+        <pre class="max-h-[520px] overflow-auto p-4 text-sm leading-6"><code class="font-mono text-foreground">{{ block.code }}</code></pre>
+      </div>
+    </template>
+  </article>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionRoot as AccordionPrimitiveRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionRootProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AccordionPrimitiveRoot
+    v-slot="slotProps"
+    data-slot="accordion"
+    v-bind="forwarded"
+    :class="cn('w-full', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionPrimitiveRoot>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AccordionContentProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionContent as AccordionPrimitiveContent, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionPrimitiveContent
+    data-slot="accordion-content"
+    v-bind="forwardedProps"
+    class="overflow-hidden text-sm"
+  >
+    <div
+      data-slot="accordion-content-inner"
+      :class="cn('pt-0 pb-4', props.class)"
+    >
+      <slot />
+    </div>
+  </AccordionPrimitiveContent>
+</template>
+
+<style scoped>
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+[data-slot="accordion-content"][data-state="open"] {
+  animation: accordion-down 200ms ease-out;
+}
+
+[data-slot="accordion-content"][data-state="closed"] {
+  animation: accordion-up 200ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="accordion-content"][data-state="open"],
+  [data-slot="accordion-content"][data-state="closed"] {
+    animation: none;
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AccordionItemProps } from "reka-ui"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionItem as AccordionPrimitiveItem, 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>
+  <AccordionPrimitiveItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionPrimitiveItem>
+</template>

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AccordionTriggerProps } from "reka-ui"
+import { ChevronDown } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AccordionHeader,
+  AccordionTrigger as AccordionPrimitiveTrigger,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionPrimitiveTrigger
+      data-slot="accordion-trigger"
+      v-bind="forwardedProps"
+      :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 />
+      <ChevronDown
+        aria-hidden="true"
+        class="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform duration-200"
+      />
+    </AccordionPrimitiveTrigger>
+  </AccordionHeader>
+</template>

package/src/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/src/components/ui/alert/Alert.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Component, HTMLAttributes } from "vue"
+import { Primitive, type PrimitiveProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { alertVariants, type AlertVariants } from "./variants"
+
+interface AlertProps extends PrimitiveProps {
+  class?: HTMLAttributes["class"]
+  decorativeIcon?: boolean
+  icon?: Component
+  iconClass?: HTMLAttributes["class"]
+  role?: string
+  variant?: AlertVariants["variant"]
+}
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  as: "div",
+  decorativeIcon: true,
+  role: "alert",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="alert"
+    :as="props.as"
+    :as-child="props.asChild"
+    :role="props.role"
+    :class="cn(alertVariants({ variant: props.variant }), props.class)"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.icon"
+      data-slot="alert-icon"
+      :aria-hidden="props.decorativeIcon ? 'true' : undefined"
+      :class="props.iconClass"
+    />
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Primitive, type PrimitiveProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+interface AlertDescriptionProps extends PrimitiveProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<AlertDescriptionProps>(), {
+  as: "div",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="alert-description"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="cn('col-start-2 text-sm leading-relaxed text-muted-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { Primitive, type PrimitiveProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+interface AlertTitleProps extends PrimitiveProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<AlertTitleProps>(), {
+  as: "h5",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="alert-title"
+    :as="props.as"
+    :as-child="props.asChild"
+    :class="cn('col-start-2 font-medium leading-none tracking-normal', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+export { alertVariants, type AlertVariants } from "./variants"

package/src/components/ui/alert/variants.ts

@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-md border px-4 py-3 text-sm shadow-xs has-[>svg]:grid-cols-[1rem_1fr] has-[>svg]:gap-x-3 [&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background text-foreground",
+        destructive:
+          "border-destructive/50 bg-destructive/5 text-destructive [&_[data-slot=alert-description]]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

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

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

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

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button.vue"
+export { buttonVariants, type ButtonVariants } from "./variants"

package/src/components/ui/button/variants.ts

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/30",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs 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",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-6",
+        icon: "size-9",
+        "icon-sm": "size-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/components/ui/button-group/ButtonGroup.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type ButtonGroupSize = "default" | "sm"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  size?: ButtonGroupSize
+}>(), {
+  size: "default",
+})
+</script>
+
+<template>
+  <div
+    data-slot="button-group"
+    :data-size="props.size"
+    role="group"
+    :class="
+      cn(
+        'inline-flex w-fit items-center rounded-md [&>[data-slot=button]]:relative [&>[data-slot=button]]:rounded-none [&>[data-slot=button]]:shadow-none [&>[data-slot=button]:first-child]:rounded-l-md [&>[data-slot=button]:last-child]:rounded-r-md [&>[data-slot=button]:not(:first-child)]:-ml-px [&>[data-slot=button]:focus-visible]:z-10 [&>button]:relative [&>button]:rounded-none [&>button]:shadow-none [&>button:first-child]:rounded-l-md [&>button:last-child]:rounded-r-md [&>button:not(:first-child)]:-ml-px [&>button:focus-visible]:z-10',
+        props.size === 'sm' &&
+          '[&>[data-slot=button]]:text-xs [&>button]:text-xs',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,2 @@
+export { default as ButtonGroup } from "./ButtonGroup.vue"
+export type { ButtonGroupSize } from "./ButtonGroup.vue"

package/src/components/ui/card/Card.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="card"
+    :class="cn('flex flex-col gap-6 rounded-lg border bg-card py-6 text-card-foreground', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<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="card-content" :class="cn('px-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<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="card-description" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<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="card-footer" :class="cn('flex items-center gap-2 px-6', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardHeader.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="card-header"
+    :class="cn('grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/card/CardTitle.vue

@@ -0,0 +1,14 @@
+<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="card-title" :class="cn('text-base font-semibold leading-none', props.class)">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"