@baybreezy/docd 0.0.1

package/app/components/content/prose/ProseComponentExposed.global.vue

@@ -0,0 +1,27 @@
+<template>
+  <ComponentApiSection kind="exposed" :items="resolvedItems" :layout="layout" />
+</template>
+
+<script lang="ts">
+  import type {
+    ProseComponentApiLayout,
+    ProseComponentMetaEntry,
+    ProseComponentMetaExposed,
+  } from "../../../../utils/generate-prose-component-meta";
+
+  export type ProseComponentExposedProps = {
+    path?: string;
+    meta?: ProseComponentMetaEntry | null;
+    items?: ProseComponentMetaExposed[];
+    layout?: ProseComponentApiLayout;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ProseComponentExposedProps>(), {
+    layout: "field",
+  });
+
+  const resolvedMeta = computed(() => props.meta ?? resolveProseComponentMeta(props.path));
+  const resolvedItems = computed(() => props.items ?? resolvedMeta.value?.exposed ?? []);
+</script>

package/app/components/content/prose/ProseComponentProps.global.vue

@@ -0,0 +1,27 @@
+<template>
+  <ComponentApiSection kind="props" :items="resolvedItems" :layout="layout" />
+</template>
+
+<script lang="ts">
+  import type {
+    ProseComponentApiLayout,
+    ProseComponentMetaEntry,
+    ProseComponentMetaProp,
+  } from "../../../../utils/generate-prose-component-meta";
+
+  export type ProseComponentPropsProps = {
+    path?: string;
+    meta?: ProseComponentMetaEntry | null;
+    items?: ProseComponentMetaProp[];
+    layout?: ProseComponentApiLayout;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ProseComponentPropsProps>(), {
+    layout: "field",
+  });
+
+  const resolvedMeta = computed(() => props.meta ?? resolveProseComponentMeta(props.path));
+  const resolvedItems = computed(() => props.items ?? resolvedMeta.value?.props ?? []);
+</script>

package/app/components/content/prose/ProseComponentSlots.global.vue

@@ -0,0 +1,27 @@
+<template>
+  <ComponentApiSection kind="slots" :items="resolvedItems" :layout="layout" />
+</template>
+
+<script lang="ts">
+  import type {
+    ProseComponentApiLayout,
+    ProseComponentMetaEntry,
+    ProseComponentMetaSlot,
+  } from "../../../../utils/generate-prose-component-meta";
+
+  export type ProseComponentSlotsProps = {
+    path?: string;
+    meta?: ProseComponentMetaEntry | null;
+    items?: ProseComponentMetaSlot[];
+    layout?: ProseComponentApiLayout;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ProseComponentSlotsProps>(), {
+    layout: "field",
+  });
+
+  const resolvedMeta = computed(() => props.meta ?? resolveProseComponentMeta(props.path));
+  const resolvedItems = computed(() => props.items ?? resolvedMeta.value?.slots ?? []);
+</script>

package/app/components/content/prose/ProseEm.global.vue

@@ -0,0 +1,5 @@
+<template>
+  <em data-slot="prose-em">
+    <slot />
+  </em>
+</template>

package/app/components/content/prose/ProseField.global.vue

