@baybreezy/docd 0.0.1

package/app/components/Ui/InputGroup/Textarea.vue

@@ -0,0 +1,25 @@
+<template>
+  <UiTextarea
+    v-bind="forwarded"
+    data-slot="input-group-textarea"
+    :class="inputGroupTextareaStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </UiTextarea>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+
+  import type { TextareaProps } from "@/components/Ui/Textarea.vue";
+
+  const inputGroupTextareaStyles = tv({
+    base: "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+  });
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<TextareaProps>();
+
+  const forwarded = reactiveOmit(props, ["class"]);
+</script>

package/app/components/Ui/Kbd/Group.vue

@@ -0,0 +1,32 @@
+<template>
+  <Primitive
+    data-slot="kbd-group"
+    v-bind="forwarded"
+    :class="kbdGroupStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const kbdGroupStyles = tv({
+    base: "inline-flex items-center gap-1",
+  });
+
+  export type KbdGroupProps = PrimitiveProps & {
+    /**
+     * Additional classes to apply to the parent element.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<KbdGroupProps>(), {});
+  const forwarded = reactiveOmit(props, "class");
+</script>

package/app/components/Ui/Kbd/Kbd.vue

@@ -0,0 +1,62 @@
+<template>
+  <Primitive
+    data-slot="kbd"
+    :class="styles({ size, variant, class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+<script setup lang="ts">
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        /**
+         * The size of the component
+         * @default "sm"
+         * */
+        size?: VariantProps<typeof styles>["size"];
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+        /**
+         * The variant of the component
+         * @default "solid"
+         * */
+        variant?: VariantProps<typeof styles>["variant"];
+      }
+    >(),
+    {
+      as: "kbd",
+      size: "sm",
+    }
+  );
+
+  const forwarded = reactiveOmit(props, "class", "size");
+
+  const styles = tv({
+    base: [
+      "pointer-events-none inline-flex w-fit min-w-5 items-center justify-center gap-1 rounded-sm font-sans font-medium select-none",
+      "[&_svg:not([class*='size-'])]:size-3",
+    ],
+    variants: {
+      size: {
+        xs: "h-4 px-1 text-[11px]",
+        sm: "h-5 px-1 text-xs",
+        md: "h-[22px] px-1 text-sm",
+      },
+      variant: {
+        solid: "bg-muted text-foreground/80",
+        outline: "border bg-transparent",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      variant: "solid",
+    },
+  });
+</script>

package/app/components/Ui/Label.vue

@@ -0,0 +1,40 @@
+<template>
+  <Label
+    data-slot="label"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+    <slot name="hint">
+      <span v-if="hint" data-slot="label-hint" class="text-xs font-normal text-muted-foreground">
+        {{ hint }}
+      </span>
+    </slot>
+  </Label>
+</template>
+
+<script lang="ts">
+  import { Label } from "reka-ui";
+  import type { LabelProps as LP } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type LabelProps = LP & {
+    /** Custom class(es) to add to the label */
+    class?: HTMLAttributes["class"];
+    /**
+     * Optional hint text to display alongside the label.
+     */
+    hint?: string;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<LabelProps>();
+
+  const forwarded = reactiveOmit(props, "class", "hint");
+
+  const styles = tv({
+    base: "flex items-center justify-between gap-2 text-sm leading-none font-medium select-none not-peer-disabled:cursor-pointer group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  });
+</script>

package/app/components/Ui/Popover/Anchor.vue

@@ -0,0 +1,13 @@
+<template>
+  <PopoverAnchor data-slot="popover-anchor" v-bind="forwarded">
+    <slot />
+  </PopoverAnchor>
+</template>
+
+<script lang="ts" setup>
+  import { PopoverAnchor, useForwardProps } from "reka-ui";
+  import type { PopoverAnchorProps } from "reka-ui";
+
+  const props = defineProps<PopoverAnchorProps>();
+  const forwarded = useForwardProps(props);
+</script>

package/app/components/Ui/Popover/Arrow.vue

@@ -0,0 +1,42 @@
+<template>
+  <PopoverArrow
+    data-slot="popover-arrow"
+    v-bind="forwarded"
+    :class="
+      styles({
+        translucent: props.translucent,
+        class: normalizeClass(props.class) || undefined,
+      })
+    "
+  />
+</template>
+
+<script lang="ts" setup>
+  import { PopoverArrow, useForwardProps } from "reka-ui";
+  import type { PopoverArrowProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PopoverArrowProps & {
+        class?: HTMLAttributes["class"];
+        translucent?: boolean;
+      }
+    >(),
+    {
+      width: 12,
+      height: 6,
+    }
+  );
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class", "translucent"));
+  const styles = tv({
+    base: "fill-popover stroke-border",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingArrowClasses("popover"),
+      },
+    },
+  });
+</script>

package/app/components/Ui/Popover/Close.vue

@@ -0,0 +1,13 @@
+<template>
+  <PopoverClose data-slot="popover-close" v-bind="forwarded">
+    <slot />
+  </PopoverClose>
+</template>
+
+<script lang="ts" setup>
+  import { PopoverClose, useForwardProps } from "reka-ui";
+  import type { PopoverCloseProps } from "reka-ui";
+
+  const props = defineProps<PopoverCloseProps>();
+  const forwarded = useForwardProps(props);
+</script>

package/app/components/Ui/Popover/Content.vue

@@ -0,0 +1,55 @@
+<template>
+  <UiPopoverPortal :to="to">
+    <PopoverContent
+      data-slot="popover-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        styles({
+          translucent: props.translucent,
+          class: normalizeClass(props.class) || undefined,
+        })
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </UiPopoverPortal>
+</template>
+
+<script lang="ts" setup>
+  import { PopoverContent, useForwardPropsEmits } from "reka-ui";
+  import type { PopoverContentEmits, PopoverContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      PopoverContentProps & {
+        to?: string | HTMLElement;
+        class?: HTMLAttributes["class"];
+        translucent?: boolean;
+      }
+    >(),
+    {
+      side: "bottom",
+      sideOffset: 4,
+      align: "center",
+      avoidCollisions: true,
+      collisionPadding: 0,
+      sticky: "partial",
+    }
+  );
+
+  const emits = defineEmits<PopoverContentEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "to", "class", "translucent"), emits);
+
+  const styles = tv({
+    base: "z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("popover"),
+      },
+    },
+  });
+</script>

