fulldev-ui 0.10.0 → 0.11.0

package/public/r/header-4.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "header-4",
+  "title": "Header 4",
+  "description": "Header layouts for brand, navigation, and high-level page actions.",
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -12,9 +14,13 @@
   "files": [
     {
       "path": "src/components/blocks/header-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, logo, navigation, buttons } = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {\n          navigation.map((item, index) =>\n            item.links?.length ? (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                    <NavigationMenuLink\n                      href={item.href}\n                      active={item.active}\n                      class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                    >\n                      {item.image && (\n                        <Image\n                          src={item.image.src}\n                          alt={item.image.alt}\n                          class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                          widths={[320, 480, 640]}\n                          sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                        />\n                      )}\n                      <span class=\"text-base font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </NavigationMenuLink>\n                    <div class=\"grid gap-1\">\n                      {item.links.map((link) => (\n                        <NavigationMenuLink\n                          href={link.href}\n                          active={link.active}\n                          class=\"items-start gap-3 p-3\"\n                        >\n                          {link.icon && (\n                            <Icon\n                              name={link.icon}\n                              class=\"text-muted-foreground mt-0.5\"\n                            />\n                          )}\n                          <span class=\"grid gap-1\">\n                            <span class=\"font-medium\">{link.label}</span>\n                            {link.description && (\n                              <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                                {link.description}\n                              </span>\n                            )}\n                          </span>\n                        </NavigationMenuLink>\n                      ))}\n                    </div>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuLink\n                  href={item.href}\n                  active={item.active}\n                  class={navigationMenuTriggerStyle()}\n                >\n                  {item.label}\n                </NavigationMenuLink>\n              </NavigationMenuItem>\n            )\n          )\n        }\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {\n        buttons.map(({ label, icon, ...button }) => (\n          <Button\n            as=\"a\"\n            size={icon && !label ? \"icon-sm\" : \"sm\"}\n            aria-label={label}\n            target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n            rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n            {...button}\n          >\n            {icon && <Icon name={icon} />}\n            {label}\n          </Button>\n        ))\n      }\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label=\"Open menu\"\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Menu</SheetTitle>\n          <SheetDescription>Site navigation and actions.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label=\"Main navigation\" class=\"flex flex-col gap-4\">\n            {\n              navigation.map((item) => (\n                <div class=\"grid gap-1\">\n                  <SheetClose variant=\"ghost\" class=\"justify-start font-medium\">\n                    {item.label}\n                  </SheetClose>\n                  {item.links?.length && (\n                    <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                      {item.links.map((link) => (\n                        <SheetClose\n                          variant=\"ghost\"\n                          class=\"text-muted-foreground justify-start\"\n                        >\n                          {link.icon && <Icon name={link.icon} />}\n                          {link.label}\n                        </SheetClose>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              ))\n            }\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, logo, navigation, buttons, ...props } = Astro.props\n---\n\n<Header class={cn(\"border-b\", className)} {...props}>\n  <HeaderContainer class=\"justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <NavigationMenu\n      class=\"absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex\"\n      align=\"center\"\n    >\n      <NavigationMenuList>\n        {\n          navigation.map((item, index) =>\n            item.links?.length ? (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <div class=\"grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]\">\n                    <NavigationMenuLink\n                      href={item.href}\n                      active={item.active}\n                      class=\"bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left\"\n                    >\n                      {item.image && (\n                        <Image\n                          src={item.image.src}\n                          alt={item.image.alt}\n                          class=\"mb-auto aspect-[16/9] w-full rounded-md object-cover\"\n                          widths={[320, 480, 640]}\n                          sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                        />\n                      )}\n                      <span class=\"text-base font-medium\">{item.label}</span>\n                      {item.description && (\n                        <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                          {item.description}\n                        </span>\n                      )}\n                    </NavigationMenuLink>\n                    <div class=\"grid gap-1\">\n                      {item.links.map((link) => (\n                        <NavigationMenuLink\n                          href={link.href}\n                          active={link.active}\n                          class=\"items-start gap-3 p-3\"\n                        >\n                          {link.icon && (\n                            <Icon\n                              name={link.icon}\n                              class=\"text-muted-foreground mt-0.5\"\n                            />\n                          )}\n                          <span class=\"grid gap-1\">\n                            <span class=\"font-medium\">{link.label}</span>\n                            {link.description && (\n                              <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                                {link.description}\n                              </span>\n                            )}\n                          </span>\n                        </NavigationMenuLink>\n                      ))}\n                    </div>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuLink\n                  href={item.href}\n                  active={item.active}\n                  class={navigationMenuTriggerStyle()}\n                >\n                  {item.label}\n                </NavigationMenuLink>\n              </NavigationMenuItem>\n            )\n          )\n        }\n      </NavigationMenuList>\n    </NavigationMenu>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {\n        buttons.map(({ label, icon, ...button }) => (\n          <Button\n            as=\"a\"\n            size={icon && !label ? \"icon-sm\" : \"sm\"}\n            aria-label={label}\n            target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n            rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n            {...button}\n          >\n            {icon && <Icon name={icon} />}\n            {label}\n          </Button>\n        ))\n      }\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label=\"Open menu\"\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Menu</SheetTitle>\n          <SheetDescription>Site navigation and actions.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label=\"Main navigation\" class=\"flex flex-col gap-4\">\n            {\n              navigation.map((item) => (\n                <div class=\"grid gap-1\">\n                  <SheetClose\n                    as=\"a\"\n                    href={item.href}\n                    variant=\"ghost\"\n                    class=\"justify-start font-medium\"\n                  >\n                    {item.label}\n                  </SheetClose>\n                  {item.links?.length && (\n                    <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                      {item.links.map((link) => (\n                        <SheetClose\n                          as=\"a\"\n                          href={link.href}\n                          variant=\"ghost\"\n                          class=\"text-muted-foreground justify-start\"\n                        >\n                          {link.icon && <Icon name={link.icon} />}\n                          {link.label}\n                        </SheetClose>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              ))\n            }\n          </nav>\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/header/",
+  "categories": [
+    "header"
+  ],
   "type": "registry:block"
 }

package/public/r/header-5.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "header-5",
+  "title": "Header 5",
+  "description": "Header layouts for brand, navigation, and high-level page actions.",
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/header",
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/header-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = {\n  class?: string\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, logo, navigation, buttons } = Astro.props\n---\n\n<Header class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {\n        buttons.map(({ label, icon, ...button }) => (\n          <Button\n            as=\"a\"\n            size={icon && !label ? \"icon-sm\" : \"sm\"}\n            aria-label={label}\n            target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n            rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n            {...button}\n          >\n            {icon && <Icon name={icon} />}\n            {label}\n          </Button>\n        ))\n      }\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label=\"Open menu\"\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Menu</SheetTitle>\n          <SheetDescription>Site navigation and actions.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label=\"Main navigation\" class=\"flex flex-col gap-4\">\n            {\n              navigation.map((item) => (\n                <div class=\"grid gap-1\">\n                  <SheetClose variant=\"ghost\" class=\"justify-start font-medium\">\n                    {item.label}\n                  </SheetClose>\n                  {item.links?.length && (\n                    <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                      {item.links.map((link) => (\n                        <SheetClose\n                          variant=\"ghost\"\n                          class=\"text-muted-foreground justify-start\"\n                        >\n                          {link.icon && <Icon name={link.icon} />}\n                          {link.label}\n                        </SheetClose>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              ))\n            }\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu class=\"max-w-none justify-start\" align=\"start\">\n      <NavigationMenuList class=\"justify-start\">\n        {\n          navigation.map((item, index) =>\n            item.links?.length ? (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                    <NavigationMenuLink\n                      href={item.href}\n                      active={item.active}\n                      class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                    >\n                      {item.image && (\n                        <Image\n                          src={item.image.src}\n                          alt={item.image.alt}\n                          class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                          widths={[320, 480, 640]}\n                          sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                        />\n                      )}\n                      <span class=\"grid gap-1\">\n                        <span class=\"font-medium\">{item.label}</span>\n                        {item.description && (\n                          <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                    </NavigationMenuLink>\n                    <div class=\"grid gap-1 lg:grid-cols-2\">\n                      {item.links.map((link) => (\n                        <NavigationMenuLink\n                          href={link.href}\n                          active={link.active}\n                          class=\"items-start gap-3 p-3\"\n                        >\n                          {link.icon && (\n                            <Icon\n                              name={link.icon}\n                              class=\"text-muted-foreground mt-0.5\"\n                            />\n                          )}\n                          <span class=\"grid gap-1\">\n                            <span class=\"font-medium\">{link.label}</span>\n                            {link.description && (\n                              <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                                {link.description}\n                              </span>\n                            )}\n                          </span>\n                        </NavigationMenuLink>\n                      ))}\n                    </div>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuLink\n                  href={item.href}\n                  active={item.active}\n                  class={navigationMenuTriggerStyle()}\n                >\n                  {item.label}\n                </NavigationMenuLink>\n              </NavigationMenuItem>\n            )\n          )\n        }\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: any\n    srcLight?: any\n    srcDark?: any\n    alt?: string\n  }\n  navigation: {\n    label: string\n    href: string\n    description?: string\n    active?: boolean\n    image?: {\n      src: ImageMetadata\n      alt: string\n    }\n    links?: {\n      label: string\n      href: string\n      description?: string\n      icon?: string\n      active?: boolean\n    }[]\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, logo, navigation, buttons, ...props } = Astro.props\n---\n\n<Header\n  class={cn(\"flex-col items-stretch gap-0 border-b py-0\", className)}\n  {...props}\n>\n  <HeaderContainer class=\"min-h-14 justify-between\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt={logo.alt}\n        />\n        {logo.label && <LogoText>{logo.label}</LogoText>}\n      </Logo>\n    </HeaderGroup>\n    <HeaderGroup class=\"ml-auto hidden justify-end lg:flex\">\n      <slot />\n      {\n        buttons.map(({ label, icon, ...button }) => (\n          <Button\n            as=\"a\"\n            size={icon && !label ? \"icon-sm\" : \"sm\"}\n            aria-label={label}\n            target={button.href.startsWith(\"http\") ? \"_blank\" : undefined}\n            rel={button.href.startsWith(\"http\") ? \"noreferrer\" : undefined}\n            {...button}\n          >\n            {icon && <Icon name={icon} />}\n            {label}\n          </Button>\n        ))\n      }\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label=\"Open menu\"\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>Menu</SheetTitle>\n          <SheetDescription>Site navigation and actions.</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 overflow-y-auto px-4 py-12\">\n          <nav aria-label=\"Main navigation\" class=\"flex flex-col gap-4\">\n            {\n              navigation.map((item) => (\n                <div class=\"grid gap-1\">\n                  <SheetClose\n                    as=\"a\"\n                    href={item.href}\n                    variant=\"ghost\"\n                    class=\"justify-start font-medium\"\n                  >\n                    {item.label}\n                  </SheetClose>\n                  {item.links?.length && (\n                    <div class=\"border-border ml-3 grid gap-1 border-l pl-3\">\n                      {item.links.map((link) => (\n                        <SheetClose\n                          as=\"a\"\n                          href={link.href}\n                          variant=\"ghost\"\n                          class=\"text-muted-foreground justify-start\"\n                        >\n                          {link.icon && <Icon name={link.icon} />}\n                          {link.label}\n                        </SheetClose>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              ))\n            }\n          </nav>\n          <Separator />\n          <div class=\"mt-auto flex flex-col gap-2\">\n            <slot name=\"mobile\" />\n          </div>\n        </div>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n  <Separator class=\"hidden lg:block\" />\n  <HeaderContainer class=\"hidden min-h-11 lg:flex\">\n    <NavigationMenu class=\"max-w-none justify-start\" align=\"start\">\n      <NavigationMenuList class=\"justify-start\">\n        {\n          navigation.map((item, index) =>\n            item.links?.length ? (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <div class=\"grid w-[min(52rem,calc(100vw-2rem))] gap-2 p-2 lg:grid-cols-[1fr_1.2fr]\">\n                    <NavigationMenuLink\n                      href={item.href}\n                      active={item.active}\n                      class=\"bg-muted/50 hover:bg-muted focus:bg-muted items-start gap-3 p-3\"\n                    >\n                      {item.image && (\n                        <Image\n                          src={item.image.src}\n                          alt={item.image.alt}\n                          class=\"aspect-[16/9] w-full rounded-md object-cover\"\n                          widths={[320, 480, 640]}\n                          sizes=\"(min-width: 1024px) 22rem, 100vw\"\n                        />\n                      )}\n                      <span class=\"grid gap-1\">\n                        <span class=\"font-medium\">{item.label}</span>\n                        {item.description && (\n                          <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                            {item.description}\n                          </span>\n                        )}\n                      </span>\n                    </NavigationMenuLink>\n                    <div class=\"grid gap-1 lg:grid-cols-2\">\n                      {item.links.map((link) => (\n                        <NavigationMenuLink\n                          href={link.href}\n                          active={link.active}\n                          class=\"items-start gap-3 p-3\"\n                        >\n                          {link.icon && (\n                            <Icon\n                              name={link.icon}\n                              class=\"text-muted-foreground mt-0.5\"\n                            />\n                          )}\n                          <span class=\"grid gap-1\">\n                            <span class=\"font-medium\">{link.label}</span>\n                            {link.description && (\n                              <span class=\"text-muted-foreground text-sm leading-relaxed\">\n                                {link.description}\n                              </span>\n                            )}\n                          </span>\n                        </NavigationMenuLink>\n                      ))}\n                    </div>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ) : (\n              <NavigationMenuItem value={`nav-${index}`}>\n                <NavigationMenuLink\n                  href={item.href}\n                  active={item.active}\n                  class={navigationMenuTriggerStyle()}\n                >\n                  {item.label}\n                </NavigationMenuLink>\n              </NavigationMenuItem>\n            )\n          )\n        }\n      </NavigationMenuList>\n    </NavigationMenu>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/header/",
+  "categories": [
+    "header"
+  ],
   "type": "registry:block"
 }

package/public/r/header.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "header",
+  "title": "Header",
+  "description": "A responsive site header with grouped content.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -30,5 +32,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/header/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/hero-1.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-1",
+  "title": "Hero 1",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/badge",
     "@fulldev/button",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {\n      badge && (\n        <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n          {badge.label}\n        </Badge>\n      )\n    }\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  badge?: {\n    label: string\n    href: string\n  }\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  badge,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    {\n      badge && (\n        <Badge as=\"a\" href={badge.href} variant=\"secondary\">\n          {badge.label}\n        </Badge>\n      )\n    }\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">\n      {description}\n    </SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-10.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-10",
+  "title": "Hero 10",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
@@ -10,9 +12,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-10.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"dark bg-background min-h-screen justify-start\", className)}>\n  <SectionContainer\n    class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\"\n  >\n    <div class=\"flex flex-col gap-5\">\n      <h1\n        class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n      >\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              class=\"w-full\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div\n    class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\"\n  >\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-start\", className)}\n  {...props}\n>\n  <SectionContainer\n    class=\"relative z-10 grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center\"\n  >\n    <div class=\"flex flex-col gap-5\">\n      <h1\n        class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n      >\n        {title}\n      </h1>\n      <p class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed\">\n        {description}\n      </p>\n    </div>\n    <div class=\"flex shrink-0 flex-col gap-5\">\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              class=\"w-full\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n  <div\n    class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\"\n  >\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-11.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-11",
+  "title": "Hero 11",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
@@ -10,9 +12,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-11.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {\n          socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))\n        }\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div\n    class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\"\n  >\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-3xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n    <div class=\"flex items-center gap-3\">\n      <AvatarGroup>\n        {\n          socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))\n        }\n      </AvatarGroup>\n      <div class=\"flex flex-col gap-0.5\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n      </div>\n    </div>\n  </SectionContainer>\n  <div\n    class=\"bg-background pointer-events-none absolute inset-0 mask-y-from-0% mask-y-to-100%\"\n  >\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-75\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-12.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-12",
+  "title": "Hero 12",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/section"
@@ -8,9 +10,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst { class: className, title, description, buttons, image } = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)}>\n  <SectionContainer class=\"border-y py-8\">\n    <div\n      class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\"\n    >\n      <h1\n        class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\"\n      >\n        {title}\n      </h1>\n      <p\n        class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\"\n      >\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} {...props}>\n  <SectionContainer class=\"border-y py-8\">\n    <div\n      class=\"flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between\"\n    >\n      <h1\n        class=\"text-foreground max-w-xl text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\"\n      >\n        {title}\n      </h1>\n      <p\n        class=\"text-muted-foreground max-w-md text-base leading-relaxed text-balance\"\n      >\n        {description}\n      </p>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-13.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-13",
+  "title": "Hero 13",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/section"
@@ -8,9 +10,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst { class: className, title, description, buttons, image } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-start\">\n    <div class=\"flex flex-col gap-6 pt-8\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-2xl leading-[1.2] font-semibold tracking-tight text-balance sm:text-3xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-base leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-2.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-2",
+  "title": "Hero 2",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
@@ -10,9 +12,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {\n          socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))\n        }\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionContainer,\n  SectionDescription,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"items-center gap-8 text-center\">\n    <div class=\"flex flex-col items-center gap-3\">\n      <AvatarGroup>\n        {\n          socialProof.avatars.map((avatar) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage\n                src={avatar.image}\n                alt={avatar.name ?? avatar.initials}\n              />\n              <AvatarFallback>{avatar.initials}</AvatarFallback>\n            </Avatar>\n          ))\n        }\n      </AvatarGroup>\n      <div class=\"flex items-center gap-2\">\n        <Rating value={socialProof.rating} />\n        <span class=\"text-muted-foreground text-sm\">{socialProof.text}</span>\n      </div>\n    </div>\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <SectionDescription class=\"max-w-2xl\">\n      {description}\n    </SectionDescription>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <SectionContainer>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-video w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280, 1536]}\n      sizes=\"(min-width: 80rem) 80rem, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-3.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-3",
+  "title": "Hero 3",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/section"
@@ -8,9 +10,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst { class: className, title, description, buttons, image } = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-[80vh] justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-4.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-4",
+  "title": "Hero 4",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -11,9 +13,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {\n        features.map((feature) => (\n          <li class=\"flex items-center gap-2 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))\n      }\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section\n  class={cn(\"dark bg-background min-h-screen justify-center\", className)}\n  {...props}\n>\n  <SectionContainer class=\"relative z-10 items-center gap-8 text-center\">\n    <h1\n      class=\"text-foreground max-w-4xl text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl\"\n    >\n      {title}\n    </h1>\n    <p\n      class=\"text-foreground/80 max-w-2xl text-lg leading-relaxed text-balance\"\n    >\n      {description}\n    </p>\n    <ul class=\"flex flex-wrap justify-center gap-x-6 gap-y-2\">\n      {\n        features.map((feature) => (\n          <li class=\"flex items-center gap-2 text-sm\">\n            <CheckIcon class=\"text-primary size-4 shrink-0\" />\n            {feature}\n          </li>\n        ))\n      }\n    </ul>\n    <div class=\"flex flex-wrap justify-center gap-3\">\n      {\n        buttons.map(({ href, label, ...button }, index) => (\n          <Button\n            as=\"a\"\n            href={href}\n            size=\"lg\"\n            variant={button.variant ?? (index === 0 ? \"default\" : \"secondary\")}\n            {...button}\n          >\n            {label}\n          </Button>\n        ))\n      }\n    </div>\n  </SectionContainer>\n  <div class=\"bg-background pointer-events-none absolute inset-0\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"size-full object-cover opacity-50\"\n      widths={[640, 960, 1280, 1920]}\n      sizes=\"100vw\"\n      loading=\"eager\"\n    />\n  </div>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-5.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-5",
+  "title": "Hero 5",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {\n          features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))\n        }\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {\n          features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))\n        }\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-6.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-6",
+  "title": "Hero 6",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {\n          features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))\n        }\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 50vw, 100vw\"\n      loading=\"eager\"\n    />\n    <div class=\"flex flex-col gap-6\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {\n          features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))\n        }\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-7.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-7",
+  "title": "Hero 7",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -13,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer\n    class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\"\n  >\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {\n          features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))\n        }\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport { CheckIcon } from \"@lucide/astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Rating } from \"@/components/ui/rating\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  features: string[]\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  socialProof: {\n    avatars: {\n      image?: ImageMetadata\n      initials: string\n      name?: string\n    }[]\n    rating: number\n    text: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  features,\n  buttons,\n  socialProof,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer\n    class=\"grid gap-12 lg:grid-cols-[2fr_3fr] lg:items-center lg:gap-0\"\n  >\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <ul class=\"flex flex-col gap-3\">\n        {\n          features.map((feature) => (\n            <li class=\"flex items-center gap-3 text-sm\">\n              <CheckIcon class=\"text-primary size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))\n        }\n      </ul>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <AvatarGroup>\n          {\n            socialProof.avatars.map((avatar) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage\n                  src={avatar.image}\n                  alt={avatar.name ?? avatar.initials}\n                />\n                <AvatarFallback>{avatar.initials}</AvatarFallback>\n              </Avatar>\n            ))\n          }\n        </AvatarGroup>\n        <div class=\"flex flex-col gap-0.5\">\n          <Rating value={socialProof.rating} />\n          <span class=\"text-muted-foreground text-xs\">{socialProof.text}</span>\n        </div>\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 60vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }

