fulldev-ui 0.7.0 → 0.9.0

package/public/r/article-1.json

@@ -1,18 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "article-1",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/image",
-    "@fulldev/item",
+    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport {\n  Section,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  title?: string\n  description?: string\n  item?: {\n    image?: {\n      src: string\n      alt: string\n    }\n    title?: string\n    description?: string\n  }\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, title, description, image, item } = Astro.props\n---\n\n<Section class={className} id={id} style={{ \"--container\": \"672px\" }}>\n  <SectionContent>\n    <SectionProse>\n      {title && <h1>{title}</h1>}\n      {description && <p>{description}</p>}\n    </SectionProse>\n    <Item class=\"p-0\">\n      <ItemMedia>\n        <Avatar class=\"size-10\">\n          <AvatarImage src={item?.image?.src} alt={item?.image?.alt} />\n        </Avatar>\n      </ItemMedia>\n      <ItemContent>\n        <ItemTitle>{item?.title}</ItemTitle>\n        <ItemDescription>{item?.description}</ItemDescription>\n      </ItemContent>\n    </Item>\n  </SectionContent>\n  <SectionMedia>\n    <Image sizes=\"(min-width: 672px) 672px, 100vw\" priority {...image} />\n  </SectionMedia>\n  <SectionProse>\n    <slot />\n  </SectionProse>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-16/10 w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article\n      class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\"\n    >\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/article-2.json

@@ -1,18 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "article-2",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/image",
-    "@fulldev/item",
+    "@fulldev/badge",
     "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport { Avatar, AvatarImage } from \"@/components/ui/avatar\"\nimport { Image } from \"@/components/ui/image\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\"\nimport {\n  Section,\n  SectionContent,\n  SectionMedia,\n  SectionProse,\n} from \"@/components/ui/section\"\n\ninterface Props {\n  class?: string\n  id?: string\n  title?: string\n  description?: string\n  item?: {\n    image?: {\n      src: string\n      alt: string\n    }\n    title?: string\n    description?: string\n  }\n  image?: {\n    src: string\n    alt: string\n  }\n}\n\nconst { class: className, id, title, description, image, item } = Astro.props\n---\n\n<Section class={className} id={id} style={{ \"--container\": \"672px\" }}>\n  <SectionContent class=\"items-center\">\n    <SectionProse class=\"text-center text-balance\">\n      {title && <h1>{title}</h1>}\n      {description && <p>{description}</p>}\n    </SectionProse>\n    <Item class=\"p-0\">\n      <ItemMedia>\n        <Avatar class=\"size-10\">\n          <AvatarImage src={image?.src} alt={image?.alt} />\n        </Avatar>\n      </ItemMedia>\n      <ItemContent>\n        <ItemTitle>{item?.title}</ItemTitle>\n        <ItemDescription>{item?.description}</ItemDescription>\n      </ItemContent>\n    </Item>\n  </SectionContent>\n  <SectionMedia>\n    <Image sizes=\"(min-width: 672px) 672px, 100vw\" priority {...image} />\n  </SectionMedia>\n  <SectionProse>\n    <slot />\n  </SectionProse>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-16/10 w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article\n      class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\"\n    >\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/articles-1.json

@@ -1,21 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-1",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/section",
-    "@fulldev/tile"
+    "@fulldev/badge",
+    "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-1.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  ItemTitle,\n} from \"@/components/ui/item\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionGrid,\n  SectionProse,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileContent,\n  TileDescription,\n  TileMedia,\n  TileTitle,\n} from \"@/components/ui/tile\"\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  items?: {\n    href?: string\n    title?: string\n    description?: string\n    item?: {\n      image?: {\n        src: string\n        alt: string\n      }\n      title?: string\n      description?: string\n    }\n    image?: {\n      src: string\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, id, links, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionContent>\n    <SectionProse>\n      <slot />\n    </SectionProse>\n    <SectionActions>\n      {\n        links?.map(({ icon, text, ...link }, i) => (\n          <Button variant={i === 0 ? \"default\" : \"outline\"} {...link}>\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n  </SectionContent>\n  <SectionGrid>\n    {\n      items?.map(({ title, description, image, href, item }) => (\n        <Tile href={href}>\n          <TileMedia class=\"aspect-video\">\n            <Image sizes=\"600px\" {...image} />\n          </TileMedia>\n          <TileContent>\n            <TileTitle class=\"line-clamp-2\">{title}</TileTitle>\n            <TileDescription class=\"line-clamp-2\">\n              {description}\n            </TileDescription>\n          </TileContent>\n          <Item class=\"p-0\">\n            <ItemMedia>\n              <Avatar class=\"size-10\">\n                <AvatarImage src={item?.image?.src} alt={item?.image?.alt} />\n              </Avatar>\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>{item?.title}</ItemTitle>\n              <ItemDescription>{item?.description}</ItemDescription>\n            </ItemContent>\n          </Item>\n        </Tile>\n      ))\n    }\n  </SectionGrid>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, description, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <h2\n        class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/articles-2.json

@@ -1,21 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-2",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/section",
-    "@fulldev/tile"
+    "@fulldev/badge",
+    "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-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  ItemTitle,\n} from \"@/components/ui/item\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionGrid,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileContent,\n  TileDescription,\n  TileMedia,\n  TileTitle,\n} from \"@/components/ui/tile\"\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  items?: {\n    href?: string\n    title?: string\n    description?: string\n    item?: {\n      image?: {\n        src: string\n        alt: string\n      }\n      title?: string\n      description?: string\n    }\n    image?: {\n      src: string\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, id, links, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionSplit class=\"@5xl:grid-cols-[2fr_3fr]\">\n    <SectionContent>\n      <SectionProse>\n        <slot />\n      </SectionProse>\n      <SectionActions>\n        {\n          links?.map(({ icon, text, ...link }, i) => (\n            <Button variant={i === 0 ? \"default\" : \"outline\"} {...link}>\n              {icon && <Icon name={icon} />}\n              {text}\n            </Button>\n          ))\n        }\n      </SectionActions>\n    </SectionContent>\n    <SectionGrid size=\"lg\">\n      {\n        items?.map(({ title, description, image, href, item }) => (\n          <Tile href={href}>\n            <TileMedia>\n              <Image sizes=\"820px\" {...image} />\n            </TileMedia>\n            <TileContent>\n              <TileTitle>{title}</TileTitle>\n              <TileDescription>{description}</TileDescription>\n            </TileContent>\n            <Item class=\"p-0\">\n              <ItemMedia>\n                <Avatar class=\"size-10\">\n                  <AvatarImage src={item?.image?.src} alt={item?.image?.alt} />\n                </Avatar>\n              </ItemMedia>\n              <ItemContent>\n                <ItemTitle>{item?.title}</ItemTitle>\n                <ItemDescription>{item?.description}</ItemDescription>\n              </ItemContent>\n            </Item>\n          </Tile>\n        ))\n      }\n    </SectionGrid>\n  </SectionSplit>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-4/3 rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">{featured.category}</Badge>\n        <h3\n          class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\"\n        >\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/articles-3.json

@@ -1,21 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-3",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/section",
-    "@fulldev/tile"
+    "@fulldev/badge",
+    "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-3.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  ItemTitle,\n} from \"@/components/ui/item\"\nimport {\n  Section,\n  SectionActions,\n  SectionGrid,\n  SectionProse,\n  SectionSpread,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileContent,\n  TileDescription,\n  TileMedia,\n  TileTitle,\n} from \"@/components/ui/tile\"\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  items?: {\n    href?: string\n    title?: string\n    description?: string\n    item?: {\n      image?: {\n        src: string\n        alt: string\n      }\n      title?: string\n      description?: string\n    }\n    image?: {\n      src: string\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, id, links, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionSpread class=\"@5xl:items-end\">\n    <SectionProse>\n      <slot />\n    </SectionProse>\n    <SectionActions class=\"-mx-3 -my-2\">\n      {\n        links?.map(({ icon, text, ...link }) => (\n          <Button variant=\"link\" {...link}>\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n  </SectionSpread>\n  <SectionGrid>\n    {\n      items?.map(({ title, description, image, href, item }) => (\n        <Tile href={href}>\n          <TileMedia>\n            <Image sizes=\"600px\" {...image} />\n          </TileMedia>\n          <TileContent>\n            <TileTitle>{title}</TileTitle>\n            <TileDescription>{description}</TileDescription>\n          </TileContent>\n          <Item class=\"p-0\">\n            <ItemMedia>\n              <Avatar class=\"size-10\">\n                <AvatarImage src={item?.image?.src} alt={item?.image?.alt} />\n              </Avatar>\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>{item?.title}</ItemTitle>\n              <ItemDescription>{item?.description}</ItemDescription>\n            </ItemContent>\n          </Item>\n        </Tile>\n      ))\n    }\n  </SectionGrid>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {\n          badge && (\n            <Badge variant=\"secondary\" class=\"w-fit\">\n              {badge}\n            </Badge>\n          )\n        }\n        <h2\n          class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-video w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/articles-4.json

@@ -1,21 +1,17 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-4",
-  "type": "registry:block",
   "registryDependencies": [
     "@fulldev/avatar",
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/image",
-    "@fulldev/item",
-    "@fulldev/section",
-    "@fulldev/tile"
+    "@fulldev/badge",
+    "@fulldev/section"
   ],
   "files": [
     {
       "path": "src/components/blocks/articles-4.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  ItemTitle,\n} from \"@/components/ui/item\"\nimport {\n  Section,\n  SectionActions,\n  SectionContent,\n  SectionGrid,\n  SectionProse,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileContent,\n  TileDescription,\n  TileMedia,\n  TileTitle,\n} from \"@/components/ui/tile\"\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  items?: {\n    href?: string\n    title?: string\n    description?: string\n    item?: {\n      image?: {\n        src: string\n        alt: string\n      }\n      title?: string\n      description?: string\n    }\n    image?: {\n      src: string\n      alt: string\n    }\n  }[]\n}\n\nconst { class: className, id, links, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionContent>\n    <SectionProse>\n      <slot />\n    </SectionProse>\n    <SectionActions>\n      {\n        links?.map(({ icon, text, ...link }, i) => (\n          <Button variant={i === 0 ? \"default\" : \"outline\"} {...link}>\n            {icon && <Icon name={icon} />}\n            {text}\n          </Button>\n        ))\n      }\n    </SectionActions>\n  </SectionContent>\n  <SectionGrid>\n    {\n      items?.map(({ title, description, image, href, item }) => (\n        <Tile href={href} variant=\"floating\">\n          <TileMedia class=\"-mx-6 -mt-6 aspect-video\">\n            <Image sizes=\"600px\" {...image} />\n          </TileMedia>\n          <TileContent>\n            <TileTitle class=\"line-clamp-2\">{title}</TileTitle>\n            <TileDescription class=\"line-clamp-2\">\n              {description}\n            </TileDescription>\n          </TileContent>\n          <Item class=\"p-0\">\n            <ItemMedia>\n              <Avatar class=\"size-10\">\n                <AvatarImage src={item?.image?.src} alt={item?.image?.alt} />\n              </Avatar>\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>{item?.title}</ItemTitle>\n              <ItemDescription>{item?.description}</ItemDescription>\n            </ItemContent>\n          </Item>\n        </Tile>\n      ))\n    }\n  </SectionGrid>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, description, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/avatar.json

@@ -1,28 +1,42 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "avatar",
-  "type": "registry:ui",
-  "registryDependencies": ["@fulldev/image"],
   "files": [
     {
       "path": "src/components/ui/avatar/avatar.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"div\"> {}\n\nconst { class: className, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <div\n      data-slot=\"avatar\"\n      class={cn(\n        \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <Fragment set:html={slot} />\n    </div>\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}\n\nconst { class: className, size = \"default\", ...props } = Astro.props\n---\n\n<div\n  data-slot=\"avatar\"\n  data-size={size}\n  class={cn(\n    \"after:border-border group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/avatar/avatar-badge.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=\"avatar-badge\"\n  class={cn(\n    \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n    \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n    \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n    \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/avatar/avatar-fallback.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"div\"> {}\n\nconst { class: className, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <div\n      data-slot=\"avatar-fallback\"\n      class={cn(\n        \"bg-muted flex size-full items-center justify-center rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <Fragment set:html={slot} />\n    </div>\n  )\n}\n",
+      "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=\"avatar-fallback\"\n  class={cn(\n    \"bg-muted text-muted-foreground absolute inset-0 z-0 flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/avatar/avatar-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=\"avatar-group\"\n  class={cn(\n    \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/avatar/avatar-group-count.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=\"avatar-group-count\"\n  class={cn(\n    \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/avatar/avatar-image.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Image } from \"@/components/ui/image\"\n\ntype Props = Partial<ComponentProps<typeof Image>>\n\nconst {\n  class: className,\n  alt = \"\",\n  width = 44,\n  height = 44,\n  sizes = \"44px\",\n  widths = [44, 88, 176],\n  ...props\n} = Astro.props\n---\n\n{\n  props.src && (\n    <Image\n      data-slot=\"avatar-image\"\n      class={cn(\"aspect-square size-full\", className)}\n      alt={alt}\n      width={width}\n      height={height}\n      sizes={sizes}\n      widths={widths}\n      {...(props as any)}\n    />\n  )\n}\n",
+      "content": "---\nimport { Image } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof Image>>\n\nconst {\n  class: className,\n  alt = \"\",\n  width = 44,\n  height = 44,\n  sizes = \"44px\",\n  widths = [44, 88, 176],\n  ...props\n} = Astro.props\n---\n\n{\n  props.src && (\n    <Image\n      data-slot=\"avatar-image\"\n      class={cn(\n        \"absolute inset-0 z-10 aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      alt={alt}\n      width={width}\n      height={height}\n      sizes={sizes}\n      widths={widths}\n      {...(props as any)}\n    />\n  )\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/avatar/index.ts",
-      "content": "export { default as Avatar } from \"./avatar.astro\"\nexport { default as AvatarFallback } from \"./avatar-fallback.astro\"\nexport { default as AvatarImage } from \"./avatar-image.astro\"\n",
+      "content": "export { default as Avatar } from \"./avatar.astro\"\nexport { default as AvatarBadge } from \"./avatar-badge.astro\"\nexport { default as AvatarFallback } from \"./avatar-fallback.astro\"\nexport { default as AvatarGroup } from \"./avatar-group.astro\"\nexport { default as AvatarGroupCount } from \"./avatar-group-count.astro\"\nexport { default as AvatarImage } from \"./avatar-image.astro\"\n",
       "type": "registry:ui"
     }
-  ]
-}
+  ],
+  "type": "registry:ui"
+}

package/public/r/badge.json

@@ -1,17 +1,22 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge",
-  "type": "registry:ui",
   "files": [
+    {
+      "path": "src/components/ui/badge/badge-variants.ts",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const badgeVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>\n",
+      "type": "registry:ui"
+    },
     {
       "path": "src/components/ui/badge/badge.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = VariantProps<typeof variants> &\n  HTMLAttributes<\"span\"> &\n  HTMLAttributes<\"a\"> & {\n    text?: string\n    html?: string\n  }\n\nconst variants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent\",\n        destructive:\n          \"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst { class: className, variant, href, text, html, ...props } = Astro.props\n\nconst Comp = href ? \"a\" : \"span\"\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <Comp\n      data-slot=\"badge\"\n      class={cn(variants({ variant }), className)}\n      href={href}\n      set:html={html}\n      set:text={text}\n      {...props}\n    >\n      <Fragment set:html={slot} />\n    </Comp>\n  )\n}\n",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { badgeVariants, type BadgeVariantProps } from \"./badge-variants\"\n\ntype Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & BadgeVariantProps\n\nconst {\n  as: Tag = \"span\",\n  class: className,\n  variant = \"default\",\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"badge\"\n  class={cn(badgeVariants({ variant }), className)}\n  {...props}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/badge/index.ts",
-      "content": "export { default as Badge } from \"./badge.astro\"\n",
+      "content": "export { badgeVariants, type BadgeVariantProps } from \"./badge-variants\"\n\nexport { default as Badge } from \"./badge.astro\"\n",
       "type": "registry:ui"
     }
-  ]
+  ],
+  "type": "registry:ui"
 }

