@baybreezy/docd 0.0.1

package/app/components/Ui/Sonner.vue

@@ -0,0 +1,25 @@
+<template>
+  <Toaster
+    class="toaster group"
+    :visible-toasts="5"
+    close-button
+    :duration="7000"
+    :theme="$colorMode.value == 'dark' ? 'dark' : 'light'"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+    }"
+    :toast-options="{
+      class: 'items-start!',
+      classes: {
+        icon: 'mt-0.5',
+        toast:
+          'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>

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

@@ -0,0 +1,27 @@
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </TabsContent>
+</template>
+
+<script lang="ts" setup>
+  import { TabsContent } from "reka-ui";
+  import type { TabsContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    TabsContentProps & {
+      /** Custom class(es) to add to parent element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "flex-1 outline-none",
+  });
+</script>

package/app/components/Ui/Tabs/Indicator.vue

@@ -0,0 +1,37 @@
+<template>
+  <ClientOnly>
+    <TabsIndicator
+      data-slot="tabs-indicator"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="styles({ class: normalizeClass(props.class) || undefined })"
+      :style="{
+        width: 'var(--reka-tabs-indicator-size)',
+        transform: 'translateX(var(--reka-tabs-indicator-position))',
+      }"
+    >
+      <slot>
+        <div class="h-full w-full rounded-md bg-primary" />
+      </slot>
+    </TabsIndicator>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+  import { TabsIndicator } from "reka-ui";
+  import type { TabsIndicatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<
+    TabsIndicatorProps & {
+      /** Custom class(es) to add to parent element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "absolute bottom-0 left-0 h-[3px] rounded-full px-2 transition-[width,transform] duration-300",
+  });
+</script>

package/app/components/Ui/Tabs/List.vue

@@ -0,0 +1,37 @@
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    :class="styles({ pill, class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<script lang="ts" setup>
+  import { TabsList } from "reka-ui";
+  import type { TabsListProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      TabsListProps & {
+        /** Custom class(es) to add to parent element */
+        class?: HTMLAttributes["class"];
+        pill?: boolean;
+      }
+    >(),
+    { pill: true }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "inline-flex w-fit items-center justify-center rounded-md p-0.5 text-muted-foreground/70",
+    variants: {
+      pill: {
+        true: "bg-muted",
+        false: "",
+      },
+    },
+  });
+</script>

package/app/components/Ui/Tabs/Tabs.vue

@@ -0,0 +1,25 @@
+<template>
+  <TabsRoot
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </TabsRoot>
+</template>
+
+<script lang="ts" setup>
+  import { TabsRoot, useForwardPropsEmits } from "reka-ui";
+  import type { TabsRootEmits, TabsRootProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>(), {
+    orientation: "horizontal",
+    activationMode: "automatic",
+  });
+  const emits = defineEmits<TabsRootEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class"), emits);
+
+  const styles = tv({ base: "flex flex-col gap-2" });
+</script>

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

@@ -0,0 +1,41 @@
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    v-bind="forwarded"
+    :class="styles({ pill, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { TabsTrigger } from "reka-ui";
+  import type { TabsTriggerProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      TabsTriggerProps & {
+        /** Custom class(es) to add to parent element */
+        class?: HTMLAttributes["class"];
+        /** Whether the trigger should be pill-shaped */
+        pill?: boolean;
+      }
+    >(),
+    {
+      pill: true,
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all outline-none hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs [&_svg]:shrink-0",
+    variants: {
+      pill: {
+        true: "",
+        false:
+          "hover:text-foreground focus-visible:border-none focus-visible:ring-1 data-[state=active]:shadow-none",
+      },
+    },
+  });
+</script>

package/app/components/Ui/Textarea.vue

