fulldev-ui 0.7.0 → 0.9.0

package/public/r/hero-12.json

@@ -1,18 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-12",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-12.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n  SectionSpread,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  title?: string\n  description?: string\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  id,\n  title,\n  description,\n  links,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"gap-8 pt-8\", className)} id={id}>\n  <SectionContent class=\"border-y py-8\">\n    <SectionSpread class=\"@5xl:items-end\">\n      <SectionProse class=\"text-balance\" size=\"sm\">\n        {title && <h1>{title}</h1>}\n      </SectionProse>\n      <SectionProse class=\"text-muted-foreground text-balance\" size=\"sm\">\n        {description && <p>{description}</p>}\n      </SectionProse>\n      <SectionActions class=\"-my-2 -ml-3 flex-row flex-nowrap\">\n        {\n          links?.map(({ href, text, ...link }) => (\n            <Button variant=\"link\" href={href} {...link}>\n              {text}\n              {href && <Icon name=\"arrow-up-right\" />}\n            </Button>\n          ))\n        }\n      </SectionActions>\n    </SectionSpread>\n  </SectionContent>\n  <SectionMedia>\n    <Image sizes=\"(min-width: 1536px) 1536px, 100vw\" priority {...image} />\n  </SectionMedia>\n</Section>\n",
+      "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",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-13.json

@@ -1,18 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-13",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-13.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  id,\n  links,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"@5xl:pt-1\", className)} id={id}>\n  <SectionSplit class=\"@5xl:grid-cols-[1fr_3fr] @5xl:items-start\">\n    <SectionContent class=\"pt-(--section-py)\">\n      <SectionProse class=\"text-balance\" size=\"sm\">\n        <slot />\n      </SectionProse>\n      <SectionActions class=\"-my-2 -ml-3\">\n        {\n          links?.map(({ href, text, ...link }) => (\n            <Button variant=\"link\" href={href} {...link}>\n              {text}\n              {href && <Icon name=\"arrow-up-right\" />}\n            </Button>\n          ))\n        }\n      </SectionActions>\n    </SectionContent>\n    <SectionMedia class=\"relative z-100 -mr-5\">\n      <Image\n        sizes=\"(min-width: 1536px) 1152px, (min-width: 1024px) 75vw, 100vw\"\n        priority\n        {...image}\n      />\n    </SectionMedia>\n  </SectionSplit>\n</Section>\n",
+      "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",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-2.json

@@ -1,21 +1,18 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-2",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
     "@fulldev/rating",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-2.astro",
-      "content": "---\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n} from \"@/components/ui/item\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  item?: {\n    images?: {\n      src: string\n      alt: string\n    }[]\n    rating?: number\n    description?: string\n  }\n  links?: {\n    text?: string\n    href?: string\n    icon?: string\n    target?: string\n  }[]\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, item, links, image } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionContent class=\"items-center\">\n    <Item class=\"p-0\">\n      <ItemMedia class=\"-space-x-5\">\n        {\n          item?.images?.map((image) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage {...image} />\n            </Avatar>\n          ))\n        }\n      </ItemMedia>\n      <ItemContent class=\"mt-1\">\n        <Rating rating={item?.rating} />\n        <ItemDescription>\n          {item?.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n    <SectionProse class=\"text-center text-balance\" size=\"lg\">\n      <slot />\n    </SectionProse>\n    <SectionActions class=\"justify-center\">\n      {\n        links?.map(({ icon, text, ...link }, i) => (\n          <Button\n            variant={i === 0 ? \"default\" : \"secondary\"}\n            size=\"lg\"\n            {...link}\n          >\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n  </SectionContent>\n  <SectionMedia>\n    <Image sizes=\"(min-width: 1536px) 1536px, 100vw\" priority {...image} />\n  </SectionMedia>\n</Section>\n",
+      "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",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-3.json

@@ -1,18 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-3",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-3.astro",
-      "content": "---\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  links?: {\n    text?: string\n    href?: string\n    icon?: string\n    target?: string\n  }[]\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, links, image } = Astro.props\n---\n\n<Section class={className} id={id} size=\"lg\">\n  <SectionContent class=\"items-center\">\n    <SectionProse class=\"text-center text-balance\" size=\"lg\">\n      <slot />\n    </SectionProse>\n    <SectionActions class=\"justify-center\">\n      {\n        links?.map(({ icon, text, ...link }, i) => (\n          <Button\n            variant={i === 0 ? \"default\" : \"secondary\"}\n            size=\"lg\"\n            {...link}\n          >\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n  </SectionContent>\n  <SectionMedia class=\"absolute inset-0 rounded-none bg-white dark:bg-black\">\n    <Image\n      class=\"opacity-50\"\n      sizes=\"(min-width: 1536px) 1536px, 100vw\"\n      priority\n      {...image}\n    />\n  </SectionMedia>\n</Section>\n",
+      "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",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-4.json