package/public/r/hero-8.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-8",
+  "title": "Hero 8",
+  "description": "Hero sections for launches, product storytelling, editorial pages, and social proof.",
   "registryDependencies": [
     "@fulldev/button",
     "@fulldev/section"
@@ -8,9 +10,13 @@
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst { class: className, title, description, buttons, image } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer\n    class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\"\n  >\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  title: string\n  description: string\n  buttons: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  buttons,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer\n    class=\"grid gap-12 lg:grid-cols-[1fr_3fr] lg:items-center lg:gap-0\"\n  >\n    <div class=\"flex flex-col gap-6 lg:pr-12\">\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-foreground text-4xl leading-[1.1] font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-relaxed\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex flex-wrap gap-3\">\n        {\n          buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"lg\"\n              variant={\n                button.variant ?? (index === 0 ? \"default\" : \"secondary\")\n              }\n              {...button}\n            >\n              {label}\n            </Button>\n          ))\n        }\n      </div>\n    </div>\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[4/3] w-full rounded-xl border object-cover\"\n      widths={[640, 960, 1280]}\n      sizes=\"(min-width: 1024px) 75vw, 100vw\"\n      loading=\"eager\"\n    />\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/hero/",
+  "categories": [
+    "hero"
+  ],
   "type": "registry:block"
 }