jaci-ui 0.6.3 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +48 -0
- package/dist/components/alert/alert.cjs +11 -1
- package/dist/components/alert/alert.cjs.map +1 -1
- package/dist/components/alert/alert.d.cts +4 -1
- package/dist/components/alert/alert.d.ts +4 -1
- package/dist/components/alert/alert.js +11 -2
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/components/alert/index.d.cts +2 -2
- package/dist/components/alert/index.d.ts +2 -2
- package/dist/components/alert-dialog/alert-dialog.cjs +4 -1
- package/dist/components/alert-dialog/alert-dialog.cjs.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.d.cts +2 -2
- package/dist/components/alert-dialog/alert-dialog.d.ts +2 -2
- package/dist/components/alert-dialog/alert-dialog.js +4 -1
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/aspect-ratio/aspect-ratio.cjs +23 -0
- package/dist/components/aspect-ratio/aspect-ratio.cjs.map +1 -0
- package/dist/components/aspect-ratio/aspect-ratio.d.cts +9 -0
- package/dist/components/aspect-ratio/aspect-ratio.d.ts +9 -0
- package/dist/components/aspect-ratio/aspect-ratio.js +23 -0
- package/dist/components/aspect-ratio/aspect-ratio.js.map +1 -0
- package/dist/components/aspect-ratio/index.d.cts +2 -0
- package/dist/components/aspect-ratio/index.d.ts +2 -0
- package/dist/components/card/card.cjs +10 -1
- package/dist/components/card/card.cjs.map +1 -1
- package/dist/components/card/card.d.cts +15 -2
- package/dist/components/card/card.d.ts +15 -2
- package/dist/components/card/card.js +10 -2
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/card/index.d.cts +2 -2
- package/dist/components/card/index.d.ts +2 -2
- package/dist/components/code/code.cjs +39 -0
- package/dist/components/code/code.cjs.map +1 -0
- package/dist/components/code/code.d.cts +14 -0
- package/dist/components/code/code.d.ts +14 -0
- package/dist/components/code/code.js +39 -0
- package/dist/components/code/code.js.map +1 -0
- package/dist/components/code/index.d.cts +2 -0
- package/dist/components/code/index.d.ts +2 -0
- package/dist/components/color-picker/color-picker.cjs +4 -1
- package/dist/components/color-picker/color-picker.cjs.map +1 -1
- package/dist/components/color-picker/color-picker.d.cts +2 -2
- package/dist/components/color-picker/color-picker.d.ts +2 -2
- package/dist/components/color-picker/color-picker.js +4 -1
- package/dist/components/color-picker/color-picker.js.map +1 -1
- package/dist/components/combobox/combobox.cjs +4 -1
- package/dist/components/combobox/combobox.cjs.map +1 -1
- package/dist/components/combobox/combobox.d.cts +2 -2
- package/dist/components/combobox/combobox.d.ts +2 -2
- package/dist/components/combobox/combobox.js +4 -1
- package/dist/components/combobox/combobox.js.map +1 -1
- package/dist/components/command/command.cjs +73 -12
- package/dist/components/command/command.cjs.map +1 -1
- package/dist/components/command/command.d.cts +7 -1
- package/dist/components/command/command.d.ts +7 -1
- package/dist/components/command/command.js +73 -12
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/command/index.d.cts +2 -2
- package/dist/components/command/index.d.ts +2 -2
- package/dist/components/context-menu/context-menu.cjs +4 -1
- package/dist/components/context-menu/context-menu.cjs.map +1 -1
- package/dist/components/context-menu/context-menu.d.cts +2 -2
- package/dist/components/context-menu/context-menu.d.ts +2 -2
- package/dist/components/context-menu/context-menu.js +4 -1
- package/dist/components/context-menu/context-menu.js.map +1 -1
- package/dist/components/date-picker/date-picker.cjs +4 -1
- package/dist/components/date-picker/date-picker.cjs.map +1 -1
- package/dist/components/date-picker/date-picker.d.cts +2 -2
- package/dist/components/date-picker/date-picker.d.ts +2 -2
- package/dist/components/date-picker/date-picker.js +4 -1
- package/dist/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.cjs +4 -1
- package/dist/components/date-range-picker/date-range-picker.cjs.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.d.cts +2 -2
- package/dist/components/date-range-picker/date-range-picker.d.ts +2 -2
- package/dist/components/date-range-picker/date-range-picker.js +4 -1
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/dialog/dialog.cjs +4 -1
- package/dist/components/dialog/dialog.cjs.map +1 -1
- package/dist/components/dialog/dialog.d.cts +2 -2
- package/dist/components/dialog/dialog.d.ts +2 -2
- package/dist/components/dialog/dialog.js +4 -1
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.cjs +4 -1
- package/dist/components/drawer/drawer.cjs.map +1 -1
- package/dist/components/drawer/drawer.d.cts +2 -2
- package/dist/components/drawer/drawer.d.ts +2 -2
- package/dist/components/drawer/drawer.js +4 -1
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/feedback/badge.cjs +6 -3
- package/dist/components/feedback/badge.cjs.map +1 -1
- package/dist/components/feedback/badge.d.cts +1 -0
- package/dist/components/feedback/badge.d.ts +1 -0
- package/dist/components/feedback/badge.js +6 -3
- package/dist/components/feedback/badge.js.map +1 -1
- package/dist/components/figure/figure.cjs +134 -0
- package/dist/components/figure/figure.cjs.map +1 -0
- package/dist/components/figure/figure.d.cts +24 -0
- package/dist/components/figure/figure.d.ts +24 -0
- package/dist/components/figure/figure.js +131 -0
- package/dist/components/figure/figure.js.map +1 -0
- package/dist/components/figure/index.d.cts +2 -0
- package/dist/components/figure/index.d.ts +2 -0
- package/dist/components/image/image.cjs +112 -0
- package/dist/components/image/image.cjs.map +1 -0
- package/dist/components/image/image.d.cts +21 -0
- package/dist/components/image/image.d.ts +21 -0
- package/dist/components/image/image.js +112 -0
- package/dist/components/image/image.js.map +1 -0
- package/dist/components/image/index.d.cts +2 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/kbd/index.d.cts +2 -0
- package/dist/components/kbd/index.d.ts +2 -0
- package/dist/components/kbd/kbd.cjs +23 -0
- package/dist/components/kbd/kbd.cjs.map +1 -0
- package/dist/components/kbd/kbd.d.cts +12 -0
- package/dist/components/kbd/kbd.d.ts +12 -0
- package/dist/components/kbd/kbd.js +23 -0
- package/dist/components/kbd/kbd.js.map +1 -0
- package/dist/components/menu/menu.cjs +4 -1
- package/dist/components/menu/menu.cjs.map +1 -1
- package/dist/components/menu/menu.d.cts +2 -2
- package/dist/components/menu/menu.d.ts +2 -2
- package/dist/components/menu/menu.js +4 -1
- package/dist/components/menu/menu.js.map +1 -1
- package/dist/components/menubar/menubar.cjs +4 -1
- package/dist/components/menubar/menubar.cjs.map +1 -1
- package/dist/components/menubar/menubar.d.cts +2 -2
- package/dist/components/menubar/menubar.d.ts +2 -2
- package/dist/components/menubar/menubar.js +4 -1
- package/dist/components/menubar/menubar.js.map +1 -1
- package/dist/components/navigation/navigation.cjs +3 -1
- package/dist/components/navigation/navigation.cjs.map +1 -1
- package/dist/components/navigation/navigation.js +3 -1
- package/dist/components/navigation/navigation.js.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.cjs +4 -1
- package/dist/components/navigation-menu/navigation-menu.cjs.map +1 -1
- package/dist/components/navigation-menu/navigation-menu.d.cts +2 -2
- package/dist/components/navigation-menu/navigation-menu.d.ts +2 -2
- package/dist/components/navigation-menu/navigation-menu.js +4 -1
- package/dist/components/navigation-menu/navigation-menu.js.map +1 -1
- package/dist/components/popover/popover.cjs +4 -1
- package/dist/components/popover/popover.cjs.map +1 -1
- package/dist/components/popover/popover.d.cts +2 -2
- package/dist/components/popover/popover.d.ts +2 -2
- package/dist/components/popover/popover.js +4 -1
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/progress/progress.cjs +19 -7
- package/dist/components/progress/progress.cjs.map +1 -1
- package/dist/components/progress/progress.d.cts +4 -0
- package/dist/components/progress/progress.d.ts +4 -0
- package/dist/components/progress/progress.js +19 -7
- package/dist/components/progress/progress.js.map +1 -1
- package/dist/components/quote/index.d.cts +2 -0
- package/dist/components/quote/index.d.ts +2 -0
- package/dist/components/quote/quote.cjs +38 -0
- package/dist/components/quote/quote.cjs.map +1 -0
- package/dist/components/quote/quote.d.cts +19 -0
- package/dist/components/quote/quote.d.ts +19 -0
- package/dist/components/quote/quote.js +38 -0
- package/dist/components/quote/quote.js.map +1 -0
- package/dist/components/select/select.cjs +4 -1
- package/dist/components/select/select.cjs.map +1 -1
- package/dist/components/select/select.d.cts +2 -2
- package/dist/components/select/select.d.ts +2 -2
- package/dist/components/select/select.js +4 -1
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/sidebar/sidebar.cjs +24 -17
- package/dist/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/components/sidebar/sidebar.d.cts +4 -2
- package/dist/components/sidebar/sidebar.d.ts +4 -2
- package/dist/components/sidebar/sidebar.js +24 -17
- package/dist/components/sidebar/sidebar.js.map +1 -1
- package/dist/components/stat/index.d.cts +2 -0
- package/dist/components/stat/index.d.ts +2 -0
- package/dist/components/stat/stat.cjs +122 -0
- package/dist/components/stat/stat.cjs.map +1 -0
- package/dist/components/stat/stat.d.cts +51 -0
- package/dist/components/stat/stat.d.ts +51 -0
- package/dist/components/stat/stat.js +114 -0
- package/dist/components/stat/stat.js.map +1 -0
- package/dist/components/stat-group/index.d.cts +2 -0
- package/dist/components/stat-group/index.d.ts +2 -0
- package/dist/components/toast/toast.cjs +4 -1
- package/dist/components/toast/toast.cjs.map +1 -1
- package/dist/components/toast/toast.d.cts +1 -1
- package/dist/components/toast/toast.d.ts +1 -1
- package/dist/components/toast/toast.js +4 -1
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/tooltip/tooltip.cjs +4 -1
- package/dist/components/tooltip/tooltip.cjs.map +1 -1
- package/dist/components/tooltip/tooltip.d.cts +2 -2
- package/dist/components/tooltip/tooltip.d.ts +2 -2
- package/dist/components/tooltip/tooltip.js +4 -1
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/components/typography/heading.cjs +8 -2
- package/dist/components/typography/heading.cjs.map +1 -1
- package/dist/components/typography/heading.d.cts +8 -1
- package/dist/components/typography/heading.d.ts +8 -1
- package/dist/components/typography/heading.js +8 -2
- package/dist/components/typography/heading.js.map +1 -1
- package/dist/components/typography/index.d.cts +2 -2
- package/dist/components/typography/index.d.ts +2 -2
- package/dist/components/typography/paragraph.cjs +7 -2
- package/dist/components/typography/paragraph.cjs.map +1 -1
- package/dist/components/typography/paragraph.d.cts +8 -2
- package/dist/components/typography/paragraph.d.ts +8 -2
- package/dist/components/typography/paragraph.js +7 -2
- package/dist/components/typography/paragraph.js.map +1 -1
- package/dist/components/typography/text.cjs +6 -2
- package/dist/components/typography/text.cjs.map +1 -1
- package/dist/components/typography/text.d.cts +5 -0
- package/dist/components/typography/text.d.ts +5 -0
- package/dist/components/typography/text.js +6 -2
- package/dist/components/typography/text.js.map +1 -1
- package/dist/index.cjs +28 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +20 -5
- package/dist/index.d.ts +20 -5
- package/dist/index.js +11 -3
- package/dist/index.js.map +1 -0
- package/dist/styled-system/recipes/alert.cjs +2 -1
- package/dist/styled-system/recipes/alert.cjs.map +1 -1
- package/dist/styled-system/recipes/alert.js +2 -1
- package/dist/styled-system/recipes/alert.js.map +1 -1
- package/dist/styled-system/recipes/aspect-ratio-box.cjs +25 -0
- package/dist/styled-system/recipes/aspect-ratio-box.cjs.map +1 -0
- package/dist/styled-system/recipes/aspect-ratio-box.js +25 -0
- package/dist/styled-system/recipes/aspect-ratio-box.js.map +1 -0
- package/dist/styled-system/recipes/badge.cjs +16 -6
- package/dist/styled-system/recipes/badge.cjs.map +1 -1
- package/dist/styled-system/recipes/badge.js +16 -6
- package/dist/styled-system/recipes/badge.js.map +1 -1
- package/dist/styled-system/recipes/code.cjs +33 -0
- package/dist/styled-system/recipes/code.cjs.map +1 -0
- package/dist/styled-system/recipes/code.js +33 -0
- package/dist/styled-system/recipes/code.js.map +1 -0
- package/dist/styled-system/recipes/command.cjs +3 -3
- package/dist/styled-system/recipes/command.cjs.map +1 -1
- package/dist/styled-system/recipes/command.js +3 -3
- package/dist/styled-system/recipes/command.js.map +1 -1
- package/dist/styled-system/recipes/figure.cjs +43 -0
- package/dist/styled-system/recipes/figure.cjs.map +1 -0
- package/dist/styled-system/recipes/figure.js +43 -0
- package/dist/styled-system/recipes/figure.js.map +1 -0
- package/dist/styled-system/recipes/heading.cjs +34 -9
- package/dist/styled-system/recipes/heading.cjs.map +1 -1
- package/dist/styled-system/recipes/heading.js +34 -9
- package/dist/styled-system/recipes/heading.js.map +1 -1
- package/dist/styled-system/recipes/image.cjs +57 -0
- package/dist/styled-system/recipes/image.cjs.map +1 -0
- package/dist/styled-system/recipes/image.js +57 -0
- package/dist/styled-system/recipes/image.js.map +1 -0
- package/dist/styled-system/recipes/kbd.cjs +39 -0
- package/dist/styled-system/recipes/kbd.cjs.map +1 -0
- package/dist/styled-system/recipes/kbd.js +39 -0
- package/dist/styled-system/recipes/kbd.js.map +1 -0
- package/dist/styled-system/recipes/paragraph.cjs +25 -2
- package/dist/styled-system/recipes/paragraph.cjs.map +1 -1
- package/dist/styled-system/recipes/paragraph.js +25 -2
- package/dist/styled-system/recipes/paragraph.js.map +1 -1
- package/dist/styled-system/recipes/progress.cjs +1 -0
- package/dist/styled-system/recipes/progress.cjs.map +1 -1
- package/dist/styled-system/recipes/progress.js +1 -0
- package/dist/styled-system/recipes/progress.js.map +1 -1
- package/dist/styled-system/recipes/quote.cjs +39 -0
- package/dist/styled-system/recipes/quote.cjs.map +1 -0
- package/dist/styled-system/recipes/quote.js +39 -0
- package/dist/styled-system/recipes/quote.js.map +1 -0
- package/dist/styled-system/recipes/stat-group.cjs +40 -0
- package/dist/styled-system/recipes/stat-group.cjs.map +1 -0
- package/dist/styled-system/recipes/stat-group.js +40 -0
- package/dist/styled-system/recipes/stat-group.js.map +1 -0
- package/dist/styled-system/recipes/stat.cjs +63 -0
- package/dist/styled-system/recipes/stat.cjs.map +1 -0
- package/dist/styled-system/recipes/stat.js +63 -0
- package/dist/styled-system/recipes/stat.js.map +1 -0
- package/dist/styled-system/recipes/text.cjs +23 -2
- package/dist/styled-system/recipes/text.cjs.map +1 -1
- package/dist/styled-system/recipes/text.js +23 -2
- package/dist/styled-system/recipes/text.js.map +1 -1
- package/dist/styles.css +1064 -117
- package/dist/theme/theme-provider.cjs +18 -8
- package/dist/theme/theme-provider.cjs.map +1 -1
- package/dist/theme/theme-provider.js +18 -8
- package/dist/theme/theme-provider.js.map +1 -1
- package/dist/theme/theme-scope.cjs +21 -0
- package/dist/theme/theme-scope.cjs.map +1 -0
- package/dist/theme/theme-scope.js +19 -0
- package/dist/theme/theme-scope.js.map +1 -0
- package/package.json +7 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menubar.js","names":["BaseMenubar","BaseMenu","Menubar"],"sources":["../../../src/components/menubar/menubar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { Menubar as BaseMenubar } from \"@base-ui/react/menubar\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot } from \"@base-ui/react/menu\";\n\nimport { menu, menubar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type MenubarOrientation = \"horizontal\" | \"vertical\";\n\ninterface MenubarContextValue {\n orientation: MenubarOrientation;\n styles: ReturnType<typeof menubar>;\n}\n\nconst MenubarContext = createContext<MenubarContextValue | null>(null);\n\nfunction useMenubarContext() {\n const context = useContext(MenubarContext);\n if (!context) {\n throw new Error(\"Menubar parts must be rendered inside Menubar.Root.\");\n }\n\n return context;\n}\n\nexport interface MenubarRootProps extends ComponentPropsWithoutRef<typeof BaseMenubar> {\n orientation?: MenubarOrientation;\n}\n\n/**\n * A horizontal or vertical command bar. Each `Menubar.Menu` owns one\n * keyboard-navigable menu while the root coordinates arrow-key movement.\n */\nexport const MenubarRoot = forwardRef<HTMLDivElement, MenubarRootProps>(function MenubarRoot(\n { className, orientation = \"horizontal\", ...props },\n ref,\n) {\n const styles = menubar({ orientation });\n\n return (\n <MenubarContext.Provider value={{ orientation, styles }}>\n <BaseMenubar\n {...props}\n ref={ref}\n orientation={orientation}\n className={withRecipeClassName(styles.root, className)}\n data-jaci-component=\"menubar\"\n data-orientation={orientation}\n data-slot=\"menubar\"\n />\n </MenubarContext.Provider>\n );\n});\n\nexport interface MenubarMenuProps<Payload = unknown> extends BaseMenuRoot.Props<Payload> {}\n\nexport function MenubarMenu<Payload = unknown>(props: MenubarMenuProps<Payload>) {\n return <BaseMenu.Root {...props} />;\n}\n\nexport type MenubarTriggerProps = ComponentPropsWithoutRef<typeof BaseMenu.Trigger>;\n\nexport const MenubarTrigger = forwardRef<HTMLButtonElement, MenubarTriggerProps>(\n function MenubarTrigger({ className, ...props }, ref) {\n const { styles } = useMenubarContext();\n\n return (\n <BaseMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.trigger, className)}\n data-jaci-component=\"menubar\"\n data-slot=\"menubar-trigger\"\n />\n );\n },\n);\n\nexport type MenubarPortalProps = ComponentPropsWithoutRef<typeof BaseMenu.Portal>;\nexport const MenubarPortal: typeof BaseMenu.Portal = BaseMenu.Portal;\n\nexport type MenubarPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenubarPositioner = forwardRef<HTMLDivElement, MenubarPositionerProps>(\n function MenubarPositioner({ className, ...props }, ref) {\n return (\n <BaseMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().positioner, className)}\n data-slot=\"menubar-positioner\"\n />\n );\n },\n);\n\nexport type MenubarPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenubarPopup = forwardRef<HTMLDivElement, MenubarPopupProps>(function MenubarPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().popup, className)}\n data-slot=\"menubar-popup\"\n />\n );\n});\n\nexport type MenubarArrowProps = ComponentPropsWithoutRef<typeof BaseMenu.Arrow>;\n\nexport const MenubarArrow = forwardRef<HTMLDivElement, MenubarArrowProps>(function MenubarArrow(\n { className, ...props },\n ref,\n) {\n return <BaseMenu.Arrow {...props} ref={ref} className={className} data-slot=\"menubar-arrow\" />;\n});\n\nexport type MenubarItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenubarItem = forwardRef<HTMLElement, MenubarItemProps>(function MenubarItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-item\"\n />\n );\n});\n\nexport type MenubarLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\nexport const MenubarLinkItem = forwardRef<Element, MenubarLinkItemProps>(function MenubarLinkItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.LinkItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-link-item\"\n />\n );\n});\n\nexport type MenubarGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenubarGroup = forwardRef<HTMLDivElement, MenubarGroupProps>(function MenubarGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().group, className)}\n data-slot=\"menubar-group\"\n />\n );\n});\n\nexport type MenubarGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenubarGroupLabel = forwardRef<HTMLDivElement, MenubarGroupLabelProps>(\n function MenubarGroupLabel({ className, ...props }, ref) {\n return (\n <BaseMenu.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().groupLabel, className)}\n data-slot=\"menubar-group-label\"\n />\n );\n },\n);\n\nexport type MenubarSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenubarSeparator = forwardRef<HTMLDivElement, MenubarSeparatorProps>(\n function MenubarSeparator({ className, ...props }, ref) {\n return (\n <BaseMenu.Separator\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().separator, className)}\n data-slot=\"menubar-separator\"\n />\n );\n },\n);\n\nexport type MenubarCheckboxItemProps = ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItem>;\n\nexport const MenubarCheckboxItem = forwardRef<HTMLElement, MenubarCheckboxItemProps>(\n function MenubarCheckboxItem({ className, ...props }, ref) {\n return (\n <BaseMenu.CheckboxItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-checkbox-item\"\n />\n );\n },\n);\n\nexport type MenubarCheckboxItemIndicatorProps = ComponentPropsWithoutRef<\n typeof BaseMenu.CheckboxItemIndicator\n>;\n\nexport const MenubarCheckboxItemIndicator = forwardRef<\n HTMLSpanElement,\n MenubarCheckboxItemIndicatorProps\n>(function MenubarCheckboxItemIndicator({ children = \"✓\", className, ...props }, ref) {\n return (\n <BaseMenu.CheckboxItemIndicator\n {...props}\n ref={ref}\n className={className}\n data-slot=\"menubar-checkbox-indicator\"\n aria-hidden=\"true\"\n >\n {children}\n </BaseMenu.CheckboxItemIndicator>\n );\n});\n\nexport type MenubarRadioGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.RadioGroup>;\nexport const MenubarRadioGroup: typeof BaseMenu.RadioGroup = BaseMenu.RadioGroup;\n\nexport type MenubarRadioItemProps = ComponentPropsWithoutRef<typeof BaseMenu.RadioItem>;\n\nexport const MenubarRadioItem = forwardRef<HTMLElement, MenubarRadioItemProps>(\n function MenubarRadioItem({ className, ...props }, ref) {\n return (\n <BaseMenu.RadioItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-radio-item\"\n />\n );\n },\n);\n\nexport type MenubarRadioItemIndicatorProps = ComponentPropsWithoutRef<\n typeof BaseMenu.RadioItemIndicator\n>;\n\nexport const MenubarRadioItemIndicator = forwardRef<\n HTMLSpanElement,\n MenubarRadioItemIndicatorProps\n>(function MenubarRadioItemIndicator({ children = \"•\", className, ...props }, ref) {\n return (\n <BaseMenu.RadioItemIndicator\n {...props}\n ref={ref}\n className={className}\n data-slot=\"menubar-radio-indicator\"\n aria-hidden=\"true\"\n >\n {children}\n </BaseMenu.RadioItemIndicator>\n );\n});\n\nexport type MenubarSubmenuRootProps = ComponentPropsWithoutRef<typeof BaseMenu.SubmenuRoot>;\nexport const MenubarSubmenuRoot: typeof BaseMenu.SubmenuRoot = BaseMenu.SubmenuRoot;\n\nexport type MenubarSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>;\n\nexport const MenubarSubmenuTrigger = forwardRef<HTMLElement, MenubarSubmenuTriggerProps>(\n function MenubarSubmenuTrigger({ className, ...props }, ref) {\n return (\n <BaseMenu.SubmenuTrigger\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-submenu-trigger\"\n />\n );\n },\n);\n\nexport const Menubar = {\n Root: MenubarRoot,\n Menu: MenubarMenu,\n Trigger: MenubarTrigger,\n Portal: MenubarPortal,\n Positioner: MenubarPositioner,\n Popup: MenubarPopup,\n Arrow: MenubarArrow,\n Item: MenubarItem,\n LinkItem: MenubarLinkItem,\n Group: MenubarGroup,\n GroupLabel: MenubarGroupLabel,\n Separator: MenubarSeparator,\n CheckboxItem: MenubarCheckboxItem,\n CheckboxItemIndicator: MenubarCheckboxItemIndicator,\n RadioGroup: MenubarRadioGroup,\n RadioItem: MenubarRadioItem,\n RadioItemIndicator: MenubarRadioItemIndicator,\n SubmenuRoot: MenubarSubmenuRoot,\n SubmenuTrigger: MenubarSubmenuTrigger,\n createHandle: BaseMenu.createHandle,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menubar.js","names":["BaseMenubar","BaseMenu","Menubar"],"sources":["../../../src/components/menubar/menubar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { Menubar as BaseMenubar } from \"@base-ui/react/menubar\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { MenuRoot as BaseMenuRoot } from \"@base-ui/react/menu\";\n\nimport { menu, menubar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type MenubarOrientation = \"horizontal\" | \"vertical\";\n\ninterface MenubarContextValue {\n orientation: MenubarOrientation;\n styles: ReturnType<typeof menubar>;\n}\n\nconst MenubarContext = createContext<MenubarContextValue | null>(null);\n\nfunction useMenubarContext() {\n const context = useContext(MenubarContext);\n if (!context) {\n throw new Error(\"Menubar parts must be rendered inside Menubar.Root.\");\n }\n\n return context;\n}\n\nexport interface MenubarRootProps extends ComponentPropsWithoutRef<typeof BaseMenubar> {\n orientation?: MenubarOrientation;\n}\n\n/**\n * A horizontal or vertical command bar. Each `Menubar.Menu` owns one\n * keyboard-navigable menu while the root coordinates arrow-key movement.\n */\nexport const MenubarRoot = forwardRef<HTMLDivElement, MenubarRootProps>(function MenubarRoot(\n { className, orientation = \"horizontal\", ...props },\n ref,\n) {\n const styles = menubar({ orientation });\n\n return (\n <MenubarContext.Provider value={{ orientation, styles }}>\n <BaseMenubar\n {...props}\n ref={ref}\n orientation={orientation}\n className={withRecipeClassName(styles.root, className)}\n data-jaci-component=\"menubar\"\n data-orientation={orientation}\n data-slot=\"menubar\"\n />\n </MenubarContext.Provider>\n );\n});\n\nexport interface MenubarMenuProps<Payload = unknown> extends BaseMenuRoot.Props<Payload> {}\n\nexport function MenubarMenu<Payload = unknown>(props: MenubarMenuProps<Payload>) {\n return <BaseMenu.Root {...props} />;\n}\n\nexport type MenubarTriggerProps = ComponentPropsWithoutRef<typeof BaseMenu.Trigger>;\n\nexport const MenubarTrigger = forwardRef<HTMLButtonElement, MenubarTriggerProps>(\n function MenubarTrigger({ className, ...props }, ref) {\n const { styles } = useMenubarContext();\n\n return (\n <BaseMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.trigger, className)}\n data-jaci-component=\"menubar\"\n data-slot=\"menubar-trigger\"\n />\n );\n },\n);\n\nexport type MenubarPortalProps = ComponentPropsWithoutRef<typeof BaseMenu.Portal>;\nexport function MenubarPortal(props: MenubarPortalProps) {\n return <BaseMenu.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type MenubarPositionerProps = ComponentPropsWithoutRef<typeof BaseMenu.Positioner>;\n\nexport const MenubarPositioner = forwardRef<HTMLDivElement, MenubarPositionerProps>(\n function MenubarPositioner({ className, ...props }, ref) {\n return (\n <BaseMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().positioner, className)}\n data-slot=\"menubar-positioner\"\n />\n );\n },\n);\n\nexport type MenubarPopupProps = ComponentPropsWithoutRef<typeof BaseMenu.Popup>;\n\nexport const MenubarPopup = forwardRef<HTMLDivElement, MenubarPopupProps>(function MenubarPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().popup, className)}\n data-slot=\"menubar-popup\"\n />\n );\n});\n\nexport type MenubarArrowProps = ComponentPropsWithoutRef<typeof BaseMenu.Arrow>;\n\nexport const MenubarArrow = forwardRef<HTMLDivElement, MenubarArrowProps>(function MenubarArrow(\n { className, ...props },\n ref,\n) {\n return <BaseMenu.Arrow {...props} ref={ref} className={className} data-slot=\"menubar-arrow\" />;\n});\n\nexport type MenubarItemProps = ComponentPropsWithoutRef<typeof BaseMenu.Item>;\n\nexport const MenubarItem = forwardRef<HTMLElement, MenubarItemProps>(function MenubarItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Item\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-item\"\n />\n );\n});\n\nexport type MenubarLinkItemProps = ComponentPropsWithoutRef<typeof BaseMenu.LinkItem>;\n\nexport const MenubarLinkItem = forwardRef<Element, MenubarLinkItemProps>(function MenubarLinkItem(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.LinkItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-link-item\"\n />\n );\n});\n\nexport type MenubarGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.Group>;\n\nexport const MenubarGroup = forwardRef<HTMLDivElement, MenubarGroupProps>(function MenubarGroup(\n { className, ...props },\n ref,\n) {\n return (\n <BaseMenu.Group\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().group, className)}\n data-slot=\"menubar-group\"\n />\n );\n});\n\nexport type MenubarGroupLabelProps = ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>;\n\nexport const MenubarGroupLabel = forwardRef<HTMLDivElement, MenubarGroupLabelProps>(\n function MenubarGroupLabel({ className, ...props }, ref) {\n return (\n <BaseMenu.GroupLabel\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().groupLabel, className)}\n data-slot=\"menubar-group-label\"\n />\n );\n },\n);\n\nexport type MenubarSeparatorProps = ComponentPropsWithoutRef<typeof BaseMenu.Separator>;\n\nexport const MenubarSeparator = forwardRef<HTMLDivElement, MenubarSeparatorProps>(\n function MenubarSeparator({ className, ...props }, ref) {\n return (\n <BaseMenu.Separator\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().separator, className)}\n data-slot=\"menubar-separator\"\n />\n );\n },\n);\n\nexport type MenubarCheckboxItemProps = ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItem>;\n\nexport const MenubarCheckboxItem = forwardRef<HTMLElement, MenubarCheckboxItemProps>(\n function MenubarCheckboxItem({ className, ...props }, ref) {\n return (\n <BaseMenu.CheckboxItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-checkbox-item\"\n />\n );\n },\n);\n\nexport type MenubarCheckboxItemIndicatorProps = ComponentPropsWithoutRef<\n typeof BaseMenu.CheckboxItemIndicator\n>;\n\nexport const MenubarCheckboxItemIndicator = forwardRef<\n HTMLSpanElement,\n MenubarCheckboxItemIndicatorProps\n>(function MenubarCheckboxItemIndicator({ children = \"✓\", className, ...props }, ref) {\n return (\n <BaseMenu.CheckboxItemIndicator\n {...props}\n ref={ref}\n className={className}\n data-slot=\"menubar-checkbox-indicator\"\n aria-hidden=\"true\"\n >\n {children}\n </BaseMenu.CheckboxItemIndicator>\n );\n});\n\nexport type MenubarRadioGroupProps = ComponentPropsWithoutRef<typeof BaseMenu.RadioGroup>;\nexport const MenubarRadioGroup: typeof BaseMenu.RadioGroup = BaseMenu.RadioGroup;\n\nexport type MenubarRadioItemProps = ComponentPropsWithoutRef<typeof BaseMenu.RadioItem>;\n\nexport const MenubarRadioItem = forwardRef<HTMLElement, MenubarRadioItemProps>(\n function MenubarRadioItem({ className, ...props }, ref) {\n return (\n <BaseMenu.RadioItem\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-radio-item\"\n />\n );\n },\n);\n\nexport type MenubarRadioItemIndicatorProps = ComponentPropsWithoutRef<\n typeof BaseMenu.RadioItemIndicator\n>;\n\nexport const MenubarRadioItemIndicator = forwardRef<\n HTMLSpanElement,\n MenubarRadioItemIndicatorProps\n>(function MenubarRadioItemIndicator({ children = \"•\", className, ...props }, ref) {\n return (\n <BaseMenu.RadioItemIndicator\n {...props}\n ref={ref}\n className={className}\n data-slot=\"menubar-radio-indicator\"\n aria-hidden=\"true\"\n >\n {children}\n </BaseMenu.RadioItemIndicator>\n );\n});\n\nexport type MenubarSubmenuRootProps = ComponentPropsWithoutRef<typeof BaseMenu.SubmenuRoot>;\nexport const MenubarSubmenuRoot: typeof BaseMenu.SubmenuRoot = BaseMenu.SubmenuRoot;\n\nexport type MenubarSubmenuTriggerProps = ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>;\n\nexport const MenubarSubmenuTrigger = forwardRef<HTMLElement, MenubarSubmenuTriggerProps>(\n function MenubarSubmenuTrigger({ className, ...props }, ref) {\n return (\n <BaseMenu.SubmenuTrigger\n {...props}\n ref={ref}\n className={withRecipeClassName(menu().item, className)}\n data-slot=\"menubar-submenu-trigger\"\n />\n );\n },\n);\n\nexport const Menubar = {\n Root: MenubarRoot,\n Menu: MenubarMenu,\n Trigger: MenubarTrigger,\n Portal: MenubarPortal,\n Positioner: MenubarPositioner,\n Popup: MenubarPopup,\n Arrow: MenubarArrow,\n Item: MenubarItem,\n LinkItem: MenubarLinkItem,\n Group: MenubarGroup,\n GroupLabel: MenubarGroupLabel,\n Separator: MenubarSeparator,\n CheckboxItem: MenubarCheckboxItem,\n CheckboxItemIndicator: MenubarCheckboxItemIndicator,\n RadioGroup: MenubarRadioGroup,\n RadioItem: MenubarRadioItem,\n RadioItemIndicator: MenubarRadioItemIndicator,\n SubmenuRoot: MenubarSubmenuRoot,\n SubmenuTrigger: MenubarSubmenuTrigger,\n createHandle: BaseMenu.createHandle,\n};\n"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ const require_cx = require("../../styled-system/css/cx.cjs");
|
|
|
3
3
|
const require_base_ui = require("../base-ui.cjs");
|
|
4
4
|
const require_navbar = require("../../styled-system/recipes/navbar.cjs");
|
|
5
5
|
const require_bottom_navigation = require("../../styled-system/recipes/bottom-navigation.cjs");
|
|
6
|
+
const require_theme_scope = require("../../theme/theme-scope.cjs");
|
|
6
7
|
let react = require("react");
|
|
7
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
9
|
let _base_ui_react_dialog = require("@base-ui/react/dialog");
|
|
@@ -67,8 +68,9 @@ const NavbarToggle = (0, react.forwardRef)(function NavbarToggle({ "aria-label":
|
|
|
67
68
|
*/
|
|
68
69
|
const NavbarDrawer = (0, react.forwardRef)(function NavbarDrawer({ "aria-label": ariaLabel, children, className, portalProps, ...props }, ref) {
|
|
69
70
|
const styles = require_navbar.navbar();
|
|
71
|
+
const scopedPortalProps = require_theme_scope.useThemePortalProps(portalProps ?? {});
|
|
70
72
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_dialog.Dialog.Portal, {
|
|
71
|
-
...
|
|
73
|
+
...scopedPortalProps,
|
|
72
74
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
|
|
73
75
|
className: require_base_ui.withRecipeClassName(styles.drawerBackdrop, void 0),
|
|
74
76
|
"data-slot": "navbar-drawer-backdrop"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.cjs","names":["BaseDialog","cx","navbar","withRecipeClassName","bottomNavigation"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n return <BaseDialog.Root {...props} />;\n}\n\nexport const NavbarCreateHandle = BaseDialog.createHandle;\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n { className, ...props },\n ref,\n) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(navbar().bar, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-bar\"\n />\n );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(navbar().center, className)}\n data-slot=\"navbar-center\"\n />\n );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Trigger\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().toggle, className)}\n data-slot=\"navbar-toggle\"\n >\n {children ?? \"☰\"}\n </BaseDialog.Trigger>\n );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n /** Optional controls for the underlying Base UI portal. */\n portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n ref,\n) {\n const styles = navbar();\n\n return (\n <BaseDialog.Portal {...portalProps}>\n <BaseDialog.Backdrop\n className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n data-slot=\"navbar-drawer-backdrop\"\n />\n <BaseDialog.Viewport\n className={withRecipeClassName(styles.drawerViewport, undefined)}\n data-slot=\"navbar-drawer-viewport\"\n >\n <BaseDialog.Popup\n {...props}\n aria-label={ariaLabel ?? \"Navigation menu\"}\n ref={ref}\n className={withRecipeClassName(styles.drawer, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-drawer\"\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Viewport>\n </BaseDialog.Portal>\n );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().close, className)}\n data-slot=\"navbar-close\"\n >\n {children ?? \"×\"}\n </BaseDialog.Close>\n );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(navbar({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"navbar-item\"\n />\n );\n});\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n function BottomNavigationRoot({ className, ...props }, ref) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(bottomNavigation().root, className)}\n data-jaci-component=\"bottom-navigation\"\n data-slot=\"bottom-navigation\"\n />\n );\n },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n function BottomNavigationItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n ) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(bottomNavigation({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"bottom-navigation-item\"\n />\n );\n },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n Item: BottomNavigationItem,\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navigation.cjs","names":["BaseDialog","cx","navbar","withRecipeClassName","useThemePortalProps","bottomNavigation"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n return <BaseDialog.Root {...props} />;\n}\n\nexport const NavbarCreateHandle = BaseDialog.createHandle;\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n { className, ...props },\n ref,\n) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(navbar().bar, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-bar\"\n />\n );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(navbar().center, className)}\n data-slot=\"navbar-center\"\n />\n );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Trigger\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().toggle, className)}\n data-slot=\"navbar-toggle\"\n >\n {children ?? \"☰\"}\n </BaseDialog.Trigger>\n );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n /** Optional controls for the underlying Base UI portal. */\n portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n ref,\n) {\n const styles = navbar();\n const scopedPortalProps = useThemePortalProps(portalProps ?? {});\n\n return (\n <BaseDialog.Portal {...scopedPortalProps}>\n <BaseDialog.Backdrop\n className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n data-slot=\"navbar-drawer-backdrop\"\n />\n <BaseDialog.Viewport\n className={withRecipeClassName(styles.drawerViewport, undefined)}\n data-slot=\"navbar-drawer-viewport\"\n >\n <BaseDialog.Popup\n {...props}\n aria-label={ariaLabel ?? \"Navigation menu\"}\n ref={ref}\n className={withRecipeClassName(styles.drawer, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-drawer\"\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Viewport>\n </BaseDialog.Portal>\n );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().close, className)}\n data-slot=\"navbar-close\"\n >\n {children ?? \"×\"}\n </BaseDialog.Close>\n );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(navbar({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"navbar-item\"\n />\n );\n});\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n function BottomNavigationRoot({ className, ...props }, ref) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(bottomNavigation().root, className)}\n data-jaci-component=\"bottom-navigation\"\n data-slot=\"bottom-navigation\"\n />\n );\n },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n function BottomNavigationItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n ) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(bottomNavigation({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"bottom-navigation-item\"\n />\n );\n },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n Item: BottomNavigationItem,\n});\n"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { cx } from "../../styled-system/css/cx.js";
|
|
|
3
3
|
import { withRecipeClassName } from "../base-ui.js";
|
|
4
4
|
import { navbar } from "../../styled-system/recipes/navbar.js";
|
|
5
5
|
import { bottomNavigation } from "../../styled-system/recipes/bottom-navigation.js";
|
|
6
|
+
import { useThemePortalProps } from "../../theme/theme-scope.js";
|
|
6
7
|
import { forwardRef } from "react";
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
import { Dialog } from "@base-ui/react/dialog";
|
|
@@ -67,8 +68,9 @@ const NavbarToggle = forwardRef(function NavbarToggle({ "aria-label": ariaLabel,
|
|
|
67
68
|
*/
|
|
68
69
|
const NavbarDrawer = forwardRef(function NavbarDrawer({ "aria-label": ariaLabel, children, className, portalProps, ...props }, ref) {
|
|
69
70
|
const styles = navbar();
|
|
71
|
+
const scopedPortalProps = useThemePortalProps(portalProps ?? {});
|
|
70
72
|
return /* @__PURE__ */ jsxs(Dialog.Portal, {
|
|
71
|
-
...
|
|
73
|
+
...scopedPortalProps,
|
|
72
74
|
children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
|
|
73
75
|
className: withRecipeClassName(styles.drawerBackdrop, void 0),
|
|
74
76
|
"data-slot": "navbar-drawer-backdrop"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.js","names":["BaseDialog"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n return <BaseDialog.Root {...props} />;\n}\n\nexport const NavbarCreateHandle = BaseDialog.createHandle;\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n { className, ...props },\n ref,\n) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(navbar().bar, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-bar\"\n />\n );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(navbar().center, className)}\n data-slot=\"navbar-center\"\n />\n );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Trigger\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().toggle, className)}\n data-slot=\"navbar-toggle\"\n >\n {children ?? \"☰\"}\n </BaseDialog.Trigger>\n );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n /** Optional controls for the underlying Base UI portal. */\n portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n ref,\n) {\n const styles = navbar();\n\n return (\n <BaseDialog.Portal {...portalProps}>\n <BaseDialog.Backdrop\n className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n data-slot=\"navbar-drawer-backdrop\"\n />\n <BaseDialog.Viewport\n className={withRecipeClassName(styles.drawerViewport, undefined)}\n data-slot=\"navbar-drawer-viewport\"\n >\n <BaseDialog.Popup\n {...props}\n aria-label={ariaLabel ?? \"Navigation menu\"}\n ref={ref}\n className={withRecipeClassName(styles.drawer, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-drawer\"\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Viewport>\n </BaseDialog.Portal>\n );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().close, className)}\n data-slot=\"navbar-close\"\n >\n {children ?? \"×\"}\n </BaseDialog.Close>\n );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(navbar({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"navbar-item\"\n />\n );\n});\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n function BottomNavigationRoot({ className, ...props }, ref) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(bottomNavigation().root, className)}\n data-jaci-component=\"bottom-navigation\"\n data-slot=\"bottom-navigation\"\n />\n );\n },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n function BottomNavigationItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n ) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(bottomNavigation({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"bottom-navigation-item\"\n />\n );\n },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n Item: BottomNavigationItem,\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navigation.js","names":["BaseDialog"],"sources":["../../../src/components/navigation/navigation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { DialogRoot as BaseDialogRoot } from \"@base-ui/react/dialog\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { bottomNavigation, navbar } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/**\n * Groups a responsive navigation bar and its mobile drawer. The `open`,\n * `defaultOpen`, and `onOpenChange` props are forwarded to Base UI's Dialog\n * root, which supplies focus management, Escape handling, and backdrop\n * dismissal for `Navbar.Drawer`.\n */\nexport type NavbarRootProps<Payload = unknown> = BaseDialogRoot.Props<Payload>;\n\nexport function NavbarRoot<Payload = unknown>(props: NavbarRootProps<Payload>) {\n return <BaseDialog.Root {...props} />;\n}\n\nexport const NavbarCreateHandle = BaseDialog.createHandle;\n\nexport type NavbarBarProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A fixed, translucent zinc navigation surface. */\nexport const NavbarBar = forwardRef<HTMLElement, NavbarBarProps>(function NavbarBar(\n { className, ...props },\n ref,\n) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(navbar().bar, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-bar\"\n />\n );\n});\n\nexport type NavbarStartProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(function NavbarStart(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().start, className)} data-slot=\"navbar-start\" />\n );\n});\n\nexport type NavbarCenterProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarCenter = forwardRef<HTMLDivElement, NavbarCenterProps>(function NavbarCenter(\n { className, ...props },\n ref,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={cx(navbar().center, className)}\n data-slot=\"navbar-center\"\n />\n );\n});\n\nexport type NavbarEndProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(function NavbarEnd(\n { className, ...props },\n ref,\n) {\n return (\n <div {...props} ref={ref} className={cx(navbar().end, className)} data-slot=\"navbar-end\" />\n );\n});\n\nexport type NavbarToggleProps = ComponentPropsWithoutRef<typeof BaseDialog.Trigger>;\n\n/**\n * Opens the responsive drawer. It is hidden at the large breakpoint by\n * default, while still allowing a controlled host to render a drawer anywhere.\n */\nexport const NavbarToggle = forwardRef<HTMLButtonElement, NavbarToggleProps>(function NavbarToggle(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Trigger\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Open navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().toggle, className)}\n data-slot=\"navbar-toggle\"\n >\n {children ?? \"☰\"}\n </BaseDialog.Trigger>\n );\n});\n\nexport type NavbarDrawerPortalProps = Omit<\n ComponentPropsWithoutRef<typeof BaseDialog.Portal>,\n \"children\"\n>;\n\nexport interface NavbarDrawerProps extends ComponentPropsWithoutRef<typeof BaseDialog.Popup> {\n /** Optional controls for the underlying Base UI portal. */\n portalProps?: NavbarDrawerPortalProps;\n}\n\n/**\n * A left-aligned mobile drawer. It intentionally owns the Dialog portal,\n * backdrop, viewport, and popup so consumers cannot accidentally omit the\n * pieces required for focus trapping and Escape/backdrop dismissal.\n */\nexport const NavbarDrawer = forwardRef<HTMLDivElement, NavbarDrawerProps>(function NavbarDrawer(\n { \"aria-label\": ariaLabel, children, className, portalProps, ...props },\n ref,\n) {\n const styles = navbar();\n const scopedPortalProps = useThemePortalProps(portalProps ?? {});\n\n return (\n <BaseDialog.Portal {...scopedPortalProps}>\n <BaseDialog.Backdrop\n className={withRecipeClassName(styles.drawerBackdrop, undefined)}\n data-slot=\"navbar-drawer-backdrop\"\n />\n <BaseDialog.Viewport\n className={withRecipeClassName(styles.drawerViewport, undefined)}\n data-slot=\"navbar-drawer-viewport\"\n >\n <BaseDialog.Popup\n {...props}\n aria-label={ariaLabel ?? \"Navigation menu\"}\n ref={ref}\n className={withRecipeClassName(styles.drawer, className)}\n data-jaci-component=\"navbar\"\n data-slot=\"navbar-drawer\"\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Viewport>\n </BaseDialog.Portal>\n );\n});\n\nexport type NavbarCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\n/** A close affordance for use inside `Navbar.Drawer`. */\nexport const NavbarClose = forwardRef<HTMLButtonElement, NavbarCloseProps>(function NavbarClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BaseDialog.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close navigation menu\")}\n ref={ref}\n className={withRecipeClassName(navbar().close, className)}\n data-slot=\"navbar-close\"\n >\n {children ?? \"×\"}\n </BaseDialog.Close>\n );\n});\n\nexport interface NavbarItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\n/** A semantic navigation link for either the fixed bar or mobile drawer. */\nexport const NavbarItem = forwardRef<HTMLAnchorElement, NavbarItemProps>(function NavbarItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(navbar({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"navbar-item\"\n />\n );\n});\n\nexport type BottomNavigationProps = ComponentPropsWithoutRef<\"nav\">;\n\n/**\n * A compact floating navigation bar for small-screen destinations. It is\n * independent from `Navbar` so it can be used in layouts without a drawer.\n */\nexport const BottomNavigationRoot = forwardRef<HTMLElement, BottomNavigationProps>(\n function BottomNavigationRoot({ className, ...props }, ref) {\n return (\n <nav\n {...props}\n ref={ref}\n className={cx(bottomNavigation().root, className)}\n data-jaci-component=\"bottom-navigation\"\n data-slot=\"bottom-navigation\"\n />\n );\n },\n);\n\nexport interface BottomNavigationItemProps extends ComponentPropsWithoutRef<\"a\"> {\n /** Marks the current navigation destination. */\n active?: boolean;\n}\n\nexport const BottomNavigationItem = forwardRef<HTMLAnchorElement, BottomNavigationItemProps>(\n function BottomNavigationItem(\n { \"aria-current\": ariaCurrent, active = false, className, ...props },\n ref,\n ) {\n return (\n <a\n {...props}\n aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n ref={ref}\n className={cx(bottomNavigation({ active }).item, className)}\n data-active={active || undefined}\n data-slot=\"bottom-navigation-item\"\n />\n );\n },\n);\n\nexport const BottomNavigation = Object.assign(BottomNavigationRoot, {\n Item: BottomNavigationItem,\n});\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
const require_base_ui = require("../base-ui.cjs");
|
|
3
3
|
const require_navigation_menu = require("../../styled-system/recipes/navigation-menu.cjs");
|
|
4
|
+
const require_theme_scope = require("../../theme/theme-scope.cjs");
|
|
4
5
|
let react = require("react");
|
|
5
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
7
|
let _base_ui_react_navigation_menu = require("@base-ui/react/navigation-menu");
|
|
@@ -133,7 +134,9 @@ const NavigationMenuIcon = (0, react.forwardRef)(function NavigationMenuIcon({ c
|
|
|
133
134
|
children
|
|
134
135
|
});
|
|
135
136
|
});
|
|
136
|
-
|
|
137
|
+
function NavigationMenuPortal(props) {
|
|
138
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_navigation_menu.NavigationMenu.Portal, { ...require_theme_scope.useThemePortalProps(props) });
|
|
139
|
+
}
|
|
137
140
|
const NavigationMenuPositioner = (0, react.forwardRef)(function NavigationMenuPositioner({ className, ...props }, ref) {
|
|
138
141
|
const { styles } = useNavigationMenuContext();
|
|
139
142
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_navigation_menu.NavigationMenu.Positioner, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-menu.cjs","names":["navigationMenu","BaseNavigationMenu","withRecipeClassName"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n close: () => void;\n orientation: NavigationMenuOrientation;\n styles: ReturnType<typeof navigationMenu>;\n value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n const context = useContext(NavigationMenuContext);\n if (!context) {\n throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n }\n\n return context;\n}\n\nexport interface NavigationMenuRootProps\n extends Omit<\n BaseNavigationMenuRoot.Props<string>,\n \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n > {\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string | null) => void;\n orientation?: NavigationMenuOrientation;\n children?: ReactNode;\n className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n function NavigationMenuRoot(\n {\n children,\n className,\n defaultValue,\n onValueChange,\n orientation = \"horizontal\",\n value,\n ...props\n },\n ref,\n ) {\n const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n const rootElementRef = useRef<HTMLElement | null>(null);\n // Keep the Base UI primitive controlled by the wrapper state even when the\n // consumer uses the uncontrolled API. This keeps the viewport and the\n // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n // press, Escape or pressing the trigger again).\n const resolvedValue = value === undefined ? uncontrolledValue : value;\n const styles = navigationMenu({ orientation });\n const close = useCallback(() => {\n if (value === undefined) setUncontrolledValue(null);\n else onValueChange?.(null);\n }, [onValueChange, value]);\n\n useEffect(() => {\n if (resolvedValue === null) return;\n const handleOutsidePress = (event: MouseEvent) => {\n const target = event.target;\n if (!(target instanceof Element)) return;\n if (rootElementRef.current?.contains(target)) return;\n if (\n target.closest(\n '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n )\n ) {\n return;\n }\n close();\n };\n document.addEventListener(\"click\", handleOutsidePress);\n return () => document.removeEventListener(\"click\", handleOutsidePress);\n }, [close, resolvedValue]);\n\n const setRootRef = (element: HTMLElement | null) => {\n rootElementRef.current = element;\n if (typeof ref === \"function\") ref(element);\n else if (ref) ref.current = element;\n };\n\n return (\n <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n <BaseNavigationMenu.Root\n {...props}\n onValueChange={(next) => {\n if (value === undefined) setUncontrolledValue(next);\n onValueChange?.(next);\n }}\n orientation={orientation}\n ref={setRootRef}\n value={resolvedValue}\n className={withRecipeClassName(styles.root, className)}\n data-jaci-component=\"navigation-menu\"\n data-orientation={orientation}\n data-slot=\"navigation-menu\"\n >\n {children}\n </BaseNavigationMenu.Root>\n </NavigationMenuContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n function NavigationMenuList({ className, ...props }, ref) {\n const { styles, orientation } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.List\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.list, className)}\n data-orientation={orientation}\n data-slot=\"navigation-menu-list\"\n />\n );\n },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n function NavigationMenuItem({ children, className, value, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n const generatedValue = useId();\n const itemValue = value ?? generatedValue;\n return (\n <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n <BaseNavigationMenu.Item\n {...props}\n ref={ref}\n value={itemValue}\n className={withRecipeClassName(styles.item, className)}\n data-slot=\"navigation-menu-item\"\n >\n {children}\n </BaseNavigationMenu.Item>\n </NavigationMenuItemContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n const { close, styles, value } = useNavigationMenuContext();\n const item = useContext(NavigationMenuItemContext);\n return (\n <BaseNavigationMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.trigger, className)}\n data-slot=\"navigation-menu-trigger\"\n onClick={(event) => {\n // Base UI intentionally keeps a hover-opened menu open for a brief\n // patient-click window. For a component library trigger, a second\n // click should always be an explicit close action.\n if (item?.value !== undefined && value === item.value) {\n event.preventDefault();\n close();\n }\n onClick?.(event);\n }}\n />\n );\n },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n function NavigationMenuContent({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.content, className)}\n data-slot=\"navigation-menu-content\"\n />\n );\n },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n function NavigationMenuLink({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Link\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.link, className)}\n data-slot=\"navigation-menu-link\"\n />\n );\n },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Icon\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.icon, className)}\n data-slot=\"navigation-menu-icon\"\n >\n {children}\n </BaseNavigationMenu.Icon>\n );\n },\n);\n\nexport const NavigationMenuPortal = BaseNavigationMenu.Portal;\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n function NavigationMenuPositioner({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.positioner, className)}\n data-slot=\"navigation-menu-positioner\"\n />\n );\n },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n function NavigationMenuViewport({ className, ...props }, ref) {\n const { styles, value } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.viewport, className)}\n data-open={value !== null ? \"true\" : \"false\"}\n data-slot=\"navigation-menu-viewport\"\n />\n );\n },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n function NavigationMenuPopup({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.popup, className)}\n data-slot=\"navigation-menu-popup\"\n />\n );\n },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n function NavigationMenuBackdrop({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Backdrop\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.backdrop, className)}\n data-slot=\"navigation-menu-backdrop\"\n />\n );\n },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n function NavigationMenuArrow({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.arrow, className)}\n data-slot=\"navigation-menu-arrow\"\n />\n );\n },\n);\n\nexport const NavigationMenu = {\n Root: NavigationMenuRoot,\n List: NavigationMenuList,\n Item: NavigationMenuItem,\n Trigger: NavigationMenuTrigger,\n Content: NavigationMenuContent,\n Link: NavigationMenuLink,\n Icon: NavigationMenuIcon,\n Portal: NavigationMenuPortal,\n Positioner: NavigationMenuPositioner,\n Viewport: NavigationMenuViewport,\n Popup: NavigationMenuPopup,\n Backdrop: NavigationMenuBackdrop,\n Arrow: NavigationMenuArrow,\n};\n"],"mappings":";;;;;;;AA4BA,MAAM,yBAAA,GAAA,MAAA,cAAA,CAAyE,IAAI;AACnF,MAAM,6BAAA,GAAA,MAAA,cAAA,CAAqE,IAAI;AAE/E,SAAS,2BAA2B;CAClC,MAAM,WAAA,GAAA,MAAA,WAAA,CAAqB,qBAAqB;CAChD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,mEAAmE;CAGrF,OAAO;AACT;AAeA,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBACP,EACE,UACA,WACA,cACA,eACA,cAAc,cACd,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,mBAAmB,yBAAA,GAAA,MAAA,SAAA,CAAgD,gBAAgB,IAAI;CAC9F,MAAM,kBAAA,GAAA,MAAA,OAAA,CAA4C,IAAI;CAKtD,MAAM,gBAAgB,UAAU,KAAA,IAAY,oBAAoB;CAChE,MAAM,SAASA,wBAAAA,eAAe,EAAE,YAAY,CAAC;CAC7C,MAAM,SAAA,GAAA,MAAA,YAAA,OAA0B;EAC9B,IAAI,UAAU,KAAA,GAAW,qBAAqB,IAAI;OAC7C,gBAAgB,IAAI;CAC3B,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,kBAAkB,MAAM;EAC5B,MAAM,sBAAsB,UAAsB;GAChD,MAAM,SAAS,MAAM;GACrB,IAAI,EAAE,kBAAkB,UAAU;GAClC,IAAI,eAAe,SAAS,SAAS,MAAM,GAAG;GAC9C,IACE,OAAO,QACL,sKACF,GAEA;GAEF,MAAM;EACR;EACA,SAAS,iBAAiB,SAAS,kBAAkB;EACrD,aAAa,SAAS,oBAAoB,SAAS,kBAAkB;CACvE,GAAG,CAAC,OAAO,aAAa,CAAC;CAEzB,MAAM,cAAc,YAAgC;EAClD,eAAe,UAAU;EACzB,IAAI,OAAO,QAAQ,YAAY,IAAI,OAAO;OACrC,IAAI,KAAK,IAAI,UAAU;CAC9B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAsB,UAAvB;EAAgC,OAAO;GAAE;GAAO;GAAa;GAAQ,OAAO;EAAc;YACxF,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,eAAmB,MAApB;GACE,GAAI;GACJ,gBAAgB,SAAS;IACvB,IAAI,UAAU,KAAA,GAAW,qBAAqB,IAAI;IAClD,gBAAgB,IAAI;GACtB;GACa;GACb,KAAK;GACL,OAAO;GACP,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;GACrD,uBAAoB;GACpB,oBAAkB;GAClB,aAAU;GAET;EACsB,CAAA;CACK,CAAA;AAEpC,CACF;AAGA,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,MAAM,EAAE,QAAQ,gBAAgB,yBAAyB;CACzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,MAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;EACrD,oBAAkB;EAClB,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBAAmB,EAAE,UAAU,WAAW,OAAO,GAAG,SAAS,KAAK;CACzE,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,kBAAA,GAAA,MAAA,MAAA,CAAuB;CAC7B,MAAM,YAAY,SAAS;CAC3B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,0BAA0B,UAA3B;EAAoC,OAAO,EAAE,OAAO,UAAU;YAC5D,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,MAApB;GACE,GAAI;GACC;GACL,OAAO;GACP,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;GACrD,aAAU;GAET;EACsB,CAAA;CACS,CAAA;AAExC,CACF;AAKA,MAAa,yBAAA,GAAA,MAAA,WAAA,CACX,SAAS,sBAAsB,EAAE,WAAW,SAAS,GAAG,SAAS,KAAK;CACpE,MAAM,EAAE,OAAO,QAAQ,UAAU,yBAAyB;CAC1D,MAAM,QAAA,GAAA,MAAA,WAAA,CAAkB,yBAAyB;CACjD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,SAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,SAAS,SAAS;EACxD,aAAU;EACV,UAAU,UAAU;GAIlB,IAAI,MAAM,UAAU,KAAA,KAAa,UAAU,KAAK,OAAO;IACrD,MAAM,eAAe;IACrB,MAAM;GACR;GACA,UAAU,KAAK;EACjB;CACD,CAAA;AAEL,CACF;AAKA,MAAa,yBAAA,GAAA,MAAA,WAAA,CACX,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC3D,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,SAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,SAAS,SAAS;EACxD,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,MAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBAAmB,EAAE,WAAW,KAAK,WAAW,GAAG,SAAS,KAAK;CACxE,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,MAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;EACrD,aAAU;EAET;CACsB,CAAA;AAE7B,CACF;AAEA,MAAa,uBAAuBD,+BAAAA,eAAmB;AAKvD,MAAa,4BAAA,GAAA,MAAA,WAAA,CACX,SAAS,yBAAyB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC9D,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,+BAAAA,eAAmB,YAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,YAAY,SAAS;EAC3D,aAAU;CACX,CAAA;AAEL,CACF;AAKA,MAAa,0BAAA,GAAA,MAAA,WAAA,CACX,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,MAAM,EAAE,QAAQ,UAAU,yBAAyB;CACnD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,UAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,UAAU,SAAS;EACzD,aAAW,UAAU,OAAO,SAAS;EACrC,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,uBAAA,GAAA,MAAA,WAAA,CACX,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,OAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CACF;AAKA,MAAa,0BAAA,GAAA,MAAA,WAAA,CACX,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;CAC5D,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,UAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,UAAU,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CACF;AAGA,MAAa,uBAAA,GAAA,MAAA,WAAA,CACX,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;CACzD,MAAM,EAAE,WAAW,yBAAyB;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,+BAAAA,eAAmB,OAApB;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CACF;AAEA,MAAa,iBAAiB;CAC5B,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,UAAU;CACV,OAAO;CACP,UAAU;CACV,OAAO;AACT"}
|
|
1
|
+
{"version":3,"file":"navigation-menu.cjs","names":["navigationMenu","BaseNavigationMenu","withRecipeClassName","useThemePortalProps"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n close: () => void;\n orientation: NavigationMenuOrientation;\n styles: ReturnType<typeof navigationMenu>;\n value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n const context = useContext(NavigationMenuContext);\n if (!context) {\n throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n }\n\n return context;\n}\n\nexport interface NavigationMenuRootProps\n extends Omit<\n BaseNavigationMenuRoot.Props<string>,\n \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n > {\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string | null) => void;\n orientation?: NavigationMenuOrientation;\n children?: ReactNode;\n className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n function NavigationMenuRoot(\n {\n children,\n className,\n defaultValue,\n onValueChange,\n orientation = \"horizontal\",\n value,\n ...props\n },\n ref,\n ) {\n const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n const rootElementRef = useRef<HTMLElement | null>(null);\n // Keep the Base UI primitive controlled by the wrapper state even when the\n // consumer uses the uncontrolled API. This keeps the viewport and the\n // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n // press, Escape or pressing the trigger again).\n const resolvedValue = value === undefined ? uncontrolledValue : value;\n const styles = navigationMenu({ orientation });\n const close = useCallback(() => {\n if (value === undefined) setUncontrolledValue(null);\n else onValueChange?.(null);\n }, [onValueChange, value]);\n\n useEffect(() => {\n if (resolvedValue === null) return;\n const handleOutsidePress = (event: MouseEvent) => {\n const target = event.target;\n if (!(target instanceof Element)) return;\n if (rootElementRef.current?.contains(target)) return;\n if (\n target.closest(\n '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n )\n ) {\n return;\n }\n close();\n };\n document.addEventListener(\"click\", handleOutsidePress);\n return () => document.removeEventListener(\"click\", handleOutsidePress);\n }, [close, resolvedValue]);\n\n const setRootRef = (element: HTMLElement | null) => {\n rootElementRef.current = element;\n if (typeof ref === \"function\") ref(element);\n else if (ref) ref.current = element;\n };\n\n return (\n <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n <BaseNavigationMenu.Root\n {...props}\n onValueChange={(next) => {\n if (value === undefined) setUncontrolledValue(next);\n onValueChange?.(next);\n }}\n orientation={orientation}\n ref={setRootRef}\n value={resolvedValue}\n className={withRecipeClassName(styles.root, className)}\n data-jaci-component=\"navigation-menu\"\n data-orientation={orientation}\n data-slot=\"navigation-menu\"\n >\n {children}\n </BaseNavigationMenu.Root>\n </NavigationMenuContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n function NavigationMenuList({ className, ...props }, ref) {\n const { styles, orientation } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.List\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.list, className)}\n data-orientation={orientation}\n data-slot=\"navigation-menu-list\"\n />\n );\n },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n function NavigationMenuItem({ children, className, value, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n const generatedValue = useId();\n const itemValue = value ?? generatedValue;\n return (\n <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n <BaseNavigationMenu.Item\n {...props}\n ref={ref}\n value={itemValue}\n className={withRecipeClassName(styles.item, className)}\n data-slot=\"navigation-menu-item\"\n >\n {children}\n </BaseNavigationMenu.Item>\n </NavigationMenuItemContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n const { close, styles, value } = useNavigationMenuContext();\n const item = useContext(NavigationMenuItemContext);\n return (\n <BaseNavigationMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.trigger, className)}\n data-slot=\"navigation-menu-trigger\"\n onClick={(event) => {\n // Base UI intentionally keeps a hover-opened menu open for a brief\n // patient-click window. For a component library trigger, a second\n // click should always be an explicit close action.\n if (item?.value !== undefined && value === item.value) {\n event.preventDefault();\n close();\n }\n onClick?.(event);\n }}\n />\n );\n },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n function NavigationMenuContent({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.content, className)}\n data-slot=\"navigation-menu-content\"\n />\n );\n },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n function NavigationMenuLink({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Link\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.link, className)}\n data-slot=\"navigation-menu-link\"\n />\n );\n },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Icon\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.icon, className)}\n data-slot=\"navigation-menu-icon\"\n >\n {children}\n </BaseNavigationMenu.Icon>\n );\n },\n);\n\nexport function NavigationMenuPortal(\n props: ComponentPropsWithoutRef<typeof BaseNavigationMenu.Portal>,\n) {\n return <BaseNavigationMenu.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n function NavigationMenuPositioner({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.positioner, className)}\n data-slot=\"navigation-menu-positioner\"\n />\n );\n },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n function NavigationMenuViewport({ className, ...props }, ref) {\n const { styles, value } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.viewport, className)}\n data-open={value !== null ? \"true\" : \"false\"}\n data-slot=\"navigation-menu-viewport\"\n />\n );\n },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n function NavigationMenuPopup({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.popup, className)}\n data-slot=\"navigation-menu-popup\"\n />\n );\n },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n function NavigationMenuBackdrop({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Backdrop\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.backdrop, className)}\n data-slot=\"navigation-menu-backdrop\"\n />\n );\n },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n function NavigationMenuArrow({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.arrow, className)}\n data-slot=\"navigation-menu-arrow\"\n />\n );\n },\n);\n\nexport const NavigationMenu = {\n Root: NavigationMenuRoot,\n List: NavigationMenuList,\n Item: NavigationMenuItem,\n Trigger: NavigationMenuTrigger,\n Content: NavigationMenuContent,\n Link: NavigationMenuLink,\n Icon: NavigationMenuIcon,\n Portal: NavigationMenuPortal,\n Positioner: NavigationMenuPositioner,\n Viewport: NavigationMenuViewport,\n Popup: NavigationMenuPopup,\n Backdrop: NavigationMenuBackdrop,\n Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof NavigationMenu.Li
|
|
|
23
23
|
declare const NavigationMenuLink: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
24
24
|
type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof NavigationMenu.Icon>;
|
|
25
25
|
declare const NavigationMenuIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
26
|
-
declare
|
|
26
|
+
declare function NavigationMenuPortal(props: ComponentPropsWithoutRef<typeof NavigationMenu.Portal>): import("react").JSX.Element;
|
|
27
27
|
type NavigationMenuPositionerProps = ComponentPropsWithoutRef<typeof NavigationMenu.Positioner>;
|
|
28
28
|
declare const NavigationMenuPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
29
29
|
type NavigationMenuViewportProps = ComponentPropsWithoutRef<typeof NavigationMenu.Viewport>;
|
|
@@ -42,7 +42,7 @@ declare const NavigationMenu$1: {
|
|
|
42
42
|
Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
43
43
|
Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
44
44
|
Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
45
|
-
Portal:
|
|
45
|
+
Portal: typeof NavigationMenuPortal;
|
|
46
46
|
Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
47
47
|
Viewport: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
48
48
|
Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuPopupProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -23,7 +23,7 @@ type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof NavigationMenu.Li
|
|
|
23
23
|
declare const NavigationMenuLink: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
24
24
|
type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof NavigationMenu.Icon>;
|
|
25
25
|
declare const NavigationMenuIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
26
|
-
declare
|
|
26
|
+
declare function NavigationMenuPortal(props: ComponentPropsWithoutRef<typeof NavigationMenu.Portal>): import("react").JSX.Element;
|
|
27
27
|
type NavigationMenuPositionerProps = ComponentPropsWithoutRef<typeof NavigationMenu.Positioner>;
|
|
28
28
|
declare const NavigationMenuPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
29
29
|
type NavigationMenuViewportProps = ComponentPropsWithoutRef<typeof NavigationMenu.Viewport>;
|
|
@@ -42,7 +42,7 @@ declare const NavigationMenu$1: {
|
|
|
42
42
|
Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
43
43
|
Link: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
44
44
|
Icon: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
45
|
-
Portal:
|
|
45
|
+
Portal: typeof NavigationMenuPortal;
|
|
46
46
|
Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
47
47
|
Viewport: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
48
48
|
Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").NavigationMenuPopupProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { withRecipeClassName } from "../base-ui.js";
|
|
3
3
|
import { navigationMenu } from "../../styled-system/recipes/navigation-menu.js";
|
|
4
|
+
import { useThemePortalProps } from "../../theme/theme-scope.js";
|
|
4
5
|
import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
import { NavigationMenu } from "@base-ui/react/navigation-menu";
|
|
@@ -133,7 +134,9 @@ const NavigationMenuIcon = forwardRef(function NavigationMenuIcon({ children = "
|
|
|
133
134
|
children
|
|
134
135
|
});
|
|
135
136
|
});
|
|
136
|
-
|
|
137
|
+
function NavigationMenuPortal(props) {
|
|
138
|
+
return /* @__PURE__ */ jsx(NavigationMenu.Portal, { ...useThemePortalProps(props) });
|
|
139
|
+
}
|
|
137
140
|
const NavigationMenuPositioner = forwardRef(function NavigationMenuPositioner({ className, ...props }, ref) {
|
|
138
141
|
const { styles } = useNavigationMenuContext();
|
|
139
142
|
return /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-menu.js","names":["NavigationMenuRoot","BaseNavigationMenu","NavigationMenu"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n close: () => void;\n orientation: NavigationMenuOrientation;\n styles: ReturnType<typeof navigationMenu>;\n value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n const context = useContext(NavigationMenuContext);\n if (!context) {\n throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n }\n\n return context;\n}\n\nexport interface NavigationMenuRootProps\n extends Omit<\n BaseNavigationMenuRoot.Props<string>,\n \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n > {\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string | null) => void;\n orientation?: NavigationMenuOrientation;\n children?: ReactNode;\n className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n function NavigationMenuRoot(\n {\n children,\n className,\n defaultValue,\n onValueChange,\n orientation = \"horizontal\",\n value,\n ...props\n },\n ref,\n ) {\n const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n const rootElementRef = useRef<HTMLElement | null>(null);\n // Keep the Base UI primitive controlled by the wrapper state even when the\n // consumer uses the uncontrolled API. This keeps the viewport and the\n // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n // press, Escape or pressing the trigger again).\n const resolvedValue = value === undefined ? uncontrolledValue : value;\n const styles = navigationMenu({ orientation });\n const close = useCallback(() => {\n if (value === undefined) setUncontrolledValue(null);\n else onValueChange?.(null);\n }, [onValueChange, value]);\n\n useEffect(() => {\n if (resolvedValue === null) return;\n const handleOutsidePress = (event: MouseEvent) => {\n const target = event.target;\n if (!(target instanceof Element)) return;\n if (rootElementRef.current?.contains(target)) return;\n if (\n target.closest(\n '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n )\n ) {\n return;\n }\n close();\n };\n document.addEventListener(\"click\", handleOutsidePress);\n return () => document.removeEventListener(\"click\", handleOutsidePress);\n }, [close, resolvedValue]);\n\n const setRootRef = (element: HTMLElement | null) => {\n rootElementRef.current = element;\n if (typeof ref === \"function\") ref(element);\n else if (ref) ref.current = element;\n };\n\n return (\n <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n <BaseNavigationMenu.Root\n {...props}\n onValueChange={(next) => {\n if (value === undefined) setUncontrolledValue(next);\n onValueChange?.(next);\n }}\n orientation={orientation}\n ref={setRootRef}\n value={resolvedValue}\n className={withRecipeClassName(styles.root, className)}\n data-jaci-component=\"navigation-menu\"\n data-orientation={orientation}\n data-slot=\"navigation-menu\"\n >\n {children}\n </BaseNavigationMenu.Root>\n </NavigationMenuContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n function NavigationMenuList({ className, ...props }, ref) {\n const { styles, orientation } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.List\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.list, className)}\n data-orientation={orientation}\n data-slot=\"navigation-menu-list\"\n />\n );\n },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n function NavigationMenuItem({ children, className, value, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n const generatedValue = useId();\n const itemValue = value ?? generatedValue;\n return (\n <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n <BaseNavigationMenu.Item\n {...props}\n ref={ref}\n value={itemValue}\n className={withRecipeClassName(styles.item, className)}\n data-slot=\"navigation-menu-item\"\n >\n {children}\n </BaseNavigationMenu.Item>\n </NavigationMenuItemContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n const { close, styles, value } = useNavigationMenuContext();\n const item = useContext(NavigationMenuItemContext);\n return (\n <BaseNavigationMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.trigger, className)}\n data-slot=\"navigation-menu-trigger\"\n onClick={(event) => {\n // Base UI intentionally keeps a hover-opened menu open for a brief\n // patient-click window. For a component library trigger, a second\n // click should always be an explicit close action.\n if (item?.value !== undefined && value === item.value) {\n event.preventDefault();\n close();\n }\n onClick?.(event);\n }}\n />\n );\n },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n function NavigationMenuContent({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.content, className)}\n data-slot=\"navigation-menu-content\"\n />\n );\n },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n function NavigationMenuLink({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Link\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.link, className)}\n data-slot=\"navigation-menu-link\"\n />\n );\n },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Icon\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.icon, className)}\n data-slot=\"navigation-menu-icon\"\n >\n {children}\n </BaseNavigationMenu.Icon>\n );\n },\n);\n\nexport const NavigationMenuPortal = BaseNavigationMenu.Portal;\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n function NavigationMenuPositioner({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.positioner, className)}\n data-slot=\"navigation-menu-positioner\"\n />\n );\n },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n function NavigationMenuViewport({ className, ...props }, ref) {\n const { styles, value } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.viewport, className)}\n data-open={value !== null ? \"true\" : \"false\"}\n data-slot=\"navigation-menu-viewport\"\n />\n );\n },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n function NavigationMenuPopup({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.popup, className)}\n data-slot=\"navigation-menu-popup\"\n />\n );\n },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n function NavigationMenuBackdrop({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Backdrop\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.backdrop, className)}\n data-slot=\"navigation-menu-backdrop\"\n />\n );\n },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n function NavigationMenuArrow({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.arrow, className)}\n data-slot=\"navigation-menu-arrow\"\n />\n );\n },\n);\n\nexport const NavigationMenu = {\n Root: NavigationMenuRoot,\n List: NavigationMenuList,\n Item: NavigationMenuItem,\n Trigger: NavigationMenuTrigger,\n Content: NavigationMenuContent,\n Link: NavigationMenuLink,\n Icon: NavigationMenuIcon,\n Portal: NavigationMenuPortal,\n Positioner: NavigationMenuPositioner,\n Viewport: NavigationMenuViewport,\n Popup: NavigationMenuPopup,\n Backdrop: NavigationMenuBackdrop,\n Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navigation-menu.js","names":["NavigationMenuRoot","BaseNavigationMenu","NavigationMenu"],"sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { NavigationMenuRoot as BaseNavigationMenuRoot } from \"@base-ui/react/navigation-menu\";\n\nimport { navigationMenu } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\nexport type NavigationMenuOrientation = \"horizontal\" | \"vertical\";\n\ninterface NavigationMenuContextValue {\n close: () => void;\n orientation: NavigationMenuOrientation;\n styles: ReturnType<typeof navigationMenu>;\n value: string | null;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue | null>(null);\nconst NavigationMenuItemContext = createContext<{ value?: string } | null>(null);\n\nfunction useNavigationMenuContext() {\n const context = useContext(NavigationMenuContext);\n if (!context) {\n throw new Error(\"NavigationMenu parts must be rendered inside NavigationMenu.Root.\");\n }\n\n return context;\n}\n\nexport interface NavigationMenuRootProps\n extends Omit<\n BaseNavigationMenuRoot.Props<string>,\n \"children\" | \"className\" | \"onValueChange\" | \"value\" | \"defaultValue\"\n > {\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string | null) => void;\n orientation?: NavigationMenuOrientation;\n children?: ReactNode;\n className?: string;\n}\n\nexport const NavigationMenuRoot = forwardRef<HTMLElement, NavigationMenuRootProps>(\n function NavigationMenuRoot(\n {\n children,\n className,\n defaultValue,\n onValueChange,\n orientation = \"horizontal\",\n value,\n ...props\n },\n ref,\n ) {\n const [uncontrolledValue, setUncontrolledValue] = useState<string | null>(defaultValue ?? null);\n const rootElementRef = useRef<HTMLElement | null>(null);\n // Keep the Base UI primitive controlled by the wrapper state even when the\n // consumer uses the uncontrolled API. This keeps the viewport and the\n // primitive in sync when Base UI dismisses a menu (pointer leave, outside\n // press, Escape or pressing the trigger again).\n const resolvedValue = value === undefined ? uncontrolledValue : value;\n const styles = navigationMenu({ orientation });\n const close = useCallback(() => {\n if (value === undefined) setUncontrolledValue(null);\n else onValueChange?.(null);\n }, [onValueChange, value]);\n\n useEffect(() => {\n if (resolvedValue === null) return;\n const handleOutsidePress = (event: MouseEvent) => {\n const target = event.target;\n if (!(target instanceof Element)) return;\n if (rootElementRef.current?.contains(target)) return;\n if (\n target.closest(\n '[data-slot=\"navigation-menu-content\"], [data-slot=\"navigation-menu-positioner\"], [data-slot=\"navigation-menu-popup\"], [data-slot=\"navigation-menu-viewport\"]',\n )\n ) {\n return;\n }\n close();\n };\n document.addEventListener(\"click\", handleOutsidePress);\n return () => document.removeEventListener(\"click\", handleOutsidePress);\n }, [close, resolvedValue]);\n\n const setRootRef = (element: HTMLElement | null) => {\n rootElementRef.current = element;\n if (typeof ref === \"function\") ref(element);\n else if (ref) ref.current = element;\n };\n\n return (\n <NavigationMenuContext.Provider value={{ close, orientation, styles, value: resolvedValue }}>\n <BaseNavigationMenu.Root\n {...props}\n onValueChange={(next) => {\n if (value === undefined) setUncontrolledValue(next);\n onValueChange?.(next);\n }}\n orientation={orientation}\n ref={setRootRef}\n value={resolvedValue}\n className={withRecipeClassName(styles.root, className)}\n data-jaci-component=\"navigation-menu\"\n data-orientation={orientation}\n data-slot=\"navigation-menu\"\n >\n {children}\n </BaseNavigationMenu.Root>\n </NavigationMenuContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuListProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.List>;\nexport const NavigationMenuList = forwardRef<HTMLUListElement, NavigationMenuListProps>(\n function NavigationMenuList({ className, ...props }, ref) {\n const { styles, orientation } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.List\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.list, className)}\n data-orientation={orientation}\n data-slot=\"navigation-menu-list\"\n />\n );\n },\n);\n\nexport type NavigationMenuItemProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Item>;\nexport const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n function NavigationMenuItem({ children, className, value, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n const generatedValue = useId();\n const itemValue = value ?? generatedValue;\n return (\n <NavigationMenuItemContext.Provider value={{ value: itemValue }}>\n <BaseNavigationMenu.Item\n {...props}\n ref={ref}\n value={itemValue}\n className={withRecipeClassName(styles.item, className)}\n data-slot=\"navigation-menu-item\"\n >\n {children}\n </BaseNavigationMenu.Item>\n </NavigationMenuItemContext.Provider>\n );\n },\n);\n\nexport type NavigationMenuTriggerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Trigger\n>;\nexport const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n function NavigationMenuTrigger({ className, onClick, ...props }, ref) {\n const { close, styles, value } = useNavigationMenuContext();\n const item = useContext(NavigationMenuItemContext);\n return (\n <BaseNavigationMenu.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.trigger, className)}\n data-slot=\"navigation-menu-trigger\"\n onClick={(event) => {\n // Base UI intentionally keeps a hover-opened menu open for a brief\n // patient-click window. For a component library trigger, a second\n // click should always be an explicit close action.\n if (item?.value !== undefined && value === item.value) {\n event.preventDefault();\n close();\n }\n onClick?.(event);\n }}\n />\n );\n },\n);\n\nexport type NavigationMenuContentProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Content\n>;\nexport const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n function NavigationMenuContent({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Content\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.content, className)}\n data-slot=\"navigation-menu-content\"\n />\n );\n },\n);\n\nexport type NavigationMenuLinkProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Link>;\nexport const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n function NavigationMenuLink({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Link\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.link, className)}\n data-slot=\"navigation-menu-link\"\n />\n );\n },\n);\n\nexport type NavigationMenuIconProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Icon>;\nexport const NavigationMenuIcon = forwardRef<HTMLSpanElement, NavigationMenuIconProps>(\n function NavigationMenuIcon({ children = \"⌄\", className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Icon\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.icon, className)}\n data-slot=\"navigation-menu-icon\"\n >\n {children}\n </BaseNavigationMenu.Icon>\n );\n },\n);\n\nexport function NavigationMenuPortal(\n props: ComponentPropsWithoutRef<typeof BaseNavigationMenu.Portal>,\n) {\n return <BaseNavigationMenu.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type NavigationMenuPositionerProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Positioner\n>;\nexport const NavigationMenuPositioner = forwardRef<HTMLDivElement, NavigationMenuPositionerProps>(\n function NavigationMenuPositioner({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.positioner, className)}\n data-slot=\"navigation-menu-positioner\"\n />\n );\n },\n);\n\nexport type NavigationMenuViewportProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Viewport\n>;\nexport const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n function NavigationMenuViewport({ className, ...props }, ref) {\n const { styles, value } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Viewport\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.viewport, className)}\n data-open={value !== null ? \"true\" : \"false\"}\n data-slot=\"navigation-menu-viewport\"\n />\n );\n },\n);\n\nexport type NavigationMenuPopupProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Popup>;\nexport const NavigationMenuPopup = forwardRef<HTMLElement, NavigationMenuPopupProps>(\n function NavigationMenuPopup({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.popup, className)}\n data-slot=\"navigation-menu-popup\"\n />\n );\n },\n);\n\nexport type NavigationMenuBackdropProps = ComponentPropsWithoutRef<\n typeof BaseNavigationMenu.Backdrop\n>;\nexport const NavigationMenuBackdrop = forwardRef<HTMLDivElement, NavigationMenuBackdropProps>(\n function NavigationMenuBackdrop({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Backdrop\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.backdrop, className)}\n data-slot=\"navigation-menu-backdrop\"\n />\n );\n },\n);\n\nexport type NavigationMenuArrowProps = ComponentPropsWithoutRef<typeof BaseNavigationMenu.Arrow>;\nexport const NavigationMenuArrow = forwardRef<HTMLDivElement, NavigationMenuArrowProps>(\n function NavigationMenuArrow({ className, ...props }, ref) {\n const { styles } = useNavigationMenuContext();\n return (\n <BaseNavigationMenu.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(styles.arrow, className)}\n data-slot=\"navigation-menu-arrow\"\n />\n );\n },\n);\n\nexport const NavigationMenu = {\n Root: NavigationMenuRoot,\n List: NavigationMenuList,\n Item: NavigationMenuItem,\n Trigger: NavigationMenuTrigger,\n Content: NavigationMenuContent,\n Link: NavigationMenuLink,\n Icon: NavigationMenuIcon,\n Portal: NavigationMenuPortal,\n Positioner: NavigationMenuPositioner,\n Viewport: NavigationMenuViewport,\n Popup: NavigationMenuPopup,\n Backdrop: NavigationMenuBackdrop,\n Arrow: NavigationMenuArrow,\n};\n"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
const require_base_ui = require("../base-ui.cjs");
|
|
3
3
|
const require_popover = require("../../styled-system/recipes/popover.cjs");
|
|
4
|
+
const require_theme_scope = require("../../theme/theme-scope.cjs");
|
|
4
5
|
let react = require("react");
|
|
5
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
7
|
let _base_ui_react_popover = require("@base-ui/react/popover");
|
|
@@ -18,7 +19,9 @@ const PopoverTrigger = (0, react.forwardRef)(function PopoverTrigger({ className
|
|
|
18
19
|
});
|
|
19
20
|
});
|
|
20
21
|
/** Preserves Base UI's optional portal container and mount controls. */
|
|
21
|
-
|
|
22
|
+
function PopoverPortal(props) {
|
|
23
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Portal, { ...require_theme_scope.useThemePortalProps(props) });
|
|
24
|
+
}
|
|
22
25
|
const PopoverPositioner = (0, react.forwardRef)(function PopoverPositioner({ className, ...props }, ref) {
|
|
23
26
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_popover.Popover.Positioner, {
|
|
24
27
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.cjs","names":["BasePopover","withRecipeClassName","popover"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { popover } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\n\n/** Preserves Base UI's controlled `open` API and uncontrolled `defaultOpen` API. */\nexport type PopoverRootProps<Payload = unknown> = BasePopoverRoot.Props<Payload>;\n\nexport function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>) {\n return <BasePopover.Root {...props} />;\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\n\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n function PopoverTrigger({ className, ...props }, ref) {\n return (\n <BasePopover.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().trigger, className)}\n data-jaci-component=\"popover\"\n data-slot=\"popover-trigger\"\n />\n );\n },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport
|
|
1
|
+
{"version":3,"file":"popover.cjs","names":["BasePopover","withRecipeClassName","popover","useThemePortalProps"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { PopoverRoot as BasePopoverRoot } from \"@base-ui/react/popover\";\n\nimport { popover } from \"../../styled-system/recipes\";\nimport { withRecipeClassName } from \"../base-ui\";\nimport { useThemePortalProps } from \"../../theme/theme-scope\";\n\n/** Preserves Base UI's controlled `open` API and uncontrolled `defaultOpen` API. */\nexport type PopoverRootProps<Payload = unknown> = BasePopoverRoot.Props<Payload>;\n\nexport function PopoverRoot<Payload = unknown>(props: PopoverRootProps<Payload>) {\n return <BasePopover.Root {...props} />;\n}\n\nexport type PopoverTriggerProps = ComponentPropsWithoutRef<typeof BasePopover.Trigger>;\n\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n function PopoverTrigger({ className, ...props }, ref) {\n return (\n <BasePopover.Trigger\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().trigger, className)}\n data-jaci-component=\"popover\"\n data-slot=\"popover-trigger\"\n />\n );\n },\n);\n\n/** Preserves Base UI's optional portal container and mount controls. */\nexport function PopoverPortal(props: ComponentPropsWithoutRef<typeof BasePopover.Portal>) {\n return <BasePopover.Portal {...useThemePortalProps(props)} />;\n}\n\nexport type PopoverPositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\n\nexport const PopoverPositioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(\n function PopoverPositioner({ className, ...props }, ref) {\n return (\n <BasePopover.Positioner\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().positioner, className)}\n data-slot=\"popover-positioner\"\n />\n );\n },\n);\n\nexport type PopoverPopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { className, ...props },\n ref,\n) {\n return (\n <BasePopover.Popup\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().popup, className)}\n data-jaci-component=\"popover\"\n data-slot=\"popover-popup\"\n />\n );\n});\n\nexport type PopoverTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;\n\nexport const PopoverTitle = forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(\n { className, ...props },\n ref,\n) {\n return (\n <BasePopover.Title\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().title, className)}\n data-slot=\"popover-title\"\n />\n );\n});\n\nexport type PopoverDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;\n\nexport const PopoverDescription = forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(\n function PopoverDescription({ className, ...props }, ref) {\n return (\n <BasePopover.Description\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().description, className)}\n data-slot=\"popover-description\"\n />\n );\n },\n);\n\nexport type PopoverCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;\n\nexport const PopoverClose = forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose(\n { \"aria-label\": ariaLabel, children, className, ...props },\n ref,\n) {\n const hasVisibleLabel = children != null;\n\n return (\n <BasePopover.Close\n {...props}\n aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : \"Close popover\")}\n ref={ref}\n className={withRecipeClassName(popover().close, className)}\n data-slot=\"popover-close\"\n >\n {children ?? \"×\"}\n </BasePopover.Close>\n );\n});\n\nexport type PopoverArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = forwardRef<HTMLDivElement, PopoverArrowProps>(function PopoverArrow(\n { className, ...props },\n ref,\n) {\n return (\n <BasePopover.Arrow\n {...props}\n ref={ref}\n className={withRecipeClassName(popover().arrow, className)}\n data-slot=\"popover-arrow\"\n />\n );\n});\n\nexport const Popover = {\n Root: PopoverRoot,\n Trigger: PopoverTrigger,\n Portal: PopoverPortal,\n Positioner: PopoverPositioner,\n Popup: PopoverPopup,\n Title: PopoverTitle,\n Description: PopoverDescription,\n Close: PopoverClose,\n Arrow: PopoverArrow,\n createHandle: BasePopover.createHandle,\n};\n"],"mappings":";;;;;;;;AAcA,SAAgB,YAA+B,OAAkC;CAC/E,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,MAAb,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAIA,MAAa,kBAAA,GAAA,MAAA,WAAA,CACX,SAAS,eAAe,EAAE,WAAW,GAAG,SAAS,KAAK;CACpD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,uBAAAA,QAAY,SAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,SAAS,SAAS;EAC3D,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CACF;;AAGA,SAAgB,cAAc,OAA4D;CACxF,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,QAAb,EAAoB,GAAIG,oBAAAA,oBAAoB,KAAK,EAAI,CAAA;AAC9D;AAIA,MAAa,qBAAA,GAAA,MAAA,WAAA,CACX,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACH,uBAAAA,QAAY,YAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,YAAY,SAAS;EAC9D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,gBAAA,GAAA,MAAA,WAAA,CAAiE,SAAS,aACrF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,sBAAA,GAAA,MAAA,WAAA,CACX,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;CACxD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,aAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,aAAa,SAAS;EAC/D,aAAU;CACX,CAAA;AAEL,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,WAAA,CAAgE,SAAS,aACpF,EAAE,cAAc,WAAW,UAAU,WAAW,GAAG,SACnD,KACA;CACA,MAAM,kBAAkB,YAAY;CAEpC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACJ,cAAY,cAAc,kBAAkB,KAAA,IAAY;EACnD;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;YAET,YAAY;CACI,CAAA;AAEvB,CAAC;AAID,MAAa,gBAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,aACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACF,uBAAAA,QAAY,OAAb;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoBC,gBAAAA,QAAQ,CAAC,CAAC,OAAO,SAAS;EACzD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,UAAU;CACrB,MAAM;CACN,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,OAAO;CACP,OAAO;CACP,aAAa;CACb,OAAO;CACP,OAAO;CACP,cAAcF,uBAAAA,QAAY;AAC5B"}
|
|
@@ -19,7 +19,7 @@ declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<imp
|
|
|
19
19
|
closeDelay?: number | undefined;
|
|
20
20
|
} & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
21
21
|
/** Preserves Base UI's optional portal container and mount controls. */
|
|
22
|
-
declare
|
|
22
|
+
declare function PopoverPortal(props: ComponentPropsWithoutRef<typeof Popover.Portal>): import("react").JSX.Element;
|
|
23
23
|
type PopoverPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
|
|
24
24
|
declare const PopoverPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
25
|
type PopoverPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
|
|
@@ -47,7 +47,7 @@ declare const Popover$1: {
|
|
|
47
47
|
delay?: number | undefined;
|
|
48
48
|
closeDelay?: number | undefined;
|
|
49
49
|
} & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
50
|
-
Portal:
|
|
50
|
+
Portal: typeof PopoverPortal;
|
|
51
51
|
Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
52
52
|
Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
53
53
|
Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
@@ -19,7 +19,7 @@ declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<imp
|
|
|
19
19
|
closeDelay?: number | undefined;
|
|
20
20
|
} & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
21
21
|
/** Preserves Base UI's optional portal container and mount controls. */
|
|
22
|
-
declare
|
|
22
|
+
declare function PopoverPortal(props: ComponentPropsWithoutRef<typeof Popover.Portal>): import("react").JSX.Element;
|
|
23
23
|
type PopoverPositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
|
|
24
24
|
declare const PopoverPositioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
25
|
type PopoverPopupProps = ComponentPropsWithoutRef<typeof Popover.Popup>;
|
|
@@ -47,7 +47,7 @@ declare const Popover$1: {
|
|
|
47
47
|
delay?: number | undefined;
|
|
48
48
|
closeDelay?: number | undefined;
|
|
49
49
|
} & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
50
|
-
Portal:
|
|
50
|
+
Portal: typeof PopoverPortal;
|
|
51
51
|
Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
52
52
|
Popup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
53
53
|
Title: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
|