fulldev-ui 0.11.1 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Fulldev UI
 
+## 0.13.0
+
+### Minor Changes
+
+- [#197](https://github.com/fulldotdev/ui/pull/197) [`9ca89fb`](https://github.com/fulldotdev/ui/commit/9ca89fbb09bcf99fb380b9ddc6f1637759bd7a2d) Thanks [@silveltman](https://github.com/silveltman)! - Complete Data Slot component coverage with Drawer, Toast, Toggle Group and Resizable, and upgrade all Data Slot packages to 1.0.2. Add Attachment, Button Group, Pagination and Aspect Ratio as Astro components without their own client scripts.
+
+  Replace the Embla Carousel with Data Slot's native scrolling carousel. This is a breaking change: replace `opts` with `defaultIndex`, `orientation`, `drag` and `loop`; use `CarouselController` and `CarouselOptions` instead of Embla types; replace `carousel:init` and `carousel:select` with `carousel:change` and `carousel:set`. Carousel now displays one full-width slide at a time. Remove fractional slide widths and the old content/item spacing pattern. Examples and the reviews block use the new API.
+
+  Adopt shadcn Typeset for rendered prose while preserving the existing Typography component exports. Typography sizes now control the prose rhythm, with updated heading spacing, nested content styling and semantic tables. Keep docs-specific code controls out of installable Typography styles.
+
+  Improve Combobox trigger and clear focus styling, align Select popper placement and Slider thumb positioning with shadcn, and use a consistent 8px default Navigation Menu gap.
+
+## 0.12.0
+
+### Minor Changes
+
+- [#195](https://github.com/fulldotdev/ui/pull/195) [`74fcc47`](https://github.com/fulldotdev/ui/commit/74fcc47a2ba855729c15ffb163af7c60beeeae78) Thanks [@silveltman](https://github.com/silveltman)! - Upgrade all Data Slot primitives and registry dependencies to 1.0.1. Use recommended
+  lazy mounting for Select, Tooltip, Hover Card and Navigation Menu, with an explicit
+  mountStrategy="eager" opt-in for integrations that query closed content. Discover nested
+  comboboxes and hover cards in retained content without duplicate initialization.
+
+  Release outgoing controllers on Astro page swaps so open overlays cannot leave stale
+  modal stacks or scroll locks. Give CommandDialog a trigger slot and correct the
+  sidebar search composition for strict nested ownership.
+
+  Use native autofocus for command palettes and native link activation for keyboard
+  commands. Align Slider defaults and Tabs values with the upstream API, and make
+  block dropdown links actual accessible menu items.
+
+  Use shadcn button defaults and consistent overlay layers so nested popups receive
+  pointer input. Form submissions should explicitly set type="submit".
+
+  Keep Data Slot modal stack layers and place floating positioners above them so
+  Select and other popups remain clickable inside dialogs.
+
 ## 0.11.1
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fulldev-ui",
   "type": "module",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Open-source Astro UI components and blocks",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -50,24 +50,29 @@
   "dependencies": {
     "@astrojs/mdx": "^5.0.6",
     "@astrojs/sitemap": "^3.7.3",
-    "@data-slot/accordion": "^0.2.166",
-    "@data-slot/alert-dialog": "^0.2.166",
-    "@data-slot/collapsible": "^0.2.166",
-    "@data-slot/combobox": "^0.2.166",
-    "@data-slot/command": "^0.2.166",
-    "@data-slot/core": "^0.2.166",
-    "@data-slot/dialog": "^0.2.166",
-    "@data-slot/dropdown-menu": "^0.2.166",
-    "@data-slot/hover-card": "^0.2.166",
-    "@data-slot/navigation-menu": "^0.2.166",
-    "@data-slot/popover": "^0.2.166",
-    "@data-slot/radio-group": "^0.2.166",
-    "@data-slot/select": "^0.2.166",
-    "@data-slot/slider": "^0.2.166",
-    "@data-slot/switch": "^0.2.166",
-    "@data-slot/tabs": "^0.2.166",
-    "@data-slot/toggle": "^0.2.166",
-    "@data-slot/tooltip": "^0.2.166",
+    "@data-slot/accordion": "^1.0.2",
+    "@data-slot/alert-dialog": "^1.0.2",
+    "@data-slot/carousel": "^1.0.2",
+    "@data-slot/collapsible": "^1.0.2",
+    "@data-slot/combobox": "^1.0.2",
+    "@data-slot/command": "^1.0.2",
+    "@data-slot/core": "^1.0.2",
+    "@data-slot/dialog": "^1.0.2",
+    "@data-slot/drawer": "^1.0.2",
+    "@data-slot/dropdown-menu": "^1.0.2",
+    "@data-slot/hover-card": "^1.0.2",
+    "@data-slot/navigation-menu": "^1.0.2",
+    "@data-slot/popover": "^1.0.2",
+    "@data-slot/radio-group": "^1.0.2",
+    "@data-slot/resizable": "^1.0.2",
+    "@data-slot/select": "^1.0.2",
+    "@data-slot/slider": "^1.0.2",
+    "@data-slot/switch": "^1.0.2",
+    "@data-slot/tabs": "^1.0.2",
+    "@data-slot/toast": "^1.0.2",
+    "@data-slot/toggle": "^1.0.2",
+    "@data-slot/toggle-group": "^1.0.2",
+    "@data-slot/tooltip": "^1.0.2",
     "@fontsource-variable/geist": "^5.2.9",
     "@fontsource-variable/geist-mono": "^5.2.8",
     "@lexingtonthemes/seo": "^0.2.0",
@@ -79,7 +84,6 @@
     "astro-robots-txt": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "embla-carousel": "^8.6.0",
     "lucide-static": "^1.22.0",
     "shadcn": "^4.12.0",
     "simple-icons": "^16.24.1",
@@ -90,10 +94,12 @@
     "typescript": "^6.0.3"
   },
   "devDependencies": {
+    "@argos-ci/playwright": "^7.6.0",
     "@astrojs/check": "^0.9.9",
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.31.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
+    "@playwright/test": "^1.63.0",
     "prettier": "3.9.3",
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "^0.8.0",
@@ -106,6 +112,7 @@
     "stop": "lsof -tiTCP:4321 -sTCP:LISTEN | xargs kill 2>/dev/null || true",
     "preview": "pnpm stop && pnpm build && astro preview --host 127.0.0.1 --port 4321",
     "typecheck": "astro check",
+    "test:interactions": "playwright test --config playwright.interactions.config.ts",
     "check": "pnpm format:check && pnpm typecheck",
     "build": "astro build",
     "build:prod": "pnpm check && pnpm registry:build && pnpm build",
@@ -117,6 +124,7 @@
     "format:check": "prettier --check .",
     "release": "changeset version && pnpm install --lockfile-only",
     "release:publish": "pnpm registry:check && pnpm build && changeset publish",
-    "registry:meta": "node scripts/registry-meta.mjs"
+    "registry:meta": "node scripts/registry-meta.mjs",
+    "test:visual": "pnpm build && playwright test"
   }
 }

package/public/r/accordion.json

@@ -4,13 +4,13 @@
   "title": "Accordion",
   "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
   "dependencies": [
-    "@data-slot/accordion",
+    "@data-slot/accordion@^1.0.2",
     "@lucide/astro"
   ],
   "files": [
     {
       "path": "src/components/ui/accordion/accordion.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  multiple?: boolean\n  defaultValue?: string | string[]\n  disabled?: boolean\n  orientation?: \"horizontal\" | \"vertical\"\n  loopFocus?: boolean\n  hiddenUntilFound?: boolean\n  collapsible?: boolean\n}\n\nconst {\n  class: className,\n  multiple,\n  defaultValue,\n  disabled,\n  orientation = \"vertical\",\n  loopFocus,\n  hiddenUntilFound,\n  collapsible,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue\n---\n\n<div\n  data-slot=\"accordion\"\n  data-multiple={multiple}\n  data-default-value={serializedDefaultValue}\n  data-disabled={disabled}\n  data-orientation={orientation}\n  data-loop-focus={loopFocus}\n  data-hidden-until-found={hiddenUntilFound}\n  data-collapsible={collapsible}\n  class={cn(\"flex w-full flex-col\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/accordion\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  multiple?: boolean\n  defaultValue?: string | string[]\n  disabled?: boolean\n  orientation?: \"horizontal\" | \"vertical\"\n  loopFocus?: boolean\n  hiddenUntilFound?: boolean\n  collapsible?: boolean\n}\n\nconst {\n  class: className,\n  multiple,\n  defaultValue,\n  disabled,\n  orientation = \"vertical\",\n  loopFocus,\n  hiddenUntilFound,\n  collapsible,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue\n---\n\n<div\n  data-slot=\"accordion\"\n  data-multiple={multiple}\n  data-default-value={serializedDefaultValue}\n  data-disabled={disabled}\n  data-orientation={orientation}\n  data-loop-focus={loopFocus}\n  data-hidden-until-found={hiddenUntilFound}\n  data-collapsible={collapsible}\n  class={cn(\"flex w-full flex-col\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/accordion\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/alert-dialog.json

@@ -4,7 +4,7 @@
   "title": "Alert Dialog",
   "description": "A modal dialog for important confirmations that expects a response.",
   "dependencies": [
-    "@data-slot/alert-dialog"
+    "@data-slot/alert-dialog@^1.0.2"
   ],
   "registryDependencies": [
     "@fulldev/button"
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/alert-dialog/alert-dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/alert-dialog\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/alert-dialog\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/aspect-ratio.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "title": "Aspect Ratio",
+  "description": "Displays content within a desired ratio.",
+  "files": [
+    {
+      "path": "src/components/ui/aspect-ratio/aspect-ratio.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  ratio: number\n}\n\nconst { class: className, ratio, style, ...props } = Astro.props\n\nconst resolvedStyle =\n  typeof style === \"string\"\n    ? `--ratio: ${ratio}; ${style}`\n    : { \"--ratio\": ratio, ...(style ?? {}) }\n---\n\n<div\n  data-slot=\"aspect-ratio\"\n  style={resolvedStyle}\n  class={cn(\"relative aspect-(--ratio)\", className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/aspect-ratio/index.ts",
+      "content": "export { default as AspectRatio } from \"./aspect-ratio.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/aspect-ratio/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

package/public/r/attachment.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "attachment",
+  "title": "Attachment",
+  "description": "Displays a file or image attachment with media, metadata, state, and actions.",
+  "registryDependencies": [
+    "@fulldev/button"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/attachment/attachment-action.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { Button, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }> &\n  ButtonVariantProps\n\nconst { as, variant = \"ghost\", size = \"icon-xs\", ...props } = Astro.props\n---\n\n<Button\n  as={as}\n  data-slot=\"attachment-action\"\n  variant={variant}\n  size={size}\n  {...props}\n>\n  <slot />\n</Button>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-actions.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-actions\"\n  class={cn(\n    \"relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-content.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-content\"\n  class={cn(\n    \"max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-description.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  data-slot=\"attachment-description\"\n  class={cn(\n    \"text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block max-w-full min-w-0 truncate text-xs\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</span>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-group.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-group\"\n  class={cn(\n    \"flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-media.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst attachmentMediaVariants = cva(\n  \"bg-muted text-foreground group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        icon: \"\",\n        image:\n          \"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"icon\",\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof attachmentMediaVariants>\n\nconst { class: className, variant = \"icon\", ...props } = Astro.props\n---\n\n<div\n  data-slot=\"attachment-media\"\n  data-variant={variant}\n  class={cn(attachmentMediaVariants({ variant }), className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-title.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"span\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<span\n  data-slot=\"attachment-title\"\n  class={cn(\n    \"block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</span>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment-trigger.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }>\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  ...props\n} = Astro.props\n\nconst attributes: Record<string, unknown> = { ...props }\nif (Tag === \"button\") attributes.type ??= \"button\"\n---\n\n<Tag\n  data-slot=\"attachment-trigger\"\n  class={cn(\"absolute inset-0 z-10 outline-none\", className)}\n  {...attributes}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/attachment.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst attachmentVariants = cva(\n  \"group/attachment bg-card text-card-foreground focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed\",\n  {\n    variants: {\n      size: {\n        default:\n          \"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2\",\n        sm: \"gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5\",\n        xs: \"gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1\",\n      },\n      orientation: {\n        horizontal: \"min-w-40 items-center\",\n        vertical: \"w-24 flex-col has-data-[slot=attachment-content]:w-30\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      orientation: \"horizontal\",\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\"\n  }\n\nconst {\n  class: className,\n  state = \"done\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"attachment\"\n  data-state={state}\n  data-size={size}\n  data-orientation={orientation}\n  class={cn(attachmentVariants({ size, orientation }), className)}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/attachment/index.ts",
+      "content": "export { default as Attachment } from \"./attachment.astro\"\nexport { default as AttachmentAction } from \"./attachment-action.astro\"\nexport { default as AttachmentActions } from \"./attachment-actions.astro\"\nexport { default as AttachmentContent } from \"./attachment-content.astro\"\nexport { default as AttachmentDescription } from \"./attachment-description.astro\"\nexport { default as AttachmentGroup } from \"./attachment-group.astro\"\nexport { default as AttachmentMedia } from \"./attachment-media.astro\"\nexport { default as AttachmentTitle } from \"./attachment-title.astro\"\nexport { default as AttachmentTrigger } from \"./attachment-trigger.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/attachment/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

package/public/r/banner.json

@@ -6,10 +6,6 @@
   "dependencies": [
     "@lucide/astro"
   ],
-  "registryDependencies": [
-    "@fulldev/button",
-    "@fulldev/dropdown-menu"
-  ],
   "files": [
     {
       "path": "src/components/ui/banner/banner.astro",

package/public/r/blocks-1.json

@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead class=\"max-w-2xl text-base leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy class=\"blocks-copy-icon size-3.5\" />\n              <Check class=\"blocks-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <a\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </a>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n</SectionContainer>\n\n<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>\n  const button = copyButtonId ? document.getElementById(copyButtonId) : null\n\n  if (button instanceof HTMLButtonElement) {\n    button.addEventListener(\"click\", async () => {\n      const source = button.dataset.source\n\n      if (!source) return\n\n      try {\n        await navigator.clipboard.writeText(source)\n        button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n        window.setTimeout(() => {\n          button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n          button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n        }, 1200)\n      } catch {\n        // Ignore clipboard failures; the button remains available for retry.\n      }\n    })\n  }\n</script>\n",
+      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead class=\"max-w-2xl text-base leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              data-blocks-copy\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy class=\"blocks-copy-icon size-3.5\" />\n              <Check class=\"blocks-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <DropdownMenuItem\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n</SectionContainer>\n\n<script>\n  document.addEventListener(\"click\", async (event) => {\n    if (!(event.target instanceof Element)) return\n    const button = event.target.closest(\"[data-blocks-copy]\")\n    if (!(button instanceof HTMLButtonElement)) return\n\n    const source = button.dataset.source\n    if (!source) return\n\n    try {\n      await navigator.clipboard.writeText(source)\n      button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n      button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n      window.setTimeout(() => {\n        button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n      }, 1200)\n    } catch {\n      // Keep the copy state unchanged so the action can be retried.\n    }\n  })\n</script>\n",
       "type": "registry:block"
     }
   ],

package/public/r/button-group.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group",
+  "title": "Button Group",
+  "description": "Groups related controls with connected edges and consistent focus behavior.",
+  "registryDependencies": [
+    "@fulldev/separator"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/button-group/button-group-separator.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/components/ui/separator\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  orientation?: \"horizontal\" | \"vertical\"\n  decorative?: boolean\n}\n\nconst {\n  class: className,\n  orientation = \"vertical\",\n  decorative = true,\n  ...props\n} = Astro.props\n---\n\n<Separator\n  data-slot=\"button-group-separator\"\n  orientation={orientation}\n  decorative={decorative}\n  class={cn(\n    \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n    className\n  )}\n  {...props}\n/>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/button-group-text.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props<Tag extends HTMLTag = \"div\"> = Polymorphic<{ as: Tag }>\n\nconst { as: Tag = \"div\", class: className, ...props } = Astro.props\n---\n\n<Tag\n  data-slot=\"button-group-text\"\n  class={cn(\n    \"bg-muted flex items-center gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/button-group-variants.ts",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nexport type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/button-group.astro",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  buttonGroupVariants,\n  type ButtonGroupVariantProps,\n} from \"./button-group-variants\"\n\ntype Props<Tag extends HTMLTag = \"div\"> = Polymorphic<{ as: Tag }> &\n  ButtonGroupVariantProps\n\nconst {\n  as: Tag = \"div\",\n  class: className,\n  orientation = \"horizontal\",\n  ...props\n} = Astro.props\n---\n\n<Tag\n  role=\"group\"\n  data-slot=\"button-group\"\n  data-orientation={orientation}\n  class={cn(buttonGroupVariants({ orientation }), className)}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/button-group/index.ts",
+      "content": "export { default as ButtonGroup } from \"./button-group.astro\"\nexport { default as ButtonGroupSeparator } from \"./button-group-separator.astro\"\nexport { default as ButtonGroupText } from \"./button-group-text.astro\"\nexport {\n  buttonGroupVariants,\n  type ButtonGroupVariantProps,\n} from \"./button-group-variants\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/button-group/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

package/public/r/button.json

@@ -11,7 +11,7 @@
     },
     {
       "path": "src/components/ui/button/button.astro",
-      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { buttonVariants, type ButtonVariantProps } from \"./button-variants\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }> &\n  ButtonVariantProps\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  variant,\n  size,\n  ...props\n} = Astro.props\n---\n\n<Tag\n  data-slot=\"button\"\n  class={cn(buttonVariants({ variant, size }), className)}\n  {...props}\n>\n  <slot />\n</Tag>\n",
+      "content": "---\nimport type { HTMLTag, Polymorphic } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { buttonVariants, type ButtonVariantProps } from \"./button-variants\"\n\ntype Props<Tag extends HTMLTag = \"button\"> = Polymorphic<{ as: Tag }> &\n  ButtonVariantProps\n\nconst {\n  as: Tag = \"href\" in Astro.props ? \"a\" : \"button\",\n  class: className,\n  variant,\n  size,\n  ...props\n} = Astro.props\n\nconst attributes: Record<string, unknown> = { ...props }\nif (Tag === \"button\") attributes.type ??= \"button\"\n---\n\n<Tag\n  data-slot=\"button\"\n  class={cn(buttonVariants({ variant, size }), className)}\n  {...attributes}\n>\n  <slot />\n</Tag>\n",
       "type": "registry:ui"
     },
     {

package/public/r/carousel.json

@@ -2,9 +2,9 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "carousel",
   "title": "Carousel",
-  "description": "A carousel with motion and swipe built using Embla.",
+  "description": "An accessible carousel built on native scrolling with Data Slot.",
   "dependencies": [
-    "embla-carousel",
+    "@data-slot/carousel@^1.0.2",
     "@lucide/astro"
   ],
   "registryDependencies": [
@@ -13,32 +13,32 @@
   "files": [
     {
       "path": "src/components/ui/carousel/carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type { EmblaOptionsType } from \"embla-carousel\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  opts?: EmblaOptionsType\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst {\n  class: className,\n  opts,\n  orientation = \"horizontal\",\n  ...props\n} = Astro.props\n\nconst resolvedOpts: EmblaOptionsType = {\n  ...opts,\n  axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n}\n---\n\n<div\n  data-slot=\"carousel\"\n  data-orientation={orientation}\n  data-carousel-options={JSON.stringify(resolvedOpts)}\n  class={cn(\"group/carousel relative\", className)}\n  role=\"region\"\n  aria-roledescription=\"carousel\"\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import EmblaCarousel, {\n    type EmblaCarouselType,\n    type EmblaOptionsType,\n  } from \"embla-carousel\"\n\n  type CarouselRoot = HTMLElement & {\n    __fulldevCarouselApi?: EmblaCarouselType\n  }\n\n  type CarouselInstance = {\n    cleanup: () => void\n  }\n\n  type CarouselStore = Map<CarouselRoot, CarouselInstance>\n\n  declare global {\n    interface Window {\n      __fulldevCarouselInitialized?: boolean\n      __fulldevCarouselStore?: CarouselStore\n    }\n  }\n\n  if (!window.__fulldevCarouselInitialized) {\n    window.__fulldevCarouselInitialized = true\n    window.__fulldevCarouselStore ??= new Map<CarouselRoot, CarouselInstance>()\n\n    const store = window.__fulldevCarouselStore\n\n    const getDetails = (api: EmblaCarouselType) => ({\n      api,\n      canScrollPrev: api.canScrollPrev(),\n      canScrollNext: api.canScrollNext(),\n      selectedScrollSnap: api.selectedScrollSnap(),\n      scrollSnapList: api.scrollSnapList(),\n    })\n\n    const emit = (\n      root: CarouselRoot,\n      type: \"carousel:init\" | \"carousel:select\",\n      api: EmblaCarouselType\n    ) => {\n      root.dispatchEvent(\n        new CustomEvent(type, {\n          detail: getDetails(api),\n        })\n      )\n    }\n\n    const parseOptions = (root: CarouselRoot): EmblaOptionsType => {\n      const rawOptions = root.getAttribute(\"data-carousel-options\")\n\n      if (!rawOptions) {\n        return {}\n      }\n\n      try {\n        return JSON.parse(rawOptions) as EmblaOptionsType\n      } catch {\n        return {}\n      }\n    }\n\n    const syncButton = (button: Element | null, enabled: boolean) => {\n      if (!(button instanceof HTMLButtonElement)) {\n        return\n      }\n\n      if (button.dataset.manualDisabled === \"true\") {\n        button.disabled = true\n        return\n      }\n\n      button.disabled = !enabled\n    }\n\n    const cleanupDisconnectedCarousels = () => {\n      for (const [root, instance] of store.entries()) {\n        if (document.contains(root)) {\n          continue\n        }\n\n        instance.cleanup()\n        store.delete(root)\n      }\n    }\n\n    const initCarousel = (root: Element) => {\n      if (!(root instanceof HTMLElement) || store.has(root)) {\n        return\n      }\n\n      const carouselRoot = root as CarouselRoot\n      const viewport = carouselRoot.querySelector(\n        '[data-slot=\"carousel-content\"]'\n      )\n      const prevButton = carouselRoot.querySelector(\n        '[data-slot=\"carousel-previous\"]'\n      )\n      const nextButton = carouselRoot.querySelector(\n        '[data-slot=\"carousel-next\"]'\n      )\n\n      if (!(viewport instanceof HTMLElement)) {\n        return\n      }\n\n      const api = EmblaCarousel(viewport, parseOptions(carouselRoot))\n\n      const sync = () => {\n        const details = getDetails(api)\n\n        carouselRoot.dataset.canScrollPrev = details.canScrollPrev\n          ? \"true\"\n          : \"false\"\n        carouselRoot.dataset.canScrollNext = details.canScrollNext\n          ? \"true\"\n          : \"false\"\n        carouselRoot.dataset.selectedScrollSnap = String(\n          details.selectedScrollSnap\n        )\n\n        syncButton(prevButton, details.canScrollPrev)\n        syncButton(nextButton, details.canScrollNext)\n\n        emit(carouselRoot, \"carousel:select\", api)\n      }\n\n      const onPrevClick = () => {\n        api.scrollPrev()\n      }\n\n      const onNextClick = () => {\n        api.scrollNext()\n      }\n\n      const onKeyDown = (event: KeyboardEvent) => {\n        const isVertical = carouselRoot.dataset.orientation === \"vertical\"\n\n        if (!isVertical && event.key === \"ArrowLeft\") {\n          event.preventDefault()\n          api.scrollPrev()\n        }\n\n        if (!isVertical && event.key === \"ArrowRight\") {\n          event.preventDefault()\n          api.scrollNext()\n        }\n\n        if (isVertical && event.key === \"ArrowUp\") {\n          event.preventDefault()\n          api.scrollPrev()\n        }\n\n        if (isVertical && event.key === \"ArrowDown\") {\n          event.preventDefault()\n          api.scrollNext()\n        }\n      }\n\n      if (prevButton instanceof HTMLElement) {\n        prevButton.addEventListener(\"click\", onPrevClick)\n      }\n\n      if (nextButton instanceof HTMLElement) {\n        nextButton.addEventListener(\"click\", onNextClick)\n      }\n\n      carouselRoot.addEventListener(\"keydown\", onKeyDown, true)\n\n      api.on(\"reInit\", sync)\n      api.on(\"select\", sync)\n\n      carouselRoot.__fulldevCarouselApi = api\n\n      sync()\n      requestAnimationFrame(() => emit(carouselRoot, \"carousel:init\", api))\n\n      store.set(carouselRoot, {\n        cleanup: () => {\n          api.off(\"reInit\", sync)\n          api.off(\"select\", sync)\n\n          if (prevButton instanceof HTMLElement) {\n            prevButton.removeEventListener(\"click\", onPrevClick)\n          }\n\n          if (nextButton instanceof HTMLElement) {\n            nextButton.removeEventListener(\"click\", onNextClick)\n          }\n\n          carouselRoot.removeEventListener(\"keydown\", onKeyDown, true)\n          delete carouselRoot.__fulldevCarouselApi\n          api.destroy()\n        },\n      })\n    }\n\n    const initCarousels = () => {\n      cleanupDisconnectedCarousels()\n\n      document\n        .querySelectorAll('[data-slot=\"carousel\"]')\n        .forEach((root) => initCarousel(root))\n    }\n\n    initCarousels()\n    document.addEventListener(\"astro:page-load\", initCarousels)\n  }\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultIndex?: number\n  orientation?: \"horizontal\" | \"vertical\"\n  drag?: boolean\n  loop?: boolean\n}\n\nconst {\n  class: className,\n  defaultIndex,\n  orientation = \"horizontal\",\n  drag,\n  loop,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"carousel\"\n  data-default-index={defaultIndex}\n  data-orientation={orientation}\n  data-drag={drag}\n  data-loop={loop}\n  class={cn(\"group/carousel relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/carousel\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div class=\"overflow-hidden\" data-slot=\"carousel-content\">\n  <div\n    data-slot=\"carousel-container\"\n    class={cn(\n      \"flex [touch-action:pan-y_pinch-zoom]\",\n      \"group-data-[orientation=vertical]/carousel:-mt-4 group-data-[orientation=vertical]/carousel:[touch-action:pan-x_pinch-zoom] group-data-[orientation=vertical]/carousel:flex-col\",\n      \"group-data-[orientation=horizontal]/carousel:-ml-4\",\n      className\n    )}\n    {...props}\n  >\n    <slot />\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-content\"\n  class={cn(\n    \"no-scrollbar flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain\",\n    \"group-data-[dragging=true]/carousel:cursor-grabbing\",\n    \"group-data-[orientation=vertical]/carousel:snap-y group-data-[orientation=vertical]/carousel:flex-col group-data-[orientation=vertical]/carousel:overflow-x-hidden group-data-[orientation=vertical]/carousel:overflow-y-auto group-data-[orientation=vertical]/carousel:overscroll-y-contain\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  role=\"group\"\n  aria-roledescription=\"slide\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full\",\n    \"group-data-[orientation=horizontal]/carousel:pl-4\",\n    \"group-data-[orientation=vertical]/carousel:pt-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\">\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"carousel-item\"\n  class={cn(\n    \"min-w-0 shrink-0 grow-0 basis-full snap-start\",\n    \"group-data-[orientation=vertical]/carousel:min-h-0\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n</div>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"@lucide/astro/icons/chevron-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-next\"\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-right-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:right-auto group-data-[orientation=vertical]/carousel:-bottom-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronRightIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Next slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  disabled,\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  data-manual-disabled={disabled ? \"true\" : undefined}\n  disabled={disabled}\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"@lucide/astro/icons/chevron-left\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariantProps } from \"@/components/ui/button\"\n\ntype Props = Omit<HTMLAttributes<\"button\">, \"type\"> & ButtonVariantProps\n\nconst {\n  class: className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n} = Astro.props\n---\n\n<button\n  type=\"button\"\n  data-slot=\"carousel-previous\"\n  class={cn(\n    buttonVariants({ variant, size }),\n    \"absolute touch-manipulation rounded-full group-data-[orientation=horizontal]/carousel:inset-y-0 group-data-[orientation=horizontal]/carousel:-left-12 group-data-[orientation=horizontal]/carousel:my-auto\",\n    \"group-data-[orientation=vertical]/carousel:-top-12 group-data-[orientation=vertical]/carousel:left-1/2 group-data-[orientation=vertical]/carousel:-translate-x-1/2 group-data-[orientation=vertical]/carousel:translate-y-0 group-data-[orientation=vertical]/carousel:rotate-90\",\n    className\n  )}\n  {...props}\n>\n  <slot>\n    <ChevronLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Previous slide</span>\n  </slot>\n</button>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/carousel/index.ts",
-      "content": "export type {\n  EmblaCarouselType as CarouselApi,\n  EmblaOptionsType as CarouselOptions,\n  EmblaPluginType as CarouselPlugin,\n} from \"embla-carousel\"\n\nexport { default as Carousel } from \"./carousel.astro\"\nexport { default as CarouselContent } from \"./carousel-content.astro\"\nexport { default as CarouselItem } from \"./carousel-item.astro\"\nexport { default as CarouselPrevious } from \"./carousel-previous.astro\"\nexport { default as CarouselNext } from \"./carousel-next.astro\"\n",
+      "content": "export type { CarouselController, CarouselOptions } from \"@data-slot/carousel\"\n\nexport { default as Carousel } from \"./carousel.astro\"\nexport { default as CarouselContent } from \"./carousel-content.astro\"\nexport { default as CarouselItem } from \"./carousel-item.astro\"\nexport { default as CarouselPrevious } from \"./carousel-previous.astro\"\nexport { default as CarouselNext } from \"./carousel-next.astro\"\n",
       "type": "registry:ui"
     }
   ],

package/public/r/collapsible.json

@@ -4,12 +4,12 @@
   "title": "Collapsible",
   "description": "An interactive component which expands/collapses a panel.",
   "dependencies": [
-    "@data-slot/collapsible"
+    "@data-slot/collapsible@^1.0.2"
   ],
   "files": [
     {
       "path": "src/components/ui/collapsible/collapsible.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  hiddenUntilFound?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  hiddenUntilFound,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"collapsible\"\n  data-default-open={defaultOpen}\n  data-hidden-until-found={hiddenUntilFound}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/collapsible\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  hiddenUntilFound?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  hiddenUntilFound,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"collapsible\"\n  data-default-open={defaultOpen}\n  data-hidden-until-found={hiddenUntilFound}\n  class={cn(className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/collapsible\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {

package/public/r/combobox.json

@@ -4,7 +4,8 @@
   "title": "Combobox",
   "description": "Autocomplete input with a list of suggestions.",
   "dependencies": [
-    "@data-slot/combobox",
+    "@data-slot/combobox@^1.0.2",
+    "@data-slot/core@^1.0.2",
     "@lucide/astro"
   ],
   "registryDependencies": [
@@ -13,12 +14,12 @@
   "files": [
     {
       "path": "src/components/ui/combobox/combobox.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultValue?: string\n  defaultOpen?: boolean\n  placeholder?: string\n  disabled?: boolean\n  required?: boolean\n  name?: string\n  openOnFocus?: boolean\n  autoHighlight?: boolean\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  defaultValue,\n  defaultOpen,\n  placeholder,\n  disabled,\n  required,\n  name,\n  openOnFocus,\n  autoHighlight,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"combobox\"\n  data-default-value={defaultValue}\n  data-default-open={defaultOpen}\n  data-placeholder={placeholder}\n  data-disabled={disabled}\n  data-required={required}\n  data-name={name}\n  data-open-on-focus={openOnFocus}\n  data-auto-highlight={autoHighlight}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  class={cn(\"group/combobox relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { createCombobox } from \"@data-slot/combobox\"\n\n  const initCombobox = () => {\n    document.querySelectorAll('[data-slot=\"combobox\"]').forEach((root) => {\n      if (\n        !root.querySelector('[data-slot=\"combobox-input\"]') ||\n        !root.querySelector('[data-slot=\"combobox-content\"]')\n      ) {\n        return\n      }\n\n      createCombobox(root as HTMLElement)\n    })\n  }\n\n  initCombobox()\n\n  document.addEventListener(\"astro:page-load\", initCombobox)\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultValue?: string\n  defaultOpen?: boolean\n  placeholder?: string\n  disabled?: boolean\n  required?: boolean\n  name?: string\n  openOnFocus?: boolean\n  autoHighlight?: boolean\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  defaultValue,\n  defaultOpen,\n  placeholder,\n  disabled,\n  required,\n  name,\n  openOnFocus,\n  autoHighlight,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"combobox\"\n  data-default-value={defaultValue}\n  data-default-open={defaultOpen}\n  data-placeholder={placeholder}\n  data-disabled={disabled}\n  data-required={required}\n  data-name={name}\n  data-open-on-focus={openOnFocus}\n  data-auto-highlight={autoHighlight}\n  data-side={side}\n  data-align={align}\n  data-side-offset={sideOffset}\n  data-align-offset={alignOffset}\n  data-avoid-collisions={avoidCollisions}\n  data-collision-padding={collisionPadding}\n  class={cn(\"group/combobox relative\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/combobox\"\n\n  const controllers: ReturnType<typeof create> = []\n  const initialize = () => controllers.push(...create())\n  initialize()\n  document.addEventListener(\"astro:page-load\", initialize)\n  document.addEventListener(\"astro:before-swap\", () => {\n    for (const controller of controllers) controller.destroy()\n    controllers.length = 0\n  })\n</script>\n",
       "type": "registry:ui"
     },
     {
       "path": "src/components/ui/combobox/combobox-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  hidden = true,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"combobox-portal\">\n  <div\n    data-slot=\"combobox-positioner\"\n    data-side={side}\n    data-align={align}\n    data-side-offset={sideOffset}\n    data-align-offset={alignOffset}\n    data-avoid-collisions={avoidCollisions}\n    data-collision-padding={collisionPadding}\n    class=\"isolate z-50\"\n  >\n    <div\n      data-slot=\"combobox-content\"\n      data-side={side}\n      data-align={align}\n      data-side-offset={sideOffset}\n      data-align-offset={alignOffset}\n      data-avoid-collisions={avoidCollisions}\n      data-collision-padding={collisionPadding}\n      hidden={hidden}\n      class={cn(\n        \"group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 *: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        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport type {\n  Align as ComboboxAlign,\n  Side as ComboboxSide,\n} from \"@data-slot/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  side?: ComboboxSide\n  align?: ComboboxAlign\n  sideOffset?: number\n  alignOffset?: number\n  avoidCollisions?: boolean\n  collisionPadding?: number\n}\n\nconst {\n  class: className,\n  hidden = true,\n  side,\n  align,\n  sideOffset,\n  alignOffset,\n  avoidCollisions,\n  collisionPadding,\n  ...props\n} = Astro.props\n---\n\n<div data-slot=\"combobox-portal\">\n  <div\n    data-slot=\"combobox-positioner\"\n    data-side={side}\n    data-align={align}\n    data-side-offset={sideOffset}\n    data-align-offset={alignOffset}\n    data-avoid-collisions={avoidCollisions}\n    data-collision-padding={collisionPadding}\n    class=\"isolate z-[1000]\"\n  >\n    <div\n      data-slot=\"combobox-content\"\n      data-side={side}\n      data-align={align}\n      data-side-offset={sideOffset}\n      data-align-offset={alignOffset}\n      data-avoid-collisions={avoidCollisions}\n      data-collision-padding={collisionPadding}\n      hidden={hidden}\n      class={cn(\n        \"group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 relative z-50 max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 *: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        className\n      )}\n      {...props}\n    >\n      <slot />\n    </div>\n  </div>\n</div>\n",
       "type": "registry:ui"
     },
     {
@@ -33,7 +34,7 @@
     },
     {
       "path": "src/components/ui/combobox/combobox-input.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport InputGroupAddon from \"@/components/ui/input-group/input-group-addon.astro\"\nimport InputGroupInput from \"@/components/ui/input-group/input-group-input.astro\"\nimport InputGroup from \"@/components/ui/input-group/input-group.astro\"\n\nimport ComboboxTrigger from \"./combobox-trigger.astro\"\n\ntype Props = HTMLAttributes<\"input\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n}\n\nconst {\n  class: className,\n  type = \"text\",\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n} = Astro.props\n---\n\n<InputGroup class={cn(\"w-auto\", className)}>\n  <InputGroupInput\n    type={type}\n    data-slot=\"combobox-input\"\n    disabled={disabled}\n    {...props}\n  />\n  <InputGroupAddon align=\"inline-end\">\n    {\n      showTrigger && (\n        <ComboboxTrigger\n          class=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n          disabled={disabled}\n        />\n      )\n    }\n    {\n      showClear && (\n        <button\n          type=\"button\"\n          data-slot=\"combobox-clear\"\n          class=\"inline-flex size-6 shrink-0 items-center justify-center rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          disabled={disabled}\n        >\n          <XIcon class=\"pointer-events-none\" />\n        </button>\n      )\n    }\n  </InputGroupAddon>\n  <slot />\n</InputGroup>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport InputGroupAddon from \"@/components/ui/input-group/input-group-addon.astro\"\nimport InputGroupButton from \"@/components/ui/input-group/input-group-button.astro\"\nimport InputGroupInput from \"@/components/ui/input-group/input-group-input.astro\"\nimport InputGroup from \"@/components/ui/input-group/input-group.astro\"\n\nimport ComboboxTrigger from \"./combobox-trigger.astro\"\n\ntype Props = HTMLAttributes<\"input\"> & {\n  showTrigger?: boolean\n  showClear?: boolean\n}\n\nconst {\n  class: className,\n  type = \"text\",\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n} = Astro.props\n---\n\n<InputGroup\n  class={cn(\n    \"has-[[data-slot=combobox-input]:focus-visible]:border-ring has-[[data-slot=combobox-input]:focus-visible]:ring-ring/50 w-auto has-[[data-slot=combobox-input]:focus-visible]:ring-3\",\n    className\n  )}\n>\n  <InputGroupInput\n    type={type}\n    data-slot=\"combobox-input\"\n    disabled={disabled}\n    {...props}\n  />\n  <InputGroupAddon align=\"inline-end\">\n    {\n      showTrigger && (\n        <ComboboxTrigger\n          class=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n          disabled={disabled}\n        />\n      )\n    }\n    {\n      showClear && (\n        <InputGroupButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          data-slot=\"combobox-clear\"\n          disabled={disabled}\n        >\n          <XIcon class=\"pointer-events-none\" />\n        </InputGroupButton>\n      )\n    }\n  </InputGroupAddon>\n  <slot />\n</InputGroup>\n",
       "type": "registry:ui"
     },
     {
@@ -58,7 +59,7 @@
     },
     {
       "path": "src/components/ui/combobox/combobox-trigger.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  showIcon?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  showIcon = true,\n  ...props\n} = Astro.props\n---\n\n<button\n  type={type}\n  data-slot=\"combobox-trigger\"\n  class={cn(\n    \"[&_svg]:text-muted-foreground inline-flex size-6 shrink-0 items-center justify-center gap-2 rounded-[calc(var(--radius)-5px)] p-0 text-sm shadow-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    className\n  )}\n  {...props}\n>\n  <slot />\n  {\n    showIcon && (\n      <ChevronDownIcon class=\"text-muted-foreground pointer-events-none size-4\" />\n    )\n  }\n</button>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronDownIcon from \"@lucide/astro/icons/chevron-down\"\n\nimport { cn } from \"@/lib/utils\"\nimport InputGroupButton from \"@/components/ui/input-group/input-group-button.astro\"\n\ntype Props = HTMLAttributes<\"button\"> & {\n  showIcon?: boolean\n}\n\nconst {\n  class: className,\n  type = \"button\",\n  showIcon = true,\n  ...props\n} = Astro.props\n---\n\n<InputGroupButton\n  type={type ?? \"button\"}\n  variant=\"ghost\"\n  size=\"icon-xs\"\n  data-slot=\"combobox-trigger\"\n  class={cn(\"[&_svg]:text-muted-foreground\", className)}\n  {...props}\n>\n  <slot />\n  {\n    showIcon && (\n      <ChevronDownIcon class=\"text-muted-foreground pointer-events-none size-4\" />\n    )\n  }\n</InputGroupButton>\n",
       "type": "registry:ui"
     },
     {