@@ -1,18 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-4",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/section"
+    "@fulldev/section",
+    "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-4.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  links?: {\n    text?: string\n    href?: string\n    icon?: string\n    target?: string\n  }[]\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, links, image } = Astro.props\n---\n\n<Section\n  class={cn(\"justify-center py-[36cqw] @5xl:py-[18cqw]\", className)}\n  id={id}\n  size=\"lg\"\n>\n  <SectionContent class=\"items-center\">\n    <SectionProse class=\"text-center text-balance\" size=\"lg\">\n      <slot />\n    </SectionProse>\n    <SectionActions class=\"justify-center\">\n      {\n        links?.map(({ icon, text, ...link }, i) => (\n          <Button\n            variant={i === 0 ? \"default\" : \"secondary\"}\n            size=\"lg\"\n            {...link}\n          >\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n  </SectionContent>\n  <SectionMedia class=\"absolute inset-0 rounded-none bg-white dark:bg-black\">\n    <Image\n      class=\"opacity-50\"\n      sizes=\"(min-width: 1536px) 1536px, 100vw\"\n      priority\n      {...image}\n    />\n  </SectionMedia>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\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            <Icon name=\"check\" 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"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-5.json

@@ -1,22 +1,19 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-5",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/list",
     "@fulldev/rating",
-    "@fulldev/section"
+    "@fulldev/section",
+    "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-5.astro",
-      "content": "---\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n} from \"@/components/ui/item\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  list?: string[]\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  item?: {\n    images?: {\n      src: string\n      alt: string\n    }[]\n    rating?: number\n    description?: string\n  }\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, list, links, item, image } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionContent>\n    <SectionProse size=\"lg\">\n      <slot />\n    </SectionProse>\n    <List>\n      {\n        list?.map((item) => (\n          <ListItem>\n            <Icon name=\"check\" />\n            {item}\n          </ListItem>\n        ))\n      }\n    </List>\n    <SectionActions>\n      {\n        links?.map(({ icon, text, ...link }, i) => (\n          <Button\n            variant={i === 0 ? \"default\" : \"secondary\"}\n            size=\"lg\"\n            {...link}\n          >\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n    <Item class=\"p-0\">\n      <ItemMedia class=\"-space-x-5\">\n        {\n          item?.images?.map((image) => (\n            <Avatar class=\"ring-background size-11 ring\">\n              <AvatarImage {...image} />\n            </Avatar>\n          ))\n        }\n      </ItemMedia>\n      <ItemContent class=\"mt-1\">\n        <Rating rating={item?.rating} />\n        <ItemDescription>\n          {item?.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  </SectionContent>\n  <SectionMedia>\n    <Image sizes=\"(min-width: 1536px) 1536px, 100vw\" priority {...image} />\n  </SectionMedia>\n</Section>\n",
+      "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 { Icon } from \"@/components/ui/icon\"\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              <Icon name=\"check\" 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"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-6.json

@@ -1,22 +1,19 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-6",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/list",
     "@fulldev/rating",