package/app/components/Ui/Popover/Popover.vue

@@ -0,0 +1,15 @@
+<template>
+  <PopoverRoot data-slot="popover" v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
+
+<script lang="ts" setup>
+  import { PopoverRoot, useForwardPropsEmits } from "reka-ui";
+  import type { PopoverRootEmits, PopoverRootProps } from "reka-ui";
+
+  const props = defineProps<PopoverRootProps>();
+  const emits = defineEmits<PopoverRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

package/app/components/Ui/Popover/Portal.vue

@@ -0,0 +1,13 @@
+<template>
+  <PopoverPortal data-slot="popover-portal" v-bind="forwarded">
+    <slot />
+  </PopoverPortal>
+</template>
+
+<script lang="ts" setup>
+  import { PopoverPortal, useForwardProps } from "reka-ui";
+  import type { PopoverPortalProps } from "reka-ui";
+
+  const props = defineProps<PopoverPortalProps>();
+  const forwarded = useForwardProps(props);
+</script>

package/app/components/Ui/Popover/Trigger.vue

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

package/app/components/Ui/Popover/X.vue

@@ -0,0 +1,38 @@
+<template>
+  <PopoverClose
+    data-slot="popover-x"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <Icon :name="icon" class="size-4" />
+      <span class="sr-only">{{ srText }}</span>
+    </slot>
+  </PopoverClose>
+</template>
+
+<script lang="ts" setup>
+  import { PopoverClose, useForwardProps } from "reka-ui";
+  import type { PopoverCloseProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PopoverCloseProps & {
+        class?: HTMLAttributes["class"];
+        icon?: string;
+        srText?: string;
+      }
+    >(),
+    {
+      icon: "heroicons:x-mark",
+      srText: "Close",
+    }
+  );
+  const forwarded = useForwardProps(reactiveOmit(props, "icon", "srText", "class"));
+
+  const styles = tv({
+    base: "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+  });
+</script>

package/app/components/Ui/ScrollArea/Corner.vue

@@ -0,0 +1,12 @@
+<template>
+  <ScrollAreaCorner data-slot="scroll-area-corner" v-bind="props">
+    <slot />
+  </ScrollAreaCorner>
+</template>
+
+<script lang="ts" setup>
+  import { ScrollAreaCorner } from "reka-ui";
+  import type { ScrollAreaCornerProps } from "reka-ui";
+
+  const props = defineProps<ScrollAreaCornerProps>();
+</script>

package/app/components/Ui/ScrollArea/ScrollArea.vue

@@ -0,0 +1,38 @@
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <UiScrollAreaViewport>
+      <slot />
+    </UiScrollAreaViewport>
+    <UiScrollAreaScrollbar :orientation="orientation" />
+    <UiScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
+
+<script lang="ts" setup>
+  import { ScrollAreaRoot } from "reka-ui";
+  import type { ScrollAreaRootProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      ScrollAreaRootProps & {
+        /** Orientation for scrolling */
+        orientation?: "vertical" | "horizontal";
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      orientation: "vertical",
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "relative",
+  });
+</script>

package/app/components/Ui/ScrollArea/Scrollbar.vue

@@ -0,0 +1,39 @@
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="forwarded"
+    :class="styles({ orientation, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+    <UiScrollAreaThumb />
+  </ScrollAreaScrollbar>
+</template>
+
+<script lang="ts" setup>
+  import { ScrollAreaScrollbar } from "reka-ui";
+  import type { ScrollAreaScrollbarProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      ScrollAreaScrollbarProps & {
+        /** Class to apply to the scrollbar */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      orientation: "vertical",
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "flex touch-none transition-colors select-none",
+    variants: {
+      orientation: {
+        vertical: "h-full w-2.5 border-l border-l-transparent px-px",
+        horizontal: "h-2.5 flex-col border-t border-t-transparent px-px",
+      },
+    },
+  });
+</script>

package/app/components/Ui/ScrollArea/Thumb.vue

@@ -0,0 +1,39 @@
+<template>
+  <ScrollAreaThumb
+    data-slot="scroll-area-thumb"
+    v-bind="forwarded"
+    :class="styles({ orientation, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </ScrollAreaThumb>
+</template>
+
+<script lang="ts" setup>
+  import { ScrollAreaThumb } from "reka-ui";
+  import type { ScrollAreaThumbProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      ScrollAreaThumbProps & {
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+        orientation?: "vertical" | "horizontal";
+      }
+    >(),
+    {
+      orientation: "vertical",
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "relative flex-1 rounded-full bg-border",
+    variants: {
+      orientation: {
+        vertical: "flex-1",
+        horizontal: "",
+      },
+    },
+  });
+</script>

package/app/components/Ui/ScrollArea/Viewport.vue

@@ -0,0 +1,27 @@
+<template>
+  <ScrollAreaViewport
+    data-slot="scroll-area-viewport"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </ScrollAreaViewport>
+</template>
+
+<script lang="ts" setup>
+  import { ScrollAreaViewport } from "reka-ui";
+  import type { ScrollAreaViewportProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    ScrollAreaViewportProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+  });
+</script>

package/app/components/Ui/Scrollspy.vue

@@ -0,0 +1,61 @@
+<template>
+  <!-- Wrap only the ANCHORS (links/buttons) inside this component -->
+  <div ref="root" data-slot="scrollspy" v-bind="$attrs" :class="props.class">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  type TargetLike = HTMLElement | Window | Document | null | undefined;
+
+  const props = withDefaults(
+    defineProps<{
+      /** Optional scroll container (pass a ref to a scrollable element). Defaults to window. */
+      target?: MaybeRefOrGetter<TargetLike>;
+      /** Default offset in px from the top when computing active section / scrolling. */
+      offset?: number;
+      /** Smooth scrolling on anchor click. */
+      smooth?: boolean;
+      /** Base data-* attribute, e.g. data-scrollspy-anchor. */
+      dataAttribute?: string;
+      /** Reflect active id in URL hash. */
+      history?: boolean;
+      /** Throttle time (ms) for scroll handler. */
+      throttleTime?: number;
+      /** Whether to mark only the current section or every visible section as active. */
+      mode?: "single" | "multiple";
+      /** Optional callback on change (also emits 'change'). */
+      onUpdate?: (id: string) => void;
+      /**
+       * Additional classes to apply to the wrapper element.
+       */
+      class?: HTMLAttributes["class"];
+    }>(),
+    {
+      offset: 0,
+      smooth: true,
+      dataAttribute: "scrollspy",
+      history: true,
+      throttleTime: 50,
+      mode: "single",
+    }
+  );
+
+  const emit = defineEmits<{ (e: "change", id: string): void }>();
+
+  const { root } = useScrollspy({
+    target: props.target,
+    offset: props.offset,
+    smooth: props.smooth,
+    dataAttribute: props.dataAttribute,
+    history: props.history,
+    throttleTime: props.throttleTime,
+    mode: props.mode,
+    onChange: (id) => {
+      props.onUpdate?.(id);
+      emit("change", id);
+    },
+  });
+</script>

package/app/components/Ui/Separator.vue

@@ -0,0 +1,40 @@
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="forwarded"
+    :class="styles({ orientation, class: normalizeClass(props.class) || undefined })"
+  />
+</template>
+
+<script lang="ts">
+  import { Separator, useForwardProps } from "reka-ui";
+  import type { SeparatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type UiSeparatorProps = SeparatorProps & {
+    /**
+     * Custom class(es) to add to the separator
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<UiSeparatorProps>(), {
+    orientation: "horizontal",
+    decorative: true,
+  });
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+
+  const styles = tv({
+    base: "shrink-0 bg-border",
+    variants: {
+      orientation: {
+        horizontal: "h-px w-full",
+        vertical: "h-full w-px",
+      },
+    },
+  });
+</script>

package/app/components/Ui/Skeleton.vue

@@ -0,0 +1,39 @@
+<template>
+  <Primitive
+    data-slot="skeleton"
+    :class="styles({ loading, class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const styles = tv({
+    base: "animate-pulse rounded-md bg-muted",
+    variants: {
+      loading: { true: "cursor-wait", false: "cursor-default" },
+    },
+  });
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        /** Custom class(es) to add to parent element */
+        class?: HTMLAttributes["class"];
+        /** Whether the skeleton is loading */
+        loading?: boolean;
+      }
+    >(),
+    {
+      as: "div",
+    }
+  );
+
+  const forwarded = reactiveOmit(props, "class", "loading");
+</script>