@@ -0,0 +1,118 @@
+<template>
+  <div :class="styles.base()">
+    <!-- Name Section -->
+    <div v-if="$slots.name || name" :class="styles.name()">
+      <slot mdc-unwrap="p" name="name">
+        <span v-if="name" :class="styles.nameText()">{{ name }}</span>
+      </slot>
+      <!-- Tooltip Section -->
+      <slot mdc-unwrap="p" name="tip">
+        <UiTooltip v-if="tip">
+          <UiTooltipTrigger>
+            <prose-smart-icon v-if="tipIcon" class="text-muted-foreground" :name="tipIcon" />
+          </UiTooltipTrigger>
+          <UiTooltipContent>
+            <span>{{ tip }}</span>
+            <UiTooltipArrow />
+          </UiTooltipContent>
+        </UiTooltip>
+      </slot>
+      <code v-if="type" :class="styles.typeBadge()">{{ type }}</code>
+      <code v-if="required" :class="styles.requiredBadge()">required</code>
+    </div>
+
+    <!-- Default Value Section -->
+    <div v-if="$slots['default-value'] || defaultValue" :class="styles.defaultValue()">
+      <span :class="styles.defaultLabel()">Default</span>
+      <slot mdc-unwrap="p" name="default-value">
+        <code :class="styles.defaultCode()">{{ defaultValue }}</code>
+      </slot>
+    </div>
+    <!-- Description Section -->
+    <div v-if="$slots.default || description" :class="styles.description()">
+      <slot mdc-unwrap="p">
+        {{ description }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { tv } from "tailwind-variants";
+
+  /**
+   * Field styles configuration using tailwind-variants
+   */
+  export const fieldStyles = tv({
+    slots: {
+      base: "flex flex-col gap-2 py-4",
+      name: "flex flex-wrap items-center gap-2",
+      nameText: "font-semibold text-foreground",
+      typeBadge: "rounded-md px-1.5 py-0.5 text-[11px]",
+      requiredBadge:
+        "rounded-md border-red-500/50 bg-red-500/10! px-1.5 py-0.5 text-[11px] text-red-500",
+      description: "max-w-none text-[15px] text-muted-foreground",
+      defaultValue: "flex items-center gap-2 text-sm",
+      defaultLabel: "font-medium text-muted-foreground",
+      defaultCode:
+        "rounded-md bg-muted px-1.5 py-0.5 font-mono text-xs text-[11px] text-foreground",
+    },
+  });
+
+  /**
+   * Field component props type
+   */
+  export type ProseFieldProps = {
+    /**
+     * The name/title of the field
+     * @example "variant"
+     */
+    name?: string;
+
+    /**
+     * Description of what this field does
+     * @example "The variant style of the button"
+     */
+    description?: string;
+
+    /**
+     * The default value for this field
+     * @example "default"
+     */
+    defaultValue?: string | number | boolean | Record<string, any>;
+
+    /**
+     * The type of value this field accepts
+     * @example "string | number"
+     */
+    type?: string;
+
+    /**
+     * A brief tip or note about this field
+     *
+     * Will be displayed in a tooltip
+     */
+    tip?: string;
+
+    /**
+     * Icon that will be displayed in the tip tooltip
+     * @default 'lucide:circle-question-mark'
+     */
+    tipIcon?: string;
+
+    /**
+     * Whether this field is required
+     * @default false
+     */
+    required?: boolean;
+  };
+</script>
+
+<script lang="ts" setup>
+  withDefaults(defineProps<ProseFieldProps>(), {
+    required: false,
+    tipIcon: "lucide:circle-question-mark",
+  });
+
+  const styles = fieldStyles();
+</script>

package/app/components/content/prose/ProseFieldGroup.global.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="styles.base({ variant })">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+  import { tv } from "tailwind-variants";
+
+  /**
+   * Field group styles configuration using tailwind-variants
+   */
+  export const fieldGroupStyles = tv({
+    slots: {
+      base: "flex flex-col",
+    },
+    variants: {
+      variant: {
+        /**
+         * Add dividers between fields
+         */
+        divided: "[&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border",
+        /**
+         * Add striped background to alternate fields
+         */
+        striped: "*:pl-4 [&>*:nth-child(even)]:bg-muted dark:[&>*:nth-child(even)]:bg-muted/50",
+        /**
+         * Add border around the group
+         */
+        bordered:
+          "overflow-hidden rounded-lg border border-border *:pl-4 [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border",
+        /**
+         * A combination of all variants
+         */
+        all: "overflow-hidden rounded-lg border border-border *:pl-4 [&>*:not(:last-child)]:border-b [&>*:not(:last-child)]:border-border [&>*:nth-child(even)]:bg-muted dark:[&>*:nth-child(even)]:bg-muted/50",
+      },
+    },
+    defaultVariants: {
+      variant: "divided",
+    },
+  });
+
+  /**
+   * Field group component props type
+   */
+  export type ProseFieldGroupProps = {
+    /**
+     * The variant style of the field group
+     *
+     * @default "divided"
+     */
+    variant?: "divided" | "striped" | "bordered" | "all";
+  };
+</script>
+
+<script lang="ts" setup>
+  withDefaults(defineProps<ProseFieldGroupProps>(), {
+    variant: "divided",
+  });
+
+  const styles = fieldGroupStyles();
+</script>

package/app/components/content/prose/ProseH1.global.vue

@@ -0,0 +1,58 @@
+<template>
+  <h1 :id="id" :class="proseH1Styles({ class: normalizeClass(_class) || undefined })">
+    <NuxtLink
+      v-if="generate"
+      data-slot="h1-link"
+      v-bind="linkProps"
+      class="relative inline-block"
+      :to="`#${id}`"
+    >
+      <Icon
+        name="lucide:link"
+        aria-hidden="true"
+        class="absolute top-2 -left-6 h-4 w-4 text-muted-foreground opacity-0 transition-opacity duration-150 group-focus-within:opacity-100 group-hover:opacity-100"
+      />
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h1>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseH1Props = {
+    /**
+     * Optional ID for anchor links
+     */
+    id?: string;
+    /**
+     * Props to pass to NuxtLink when anchor links are enabled
+     */
+    linkProps?: NuxtLinkProps;
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseH1Styles = tv({
+    base: "group scroll-m-20 text-4xl font-extrabold tracking-tight text-balance",
+  });
+</script>
+
+<script setup lang="ts">
+  const { id, linkProps, class: _class } = defineProps<ProseH1Props>();
+
+  // Determine if we should generate anchor links
+  const { headings } = useRuntimeConfig().public.mdc;
+  const generate = computed(
+    () =>
+      id &&
+      ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) ||
+        (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h1))
+  );
+</script>