-    "@fulldev/section"
+    "@fulldev/section",
+    "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-6.astro",
-      "content": "---\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n} from \"@/components/ui/item\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  list?: string[]\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  item?: {\n    images?: {\n      src: string\n      alt: string\n    }[]\n    rating?: number\n    description?: string\n  }\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, list, links, item, image } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionSplit class=\"@5xl:items-center\">\n    <SectionContent>\n      <SectionProse class=\"text-balance\" size=\"lg\">\n        <slot />\n      </SectionProse>\n      <List>\n        {\n          list?.map((item) => (\n            <ListItem>\n              <Icon name=\"check\" />\n              {item}\n            </ListItem>\n          ))\n        }\n      </List>\n      <SectionActions>\n        {\n          links?.map(({ icon, text, ...link }, i) => (\n            <Button\n              variant={i === 0 ? \"default\" : \"secondary\"}\n              size=\"lg\"\n              {...link}\n            >\n              {icon && <Icon name={icon} />}\n              {text}\n            </Button>\n          ))\n        }\n      </SectionActions>\n      <Item class=\"p-0\">\n        <ItemMedia class=\"-space-x-5\">\n          {\n            item?.images?.map((image) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage {...image} />\n              </Avatar>\n            ))\n          }\n        </ItemMedia>\n        <ItemContent class=\"mt-1\">\n          <Rating rating={item?.rating} />\n          <ItemDescription>\n            {item?.description}\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </SectionContent>\n    <SectionMedia>\n      <Image\n        sizes=\"(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw\"\n        priority\n        {...image}\n      />\n    </SectionMedia>\n  </SectionSplit>\n</Section>\n",
+      "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 { Icon } from \"@/components/ui/icon\"\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              <Icon name=\"check\" 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"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-7.json

@@ -1,22 +1,19 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-7",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/list",
     "@fulldev/rating",
-    "@fulldev/section"
+    "@fulldev/section",
+    "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-7.astro",
-      "content": "---\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n} from \"@/components/ui/item\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  list?: string[]\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  item?: {\n    images?: {\n      src: string\n      alt: string\n    }[]\n    rating?: number\n    description?: string\n  }\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, list, links, item, image } = Astro.props\n---\n\n<Section class={className} id={id} size=\"lg\">\n  <SectionSplit class=\"@5xl:grid-cols-[2fr_3fr] @5xl:items-center\">\n    <SectionContent>\n      <SectionProse class=\"text-balance\" size=\"lg\">\n        <slot />\n      </SectionProse>\n      <List>\n        {\n          list?.map((item) => (\n            <ListItem>\n              <Icon name=\"check\" />\n              {item}\n            </ListItem>\n          ))\n        }\n      </List>\n      <SectionActions>\n        {\n          links?.map(({ icon, text, ...link }, i) => (\n            <Button\n              variant={i === 0 ? \"default\" : \"secondary\"}\n              size=\"lg\"\n              {...link}\n            >\n              {icon && <Icon name={icon} />}\n              {text}\n            </Button>\n          ))\n        }\n      </SectionActions>\n      <Item class=\"p-0\">\n        <ItemMedia class=\"-space-x-5\">\n          {\n            item?.images?.map((image) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage {...image} />\n              </Avatar>\n            ))\n          }\n        </ItemMedia>\n        <ItemContent class=\"mt-1\">\n          <Rating rating={item?.rating} />\n          <ItemDescription>\n            {item?.description}\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </SectionContent>\n    <SectionMedia\n      class=\"-mr-(--section-px) rounded-r-none @5xl:-my-(--section-py)\"\n    >\n      <Image\n        sizes=\"(min-width: 1536px) 922px, (min-width: 1024px) 60vw, 100vw\"\n        priority\n        {...image}\n      />\n    </SectionMedia>\n  </SectionSplit>\n</Section>\n",
+      "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 { Icon } from \"@/components/ui/icon\"\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              <Icon name=\"check\" 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"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-8.json

@@ -1,18 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-8",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-8.astro",
-      "content": "---\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  list?: string[]\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  image?: {\n    src: string\n    alt: string\n  }\n  item?: {\n    images?: {\n      src: string\n      alt: string\n    }[]\n    rating?: number\n    description?: string\n  }\n}\n\nconst { class: className, id, links, image } = Astro.props\n---\n\n<Section class={className} id={id} size=\"lg\">\n  <SectionSplit class=\"@5xl:grid-cols-[1fr_3fr] @5xl:items-center\">\n    <SectionContent>\n      <SectionProse class=\"text-balance\" size=\"lg\">\n        <slot />\n      </SectionProse>\n      <SectionActions>\n        {\n          links?.map(({ icon, text, ...link }, i) => (\n            <Button\n              variant={i === 0 ? \"default\" : \"secondary\"}\n              size=\"lg\"\n              {...link}\n            >\n              {icon && <Icon name={icon} />}\n              {text}\n            </Button>\n          ))\n        }\n      </SectionActions>\n    </SectionContent>\n    <SectionMedia\n      class=\"-mr-(--section-px) rounded-r-none @5xl:-my-(--section-py)\"\n    >\n      <Image\n        sizes=\"(min-width: 1536px) 1152px, (min-width: 1024px) 75vw, 100vw\"\n        priority\n        {...image}\n      />\n    </SectionMedia>\n  </SectionSplit>\n</Section>\n",
+      "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",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hero-9.json

