Load responsive menu behavior at the header breakpoint

public/r/styles/base-luma/dialog.json

@@ -8,12 +8,13 @@
     "@lucide/astro"
   ],
   "registryDependencies": [
-    "@fulldev/button"
+    "@fulldev/button",
+    "@fulldev/on-media"
   ],
   "files": [
     {
       "path": "src/components/ui/dialog/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  alertDialog?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"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  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/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",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  media?: string\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n  alertDialog?: boolean\n}\n\nconst {\n  media,\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  alertDialog,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-media={media}\n  data-slot=\"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  data-alert-dialog={alertDialog}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { initializeDialogs } from \"@/lib/dialog\"\n\n  initializeDialogs()\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -65,6 +66,11 @@
       "path": "src/components/ui/dialog/index.ts",
       "content": "export { default as Dialog } from \"./dialog.astro\"\nexport { default as DialogPortal } from \"./dialog-portal.astro\"\nexport { default as DialogOverlay } from \"./dialog-overlay.astro\"\nexport { default as DialogContent } from \"./dialog-content.astro\"\nexport { default as DialogTrigger } from \"./dialog-trigger.astro\"\nexport { default as DialogHeader } from \"./dialog-header.astro\"\nexport { default as DialogTitle } from \"./dialog-title.astro\"\nexport { default as DialogDescription } from \"./dialog-description.astro\"\nexport { default as DialogFooter } from \"./dialog-footer.astro\"\nexport { default as DialogClose } from \"./dialog-close.astro\"\n",
       "type": "registry:ui"
+    },
+    {
+      "path": "src/lib/dialog.ts",
+      "content": "import { onMedia } from \"./on-media\"\n\nconst roots = new Map<Element, () => void>()\n\nexport function initializeDialogs() {\n  for (const root of document.querySelectorAll<HTMLElement>(\n    '[data-slot=\"dialog\"]'\n  )) {\n    if (roots.has(root)) continue\n    roots.set(\n      root,\n      onMedia(\n        root.dataset.media ?? \"all\",\n        () => import(\"@data-slot/dialog\"),\n        ({ createDialog }) => {\n          const controller = createDialog(root)\n          return () => controller.destroy()\n        },\n        { root, selector: '[data-slot=\"dialog-trigger\"]', event: \"dialog:set\" }\n      )\n    )\n  }\n}\n\ndocument.addEventListener(\"astro:page-load\", initializeDialogs)\ndocument.addEventListener(\"astro:before-swap\", () => {\n  for (const dispose of roots.values()) dispose()\n  roots.clear()\n})\n",
+      "type": "registry:lib"
     }
   ],
   "docs": "https://ui.full.dev/components/dialog/",

public/r/styles/base-luma/header-1.json