package/app/components/content/prose/ProseH2.global.vue

@@ -0,0 +1,58 @@
+<template>
+  <h2 :id="id" :class="proseH2Styles({ class: normalizeClass(_class) || undefined })">
+    <NuxtLink
+      v-if="generate"
+      data-slot="h2-link"
+      v-bind="linkProps"
+      class="group relative inline-block"
+      :to="`#${id}`"
+    >
+      <Icon
+        name="lucide:link"
+        aria-hidden="true"
+        class="absolute top-2 -left-8 hidden size-5 text-primary opacity-0 transition-opacity duration-150 group-focus-within:opacity-70 group-hover:opacity-70 lg:block"
+      />
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h2>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseH2Props = {
+    /**
+     * Optional ID for anchor links
+     */
+    id?: string;
+    /**
+     * Props to pass to NuxtLink when anchor links are enabled
+     */
+    linkProps?: NuxtLinkProps;
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseH2Styles = tv({
+    base: "mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight text-balance transition-colors first:mt-0",
+  });
+</script>
+
+<script setup lang="ts">
+  const { id, linkProps, class: _class } = defineProps<ProseH2Props>();
+
+  // Determine if we should generate anchor links
+  const { headings } = useRuntimeConfig().public.mdc;
+  const generate = computed(
+    () =>
+      id &&
+      ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) ||
+        (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h2))
+  );
+</script>

package/app/components/content/prose/ProseH3.global.vue

@@ -0,0 +1,58 @@
+<template>
+  <h3 :id="id" :class="proseH3Styles({ class: normalizeClass(_class) || undefined })">
+    <NuxtLink
+      v-if="generate"
+      data-slot="h3-link"
+      v-bind="linkProps"
+      class="group relative inline-block"
+      :to="`#${id}`"
+    >
+      <Icon
+        name="lucide:link"
+        aria-hidden="true"
+        class="absolute top-1.5 -left-8 hidden size-5 text-primary opacity-0 transition-opacity duration-150 group-focus-within:opacity-70 group-hover:opacity-70 lg:block"
+      />
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h3>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseH3Props = {
+    /**
+     * Optional ID for anchor links
+     */
+    id?: string;
+    /**
+     * Props to pass to NuxtLink when anchor links are enabled
+     */
+    linkProps?: NuxtLinkProps;
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseH3Styles = tv({
+    base: "mt-8 scroll-m-20 text-2xl font-semibold tracking-tight text-balance not-first:mt-8",
+  });
+</script>
+
+<script setup lang="ts">
+  const { id, linkProps, class: _class } = defineProps<ProseH3Props>();
+
+  // Determine if we should generate anchor links
+  const { headings } = useRuntimeConfig().public.mdc;
+  const generate = computed(
+    () =>
+      id &&
+      ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) ||
+        (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h3))
+  );
+</script>

package/app/components/content/prose/ProseH4.global.vue