@@ -1,22 +1,19 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "hero-9",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/list",
     "@fulldev/rating",
-    "@fulldev/section"
+    "@fulldev/section",
+    "@fulldev/icon"
   ],
   "files": [
     {
       "path": "src/components/blocks/hero-9.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n} from \"@/components/ui/item\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Rating } from \"@/components/ui/rating\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  list?: string[]\n  links?: {\n    icon?: string\n    text?: string\n    href?: string\n    target?: string\n  }[]\n  item?: {\n    images?: {\n      src: string\n      alt: string\n      title?: string\n    }[]\n    rating?: number\n    description?: string\n  }\n  image?: {\n    src: string\n    alt: string\n    title?: string\n  }\n}\n\nconst { class: className, id, list, links, item, image } = Astro.props\n---\n\n<Section class={cn(\"-mt-(--header-height)\", className)} id={id}>\n  <SectionSplit>\n    <SectionContent class=\"relative z-10 pt-(--header-height) @5xl:self-center\">\n      <SectionProse size=\"lg\">\n        <slot />\n      </SectionProse>\n      <List>\n        {\n          list?.map((item) => (\n            <ListItem>\n              <Icon name=\"check\" />\n              {item}\n            </ListItem>\n          ))\n        }\n      </List>\n      <SectionActions>\n        {\n          links?.map(({ icon, text, ...link }, i) => (\n            <Button\n              variant={i === 0 ? \"default\" : \"secondary\"}\n              size=\"lg\"\n              {...link}\n            >\n              {icon && <Icon name={icon} />}\n              {text}\n            </Button>\n          ))\n        }\n      </SectionActions>\n      <Item class=\"p-0\">\n        <ItemMedia class=\"-space-x-5\">\n          {\n            item?.images?.map((image) => (\n              <Avatar class=\"ring-background size-11 ring\">\n                <AvatarImage {...image} />\n              </Avatar>\n            ))\n          }\n        </ItemMedia>\n        <ItemContent class=\"mt-1\">\n          <Rating rating={item?.rating} />\n          <ItemDescription>\n            {item?.description}\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </SectionContent>\n    <SectionMedia\n      class=\"-mx-(--section-px) -my-(--section-py) rounded-none @max-5xl:mask-y-from-50% @5xl:-ml-[25%] @5xl:mask-b-from-50% @5xl:mask-l-from-0%\"\n    >\n      <Image\n        sizes=\"(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw\"\n        priority\n        {...image}\n      />\n    </SectionMedia>\n  </SectionSplit>\n</Section>\n",
+      "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 { Icon } from \"@/components/ui/icon\"\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(\"dark bg-background\", className)}>\n  <SectionContainer class=\"grid gap-12 lg:grid-cols-2 lg:items-center\">\n    <div class=\"relative z-10 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-foreground/80 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              <Icon name=\"check\" 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  <div\n    class=\"bg-background pointer-events-none absolute inset-0 lg:mask-l-from-30%\"\n  >\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"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/hover-card.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hover-card",
+  "dependencies": [
+    "@data-slot/hover-card"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/hover-card/hover-card.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  delay?: number\n  skipDelayDuration?: number\n  closeDelay?: number\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n  portal?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  open,\n  delay = 300,\n  skipDelayDuration = 300,\n  closeDelay = 300,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  alignOffset = 4,\n  avoidCollisions = true,\n  collisionPadding = 8,\n  portal = true,\n  closeOnClickOutside = true,\n  closeOnEscape = true,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"hover-card\"\n  data-default-open={defaultOpen}\n  data-open={open}\n  data-delay={delay}\n  data-skip-delay-duration={skipDelayDuration}\n  data-close-delay={closeDelay}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  data-portal={portal}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/hover-card\"\n\n  create()\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/hover-card/hover-card-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  align?: \"start\" | \"center\" | \"end\"\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  hidden = true,\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 4,\n  alignOffset = 4,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"hover-card-portal\">\n  <div\n    data-slot=\"hover-card-positioner\"\n    data-side={side}\n    data-align={align}\n    data-side-offset={sideOffset}\n    data-align-offset={alignOffset}\n    data-avoid-collisions={avoidCollisions}\n    data-collision-padding={collisionPadding}\n    class=\"isolate z-50\"\n  >\n    <div\n      data-slot=\"hover-card-content\"\n      hidden={hidden}\n      class={cn(\n        \"bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-64 origin-(--transform-origin) rounded-lg p-4 text-sm shadow-md ring-1 outline-hidden duration-100\",\n        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/hover-card/hover-card-trigger.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> &\n  HTMLAttributes<\"div\"> &\n  HTMLAttributes<\"span\"> & {\n    as?: \"a\" | \"button\" | \"div\" | \"span\"\n    href?: string\n  }\n\nconst { as: explicitTag, class: className, type, ...props } = Astro.props\n\nconst Tag = explicitTag || (\"href\" in Astro.props ? \"a\" : \"button\")\n---\n\n<Tag\n  data-slot=\"hover-card-trigger\"\n  type={Tag === \"button\" ? type || \"button\" : undefined}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/hover-card/index.ts",
+      "content": "export { default as HoverCard } from \"./hover-card.astro\"\nexport { default as HoverCardContent } from \"./hover-card-content.astro\"\nexport { default as HoverCardTrigger } from \"./hover-card-trigger.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/icon.json

@@ -1,7 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "icon",
-  "type": "registry:ui",
   "dependencies": [
     "lucide-static",
     "simple-icons"
@@ -9,7 +8,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ninterface Props extends Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number\n}\n\nconst { name, href, ...rest } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\nconst icons = import.meta.glob([\n  \"node_modules/lucide-static/icons/*.svg\",\n  \"node_modules/simple-icons/icons/*.svg\",\n])\n\n// Get the right path from the icons glob\nconst foundPath = () => {\n  let foundPath: string | undefined = undefined\n  // For x.com, we use the simple-icons X instead of the lucide-static X, since they overlap\n  if (name === \"x.com\") {\n    foundPath = \"/node_modules/simple-icons/icons/x.svg\"\n  } else if (name) {\n    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))\n  } else if (href) {\n    const hrefKey =\n      Object.keys(hrefMap).find((key) => href.toString().includes(key)) || name\n    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]\n    const foundPath = Object.keys(icons)\n      // If href, reverse so that simple-icons takes precedence\n      .reverse()\n      .find((key) => key.includes(`/${hrefValue}.svg`))\n    return foundPath\n  }\n  // Else return the found path with lucide-icons taking precedence\n  return foundPath\n}\n\nconst foundModule = foundPath() && icons[foundPath() as keyof typeof icons]\nconst module = foundModule && ((await foundModule()) as any)\nconst Comp = module?.default\n---\n\n{\n  Comp && foundPath()?.includes(\"simple-icons\") && (\n    <Comp\n      height={24}\n      width={24}\n      fill=\"currentColor\"\n      class=\"size-[1em] text-base\"\n      {...rest}\n    />\n  )\n}\n\n{\n  Comp && foundPath()?.includes(\"lucide-static\") && (\n    <Comp height={24} width={24} class=\"size-[1em] text-base\" {...rest} />\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number | null\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\nconst icons = import.meta.glob(\n  [\n    \"/node_modules/lucide-static/icons/*.svg\",\n    \"/node_modules/simple-icons/icons/*.svg\",\n  ],\n  { eager: true }\n) as Record<string, { default: any }>\n\nconst foundPath = () => {\n  let foundPath: string | undefined = undefined\n\n  // For x.com, use the Simple Icons X instead of Lucide's X icon.\n  if (name === \"x.com\") {\n    foundPath = \"/node_modules/simple-icons/icons/x.svg\"\n  } else if (name) {\n    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))\n  } else if (href) {\n    const hrefKey = Object.keys(hrefMap).find((key) =>\n      href.toString().includes(key)\n    )\n    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]\n    foundPath = Object.keys(icons)\n      .reverse()\n      .find((key) => key.includes(`/${hrefValue}.svg`))\n  }\n\n  return foundPath\n}\n\nconst iconPath = foundPath()\nconst module = iconPath ? icons[iconPath] : undefined\nconst Comp = module?.default\n---\n\n{\n  Comp && foundPath()?.includes(\"simple-icons\") && (\n    <Comp\n      height={24}\n      width={24}\n      fill=\"currentColor\"\n      class=\"size-[1em] text-base\"\n      {...props}\n    />\n  )\n}\n\n{\n  Comp && foundPath()?.includes(\"lucide-static\") && (\n    <Comp height={24} width={24} class=\"size-[1em] text-base\" {...props} />\n  )\n}\n",
       "type": "registry:ui"
     },
     {
@@ -17,5 +16,6 @@
       "content": "export { default as Icon } from \"./icon.astro\"\n",
       "type": "registry:ui"
     }
-  ]
+  ],
+  "type": "registry:ui"
 }

package/public/r/init.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "init",
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib"
+    },
+    {
+      "path": "registry/init/global.css",
+      "content": "@import \"tailwindcss\";\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  --background: oklch(1 0 0);\n  --foreground: oklch(0.145 0 0);\n  --card: oklch(1 0 0);\n  --card-foreground: oklch(0.145 0 0);\n  --popover: oklch(1 0 0);\n  --popover-foreground: oklch(0.145 0 0);\n  --primary: oklch(0.5488 0.2498 261.783);\n  --primary-foreground: oklch(1 0 0);\n  --secondary: oklch(0.97 0 0);\n  --secondary-foreground: oklch(0.205 0 0);\n  --muted: oklch(0.97 0 0);\n  --muted-foreground: oklch(0.556 0 0);\n  --accent: oklch(0.97 0 0);\n  --accent-foreground: oklch(0.205 0 0);\n  --destructive: oklch(0.577 0.245 27.325);\n  --destructive-foreground: oklch(1 0 0);\n  --border: oklch(0.922 0 0);\n  --input: oklch(0.922 0 0);\n  --ring: oklch(0.708 0 0);\n  --chart-1: oklch(0.81 0.1 252);\n  --chart-2: oklch(0.62 0.19 260);\n  --chart-3: oklch(0.55 0.22 263);\n  --chart-4: oklch(0.49 0.22 264);\n  --chart-5: oklch(0.42 0.18 266);\n  --sidebar: oklch(0.985 0 0);\n  --sidebar-foreground: oklch(0.145 0 0);\n  --sidebar-primary: oklch(0.5488 0.2498 261.783);\n  --sidebar-primary-foreground: oklch(1 0 0);\n  --sidebar-accent: oklch(0.97 0 0);\n  --sidebar-accent-foreground: oklch(0.205 0 0);\n  --sidebar-border: oklch(0.922 0 0);\n  --sidebar-ring: oklch(0.708 0 0);\n  --radius: 0.625rem;\n  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n  --shadow-sm:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n  --shadow-md:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);\n  --shadow-lg:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);\n  --shadow-xl:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);\n  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);\n}\n\n.dark {\n  --background: oklch(0.145 0 0);\n  --foreground: oklch(0.985 0 0);\n  --card: oklch(0.205 0 0);\n  --card-foreground: oklch(0.985 0 0);\n  --popover: oklch(0.269 0 0);\n  --popover-foreground: oklch(0.985 0 0);\n  --primary: oklch(0.686 0.2105 41.139);\n  --primary-foreground: oklch(0.145 0 0);\n  --secondary: oklch(0.269 0 0);\n  --secondary-foreground: oklch(0.985 0 0);\n  --muted: oklch(0.269 0 0);\n  --muted-foreground: oklch(0.708 0 0);\n  --accent: oklch(0.371 0 0);\n  --accent-foreground: oklch(0.985 0 0);\n  --destructive: oklch(0.704 0.191 22.216);\n  --destructive-foreground: oklch(0.985 0 0);\n  --border: oklch(0.275 0 0);\n  --input: oklch(0.325 0 0);\n  --ring: oklch(0.556 0 0);\n  --chart-1: oklch(0.81 0.1 252);\n  --chart-2: oklch(0.62 0.19 260);\n  --chart-3: oklch(0.55 0.22 263);\n  --chart-4: oklch(0.49 0.22 264);\n  --chart-5: oklch(0.42 0.18 266);\n  --sidebar: oklch(0.205 0 0);\n  --sidebar-foreground: oklch(0.985 0 0);\n  --sidebar-primary: oklch(0.686 0.2105 41.139);\n  --sidebar-primary-foreground: oklch(0.145 0 0);\n  --sidebar-accent: oklch(0.269 0 0);\n  --sidebar-accent-foreground: oklch(0.985 0 0);\n  --sidebar-border: oklch(0.275 0 0);\n  --sidebar-ring: oklch(0.439 0 0);\n  --radius: 0.625rem;\n  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);\n  --shadow-sm:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);\n  --shadow-md:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);\n  --shadow-lg:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);\n  --shadow-xl:\n    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);\n  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n\n  --shadow-2xs: var(--shadow-2xs);\n  --shadow-xs: var(--shadow-xs);\n  --shadow-sm: var(--shadow-sm);\n  --shadow: var(--shadow);\n  --shadow-md: var(--shadow-md);\n  --shadow-lg: var(--shadow-lg);\n  --shadow-xl: var(--shadow-xl);\n  --shadow-2xl: var(--shadow-2xl);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n\n  html {\n    @apply font-sans;\n  }\n\n  body {\n    @apply bg-background text-foreground font-sans;\n  }\n}\n",
+      "type": "registry:style",
+      "target": "src/styles/global.css"
+    }
+  ],
+  "type": "registry:base"
+}

