fulldev-ui 0.10.1 → 0.11.1

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

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import {
@@ -9,10 +11,13 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Price, PriceValue } from "@/components/ui/price"
-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
   products: {
@@ -25,18 +30,16 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, products } = Astro.props
+const { class: className, badge, title, products, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
-      <h2
-        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle class="mt-4">
         {title}
-      </h2>
+      </SectionTitle>
     </div>
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {

package/src/components/blocks/products-4.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 { Button } from "@/components/ui/button"
@@ -12,10 +13,13 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
-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: {
@@ -38,20 +42,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons, products } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  products,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div
       class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
     >
       <div class="max-w-2xl">
-        <h2
-          class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle>
           {title}
-        </h2>
+        </SectionTitle>
         <p class="text-muted-foreground mt-3 text-lg leading-8">
           {description}
         </p>

package/src/components/blocks/products-5.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 { Badge } from "@/components/ui/badge"
@@ -13,10 +14,13 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
-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
   buttons: {
@@ -39,18 +43,23 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, buttons, products } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  buttons,
+  products,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="mx-auto max-w-2xl text-center">
       <Badge variant="secondary">{badge}</Badge>
-      <h2
-        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle class="mt-4">
         {title}
-      </h2>
+      </SectionTitle>
       <div class="mt-4 flex flex-wrap justify-center gap-3">
         {
           buttons.map(({ href, label, ...button }) => (

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

@@ -1,15 +1,20 @@
 ---
 import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Card, CardContent } from "@/components/ui/card"
 import { Rating } from "@/components/ui/rating"
-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
   reviews: {
@@ -22,22 +27,18 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, reviews } = Astro.props
+const { class: className, title, description, reviews, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   {
     (title || description) && (
       <SectionContainer class="items-center gap-4 text-center">
-        {title && (
-          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
-            {title}
-          </h2>
-        )}
+        {title && <SectionTitle>{title}</SectionTitle>}
         {description && (
-          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+          <SectionDescription class="max-w-2xl">
             {description}
-          </p>
+          </SectionDescription>
         )}
       </SectionContainer>
     )

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

@@ -1,5 +1,6 @@
 ---
 import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
@@ -8,8 +9,7 @@ import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   featured: {
     quote: string
     image?: ImageMetadata
@@ -27,10 +27,10 @@ type Props = {
   }[]
 }
 
-const { class: className, featured, reviews } = Astro.props
+const { class: className, featured, reviews, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer
     class="grid gap-10 lg:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)] lg:items-start"
   >

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

@@ -1,5 +1,6 @@
 ---
 import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
@@ -12,10 +13,14 @@ import {
   CarouselPrevious,
 } from "@/components/ui/carousel"
 import { Rating } from "@/components/ui/rating"
-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
   reviews: {
@@ -28,22 +33,18 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, reviews } = Astro.props
+const { class: className, title, description, reviews, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   {
     (title || description) && (
       <SectionContainer class="items-center gap-4 text-center">
-        {title && (
-          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
-            {title}
-          </h2>
-        )}
+        {title && <SectionTitle>{title}</SectionTitle>}
         {description && (
-          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+          <SectionDescription class="max-w-2xl">
             {description}
-          </p>
+          </SectionDescription>
         )}
       </SectionContainer>
     )

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

@@ -1,15 +1,20 @@
 ---
 import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Card, CardContent } from "@/components/ui/card"
 import { Marquee } from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
-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
   reviews: {
@@ -22,26 +27,22 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, reviews } = Astro.props
+const { class: className, title, description, reviews, ...props } = Astro.props
 
 const half = Math.ceil(reviews.length / 2)
 const topRow = reviews.slice(0, half)
 const bottomRow = reviews.slice(half)
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   {
     (title || description) && (
       <SectionContainer class="items-center gap-4 text-center">
-        {title && (
-          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
-            {title}
-          </h2>
-        )}
+        {title && <SectionTitle>{title}</SectionTitle>}
         {description && (
-          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+          <SectionDescription class="max-w-2xl">
             {description}
-          </p>
+          </SectionDescription>
         )}
       </SectionContainer>
     )

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

@@ -1,15 +1,20 @@
 ---
 import type { ImageMetadata } from "astro"
+import type { HTMLAttributes } from "astro/types"
 import QuoteIcon from "@lucide/astro/icons/quote"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Marquee } from "@/components/ui/marquee"
 import { Rating } from "@/components/ui/rating"
-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
   reviews: {
@@ -22,7 +27,7 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, reviews } = Astro.props
+const { class: className, title, description, reviews, ...props } = Astro.props
 
 const third = Math.ceil(reviews.length / 3)
 const row1 = reviews.slice(0, third)
@@ -30,19 +35,15 @@ const row2 = reviews.slice(third, third * 2)
 const row3 = reviews.slice(third * 2)
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   {
     (title || description) && (
       <SectionContainer class="items-center gap-4 text-center">
-        {title && (
-          <h2 class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
-            {title}
-          </h2>
-        )}
+        {title && <SectionTitle>{title}</SectionTitle>}
         {description && (
-          <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance">
+          <SectionDescription class="max-w-2xl">
             {description}
-          </p>
+          </SectionDescription>
         )}
       </SectionContainer>
     )

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

@@ -1,16 +1,21 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   buttons?: {
@@ -30,21 +35,26 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, buttons, services } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  buttons,
+  services,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div
       class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
     >
       <div class="max-w-2xl">
         {badge && <Badge variant="secondary">{badge}</Badge>}
-        <h2
-          class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle class="mt-4">
           {title}
-        </h2>
+        </SectionTitle>
       </div>
       {
         buttons?.length && (

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

@@ -1,15 +1,19 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-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"> & {
   badge?: string
   title: string
   description?: string
@@ -40,18 +44,17 @@ const {
   description,
   buttons,
   services,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-12">
     <div class="mx-auto max-w-2xl text-center">
       {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle class="mt-4">
         {title}
-      </h2>
+      </SectionTitle>
       {
         description && (
           <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">

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

@@ -1,15 +1,19 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-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"> & {
   badge?: string
   title: string
   description?: string
@@ -39,18 +43,17 @@ const {
   description,
   buttons,
   services,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="mx-auto max-w-2xl text-center">
       {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle class="mt-4">
         {title}
-      </h2>
+      </SectionTitle>
       {
         description && (
           <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">

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

@@ -1,15 +1,20 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+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 { Section, SectionContainer } from "@/components/ui/section"
+import { Icon } from "@/components/ui/icon"
+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?: {
@@ -28,20 +33,25 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons, services } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  services,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div
       class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
     >
       <div class="max-w-2xl">
-        <h2
-          class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle>
           {title}
-        </h2>
+        </SectionTitle>
         {
           description && (
             <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">

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

@@ -1,14 +1,18 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 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"> & {
   badge?: string
   title: string
   description?: string
@@ -32,18 +36,17 @@ const {
   description,
   buttons,
   services,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-12">
     <div class="mx-auto max-w-2xl text-center">
       {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle class="mt-4">
         {title}
-      </h2>
+      </SectionTitle>
       {
         description && (
           <p class="text-muted-foreground mt-4 text-base leading-relaxed text-balance">