fulldev-ui 0.10.1 → 0.11.0

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

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import Discord from "simple-icons-astro/Discord"
 import Github from "simple-icons-astro/Github"
 import X from "simple-icons-astro/X"
@@ -8,8 +9,7 @@ import { Logo, LogoText } from "@/components/ui/logo"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"footer"> & {
   brandName: string
   brandHref: string
   description: string
@@ -33,6 +33,7 @@ const {
   links,
   socials,
   copyright,
+  ...props
 } = Astro.props
 
 const iconMap: Record<string, any> = {
@@ -42,7 +43,7 @@ const iconMap: Record<string, any> = {
 }
 ---
 
-<footer class={cn("", className)}>
+<footer class={cn("", className)} {...props}>
   <Section class="py-12 lg:py-16">
     <SectionContainer class="items-center text-center">
       <Logo href={brandHref}>

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

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import Discord from "simple-icons-astro/Discord"
 import Github from "simple-icons-astro/Github"
 import X from "simple-icons-astro/X"
@@ -8,8 +9,7 @@ import { Logo, LogoText } from "@/components/ui/logo"
 import { Section, SectionContainer } from "@/components/ui/section"
 import { Separator } from "@/components/ui/separator"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"footer"> & {
   brandName: string
   brandHref: string
   description: string
@@ -41,6 +41,7 @@ const {
   columns,
   copyright,
   bottomLinks,
+  ...props
 } = Astro.props
 
 const iconMap: Record<string, any> = {
@@ -50,7 +51,7 @@ const iconMap: Record<string, any> = {
 }
 ---
 
-<footer class={cn("", className)}>
+<footer class={cn("", className)} {...props}>
   <Section class="py-16 lg:py-20">
     <SectionContainer>
       <div class="grid gap-10 lg:grid-cols-[1fr_2fr]">

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

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
@@ -20,8 +22,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
@@ -46,11 +47,11 @@ type Props = {
   }[]
 }
 
-const { class: className, logo, navigation, buttons } = Astro.props
+const { class: className, logo, navigation, buttons, ...props } = Astro.props
 ---
 
-<Header class={cn("", className)}>
-  <HeaderContainer class="justify-between gap-4">
+<Header class={cn("", className)} {...props}>
+  <HeaderContainer class="items-center justify-between gap-4">
     <HeaderGroup>
       <Logo href={logo.href}>
         <LogoImage
@@ -111,14 +112,19 @@ const { class: className, logo, navigation, buttons } = Astro.props
           <nav aria-label="Main navigation" class="flex flex-col gap-1">
             {
               navigation.map((item) => (
-                <SheetClose variant="ghost" class="justify-start">
+                <SheetClose
+                  as="a"
+                  href={item.href}
+                  variant="ghost"
+                  class="justify-start"
+                >
                   {item.label}
                 </SheetClose>
               ))
             }
           </nav>
           <div class="mt-auto flex flex-col gap-2">
-            <slot />
+            <slot name="mobile" />
           </div>
         </div>
       </SheetContent>

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

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
@@ -20,8 +22,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
@@ -46,10 +47,10 @@ type Props = {
   }[]
 }
 
-const { class: className, logo, navigation, buttons } = Astro.props
+const { class: className, logo, navigation, buttons, ...props } = Astro.props
 ---
 
-<Header variant="floating" class={cn("", className)}>
+<Header variant="floating" class={cn("", className)} {...props}>
   <HeaderContainer class="justify-between">
     <HeaderGroup>
       <Logo href={logo.href}>
@@ -113,14 +114,19 @@ const { class: className, logo, navigation, buttons } = Astro.props
           <nav aria-label="Main navigation" class="flex flex-col gap-1">
             {
               navigation.map((item) => (
-                <SheetClose variant="ghost" class="justify-start">
+                <SheetClose
+                  as="a"
+                  href={item.href}
+                  variant="ghost"
+                  class="justify-start"
+                >
                   {item.label}
                 </SheetClose>
               ))
             }
           </nav>
           <div class="mt-auto flex flex-col gap-2">
-            <slot />
+            <slot name="mobile" />
           </div>
         </div>
       </SheetContent>

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

@@ -1,4 +1,6 @@
 ---
+import type { HTMLAttributes } from "astro/types"
+
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
@@ -21,8 +23,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
@@ -47,10 +48,10 @@ type Props = {
   }[]
 }
 
-const { class: className, logo, navigation, buttons } = Astro.props
+const { class: className, logo, navigation, buttons, ...props } = Astro.props
 ---
 
-<Header class={cn("border-b", className)}>
+<Header class={cn("border-b", className)} {...props}>
   <HeaderContainer class="justify-between">
     <HeaderGroup>
       <Logo href={logo.href}>
@@ -116,7 +117,12 @@ const { class: className, logo, navigation, buttons } = Astro.props
           <nav aria-label="Main navigation" class="flex flex-col gap-1">
             {
               navigation.map((item) => (
-                <SheetClose variant="ghost" class="justify-start">
+                <SheetClose
+                  as="a"
+                  href={item.href}
+                  variant="ghost"
+                  class="justify-start"
+                >
                   {item.label}
                 </SheetClose>
               ))
@@ -124,7 +130,7 @@ const { class: className, logo, navigation, buttons } = Astro.props
           </nav>
           <Separator />
           <div class="mt-auto flex flex-col gap-2">
-            <slot />
+            <slot name="mobile" />
           </div>
         </div>
       </SheetContent>

package/src/components/blocks/header-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"
@@ -26,8 +27,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
@@ -61,10 +61,10 @@ type Props = {
   }[]
 }
 
-const { class: className, logo, navigation, buttons } = Astro.props
+const { class: className, logo, navigation, buttons, ...props } = Astro.props
 ---
 
-<Header class={cn("border-b", className)}>
+<Header class={cn("border-b", className)} {...props}>
   <HeaderContainer class="justify-between">
     <HeaderGroup>
       <Logo href={logo.href}>
@@ -189,13 +189,20 @@ const { class: className, logo, navigation, buttons } = Astro.props
             {
               navigation.map((item) => (
                 <div class="grid gap-1">
-                  <SheetClose variant="ghost" class="justify-start font-medium">
+                  <SheetClose
+                    as="a"
+                    href={item.href}
+                    variant="ghost"
+                    class="justify-start font-medium"
+                  >
                     {item.label}
                   </SheetClose>
                   {item.links?.length && (
                     <div class="border-border ml-3 grid gap-1 border-l pl-3">
                       {item.links.map((link) => (
                         <SheetClose
+                          as="a"
+                          href={link.href}
                           variant="ghost"
                           class="text-muted-foreground justify-start"
                         >
@@ -210,7 +217,7 @@ const { class: className, logo, navigation, buttons } = Astro.props
             }
           </nav>
           <div class="mt-auto flex flex-col gap-2">
-            <slot />
+            <slot name="mobile" />
           </div>
         </div>
       </SheetContent>

package/src/components/blocks/header-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 { Button } from "@/components/ui/button"
@@ -27,8 +28,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"header"> & {
   logo: {
     label: string
     href: string
@@ -62,10 +62,13 @@ type Props = {
   }[]
 }
 
-const { class: className, logo, navigation, buttons } = Astro.props
+const { class: className, logo, navigation, buttons, ...props } = Astro.props
 ---
 
-<Header class={cn("flex-col items-stretch gap-0 border-b py-0", className)}>
+<Header
+  class={cn("flex-col items-stretch gap-0 border-b py-0", className)}
+  {...props}
+>
   <HeaderContainer class="min-h-14 justify-between">
     <HeaderGroup>
       <Logo href={logo.href}>
@@ -115,13 +118,20 @@ const { class: className, logo, navigation, buttons } = Astro.props
             {
               navigation.map((item) => (
                 <div class="grid gap-1">
-                  <SheetClose variant="ghost" class="justify-start font-medium">
+                  <SheetClose
+                    as="a"
+                    href={item.href}
+                    variant="ghost"
+                    class="justify-start font-medium"
+                  >
                     {item.label}
                   </SheetClose>
                   {item.links?.length && (
                     <div class="border-border ml-3 grid gap-1 border-l pl-3">
                       {item.links.map((link) => (
                         <SheetClose
+                          as="a"
+                          href={link.href}
                           variant="ghost"
                           class="text-muted-foreground justify-start"
                         >
@@ -137,7 +147,7 @@ const { class: className, logo, navigation, buttons } = Astro.props
           </nav>
           <Separator />
           <div class="mt-auto flex flex-col gap-2">
-            <slot />
+            <slot name="mobile" />
           </div>
         </div>
       </SheetContent>

package/src/components/blocks/hero-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 { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Section, SectionContainer } from "@/components/ui/section"
+import {
+  Section,
+  SectionContainer,
+  SectionDescription,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   badge?: {
@@ -33,10 +37,11 @@ const {
   badge,
   buttons,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-8 text-center">
     {
       badge && (
@@ -50,11 +55,9 @@ const {
     >
       {title}
     </h1>
-    <p
-      class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
-    >
+    <SectionDescription class="max-w-2xl">
       {description}
-    </p>
+    </SectionDescription>
     <div class="flex flex-wrap justify-center gap-3">
       {
         buttons.map(({ href, label, ...button }, index) => (

package/src/components/blocks/hero-10.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 {
@@ -13,8 +14,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
   buttons: {
@@ -44,10 +44,14 @@ const {
   buttons,
   socialProof,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("dark bg-background min-h-screen justify-start", className)}>
+<Section
+  class={cn("dark bg-background min-h-screen justify-start", className)}
+  {...props}
+>
   <SectionContainer
     class="relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
   >

package/src/components/blocks/hero-11.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 {
@@ -13,8 +14,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
   buttons: {
@@ -44,11 +44,13 @@ const {
   buttons,
   socialProof,
   image,
+  ...props
 } = Astro.props
 ---
 
 <Section
   class={cn("dark bg-background min-h-screen justify-center", className)}
+  {...props}
 >
   <SectionContainer class="relative z-10 items-center gap-8 text-center">
     <h1

package/src/components/blocks/hero-12.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("gap-8 pt-8", className)}>
+<Section class={cn("gap-8 pt-8", className)} {...props}>
   <SectionContainer class="border-y py-8">
     <div
       class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"

package/src/components/blocks/hero-13.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-start">
     <div class="flex flex-col gap-6 pt-8">
       <div class="flex flex-col gap-4">

package/src/components/blocks/hero-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,10 +12,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,
+  SectionDescription,
+} from "@/components/ui/section"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   buttons: {
@@ -44,10 +48,11 @@ const {
   buttons,
   socialProof,
   image,
+  ...props
 } = Astro.props
 ---
 
-<Section class={cn("", className)}>
+<Section class={cn("", className)} {...props}>
   <SectionContainer class="items-center gap-8 text-center">
     <div class="flex flex-col items-center gap-3">
       <AvatarGroup>
@@ -73,11 +78,9 @@ const {
     >
       {title}
     </h1>
-    <p
-      class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
-    >
+    <SectionDescription class="max-w-2xl">
       {description}
-    </p>
+    </SectionDescription>
     <div class="flex flex-wrap justify-center gap-3">
       {
         buttons.map(({ href, label, ...button }, index) => (

package/src/components/blocks/hero-3.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,11 +21,19 @@ type Props = {
   }
 }
 
-const { class: className, title, description, buttons, image } = Astro.props
+const {
+  class: className,
+  title,
+  description,
+  buttons,
+  image,
+  ...props
+} = Astro.props
 ---
 
 <Section
   class={cn("dark bg-background min-h-[80vh] justify-center", className)}
+  {...props}
 >
   <SectionContainer class="relative z-10 items-center gap-8 text-center">
     <h1

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

@@ -1,14 +1,14 @@
 ---
 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"
 
-type Props = {
-  class?: string
+type Props = HTMLAttributes<"section"> & {
   title: string
   description: string
   features: string[]
@@ -30,11 +30,13 @@ const {
   features,
   buttons,
   image,
+  ...props
 } = Astro.props
 ---
 
 <Section
   class={cn("dark bg-background min-h-screen justify-center", className)}
+  {...props}
 >
   <SectionContainer class="relative z-10 items-center gap-8 text-center">
     <h1

package/src/components/blocks/hero-5.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">
     <div class="flex flex-col gap-6">
       <div class="flex flex-col gap-4">