fulldev-ui 0.7.0 → 0.9.0

package/src/components/blocks/cta-7.astro

@@ -1,90 +1,102 @@
 ---
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import { Image } from "@/components/ui/image"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-} from "@/components/ui/item"
-import { Rating } from "@/components/ui/rating"
+import type { ImageMetadata } from "astro"
+
+import { cn } from "@/lib/utils"
 import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  image?: {
-    src: string
-    alt: string
-  }
-  item?: {
-    images?: {
-      src: string
-      alt: string
+  socialProof?: {
+    avatars: {
+      image?: ImageMetadata
+      initials: string
+      name?: string
     }[]
+    count?: string | number
     rating?: number
-    description?: string
+    text: string
   }
 }
 
-const { class: className, id, links, image, item } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  socialProof,
+} = Astro.props
 ---
 
-<Section class={className} id={id} size="lg">
-  <SectionMedia class="absolute inset-0 size-full rounded-none mask-y-from-0%">
-    <Image sizes="(1536px) 1536px, 100vw" {...image} />
-  </SectionMedia>
-  <SectionSpread class="relative @5xl:items-center">
-    <SectionProse size="lg">
-      <slot />
-    </SectionProse>
-    <SectionContent class="shrink-0">
-      <SectionActions>
-        {
-          links?.map(({ icon, text, ...link }, i) => (
+<Section class={cn("bg-primary/10 border-primary/15 border-y", className)}>
+  <SectionContainer class="items-center text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-5">
+      <h2
+        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+        {description}
+      </p>
+    </div>
+    {
+      buttons?.length && (
+        <div class="flex flex-wrap justify-center gap-3">
+          {buttons.map(({ href, label, ...button }, index) => (
             <Button
-              class="w-full"
-              variant={i === 0 ? "default" : "secondary"}
-              {...link}
+              as="a"
+              href={href}
+              size="lg"
+              variant={
+                button.variant ?? (index === 0 ? "default" : "secondary")
+              }
+              {...button}
             >
-              {icon && <Icon name={icon} />}
-              {text}
+              {label}
             </Button>
-          ))
-        }
-      </SectionActions>
-      <Item class="p-0">
-        <ItemMedia class="-space-x-5">
-          {
-            item?.images?.map((image) => (
-              <Avatar class="ring-background size-11 ring">
-                <AvatarImage {...image} />
+          ))}
+        </div>
+      )
+    }
+    {
+      socialProof && (
+        <div class="flex flex-col items-center gap-4">
+          <AvatarGroup>
+            {socialProof.avatars.map((avatar) => (
+              <Avatar class="ring-primary/10 bg-background size-11 ring">
+                <AvatarImage
+                  src={avatar.image}
+                  alt={avatar.name ?? avatar.initials}
+                />
+                <AvatarFallback>{avatar.initials}</AvatarFallback>
               </Avatar>
-            ))
-          }
-        </ItemMedia>
-        <ItemContent class="mt-1">
-          <Rating rating={item?.rating} />
-          <ItemDescription class="text-foreground">
-            {item?.description}
-          </ItemDescription>
-        </ItemContent>
-      </Item>
-    </SectionContent>
-  </SectionSpread>
+            ))}
+            {socialProof.count && (
+              <AvatarGroupCount class="bg-background text-foreground ring-primary/10 size-11 ring">
+                {socialProof.count}
+              </AvatarGroupCount>
+            )}
+          </AvatarGroup>
+          <span class="text-muted-foreground text-sm leading-snug">
+            {socialProof.text.replace(/\s+/g, " ")}
+          </span>
+        </div>
+      )
+    }
+  </SectionContainer>
 </Section>

package/src/components/blocks/cta-8.astro

@@ -1,91 +1,55 @@
 ---
 import { cn } from "@/lib/utils"
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Icon } from "@/components/ui/icon"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-} from "@/components/ui/item"
-import { Rating } from "@/components/ui/rating"
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionProse,
-} from "@/components/ui/section"
+import { Section, SectionContainer } from "@/components/ui/section"
 
-interface Props {
+type Props = {
   class?: string
-  id?: string
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
   }[]
-  item?: {
-    images?: {
-      src: string
-      alt: string
-    }[]
-    rating?: number
-    description?: string
-  }
 }
 
-const { class: className, id, links, item } = Astro.props
+const { class: className, title, description, buttons } = Astro.props
 ---
 
 <Section
-  class={cn(
-    "border-primary/20 my-0 -mt-px rounded-none shadow-none",
-    className
-  )}
-  id={id}
   variant="floating"
-  size="lg"
+  class={cn("border-primary/20 shadow-none", className)}
 >
-  <SectionContent
-    class={cn(
-      "before:from-primary/20 relative items-center before:absolute before:top-full before:left-0 before:-z-10 before:h-[200%] before:w-full before:animate-pulse before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl"
-    )}
+  <SectionContainer
+    class="before:from-primary/20 relative items-center before:absolute before:top-full before:left-1/2 before:-z-10 before:h-[200%] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl"
   >