package/public/r/input-group.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input-group",
+  "registryDependencies": [
+    "@fulldev/button",
+    "@fulldev/dropdown-menu",
+    "@fulldev/input",
+    "@fulldev/textarea"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/input-group/input-group.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"input-group\"\n  role=\"group\"\n  class={cn(\n    \"group/input-group border-input has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-1.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-1.5 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  if (!document.documentElement.dataset.inputGroupBound) {\n    document.documentElement.dataset.inputGroupBound = \"true\"\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const addon = target.closest('[data-slot=\"input-group-addon\"]')\n      if (!(addon instanceof HTMLElement)) return\n\n      if (\n        target.closest(\n          \"a, button, input, textarea, select, option, summary, [role='button']\"\n        )\n      ) {\n        return\n      }\n\n      const group = addon.closest('[data-slot=\"input-group\"]')\n      const control = group?.querySelector('[data-slot=\"input-group-control\"]')\n\n      if (control instanceof HTMLElement) {\n        control.focus()\n      }\n    })\n  }\n</script>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/input-group/input-group-addon.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst variants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>a]:-ml-1 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>a]:-mr-1 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> & VariantProps<typeof variants>\n\nconst { class: className, align = \"inline-start\", ...props } = Astro.props\n---\n\n<div\n  role=\"group\"\n  data-slot=\"input-group-addon\"\n  data-align={align}\n  class={cn(variants({ align }), className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/input-group/input-group-button.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, type ButtonVariantProps } from \"@/components/ui/button\"\n\nconst variants = cva(\"flex items-center gap-2 text-sm shadow-none\", {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: \"\",\n      \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n      \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n    },\n  },\n  defaultVariants: {\n    size: \"xs\",\n  },\n})\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"button\"> &\n  HTMLAttributes<\"a\"> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n    variant?: ButtonVariantProps[\"variant\"]\n  }\n\nconst {\n  class: className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n} = Astro.props\n\nconst isLink = \"href\" in Astro.props\n---\n\n<Button\n  data-size={size}\n  type={isLink ? undefined : type}\n  variant={variant}\n  size={size}\n  class={cn(variants({ size }), className)}\n  {...props}\n>\n  <slot />\n</Button>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/input-group/input-group-input.astro",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Input } from \"@/components/ui/input\"\n\ntype Props = ComponentProps<typeof Input>\n\nconst {\n  class: className,\n  \"data-slot\": dataSlot = \"input-group-control\",\n  ...props\n} = Astro.props\n---\n\n<Input\n  data-slot={dataSlot}\n  class={cn(\n    \"h-full flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n    className\n  )}\n  {...props}\n/>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/input-group/input-group-text.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  data-slot=\"input-group-text\"\n  class={cn(\n    \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</span>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/input-group/input-group-textarea.astro",
+      "content": "---\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\ntype Props = ComponentProps<typeof Textarea>\n\nconst { class: className, ...props } = Astro.props\n---\n\n<Textarea\n  data-slot=\"input-group-control\"\n  class={cn(\n    \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n    className\n  )}\n  {...props}\n/>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/input-group/index.ts",
+      "content": "export { default as InputGroup } from \"./input-group.astro\"\nexport { default as InputGroupAddon } from \"./input-group-addon.astro\"\nexport { default as InputGroupButton } from \"./input-group-button.astro\"\nexport { default as InputGroupInput } from \"./input-group-input.astro\"\nexport { default as InputGroupText } from \"./input-group-text.astro\"\nexport { default as InputGroupTextarea } from \"./input-group-textarea.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}