From 236d92a228b67335bcea8f27ef585b9501dc3df2 Mon Sep 17 00:00:00 2001 From: Sil Date: Sat, 24 Oct 2026 15:13:21 +0200 Subject: [PATCH 1/7] Load responsive menu controllers within header media queries --- public/r/styles/base-luma/dialog.json | 10 +- public/r/styles/base-luma/header-1.json | 2 +- public/r/styles/base-luma/header-2.json | 2 +- public/r/styles/base-luma/header-3.json | 2 +- public/r/styles/base-luma/header-4.json | 2 +- public/r/styles/base-luma/header-5.json | 2 +- .../r/styles/base-luma/navigation-menu.json | 5 +- public/r/styles/base-luma/on-media.json | 14 ++ public/r/styles/base-luma/registry.json | 22 ++- public/r/styles/base-luma/sheet.json | 2 +- public/r/styles/base-lyra/dialog.json | 10 +- public/r/styles/base-lyra/header-1.json | 2 +- public/r/styles/base-lyra/header-2.json | 2 +- public/r/styles/base-lyra/header-3.json | 2 +- public/r/styles/base-lyra/header-4.json | 2 +- public/r/styles/base-lyra/header-5.json | 2 +- .../r/styles/base-lyra/navigation-menu.json | 5 +- public/r/styles/base-lyra/on-media.json | 14 ++ public/r/styles/base-lyra/registry.json | 22 ++- public/r/styles/base-lyra/sheet.json | 2 +- public/r/styles/base-maia/dialog.json | 10 +- public/r/styles/base-maia/header-1.json | 2 +- public/r/styles/base-maia/header-2.json | 2 +- public/r/styles/base-maia/header-3.json | 2 +- public/r/styles/base-maia/header-4.json | 2 +- public/r/styles/base-maia/header-5.json | 2 +- .../r/styles/base-maia/navigation-menu.json | 5 +- public/r/styles/base-maia/on-media.json | 14 ++ public/r/styles/base-maia/registry.json | 22 ++- public/r/styles/base-maia/sheet.json | 2 +- public/r/styles/base-mira/dialog.json | 10 +- public/r/styles/base-mira/header-1.json | 2 +- public/r/styles/base-mira/header-2.json | 2 +- public/r/styles/base-mira/header-3.json | 2 +- public/r/styles/base-mira/header-4.json | 2 +- public/r/styles/base-mira/header-5.json | 2 +- .../r/styles/base-mira/navigation-menu.json | 5 +- public/r/styles/base-mira/on-media.json | 14 ++ public/r/styles/base-mira/registry.json | 22 ++- public/r/styles/base-mira/sheet.json | 2 +- public/r/styles/base-nova/dialog.json | 10 +- public/r/styles/base-nova/header-1.json | 2 +- public/r/styles/base-nova/header-2.json | 2 +- public/r/styles/base-nova/header-3.json | 2 +- public/r/styles/base-nova/header-4.json | 2 +- public/r/styles/base-nova/header-5.json | 2 +- .../r/styles/base-nova/navigation-menu.json | 5 +- public/r/styles/base-nova/on-media.json | 14 ++ public/r/styles/base-nova/registry.json | 22 ++- public/r/styles/base-nova/sheet.json | 2 +- public/r/styles/base-rhea/dialog.json | 10 +- public/r/styles/base-rhea/header-1.json | 2 +- public/r/styles/base-rhea/header-2.json | 2 +- public/r/styles/base-rhea/header-3.json | 2 +- public/r/styles/base-rhea/header-4.json | 2 +- public/r/styles/base-rhea/header-5.json | 2 +- .../r/styles/base-rhea/navigation-menu.json | 5 +- public/r/styles/base-rhea/on-media.json | 14 ++ public/r/styles/base-rhea/registry.json | 22 ++- public/r/styles/base-rhea/sheet.json | 2 +- public/r/styles/base-sera/dialog.json | 10 +- public/r/styles/base-sera/header-1.json | 2 +- public/r/styles/base-sera/header-2.json | 2 +- public/r/styles/base-sera/header-3.json | 2 +- public/r/styles/base-sera/header-4.json | 2 +- public/r/styles/base-sera/header-5.json | 2 +- .../r/styles/base-sera/navigation-menu.json | 5 +- public/r/styles/base-sera/on-media.json | 14 ++ public/r/styles/base-sera/registry.json | 22 ++- public/r/styles/base-sera/sheet.json | 2 +- public/r/styles/base-vega/dialog.json | 10 +- public/r/styles/base-vega/header-1.json | 2 +- public/r/styles/base-vega/header-2.json | 2 +- public/r/styles/base-vega/header-3.json | 2 +- public/r/styles/base-vega/header-4.json | 2 +- public/r/styles/base-vega/header-5.json | 2 +- .../r/styles/base-vega/navigation-menu.json | 5 +- public/r/styles/base-vega/on-media.json | 14 ++ public/r/styles/base-vega/registry.json | 22 ++- public/r/styles/base-vega/sheet.json | 2 +- registry.json | 19 ++- src/components/blocks/header-1.astro | 14 +- src/components/blocks/header-2.astro | 17 ++- src/components/blocks/header-3.astro | 14 +- src/components/blocks/header-4.astro | 17 ++- src/components/blocks/header-5.astro | 17 ++- src/components/ui/dialog/dialog.astro | 14 +- .../ui/navigation-menu/navigation-menu.astro | 31 +++- src/components/ui/sheet/sheet.astro | 14 +- src/content/pages/components/dialog.mdx | 12 ++ .../pages/components/navigation-menu.mdx | 12 ++ src/content/pages/components/sheet.mdx | 12 ++ src/lib/dialog.ts | 29 ++++ src/lib/on-media.ts | 65 +++++++++ tests/browser/responsive-menu.test.mjs | 134 ++++++++++++++++++ tests/on-media.test.mjs | 80 +++++++++++ 96 files changed, 885 insertions(+), 120 deletions(-) create mode 100644 public/r/styles/base-luma/on-media.json create mode 100644 public/r/styles/base-lyra/on-media.json create mode 100644 public/r/styles/base-maia/on-media.json create mode 100644 public/r/styles/base-mira/on-media.json create mode 100644 public/r/styles/base-nova/on-media.json create mode 100644 public/r/styles/base-rhea/on-media.json create mode 100644 public/r/styles/base-sera/on-media.json create mode 100644 public/r/styles/base-vega/on-media.json create mode 100644 src/lib/dialog.ts create mode 100644 src/lib/on-media.ts create mode 100644 tests/browser/responsive-menu.test.mjs create mode 100644 tests/on-media.test.mjs diff --git a/public/r/styles/base-luma/dialog.json b/public/r/styles/base-luma/dialog.json index fcaca0381..12f02a8f3 100644 --- a/public/r/styles/base-luma/dialog.json +++ b/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-luma/header-1.json b/public/r/styles/base-luma/header-1.json index fb02db824..bdb755eda 100644 --- a/public/r/styles/base-luma/header-1.json +++ b/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-luma/header-2.json b/public/r/styles/base-luma/header-2.json index 61d105855..ae95d9456 100644 --- a/public/r/styles/base-luma/header-2.json +++ b/public/r/styles/base-luma/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-luma/header-3.json b/public/r/styles/base-luma/header-3.json index 6840b6313..4a298248a 100644 --- a/public/r/styles/base-luma/header-3.json +++ b/public/r/styles/base-luma/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-luma/header-4.json b/public/r/styles/base-luma/header-4.json index 4048d78d5..3ca6481bf 100644 --- a/public/r/styles/base-luma/header-4.json +++ b/public/r/styles/base-luma/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-luma/header-5.json b/public/r/styles/base-luma/header-5.json index 693e1e935..05e37eea8 100644 --- a/public/r/styles/base-luma/header-5.json +++ b/public/r/styles/base-luma/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-luma/navigation-menu.json b/public/r/styles/base-luma/navigation-menu.json index 4b6dd0254..3ed89eafb 100644 --- a/public/r/styles/base-luma/navigation-menu.json +++ b/public/r/styles/base-luma/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-luma/on-media.json b/public/r/styles/base-luma/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-luma/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-luma/registry.json b/public/r/styles/base-luma/registry.json index ee42214e2..0e4d43364 100644 --- a/public/r/styles/base-luma/registry.json +++ b/public/r/styles/base-luma/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-luma/sheet.json b/public/r/styles/base-luma/sheet.json index b9e093363..8d2ad1084 100644 --- a/public/r/styles/base-luma/sheet.json +++ b/public/r/styles/base-luma/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-lyra/dialog.json b/public/r/styles/base-lyra/dialog.json index 14a95b8e7..c6bdac94d 100644 --- a/public/r/styles/base-lyra/dialog.json +++ b/public/r/styles/base-lyra/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-lyra/header-1.json b/public/r/styles/base-lyra/header-1.json index 0c6cf556f..39040261d 100644 --- a/public/r/styles/base-lyra/header-1.json +++ b/public/r/styles/base-lyra/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-lyra/header-2.json b/public/r/styles/base-lyra/header-2.json index de9ea7e7e..0994b6fa0 100644 --- a/public/r/styles/base-lyra/header-2.json +++ b/public/r/styles/base-lyra/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-lyra/header-3.json b/public/r/styles/base-lyra/header-3.json index 692a5958b..ce43de7ca 100644 --- a/public/r/styles/base-lyra/header-3.json +++ b/public/r/styles/base-lyra/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-lyra/header-4.json b/public/r/styles/base-lyra/header-4.json index 1350739ab..a8bb19062 100644 --- a/public/r/styles/base-lyra/header-4.json +++ b/public/r/styles/base-lyra/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-lyra/header-5.json b/public/r/styles/base-lyra/header-5.json index 2db015dec..c666f48db 100644 --- a/public/r/styles/base-lyra/header-5.json +++ b/public/r/styles/base-lyra/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-lyra/navigation-menu.json b/public/r/styles/base-lyra/navigation-menu.json index ef3f95886..d3f77a8c2 100644 --- a/public/r/styles/base-lyra/navigation-menu.json +++ b/public/r/styles/base-lyra/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-lyra/on-media.json b/public/r/styles/base-lyra/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-lyra/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-lyra/registry.json b/public/r/styles/base-lyra/registry.json index 5f4f21362..7a951fce8 100644 --- a/public/r/styles/base-lyra/registry.json +++ b/public/r/styles/base-lyra/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-lyra/sheet.json b/public/r/styles/base-lyra/sheet.json index 02b2fec44..dafb5f79d 100644 --- a/public/r/styles/base-lyra/sheet.json +++ b/public/r/styles/base-lyra/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-maia/dialog.json b/public/r/styles/base-maia/dialog.json index 228c94f46..3e2904cb2 100644 --- a/public/r/styles/base-maia/dialog.json +++ b/public/r/styles/base-maia/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-maia/header-1.json b/public/r/styles/base-maia/header-1.json index 7c1cb6df3..817755925 100644 --- a/public/r/styles/base-maia/header-1.json +++ b/public/r/styles/base-maia/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-maia/header-2.json b/public/r/styles/base-maia/header-2.json index 16c30ad25..ad1218347 100644 --- a/public/r/styles/base-maia/header-2.json +++ b/public/r/styles/base-maia/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-maia/header-3.json b/public/r/styles/base-maia/header-3.json index fd0157b7f..f2fbc6f6f 100644 --- a/public/r/styles/base-maia/header-3.json +++ b/public/r/styles/base-maia/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-maia/header-4.json b/public/r/styles/base-maia/header-4.json index 60663b63f..53b453cc9 100644 --- a/public/r/styles/base-maia/header-4.json +++ b/public/r/styles/base-maia/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-maia/header-5.json b/public/r/styles/base-maia/header-5.json index d7567215a..194275a0f 100644 --- a/public/r/styles/base-maia/header-5.json +++ b/public/r/styles/base-maia/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-maia/navigation-menu.json b/public/r/styles/base-maia/navigation-menu.json index f134fcb15..9e5f4659a 100644 --- a/public/r/styles/base-maia/navigation-menu.json +++ b/public/r/styles/base-maia/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-maia/on-media.json b/public/r/styles/base-maia/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-maia/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-maia/registry.json b/public/r/styles/base-maia/registry.json index c2bb2bef2..ba1b85ade 100644 --- a/public/r/styles/base-maia/registry.json +++ b/public/r/styles/base-maia/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-maia/sheet.json b/public/r/styles/base-maia/sheet.json index b0a223737..ac120b149 100644 --- a/public/r/styles/base-maia/sheet.json +++ b/public/r/styles/base-maia/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-mira/dialog.json b/public/r/styles/base-mira/dialog.json index 95fc111a5..f8cf28e45 100644 --- a/public/r/styles/base-mira/dialog.json +++ b/public/r/styles/base-mira/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-mira/header-1.json b/public/r/styles/base-mira/header-1.json index 7c1cb6df3..817755925 100644 --- a/public/r/styles/base-mira/header-1.json +++ b/public/r/styles/base-mira/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-mira/header-2.json b/public/r/styles/base-mira/header-2.json index 16c30ad25..ad1218347 100644 --- a/public/r/styles/base-mira/header-2.json +++ b/public/r/styles/base-mira/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-mira/header-3.json b/public/r/styles/base-mira/header-3.json index fd0157b7f..f2fbc6f6f 100644 --- a/public/r/styles/base-mira/header-3.json +++ b/public/r/styles/base-mira/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-mira/header-4.json b/public/r/styles/base-mira/header-4.json index 60663b63f..53b453cc9 100644 --- a/public/r/styles/base-mira/header-4.json +++ b/public/r/styles/base-mira/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-mira/header-5.json b/public/r/styles/base-mira/header-5.json index d7567215a..194275a0f 100644 --- a/public/r/styles/base-mira/header-5.json +++ b/public/r/styles/base-mira/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-mira/navigation-menu.json b/public/r/styles/base-mira/navigation-menu.json index be5427ae0..5ce5fbd62 100644 --- a/public/r/styles/base-mira/navigation-menu.json +++ b/public/r/styles/base-mira/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-mira/on-media.json b/public/r/styles/base-mira/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-mira/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-mira/registry.json b/public/r/styles/base-mira/registry.json index d36fc2bf9..8d83a000f 100644 --- a/public/r/styles/base-mira/registry.json +++ b/public/r/styles/base-mira/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-mira/sheet.json b/public/r/styles/base-mira/sheet.json index 5db14f846..040a9b84a 100644 --- a/public/r/styles/base-mira/sheet.json +++ b/public/r/styles/base-mira/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-nova/dialog.json b/public/r/styles/base-nova/dialog.json index 146afef1c..36f20ee99 100644 --- a/public/r/styles/base-nova/dialog.json +++ b/public/r/styles/base-nova/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-nova/header-1.json b/public/r/styles/base-nova/header-1.json index 0c6cf556f..39040261d 100644 --- a/public/r/styles/base-nova/header-1.json +++ b/public/r/styles/base-nova/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-nova/header-2.json b/public/r/styles/base-nova/header-2.json index de9ea7e7e..0994b6fa0 100644 --- a/public/r/styles/base-nova/header-2.json +++ b/public/r/styles/base-nova/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-nova/header-3.json b/public/r/styles/base-nova/header-3.json index 692a5958b..ce43de7ca 100644 --- a/public/r/styles/base-nova/header-3.json +++ b/public/r/styles/base-nova/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-nova/header-4.json b/public/r/styles/base-nova/header-4.json index 1350739ab..a8bb19062 100644 --- a/public/r/styles/base-nova/header-4.json +++ b/public/r/styles/base-nova/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-nova/header-5.json b/public/r/styles/base-nova/header-5.json index 2db015dec..c666f48db 100644 --- a/public/r/styles/base-nova/header-5.json +++ b/public/r/styles/base-nova/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-nova/navigation-menu.json b/public/r/styles/base-nova/navigation-menu.json index f65bf8e00..d962211f2 100644 --- a/public/r/styles/base-nova/navigation-menu.json +++ b/public/r/styles/base-nova/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-nova/on-media.json b/public/r/styles/base-nova/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-nova/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-nova/registry.json b/public/r/styles/base-nova/registry.json index c2520628b..d43d3d7cc 100644 --- a/public/r/styles/base-nova/registry.json +++ b/public/r/styles/base-nova/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-nova/sheet.json b/public/r/styles/base-nova/sheet.json index 850551cee..5c1c6d852 100644 --- a/public/r/styles/base-nova/sheet.json +++ b/public/r/styles/base-nova/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-rhea/dialog.json b/public/r/styles/base-rhea/dialog.json index 9fe4ed1cd..4969f97a2 100644 --- a/public/r/styles/base-rhea/dialog.json +++ b/public/r/styles/base-rhea/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-rhea/header-1.json b/public/r/styles/base-rhea/header-1.json index fb02db824..bdb755eda 100644 --- a/public/r/styles/base-rhea/header-1.json +++ b/public/r/styles/base-rhea/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-rhea/header-2.json b/public/r/styles/base-rhea/header-2.json index 61d105855..ae95d9456 100644 --- a/public/r/styles/base-rhea/header-2.json +++ b/public/r/styles/base-rhea/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-rhea/header-3.json b/public/r/styles/base-rhea/header-3.json index 6840b6313..4a298248a 100644 --- a/public/r/styles/base-rhea/header-3.json +++ b/public/r/styles/base-rhea/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-rhea/header-4.json b/public/r/styles/base-rhea/header-4.json index 4048d78d5..3ca6481bf 100644 --- a/public/r/styles/base-rhea/header-4.json +++ b/public/r/styles/base-rhea/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-rhea/header-5.json b/public/r/styles/base-rhea/header-5.json index 693e1e935..05e37eea8 100644 --- a/public/r/styles/base-rhea/header-5.json +++ b/public/r/styles/base-rhea/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-rhea/navigation-menu.json b/public/r/styles/base-rhea/navigation-menu.json index 0e81bcdf4..09f7eb010 100644 --- a/public/r/styles/base-rhea/navigation-menu.json +++ b/public/r/styles/base-rhea/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-rhea/on-media.json b/public/r/styles/base-rhea/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-rhea/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-rhea/registry.json b/public/r/styles/base-rhea/registry.json index 1d9d85ac5..05a2b539f 100644 --- a/public/r/styles/base-rhea/registry.json +++ b/public/r/styles/base-rhea/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-rhea/sheet.json b/public/r/styles/base-rhea/sheet.json index b9e093363..8d2ad1084 100644 --- a/public/r/styles/base-rhea/sheet.json +++ b/public/r/styles/base-rhea/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-sera/dialog.json b/public/r/styles/base-sera/dialog.json index 70e3ce22a..be65d8588 100644 --- a/public/r/styles/base-sera/dialog.json +++ b/public/r/styles/base-sera/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-sera/header-1.json b/public/r/styles/base-sera/header-1.json index fb02db824..bdb755eda 100644 --- a/public/r/styles/base-sera/header-1.json +++ b/public/r/styles/base-sera/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-sera/header-2.json b/public/r/styles/base-sera/header-2.json index 61d105855..ae95d9456 100644 --- a/public/r/styles/base-sera/header-2.json +++ b/public/r/styles/base-sera/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-sera/header-3.json b/public/r/styles/base-sera/header-3.json index 6840b6313..4a298248a 100644 --- a/public/r/styles/base-sera/header-3.json +++ b/public/r/styles/base-sera/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-sera/header-4.json b/public/r/styles/base-sera/header-4.json index 4048d78d5..3ca6481bf 100644 --- a/public/r/styles/base-sera/header-4.json +++ b/public/r/styles/base-sera/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-sera/header-5.json b/public/r/styles/base-sera/header-5.json index 693e1e935..05e37eea8 100644 --- a/public/r/styles/base-sera/header-5.json +++ b/public/r/styles/base-sera/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-sera/navigation-menu.json b/public/r/styles/base-sera/navigation-menu.json index bda0939e9..e84642cb2 100644 --- a/public/r/styles/base-sera/navigation-menu.json +++ b/public/r/styles/base-sera/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-sera/on-media.json b/public/r/styles/base-sera/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-sera/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-sera/registry.json b/public/r/styles/base-sera/registry.json index 1ee79fae1..e1e6e54e3 100644 --- a/public/r/styles/base-sera/registry.json +++ b/public/r/styles/base-sera/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-sera/sheet.json b/public/r/styles/base-sera/sheet.json index 14e157e3b..7a0a7f728 100644 --- a/public/r/styles/base-sera/sheet.json +++ b/public/r/styles/base-sera/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-vega/dialog.json b/public/r/styles/base-vega/dialog.json index 42b73fa83..4e675fd37 100644 --- a/public/r/styles/base-vega/dialog.json +++ b/public/r/styles/base-vega/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\n \n\n\n\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\n \n\n\n\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 void>()\n\nexport function initializeDialogs() {\n for (const root of document.querySelectorAll(\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\"]' }\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/", diff --git a/public/r/styles/base-vega/header-1.json b/public/r/styles/base-vega/header-1.json index 7c1cb6df3..817755925 100644 --- a/public/r/styles/base-vega/header-1.json +++ b/public/r/styles/base-vega/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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n {navigation.length > 0 && (\n \n \n {navigation.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n )}\n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-vega/header-2.json b/public/r/styles/base-vega/header-2.json index 16c30ad25..ad1218347 100644 --- a/public/r/styles/base-vega/header-2.json +++ b/public/r/styles/base-vega/header-2.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-2.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
\n \n \n \n \n {logo.label}\n \n \n \n
\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-vega/header-3.json b/public/r/styles/base-vega/header-3.json index fd0157b7f..f2fbc6f6f 100644 --- a/public/r/styles/base-vega/header-3.json +++ b/public/r/styles/base-vega/header-3.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-3.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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\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 { Separator } from \"@/components/ui/separator\"\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
\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-vega/header-4.json b/public/r/styles/base-vega/header-4.json index 60663b63f..53b453cc9 100644 --- a/public/r/styles/base-vega/header-4.json +++ b/public/r/styles/base-vega/header-4.json @@ -17,7 +17,7 @@ "files": [ { "path": "src/components/blocks/header-4.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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
\n \n \n \n \n {logo.label}\n \n \n \n
\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-vega/header-5.json b/public/r/styles/base-vega/header-5.json index d7567215a..194275a0f 100644 --- a/public/r/styles/base-vega/header-5.json +++ b/public/r/styles/base-vega/header-5.json @@ -18,7 +18,7 @@ "files": [ { "path": "src/components/blocks/header-5.astro", - "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", + "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\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 NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\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 description?: string\n active?: boolean\n image?: {\n src: ImageMetadata\n }\n links?: {\n label: string\n href: string\n description?: string\n icon?: string\n active?: boolean\n }[]\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\"\nconst dividerClass = fold === \"xl\" ? \"xl:block\" : \"lg:block\"\n---\n\n\n \n \n \n \n {logo.label}\n \n \n \n \n \n \n \n \n \n {menu.title}\n {menu.description}\n \n
\n \n {buttons.length > 0 && }\n {buttons.length > 0 && (\n
\n {buttons.map(({ label, href, icon, target }, index) => (\n \n {icon && }\n {label}\n \n ))}\n
\n )}\n
\n \n \n {menu.closeLabel}\n \n \n \n \n \n \n \n \n {navigation.map((item, index) =>\n item.links?.length ? (\n \n {item.label}\n \n
\n \n {item.image && (\n \n )}\n \n {item.label}\n {item.description && (\n \n {item.description}\n \n )}\n \n \n
\n {item.links.map((link) => (\n \n {link.icon && (\n \n )}\n \n {link.label}\n {link.description && (\n \n {link.description}\n \n )}\n \n \n ))}\n
\n
\n \n \n ) : (\n \n \n {item.label}\n \n \n )\n )}\n \n \n \n\n", "type": "registry:block" } ], diff --git a/public/r/styles/base-vega/navigation-menu.json b/public/r/styles/base-vega/navigation-menu.json index 3e2bce997..f9643d6ba 100644 --- a/public/r/styles/base-vega/navigation-menu.json +++ b/public/r/styles/base-vega/navigation-menu.json @@ -7,10 +7,13 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", - "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", + "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport NavigationMenuPositioner from \"./navigation-menu-positioner.astro\"\n\ntype Props = HTMLAttributes<\"nav\"> & {\n media?: string\n mountStrategy?: \"lazy\" | \"eager\"\n delayOpen?: number\n delayClose?: number\n openOnFocus?: boolean\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n align?: \"start\" | \"center\" | \"end\"\n sideOffset?: number\n alignOffset?: number\n positionMethod?: \"absolute\" | \"fixed\"\n safeTriangle?: boolean\n debugSafeTriangle?: boolean\n}\n\nconst {\n media,\n mountStrategy,\n class: className = \"\",\n delayOpen = 0,\n delayClose = 0,\n openOnFocus,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 8,\n alignOffset = 0,\n positionMethod = \"absolute\",\n safeTriangle,\n debugSafeTriangle,\n \"aria-label\": ariaLabel = \"Main\",\n ...props\n} = Astro.props\n---\n\n\n \n \n\n\n\n", "type": "registry:ui" }, { diff --git a/public/r/styles/base-vega/on-media.json b/public/r/styles/base-vega/on-media.json new file mode 100644 index 000000000..9bab2c8ae --- /dev/null +++ b/public/r/styles/base-vega/on-media.json @@ -0,0 +1,14 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "on-media", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "content": "type Trigger = { root: Element; selector: string }\n\n/** Import and mount only while the query matches; dispose on exit. */\nexport function onMedia(\n query: string,\n load: () => Promise,\n mount: (module: T) => () => void,\n trigger?: Trigger\n) {\n const media = window.matchMedia(query)\n let disposed = false\n let epoch = 0\n let cleanup: (() => void) | undefined\n let pendingClick: HTMLElement | undefined\n\n const update = async () => {\n const current = ++epoch\n pendingClick = undefined\n cleanup?.()\n cleanup = undefined\n if (!media.matches || disposed) return\n try {\n const module = await load()\n if (disposed || !media.matches || current !== epoch) return\n cleanup = mount(module)\n const target = pendingClick\n pendingClick = undefined\n if (target?.isConnected) target.click()\n } catch (error) {\n if (!disposed && current === epoch) {\n pendingClick = undefined\n console.error(error)\n }\n }\n }\n const click = (event: Event) => {\n if (\n !trigger ||\n cleanup ||\n disposed ||\n !media.matches ||\n event.defaultPrevented\n )\n return\n if (!(event.target instanceof Element)) return\n const target = event.target.closest(trigger.selector)\n if (!target || !trigger.root.contains(target)) return\n pendingClick ??= target\n event.preventDefault()\n event.stopImmediatePropagation()\n }\n const change = () => void update()\n media.addEventListener(\"change\", change)\n trigger?.root.addEventListener(\"click\", click, true)\n change()\n return () => {\n disposed = true\n epoch++\n pendingClick = undefined\n media.removeEventListener(\"change\", change)\n trigger?.root.removeEventListener(\"click\", click, true)\n cleanup?.()\n cleanup = undefined\n }\n}\n", + "type": "registry:lib" + } + ], + "type": "registry:lib" +} \ No newline at end of file diff --git a/public/r/styles/base-vega/registry.json b/public/r/styles/base-vega/registry.json index 19cd0846d..cc92c80b6 100644 --- a/public/r/styles/base-vega/registry.json +++ b/public/r/styles/base-vega/registry.json @@ -595,7 +595,8 @@ "@lucide/astro" ], "registryDependencies": [ - "@fulldev/button" + "@fulldev/button", + "@fulldev/on-media" ], "files": [ { @@ -641,6 +642,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1261,6 +1266,9 @@ "@data-slot/navigation-menu@^1.1.2", "@lucide/astro" ], + "registryDependencies": [ + "@fulldev/on-media" + ], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4850,6 +4858,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/public/r/styles/base-vega/sheet.json b/public/r/styles/base-vega/sheet.json index 87a73acf8..8e6aec92b 100644 --- a/public/r/styles/base-vega/sheet.json +++ b/public/r/styles/base-vega/sheet.json @@ -14,7 +14,7 @@ "files": [ { "path": "src/components/ui/sheet/sheet.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\n \n\n\n\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}\n\nconst {\n media,\n class: className,\n defaultOpen,\n closeOnClickOutside,\n closeOnEscape,\n lockScroll,\n ...props\n} = Astro.props\n---\n\n\n \n\n\n\n", "type": "registry:ui" }, { diff --git a/registry.json b/registry.json index 4298d8a31..8173d4f45 100644 --- a/registry.json +++ b/registry.json @@ -539,7 +539,7 @@ "categories": ["ui"], "docs": "https://ui.full.dev/components/dialog/", "dependencies": ["@data-slot/dialog@^1.1.2", "@lucide/astro"], - "registryDependencies": ["@fulldev/button"], + "registryDependencies": ["@fulldev/button", "@fulldev/on-media"], "files": [ { "path": "src/components/ui/dialog/dialog.astro", @@ -584,6 +584,10 @@ { "path": "src/components/ui/dialog/index.ts", "type": "registry:ui" + }, + { + "path": "src/lib/dialog.ts", + "type": "registry:lib" } ] }, @@ -1138,6 +1142,7 @@ "categories": ["ui"], "docs": "https://ui.full.dev/components/navigation-menu/", "dependencies": ["@data-slot/navigation-menu@^1.1.2", "@lucide/astro"], + "registryDependencies": ["@fulldev/on-media"], "files": [ { "path": "src/components/ui/navigation-menu/navigation-menu.astro", @@ -4299,6 +4304,18 @@ "@fulldev/sidebar-1" ] }, + { + "name": "on-media", + "type": "registry:lib", + "title": "On Media", + "description": "Load and dispose browser behavior while a media query matches.", + "files": [ + { + "path": "src/lib/on-media.ts", + "type": "registry:lib" + } + ] + }, { "name": "accordion-examples", "type": "registry:example", diff --git a/src/components/blocks/header-1.astro b/src/components/blocks/header-1.astro index e32d54eab..8e65d10a1 100644 --- a/src/components/blocks/header-1.astro +++ b/src/components/blocks/header-1.astro @@ -25,6 +25,7 @@ import { } from "@/components/ui/sheet" type Props = HTMLAttributes<"header"> & { + fold?: "lg" | "xl" logo: { label: string href: string @@ -53,6 +54,7 @@ type Props = HTMLAttributes<"header"> & { } const { + fold = "lg", class: className, logo, navigation, @@ -61,6 +63,11 @@ const { menu, ...props } = Astro.props + +const desktopQuery = fold === "xl" ? "(min-width: 80rem)" : "(min-width: 64rem)" +const mobileQuery = fold === "xl" ? "(width < 80rem)" : "(width < 64rem)" +const desktopClass = fold === "xl" ? "xl:flex" : "lg:flex" +const mobileClass = fold === "xl" ? "xl:hidden" : "lg:hidden" ---
@@ -78,8 +85,9 @@ const { {navigation.length > 0 && ( )} -