fulldev-ui 0.10.1 → 0.11.1

package/src/components/blocks/contact-3.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"
@@ -11,14 +12,18 @@ import {
   FieldLegend,
   FieldSet,
 } from "@/components/ui/field"
+import { Form } from "@/components/ui/form"
 import { Icon } from "@/components/ui/icon"
 import { Input } from "@/components/ui/input"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionTitle,
+} from "@/components/ui/section"
 import { Textarea } from "@/components/ui/textarea"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   contactItems: {
@@ -28,6 +33,9 @@ type Props = {
     href?: string
   }[]
   form: {
+    id?: string
+    action?: string
+    method?: "get" | "post"
     legend: string
     nameLabel: string
     namePlaceholder: string
@@ -50,18 +58,18 @@ const {
   contactItems,
   form,
   image = { src: PlaceholderImage, alt: "Contact image" },
+  ...props
 } = Astro.props
+const formId = form.id ?? `contact-${crypto.randomUUID()}`
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-start">
     <div class="flex flex-col gap-8">
       <div class="flex flex-col gap-4">
-        <h2
-          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle>
           {title}
-        </h2>
+        </SectionTitle>
         <p class="text-muted-foreground max-w-xl text-base leading-relaxed">
           {description}
         </p>
@@ -83,10 +91,11 @@ const {
                 </Button>
               ) : (
                 <Button
+                  as="span"
                   variant="secondary"
                   size="icon"
                   class="text-primary shrink-0"
-                  aria-label={item.title}
+                  aria-hidden="true"
                 >
                   <Icon name={item.icon} />
                 </Button>
@@ -102,36 +111,55 @@ const {
         }
       </div>
       <div class="rounded-xl border p-6">
-        <FieldSet>
-          <FieldLegend class="sr-only">{form.legend}</FieldLegend>
-          <FieldGroup>
-            <div class="grid gap-4 md:grid-cols-2">
-              <Field>
-                <FieldLabel for="contact-name-3">{form.nameLabel}</FieldLabel>
-                <Input id="contact-name-3" placeholder={form.namePlaceholder} />
-              </Field>
+        <Form id={formId} action={form.action} method={form.method ?? "post"}>
+          <FieldSet>
+            <FieldLegend class="sr-only">{form.legend}</FieldLegend>
+            <FieldGroup>
+              <div class="grid gap-4 md:grid-cols-2">
+                <Field>
+                  <FieldLabel for={`${formId}-name`}
+                    >{form.nameLabel}</FieldLabel
+                  >
+                  <Input
+                    id={`${formId}-name`}
+                    name="name"
+                    autocomplete="name"
+                    required
+                    placeholder={form.namePlaceholder}
+                  />
+                </Field>
+                <Field>
+                  <FieldLabel for={`${formId}-email`}
+                    >{form.emailLabel}</FieldLabel
+                  >
+                  <Input
+                    id={`${formId}-email`}
+                    name="email"
+                    autocomplete="email"
+                    required
+                    type="email"
+                    placeholder={form.emailPlaceholder}
+                  />
+                </Field>
+              </div>
               <Field>
-                <FieldLabel for="contact-email-3">{form.emailLabel}</FieldLabel>
-                <Input
-                  id="contact-email-3"
-                  type="email"
-                  placeholder={form.emailPlaceholder}
+                <FieldLabel for={`${formId}-message`}
+                  >{form.messageLabel}</FieldLabel
+                >
+                <Textarea
+                  id={`${formId}-message`}
+                  name="message"
+                  required
+                  rows={5}
+                  placeholder={form.messagePlaceholder}
                 />
               </Field>
-            </div>
-            <Field>
-              <FieldLabel for="contact-message-3"
-                >{form.messageLabel}</FieldLabel
+              <Button type="submit" size="lg" class="w-full"
+                >{form.actionLabel}</Button
               >
-              <Textarea
-                id="contact-message-3"
-                rows={5}
-                placeholder={form.messagePlaceholder}
-              />
-            </Field>
-            <Button size="lg" class="w-full">{form.actionLabel}</Button>
-          </FieldGroup>
-        </FieldSet>
+            </FieldGroup>
+          </FieldSet>
+        </Form>
       </div>
     </div>
     <Image

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

@@ -1,15 +1,21 @@
 ---
 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"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features?: string[]
@@ -31,20 +37,19 @@ const {
   features,
   buttons,
   image = { src: PlaceholderImage, alt: "Content image" },
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-6">
     <div class="flex flex-col 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 text-lg leading-relaxed text-balance">
+      </SectionTitle>
+      <SectionDescription>
         {description}
-      </p>
+      </SectionDescription>
     </div>
     {
       features?.length && (

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

@@ -1,15 +1,21 @@
 ---
 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"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features?: string[]
@@ -31,21 +37,20 @@ const {
   features,
   buttons,
   image = { src: PlaceholderImage, alt: "Content 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">
     <div class="flex flex-col gap-6">
       <div class="flex flex-col 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 text-lg leading-relaxed text-balance">
+        </SectionTitle>
+        <SectionDescription>
           {description}
-        </p>
+        </SectionDescription>
       </div>
       {
         features?.length && (

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

@@ -1,14 +1,19 @@
 ---
 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"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  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,25 +33,22 @@ const {
   description,
   buttons,
   image = { src: PlaceholderImage, alt: "Content image" },
+  ...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-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>
       {
         buttons?.length && (

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

@@ -1,15 +1,21 @@
 ---
 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"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import PlaceholderImage from "@/assets/placeholder.webp"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features?: string[]
@@ -31,22 +37,21 @@ const {
   features,
   buttons,
   image = { src: PlaceholderImage, alt: "Content image" },
+  ...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-center">
       <div class="flex flex-col gap-6">
         <div class="flex flex-col 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 text-lg leading-relaxed text-balance">
+          </SectionTitle>
+          <SectionDescription>
             {description}
-          </p>
+          </SectionDescription>
         </div>
         {
           features?.length && (

package/src/components/blocks/cta-1.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 {
 } 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,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -38,10 +43,11 @@ const {
   description,
   buttons,
   socialProof,
+  ...props
 } = Astro.props
 ---
 
-<Section variant="floating" class={cn("", className)}>
+<Section variant="floating" class={cn("", className)} {...props}>
   <SectionContainer class="items-center text-center">
     {
       socialProof && (
@@ -67,14 +73,12 @@ const {
       )
     }
     <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-2.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,18 +49,17 @@ const {
   buttons,
   socialProof,
   image = { src: PlaceholderImage, alt: "CTA image" },
+  ...props
 } = Astro.props
 ---
 
-<Section variant="floating" class={cn("", className)}>
+<Section variant="floating" class={cn("", className)} {...props}>
   <SectionContainer class="grid gap-12 lg:grid-cols-2 lg:items-center">
     <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-3.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,13 @@ 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"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons?: {
@@ -38,19 +42,22 @@ const {
   description,
   buttons,
   socialProof,
+  ...props
 } = Astro.props
 ---
 
-<Section variant="floating" class={cn("bg-accent/50 shadow-none", className)}>
+<Section
+  variant="floating"
+  class={cn("bg-accent/50 shadow-none", className)}
+  {...props}
+>
   <SectionContainer
     class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
   >
     <div class="flex flex-col 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>
+      </SectionTitle>
       <p class="text-muted-foreground max-w-2xl text-lg leading-relaxed">
         {description}
       </p>

package/src/components/blocks/cta-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 {
@@ -11,11 +12,15 @@ 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,
+  SectionDescription,
+  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,12 +50,14 @@ const {
   buttons,
   socialProof,
   image = { src: PlaceholderImage, alt: "CTA image" },
+  ...props
 } = Astro.props
 ---
 
 <Section
   variant="floating"
   class={cn("dark bg-background overflow-hidden", className)}
+  {...props}
 >
   <Image
     src={image.src}
@@ -61,14 +68,12 @@ const {
   />
   <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-5.astro

@@ -1,15 +1,20 @@
 ---
 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"
 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
   features?: string[]
@@ -31,18 +36,17 @@ const {
   features,
   buttons,
   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">
     <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>