fulldev-ui 0.10.1 → 0.11.1

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

@@ -1,14 +1,14 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description: string
@@ -31,10 +31,11 @@ const {
   description,
   author,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="mx-auto max-w-2xl gap-8">
     <div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
       {

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

@@ -1,14 +1,14 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description: string
@@ -32,10 +32,11 @@ const {
   description,
   author,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="mx-auto max-w-2xl items-center gap-8 text-center">
     <div class="mx-auto flex w-full max-w-2xl flex-col items-center gap-6">
       {badge && <Badge variant="secondary">{badge}</Badge>}

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

@@ -1,14 +1,18 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 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
@@ -30,10 +34,17 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, description, articles } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  articles,
+  ...props
+} = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="flex max-w-2xl flex-col gap-4">
       {
@@ -43,11 +54,9 @@ const { class: className, badge, title, description, articles } = Astro.props
           </Badge>
         )
       }
-      <h2
-        class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-      >
+      <SectionTitle>
         {title}
-      </h2>
+      </SectionTitle>
       <p class="text-muted-foreground text-base leading-7">
         {description}
       </p>

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

@@ -1,14 +1,14 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description: string
@@ -53,10 +53,11 @@ const {
   description,
   featured,
   articles,
+  ...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>}

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

@@ -1,14 +1,18 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import type { HTMLAttributes } from "astro/types"
 
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 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
   articles: {
@@ -29,10 +33,10 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, articles } = Astro.props
+const { class: className, badge, title, articles, ...props } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="gap-8">
     <div class="flex flex-wrap items-end justify-between gap-4">
       <div class="flex flex-col gap-4">
@@ -43,11 +47,9 @@ const { class: className, badge, title, articles } = Astro.props
             </Badge>
           )
         }
-        <h2
-          class="text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
-        >
+        <SectionTitle>
           {title}
-        </h2>
+        </SectionTitle>
       </div>
     </div>
 

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

@@ -1,13 +1,13 @@
 ---
 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 { Badge } from "@/components/ui/badge"
 import { Section, SectionContainer } from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   badge?: string
   title: string
   description: string
@@ -25,10 +25,17 @@ type Props = {
   }[]
 }
 
-const { class: className, badge, title, description, articles } = Astro.props
+const {
+  class: className,
+  badge,
+  title,
+  description,
+  articles,
+  ...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>}

