fulldev-ui 0.10.1 → 0.11.1

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

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import {
@@ -11,11 +12,14 @@ import {
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -45,10 +49,11 @@ const {
   buttons,
   socialProof,
   image = { src: PlaceholderImage, alt: "CTA image" },
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
     <Image
       src={image.src}
@@ -59,11 +64,9 @@ const {
     />
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-4">
-        <h2
-          class="text-foreground text-3xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle class="leading-[1.1]">
           {title}
-        </h2>
+        </SectionTitle>
         <p class="text-muted-foreground text-lg leading-relaxed">
           {description}
         </p>

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

@@ -1,5 +1,6 @@
 ---
 import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import {
@@ -10,10 +11,14 @@ import {
   AvatarImage,
 } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -39,20 +44,22 @@ const {
   description,
   buttons,
   socialProof,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("bg-primary/10 border-primary/15 border-y", className)}>
+<Section
+  class={cn("bg-primary/10 border-primary/15 border-y", className)}
+  {...props}
+>
   <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"
-      >
+      <SectionTitle class="leading-[1.1]">
         {title}
-      </h2>
-      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+      </SectionTitle>
+      <SectionDescription>
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       buttons?.length && (

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

@@ -1,10 +1,16 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -14,25 +20,24 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons } = Astro.props
+const { class: className, title, description, buttons, ...props } = Astro.props
 ---
 
 <Section
   variant="floating"
   class={cn("border-primary/20 shadow-none", className)}
+  {...props}
 >
   <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"
   >
     <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"
-      >
+      <SectionTitle class="leading-[1.1]">
         {title}
-      </h2>
-      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+      </SectionTitle>
+      <SectionDescription>
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       buttons?.length && (

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

@@ -99,7 +99,7 @@ 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.`
+  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`
   : ""
 const openLinks = markdownUrl
   ? [

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

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import {
   Accordion,
@@ -7,10 +9,14 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   faqs: {
@@ -25,20 +31,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, faqs, buttons } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  faqs,
+  buttons,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      <p class="text-muted-foreground text-lg leading-relaxed text-balance">
+      </SectionTitle>
+      <SectionDescription>
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       buttons?.length && (

package/src/components/blocks/faqs-2.astro

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import {
   Accordion,
@@ -7,10 +9,13 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   faqs: {
@@ -25,20 +30,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, faqs, buttons } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  faqs,
+  buttons,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer>
     <div
       class="grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] lg:gap-16"
     >
       <div class="lg:sticky lg:top-24 lg:self-start">
-        <h2
-          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle>
           {title}
-        </h2>
+        </SectionTitle>
         <p
           class="text-muted-foreground mt-4 text-base leading-relaxed text-balance"
         >

package/src/components/blocks/faqs-3.astro

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import {
   Accordion,
@@ -7,10 +9,13 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Badge } from "@/components/ui/badge"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description: string
@@ -21,18 +26,23 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, description, faqs } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  faqs,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center text-center">
     <div class="flex max-w-2xl flex-col items-center gap-5">
       {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
+      </SectionTitle>
       <p class="text-muted-foreground text-base leading-relaxed text-balance">
         {description}
       </p>

package/src/components/blocks/faqs-4.astro

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import {
   Accordion,
@@ -6,10 +8,13 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   faqs: {
     id: string
@@ -18,17 +23,15 @@ type Props = {
   }[]
 }
 
-const { class: className, title, faqs } = Astro.props
+const { class: className, title, faqs, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center">
     <div class="mx-auto w-full max-w-3xl">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
+      </SectionTitle>
       <div class="mt-10">
         <Accordion collapsible>
           {

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

@@ -1,13 +1,18 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -24,22 +29,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons, features } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  features,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      <p
-        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
-      >
+      </SectionTitle>
+      <SectionDescription class="max-w-2xl">
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       buttons?.length && (

package/src/components/blocks/features-2.astro

@@ -1,11 +1,17 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -20,22 +26,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons, features } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  features,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      <p
-        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
-      >
+      </SectionTitle>
+      <SectionDescription class="max-w-2xl">
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       buttons?.length && (

package/src/components/blocks/features-3.astro

@@ -1,12 +1,17 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features: {
@@ -19,22 +24,18 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, features } = Astro.props
+const { class: className, title, description, features, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      <p
-        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
-      >
+      </SectionTitle>
+      <SectionDescription class="max-w-2xl">
         {description}
-      </p>
+      </SectionDescription>
     </div>
   </SectionContainer>
   <SectionContainer>

package/src/components/blocks/features-4.astro

@@ -1,13 +1,17 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -24,18 +28,23 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons, features } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  features,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer>
     <div class="grid gap-12 lg:grid-cols-[1fr_2fr] lg:items-start">
       <div class="lg:sticky lg:top-28">
-        <h2
-          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle>
           {title}
-        </h2>
+        </SectionTitle>
         <p
           class="text-muted-foreground mt-4 text-base leading-relaxed text-balance"
         >

package/src/components/blocks/features-5.astro

@@ -1,11 +1,17 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Icon } from "@/components/ui/icon"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -20,22 +26,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons, features } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  features,
+  ...props
+} = Astro.props
 ---
 
-<Section variant="floating" class={cn("", className)}>
+<Section variant="floating" class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-6 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      <p
-        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
-      >
+      </SectionTitle>
+      <SectionDescription class="max-w-2xl">
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       buttons?.length && (