@baybreezy/docd 0.0.1

package/app/components/content/docs/Callout/DocsCallout.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <h3 class="mt-0">All Variants</h3>
+      <div class="space-y-4">
+        <ProseCallout variant="default" title="Default" description="This is a default callout." />
+        <ProseCallout variant="info" title="Info" description="This is an info callout." />
+        <ProseCallout variant="success" title="Success" description="This is a success callout." />
+        <ProseCallout variant="warning" title="Warning" description="This is a warning callout." />
+        <ProseCallout variant="error" title="Error" description="This is an error callout." />
+        <ProseCallout variant="tip" title="Tip" description="This is a tip callout." />
+        <ProseCallout variant="note" title="Note" description="This is a note callout." />
+        <ProseCallout variant="example" title="Example" description="This is an example callout." />
+      </div>
+    </div>
+
+    <div>
+      <h3>Filled Style</h3>
+      <div class="space-y-4">
+        <ProseCallout
+          variant="info"
+          title="Filled Info"
+          description="This uses the filled style."
+          filled
+        />
+        <ProseCallout
+          variant="success"
+          title="Filled Success"
+          description="This uses the filled style."
+          filled
+        />
+        <ProseCallout
+          variant="warning"
+          title="Filled Warning"
+          description="This uses the filled style."
+          filled
+        />
+        <ProseCallout
+          variant="error"
+          title="Filled Error"
+          description="This uses the filled style."
+          filled
+        />
+      </div>
+    </div>
+
+    <div>
+      <h3>With Slots</h3>
+      <ProseCallout variant="tip">
+        <template #icon>
+          <Icon name="lucide:sparkles" />
+        </template>
+        <template #title> Custom Slotted Title </template>
+        <template #default>
+          <p>This callout uses slots for maximum flexibility.</p>
+          <ul class="mt-2 list-inside list-disc space-y-1">
+            <li>Custom icon slot</li>
+            <li>Custom title slot</li>
+            <li>Custom content slot</li>
+          </ul>
+        </template>
+      </ProseCallout>
+    </div>
+
+    <div>
+      <h3>Clickable Callout</h3>
+      <ProseCallout
+        variant="info"
+        title="Learn More"
+        description="Click this callout to navigate to the documentation."
+        url="/docs"
+      />
+    </div>
+
+    <div>
+      <h3>Custom Icons</h3>
+      <div class="space-y-4">
+        <ProseCallout
+          variant="success"
+          icon="lucide:trophy"
+          title="Achievement Unlocked"
+          description="You've earned a new badge!"
+        />
+        <ProseCallout
+          variant="info"
+          icon="lucide:rocket"
+          title="Launch Ready"
+          description="Your application is ready to deploy."
+        />
+        <ProseCallout
+          variant="tip"
+          icon="lucide:zap"
+          title="Performance Boost"
+          description="Enable caching for better performance."
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+<template>
+  <NuxtLink
+    data-slot="prose-a"
+    v-bind="rest"
+    :class="proseAStyles({ class: normalizeClass(_class) || undefined })"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export type ProseAProps = NuxtLinkProps & {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseAStyles = tv({
+    base: "font-semibold text-inherit underline underline-offset-4",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class, ...rest } = defineProps<ProseAProps>();
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <blockquote
+    data-slot="prose-blockquote"
+    :class="proseBlockquoteStyles({ class: normalizeClass(_class) || undefined })"
+  >
+    <slot />
+  </blockquote>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseBlockquoteProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseBlockquoteStyles = tv({
+    base: "border-l-2 pl-6 text-pretty italic not-first:mt-6",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseBlockquoteProps>();
+</script>

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

@@ -0,0 +1,306 @@
+<template>
+  <component
+    :is="componentType"
+    v-bind="linkProps"
+    data-slot="prose-callout"
+    :class="
+      calloutStyles().base({ variant, filled, class: normalizeClass(props.class) || undefined })
+    "
+  >
+    <div v-if="hasIcon" :class="calloutStyles().iconWrapper({ variant, filled })">
+      <slot name="icon">
+        <Icon
+          v-if="computedIcon"
+          :name="computedIcon"
+          :class="
+            calloutStyles().icon({
+              variant,
+              filled,
+              class: [normalizeClass(iconClass), !hasTitle && 'mt-0.75'],
+            })
+          "
+        />
+      </slot>
+    </div>
+
+    <div :class="calloutStyles().content()">
+      <div
+        v-if="hasTitle"
+        :class="
+          calloutStyles().title({ variant, filled, class: normalizeClass(titleClass) || undefined })
+        "
+      >
+        <slot name="title">{{ title }}</slot>
+      </div>
+
+      <div
+        v-if="hasDescription || $slots.default"
+        :class="
+          calloutStyles().description({
+            variant,
+            filled,
+            class: normalizeClass(descriptionClass) || undefined,
+          })
+        "
+      >
+        <slot mdc-unwrap="p">{{ description }}</slot>
+      </div>
+    </div>
+
+    <Icon
+      v-if="url"
+      :name="target === '_blank' ? 'lucide:external-link' : 'lucide:arrow-up-right'"
+      :class="calloutStyles().linkIcon({ variant, filled })"
+    />
+  </component>
+</template>
+
+<script lang="ts">
+  import type { VariantProps } from "tailwind-variants";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type CalloutProps = {
+    /**
+     * The title of the callout
+     */
+    title?: string;
+    /**
+     * The description/content of the callout
+     */
+    description?: string;
+    /**
+     * The icon to display
+     */
+    icon?: string;
+    /**
+     * The variant style of the callout
+     */
+    variant?: VariantProps<typeof calloutStyles>["variant"];
+    /**
+     * Whether to use filled style
+     */
+    filled?: boolean;
+    /**
+     * Optional URL to make the callout clickable
+     */
+    url?: string;
+    /**
+     * Link target (_blank for external links)
+     */
+    target?: "_blank" | "_self" | "_parent" | "_top";
+    /**
+     * Additional class for the wrapper
+     */
+    class?: HTMLAttributes["class"];
+    /**
+     * Additional class for the title
+     */
+    titleClass?: HTMLAttributes["class"];
+    /**
+     * Additional class for the description
+     */
+    descriptionClass?: HTMLAttributes["class"];
+    /**
+     * Additional class for the icon
+     */
+    iconClass?: HTMLAttributes["class"];
+  };
+
+  export const calloutStyles = tv({
+    slots: {
+      base: "group relative flex items-start gap-3 rounded-lg border p-4 no-underline transition-colors not-first:mt-6 not-last:mb-6 [&_code]:bg-inherit! [&_code]:text-inherit! [&_li]:marker:text-inherit! [&_ol]:my-2! [&_ul]:my-2!",
+      iconWrapper: "flex items-center justify-center",
+      icon: "size-4 shrink-0",
+      content: "flex flex-1 flex-col gap-1",
+      title: "text-sm leading-none font-semibold",
+      description: "text-sm leading-relaxed *:my-0",
+      linkIcon:
+        "size-4 shrink-0 opacity-50 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:text-inherit group-hover:opacity-100",
+    },
+    variants: {
+      variant: {
+        default: {
+          base: "border-border bg-muted/50 text-foreground dark:bg-transparent",
+          icon: "text-foreground",
+          title: "text-foreground",
+        },
+        info: {
+          base: "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100",
+          icon: "text-blue-600 dark:text-blue-400",
+          title: "text-blue-900 dark:text-blue-100",
+          description: "text-blue-800 dark:text-blue-200",
+          linkIcon: "text-blue-600 dark:text-blue-400",
+        },
+        success: {
+          base: "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100",
+          icon: "text-emerald-600 dark:text-emerald-400",
+          title: "text-emerald-900 dark:text-emerald-100",
+          description: "text-emerald-800 dark:text-emerald-200",
+          linkIcon: "text-emerald-600 dark:text-emerald-400",
+        },
+        warning: {
+          base: "border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100",
+          icon: "text-yellow-600 dark:text-yellow-400",
+          title: "text-yellow-900 dark:text-yellow-100",
+          description: "text-yellow-800 dark:text-yellow-200",
+          linkIcon: "text-yellow-600 dark:text-yellow-400",
+        },
+        error: {
+          base: "border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100",
+          icon: "text-red-600 dark:text-red-400",
+          title: "text-red-900 dark:text-red-100",
+          description: "text-red-800 dark:text-red-200",
+          linkIcon: "text-red-600 dark:text-red-400",
+        },
+        tip: {
+          base: "border-purple-200 bg-purple-50 text-purple-900 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-100",
+          icon: "text-purple-600 dark:text-purple-400",
+          title: "text-purple-900 dark:text-purple-100",
+          description: "text-purple-800 dark:text-purple-200",
+          linkIcon: "text-purple-600 dark:text-purple-400",
+        },
+        note: {
+          base: "border-gray-200 bg-gray-50 text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100",
+          icon: "text-gray-600 dark:text-gray-400",
+          title: "text-gray-900 dark:text-gray-100",
+          description: "text-gray-800 dark:text-gray-200",
+          linkIcon: "text-gray-600 dark:text-gray-400",
+        },
+        example: {
+          base: "border-teal-200 bg-teal-50 text-teal-900 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-100",
+          icon: "text-teal-600 dark:text-teal-400",
+          title: "text-teal-900 dark:text-teal-100",
+          description: "text-teal-800 dark:text-teal-200",
+          linkIcon: "text-teal-600 dark:text-teal-400",
+        },
+      },
+      filled: {
+        true: {},
+      },
+    },
+    compoundVariants: [
+      {
+        filled: true,
+        class: {
+          title: "text-white dark:text-white",
+          icon: "text-white dark:text-white",
+        },
+      },
+      {
+        variant: "info",
+        filled: true,
+        class: {
+          base: "border-blue-600 bg-blue-600 text-white dark:border-blue-500 dark:bg-blue-500",
+          description: "text-blue-50",
+        },
+      },
+      {
+        variant: "success",
+        filled: true,
+        class: {
+          base: "border-emerald-600 bg-emerald-600 text-white dark:border-emerald-500 dark:bg-emerald-500",
+          description: "text-emerald-50",
+        },
+      },
+      {
+        variant: "warning",
+        filled: true,
+        class: {
+          base: "border-yellow-600 bg-yellow-600 text-white dark:border-yellow-500 dark:bg-yellow-500",
+          description: "text-yellow-50",
+        },
+      },
+      {
+        variant: "error",
+        filled: true,
+        class: {
+          base: "border-red-600 bg-red-600 text-white dark:border-red-500 dark:bg-red-500",
+          description: "text-red-50",
+        },
+      },
+      {
+        variant: "tip",
+        filled: true,
+        class: {
+          base: "border-purple-600 bg-purple-600 text-white dark:border-purple-500 dark:bg-purple-500",
+
+          description: "text-purple-50",
+        },
+      },
+      {
+        variant: "note",
+        filled: true,
+        class: {
+          base: "border-gray-600 bg-gray-600 text-white dark:border-gray-500 dark:bg-gray-500",
+
+          description: "text-gray-50",
+        },
+      },
+      {
+        variant: "example",
+        filled: true,
+        class: {
+          base: "border-teal-600 bg-teal-600 text-white dark:border-teal-500 dark:bg-teal-500",
+          description: "text-teal-50",
+        },
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      filled: false,
+    },
+  });
+
+  const VARIANT_ICONS: Record<string, string> = {
+    info: "lucide:info",
+    success: "lucide:circle-check",
+    warning: "lucide:triangle-alert",
+    error: "lucide:circle-x",
+    tip: "lucide:lightbulb",
+    note: "lucide:sticky-note",
+    example: "lucide:code-2",
+    default: "lucide:info",
+  };
+</script>
+
+<script setup lang="ts">
+  const props = withDefaults(defineProps<CalloutProps>(), {
+    variant: "default",
+    filled: false,
+    target: "_self",
+    noPrefetch: false,
+  });
+
+  defineSlots<{
+    /** Default slot content */
+    default?: () => void;
+    /** Title slot content */
+    title?: () => void;
+    /** Icon slot content */
+    icon?: () => void;
+  }>();
+
+  const slots = useSlots();
+
+  const componentType = computed(() => (props.url ? resolveComponent("NuxtLink") : "div"));
+
+  const linkProps = computed(() => {
+    if (!props.url) return {};
+    return {
+      to: props.url,
+      target: props.target,
+      rel: props.target === "_blank" ? "noopener noreferrer" : undefined,
+      class: tw`cursor-pointer no-underline! transition-all! duration-300 hover:shadow-md`,
+    };
+  });
+
+  const hasIcon = computed(() => props.icon || slots.icon || props.variant);
+  const hasTitle = computed(() => props.title || slots.title);
+  const hasDescription = computed(() => props.description || slots.default);
+
+  const computedIcon = computed(() => {
+    if (props.icon) return props.icon;
+    return VARIANT_ICONS[props.variant || "default"] || VARIANT_ICONS.default;
+  });
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <component
+    v-bind="linkProps"
+    :is="as"
+    :class="proseCardStyles().base({ class: normalizeClass(props.class) || undefined })"
+    data-slot="prose-card"
+  >
+    <slot name="icon" mdc-unwrap="p">
+      <ProseSmartIcon v-if="icon" :name="icon" :class="proseCardStyles().icon()" />
+    </slot>
+    <slot name="title" mdc-unwrap="p">
+      <h3 v-if="title" data-slot="prose-card-title" :class="proseCardStyles().title()">
+        {{ title }}
+      </h3>
+    </slot>
+    <slot mdc-unwrap="p">
+      <p
+        v-if="description"
+        data-slot="prose-card-description"
+        :class="proseCardStyles().description()"
+      >
+        {{ description }}
+      </p>
+    </slot>
+    <slot name="footer"></slot>
+    <div v-if="to || href" class="absolute top-4 right-4">
+      <Icon
+        name="lucide:arrow-up-right"
+        class="size-5 scale-0 opacity-80 transition-all duration-200 group-hover:scale-100"
+      />
+    </div>
+    <UiBorderBeam :duration="20" :size="100" class="opacity-0 group-hover:opacity-100" />
+  </component>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app";
+
+  export const proseCardStyles = tv({
+    slots: {
+      base: "group relative flex flex-col gap-2 rounded-lg border border-border/50 bg-card p-6 text-card-foreground no-underline! shadow-xs *:my-0!",
+      icon: "size-6 text-muted-foreground",
+      title: "not-prose text-lg font-semibold tracking-tight text-foreground",
+      description: "text-[15px] text-muted-foreground first:mt-0 last:mb-0",
+    },
+  });
+
+  export type ProseCardProps = NuxtLinkProps & {
+    /**
+     * Additional classes for the card wrapper
+     */
+    class?: HTMLAttributes["class"];
+    /**
+     * Title of the card
+     */
+    title?: string;
+    /**
+     * Description/content of the card
+     */
+    description?: string;
+    /**
+     * Icon name to display in the card
+     */
+    icon?: string;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ProseCardProps>(), {});
+
+  defineSlots<{
+    /**
+     * Slot for the card title
+     */
+    title: () => any;
+    /**
+     * Slot for the card description/content
+     */
+    default: () => any;
+    /**
+     * Slot for an icon to display in the card
+     */
+    icon: () => any;
+    /**
+     * Slot for the card footer
+     */
+    footer: () => any;
+  }>();
+
+  const linkProps = computed(() => {
+    if (!(props.to || props.href)) return {};
+
+    return reactiveOmit(props, ["class", "title", "description", "icon"]);
+  });
+
+  const as = computed(() => (props.to || props.href ? resolveComponent("NuxtLink") : "div"));
+</script>

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

@@ -0,0 +1,125 @@
+<template>
+  <div :class="styles.root({ class: normalizeClass([props.class]) || undefined, open })">
+    <slot />
+    <div :class="styles.footer({ open })">
+      <button
+        :class="styles.trigger({ open })"
+        variant="outline"
+        :aria-expanded="open"
+        :aria-label="`${open ? 'Collapse' : 'Expand'} ${props.name}`"
+        :data-state="open ? 'open' : 'closed'"
+        @click="open = !open"
+      >
+        <ProseSmartIcon
+          v-if="props.icon"
+          :name="props.icon"
+          :class="styles.triggerIcon()"
+          aria-hidden="true"
+        />
+        <span>{{ open ? props.closeText : props.openText }} {{ props.name }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export interface ProseCodeCollapseProps {
+    /**
+     * The icon displayed to toggle the code collapse state
+     * @default "lucide:chevron-down"
+     * @example "lucide:code" | "heroicons:chevron-down"
+     */
+    icon?: string;
+    /**
+     * The name/label displayed in the trigger button
+     * @default "Code"
+     * @example "Implementation" | "Full Code" | "Example"
+     */
+    name?: string;
+    /**
+     * The text displayed when the code is collapsed (clickable to expand)
+     * @default "Expand"
+     * @example "Show" | "View" | "Display"
+     */
+    openText?: string;
+    /**
+     * The text displayed when the code is expanded (clickable to collapse)
+     * @default "Collapse"
+     * @example "Hide" | "Minimize" | "Close"
+     */
+    closeText?: string;
+    /**
+     * Additional CSS classes for the root container
+     */
+    class?: HTMLAttributes["class"];
+  }
+
+  /**
+   * Tailwind variant styles for the code collapse component
+   * Uses slots pattern for multi-part component styling with open/closed states
+   */
+  export const proseCodeCollapseStyles = tv({
+    slots: {
+      root: "relative [&_pre]:h-50",
+      footer: "absolute inset-x-px bottom-px flex h-20 items-center justify-center rounded-b-md",
+      trigger:
+        "group flex items-center gap-2 rounded-md bg-accent py-1.5 ps-1.5 pe-3 text-sm font-medium transition-all duration-200 hover:scale-103 hover:bg-accent hover:text-foreground",
+      triggerIcon: "text-muted-foreground transition-transform group-data-[state=open]:rotate-180",
+    },
+    variants: {
+      open: {
+        true: {
+          root: "[&_pre]:h-auto [&_pre]:max-h-[80vh] [&_pre]:min-h-50 [&_pre]:pb-12",
+          trigger: "bg-accent ring-1 ring-muted dark:ring-border",
+        },
+        false: {
+          root: "[&_pre]:overflow-hidden",
+          footer: "bg-linear-to-t from-foreground/10 dark:from-muted/80",
+        },
+      },
+    },
+  });
+</script>
+
+<script lang="ts" setup>
+  /**
+   * ProseCodeCollapse - Collapsible code block wrapper
+   *
+   * Wraps code blocks and provides a toggle button to show/hide content.
+   * Useful for long code examples that would take up too much vertical space.
+   * Initial height is limited to 200px with a gradient fade effect.
+   *
+   * @example
+   * ```vue
+   * <ProseCodeCollapse
+   *   name="Full Implementation"
+   *   icon="lucide:code"
+   *   open-text="Show"
+   *   close-text="Hide"
+   * >
+   *   <ProsePre language="typescript" code="..." />
+   * </ProseCodeCollapse>
+   * ```
+   */
+
+  const props = withDefaults(defineProps<ProseCodeCollapseProps>(), {
+    icon: "lucide:chevron-down",
+    name: "Code",
+    openText: "Expand",
+    closeText: "Collapse",
+  });
+
+  /**
+   * Toggle state for the collapse/expand functionality
+   * @default false - Starts collapsed
+   */
+  const open = defineModel<boolean>({ default: false });
+
+  /**
+   * Computed styles to avoid recalculating on each render
+   */
+  const styles = computed(() => proseCodeCollapseStyles());
+</script>