package/public/r/banner-1.json

@@ -1,13 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "banner-1",
-  "type": "registry:block",
-  "registryDependencies": ["@fulldev/banner", "@fulldev/icon"],
+  "registryDependencies": [
+    "@fulldev/banner",
+    "@fulldev/icon"
+  ],
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport {\n  Banner,\n  BannerContent,\n  BannerDescription,\n  BannerTitle,\n} from \"@/components/ui/banner\"\nimport { Icon } from \"@/components/ui/icon\"\n\ninterface Props {\n  icon?: string\n  title?: string\n  description?: string\n}\n\nconst { icon, title, description } = Astro.props\n---\n\n<Banner>\n  <BannerContent>\n    <Icon class=\"size-5\" name={icon} />\n    <BannerTitle>{title}</BannerTitle>\n    <BannerDescription>{description}</BannerDescription>\n  </BannerContent>\n</Banner>\n",
+      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Icon } from \"@/components/ui/icon\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {\n      link && (\n        <a\n          href={link.href}\n          class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n        >\n          {link.label}\n          <Icon\n            name=\"arrow-right\"\n            class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\"\n          />\n        </a>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/banner-2.json

@@ -1,13 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "banner-2",
-  "type": "registry:block",
-  "registryDependencies": ["@fulldev/banner", "@fulldev/icon"],
+  "registryDependencies": [
+    "@fulldev/banner",
+    "@fulldev/button"
+  ],
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport {\n  Banner,\n  BannerContent,\n  BannerDescription,\n  BannerTitle,\n} from \"@/components/ui/banner\"\nimport { Icon } from \"@/components/ui/icon\"\n\ninterface Props {\n  icon?: string\n  title?: string\n  description?: string\n}\n\nconst { icon, title, description } = Astro.props\n---\n\n<Banner>\n  <BannerContent class=\"justify-center pr-6\">\n    <Icon class=\"size-5\" name={icon} />\n    <BannerTitle>{title}</BannerTitle>\n    <BannerDescription>{description}</BannerDescription>\n  </BannerContent>\n</Banner>\n",
+      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\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}\n\nconst { class: className, title, description, buttons } = Astro.props\n---\n\n<Banner variant=\"floating\" storageKey=\"banner-2\" class={cn(\"\", className)}>\n  <BannerContainer class=\"gap-4 py-1\" showClose={false}>\n    <div\n      class=\"flex flex-1 flex-col gap-0.5 lg:flex-row lg:items-center lg:gap-x-4\"\n    >\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {\n      buttons?.length && (\n        <div class=\"flex shrink-0 items-center gap-2\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"sm\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
-  ]
-}
+  ],
+  "type": "registry:block"
+}

