fulldev-ui 0.10.0 → 0.11.0

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

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
@@ -14,8 +15,7 @@ import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features: string[]
@@ -47,10 +47,11 @@ const {
   buttons,
   socialProof,
   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}

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

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
@@ -14,8 +15,7 @@ import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features: string[]
@@ -47,10 +47,11 @@ const {
   buttons,
   socialProof,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer
     class="grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0"
   >

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

@@ -1,13 +1,13 @@
 ---
 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"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons: {
@@ -21,10 +21,17 @@ type Props = {
   }
 }
 
-const { class: className, title, description, buttons, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  image,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer
     class="grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0"
   >

package/src/components/blocks/hero-9.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
@@ -14,8 +15,7 @@ import { Button } from "@/components/ui/button"
 import { Rating } from "@/components/ui/rating"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features: string[]
@@ -47,10 +47,11 @@ const {
   buttons,
   socialProof,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("dark bg-background", className)}>
+<Section class={cn("dark bg-background", className)} {...props}>
   <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
     <div class="relative z-10 flex flex-col gap-6">
       <div class="flex flex-col gap-4">

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

@@ -1,11 +1,11 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import ArrowRightIcon from "@lucide/astro/icons/arrow-right"
 
 import { cn } from "@/lib/utils"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   links: {
@@ -16,10 +16,10 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, links } = Astro.props
+const { class: className, title, description, links, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-10">
     <div class="flex min-w-0 flex-col gap-4 border-b pb-8">
       <h2

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

@@ -1,10 +1,16 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Logo, LogoText } from "@/components/ui/logo"
-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
   brands: {
@@ -13,24 +19,16 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, brands } = Astro.props
+const { class: className, title, description, brands, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-10 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>
-      {
-        description && (
-          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
-            {description}
-          </p>
-        )
-      }
+      </SectionTitle>
+      {description && <SectionDescription>{description}</SectionDescription>}
     </div>
     <div
       class="text-muted-foreground flex w-full flex-wrap items-center justify-center gap-x-12 gap-y-6"

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

@@ -1,11 +1,17 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Logo, LogoText } from "@/components/ui/logo"
 import { Marquee } from "@/components/ui/marquee"
-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
   brands: {
@@ -14,22 +20,18 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, brands } = Astro.props
+const { class: className, title, description, brands, ...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/logos-3.astro

@@ -1,20 +1,21 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Logo, LogoText } from "@/components/ui/logo"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   brands: {
     name: string
     href?: string
   }[]
 }
 
-const { class: className, brands } = Astro.props
+const { class: className, brands, ...props } = Astro.props
 ---
 
-<Section class={cn("py-12 lg:py-16", className)}>
+<Section class={cn("py-12 lg:py-16", className)} {...props}>
   <SectionContainer>
     <div
       class="text-muted-foreground flex flex-wrap items-center justify-center gap-x-12 gap-y-6"

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

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
@@ -13,11 +14,15 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description?: string
   plans: {
@@ -36,24 +41,16 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, plans } = Astro.props
+const { class: className, title, description, plans, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-8 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>
-      {
-        description && (
-          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
-            {description}
-          </p>
-        )
-      }
+      </SectionTitle>
+      {description && <SectionDescription>{description}</SectionDescription>}
     </div>
   </SectionContainer>
   <SectionContainer>

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

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
@@ -12,11 +13,15 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   plans: {
@@ -35,22 +40,18 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, plans } = Astro.props
+const { class: className, title, description, plans, ...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">
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      <p
-        class="text-muted-foreground mt-4 text-lg leading-relaxed text-balance"
-      >
+      </SectionTitle>
+      <SectionDescription class="mt-4">
         {description}
-      </p>
+      </SectionDescription>
     </div>
     <div
       class="mx-auto grid w-full justify-center gap-6 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(16rem,18rem))]"

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

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import { CheckIcon } from "@lucide/astro"
 
 import { cn } from "@/lib/utils"
@@ -13,11 +14,15 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description?: string
@@ -36,25 +41,24 @@ type Props = {
   }
 }
 
-const { class: className, badge, title, description, offer } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  offer,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-8 text-center">
     <div class="flex max-w-2xl flex-col items-center gap-4">
       {badge && <Badge variant="secondary">{badge}</Badge>}
-      <h2
-        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
-      {
-        description && (
-          <p class="text-muted-foreground text-lg leading-relaxed text-balance">
-            {description}
-          </p>
-        )
-      }
+      </SectionTitle>
+      {description && <SectionDescription>{description}</SectionDescription>}
     </div>
     <Card class="ring-primary w-full max-w-md ring-2">
       <CardHeader class="text-left">

package/src/components/blocks/product-1.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"
@@ -8,8 +9,7 @@ import { Button } from "@/components/ui/button"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
   description: string
@@ -39,10 +39,11 @@ const {
   price,
   note,
   buttons,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="grid gap-8 lg:grid-cols-2 lg:items-center">
     <Image
       src={image.src}

package/src/components/blocks/products-1.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"
@@ -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"> & {
   badge: string
   title: string
   products: {
@@ -33,18 +37,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-4">
       {

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

@@ -1,12 +1,17 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Badge } from "@/components/ui/badge"
 import { Price, PriceUnit, PriceValue } from "@/components/ui/price"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge: string
   title: string
   products: {
@@ -20,18 +25,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="max-w-2xl">
       <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-3">
       {

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>