@lupinum/ginko-docs 0.2.2

package/app/components/ui/dialog/DialogPortal.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogPortalProps } from "reka-ui";
+import { DialogPortal } from "reka-ui";
+
+const props = defineProps<DialogPortalProps>();
+</script>
+
+<template>
+  <DialogPortal data-slot="dialog-portal" v-bind="props">
+    <slot />
+  </DialogPortal>
+</template>

package/app/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DialogTitle } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    :class="cn('text-lg leading-none font-semibold tracking-tight', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/app/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui";
+import { DialogTrigger } from "reka-ui";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

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

@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogOverlay } from "./DialogOverlay.vue";
+export { default as DialogPortal } from "./DialogPortal.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";

package/app/components/ui/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui";
+import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-slot="slotProps" data-slot="dropdown-menu" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuRoot>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Icon name="lucide:check" class="size-4" aria-hidden="true" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from "reka-ui";
+import { DropdownMenuGroup } from "reka-ui";
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItem, useForwardProps } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      variant?: "default" | "destructive";
+    }
+  >(),
+  {
+    variant: "default",
+  },
+);
+
+const delegatedProps = reactiveOmit(props, "inset", "variant", "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuLabel, useForwardProps } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
+
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui";
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Icon name="lucide:circle" class="size-2 fill-current" aria-hidden="true" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSeparator } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
+  />
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui";
+import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DropdownMenuSub>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<
+  DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
+
+const delegatedProps = reactiveOmit(props, "class", "inset");
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :data-inset="inset ? '' : undefined"
+    :class="
+      cn(
+        'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive',
+        props.class,
+      )
+    "
+  >
+    <slot />
+    <Icon name="lucide:chevron-right" class="ml-auto size-4" aria-hidden="true" />
+  </DropdownMenuSubTrigger>
+</template>

package/app/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui";
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui";
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/app/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { DropdownMenuPortal } from "reka-ui";

package/app/components/ui/input/Input.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const model = defineModel<string | number>();
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <input
+    v-model="model"
+    data-slot="input"
+    :class="
+      cn(
+        'min-h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground shadow-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+        props.class,
+      )
+    "
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";

package/app/components/ui/kbd/Kbd.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <kbd
+    :class="
+      cn(
+        'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none',
+        '[&_svg:not([class*=\'size-\'])]:size-3',
+        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </kbd>
+</template>

package/app/components/ui/kbd/KbdGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <kbd data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
+    <slot />
+  </kbd>
+</template>

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

@@ -0,0 +1,22 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export { default as Kbd } from "./Kbd.vue";
+export { default as KbdGroup } from "./KbdGroup.vue";
+
+export const kbdVariants = cva(
+  "bg-muted text-muted-foreground ring-1 ring-border pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm font-sans font-medium select-none [&_svg:not([class*='size-'])]:size-3 [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 px-1 text-xs",
+        md: "h-7 min-w-7 px-1.5 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  },
+);
+
+export type KbdVariants = VariantProps<typeof kbdVariants>;

package/app/components/ui/label/Label.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "#ginko-docs/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <label data-slot="label" :class="cn('text-sm font-medium text-foreground', props.class)">
+    <slot />
+  </label>
+</template>

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

@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue";

package/app/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "#ginko-docs/lib/utils";
+import ScrollBar from "./ScrollBar.vue";
+
+const props = defineProps<
+  ScrollAreaRootProps & {
+    class?: HTMLAttributes["class"];
+    viewportClass?: HTMLAttributes["class"];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, "class", "viewportClass");
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative', props.class)"
+  >
+    <ScrollAreaViewport
+      data-slot="scroll-area-viewport"
+      :class="
+        cn(
+          'size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1',
+          props.viewportClass,
+        )
+      "
+    >
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/app/components/ui/scroll-area/ScrollBar.vue

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

package/app/components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";