-    <Item class="p-0">
-      <ItemMedia class="-space-x-5">
-        {
-          item?.images?.map((image) => (
-            <Avatar class="ring-background size-11 ring">
-              <AvatarImage {...image} />
-            </Avatar>
-          ))
-        }
-      </ItemMedia>
-      <ItemContent class="mt-1">
-        <Rating rating={item?.rating} />
-        <ItemDescription>
-          {item?.description}
-        </ItemDescription>
-      </ItemContent>
-    </Item>
-    <SectionProse class="text-center" size="lg">
-      <slot />
-    </SectionProse>
-    <SectionActions class="justify-center">
-      {
-        links?.map(({ icon, text, ...link }, i) => (
-          <Button
-            variant={i === 0 ? "default" : "outline"}
-            size="lg"
-            {...link}
-          >
-            {icon && <Icon name={icon} />}
-            {text}
-          </Button>
-        ))
-      }
-    </SectionActions>
-  </SectionContent>
+    <div class="flex max-w-2xl flex-col items-center gap-5 text-center">
+      <h2
+        class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+        {description}
+      </p>
+    </div>
+    {
+      buttons?.length && (
+        <div class="flex flex-wrap justify-center gap-3">
+          {buttons.map(({ href, label, ...button }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="lg"
+              variant={button.variant ?? (index === 0 ? "default" : "outline")}
+              {...button}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )
+    }
+  </SectionContainer>
 </Section>

package/src/components/blocks/doc-1.astro

@@ -0,0 +1,364 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button/button-variants"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Icon } from "@/components/ui/icon"
+import { SectionContainer } from "@/components/ui/section"
+import {
+  Toc,
+  TocMenu,
+  TocMenuItem,
+  TocMenuLink,
+  TocTitle,
+} from "@/components/ui/toc"
+import {
+  Typography,
+  TypographyH1,
+  TypographyLead,
+} from "@/components/ui/typography"
+
+type Props = {
+  class?: string
+  title: string
+  description?: string
+  copyButton?: {
+    id: string
+    source: string
+  }
+  markdownUrl?: string
+  tocItems: {
+    depth: number
+    href: string
+    label: string
+  }[]
+  callout?: {
+    description: string
+    button: {
+      label: string
+      href: string
+      variant?: "default" | "outline" | "secondary" | "ghost"
+    }
+  }
+  previousPage?: {
+    href: string
+    title: string
+  }
+  nextPage?: {
+    href: string
+    title: string
+  }
+  labels: {
+    copyMarkdown: string
+    openIn: string
+    openInMarkdown: string
+    openInChatGPT: string
+    openInClaude: string
+    openInCursor: string
+    pagination: {
+      previous: string
+      next: string
+      ariaLabel: string
+    }
+    toc: string
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  copyButton,
+  markdownUrl,
+  tocItems,
+  callout,
+  previousPage,
+  nextPage,
+  labels,
+} = Astro.props
+const showCopyButton = Boolean(copyButton)
+const showOpenButton = Boolean(markdownUrl)
+const showPagination = Boolean(previousPage || nextPage)
+const assistantPrompt = markdownUrl
+  ? `Read ${markdownUrl}, I want to ask questions about it.`
+  : ""
+const openLinks = markdownUrl
+  ? [
+      {
+        label: labels.openInMarkdown,
+        href: markdownUrl,
+        icon: "markdown",
+      },
+      {
+        label: labels.openInChatGPT,
+        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,
+        icon: "chatgpt",
+      },
+      {
+        label: labels.openInClaude,
+        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,
+        icon: "claude",
+      },
+      {
+        label: labels.openInCursor,
+        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,
+        icon: "cursor",
+      },
+    ]
+  : []
+---
+
+<SectionContainer
+  class={cn(
+    "gap-10 pt-10 pb-8 sm:pt-12 sm:pb-10 xl:grid xl:grid-cols-[minmax(0,1fr)_16rem] xl:items-start xl:gap-x-16",
+    className
+  )}
+>
+  <div class="mx-auto flex w-full max-w-3xl min-w-0 flex-col gap-10">
+    <header
+      class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+    >
+      <div class="flex min-w-0 flex-1 flex-col gap-2">
+        <TypographyH1
+          size="sm"
+          class="text-foreground text-left tracking-tight"
+        >
+          {title}
+        </TypographyH1>
+        {
+          description && (
+            <TypographyLead class="max-w-2xl text-base! leading-7">
+              {description}
+            </TypographyLead>
+          )
+        }
+      </div>
+      <div class="flex shrink-0 items-center gap-2 self-start">
+        {
+          showCopyButton && (
+            <Button
+              id={copyButton?.id}
+              type="button"
+              variant="outline"
+              size="xs"
+              data-source={copyButton?.source}
+              aria-label={labels.copyMarkdown}
+            >
+              <Icon
+                name="copy"
+                data-copy-icon
+                class="docs-copy-icon size-3.5"
+              />
+              <Icon
+                name="check"
+                data-check-icon
+                class="docs-check-icon hidden size-3.5"
+              />
+              <span>{labels.copyMarkdown}</span>
+            </Button>
+          )
+        }
+        {
+          showOpenButton && (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                class={buttonVariants({ variant: "outline", size: "xs" })}
+              >
+                <span>{labels.openIn}</span>
+                <Icon name="chevron-down" class="size-3.5 opacity-70" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" sideOffset={6} class="w-56">
+                {openLinks.map((link) => (
+                  <a
+                    href={link.href}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
+                  >
+                    {link.icon === "markdown" && (
+                      <Icon name="markdown" class="size-4 fill-current" />
+                    )}
+                    {link.icon === "chatgpt" && (
+                      <svg
+                        role="img"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-4"
+                        aria-hidden="true"
+                      >
+                        <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
+                      </svg>
+                    )}
+                    {link.icon === "claude" && (
+                      <Icon name="claude" class="size-4 fill-current" />
+                    )}
+                    {link.icon === "cursor" && (
+                      <Icon name="cursor" class="size-4 fill-current" />
+                    )}
+                    <span>{link.label}</span>
+                    <Icon
+                      name="external-link"
+                      class="text-muted-foreground ml-auto size-3.5"
+                    />
+                  </a>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )
+        }
+      </div>
+    </header>
+
+    <Typography as="article" size="sm">
+      <slot />
+    </Typography>
+
+    {
+      showPagination && (
+        <nav
+          class="flex items-center justify-between gap-3"
+          aria-label={labels.pagination.ariaLabel}
+        >
+          {previousPage ? (
+            <Button
+              as="a"
+              href={previousPage.href}
+              variant="outline"
+              class="h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal"
+            >
+              <Icon name="arrow-left" class="size-4" />
+              <span class="truncate text-sm font-medium">
+                {previousPage.title}
+              </span>
+            </Button>
+          ) : (
+            <div aria-hidden="true" />
+          )}
+
+          {nextPage ? (
+            <Button
+              as="a"
+              href={nextPage.href}
+              variant="outline"
+              class="h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal"
+            >
+              <span class="truncate text-sm font-medium">{nextPage.title}</span>
+              <Icon name="arrow-right" class="size-4" />
+            </Button>
+          ) : (
+            <div aria-hidden="true" />
+          )}
+        </nav>
+      )
+    }
+  </div>
+
+  {
+    (tocItems.length > 0 || callout) && (
+      <aside class="hidden w-64 xl:sticky xl:top-12 xl:mr-0 xl:ml-auto xl:block xl:self-start">
+        <div class="flex flex-col gap-6">
+          {tocItems.length > 0 && (
+            <Toc aria-label={labels.toc}>
+              <TocTitle>{labels.toc}</TocTitle>
+              <TocMenu>
+                {tocItems.map((item) => (
+                  <TocMenuItem>
+                    <TocMenuLink href={item.href} depth={item.depth}>
+                      {item.label}
+                    </TocMenuLink>
+                  </TocMenuItem>
+                ))}
+              </TocMenu>
+            </Toc>
+          )}
+
+          {callout && (
+            <Card size="sm">
+              <CardHeader>
+                <CardDescription>{callout.description}</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button
+                  as="a"
+                  href={callout.button.href}
+                  variant={callout.button.variant}
+                  size="sm"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {callout.button.label}
+                </Button>
+              </CardFooter>
+            </Card>
+          )}
+        </div>
+      </aside>
+    )
+  }
+</SectionContainer>
+
+<script is:inline>
+  const copyIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>`
+  const checkIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"></path></svg>`
+  document.querySelectorAll("[data-slot='typography'] > pre").forEach((pre) => {
+    if (pre.closest(".docs-code-block")) return
+    const wrapper = document.createElement("div")
+    const button = document.createElement("button")
+    wrapper.className = "docs-code-block"
+    button.type = "button"
+    button.className = "docs-code-copy"
+    button.ariaLabel = "Copy code"
+    button.innerHTML = `<span data-copy-icon>${copyIcon}</span><span data-check-icon class="hidden">${checkIcon}</span>`
+    pre.before(wrapper)
+    wrapper.append(pre, button)
+  })
+
+  const writeToClipboard = async (text) => {
+    if (navigator.clipboard && window.isSecureContext) {
+      try {
+        await navigator.clipboard.writeText(text)
+        return true
+      } catch {
+        return false
+      }
+    }
+
+    return false
+  }
+
+  const showCopySuccess = (button) => {
+    button.querySelector("[data-copy-icon]")?.classList.add("hidden")
+    button.querySelector("[data-check-icon]")?.classList.remove("hidden")
+    setTimeout(() => {
+      button.querySelector("[data-copy-icon]")?.classList.remove("hidden")
+      button.querySelector("[data-check-icon]")?.classList.add("hidden")
+    }, 1200)
+  }
+
+  document.addEventListener("click", async (event) => {
+    const button = event.target?.closest?.(
+      "[id^='docs-copy-page-'], .docs-code-copy"
+    )
+    if (!button) return
+    const source =
+      button.dataset.source ??
+      button
+        .closest(".docs-code-block")
+        ?.querySelector("pre")
+        ?.textContent?.replace(/\n$/, "")
+    if (!source) return
+
+    const copied = await writeToClipboard(source)
+    if (copied) showCopySuccess(button)
+  })
+</script>