package/public/r/banner.json

@@ -1,38 +1,27 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "banner",
-  "type": "registry:ui",
-  "registryDependencies": ["@fulldev/button", "@fulldev/icon"],
+  "registryDependencies": [
+    "@fulldev/button",
+    "@fulldev/dropdown-menu",
+    "@fulldev/icon"
+  ],
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props\n  extends HTMLAttributes<\"header\">,\n    VariantProps<typeof variants> {}\n\nconst variants = cva(\n  \"relative mx-auto flex min-h-12 items-center justify-between gap-8 border border-transparent px-(--banner-px) py-1\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-foreground text-background w-full\",\n        floating: [\n          \"bg-foreground text-background rounded-xl shadow-sm\",\n          \"w-[calc(100%-2*var(--gutter,24px))] max-w-(--banner-width)\",\n          \"border-border my-2 overflow-hidden rounded-xl border\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nconst { class: className, variant, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n<script is:inline>\n  // Inline because it needs to run before the banner is rendered\n  if (sessionStorage.getItem(\"closedBanners\")) {\n    document.body.classList.add(\"banner-hidden\")\n  } else {\n    document.body.classList.remove(\"banner-hidden\")\n  }\n</script>\n\n{\n  slot?.trim().length > 0 && (\n    <header\n      class={cn(variants({ variant }), className)}\n      data-slot=\"banner\"\n      data-variant={variant}\n      {...props}\n    >\n      <Fragment set:html={slot} />\n    </header>\n  )\n}\n\n<script>\n  document.querySelectorAll(\"[data-slot='banner-close']\").forEach((btn) => {\n    btn.addEventListener(\"click\", () => {\n      sessionStorage.setItem(\"closedBanners\", \"true\")\n      document.body.classList.add(\"banner-hidden\")\n    })\n  })\n</script>\n\n<style is:global>\n  body.banner-hidden [data-slot=\"banner\"] {\n    display: none;\n  }\n\n  [data-slot=\"banner\"] {\n    --banner-width: var(--container, var(--breakpoint-xl));\n    --banner-px: max(\n      var(--gutter, 24px),\n      calc((100cqw - var(--banner-width)) / 2)\n    );\n  }\n\n  [data-slot=\"banner\"][data-variant=\"floating\"] {\n    --banner-px: calc(var(--spacing) * 6);\n  }\n\n  @media (min-width: 1024px) {\n    [data-slot=\"banner\"][data-variant=\"floating\"] {\n      --banner-px: calc(var(--spacing) * 16);\n    }\n  }\n</style>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"aside\"> &\n  VariantProps<typeof variants> & {\n    storageKey?: string\n  }\n\nconst variants = cva(\"relative flex items-center py-2\", {\n  variants: {\n    variant: {\n      default: \"bg-foreground text-background w-full\",\n      floating:\n        \"bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nconst { class: className, variant, storageKey, ...props } = Astro.props\n---\n\n<aside\n  class={cn(variants({ variant }), className)}\n  data-slot=\"banner\"\n  data-banner-storage-key={storageKey}\n  data-variant={variant}\n  {...props}\n>\n  <slot />\n</aside>\n\n<script is:inline>\n  const initializedKey = \"fulldevBannerInitialized\"\n\n  if (!document.documentElement.dataset[initializedKey]) {\n    document.documentElement.dataset[initializedKey] = \"true\"\n\n    const getStorageToken = (key) => `banner:${key}`\n\n    const syncBanners = () => {\n      document.querySelectorAll(\"[data-slot='banner']\").forEach((banner) => {\n        if (!(banner instanceof HTMLElement)) return\n\n        const storageKey = banner.dataset.bannerStorageKey\n\n        if (\n          storageKey &&\n          sessionStorage.getItem(getStorageToken(storageKey)) === \"hidden\"\n        ) {\n          banner.hidden = true\n        }\n      })\n    }\n\n    syncBanners()\n\n    document.addEventListener(\"click\", (event) => {\n      const target = event.target\n\n      if (!(target instanceof Element)) return\n\n      const closeButton = target.closest(\"[data-slot='banner-close']\")\n\n      if (!(closeButton instanceof HTMLElement)) return\n\n      const banner = closeButton.closest(\"[data-slot='banner']\")\n\n      if (!(banner instanceof HTMLElement)) return\n\n      banner.hidden = true\n\n      const storageKey = banner.dataset.bannerStorageKey\n\n      if (storageKey) {\n        sessionStorage.setItem(getStorageToken(storageKey), \"hidden\")\n      }\n    })\n  }\n</script>\n",
       "type": "registry:ui"
     },
     {
-      "path": "src/components/ui/banner/banner-close.astro",
-      "content": "---\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\n\ninterface Props extends ComponentProps<typeof Button> {}\n\nconst { class: className, ...props } = Astro.props\n---\n\n<Button\n  class={cn(\"z-10 ml-auto\", className)}\n  size=\"icon-sm\"\n  variant=\"ghost\"\n  data-slot=\"banner-close\"\n  {...props}\n>\n  <Icon name=\"x\" />\n</Button>\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/banner/banner-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"lucide-static/icons/x.svg\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <div\n      class={cn(\n        \"relative flex w-full flex-col gap-2 py-1 @5xl:flex-row @5xl:items-center\",\n        className\n      )}\n      {...props}\n    >\n      <Fragment set:html={slot} />\n      {showClose && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          data-slot=\"banner-close\"\n          class=\"focus-visible:outline-ring absolute top-1/2 right-0 z-20 -translate-y-1/2 cursor-pointer rounded-sm border-0 bg-transparent text-inherit opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2\"\n          size=\"icon-sm\"\n          aria-label=\"Close\"\n        >\n          <XIcon class=\"size-4 text-inherit\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/banner/banner-description.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"p\"> {}\n\nconst { class: className, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <p class={cn(\"text-sm opacity-90\", className)} {...props}>\n      <Fragment set:html={slot} />\n    </p>\n  )\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/banner/banner-title.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"p\"> {}\n\nconst { class: className, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <p class={cn(\"text-sm font-medium\", className)} {...props}>\n      <Fragment set:html={slot} />\n    </p>\n  )\n}\n",
+      "path": "src/components/ui/banner/banner-container.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icon } from \"@/components/ui/icon\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  showClose?: boolean\n}\n\nconst { class: className, showClose = true, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"relative mx-auto flex w-full max-w-7xl gap-4 px-4\",\n    showClose && \"pr-10\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {\n    showClose && (\n      <button\n        type=\"button\"\n        class=\"focus-visible:ring-ring/50 absolute top-1/2 right-4 z-20 inline-flex shrink-0 -translate-y-1/2 items-center justify-center rounded-sm text-current/65 transition-colors outline-none hover:text-current focus-visible:text-current focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 in-data-[variant=floating]:right-5\"\n        aria-label=\"Close\"\n        data-slot=\"banner-close\"\n      >\n        <Icon name=\"x\" class=\"size-4\" />\n        <span class=\"sr-only\">Close</span>\n      </button>\n    )\n  }\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/banner/index.ts",
-      "content": "export { default as Banner } from \"./banner.astro\"\nexport { default as BannerContent } from \"./banner-content.astro\"\nexport { default as BannerTitle } from \"./banner-title.astro\"\nexport { default as BannerDescription } from \"./banner-description.astro\"\nexport { default as BannerClose } from \"./banner-close.astro\"\n",
+      "content": "export { default as Banner } from \"./banner.astro\"\nexport { default as BannerContainer } from \"./banner-container.astro\"\n",
       "type": "registry:ui"
     }
-  ]
-}
+  ],
+  "type": "registry:ui"
+}