@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "src/components/blocks/header-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        aria-label={navigationLabel}\n        class=\"hidden flex-none justify-start lg:flex\"\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class=\"ml-auto hidden flex-1 justify-end lg:flex\">\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet class=\"lg:hidden\">\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\nimport XIcon from \"@lucide/astro/icons/x\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Header, HeaderContainer, HeaderGroup } from \"@/components/ui/header\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { Logo, LogoImage, LogoText } from \"@/components/ui/logo\"\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n} from \"@/components/ui/navigation-menu\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\n\ntype Props = HTMLAttributes<\"header\"> & {\n  fold?: \"lg\" | \"xl\"\n  logo: {\n    label: string\n    href: string\n    src?: ImageMetadata\n    srcLight?: ImageMetadata\n    srcDark?: ImageMetadata\n  }\n  navigation: {\n    label: string\n    href: string\n    active?: boolean\n  }[]\n  buttons: {\n    label: string\n    href: string\n    icon?: string\n    target?: \"_self\" | \"_blank\"\n  }[]\n  navigationLabel: string\n  menu: {\n    label: string\n    title: string\n    description: string\n    closeLabel: string\n  }\n}\n\nconst {\n  fold = \"lg\",\n  class: className,\n  logo,\n  navigation,\n  buttons,\n  navigationLabel,\n  menu,\n  ...props\n} = Astro.props\n\nconst desktopQuery = fold === \"xl\" ? \"(min-width: 80rem)\" : \"(min-width: 64rem)\"\nconst mobileQuery = fold === \"xl\" ? \"(width < 80rem)\" : \"(width < 64rem)\"\nconst desktopClass = fold === \"xl\" ? \"xl:flex\" : \"lg:flex\"\nconst mobileClass = fold === \"xl\" ? \"xl:hidden\" : \"lg:hidden\"\n---\n\n<Header class={cn(\"\", className)} {...props}>\n  <HeaderContainer class=\"items-center justify-between gap-4\">\n    <HeaderGroup>\n      <Logo href={logo.href}>\n        <LogoImage\n          src={logo.src}\n          srcLight={logo.srcLight}\n          srcDark={logo.srcDark}\n          alt=\"\"\n        />\n        <LogoText>{logo.label}</LogoText>\n      </Logo>\n    </HeaderGroup>\n    {navigation.length > 0 && (\n      <NavigationMenu\n        media={desktopQuery}\n        aria-label={navigationLabel}\n        class={cn(\"hidden flex-none justify-start\", desktopClass)}\n      >\n        <NavigationMenuList class=\"justify-start\">\n          {navigation.map((item, index) => (\n            <NavigationMenuItem value={`nav-${index}`}>\n              <NavigationMenuLink href={item.href} active={item.active}>\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          ))}\n        </NavigationMenuList>\n      </NavigationMenu>\n    )}\n    <HeaderGroup class={cn(\"ml-auto hidden flex-1 justify-end\", desktopClass)}>\n      {buttons.map(({ label, href, icon, target }, index) => (\n        <Button\n          as=\"a\"\n          href={href}\n          target={target}\n          rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n          size=\"sm\"\n          variant={index === buttons.length - 1 ? \"default\" : \"ghost\"}\n        >\n          {icon && <Icon name={icon} />}\n          {label}\n        </Button>\n      ))}\n    </HeaderGroup>\n    <Sheet media={mobileQuery} class={mobileClass}>\n      <SheetTrigger\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"ml-auto\"\n        aria-label={menu.label}\n      >\n        <Icon name=\"menu\" />\n      </SheetTrigger>\n      <SheetContent side=\"right\" showCloseButton={false} class=\"p-0\">\n        <SheetHeader class=\"sr-only\">\n          <SheetTitle>{menu.title}</SheetTitle>\n          <SheetDescription>{menu.description}</SheetDescription>\n        </SheetHeader>\n        <div class=\"flex h-full flex-col gap-6 px-4 py-12\">\n          <nav aria-label={menu.title} class=\"flex flex-col gap-1\">\n            {navigation.map((item) => (\n              <SheetClose\n                as=\"a\"\n                href={item.href}\n                aria-current={item.active ? \"page\" : undefined}\n                variant=\"ghost\"\n                class=\"justify-start\"\n              >\n                {item.label}\n              </SheetClose>\n            ))}\n          </nav>\n          {buttons.length > 0 && (\n            <div class=\"mt-auto flex flex-col gap-2\">\n              {buttons.map(({ label, href, icon, target }, index) => (\n                <SheetClose\n                  as=\"a\"\n                  href={href}\n                  target={target}\n                  rel={target === \"_blank\" ? \"noreferrer\" : undefined}\n                  variant={index === buttons.length - 1 ? \"default\" : \"outline\"}\n                >\n                  {icon && <Icon name={icon} />}\n                  {label}\n                </SheetClose>\n              ))}\n            </div>\n          )}\n        </div>\n        <SheetClose\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"absolute top-4 right-4 bg-secondary\"\n        >\n          <XIcon />\n          <span class=\"sr-only\">{menu.closeLabel}</span>\n        </SheetClose>\n      </SheetContent>\n    </Sheet>\n  </HeaderContainer>\n</Header>\n",
       "type": "registry:block"
     }
   ],