@@ -0,0 +1,58 @@
+<template>
+  <h4 :id="id" :class="proseH4Styles({ class: normalizeClass(_class) || undefined })">
+    <NuxtLink
+      v-if="generate"
+      data-slot="h4-link"
+      v-bind="linkProps"
+      class="group relative inline-block"
+      :to="`#${id}`"
+    >
+      <Icon
+        name="lucide:link"
+        aria-hidden="true"
+        class="absolute top-1.5 -left-6 hidden size-3.5 text-primary opacity-0 transition-opacity duration-150 group-focus-within:opacity-70 group-hover:opacity-70 lg:block"
+      />
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h4>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseH4Props = {
+    /**
+     * Optional ID for anchor links
+     */
+    id?: string;
+    /**
+     * Props to pass to NuxtLink when anchor links are enabled
+     */
+    linkProps?: NuxtLinkProps;
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseH4Styles = tv({
+    base: "scroll-m-20 text-xl font-semibold tracking-tight text-balance not-first:mt-6",
+  });
+</script>
+
+<script setup lang="ts">
+  const { id, linkProps, class: _class } = defineProps<ProseH4Props>();
+
+  // Determine if we should generate anchor links
+  const { headings } = useRuntimeConfig().public.mdc;
+  const generate = computed(
+    () =>
+      id &&
+      ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) ||
+        (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h4))
+  );
+</script>

package/app/components/content/prose/ProseH5.global.vue

@@ -0,0 +1,47 @@
+<template>
+  <h5 :id="id" :class="proseH5Styles({ class: normalizeClass(_class) || undefined })">
+    <NuxtLink v-if="generate" data-slot="h5-link" v-bind="linkProps" :to="`#${id}`">
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h5>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseH5Props = {
+    /**
+     * Optional ID for anchor links
+     */
+    id?: string;
+    /**
+     * Props to pass to NuxtLink when anchor links are enabled
+     */
+    linkProps?: NuxtLinkProps;
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseH5Styles = tv({
+    base: "scroll-m-20 text-lg font-semibold tracking-tight text-balance not-first:mt-6",
+  });
+</script>
+
+<script setup lang="ts">
+  const { id, linkProps, class: _class } = defineProps<ProseH5Props>();
+
+  // Determine if we should generate anchor links
+  const { headings } = useRuntimeConfig().public.mdc;
+  const generate = computed(
+    () =>
+      id &&
+      ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) ||
+        (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h5))
+  );
+</script>

package/app/components/content/prose/ProseH6.global.vue

@@ -0,0 +1,47 @@
+<template>
+  <h6 :id="id" :class="proseH6Styles({ class: normalizeClass(_class) || undefined })">
+    <NuxtLink v-if="generate" data-slot="h6-link" v-bind="linkProps" :to="`#${id}`">
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h6>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseH6Props = {
+    /**
+     * Optional ID for anchor links
+     */
+    id?: string;
+    /**
+     * Props to pass to NuxtLink when anchor links are enabled
+     */
+    linkProps?: NuxtLinkProps;
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseH6Styles = tv({
+    base: "scroll-m-20 text-lg font-semibold tracking-tight text-balance not-first:mt-6",
+  });
+</script>
+
+<script setup lang="ts">
+  const { id, linkProps, class: _class } = defineProps<ProseH6Props>();
+
+  // Determine if we should generate anchor links
+  const { headings } = useRuntimeConfig().public.mdc;
+  const generate = computed(
+    () =>
+      id &&
+      ((typeof headings?.anchorLinks === "boolean" && headings?.anchorLinks === true) ||
+        (typeof headings?.anchorLinks === "object" && headings?.anchorLinks?.h6))
+  );
+</script>

package/app/components/content/prose/ProseHr.global.vue

@@ -0,0 +1,33 @@
+<template>
+  <hr
+    data-slot="prose-hr"
+    :class="proseHrStyles({ class: normalizeClass(_class) || undefined, isDashed })"
+  />
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseHrProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseHrStyles = tv({
+    base: "mb-6 not-first:mt-6",
+    variants: {
+      isDashed: {
+        true: "border-dashed",
+        false: "border-solid",
+      },
+    },
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseHrProps>();
+  const { isDashed } = useDocd();
+</script>