diff --git a/apps/web/astro.config.mjs b/apps/web/astro.config.mjs
index dc3a3f8..1037398 100644
--- a/apps/web/astro.config.mjs
+++ b/apps/web/astro.config.mjs
@@ -244,7 +244,7 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
     ssr: {
-      noExternal: ["zod"],
+      noExternal: ["zod", "nanoid"],
     },
   },
   adapter: vercel({
diff --git a/apps/web/package.json b/apps/web/package.json
index 848af87..a8ab5f0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,6 +34,7 @@
     "alpinejs": "^3.15.4",
     "astro": "^5.16.4",
     "astro-robots-txt": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
     "culori": "^4.0.2",
     "expressive-code-collapsible": "^0.1.0",
     "nanoid": "^5.0.9",
diff --git a/apps/web/public/r/avatar.json b/apps/web/public/r/avatar.json
index db69151..0d8f942 100644
--- a/apps/web/public/r/avatar.json
+++ b/apps/web/public/r/avatar.json
@@ -5,22 +5,37 @@
   "files": [
     {
       "path": "ui/avatar/Avatar.astro",
-      "content": "---\n/**\n * @component Avatar\n * @title Avatar\n * @description An image representing a user or entity, with fallback support when unavailable.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2531-2620&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n * <div class=\"flex flex-row flex-wrap items-center gap-12\">\n *   <Avatar>\n *     <AvatarImage>\n *       <img src=\"https://github.com/bejamas.png\" alt=\"@bejamas\" />\n *     </AvatarImage>\n *     <AvatarFallback>BJ</AvatarFallback>\n *   </Avatar>\n *   <Avatar class=\"rounded-lg\">\n *     <AvatarImage>\n *       <img src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n *     </AvatarImage>\n *     <AvatarFallback>TK</AvatarFallback>\n *   </Avatar>\n *   <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n *     <Avatar>\n *       <AvatarImage>\n *         <img src=\"https://github.com/withastro.png\" alt=\"@withastro\" />\n *       </AvatarImage>\n *       <AvatarFallback>WA</AvatarFallback>\n *     </Avatar>\n *     <Avatar>\n *       <AvatarImage>\n *         <img src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n *       </AvatarImage>\n *       <AvatarFallback>SH</AvatarFallback>\n *     </Avatar>\n *     <Avatar>\n *       <AvatarImage>\n *         <img src=\"https://github.com/fredkschott.png\" alt=\"@fredkschott\" />\n *       </AvatarImage>\n *       <AvatarFallback>FS</AvatarFallback>\n *     </Avatar>\n *   </div>\n * </div>\n * \n * @usage\n * \n * ```astro nocollapse\n * ---\n * import { Avatar, AvatarImage, AvatarFallback } from '@bejamas/ui/components/avatar';\n * ---\n * \n * <Avatar>\n *   <AvatarImage>\n *     <img src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n *   </AvatarImage>\n *   <AvatarFallback>TK</AvatarFallback>\n * </Avatar>\n * ```\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"avatar\"\n  class={cn(\"relative flex size-8 shrink-0 overflow-hidden rounded-full\", className)}\n>\n  <slot />\n</Tag>\n\n",
+      "content": "---\n/**\n * @component Avatar\n * @title Avatar\n * @description An image representing a user or entity, with fallback support when unavailable.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/BejamasUI---Design-System?node-id=2531-2620&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n * <div class=\"flex flex-wrap items-center gap-4\">\n *   <Avatar>\n *     <AvatarImage src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n *     <AvatarFallback>TK</AvatarFallback>\n *     <AvatarBadge />\n *   </Avatar>\n *   <AvatarGroup>\n *     <Avatar>\n *       <AvatarImage src=\"https://github.com/withastro.png\" alt=\"@withastro\" />\n *       <AvatarFallback>WA</AvatarFallback>\n *     </Avatar>\n *     <Avatar>\n *       <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"@bejamas\" />\n *       <AvatarFallback>BJ</AvatarFallback>\n *     </Avatar>\n *     <AvatarGroupCount>+2</AvatarGroupCount>\n *   </AvatarGroup>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   Avatar,\n *   AvatarImage,\n *   AvatarFallback,\n *   AvatarBadge,\n *   AvatarGroup,\n *   AvatarGroupCount,\n * } from '@bejamas/ui/components/avatar';\n * ---\n *\n * <Avatar size=\"lg\">\n *   <AvatarImage src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n *   <AvatarFallback>TK</AvatarFallback>\n *   <AvatarBadge />\n * </Avatar>\n * ```\n *\n * @examples\n *\n * ### Sizes\n *\n * <div class=\"flex items-center gap-4\">\n *   <Avatar size=\"sm\">\n *     <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"small\" />\n *     <AvatarFallback>SM</AvatarFallback>\n *   </Avatar>\n *   <Avatar>\n *     <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"default\" />\n *     <AvatarFallback>MD</AvatarFallback>\n *   </Avatar>\n *   <Avatar size=\"lg\">\n *     <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"large\" />\n *     <AvatarFallback>LG</AvatarFallback>\n *   </Avatar>\n * </div>\n *\n * ### Badge\n *\n * <Avatar>\n *   <AvatarImage src=\"https://github.com/thomkrupa.png\" alt=\"@thomkrupa\" />\n *   <AvatarFallback>TK</AvatarFallback>\n *   <AvatarBadge />\n * </Avatar>\n *\n * ### Group\n *\n * <AvatarGroup>\n *   <Avatar>\n *     <AvatarImage src=\"https://github.com/withastro.png\" alt=\"@withastro\" />\n *     <AvatarFallback>WA</AvatarFallback>\n *   </Avatar>\n *   <Avatar>\n *     <AvatarImage src=\"https://github.com/bejamas.png\" alt=\"@bejamas\" />\n *     <AvatarFallback>BJ</AvatarFallback>\n *   </Avatar>\n *   <Avatar>\n *     <AvatarFallback>FS</AvatarFallback>\n *   </Avatar>\n *   <AvatarGroupCount>+3</AvatarGroupCount>\n * </AvatarGroup>\n *\n * ### With `astro:assets` Image\n *\n * ```astro nopreview nocollapse\n * ---\n * import { Image } from \"astro:assets\";\n * import profile from \"@/assets/profile.jpg\";\n * import { Avatar, AvatarImage, AvatarFallback } from \"@bejamas/ui/components/avatar\";\n * ---\n *\n * <Avatar>\n *   <AvatarImage>\n *     <Image src={profile} alt=\"Profile photo\" />\n *   </AvatarImage>\n *   <AvatarFallback>PR</AvatarFallback>\n * </Avatar>\n * ```\n */\n\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  class?: string;\n  size?: \"default\" | \"sm\" | \"lg\";\n} & HTMLAttributes<\"span\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<span\n  {...rest}\n  data-slot=\"avatar\"\n  data-size={size}\n  class={cn(\n    \"group/avatar relative flex size-8 shrink-0 select-none rounded-full\",\n    \"after:absolute after:inset-0 after:rounded-full after:border after:border-border\",\n    \"after:mix-blend-darken dark:after:mix-blend-lighten\",\n    \"data-[size=sm]:size-6 data-[size=lg]:size-10\",\n    \"z-1\",\n    className,\n  )}\n>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/avatar/AvatarImage.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"avatar-image\"\n  class={cn(\"relative z-10 aspect-square size-full [&_img]:size-full [&_img]:object-cover\", className)}\n>\n  <slot />\n</Tag>\n\n",
+      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n  src?: string;\n  alt?: string;\n} & HTMLAttributes<\"img\">;\n\nconst {\n  as,\n  class: className = \"\",\n  src,\n  alt = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst Tag = (as ?? \"div\") as HTMLTag;\n---\n\n{\n  src || as === \"img\" ? (\n    <img\n      {...rest}\n      data-slot=\"avatar-image\"\n      src={src}\n      alt={alt}\n      class={cn(\n        \"relative z-10 rounded-full aspect-square size-full object-cover\",\n        className,\n      )}\n    />\n  ) : (\n    <Tag\n      {...rest}\n      data-slot=\"avatar-image\"\n      class={cn(\n        \"relative z-10 rounded-full aspect-square size-full overflow-hidden\",\n        \"[&_img]:size-full [&_img]:object-cover\",\n        className,\n      )}\n    >\n      <slot />\n    </Tag>\n  )\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/avatar/AvatarFallback.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"avatar-fallback\"\n  class={cn(\"absolute inset-0 bg-muted flex size-full items-center justify-center rounded-full text-muted-foreground font-medium uppercase select-none\", className)}\n>\n  <slot />\n</Tag>\n\n",
+      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"avatar-fallback\"\n  class={cn(\n    \"bg-muted text-muted-foreground absolute inset-0 flex size-full items-center justify-center rounded-full text-sm\",\n    \"group-data-[size=sm]/avatar:text-xs\",\n    className,\n  )}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "ui/avatar/AvatarBadge.astro",
+      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"span\">;\n\nconst {\n  as: Tag = \"span\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\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>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "ui/avatar/AvatarGroup.astro",
+      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"avatar-group\"\n  class={cn(\n    \"group/avatar-group flex -space-x-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-background\",\n    className,\n  )}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "ui/avatar/AvatarGroupCount.astro",
+      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\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\",\n    \"[&>svg]:size-4\",\n    \"group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n    \"group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5\",\n    className,\n  )}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/avatar/index.ts",
-      "content": "export { default as Avatar } from \"./Avatar.astro\";\nexport { default as AvatarImage } from \"./AvatarImage.astro\";\nexport { default as AvatarFallback } from \"./AvatarFallback.astro\";\n\n",
+      "content": "export { default as Avatar } from \"./Avatar.astro\";\nexport { default as AvatarImage } from \"./AvatarImage.astro\";\nexport { default as AvatarFallback } from \"./AvatarFallback.astro\";\nexport { default as AvatarBadge } from \"./AvatarBadge.astro\";\nexport { default as AvatarGroup } from \"./AvatarGroup.astro\";\nexport { default as AvatarGroupCount } from \"./AvatarGroupCount.astro\";\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/web/public/r/card.json b/apps/web/public/r/card.json
index 060dc03..60a7f18 100644
--- a/apps/web/public/r/card.json
+++ b/apps/web/public/r/card.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "ui/card/Card.astro",
-      "content": "---\n/**\n * @component Card\n * @title Card\n * @description UI container for grouping content with header, footer, etc.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-3884&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Card class=\"w-full max-w-sm\">\n *   <CardMedia class=\"m-1\">\n *     <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=30&contrast=0&w=748&h=500&seed=bejamas\" alt=\"Gradient Cover\" class=\"w-full h-full object-cover\" width=\"374\" height=\"250\" loading=\"lazy\" />\n *   </CardMedia>\n *   <CardHeader>\n *     <div class=\"flex items-center gap-2 justify-between\">\n *       <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2\">\n *         <Avatar>\n *           <AvatarImage>\n *             <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=90&contrast=0&w=80&h=80&seed=bejamas-avatar\" alt=\"grdient avatar\" />\n *           </AvatarImage>\n *           <AvatarFallback>AW</AvatarFallback>\n *         </Avatar>\n *       </div>\n *       <Date date=\"2025-08-24T12:00:00Z\" class=\"text-sm text-muted-foreground\" />\n *     </div>\n *   </CardHeader>\n *   <CardContent class=\"space-y-4\">\n *     <CardTitle>Strong Foundations, Built to Scale</CardTitle>\n *     <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>\n *     <Button variant=\"outline\" as=\"a\" href=\"#\">Read more</Button>\n *   </CardContent>\n *   <Separator />\n *   <CardFooter>\n *     <p class=\"text-sm text-muted-foreground\">Categories</p>\n *     <div class=\"flex items-center gap-2\">\n *       <Badge variant=\"secondary\">Marketing</Badge>\n *       <Badge variant=\"secondary\">UI Design</Badge>\n *     </div>\n *   </CardFooter>\n * </Card>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';\n * ---\n *\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title</CardTitle>\n *     <CardDescription>Card Description</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     Card content goes here.\n *   </CardContent>\n *   <CardFooter>\n *     <button>OK</button>\n *   </CardFooter>\n * </Card>\n * ```\n */\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ntype CardVariant = \"default\" | \"ghost\";\n\ntype Props = {\n  variant?: CardVariant;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  variant = \"default\",\n  ...rest\n} = Astro.props as Props;\n\nconst cardVariants = cva(\n  \"group/card relative bg-card overflow-clip text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm group/card [&:has(>_[data-slot=card-media]:first-child_img)]:pt-0 [a]:hover:bg-accent/5 [a]:transition-colors duration-100\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        ghost: \"border-transparent bg-transparent shadow-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  data-slot=\"card\"\n  class={cn(cardVariants({ variant }), className)}\n>\n  <slot />\n</div>\n",
+      "content": "---\n/**\n * @component Card\n * @title Card\n * @description UI container for grouping content with header, footer, etc.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2543-3884&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <Card class=\"w-full max-w-sm\">\n *   <CardMedia class=\"m-1\">\n *     <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=30&contrast=0&w=748&h=500&seed=bejamas\" alt=\"Gradient Cover\" class=\"w-full h-full object-cover\" width=\"374\" height=\"250\" loading=\"lazy\" />\n *   </CardMedia>\n *   <CardHeader>\n *     <div class=\"flex items-center gap-2 justify-between\">\n *       <div class=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2\">\n *         <Avatar>\n *           <AvatarImage>\n *             <img src=\"https://gradient.bejamas.com/api/gradient.png?funkiness=90&contrast=0&w=80&h=80&seed=bejamas-avatar\" alt=\"grdient avatar\" />\n *           </AvatarImage>\n *           <AvatarFallback>AW</AvatarFallback>\n *         </Avatar>\n *       </div>\n *       <Date date=\"2025-08-24T12:00:00Z\" class=\"text-sm text-muted-foreground\" />\n *     </div>\n *   </CardHeader>\n *   <CardContent class=\"space-y-4\">\n *     <CardTitle>Strong Foundations, Built to Scale</CardTitle>\n *     <CardDescription>Like any enduring system, a scalable design system relies on clear structure, solid foundations, and careful layering over time.</CardDescription>\n *     <Button variant=\"outline\" as=\"a\" href=\"#\">Read more</Button>\n *   </CardContent>\n *   <Separator />\n *   <CardFooter>\n *     <p class=\"text-sm text-muted-foreground\">Categories</p>\n *     <div class=\"flex items-center gap-2\">\n *       <Badge variant=\"secondary\">Marketing</Badge>\n *       <Badge variant=\"secondary\">UI Design</Badge>\n *     </div>\n *   </CardFooter>\n * </Card>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@bejamas/ui/components/card';\n * ---\n *\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title</CardTitle>\n *     <CardDescription>Card Description</CardDescription>\n *   </CardHeader>\n *   <CardContent>\n *     Card content goes here.\n *   </CardContent>\n *   <CardFooter>\n *     <button>OK</button>\n *   </CardFooter>\n * </Card>\n * ```\n */\n\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\n\ntype CardVariant = \"default\" | \"ghost\";\n\ntype Props = {\n  variant?: CardVariant;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  variant = \"default\",\n  ...rest\n} = Astro.props as Props;\n\nconst cardVariants = cva(\n  \"group/card bg-card overflow-clip text-card-foreground flex flex-col gap-6 rounded-xl ring-1 ring-border py-6 shadow-sm group/card [&:has(>_[data-slot=card-media]:first-child_img)]:pt-0 [a]:hover:bg-accent/5 [a]:transition-colors duration-100\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        ghost: \"ring-transparent bg-transparent shadow-none\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  data-slot=\"card\"\n  class={cn(cardVariants({ variant }), className)}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/combobox.json b/apps/web/public/r/combobox.json
index 7a3aba4..6e0a9b1 100644
--- a/apps/web/public/r/combobox.json
+++ b/apps/web/public/r/combobox.json
@@ -10,17 +10,17 @@
   "files": [
     {
       "path": "ui/combobox/Combobox.astro",
-      "content": "---\n/**\n * @component Combobox\n * @title Combobox\n * @description A searchable dropdown (autocomplete) that lets users filter and select from a list of options with full keyboard navigation and accessibility support.\n *\n * @preview\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *       <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       <ComboboxItem value=\"remix\">Remix</ComboboxItem>\n *       <ComboboxItem value=\"svelte\">SvelteKit</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   Combobox,\n *   ComboboxInput,\n *   ComboboxContent,\n *   ComboboxList,\n *   ComboboxItem,\n *   ComboboxEmpty,\n *   ComboboxGroup,\n *   ComboboxLabel,\n *   ComboboxSeparator,\n * } from '@bejamas/ui/components/combobox';\n * ---\n *\n * <Combobox name=\"framework\">\n *   <ComboboxInput placeholder=\"Select framework...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The combobox emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `combobox:change` | `{ value: string \\| null }` | Fired when a new value is selected |\n * | `combobox:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |\n * | `combobox:input-change` | `{ inputValue: string }` | Fired when the user types in the input |\n *\n * ```astro nocollapse\n * <Combobox id=\"my-combobox\">\n *   <ComboboxInput placeholder=\"Search...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxItem value=\"option1\">Option 1</ComboboxItem>\n *       <ComboboxItem value=\"option2\">Option 2</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * <script>\n *   const combobox = document.getElementById('my-combobox');\n *\n *   combobox.addEventListener('combobox:change', (e) => {\n *     console.log('Selected value:', e.detail.value);\n *   });\n *\n *   combobox.addEventListener('combobox:input-change', (e) => {\n *     console.log('Input text:', e.detail.inputValue);\n *   });\n * </script>\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the combobox programmatically by dispatching a `combobox:set` event:\n *\n * ```js nocollapse\n * const combobox = document.getElementById('my-combobox');\n *\n * // Set a specific value\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { value: 'option2' }\n * }));\n *\n * // Clear the value\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { value: null }\n * }));\n *\n * // Open the dropdown\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { open: true }\n * }));\n *\n * // Set the input text\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { inputValue: 'search term' }\n * }));\n *\n * // Custom display text for selected value\n * // itemToStringValue — (item: HTMLElement | null, value: string | null) => string\n * // Controls what text appears in the input after selection.\n * // Useful when items contain rich content (icons, descriptions).\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: {\n *     itemToStringValue: (item, value) => value ? `TZ: ${value}` : ''\n *   }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The combobox sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | combobox, combobox-content | Current state (`open` or `closed`) |\n * | `data-value` | combobox | Currently selected value |\n * | `data-selected` | combobox-item | Present when item is selected |\n * | `data-highlighted` | combobox-item | Present when item is focused/highlighted |\n * | `data-disabled` | combobox, combobox-item | Present when disabled |\n * | `data-empty` | combobox-content | Present when no items match the filter |\n *\n * ### Positioning\n *\n * Placement options are configured on `ComboboxContent`:\n *\n * ```astro nocollapse nopreview\n * <Combobox>\n *   <ComboboxInput />\n *   <ComboboxContent side=\"top\" align=\"start\" sideOffset={8}>\n *     ...\n *   </ComboboxContent>\n * </Combobox>\n * ```\n *\n * @examples\n *\n * ### Clear Button\n *\n * Use the `showClear` prop to show a clear button in the input.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" showClear />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *       <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       <ComboboxItem value=\"remix\">Remix</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Groups\n *\n * Use the `ComboboxGroup` and `ComboboxLabel` to group items and add a label to the group.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxGroup>\n *         <ComboboxLabel>Frontend</ComboboxLabel>\n *         <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *         <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *         <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       </ComboboxGroup>\n *       <ComboboxSeparator />\n *       <ComboboxGroup>\n *         <ComboboxLabel>Backend</ComboboxLabel>\n *         <ComboboxItem value=\"express\">Express</ComboboxItem>\n *         <ComboboxItem value=\"hono\">Hono</ComboboxItem>\n *       </ComboboxGroup>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Invalid\n *\n * Use the `aria-invalid=\"true\"` attribute on the `ComboboxInput` to mark the combobox as invalid.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" aria-invalid=\"true\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Disabled\n *\n * Use the `disabled` prop to disable the combobox.\n *\n * <Combobox disabled class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" disabled />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Auto Highlight\n *\n * Use the `autoHighlight` prop to automatically highlight the first item on filter.\n *\n * <Combobox autoHighlight class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Start typing...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *       <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       <ComboboxItem value=\"remix\">Remix</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Search in Popup\n *\n * You can trigger the combobox from a button or any other component by using the render prop. Move the `ComboboxInput` inside the `ComboboxContent`.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxTrigger>\n *     <ComboboxValue placeholder=\"Select country...\" />\n *   </ComboboxTrigger>\n *   <ComboboxContent>\n *     <ComboboxInput showTrigger={false} placeholder=\"Search countries...\" />\n *     <ComboboxList>\n *       <ComboboxEmpty>No countries found.</ComboboxEmpty>\n *       <ComboboxItem value=\"brazil\" label=\"Brazil\">Brazil</ComboboxItem>\n *       <ComboboxItem value=\"canada\" label=\"Canada\">Canada</ComboboxItem>\n *       <ComboboxItem value=\"france\" label=\"France\">France</ComboboxItem>\n *       <ComboboxItem value=\"germany\" label=\"Germany\">Germany</ComboboxItem>\n *       <ComboboxItem value=\"japan\" label=\"Japan\">Japan</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  class?: string;\n  name?: string;\n  defaultValue?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  openOnFocus?: boolean;\n  autoHighlight?: boolean;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  name,\n  defaultValue,\n  placeholder,\n  disabled = false,\n  required = false,\n  openOnFocus,\n  autoHighlight,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"combobox\"\n  data-name={name}\n  data-default-value={defaultValue}\n  data-placeholder={placeholder}\n  data-disabled={disabled ? \"\" : undefined}\n  data-required={required ? \"\" : undefined}\n  data-open-on-focus={openOnFocus !== undefined\n    ? String(openOnFocus)\n    : undefined}\n  data-auto-highlight={autoHighlight !== undefined\n    ? String(autoHighlight)\n    : undefined}\n  class={cn(\"group/combobox relative inline-block\", className)}\n>\n  <slot />\n</div>\n\n<script>\n  import { createCombobox } from \"@data-slot/combobox\";\n\n  document.querySelectorAll('[data-slot=\"combobox\"]').forEach((el) => {\n    createCombobox(el);\n  });\n\n  // Clear button delegation\n  document.addEventListener(\"click\", (e) => {\n    const target = e.target as Element;\n    const clear = target.closest('[data-slot=\"combobox-clear\"]');\n    if (!clear) return;\n    const root = clear.closest('[data-slot=\"combobox\"]');\n    if (root) {\n      root.dispatchEvent(\n        new CustomEvent(\"combobox:set\", { detail: { value: null } }),\n      );\n    }\n  });\n</script>\n",
+      "content": "---\n/**\n * @component Combobox\n * @title Combobox\n * @description A searchable dropdown (autocomplete) that lets users filter and select from a list of options with full keyboard navigation and accessibility support.\n *\n * @preview\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *       <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       <ComboboxItem value=\"remix\">Remix</ComboboxItem>\n *       <ComboboxItem value=\"svelte\">SvelteKit</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   Combobox,\n *   ComboboxInput,\n *   ComboboxContent,\n *   ComboboxList,\n *   ComboboxItem,\n *   ComboboxEmpty,\n *   ComboboxGroup,\n *   ComboboxLabel,\n *   ComboboxSeparator,\n * } from '@bejamas/ui/components/combobox';\n * ---\n *\n * <Combobox name=\"framework\">\n *   <ComboboxInput placeholder=\"Select framework...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n * ```\n *\n * @api\n *\n * ### Events\n *\n * The combobox emits custom events that you can listen to:\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `combobox:change` | `{ value: string \\| null }` | Fired when a new value is selected |\n * | `combobox:open-change` | `{ open: boolean }` | Fired when the dropdown opens or closes |\n * | `combobox:input-change` | `{ inputValue: string }` | Fired when the user types in the input |\n *\n * ```astro nocollapse\n * <Combobox id=\"my-combobox\">\n *   <ComboboxInput placeholder=\"Search...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxItem value=\"option1\">Option 1</ComboboxItem>\n *       <ComboboxItem value=\"option2\">Option 2</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * <script>\n *   const combobox = document.getElementById('my-combobox');\n *\n *   combobox.addEventListener('combobox:change', (e) => {\n *     console.log('Selected value:', e.detail.value);\n *   });\n *\n *   combobox.addEventListener('combobox:input-change', (e) => {\n *     console.log('Input text:', e.detail.inputValue);\n *   });\n * </script>\n * ```\n *\n * ### Programmatic Control\n *\n * You can control the combobox programmatically by dispatching a `combobox:set` event:\n *\n * ```js nocollapse\n * const combobox = document.getElementById('my-combobox');\n *\n * // Set a specific value\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { value: 'option2' }\n * }));\n *\n * // Clear the value\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { value: null }\n * }));\n *\n * // Open the dropdown\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { open: true }\n * }));\n *\n * // Set the input text\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: { inputValue: 'search term' }\n * }));\n *\n * // Custom display text for selected value\n * // itemToStringValue — (item: HTMLElement | null, value: string | null) => string\n * // Controls what text appears in the input after selection.\n * // Useful when items contain rich content (icons, descriptions).\n * combobox.dispatchEvent(new CustomEvent('combobox:set', {\n *   detail: {\n *     itemToStringValue: (item, value) => value ? `TZ: ${value}` : ''\n *   }\n * }));\n * ```\n *\n * ### Data Attributes\n *\n * The combobox sets these data attributes that you can use for styling or querying state:\n *\n * | Attribute | Element | Description |\n * |-----------|---------|-------------|\n * | `data-state` | combobox, combobox-content | Current state (`open` or `closed`) |\n * | `data-value` | combobox | Currently selected value |\n * | `data-selected` | combobox-item | Present when item is selected |\n * | `data-highlighted` | combobox-item | Present when item is focused/highlighted |\n * | `data-disabled` | combobox, combobox-item | Present when disabled |\n * | `data-empty` | combobox-content | Present when no items match the filter |\n *\n * ### Positioning\n *\n * Placement options are configured on `ComboboxContent`:\n *\n * ```astro nocollapse nopreview\n * <Combobox>\n *   <ComboboxInput />\n *   <ComboboxContent side=\"top\" align=\"start\" sideOffset={8}>\n *     ...\n *   </ComboboxContent>\n * </Combobox>\n * ```\n *\n * @examples\n *\n * ### Clear Button\n *\n * Use the `showClear` prop to show a clear button in the input.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" showClear />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *       <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       <ComboboxItem value=\"remix\">Remix</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Sizing\n *\n * Use the `size` prop on `ComboboxInput` to match button/input sizing.\n *\n * <div class=\"grid w-full max-w-sm gap-3\">\n *   <Combobox>\n *     <ComboboxInput size=\"sm\" placeholder=\"Small (h-8)\" />\n *     <ComboboxContent>\n *       <ComboboxList>\n *         <ComboboxItem value=\"astro-sm\">Astro</ComboboxItem>\n *         <ComboboxItem value=\"next-sm\">Next.js</ComboboxItem>\n *       </ComboboxList>\n *     </ComboboxContent>\n *   </Combobox>\n *   <Combobox>\n *     <ComboboxInput placeholder=\"Default (h-9)\" />\n *     <ComboboxContent>\n *       <ComboboxList>\n *         <ComboboxItem value=\"astro-default\">Astro</ComboboxItem>\n *         <ComboboxItem value=\"next-default\">Next.js</ComboboxItem>\n *       </ComboboxList>\n *     </ComboboxContent>\n *   </Combobox>\n *   <Combobox>\n *     <ComboboxInput size=\"lg\" placeholder=\"Large (h-10)\" />\n *     <ComboboxContent>\n *       <ComboboxList>\n *         <ComboboxItem value=\"astro-lg\">Astro</ComboboxItem>\n *         <ComboboxItem value=\"next-lg\">Next.js</ComboboxItem>\n *       </ComboboxList>\n *     </ComboboxContent>\n *   </Combobox>\n * </div>\n *\n * ### Groups\n *\n * Use the `ComboboxGroup` and `ComboboxLabel` to group items and add a label to the group.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxGroup>\n *         <ComboboxLabel>Frontend</ComboboxLabel>\n *         <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *         <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *         <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       </ComboboxGroup>\n *       <ComboboxSeparator />\n *       <ComboboxGroup>\n *         <ComboboxLabel>Backend</ComboboxLabel>\n *         <ComboboxItem value=\"express\">Express</ComboboxItem>\n *         <ComboboxItem value=\"hono\">Hono</ComboboxItem>\n *       </ComboboxGroup>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Invalid\n *\n * Use the `aria-invalid=\"true\"` attribute on the `ComboboxInput` to mark the combobox as invalid.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" aria-invalid=\"true\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Disabled\n *\n * Use the `disabled` prop to disable the combobox.\n *\n * <Combobox disabled class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Select framework...\" disabled />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Auto Highlight\n *\n * Use the `autoHighlight` prop to automatically highlight the first item on filter.\n *\n * <Combobox autoHighlight class=\"w-[200px]\">\n *   <ComboboxInput placeholder=\"Start typing...\" />\n *   <ComboboxContent>\n *     <ComboboxList>\n *       <ComboboxEmpty>No results found.</ComboboxEmpty>\n *       <ComboboxItem value=\"astro\">Astro</ComboboxItem>\n *       <ComboboxItem value=\"next\">Next.js</ComboboxItem>\n *       <ComboboxItem value=\"nuxt\">Nuxt</ComboboxItem>\n *       <ComboboxItem value=\"remix\">Remix</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n *\n * ### Search in Popup\n *\n * You can trigger the combobox from a button or any other component by using the render prop. Move the `ComboboxInput` inside the `ComboboxContent`.\n *\n * <Combobox class=\"w-[200px]\">\n *   <ComboboxTrigger>\n *     <ComboboxValue placeholder=\"Select country...\" />\n *   </ComboboxTrigger>\n *   <ComboboxContent>\n *     <ComboboxInput showTrigger={false} placeholder=\"Search countries...\" />\n *     <ComboboxList>\n *       <ComboboxEmpty>No countries found.</ComboboxEmpty>\n *       <ComboboxItem value=\"brazil\" label=\"Brazil\">Brazil</ComboboxItem>\n *       <ComboboxItem value=\"canada\" label=\"Canada\">Canada</ComboboxItem>\n *       <ComboboxItem value=\"france\" label=\"France\">France</ComboboxItem>\n *       <ComboboxItem value=\"germany\" label=\"Germany\">Germany</ComboboxItem>\n *       <ComboboxItem value=\"japan\" label=\"Japan\">Japan</ComboboxItem>\n *     </ComboboxList>\n *   </ComboboxContent>\n * </Combobox>\n */\n\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  class?: string;\n  name?: string;\n  defaultValue?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  required?: boolean;\n  openOnFocus?: boolean;\n  autoHighlight?: boolean;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  name,\n  defaultValue,\n  placeholder,\n  disabled = false,\n  required = false,\n  openOnFocus,\n  autoHighlight,\n  ...rest\n} = Astro.props as Props;\n---\n\n<div\n  {...rest}\n  data-slot=\"combobox\"\n  data-name={name}\n  data-default-value={defaultValue}\n  data-placeholder={placeholder}\n  data-disabled={disabled ? \"\" : undefined}\n  data-required={required ? \"\" : undefined}\n  data-open-on-focus={openOnFocus !== undefined\n    ? String(openOnFocus)\n    : undefined}\n  data-auto-highlight={autoHighlight !== undefined\n    ? String(autoHighlight)\n    : undefined}\n  class={cn(\"group/combobox relative inline-block\", className)}\n>\n  <slot />\n</div>\n\n<script>\n  import { createCombobox } from \"@data-slot/combobox\";\n\n  document.querySelectorAll('[data-slot=\"combobox\"]').forEach((el) => {\n    createCombobox(el);\n  });\n\n  // Clear button delegation\n  document.addEventListener(\"click\", (e) => {\n    const target = e.target as Element;\n    const clear = target.closest('[data-slot=\"combobox-clear\"]');\n    if (!clear) return;\n    const root = clear.closest('[data-slot=\"combobox\"]');\n    if (root) {\n      root.dispatchEvent(\n        new CustomEvent(\"combobox:set\", { detail: { value: null } }),\n      );\n    }\n  });\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/combobox/ComboboxInput.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  InputGroup,\n  InputGroupInput,\n  InputGroupAddon,\n  InputGroupButton,\n} from \"../input-group\";\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\";\nimport XIcon from \"@lucide/astro/icons/x\";\n\ntype Props = {\n  class?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  showTrigger?: boolean;\n  showClear?: boolean;\n} & HTMLAttributes<\"input\">;\n\nconst {\n  class: className = \"\",\n  placeholder,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...rest\n} = Astro.props as Props;\n---\n\n<InputGroup class={cn(\"w-auto\", className)}>\n  <InputGroupInput\n    data-slot=\"combobox-input\"\n    placeholder={placeholder}\n    disabled={disabled}\n    autocomplete=\"off\"\n    {...rest}\n  />\n  {\n    (showTrigger || showClear) && (\n      <InputGroupAddon align=\"inline-end\" class=\"pr-3\">\n        {showClear && (\n          <InputGroupButton\n            data-slot=\"combobox-clear\"\n            type=\"button\"\n            size=\"icon-xs\"\n            class=\"hidden [[data-value]_&]:inline-flex\"\n            aria-label=\"Clear selection\"\n          >\n            <XIcon class=\"size-3.5\" />\n          </InputGroupButton>\n        )}\n        {showTrigger && (\n          <button\n            data-slot=\"combobox-trigger\"\n            type=\"button\"\n            tabindex={-1}\n            disabled={disabled}\n            class={cn(\n              \"text-muted-foreground/80 hover:text-foreground flex items-center justify-center transition-colors\",\n              showClear && \"[[data-value]_&]:hidden\",\n            )}\n            aria-label=\"Toggle menu\"\n          >\n            <ChevronDownIcon class=\"size-4\" />\n          </button>\n        )}\n      </InputGroupAddon>\n    )\n  }\n</InputGroup>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  InputGroup,\n  InputGroupInput,\n  InputGroupAddon,\n  InputGroupButton,\n} from \"../input-group\";\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\";\nimport XIcon from \"@lucide/astro/icons/x\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  placeholder?: string;\n  disabled?: boolean;\n  showTrigger?: boolean;\n  showClear?: boolean;\n} & Omit<HTMLAttributes<\"input\">, \"size\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  placeholder,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...rest\n} = Astro.props as Props;\n---\n\n<InputGroup size={size} class={cn(\"w-auto\", className)}>\n  <InputGroupInput\n    data-slot=\"combobox-input\"\n    placeholder={placeholder}\n    disabled={disabled}\n    autocomplete=\"off\"\n    {...rest}\n  />\n  {\n    (showTrigger || showClear) && (\n      <InputGroupAddon align=\"inline-end\">\n        {showClear && (\n          <InputGroupButton\n            data-slot=\"combobox-clear\"\n            type=\"button\"\n            size=\"icon-xs\"\n            class=\"hidden [[data-value]_&]:inline-flex\"\n            aria-label=\"Clear selection\"\n          >\n            <XIcon class=\"size-3.5 group-data-[size=sm]/input-group:size-3\" />\n          </InputGroupButton>\n        )}\n        {showTrigger && (\n          <InputGroupButton\n            data-slot=\"combobox-trigger\"\n            type=\"button\"\n            size=\"icon-xs\"\n            tabindex={-1}\n            disabled={disabled}\n            class={cn(\n              \"text-muted-foreground\",\n              showClear && \"[[data-value]_&]:hidden\",\n            )}\n            aria-label=\"Toggle menu\"\n          >\n            <ChevronDownIcon\n              data-slot=\"combobox-icon\"\n              class=\"size-4 group-data-[size=sm]/input-group:size-3.5\"\n            />\n          </InputGroupButton>\n        )}\n      </InputGroupAddon>\n    )\n  }\n</InputGroup>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/combobox/ComboboxContent.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  class?: string;\n  side?: \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n  alignOffset?: number;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset = 0,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva(\n  [\n    \"z-50 hidden data-[state=open]:block [transition:display_150ms_allow-discrete] starting:data-[state=closed]:block outline-hidden\",\n    \"bg-popover text-popover-foreground min-w-[var(--combobox-input-width,8rem)] overflow-hidden rounded-lg shadow-md ring-1 ring-foreground/10\",\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n    \"origin-(--transform-origin)\",\n    \"*:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n    \"[--tw-animation-fill-mode:both]\",\n  ],\n  {\n    variants: {\n      side: {\n        top: \"data-[side=top]:slide-in-from-bottom-2\",\n        bottom: \"data-[side=bottom]:slide-in-from-top-2\",\n      },\n    },\n    defaultVariants: {\n      side: \"bottom\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  data-slot=\"combobox-content\"\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  hidden\n  class={cn(contentVariants({ side }), className)}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  class?: string;\n  side?: \"top\" | \"bottom\";\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n  alignOffset?: number;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  side = \"bottom\",\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset = 0,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva(\n  [\n    \"z-50 outline-hidden\",\n    \"bg-popover text-popover-foreground min-w-[var(--combobox-input-width,8rem)] overflow-hidden rounded-lg shadow-md ring-1 ring-foreground/10\",\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n    \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n    \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n    \"origin-(--transform-origin)\",\n    \"*:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:shadow-none\",\n    \"[--tw-animation-fill-mode:both]\",\n  ],\n  {\n    variants: {\n      side: {\n        top: \"data-[side=top]:slide-in-from-bottom-2\",\n        bottom: \"data-[side=bottom]:slide-in-from-top-2\",\n      },\n    },\n    defaultVariants: {\n      side: \"bottom\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  data-slot=\"combobox-content\"\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  hidden\n  class={cn(contentVariants({ side }), className)}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
@@ -55,7 +55,7 @@
     },
     {
       "path": "ui/combobox/ComboboxTrigger.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n} & HTMLAttributes<\"button\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  type=\"button\"\n  data-slot=\"combobox-trigger\"\n  data-size={size}\n  class={cn(\n    \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:ring-[3px]\",\n    \"flex w-full items-center justify-between gap-1.5 rounded-lg border bg-transparent px-3 py-2 text-sm shadow-xs\",\n    \"whitespace-nowrap outline-none select-none transition-colors\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10\",\n    \"*:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-1.5\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n    className,\n  )}\n>\n  <slot />\n  <ChevronDownIcon class=\"size-4 text-muted-foreground\" data-slot=\"combobox-icon\" />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n} & HTMLAttributes<\"button\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  type=\"button\"\n  data-slot=\"combobox-trigger\"\n  data-size={size}\n  class={cn(\n    \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:ring-[3px]\",\n    \"group/combobox-trigger flex w-full items-center justify-between gap-1.5 rounded-lg border bg-transparent px-3 py-2 text-sm shadow-xs\",\n    \"whitespace-nowrap outline-none select-none transition-colors\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10\",\n    \"*:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-1.5\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n    className,\n  )}\n>\n  <slot />\n  <span\n    data-slot=\"combobox-trigger-indicator\"\n    data-size={size}\n    class={cn(\n      \"inline-flex items-center justify-center rounded-[calc(var(--radius)-3px)] text-muted-foreground transition-colors\",\n      \"data-[size=sm]:size-6 data-[size=default]:size-7 data-[size=lg]:size-8\",\n      \"group-hover/combobox-trigger:bg-secondary group-focus-visible/combobox-trigger:bg-secondary\",\n    )}\n  >\n    <ChevronDownIcon class=\"size-4\" data-slot=\"combobox-icon\" />\n  </span>\n</button>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/dropdown-menu.json b/apps/web/public/r/dropdown-menu.json
index 1c88acb..5cfd778 100644
--- a/apps/web/public/r/dropdown-menu.json
+++ b/apps/web/public/r/dropdown-menu.json
@@ -15,7 +15,7 @@
     },
     {
       "path": "ui/dropdown-menu/DropdownMenuContent.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  \"z-50 hidden data-[state=open]:block [transition:display_150ms_allow-discrete] starting:data-[state=closed]:block outline-hidden\",\n  \"min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\",\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div\n  {...rest}\n  data-slot=\"dropdown-menu-content\"\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(contentVariants(), className)}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  \"z-50 outline-hidden\",\n  \"min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\",\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div\n  {...rest}\n  hidden\n  data-slot=\"dropdown-menu-content\"\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(contentVariants(), className)}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/hover-card.json b/apps/web/public/r/hover-card.json
index 1d05068..932ddc4 100644
--- a/apps/web/public/r/hover-card.json
+++ b/apps/web/public/r/hover-card.json
@@ -12,7 +12,7 @@
     },
     {
       "path": "ui/hover-card/HoverCardContent.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  // visibility\n  \"duration-150 ease transition-discrete outline-hidden\",\n  // animations\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  // styles\n  \"ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1\",\n  // origin from positioner\n  \"origin-(--transform-origin)\",\n]);\n---\n\n<div data-slot=\"hover-card-portal\">\n  <div data-slot=\"hover-card-positioner\" class=\"isolate z-50\">\n    <div\n      {...rest}\n      hidden\n      data-slot=\"hover-card-content\"\n      data-side={side}\n      data-side-offset={sideOffset}\n      data-align={align}\n      data-align-offset={alignOffset}\n      class={cn(contentVariants(), className)}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  // visibility\n  \"duration-150 ease data-instant:duration-0 transition-discrete outline-hidden\",\n  // animations\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"data-[instant]:transition-none! data-[instant]:animate-none!\",\n  \"data-instant:data-[state=closed]:animate-none! data-instant:data-[state=closed]:fade-out-0! data-instant:data-[state=closed]:opacity-100! data-instant:data-[state=closed]:scale-100! data-instant:data-[state=closed]:translate-x-0! data-instant:data-[state=closed]:translate-y-0!\",\n  // styles\n  \"ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1\",\n  // origin from positioner\n  \"origin-(--transform-origin)\",\n]);\n---\n\n<div data-slot=\"hover-card-portal\">\n  <div data-slot=\"hover-card-positioner\" class=\"isolate z-50\">\n    <div\n      {...rest}\n      hidden\n      data-slot=\"hover-card-content\"\n      data-side={side}\n      data-side-offset={sideOffset}\n      data-align={align}\n      data-align-offset={alignOffset}\n      class={cn(contentVariants(), className)}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/input-group.json b/apps/web/public/r/input-group.json
index 1cf7780..7719ed0 100644
--- a/apps/web/public/r/input-group.json
+++ b/apps/web/public/r/input-group.json
@@ -5,32 +5,32 @@
   "files": [
     {
       "path": "ui/input-group/InputGroup.astro",
-      "content": "---\n/**\n * @component InputGroup\n * @title Input Group\n * @description An input field with attached addons like icons, buttons, or text labels.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-20918&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <div class=\"grid w-full max-w-sm gap-6\">\n *   <InputGroup>\n *     <InputGroupInput placeholder=\"Search...\" />\n *     <InputGroupAddon>\n *       <SearchIcon />\n *     </InputGroupAddon>\n *     <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n *   </InputGroup>\n *\n *   <InputGroup>\n *     <InputGroupInput placeholder=\"example.com\" class=\"!pl-1\" />\n *     <InputGroupAddon>\n *       <InputGroupText>https://</InputGroupText>\n *     </InputGroupAddon>\n *     <InputGroupAddon align=\"inline-end\">\n *       <InputGroupButton size=\"xs\">Check</InputGroupButton>\n *     </InputGroupAddon>\n *   </InputGroup>\n *\n *   <InputGroup>\n *     <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n *     <InputGroupAddon align=\"block-end\">\n *       <InputGroupButton size=\"icon-xs\" class=\"rounded-full\">\n *         <PlusIcon />\n *       </InputGroupButton>\n *       <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n *       <InputGroupText class=\"ml-auto\">52% used</InputGroupText>\n *       <Separator orientation=\"vertical\" class=\"!h-4\" />\n *       <InputGroupButton size=\"icon-xs\" variant=\"default\" class=\"rounded-full\">\n *         <ArrowUpIcon />\n *         <span class=\"sr-only\">Send</span>\n *       </InputGroupButton>\n *     </InputGroupAddon>\n *   </InputGroup>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from '@bejamas/ui/components/input-group';\n * ---\n *\n * <InputGroup>\n *   <InputGroupInput placeholder=\"Search...\" />\n *   <InputGroupAddon><SearchIcon /></InputGroupAddon>\n * </InputGroup>\n * ```\n */\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst rootClasses =\n  \"border-input dark:bg-input/30 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]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\";\n---\n\n<Tag\n  {...rest}\n  role=\"group\"\n  data-slot=\"input-group\"\n  class={cn(rootClasses, className)}\n>\n  <slot />\n</Tag>\n\n<script type=\"module\">\n  // Focus the nearest input when clicking on addons (unless clicking a button)\n  document.addEventListener(\"click\", (e) => {\n    const addon = e.target.closest(\"[data-slot='input-group-addon']\");\n    if (!addon) return;\n    if (e.target.closest(\"button\")) return;\n    const root = addon.closest(\"[data-slot='input-group']\");\n    if (!root) return;\n    const input = root.querySelector(\"[data-slot='input-group-control']\");\n    input?.focus();\n  });\n  // Disabled styling passthrough when any control is disabled\n  document.querySelectorAll(\"[data-slot='input-group']\").forEach((group) => {\n    const updateDisabled = () => {\n      const ctrl = group.querySelector(\"[data-slot='input-group-control']\");\n      group.dataset.disabled = ctrl?.hasAttribute(\"disabled\")\n        ? \"true\"\n        : \"false\";\n    };\n    updateDisabled();\n    group.addEventListener(\"change\", updateDisabled, { capture: true });\n  });\n</script>\n",
+      "content": "---\n/**\n * @component InputGroup\n * @title Input Group\n * @description An input field with attached addons like icons, buttons, or text labels.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2549-20918&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <div class=\"grid w-full max-w-sm gap-6\">\n *   <InputGroup>\n *     <InputGroupInput placeholder=\"Search...\" />\n *     <InputGroupAddon>\n *       <SearchIcon />\n *     </InputGroupAddon>\n *     <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n *   </InputGroup>\n *\n *   <InputGroup>\n *     <InputGroupInput placeholder=\"example.com\" />\n *     <InputGroupAddon>\n *       <InputGroupText>https://</InputGroupText>\n *     </InputGroupAddon>\n *     <InputGroupAddon align=\"inline-end\">\n *       <InputGroupButton size=\"xs\">Check</InputGroupButton>\n *     </InputGroupAddon>\n *   </InputGroup>\n *\n *   <InputGroup>\n *     <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n *     <InputGroupAddon align=\"block-end\">\n *       <InputGroupButton size=\"icon-xs\" class=\"rounded-full\">\n *         <PlusIcon />\n *       </InputGroupButton>\n *       <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n *       <InputGroupText class=\"ml-auto\">52% used</InputGroupText>\n *       <Separator orientation=\"vertical\" class=\"!h-4\" />\n *       <InputGroupButton size=\"icon-xs\" variant=\"default\" class=\"rounded-full\">\n *         <ArrowUpIcon />\n *         <span class=\"sr-only\">Send</span>\n *       </InputGroupButton>\n *     </InputGroupAddon>\n *   </InputGroup>\n * </div>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText } from '@bejamas/ui/components/input-group';\n * ---\n *\n * <InputGroup>\n *   <InputGroupInput placeholder=\"Search...\" />\n *   <InputGroupAddon><SearchIcon /></InputGroupAddon>\n * </InputGroup>\n * ```\n *\n * @examples\n *\n * ### Sizes\n *\n * <div class=\"grid w-full max-w-sm gap-3\">\n *   <InputGroup size=\"sm\">\n *     <InputGroupInput placeholder=\"Small (h-8)\" />\n *   </InputGroup>\n *   <InputGroup>\n *     <InputGroupInput placeholder=\"Default (h-9)\" />\n *   </InputGroup>\n *   <InputGroup size=\"lg\">\n *     <InputGroupInput placeholder=\"Large (h-10)\" />\n *   </InputGroup>\n * </div>\n *\n * @api\n *\n * | Prop | Type | Default |\n * | --- | --- | --- |\n * | `size` | `\"sm\" \\| \"default\" \\| \"lg\"` | `\"default\"` |\n */\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  as?: HTMLTag;\n  size?: VariantProps<typeof inputGroupVariants>[\"size\"];\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  size = \"default\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst inputGroupVariants = cva(\n  \"border-input dark:bg-input/30 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]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 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 group/input-group relative flex w-full min-w-0 items-center outline-none\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 has-[>[data-align=block-end]]:[&>input[data-slot=input-group-control]]:pt-2 has-[>[data-align=block-start]]:[&>input[data-slot=input-group-control]]:pb-2 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\",\n        default:\n          \"h-9 has-[>[data-align=block-end]]:[&>input[data-slot=input-group-control]]:pt-2.5 has-[>[data-align=block-start]]:[&>input[data-slot=input-group-control]]:pb-2.5 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\",\n        lg: \"h-10 has-[>[data-align=block-end]]:[&>input[data-slot=input-group-control]]:pt-3 has-[>[data-align=block-start]]:[&>input[data-slot=input-group-control]]:pb-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  },\n);\n---\n\n<Tag\n  {...rest}\n  role=\"group\"\n  data-slot=\"input-group\"\n  data-size={size}\n  class={cn(inputGroupVariants({ size }), className)}\n>\n  <slot />\n</Tag>\n\n<script type=\"module\">\n  // Focus the nearest input when clicking on addons (unless clicking a button)\n  document.addEventListener(\"click\", (e) => {\n    const addon = e.target.closest(\"[data-slot='input-group-addon']\");\n    if (!addon) return;\n    if (e.target.closest(\"button\")) return;\n    const root = addon.closest(\"[data-slot='input-group']\");\n    if (!root) return;\n    const input = root.querySelector(\"[data-slot='input-group-control']\");\n    input?.focus();\n  });\n  // Disabled styling passthrough when any control is disabled\n  document.querySelectorAll(\"[data-slot='input-group']\").forEach((group) => {\n    const updateDisabled = () => {\n      const ctrl = group.querySelector(\"[data-slot='input-group-control']\");\n      group.dataset.disabled = ctrl?.hasAttribute(\"disabled\")\n        ? \"true\"\n        : \"false\";\n    };\n    updateDisabled();\n    group.addEventListener(\"change\", updateDisabled, { capture: true });\n  });\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/input-group/InputGroupAddon.astro",
-      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\ntype Align = \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\";\n\ntype Props = {\n  align?: Align;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  align = \"inline-start\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst addonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:mb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:mt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  role=\"group\"\n  data-slot=\"input-group-addon\"\n  data-align={align}\n  class={cn(addonVariants({ align }), className)}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\ntype Align = \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\";\n\ntype Props = {\n  align?: Align;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  align = \"inline-start\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst addonVariants = cva(\n  \"text-muted-foreground h-auto group-data-[size=sm]/input-group:py-1.5 group-data-[size=default]/input-group:py-2 group-data-[size=lg]/input-group:py-2.5 gap-2 font-medium group-data-[size=sm]/input-group:text-xs group-data-[size=default]/input-group:text-sm group-data-[size=lg]/input-group:text-base group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[button]:ml-[-0.3rem] has-[[data-slot=input-group-button]]:ml-[-0.3rem] has-[kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[button]:mr-[-0.3rem] has-[[data-slot=input-group-button]]:mr-[-0.3rem] has-[kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start group-data-[size=sm]/input-group:px-2.5 group-data-[size=default]/input-group:px-3 group-data-[size=lg]/input-group:px-3.5 pt-2 group-has-[>[data-slot=input-group-control]]/input-group:pt-2 [.border-b]:mb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start group-data-[size=sm]/input-group:px-2.5 group-data-[size=default]/input-group:px-3 group-data-[size=lg]/input-group:px-3.5 pb-2 group-has-[>[data-slot=input-group-control]]/input-group:pb-2 [.border-t]:mt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  role=\"group\"\n  data-slot=\"input-group-addon\"\n  data-align={align}\n  class={cn(addonVariants({ align }), className)}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/input-group/InputGroupButton.astro",
-      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\n\ntype GroupButtonSize = \"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\";\n\ntype Props = {\n  as?: HTMLTag;\n  size?: GroupButtonSize;\n  variant?:\n    | \"default\"\n    | \"secondary\"\n    | \"outline\"\n    | \"ghost\"\n    | \"destructive\"\n    | \"link\";\n  type?: \"button\" | \"submit\" | \"reset\";\n  class?: string;\n} & HTMLAttributes<\"button\">;\n\nconst {\n  as: rawTag,\n  size = \"xs\",\n  variant = \"ghost\",\n  type = \"button\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] 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);\n\nconst Tag = rawTag ?? undefined;\n---\n\n{\n  Tag ? (\n    <Tag\n      {...rest}\n      data-slot=\"input-group-button\"\n      class={cn(inputGroupButtonVariants({ size }), className)}\n    >\n      <slot />\n    </Tag>\n  ) : (\n    <Button\n      type={type}\n      variant={variant}\n      data-size={size}\n      data-slot=\"input-group-button\"\n      class={cn(inputGroupButtonVariants({ size }), className)}\n      {...(rest as any)}\n    >\n      <slot />\n    </Button>\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"../button\";\n\ntype GroupButtonSize = \"xs\" | \"sm\" | \"icon-xs\" | \"icon-sm\";\n\ntype Props = {\n  as?: HTMLTag;\n  size?: GroupButtonSize;\n  variant?:\n    | \"default\"\n    | \"secondary\"\n    | \"outline\"\n    | \"ghost\"\n    | \"destructive\"\n    | \"link\";\n  type?: \"button\" | \"submit\" | \"reset\";\n  class?: string;\n} & HTMLAttributes<\"button\">;\n\nconst {\n  as: rawTag,\n  size = \"xs\",\n  variant = \"ghost\",\n  type = \"button\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst inputGroupButtonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"rounded-[calc(var(--radius)-3px)] group-data-[size=sm]/input-group:h-6 group-data-[size=sm]/input-group:gap-1 group-data-[size=sm]/input-group:px-1.5 group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5 group-data-[size=default]/input-group:h-7 group-data-[size=default]/input-group:gap-1.5 group-data-[size=default]/input-group:px-2 group-data-[size=default]/input-group:text-sm group-data-[size=default]/input-group:[&>svg:not([class*='size-'])]:size-4 group-data-[size=lg]/input-group:h-8 group-data-[size=lg]/input-group:gap-1.5 group-data-[size=lg]/input-group:px-2.5 group-data-[size=lg]/input-group:text-base group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-4\",\n        sm: \"rounded-[calc(var(--radius)-2px)] group-data-[size=sm]/input-group:h-7 group-data-[size=sm]/input-group:gap-1.5 group-data-[size=sm]/input-group:px-2.5 group-data-[size=sm]/input-group:text-xs group-data-[size=default]/input-group:h-8 group-data-[size=default]/input-group:gap-1.5 group-data-[size=default]/input-group:px-3 group-data-[size=default]/input-group:text-sm group-data-[size=lg]/input-group:h-9 group-data-[size=lg]/input-group:gap-2 group-data-[size=lg]/input-group:px-3.5 group-data-[size=lg]/input-group:text-base\",\n        \"icon-xs\":\n          \"rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0 group-data-[size=sm]/input-group:size-6 group-data-[size=default]/input-group:size-7 group-data-[size=lg]/input-group:size-8\",\n        \"icon-sm\":\n          \"p-0 has-[>svg]:p-0 group-data-[size=sm]/input-group:size-7 group-data-[size=default]/input-group:size-8 group-data-[size=lg]/input-group:size-9\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  },\n);\n\nconst Tag = rawTag ?? undefined;\n---\n\n{\n  Tag ? (\n    <Tag\n      {...rest}\n      data-slot=\"input-group-button\"\n      class={cn(inputGroupButtonVariants({ size }), className)}\n    >\n      <slot />\n    </Tag>\n  ) : (\n    <Button\n      type={type}\n      variant={variant}\n      data-slot=\"input-group-button\"\n      class={cn(inputGroupButtonVariants({ size }), className)}\n      {...(rest as any)}\n    >\n      <slot />\n    </Button>\n  )\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/input-group/InputGroupInput.astro",
-      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"../input\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"input\">;\n\nconst { as: rawTag, class: className = \"\", ...rest } = Astro.props as Props;\n\nconst Tag = rawTag ?? undefined;\n---\n\n{\n  Tag ? (\n    <Tag\n      {...rest}\n      data-slot=\"input-group-control\"\n      class={cn(\n        \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n        className,\n      )}\n    />\n  ) : (\n    <Input\n      data-slot=\"input-group-control\"\n      class={cn(\n        \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\",\n        className,\n      )}\n      {...(rest as any)}\n    />\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"../input\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"input\">;\n\nconst { as: rawTag, class: className = \"\", ...rest } = Astro.props as Props;\n\nconst Tag = rawTag ?? undefined;\n\nconst controlClasses =\n  \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 min-w-0 group-data-[size=sm]/input-group:h-8 group-data-[size=sm]/input-group:px-2.5 group-data-[size=sm]/input-group:py-1 group-data-[size=sm]/input-group:text-xs group-data-[size=default]/input-group:h-9 group-data-[size=default]/input-group:px-3 group-data-[size=default]/input-group:py-1 group-data-[size=default]/input-group:text-sm group-data-[size=lg]/input-group:h-10 group-data-[size=lg]/input-group:px-3.5 group-data-[size=lg]/input-group:py-1.5 group-data-[size=lg]/input-group:text-base\";\n---\n\n{\n  Tag ? (\n    <Tag\n      {...rest}\n      data-slot=\"input-group-control\"\n      class={cn(controlClasses, className)}\n    />\n  ) : (\n    <Input\n      data-slot=\"input-group-control\"\n      class={cn(controlClasses, className)}\n      {...(rest as any)}\n    />\n  )\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/input-group/InputGroupText.astro",
-      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  class?: string;\n} & HTMLAttributes<\"span\">;\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<span\n  {...rest}\n  data-slot=\"input-group-text\"\n  class={cn(\n    \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n    className,\n  )}\n>\n  <slot />\n</span>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  class?: string;\n} & HTMLAttributes<\"span\">;\n\nconst { class: className = \"\", ...rest } = Astro.props as Props;\n---\n\n<span\n  {...rest}\n  data-slot=\"input-group-text\"\n  class={cn(\n    \"text-muted-foreground group-data-[size=sm]/input-group:gap-1.5 group-data-[size=default]/input-group:gap-2 group-data-[size=lg]/input-group:gap-2.5 group-data-[size=sm]/input-group:text-xs group-data-[size=default]/input-group:text-sm group-data-[size=lg]/input-group:text-base [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/input-group:[&_svg:not([class*='size-'])]:size-3.5 group-data-[size=lg]/input-group:[&_svg:not([class*='size-'])]:size-[18px] flex items-center [&_svg]:pointer-events-none\",\n    className,\n  )}\n>\n  <slot />\n</span>\n",
       "type": "registry:ui"
     },
     {
       "path": "ui/input-group/InputGroupTextarea.astro",
-      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { Textarea } from \"../textarea\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"textarea\">;\n\nconst {\n  as: rawTag,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst Tag = rawTag ?? undefined;\n---\n\n{Tag ? (\n  <Tag\n    {...rest}\n    data-slot=\"input-group-control\"\n    class={cn(\n      \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n      className,\n    )}\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-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\n      className,\n    )}\n    {...(rest as any)}\n  />\n)}\n\n",
+      "content": "---\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { Textarea } from \"../textarea\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"textarea\">;\n\nconst { as: rawTag, class: className = \"\", ...rest } = Astro.props as Props;\n\nconst Tag = rawTag ?? undefined;\n\nconst textareaClasses =\n  \"flex-1 min-w-0 resize-none rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent dark:disabled:bg-transparent group-data-[size=sm]/input-group:px-2.5 group-data-[size=sm]/input-group:py-2 group-data-[size=sm]/input-group:text-xs group-data-[size=default]/input-group:px-3 group-data-[size=default]/input-group:py-2.5 group-data-[size=default]/input-group:text-sm group-data-[size=lg]/input-group:px-3.5 group-data-[size=lg]/input-group:py-3 group-data-[size=lg]/input-group:text-base\";\n---\n\n{\n  Tag ? (\n    <Tag\n      {...rest}\n      data-slot=\"input-group-control\"\n      class={cn(textareaClasses, className)}\n    />\n  ) : (\n    <Textarea\n      data-slot=\"input-group-control\"\n      class={cn(textareaClasses, className)}\n      {...(rest as any)}\n    />\n  )\n}\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/link-group.json b/apps/web/public/r/link-group.json
index 74cbef2..8668370 100644
--- a/apps/web/public/r/link-group.json
+++ b/apps/web/public/r/link-group.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "ui/link-group/LinkGroup.astro",
-      "content": "---\n/**\n * @component LinkGroup\n * @title Link Group\n * @description A group of related links with optional title for navigation or footer sections.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2166-6001&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <LinkGroup>\n *   <LinkGroupTitle>Company</LinkGroupTitle>\n *   <LinkGroupList>\n *     <LinkGroupItem><a href=\"/\">Home</a></LinkGroupItem>\n *     <LinkGroupItem><a href=\"/about\">About</a></LinkGroupItem>\n *   </LinkGroupList>\n * </LinkGroup>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';\n * ---\n *\n * <LinkGroup>\n *   <LinkGroupTitle>Company</LinkGroupTitle>\n *   <LinkGroupList>\n *     <LinkGroupItem><a href=\"/\">Home</a></LinkGroupItem>\n *   </LinkGroupList>\n * </LinkGroup>\n * ```\n */\n\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"link-group\"\n  class={cn(\"flex flex-col gap-2\", className)}\n>\n  <slot />\n</Tag>\n\n",
+      "content": "---\n/**\n * @component LinkGroup\n * @title Link Group\n * @description A group of related links with optional title for navigation or footer sections.\n * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2166-6001&t=YFStJ3V8fXEO8QD8-4\n *\n * @preview\n *\n * <LinkGroup>\n *   <LinkGroupTitle>Company</LinkGroupTitle>\n *   <LinkGroupList>\n *     <LinkGroupItem><a href=\"/\">Home</a></LinkGroupItem>\n *     <LinkGroupItem><a href=\"#\">About</a></LinkGroupItem>\n *   </LinkGroupList>\n * </LinkGroup>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';\n * ---\n *\n * <LinkGroup>\n *   <LinkGroupTitle>Company</LinkGroupTitle>\n *   <LinkGroupList>\n *     <LinkGroupItem><a href=\"/\">Home</a></LinkGroupItem>\n *   </LinkGroupList>\n * </LinkGroup>\n * ```\n */\n\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  as: Tag = \"div\",\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"link-group\"\n  class={cn(\"flex flex-col gap-2\", className)}\n>\n  <slot />\n</Tag>\n\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/navigation-menu.json b/apps/web/public/r/navigation-menu.json
index 4793ef9..28dea4b 100644
--- a/apps/web/public/r/navigation-menu.json
+++ b/apps/web/public/r/navigation-menu.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/navigation-menu/NavigationMenu.astro",
-      "content": "---\n/**\n * @component NavigationMenu\n * @title Navigation Menu\n * @description A menu with dropdown content and optional viewport transitions.\n *\n * @preview\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"products\">\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"/products/analytics\">\n *             <div class=\"font-medium\">Analytics</div>\n *             <div class=\"text-sm text-muted-foreground\">Real-time insights</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/products/automation\">\n *             <div class=\"font-medium\">Automation</div>\n *             <div class=\"text-sm text-muted-foreground\">Workflow builders</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/products/security\">\n *             <div class=\"font-medium\">Security</div>\n *             <div class=\"text-sm text-muted-foreground\">Enterprise-grade</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/products/integrations\">\n *             <div class=\"font-medium\">Integrations</div>\n *             <div class=\"text-sm text-muted-foreground\">Connect tools</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"solutions\">\n *       <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"center\">\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"/solutions/startups\">\n *             <div class=\"font-medium\">Startups</div>\n *             <div class=\"text-sm text-muted-foreground\">Move fast</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/solutions/enterprise\">\n *             <div class=\"font-medium\">Enterprise</div>\n *             <div class=\"text-sm text-muted-foreground\">Scale securely</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/solutions/agencies\">\n *             <div class=\"font-medium\">Agencies</div>\n *             <div class=\"text-sm text-muted-foreground\">Client delivery</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/solutions/ecommerce\">\n *             <div class=\"font-medium\">E-commerce</div>\n *             <div class=\"text-sm text-muted-foreground\">Sell online</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"resources\">\n *       <NavigationMenuTrigger>Resources</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"center\">\n *         <div class=\"grid grid-cols-3 gap-2 w-[520px] p-2\">\n *           <NavigationMenuLink href=\"/docs\">\n *             <div class=\"font-medium\">Docs</div>\n *             <div class=\"text-sm text-muted-foreground\">Get started</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/blog\">\n *             <div class=\"font-medium\">Blog</div>\n *             <div class=\"text-sm text-muted-foreground\">Latest updates</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/support\">\n *             <div class=\"font-medium\">Support</div>\n *             <div class=\"text-sm text-muted-foreground\">Get help</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/events\">\n *             <div class=\"font-medium\">Events</div>\n *             <div class=\"text-sm text-muted-foreground\">Upcoming webinars</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/guides\">\n *             <div class=\"font-medium\">Guides</div>\n *             <div class=\"text-sm text-muted-foreground\">Best practices</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/contact\">\n *             <div class=\"font-medium\">Contact</div>\n *             <div class=\"text-sm text-muted-foreground\">Talk to us</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"company\">\n *       <NavigationMenuTrigger>Company</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"end\">\n *         <div class=\"w-[180px] p-2\">\n *           <NavigationMenuLink href=\"/about\">\n *             <div class=\"font-medium\">About</div>\n *             <div class=\"text-sm text-muted-foreground\">Our story</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/careers\">\n *             <div class=\"font-medium\">Careers</div>\n *             <div class=\"text-sm text-muted-foreground\">Join the team</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   NavigationMenu,\n *   NavigationMenuList,\n *   NavigationMenuItem,\n *   NavigationMenuTrigger,\n *   NavigationMenuContent,\n *   NavigationMenuLink,\n * } from '@bejamas/ui/components/navigation-menu';\n * ---\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"products\">\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"/products/analytics\">\n *             <div class=\"font-medium\">Analytics</div>\n *             <div class=\"text-sm text-muted-foreground\">Real-time insights</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/products/automation\">\n *             <div class=\"font-medium\">Automation</div>\n *             <div class=\"text-sm text-muted-foreground\">Workflow builders</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"resources\">\n *       <NavigationMenuTrigger>Resources</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"center\">\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"/docs\">\n *             <div class=\"font-medium\">Docs</div>\n *             <div class=\"text-sm text-muted-foreground\">Get started</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/support\">\n *             <div class=\"font-medium\">Support</div>\n *             <div class=\"text-sm text-muted-foreground\">Get help</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n * ```\n *\n * @api\n *\n * ### NavigationMenu Props\n *\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | `viewport` | `boolean` | `true` | Enable animated viewport container for content |\n * | `delayOpen` | `number` | `0` | Delay in ms before opening menu |\n * | `delayClose` | `number` | `0` | Delay in ms before closing menu |\n * | `openOnFocus` | `boolean` | `false` | Open menu on keyboard focus |\n * | `as` | `HTMLTag` | `\"nav\"` | HTML element to render |\n *\n * ### NavigationMenuItem Props\n *\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | `value` | `string` | — | Unique identifier for the item |\n * | `align` | `\"start\" \\| \"center\" \\| \"end\"` | `\"start\"` | Content alignment relative to trigger |\n *\n * ### Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `navigation-menu:change` | `{ value: string \\| null }` | Fired when active item changes |\n *\n * ### Programmatic Control\n *\n * ```js nocollapse\n * // Open a specific item\n * element.dispatchEvent(\n *   new CustomEvent(\"navigation-menu:set\", { detail: { value: \"products\" } })\n * );\n *\n * // Close the menu\n * element.dispatchEvent(\n *   new CustomEvent(\"navigation-menu:set\", { detail: { value: null } })\n * );\n * ```\n *\n * @examples\n *\n * ### With Icons\n *\n * Links with Lucide icons for visual enhancement.\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"features\">\n *       <NavigationMenuTrigger>Features</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid gap-2 w-[320px] p-2\">\n *           <NavigationMenuLink href=\"/analytics\" class=\"flex-row items-start gap-4\">\n *             <ChartBarIcon class=\"size-5 mt-1 text-muted-foreground\" />\n *             <div>\n *               <div class=\"font-medium\">Analytics</div>\n *               <div class=\"text-sm text-muted-foreground\">Track your metrics</div>\n *             </div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/automation\" class=\"flex-row items-start gap-4\">\n *             <ZapIcon class=\"size-5 mt-1 text-muted-foreground\" />\n *             <div>\n *               <div class=\"font-medium\">Automation</div>\n *               <div class=\"text-sm text-muted-foreground\">Streamline workflows</div>\n *             </div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/security\" class=\"flex-row items-start gap-4\">\n *             <ShieldIcon class=\"size-5 mt-1 text-muted-foreground\" />\n *             <div>\n *               <div class=\"font-medium\">Security</div>\n *               <div class=\"text-sm text-muted-foreground\">Enterprise-grade protection</div>\n *             </div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * ### Featured Card\n *\n * Hero-style layout with a featured item alongside regular links.\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"getting-started\">\n *       <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid grid-cols-[1fr_200px] gap-2 w-[480px] p-2\">\n *           <div class=\"row-span-3\">\n *             <NavigationMenuLink href=\"/introduction\" class=\"flex h-full flex-col rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline\">\n *               <div class=\"mb-2 text-lg font-medium\">Introduction</div>\n *               <p class=\"text-sm text-muted-foreground\">Learn the basics and get up to speed quickly with our comprehensive guides.</p>\n *             </NavigationMenuLink>\n *           </div>\n *           <NavigationMenuLink href=\"/installation\">\n *             <div class=\"font-medium\">Installation</div>\n *             <div class=\"text-sm text-muted-foreground\">Step-by-step setup</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/configuration\">\n *             <div class=\"font-medium\">Configuration</div>\n *             <div class=\"text-sm text-muted-foreground\">Customize settings</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"/examples\">\n *             <div class=\"font-medium\">Examples</div>\n *             <div class=\"text-sm text-muted-foreground\">Code samples</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * ### With Simple Links\n *\n * Use `navigationMenuTriggerStyle()` to style regular links to match triggers.\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"products\">\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"w-[200px] p-2\">\n *           <NavigationMenuLink href=\"/products/one\">Product One</NavigationMenuLink>\n *           <NavigationMenuLink href=\"/products/two\">Product Two</NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem>\n *       <NavigationMenuLink href=\"/pricing\" class=\"px-4 py-2.5 bg-transparent border-none cursor-pointer flex items-center gap-1.5 transition-colors relative z-1 hover:text-accent\">\n *         Pricing\n *       </NavigationMenuLink>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem>\n *       <NavigationMenuLink href=\"/docs\" class=\"px-4 py-2.5 bg-transparent border-none cursor-pointer flex items-center gap-1.5 transition-colors relative z-1 hover:text-accent\">\n *         Docs\n *       </NavigationMenuLink>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * ### Without Viewport\n *\n * Set `viewport={false}` to render content directly without the animated viewport container.\n *\n * <NavigationMenu viewport={false}>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"menu\">\n *       <NavigationMenuTrigger>Menu</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"w-[200px] p-2 rounded-md border bg-popover shadow-md\">\n *           <NavigationMenuLink href=\"/one\">Option One</NavigationMenuLink>\n *           <NavigationMenuLink href=\"/two\">Option Two</NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *   </NavigationMenuList>\n * </NavigationMenu>\n */\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport NavigationMenuViewport from \"./NavigationMenuViewport.astro\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n  viewport?: boolean;\n  delayOpen?: number;\n  delayClose?: number;\n  openOnFocus?: boolean;\n} & HTMLAttributes<\"nav\">;\n\nconst {\n  as: Tag = \"nav\",\n  class: className = \"\",\n  viewport = true,\n  delayOpen = 0,\n  delayClose = 50,\n  openOnFocus,\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"navigation-menu\"\n  data-viewport={viewport}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  class={cn(\"relative\", className)}\n>\n  <slot />\n  {viewport && <NavigationMenuViewport />}\n</Tag>\n\n<script>\n  import { createNavigationMenu } from \"@data-slot/navigation-menu\";\n\n  document\n    .querySelectorAll('[data-slot=\"navigation-menu\"]')\n    .forEach((el) => createNavigationMenu(el));\n</script>\n",
+      "content": "---\n/**\n * @component NavigationMenu\n * @title Navigation Menu\n * @description A menu with dropdown content and optional viewport transitions.\n *\n * @preview\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"products\">\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Analytics</div>\n *             <div class=\"text-sm text-muted-foreground\">Real-time insights</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Automation</div>\n *             <div class=\"text-sm text-muted-foreground\">Workflow builders</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Security</div>\n *             <div class=\"text-sm text-muted-foreground\">Enterprise-grade</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Integrations</div>\n *             <div class=\"text-sm text-muted-foreground\">Connect tools</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"solutions\">\n *       <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"center\">\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Startups</div>\n *             <div class=\"text-sm text-muted-foreground\">Move fast</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Enterprise</div>\n *             <div class=\"text-sm text-muted-foreground\">Scale securely</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Agencies</div>\n *             <div class=\"text-sm text-muted-foreground\">Client delivery</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">E-commerce</div>\n *             <div class=\"text-sm text-muted-foreground\">Sell online</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"resources\">\n *       <NavigationMenuTrigger>Resources</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"center\">\n *         <div class=\"grid grid-cols-3 gap-2 w-[520px] p-2\">\n *           <NavigationMenuLink href=\"/docs\">\n *             <div class=\"font-medium\">Docs</div>\n *             <div class=\"text-sm text-muted-foreground\">Get started</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Blog</div>\n *             <div class=\"text-sm text-muted-foreground\">Latest updates</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Support</div>\n *             <div class=\"text-sm text-muted-foreground\">Get help</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Events</div>\n *             <div class=\"text-sm text-muted-foreground\">Upcoming webinars</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Guides</div>\n *             <div class=\"text-sm text-muted-foreground\">Best practices</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Contact</div>\n *             <div class=\"text-sm text-muted-foreground\">Talk to us</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"company\">\n *       <NavigationMenuTrigger>Company</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"end\">\n *         <div class=\"w-[180px] p-2\">\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">About</div>\n *             <div class=\"text-sm text-muted-foreground\">Our story</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Careers</div>\n *             <div class=\"text-sm text-muted-foreground\">Join the team</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * @usage\n *\n * ```astro nocollapse\n * ---\n * import {\n *   NavigationMenu,\n *   NavigationMenuList,\n *   NavigationMenuItem,\n *   NavigationMenuTrigger,\n *   NavigationMenuContent,\n *   NavigationMenuLink,\n * } from '@bejamas/ui/components/navigation-menu';\n * ---\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"products\">\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Analytics</div>\n *             <div class=\"text-sm text-muted-foreground\">Real-time insights</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Automation</div>\n *             <div class=\"text-sm text-muted-foreground\">Workflow builders</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem value=\"resources\">\n *       <NavigationMenuTrigger>Resources</NavigationMenuTrigger>\n *       <NavigationMenuContent align=\"center\">\n *         <div class=\"grid grid-cols-2 gap-2 w-[380px] p-2\">\n *           <NavigationMenuLink href=\"/docs\">\n *             <div class=\"font-medium\">Docs</div>\n *             <div class=\"text-sm text-muted-foreground\">Get started</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Support</div>\n *             <div class=\"text-sm text-muted-foreground\">Get help</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n * ```\n *\n * @api\n *\n * ### NavigationMenu Props\n *\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | `viewport` | `boolean` | `true` | Enable animated viewport container for content |\n * | `delayOpen` | `number` | `0` | Delay in ms before opening menu |\n * | `delayClose` | `number` | `0` | Delay in ms before closing menu |\n * | `openOnFocus` | `boolean` | `false` | Open menu on keyboard focus |\n * | `as` | `HTMLTag` | `\"nav\"` | HTML element to render |\n *\n * ### NavigationMenuItem Props\n *\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | `value` | `string` | — | Unique identifier for the item |\n * | `align` | `\"start\" \\| \"center\" \\| \"end\"` | `\"start\"` | Content alignment relative to trigger |\n *\n * ### Events\n *\n * | Event | Detail | Description |\n * |-------|--------|-------------|\n * | `navigation-menu:change` | `{ value: string \\| null }` | Fired when active item changes |\n *\n * ### Programmatic Control\n *\n * ```js nocollapse\n * // Open a specific item\n * element.dispatchEvent(\n *   new CustomEvent(\"navigation-menu:set\", { detail: { value: \"products\" } })\n * );\n *\n * // Close the menu\n * element.dispatchEvent(\n *   new CustomEvent(\"navigation-menu:set\", { detail: { value: null } })\n * );\n * ```\n *\n * @examples\n *\n * ### With Icons\n *\n * Links with Lucide icons for visual enhancement.\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"features\">\n *       <NavigationMenuTrigger>Features</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid gap-2 w-[320px] p-2\">\n *           <NavigationMenuLink href=\"#\" class=\"flex-row items-start gap-4\">\n *             <ChartBarIcon class=\"size-5 mt-1 text-muted-foreground\" />\n *             <div>\n *               <div class=\"font-medium\">Analytics</div>\n *               <div class=\"text-sm text-muted-foreground\">Track your metrics</div>\n *             </div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\" class=\"flex-row items-start gap-4\">\n *             <ZapIcon class=\"size-5 mt-1 text-muted-foreground\" />\n *             <div>\n *               <div class=\"font-medium\">Automation</div>\n *               <div class=\"text-sm text-muted-foreground\">Streamline workflows</div>\n *             </div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\" class=\"flex-row items-start gap-4\">\n *             <ShieldIcon class=\"size-5 mt-1 text-muted-foreground\" />\n *             <div>\n *               <div class=\"font-medium\">Security</div>\n *               <div class=\"text-sm text-muted-foreground\">Enterprise-grade protection</div>\n *             </div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * ### Featured Card\n *\n * Hero-style layout with a featured item alongside regular links.\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"getting-started\">\n *       <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"grid grid-cols-[1fr_200px] gap-2 w-[480px] p-2\">\n *           <div class=\"row-span-3\">\n *             <NavigationMenuLink href=\"#\" class=\"flex h-full flex-col rounded-md bg-gradient-to-b from-muted/50 to-muted p-4 no-underline\">\n *               <div class=\"mb-2 text-lg font-medium\">Introduction</div>\n *               <p class=\"text-sm text-muted-foreground\">Learn the basics and get up to speed quickly with our comprehensive guides.</p>\n *             </NavigationMenuLink>\n *           </div>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Installation</div>\n *             <div class=\"text-sm text-muted-foreground\">Step-by-step setup</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Configuration</div>\n *             <div class=\"text-sm text-muted-foreground\">Customize settings</div>\n *           </NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">\n *             <div class=\"font-medium\">Examples</div>\n *             <div class=\"text-sm text-muted-foreground\">Code samples</div>\n *           </NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * ### With Simple Links\n *\n * Use `navigationMenuTriggerStyle()` to style regular links to match triggers.\n *\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"products\">\n *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"w-[200px] p-2\">\n *           <NavigationMenuLink href=\"#\">Product One</NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">Product Two</NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem>\n *       <NavigationMenuLink href=\"#\" class=\"px-4 py-2.5 bg-transparent border-none cursor-pointer flex items-center gap-1.5 transition-colors relative z-1 hover:text-accent\">\n *         Pricing\n *       </NavigationMenuLink>\n *     </NavigationMenuItem>\n *     <NavigationMenuItem>\n *       <NavigationMenuLink href=\"/docs\" class=\"px-4 py-2.5 bg-transparent border-none cursor-pointer flex items-center gap-1.5 transition-colors relative z-1 hover:text-accent\">\n *         Docs\n *       </NavigationMenuLink>\n *     </NavigationMenuItem>\n *     <NavigationMenuIndicator />\n *   </NavigationMenuList>\n * </NavigationMenu>\n *\n * ### Without Viewport\n *\n * Set `viewport={false}` to render content directly without the animated viewport container.\n *\n * <NavigationMenu viewport={false}>\n *   <NavigationMenuList>\n *     <NavigationMenuItem value=\"menu\">\n *       <NavigationMenuTrigger>Menu</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <div class=\"w-[200px] p-2 rounded-md border bg-popover shadow-md\">\n *           <NavigationMenuLink href=\"#\">Option One</NavigationMenuLink>\n *           <NavigationMenuLink href=\"#\">Option Two</NavigationMenuLink>\n *         </div>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *   </NavigationMenuList>\n * </NavigationMenu>\n */\nimport type { HTMLAttributes, HTMLTag } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport NavigationMenuViewport from \"./NavigationMenuViewport.astro\";\n\ntype Props = {\n  as?: HTMLTag;\n  class?: string;\n  viewport?: boolean;\n  delayOpen?: number;\n  delayClose?: number;\n  openOnFocus?: boolean;\n} & HTMLAttributes<\"nav\">;\n\nconst {\n  as: Tag = \"nav\",\n  class: className = \"\",\n  viewport = true,\n  delayOpen = 0,\n  delayClose = 50,\n  openOnFocus,\n  ...rest\n} = Astro.props as Props;\n---\n\n<Tag\n  {...rest}\n  data-slot=\"navigation-menu\"\n  data-viewport={viewport}\n  data-delay-open={delayOpen}\n  data-delay-close={delayClose}\n  data-open-on-focus={openOnFocus}\n  class={cn(\"relative\", className)}\n>\n  <slot />\n  {viewport && <NavigationMenuViewport />}\n</Tag>\n\n<script>\n  import { createNavigationMenu } from \"@data-slot/navigation-menu\";\n\n  document\n    .querySelectorAll('[data-slot=\"navigation-menu\"]')\n    .forEach((el) => createNavigationMenu(el));\n</script>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/popover.json b/apps/web/public/r/popover.json
index 0ae8f0a..6da960f 100644
--- a/apps/web/public/r/popover.json
+++ b/apps/web/public/r/popover.json
@@ -20,7 +20,7 @@
     },
     {
       "path": "ui/popover/PopoverContent.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  sideOffset?: number;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  alignOffset = 0,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  \"z-50 hidden data-[state=open]:block duration-150 ease transition-discrete starting:data-[state=closed]:block outline-hidden\",\n  \"bg-popover text-popover-foreground ring-foreground/10 ring-1\",\n  \"flex w-72 flex-col gap-2.5 rounded-lg p-4 text-sm shadow-md\",\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div\n  {...rest}\n  data-slot=\"popover-content\"\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  style={`--side-offset: ${sideOffset}px`}\n  class={cn(contentVariants(), className)}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  sideOffset?: number;\n  class?: string;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  side = \"bottom\",\n  align = \"center\",\n  sideOffset = 6,\n  alignOffset = 0,\n  class: className = \"\",\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva([\n  \"z-50 duration-150 ease transition-discrete outline-hidden\",\n  \"bg-popover text-popover-foreground ring-foreground/10 ring-1\",\n  \"flex w-72 flex-col gap-2.5 rounded-lg p-4 text-sm shadow-md\",\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div\n  {...rest}\n  hidden\n  data-slot=\"popover-content\"\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  style={`--side-offset: ${sideOffset}px`}\n  class={cn(contentVariants(), className)}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/registry.json b/apps/web/public/r/registry.json
index f974879..ccd6109 100644
--- a/apps/web/public/r/registry.json
+++ b/apps/web/public/r/registry.json
@@ -67,6 +67,18 @@
           "path": "ui/avatar/AvatarFallback.astro",
           "type": "registry:ui"
         },
+        {
+          "path": "ui/avatar/AvatarBadge.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "ui/avatar/AvatarGroup.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "ui/avatar/AvatarGroupCount.astro",
+          "type": "registry:ui"
+        },
         {
           "path": "ui/avatar/index.ts",
           "type": "registry:ui"
diff --git a/apps/web/public/r/select.json b/apps/web/public/r/select.json
index 9336bed..e2d66c6 100644
--- a/apps/web/public/r/select.json
+++ b/apps/web/public/r/select.json
@@ -12,7 +12,7 @@
     },
     {
       "path": "ui/select/SelectTrigger.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n} & HTMLAttributes<\"button\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  type=\"button\"\n  data-slot=\"select-trigger\"\n  data-size={size}\n  class={cn(\n    \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:ring-[3px]\",\n    \"flex w-full items-center justify-between gap-1.5 rounded-lg border bg-transparent px-3 py-2 text-sm shadow-xs\",\n    \"whitespace-nowrap outline-none select-none transition-colors\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10\",\n    \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n    className,\n  )}\n>\n  <slot />\n  <ChevronDownIcon class=\"size-4 text-muted-foreground\" data-slot=\"select-icon\" />\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n} & HTMLAttributes<\"button\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  ...rest\n} = Astro.props as Props;\n---\n\n<button\n  {...rest}\n  type=\"button\"\n  data-slot=\"select-trigger\"\n  data-size={size}\n  class={cn(\n    \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:ring-[3px]\",\n    \"flex w-full items-center justify-between gap-1.5 rounded-lg border bg-transparent px-3 py-2 text-sm\",\n    \"whitespace-nowrap outline-none select-none transition-colors\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n    \"data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10\",\n    \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n    className,\n  )}\n>\n  <slot />\n  <ChevronDownIcon\n    class=\"size-4 text-muted-foreground -mr-0.75\"\n    data-slot=\"select-icon\"\n  />\n</button>\n",
       "type": "registry:ui"
     },
     {
@@ -22,7 +22,7 @@
     },
     {
       "path": "ui/select/SelectContent.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  position?: \"item-aligned\" | \"popper\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  side?: \"top\" | \"bottom\";\n  sideOffset?: number;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  position = \"item-aligned\",\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva(\n  [\n    \"group/select-content focus-visible:outline-none z-50 hidden data-[state=open]:block\",\n    \"bg-popover text-popover-foreground min-w-24 rounded-lg shadow-md ring-1 ring-foreground/10\",\n    \"p-1 max-h-[var(--select-content-available-height,300px)] overflow-x-hidden overflow-y-auto\",\n  ],\n  {\n    variants: {\n      position: {\n        \"item-aligned\": \"relative\",\n        popper:\n          \"fixed transition-discrete starting:data-[state=closed]:block min-w-[var(--select-trigger-width)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n      },\n      side: {\n        top: \"\",\n        bottom: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        position: \"popper\",\n        side: \"top\",\n        class: \"data-[side=top]:slide-in-from-bottom-2\",\n      },\n      {\n        position: \"popper\",\n        side: \"bottom\",\n        class: \"data-[side=bottom]:slide-in-from-top-2\",\n      },\n    ],\n    defaultVariants: {\n      position: \"item-aligned\",\n      side: \"bottom\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  data-slot=\"select-content\"\n  data-size={size}\n  data-position={position}\n  data-align-trigger={position === \"item-aligned\"}\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(contentVariants({ position, side }), className)}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cn } from \"@/lib/utils\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  class?: string;\n  size?: \"sm\" | \"default\" | \"lg\";\n  position?: \"item-aligned\" | \"popper\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n  side?: \"top\" | \"bottom\";\n  sideOffset?: number;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  size = \"default\",\n  position = \"item-aligned\",\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...rest\n} = Astro.props as Props;\n\nconst contentVariants = cva(\n  [\n    \"group/select-content focus-visible:outline-none z-50\",\n    \"bg-popover text-popover-foreground min-w-24 rounded-lg shadow-md ring-1 ring-foreground/10\",\n    \"p-1 max-h-[var(--select-content-available-height,300px)] overflow-x-hidden overflow-y-auto\",\n  ],\n  {\n    variants: {\n      position: {\n        \"item-aligned\": \"relative\",\n        popper:\n          \"fixed min-w-[var(--select-trigger-width)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n      },\n      side: {\n        top: \"\",\n        bottom: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        position: \"popper\",\n        side: \"top\",\n        class: \"data-[side=top]:slide-in-from-bottom-2\",\n      },\n      {\n        position: \"popper\",\n        side: \"bottom\",\n        class: \"data-[side=bottom]:slide-in-from-top-2\",\n      },\n    ],\n    defaultVariants: {\n      position: \"item-aligned\",\n      side: \"bottom\",\n    },\n  },\n);\n---\n\n<div\n  {...rest}\n  hidden\n  data-slot=\"select-content\"\n  data-size={size}\n  data-position={position}\n  data-align-trigger={position === \"item-aligned\"}\n  data-align={align}\n  data-align-offset={alignOffset}\n  data-side={side}\n  data-side-offset={sideOffset}\n  class={cn(contentVariants({ position, side }), className)}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/apps/web/public/r/tooltip.json b/apps/web/public/r/tooltip.json
index 9a99307..7b3b0b9 100644
--- a/apps/web/public/r/tooltip.json
+++ b/apps/web/public/r/tooltip.json
@@ -17,7 +17,7 @@
     },
     {
       "path": "ui/tooltip/TooltipContent.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  class?: string;\n  sideOffset?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  sideOffset,\n  side = \"top\",\n  align = \"center\",\n  alignOffset,\n  ...rest\n} = Astro.props as Props;\n\nconst indicatorVariants = cva(\"pointer-events-none absolute border-4\", {\n  variants: {\n    side: {\n      top: \"border-foreground border-b-0 border-r-transparent border-l-transparent top-full\",\n      bottom:\n        \"border-foreground border-t-0 border-r-transparent border-l-transparent bottom-full\",\n      left: \"border-foreground border-r-0 border-t-transparent border-b-transparent left-full\",\n      right:\n        \"border-foreground border-l-0 border-t-transparent border-b-transparent right-full\",\n    },\n    align: {\n      start: \"\",\n      center: \"\",\n      end: \"\",\n    },\n  },\n  compoundVariants: [\n    { side: \"top\", align: \"start\", class: \"left-2\" },\n    { side: \"top\", align: \"center\", class: \"left-1/2 -translate-x-1/2\" },\n    { side: \"top\", align: \"end\", class: \"right-2\" },\n    { side: \"bottom\", align: \"start\", class: \"left-2\" },\n    { side: \"bottom\", align: \"center\", class: \"left-1/2 -translate-x-1/2\" },\n    { side: \"bottom\", align: \"end\", class: \"right-2\" },\n    { side: \"left\", align: \"start\", class: \"top-2\" },\n    { side: \"left\", align: \"center\", class: \"top-1/2 -translate-y-1/2\" },\n    { side: \"left\", align: \"end\", class: \"bottom-2\" },\n    { side: \"right\", align: \"start\", class: \"top-2\" },\n    { side: \"right\", align: \"center\", class: \"top-1/2 -translate-y-1/2\" },\n    { side: \"right\", align: \"end\", class: \"bottom-2\" },\n  ],\n  defaultVariants: {\n    side: \"top\",\n    align: \"center\",\n  },\n});\n\nconst contentVariants = cva([\n  \"z-50 duration-150 ease outline-hidden\",\n  \"relative w-fit max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background shadow-md\",\n  \"data-[open]:animate-in data-[closed]:animate-out\",\n  \"data-[closed]:fade-out-0 data-[open]:fade-in-0\",\n  \"data-[closed]:zoom-out-95 data-[open]:zoom-in-95\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"data-[instant]:transition-none! data-[instant]:animate-none! data-instant:data-closed:animate-none! data-instant:data-closed:fade-out-0!\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div data-slot=\"tooltip-portal\">\n  <div data-slot=\"tooltip-positioner\" class=\"isolate z-50\">\n    <div\n      {...rest}\n      hidden\n      data-slot=\"tooltip-content\"\n      data-side={side}\n      data-side-offset={sideOffset}\n      data-align={align}\n      data-align-offset={alignOffset}\n      class={cn(contentVariants(), className)}\n    >\n      <slot />\n      <div\n        data-slot=\"tooltip-indicator\"\n        class={indicatorVariants({ side, align })}\n      >\n      </div>\n    </div>\n  </div>\n</div>\n",
+      "content": "---\nimport { cn } from \"@/lib/utils\";\nimport type { HTMLAttributes } from \"astro/types\";\nimport { cva } from \"class-variance-authority\";\n\ntype Props = {\n  class?: string;\n  sideOffset?: number;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  alignOffset?: number;\n} & HTMLAttributes<\"div\">;\n\nconst {\n  class: className = \"\",\n  sideOffset,\n  side = \"top\",\n  align = \"center\",\n  alignOffset,\n  ...rest\n} = Astro.props as Props;\n\nconst indicatorVariants = cva(\"pointer-events-none absolute border-4\", {\n  variants: {\n    side: {\n      top: \"border-foreground border-b-0 border-r-transparent border-l-transparent top-full\",\n      bottom:\n        \"border-foreground border-t-0 border-r-transparent border-l-transparent bottom-full\",\n      left: \"border-foreground border-r-0 border-t-transparent border-b-transparent left-full\",\n      right:\n        \"border-foreground border-l-0 border-t-transparent border-b-transparent right-full\",\n    },\n    align: {\n      start: \"\",\n      center: \"\",\n      end: \"\",\n    },\n  },\n  compoundVariants: [\n    { side: \"top\", align: \"start\", class: \"left-2\" },\n    { side: \"top\", align: \"center\", class: \"left-1/2 -translate-x-1/2\" },\n    { side: \"top\", align: \"end\", class: \"right-2\" },\n    { side: \"bottom\", align: \"start\", class: \"left-2\" },\n    { side: \"bottom\", align: \"center\", class: \"left-1/2 -translate-x-1/2\" },\n    { side: \"bottom\", align: \"end\", class: \"right-2\" },\n    { side: \"left\", align: \"start\", class: \"top-2\" },\n    { side: \"left\", align: \"center\", class: \"top-1/2 -translate-y-1/2\" },\n    { side: \"left\", align: \"end\", class: \"bottom-2\" },\n    { side: \"right\", align: \"start\", class: \"top-2\" },\n    { side: \"right\", align: \"center\", class: \"top-1/2 -translate-y-1/2\" },\n    { side: \"right\", align: \"end\", class: \"bottom-2\" },\n  ],\n  defaultVariants: {\n    side: \"top\",\n    align: \"center\",\n  },\n});\n\nconst contentVariants = cva([\n  \"z-50 outline-hidden\",\n  \"relative w-fit max-w-xs rounded-md bg-foreground px-3 py-1.5 text-xs text-background shadow-md\",\n  \"data-[open]:animate-in data-[closed]:animate-out\",\n  \"data-[closed]:fade-out-0 data-[open]:fade-in-0\",\n  \"data-[closed]:zoom-out-95 data-[open]:zoom-in-95\",\n  \"data-instant:animate-none! data-instant:transition-none!\",\n  \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n  \"origin-(--transform-origin) [--tw-animation-fill-mode:both]\",\n]);\n---\n\n<div data-slot=\"tooltip-portal\">\n  <div data-slot=\"tooltip-positioner\" class=\"isolate z-50\">\n    <div\n      {...rest}\n      hidden\n      data-slot=\"tooltip-content\"\n      data-side={side}\n      data-side-offset={sideOffset}\n      data-align={align}\n      data-align-offset={alignOffset}\n      class={cn(contentVariants(), className)}\n    >\n      <slot />\n      <div\n        data-slot=\"tooltip-indicator\"\n        class={indicatorVariants({ side, align })}\n      >\n      </div>\n    </div>\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
diff --git a/bun.lock b/bun.lock
index c661bb4..5eae55b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -58,6 +58,7 @@
         "alpinejs": "^3.15.4",
         "astro": "^5.16.4",
         "astro-robots-txt": "^1.0.0",
+        "class-variance-authority": "^0.7.1",
         "culori": "^4.0.2",
         "expressive-code-collapsible": "^0.1.0",
         "nanoid": "^5.0.9",
@@ -120,20 +121,20 @@
       "name": "@bejamas/ui",
       "version": "0.1.0",
       "dependencies": {
-        "@data-slot/accordion": "^0.2.96",
-        "@data-slot/collapsible": "^0.2.96",
-        "@data-slot/combobox": "^0.2.96",
-        "@data-slot/dialog": "^0.2.96",
-        "@data-slot/dropdown-menu": "^0.2.96",
-        "@data-slot/hover-card": "^0.2.96",
-        "@data-slot/navigation-menu": "^0.2.96",
-        "@data-slot/popover": "^0.2.96",
-        "@data-slot/select": "^0.2.96",
-        "@data-slot/slider": "^0.2.96",
-        "@data-slot/tabs": "^0.2.96",
-        "@data-slot/toggle": "^0.2.96",
-        "@data-slot/toggle-group": "^0.2.96",
-        "@data-slot/tooltip": "^0.2.96",
+        "@data-slot/accordion": "^0.2.98",
+        "@data-slot/collapsible": "^0.2.98",
+        "@data-slot/combobox": "^0.2.98",
+        "@data-slot/dialog": "^0.2.98",
+        "@data-slot/dropdown-menu": "^0.2.98",
+        "@data-slot/hover-card": "^0.2.98",
+        "@data-slot/navigation-menu": "^0.2.98",
+        "@data-slot/popover": "^0.2.98",
+        "@data-slot/select": "^0.2.98",
+        "@data-slot/slider": "^0.2.98",
+        "@data-slot/tabs": "^0.2.98",
+        "@data-slot/toggle": "^0.2.98",
+        "@data-slot/toggle-group": "^0.2.98",
+        "@data-slot/tooltip": "^0.2.98",
         "@lucide/astro": "^0.540.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",