package/src/components/blocks/banner-1.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 { Banner, BannerContainer } from "@/components/ui/banner"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"aside"> & {
   title: string
   description: string
   link?: {
@@ -14,12 +14,13 @@ type Props = {
   }
 }
 
-const { class: className, title, description, link } = Astro.props
+const { class: className, title, description, link, ...props } = Astro.props
 ---
 
 <Banner
   storageKey="banner-1"
   class={cn("dark bg-background text-foreground", className)}
+  {...props}
 >
   <BannerContainer class="flex-row items-center gap-x-4 gap-y-1">
     <p class="text-sm leading-relaxed">

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

@@ -1,10 +1,11 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Banner, BannerContainer } from "@/components/ui/banner"
 import { Button } from "@/components/ui/button"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"aside"> & {
   title: string
   description: string
   buttons?: {
@@ -14,20 +15,28 @@ type Props = {
   }[]
 }
 
-const { class: className, title, description, buttons } = Astro.props
+const { class: className, title, description, buttons, ...props } = Astro.props
 ---
 
-<Banner variant="floating" storageKey="banner-2" class={cn("", className)}>
-  <BannerContainer class="gap-4 py-1" showClose={false}>
+<Banner
+  variant="floating"
+  storageKey="banner-2"
+  class={cn("@container", className)}
+  {...props}
+>
+  <BannerContainer
+    class="flex-col items-start gap-4 py-1 @2xl:flex-row @2xl:items-center"
+    showClose={false}
+  >
     <div
-      class="flex flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4"
+      class="flex min-w-0 flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4"
     >
       <p class="text-sm font-semibold">{title}</p>
       <p class="text-muted-foreground text-sm">{description}</p>
     </div>
     {
       buttons?.length && (
-        <div class="flex shrink-0 items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2">
           {buttons.map(({ href, label, ...button }, index) => (
             <Button
               as="a"

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

@@ -70,7 +70,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/contact-1.astro

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -9,13 +11,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,
+  SectionDescription,
+  SectionTitle,
+} from "@/components/ui/section"
 import { Textarea } from "@/components/ui/textarea"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   contactItems: {
@@ -25,6 +32,9 @@ type Props = {
     href?: string
   }[]
   form: {
+    id?: string
+    action?: string
+    method?: "get" | "post"
     legend: string
     nameLabel: string
     namePlaceholder: string
@@ -37,22 +47,26 @@ type Props = {
   }
 }
 
-const { class: className, title, description, contactItems, form } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  contactItems,
+  form,
+  ...props
+} = Astro.props
+const formId = form.id ?? `contact-${crypto.randomUUID()}`
 ---
 
-<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>
@@ -73,10 +87,11 @@ const { class: className, title, description, contactItems, form } = Astro.props
               </Button>
             ) : (
               <Button
+                as="span"
                 variant="secondary"
                 size="icon"
                 class="text-primary"
-                aria-label={item.title}
+                aria-hidden="true"
               >
                 <Icon name={item.icon} />
               </Button>
@@ -92,35 +107,54 @@ const { class: className, title, description, contactItems, form } = Astro.props
   </SectionContainer>
   <SectionContainer>
     <div class="mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8">
-      <FieldSet>
-        <FieldLegend class="sr-only">{form.legend}</FieldLegend>
-        <FieldGroup>
-          <div class="grid gap-4 md:grid-cols-2">
+      <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-name-1">{form.nameLabel}</FieldLabel>
-              <Input id="contact-name-1" placeholder={form.namePlaceholder} />
-            </Field>
-            <Field>
-              <FieldLabel for="contact-email-1">{form.emailLabel}</FieldLabel>
-              <Input
-                id="contact-email-1"
-                type="email"
-                placeholder={form.emailPlaceholder}
+              <FieldLabel for={`${formId}-message`}
+                >{form.messageLabel}</FieldLabel
+              >
+              <Textarea
+                id={`${formId}-message`}
+                name="message"
+                required
+                rows={5}
+                placeholder={form.messagePlaceholder}
               />
+              <FieldDescription>{form.messageDescription}</FieldDescription>
             </Field>
-          </div>
-          <Field>
-            <FieldLabel for="contact-message-1">{form.messageLabel}</FieldLabel>
-            <Textarea
-              id="contact-message-1"
-              rows={5}
-              placeholder={form.messagePlaceholder}
-            />
-            <FieldDescription>{form.messageDescription}</FieldDescription>
-          </Field>
-          <Button size="lg" class="w-full">{form.actionLabel}</Button>
-        </FieldGroup>
-      </FieldSet>
+            <Button type="submit" size="lg" class="w-full"
+              >{form.actionLabel}</Button
+            >
+          </FieldGroup>
+        </FieldSet>
+      </Form>
     </div>
   </SectionContainer>
 </Section>

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

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import {
@@ -8,13 +10,17 @@ 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"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   contactItems: {
@@ -24,6 +30,9 @@ type Props = {
     href?: string
   }[]
   form: {
+    id?: string
+    action?: string
+    method?: "get" | "post"
     title: string
     legend: string
     nameLabel: string
@@ -36,20 +45,26 @@ type Props = {
   }
 }
 
-const { class: className, title, description, contactItems, form } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  contactItems,
+  form,
+  ...props
+} = Astro.props
+const formId = form.id ?? `contact-${crypto.randomUUID()}`
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer
     class="grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start"
   >
     <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>
+        </SectionTitle>
         <p class="text-muted-foreground max-w-xl text-base leading-relaxed">
           {description}
         </p>
@@ -58,36 +73,55 @@ const { class: className, title, description, contactItems, form } = Astro.props
         <div class="mb-6">
           <h3 class="text-lg font-medium">{form.title}</h3>
         </div>
-        <FieldSet>
-          <FieldLegend class="sr-only">{form.legend}</FieldLegend>
-          <FieldGroup>
-            <div class="grid gap-4 md:grid-cols-2">
-              <Field>
-                <FieldLabel for="contact-name-2">{form.nameLabel}</FieldLabel>
-                <Input id="contact-name-2" 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-2">{form.emailLabel}</FieldLabel>
-                <Input
-                  id="contact-email-2"
-                  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-2"
-                >{form.messageLabel}</FieldLabel
+              <Button type="submit" size="lg" class="w-full"
+                >{form.actionLabel}</Button
               >
-              <Textarea
-                id="contact-message-2"
-                rows={5}
-                placeholder={form.messagePlaceholder}
-              />
-            </Field>
-            <Button size="lg" class="w-full">{form.actionLabel}</Button>
-          </FieldGroup>
-        </FieldSet>
+            </FieldGroup>
+          </FieldSet>
+        </Form>
       </div>
     </div>
 
@@ -108,10 +142,11 @@ const { class: className, title, description, contactItems, form } = Astro.props
               </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>