@@ -0,0 +1,81 @@
+<template>
+  <textarea
+    v-bind="props"
+    ref="textarea"
+    data-slot="textarea"
+    :value="modelValue"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    @input="handleInput"
+  />
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes, TextareaHTMLAttributes } from "vue";
+
+  export type TextareaProps = {
+    /** Additional classes to add to the textarea */
+    class?: HTMLAttributes["class"];
+    /** The name of the textarea */
+    name?: TextareaHTMLAttributes["name"];
+    /** The id of the textarea */
+    id?: TextareaHTMLAttributes["id"];
+    /** The placeholder of the textarea */
+    placeholder?: TextareaHTMLAttributes["placeholder"];
+    /** Whether the textarea is required */
+    required?: boolean;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** The number of rows to display */
+    rows?: number;
+    /** The value of the textarea */
+    modelValue?: string;
+    /** The maximum number of characters allowed */
+    maxlength?: number;
+    /** The `RegExp` pattern of the textarea */
+    pattern?: string;
+    /** Whether the textarea should be focused when mounted. */
+    autofocus?: boolean;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<TextareaProps>(), {
+    modelValue: "",
+  });
+
+  const emit = defineEmits<{
+    "update:modelValue": [value: string];
+  }>();
+
+  const textarea = useTemplateRef("textarea");
+
+  const handleInput = (event: Event) => {
+    const target = event.target as HTMLTextAreaElement;
+    let value = target.value;
+
+    /* Validate input with pattern */
+    if (props.pattern) {
+      const regex = new RegExp(props.pattern);
+      value = Array.from(value)
+        .filter((char) => regex.test(char))
+        .join("");
+    }
+
+    /* Handle maxlength */
+    if (props.maxlength) {
+      value = value.slice(0, props.maxlength);
+    }
+
+    target.value = value;
+    emit("update:modelValue", value);
+  };
+
+  const styles = tv({
+    base: "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] 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 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+  });
+
+  onMounted(() => {
+    if (props.autofocus) textarea.value?.focus();
+  });
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <TooltipArrow
+    data-slot="tooltip-arrow"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { TooltipArrow, useForwardProps } from "reka-ui";
+  import type { TooltipArrowProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      TooltipArrowProps & {
+        /** Additional classes for the tooltip arrow */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      width: 12,
+      height: 6,
+    }
+  );
+
+  const styles = tv({ base: "fill-popover stroke-border" });
+  const forwarded = useForwardProps(reactiveOmit(props, "class"));
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <UiTooltipPortal :to="to">
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="styles({ class: normalizeClass(props.class) || undefined })"
+    >
+      <slot />
+      <slot name="arrow">
+        <UiTooltipArrow v-if="showArrow" />
+      </slot>
+    </TooltipContent>
+  </UiTooltipPortal>
+</template>
+
+<script lang="ts" setup>
+  import { TooltipContent, useForwardPropsEmits } from "reka-ui";
+  import type { TooltipContentEmits, TooltipContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      TooltipContentProps & {
+        to?: string | HTMLElement;
+        class?: HTMLAttributes["class"];
+        showArrow?: boolean;
+      }
+    >(),
+    {
+      side: "top",
+      sideOffset: 4,
+      align: "center",
+      alignOffset: -4,
+      avoidCollisions: true,
+      collisionBoundary: () => [],
+      collisionPadding: 0,
+      sticky: "partial",
+    }
+  );
+
+  const emits = defineEmits<TooltipContentEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to"), emits);
+
+  const styles = tv({
+    base: "relative z-50 max-w-70 animate-in rounded-md border bg-popover px-3 py-1.5 text-xs text-popover-foreground fade-in-0 zoom-in-95 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",
+  });
+</script>

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

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

package/app/components/Ui/Tooltip/Provider.vue

@@ -0,0 +1,14 @@
+<template>
+  <TooltipProvider data-slot="tooltip-provider" v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
+
+<script lang="ts" setup>
+  import { TooltipProvider } from "reka-ui";
+  import type { TooltipProviderProps } from "reka-ui";
+
+  const props = withDefaults(defineProps<TooltipProviderProps>(), {
+    delayDuration: 0,
+  });
+</script>

package/app/components/Ui/Tooltip/Tooltip.vue

@@ -0,0 +1,25 @@
+<template>
+  <UiTooltipProvider v-bind="props">
+    <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="{ ...forwarded, ...$attrs }">
+      <slot v-bind="slotProps">
+        <slot v-bind="slotProps" name="trigger" />
+        <slot v-bind="slotProps" name="content" />
+      </slot>
+    </TooltipRoot>
+  </UiTooltipProvider>
+</template>
+
+<script lang="ts" setup>
+  import { TooltipRoot, useForwardPropsEmits } from "reka-ui";
+  import type { TooltipProviderProps, TooltipRootEmits, TooltipRootProps } from "reka-ui";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(defineProps<TooltipRootProps & TooltipProviderProps>(), {
+    delayDuration: 0,
+  });
+
+  const emits = defineEmits<TooltipRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

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

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

package/app/components/Ui/Tree/Item.vue

@@ -0,0 +1,15 @@
+<template>
+  <TreeItem v-slot="slotProps" data-slot="tree-item" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TreeItem>
+</template>
+
+<script lang="ts" setup generic="T extends Record<string, any>">
+  import { TreeItem, useForwardPropsEmits } from "reka-ui";
+  import type { TreeItemEmits, TreeItemProps } from "reka-ui";
+
+  const props = defineProps<TreeItemProps<T>>();
+  const emit = defineEmits<TreeItemEmits<T>>();
+
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>

package/app/components/Ui/Tree/Tree.vue

@@ -0,0 +1,15 @@
+<template>
+  <TreeRoot v-slot="slotProps" data-slot="tree" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TreeRoot>
+</template>
+
+<script lang="ts" setup>
+  import { TreeRoot, useForwardPropsEmits } from "reka-ui";
+  import type { TreeRootEmits, TreeRootProps } from "reka-ui";
+
+  const props = defineProps<TreeRootProps>();
+  const emit = defineEmits<TreeRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>

package/app/components/Ui/Tree/Virtualizer.vue

@@ -0,0 +1,13 @@
+<template>
+  <TreeVirtualizer v-slot="slotProps" data-slot="tree-virtualizer" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </TreeVirtualizer>
+</template>
+
+<script lang="ts" setup>
+  import { TreeVirtualizer, useForwardPropsEmits } from "reka-ui";
+  import type { TreeVirtualizerProps } from "reka-ui";
+
+  const props = defineProps<TreeVirtualizerProps>();
+  const forwarded = useForwardPropsEmits(props);
+</script>

package/app/components/component-api/ComponentApiSection.vue

@@ -0,0 +1,135 @@
+<template>
+  <div v-if="items.length" class="not-prose">
+    <ProseFieldGroup v-if="layout === 'field'" variant="all">
+      <ProseField
+        v-for="item in items"
+        :key="item.name"
+        :name="item.name"
+        :type="itemType(item)"
+        :default-value="itemDefault(item)"
+        :required="itemRequired(item)"
+      >
+        <template #default>
+          <p v-if="item.description">{{ item.description }}</p>
+          <p v-else class="text-muted-foreground">No description provided.</p>
+
+          <div v-if="itemSignature(item)" class="mt-2 flex flex-wrap items-center gap-2 text-xs">
+            <span class="font-medium text-foreground">Signature</span>
+            <code class="rounded-md bg-muted px-1.5 py-0.5 font-mono text-[11px]">
+              {{ itemSignature(item) }}
+            </code>
+          </div>
+        </template>
+      </ProseField>
+    </ProseFieldGroup>
+
+    <ProseTable v-else>
+      <thead>
+        <tr class="border-b border-border text-left">
+          <th class="px-4 py-3 text-sm font-semibold text-foreground">Name</th>
+          <th class="px-4 py-3 text-sm font-semibold text-foreground">
+            {{ kind === "events" ? "Signature" : "Type" }}
+          </th>
+          <th v-if="kind === 'props'" class="px-4 py-3 text-sm font-semibold text-foreground">
+            Default
+          </th>
+          <th v-if="kind === 'props'" class="px-4 py-3 text-sm font-semibold text-foreground">
+            Required
+          </th>
+          <th class="px-4 py-3 text-sm font-semibold text-foreground">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in items" :key="item.name" class="border-b border-border last:border-b-0">
+          <td class="px-4 py-3 align-top">
+            <code class="font-mono text-xs text-foreground">{{ item.name }}</code>
+          </td>
+          <td class="px-4 py-3 align-top">
+            <code class="font-mono text-xs text-foreground">
+              {{ kind === "events" ? itemSignature(item) : itemType(item) }}
+            </code>
+          </td>
+          <td v-if="kind === 'props'" class="px-4 py-3 align-top text-sm text-muted-foreground">
+            <code v-if="itemDefault(item)" class="font-mono text-xs text-foreground">
+              {{ itemDefault(item) }}
+            </code>
+            <span v-else>&mdash;</span>
+          </td>
+          <td v-if="kind === 'props'" class="px-4 py-3 align-top text-sm text-muted-foreground">
+            {{ itemRequired(item) ? "Yes" : "No" }}
+          </td>
+          <td class="px-4 py-3 align-top text-sm text-muted-foreground">
+            {{ item.description || "No description provided." }}
+          </td>
+        </tr>
+      </tbody>
+    </ProseTable>
+  </div>
+
+  <p v-else class="not-prose text-sm text-muted-foreground">No {{ emptyLabel }} documented.</p>
+</template>
+
+<script lang="ts">
+  import type { ComponentApiSectionKind } from "../../../utils/component-api";
+  import type {
+    ProseComponentApiLayout,
+    ProseComponentMetaEvent,
+    ProseComponentMetaExposed,
+    ProseComponentMetaProp,
+    ProseComponentMetaSlot,
+  } from "../../../utils/generate-prose-component-meta";
+  export type ComponentApiSectionItem =
+    | ProseComponentMetaProp
+    | ProseComponentMetaSlot
+    | ProseComponentMetaEvent
+    | ProseComponentMetaExposed;
+
+  export type ComponentApiSectionProps = {
+    kind: ComponentApiSectionKind;
+    items: ComponentApiSectionItem[];
+    layout?: ProseComponentApiLayout;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ComponentApiSectionProps>(), {
+    layout: "field",
+  });
+
+  function isPropItem(item: ComponentApiSectionItem): item is ProseComponentMetaProp {
+    return "required" in item;
+  }
+
+  function isEventItem(item: ComponentApiSectionItem): item is ProseComponentMetaEvent {
+    return "signature" in item;
+  }
+
+  function itemType(item: ComponentApiSectionItem) {
+    return item.type || "unknown";
+  }
+
+  function itemDefault(item: ComponentApiSectionItem) {
+    return isPropItem(item) ? item.default : undefined;
+  }
+
+  function itemRequired(item: ComponentApiSectionItem) {
+    return isPropItem(item) ? item.required : false;
+  }
+
+  function itemSignature(item: ComponentApiSectionItem) {
+    return isEventItem(item) ? item.signature : "";
+  }
+
+  const emptyLabel = computed(() => {
+    switch (props.kind) {
+      case "props":
+        return "props";
+      case "slots":
+        return "slots";
+      case "events":
+        return "events";
+      case "exposed":
+        return "exposed members";
+    }
+  });
+</script>