moduix 0.11.0 → 0.11.1

package/dist/components/NavigationMenu/NavigationMenu.css

@@ -0,0 +1,319 @@
+@layer ui.components {
+  .BPQarq_root {
+    box-sizing: border-box;
+    min-width: var(--navigation-menu-min-width, max-content);
+    padding: var(--navigation-menu-padding, var(--spacing-1));
+    border-radius: var(--navigation-menu-radius, var(--radius-lg));
+    background-color: var(--navigation-menu-bg, transparent);
+    color: var(--navigation-menu-color, var(--color-foreground));
+  }
+
+  .BPQarq_list {
+    justify-content: var(--navigation-menu-list-justify, flex-start);
+    gap: var(--navigation-menu-list-gap, 0);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    position: relative;
+
+    .BPQarq_root[data-orientation="vertical"] & {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+
+  .BPQarq_trigger, .BPQarq_link {
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    gap: var(--navigation-menu-trigger-gap, .375rem);
+    min-height: var(--navigation-menu-trigger-height, var(--size-md));
+    padding: var(--navigation-menu-trigger-padding-y, 0)
+      var(--navigation-menu-trigger-padding-x, .75rem);
+    border: var(--navigation-menu-trigger-border-width, 0)
+      var(--navigation-menu-trigger-border-style, solid)
+      var(--navigation-menu-trigger-border-color, transparent);
+    border-radius: var(--navigation-menu-trigger-radius, var(--radius-md));
+    background-color: var(--navigation-menu-trigger-bg, transparent);
+    color: var(--navigation-menu-trigger-color, var(--color-foreground));
+    font: inherit;
+    font-size: var(--navigation-menu-trigger-font-size, var(--text-sm));
+    line-height: var(--navigation-menu-trigger-line-height, var(--line-height-text-sm));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--navigation-menu-transition, var(--transition-default)),
+      color var(--navigation-menu-transition, var(--transition-default));
+    outline: 0;
+    margin: 0;
+    text-decoration: none;
+    display: inline-flex;
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--navigation-menu-trigger-bg-hover, var(--color-accent));
+      }
+    }
+
+    &:active, &[data-popup-open], &[data-active] {
+      background-color: var(--navigation-menu-trigger-bg-active, var(--color-muted));
+    }
+
+    &:focus-visible {
+      outline: var(--navigation-menu-focus-ring-width, var(--border-width-sm)) solid
+        var(--navigation-menu-focus-ring-color, var(--color-ring));
+      outline-offset: calc(var(--navigation-menu-focus-ring-width, var(--border-width-sm)) * -1);
+    }
+
+    &[data-disabled], &[disabled] {
+      pointer-events: none;
+      opacity: var(--navigation-menu-disabled-opacity, var(--opacity-disabled));
+    }
+  }
+
+  .BPQarq_trigger {
+    .BPQarq_root .BPQarq_root & {
+      width: 100%;
+      min-width: var(--navigation-menu-submenu-trigger-min-width, 9rem);
+      text-align: left;
+      background-color: var(--navigation-menu-submenu-trigger-bg, transparent);
+      border-radius: var(--navigation-menu-submenu-trigger-radius, var(--radius-lg));
+      padding: var(--navigation-menu-submenu-trigger-padding-y, .5rem)
+        var(--navigation-menu-submenu-trigger-padding-x, .75rem);
+      justify-content: flex-start;
+    }
+
+    .BPQarq_root .BPQarq_root &:active, .BPQarq_root .BPQarq_root &[data-popup-open], .BPQarq_root .BPQarq_root &[data-active] {
+      background-color: var(--navigation-menu-submenu-trigger-bg-active, var(--navigation-menu-popup-bg, var(--color-background)));
+      box-shadow: var(--navigation-menu-submenu-trigger-shadow-active, 0 1px 2px #00000014,
+        0 1px 1px #0000000a);
+    }
+  }
+
+  .BPQarq_icon {
+    box-sizing: border-box;
+    width: var(--navigation-menu-icon-size, .875rem);
+    height: var(--navigation-menu-icon-size, .875rem);
+    color: var(--navigation-menu-icon-color, currentColor);
+    transition: transform
+      var(--navigation-menu-icon-transition, var(--navigation-menu-transition, .2s ease));
+    flex-shrink: 0;
+    display: inline-flex;
+
+    &[data-popup-open] {
+      transform: rotate(180deg);
+    }
+
+    & > svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .BPQarq_root .BPQarq_root & {
+      margin-left: auto;
+    }
+  }
+
+  .BPQarq_portal {
+    z-index: var(--z-popup);
+  }
+
+  .BPQarq_backdrop {
+    z-index: var(--z-backdrop);
+    pointer-events: none;
+    background-color: var(--navigation-menu-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
+    min-height: 100dvh;
+    backdrop-filter: var(--backdrop-filter, blur(var(--navigation-menu-backdrop-blur, 4px)));
+    transition: opacity
+        var(--navigation-menu-backdrop-transition, var(--navigation-menu-transition, var(--transition-default))),
+      backdrop-filter
+        var(--navigation-menu-backdrop-transition, var(--navigation-menu-transition, var(--transition-default)));
+    position: fixed;
+    inset: 0;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      backdrop-filter: none;
+    }
+  }
+
+  .BPQarq_positioner {
+    --_navigation-menu-positioner-duration: var(--navigation-menu-popup-transition-duration, var(--duration-slow));
+    --_navigation-menu-positioner-easing: var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1));
+    box-sizing: border-box;
+    z-index: var(--z-popup);
+    width: var(--positioner-width);
+    height: var(--positioner-height);
+    max-width: min(var(--navigation-menu-positioner-max-width, calc(100vw - var(--spacing-8))),
+      var(--available-width, 100vw));
+    transition: top var(--_navigation-menu-positioner-duration) var(--_navigation-menu-positioner-easing),
+      left var(--_navigation-menu-positioner-duration) var(--_navigation-menu-positioner-easing),
+      right var(--_navigation-menu-positioner-duration) var(--_navigation-menu-positioner-easing),
+      bottom var(--_navigation-menu-positioner-duration) var(--_navigation-menu-positioner-easing);
+    outline: 0;
+
+    &:before {
+      content: "";
+      position: absolute;
+    }
+
+    &[data-side="top"]:before {
+      right: 0;
+      bottom: calc(var(--navigation-menu-positioner-gap, .625rem) * -1);
+      height: var(--navigation-menu-positioner-gap, .625rem);
+      left: 0;
+    }
+
+    &[data-side="bottom"]:before {
+      top: calc(var(--navigation-menu-positioner-gap, .625rem) * -1);
+      height: var(--navigation-menu-positioner-gap, .625rem);
+      left: 0;
+      right: 0;
+    }
+
+    &[data-side="left"]:before, &[data-side="inline-start"]:before {
+      top: 0;
+      right: calc(var(--navigation-menu-positioner-gap, .625rem) * -1);
+      width: var(--navigation-menu-positioner-gap, .625rem);
+      bottom: 0;
+    }
+
+    &[data-side="right"]:before, &[data-side="inline-end"]:before {
+      top: 0;
+      bottom: 0;
+      left: calc(var(--navigation-menu-positioner-gap, .625rem) * -1);
+      width: var(--navigation-menu-positioner-gap, .625rem);
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+  }
+
+  .BPQarq_popup {
+    box-sizing: border-box;
+    width: var(--popup-width);
+    height: var(--popup-height);
+    border: var(--navigation-menu-popup-border-width, var(--border-width-sm))
+      var(--navigation-menu-popup-border-style, solid)
+      var(--navigation-menu-popup-border-color, var(--color-border));
+    border-radius: var(--navigation-menu-popup-radius, var(--radius-lg));
+    background-color: var(--navigation-menu-popup-bg, var(--color-popover));
+    color: var(--navigation-menu-popup-color, var(--color-popover-foreground));
+    box-shadow: var(--navigation-menu-popup-shadow, var(--shadow-lg));
+    transform-origin: var(--transform-origin);
+    transition: opacity var(--navigation-menu-popup-transition-duration, var(--duration-slow))
+        var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1)),
+      transform var(--navigation-menu-popup-transition-duration, var(--duration-slow))
+        var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1)),
+      width var(--navigation-menu-popup-transition-duration, var(--duration-slow))
+        var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1)),
+      height var(--navigation-menu-popup-transition-duration, var(--duration-slow))
+        var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1));
+    position: relative;
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+      transform: scale(var(--navigation-menu-popup-scale, var(--scale-popup)));
+    }
+
+    &[data-ending-style] {
+      transition-duration: var(--navigation-menu-popup-leave-duration, .15s);
+      transition-timing-function: ease;
+    }
+  }
+
+  .BPQarq_content {
+    box-sizing: border-box;
+    width: min(var(--navigation-menu-content-width-mobile, calc(100vw - var(--spacing-8))),
+      var(--available-width, 100vw));
+    min-width: 0;
+    height: 100%;
+    padding: var(--navigation-menu-content-padding, var(--spacing-4));
+    overflow-wrap: anywhere;
+    transition: opacity var(--navigation-menu-content-opacity-duration, calc(var(--duration-slow) * .7)) ease,
+      transform var(--navigation-menu-popup-transition-duration, var(--duration-slow))
+        var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1));
+
+    @media (width >= 32rem) {
+      width: max-content;
+      min-width: var(--navigation-menu-content-min-width, 20rem);
+    }
+
+    &[data-starting-style], &[data-ending-style] {
+      opacity: 0;
+    }
+
+    &[data-starting-style] {
+      &[data-activation-direction="left"] {
+        transform: translateX(calc(var(--navigation-menu-content-slide-distance, 50%) * -1));
+      }
+
+      &[data-activation-direction="right"] {
+        transform: translateX(var(--navigation-menu-content-slide-distance, 50%));
+      }
+    }
+
+    &[data-ending-style] {
+      &[data-activation-direction="left"] {
+        transform: translateX(var(--navigation-menu-content-slide-distance, 50%));
+      }
+
+      &[data-activation-direction="right"] {
+        transform: translateX(calc(var(--navigation-menu-content-slide-distance, 50%) * -1));
+      }
+    }
+  }
+
+  .BPQarq_viewport {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .BPQarq_arrow {
+    color: var(--navigation-menu-popup-bg, var(--color-popover));
+    transition: left var(--navigation-menu-arrow-transition-duration, var(--duration-slow))
+      var(--navigation-menu-popup-transition-easing, cubic-bezier(.22, 1, .36, 1));
+    display: flex;
+
+    &[data-side="top"] {
+      bottom: calc(var(--navigation-menu-arrow-offset, .5rem) * -1);
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: calc(var(--navigation-menu-arrow-offset, .5rem) * -1);
+      rotate: 0deg;
+    }
+
+    &[data-side="left"], &[data-side="inline-start"] {
+      right: calc(var(--navigation-menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: 90deg;
+    }
+
+    &[data-side="right"], &[data-side="inline-end"] {
+      left: calc(var(--navigation-menu-arrow-inline-offset, .8125rem) * -1);
+      rotate: -90deg;
+    }
+
+    & > svg {
+      width: var(--navigation-menu-arrow-width, 1.25rem);
+      height: var(--navigation-menu-arrow-height, .625rem);
+      display: block;
+    }
+  }
+
+  .BPQarq_arrowFill {
+    fill: currentColor;
+  }
+
+  .BPQarq_arrowOuterStroke {
+    fill: var(--navigation-menu-arrow-stroke-color, var(--navigation-menu-popup-border-color, var(--color-border)));
+  }
+
+  .BPQarq_arrowInnerStroke {
+    fill: var(--navigation-menu-popup-bg, var(--color-popover));
+  }
+}

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -1,24 +1,83 @@
-import { ReactNode } from 'react';
-import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
-export type NavigationMenuPositionerProps = Pick<NavigationMenuPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'anchor' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'positionMethod' | 'disableAnchorTracking'>;
-export type NavigationMenuProps = NavigationMenuPrimitive.Root.Props & NavigationMenuPositionerProps & {
-    showArrow?: boolean;
-    showPopup?: boolean;
+import { ReactNode } from "react";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+
+//#region src/components/NavigationMenu/NavigationMenu.d.ts
+type NavigationMenuPositionerProps = Pick<NavigationMenu.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'arrowPadding' | 'anchor' | 'collisionAvoidance' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'positionMethod' | 'disableAnchorTracking'>;
+type NavigationMenuProps = NavigationMenu.Root.Props & NavigationMenuPositionerProps & {
+  showArrow?: boolean;
+  showPopup?: boolean;
 };
-export type NavigationMenuTriggerProps = NavigationMenuPrimitive.Trigger.Props & {
-    icon?: ReactNode;
+type NavigationMenuTriggerProps = NavigationMenu.Trigger.Props & {
+  icon?: ReactNode;
 };
-declare function NavigationMenu({ className, children, showArrow, showPopup, side, sideOffset, align, alignOffset, arrowPadding, anchor, collisionAvoidance, collisionBoundary, collisionPadding, sticky, positionMethod, disableAnchorTracking, ...props }: NavigationMenuProps): import("react").JSX.Element;
-declare function NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props): import("react").JSX.Element;
-declare function NavigationMenuItem(props: NavigationMenuPrimitive.Item.Props): import("react").JSX.Element;
-declare function NavigationMenuTrigger({ className, children, icon, render, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
-declare function NavigationMenuIcon({ className, children, ...props }: NavigationMenuPrimitive.Icon.Props): import("react").JSX.Element;
-declare function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props): import("react").JSX.Element;
-declare function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props): import("react").JSX.Element;
-declare function NavigationMenuPortal({ className, ...props }: NavigationMenuPrimitive.Portal.Props): import("react").JSX.Element;
-declare function NavigationMenuBackdrop({ className, ...props }: NavigationMenuPrimitive.Backdrop.Props): import("react").JSX.Element;
-declare function NavigationMenuPositioner({ className, ...props }: NavigationMenuPrimitive.Positioner.Props): import("react").JSX.Element;
-declare function NavigationMenuPopup({ className, ...props }: NavigationMenuPrimitive.Popup.Props): import("react").JSX.Element;
-declare function NavigationMenuArrow({ className, children, ...props }: NavigationMenuPrimitive.Arrow.Props): import("react").JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: NavigationMenuPrimitive.Viewport.Props): import("react").JSX.Element;
-export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuIcon, NavigationMenuContent, NavigationMenuLink, NavigationMenuPortal, NavigationMenuBackdrop, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuArrow, NavigationMenuViewport, };
+declare function NavigationMenu$1({
+  className,
+  children,
+  showArrow,
+  showPopup,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  arrowPadding,
+  anchor,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  positionMethod,
+  disableAnchorTracking,
+  ...props
+}: NavigationMenuProps): import("react").JSX.Element;
+declare function NavigationMenuList({
+  className,
+  ...props
+}: NavigationMenu.List.Props): import("react").JSX.Element;
+declare function NavigationMenuItem(props: NavigationMenu.Item.Props): import("react").JSX.Element;
+declare function NavigationMenuTrigger({
+  className,
+  children,
+  icon,
+  render,
+  ...props
+}: NavigationMenuTriggerProps): import("react").JSX.Element;
+declare function NavigationMenuIcon({
+  className,
+  children,
+  ...props
+}: NavigationMenu.Icon.Props): import("react").JSX.Element;
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenu.Content.Props): import("react").JSX.Element;
+declare function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenu.Link.Props): import("react").JSX.Element;
+declare function NavigationMenuPortal({
+  className,
+  ...props
+}: NavigationMenu.Portal.Props): import("react").JSX.Element;
+declare function NavigationMenuBackdrop({
+  className,
+  ...props
+}: NavigationMenu.Backdrop.Props): import("react").JSX.Element;
+declare function NavigationMenuPositioner({
+  className,
+  ...props
+}: NavigationMenu.Positioner.Props): import("react").JSX.Element;
+declare function NavigationMenuPopup({
+  className,
+  ...props
+}: NavigationMenu.Popup.Props): import("react").JSX.Element;
+declare function NavigationMenuArrow({
+  className,
+  children,
+  ...props
+}: NavigationMenu.Arrow.Props): import("react").JSX.Element;
+declare function NavigationMenuViewport({
+  className,
+  ...props
+}: NavigationMenu.Viewport.Props): import("react").JSX.Element;
+//#endregion
+export { NavigationMenu$1 as NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPositionerProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport };

package/dist/components/NavigationMenu/NavigationMenu.js

@@ -0,0 +1,134 @@
+import { ChevronDownIcon, PopupArrowIcon } from "../../icons/ui/Icons.js";
+import { mergeClassName } from "../../utils/mergeClassName.js";
+import NavigationMenu_module_default from "./NavigationMenu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+//#region src/components/NavigationMenu/NavigationMenu.tsx
+const DEFAULT_SIDE_OFFSET = 10;
+const DEFAULT_COLLISION_AVOIDANCE = { side: "none" };
+const DEFAULT_COLLISION_PADDING = {
+	top: 5,
+	bottom: 5,
+	left: 20,
+	right: 20
+};
+function NavigationMenu$1({ className, children, showArrow = false, showPopup = true, side, sideOffset = DEFAULT_SIDE_OFFSET, align, alignOffset, arrowPadding, anchor, collisionAvoidance = DEFAULT_COLLISION_AVOIDANCE, collisionBoundary, collisionPadding = DEFAULT_COLLISION_PADDING, sticky, positionMethod, disableAnchorTracking, ...props }) {
+	return /* @__PURE__ */ jsxs(NavigationMenu.Root, {
+		"data-slot": "navigation-menu-root",
+		className: mergeClassName(className, NavigationMenu_module_default.root),
+		...props,
+		children: [children, showPopup ? /* @__PURE__ */ jsx(NavigationMenuPortal, { children: /* @__PURE__ */ jsx(NavigationMenuPositioner, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			arrowPadding,
+			anchor,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			sticky,
+			positionMethod,
+			disableAnchorTracking,
+			children: /* @__PURE__ */ jsxs(NavigationMenuPopup, { children: [showArrow ? /* @__PURE__ */ jsx(NavigationMenuArrow, {}) : null, /* @__PURE__ */ jsx(NavigationMenuViewport, {})] })
+		}) }) : null]
+	});
+}
+function NavigationMenuList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.List, {
+		"data-slot": "navigation-menu-list",
+		className: mergeClassName(className, NavigationMenu_module_default.list),
+		...props
+	});
+}
+function NavigationMenuItem(props) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+		"data-slot": "navigation-menu-item",
+		...props
+	});
+}
+function NavigationMenuTrigger({ className, children, icon, render, ...props }) {
+	const triggerClassName = render ? className : mergeClassName(className, NavigationMenu_module_default.trigger);
+	return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
+		"data-slot": "navigation-menu-trigger",
+		render,
+		className: triggerClassName,
+		...props,
+		children: [children, icon === null || icon === false ? null : /* @__PURE__ */ jsx(NavigationMenuIcon, { children: icon })]
+	});
+}
+function NavigationMenuIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Icon, {
+		"data-slot": "navigation-menu-icon",
+		className: mergeClassName(className, NavigationMenu_module_default.icon),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Content, {
+		"data-slot": "navigation-menu-content",
+		className: mergeClassName(className, NavigationMenu_module_default.content),
+		...props
+	});
+}
+function NavigationMenuLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+		"data-slot": "navigation-menu-link",
+		className: mergeClassName(className, NavigationMenu_module_default.link),
+		...props
+	});
+}
+function NavigationMenuPortal({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Portal, {
+		"data-slot": "navigation-menu-portal",
+		className: mergeClassName(className, NavigationMenu_module_default.portal),
+		...props
+	});
+}
+function NavigationMenuBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Backdrop, {
+		"data-slot": "navigation-menu-backdrop",
+		className: mergeClassName(className, NavigationMenu_module_default.backdrop),
+		...props
+	});
+}
+function NavigationMenuPositioner({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
+		"data-slot": "navigation-menu-positioner",
+		className: mergeClassName(className, NavigationMenu_module_default.positioner),
+		...props
+	});
+}
+function NavigationMenuPopup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Popup, {
+		"data-slot": "navigation-menu-popup",
+		className: mergeClassName(className, NavigationMenu_module_default.popup),
+		...props
+	});
+}
+function NavigationMenuArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Arrow, {
+		"data-slot": "navigation-menu-arrow",
+		className: mergeClassName(className, NavigationMenu_module_default.arrow),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowSvg, {})
+	});
+}
+function NavigationMenuViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu.Viewport, {
+		"data-slot": "navigation-menu-viewport",
+		className: mergeClassName(className, NavigationMenu_module_default.viewport),
+		...props
+	});
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsx(PopupArrowIcon, {
+		fillClassName: NavigationMenu_module_default.arrowFill,
+		outerStrokeClassName: NavigationMenu_module_default.arrowOuterStroke,
+		innerStrokeClassName: NavigationMenu_module_default.arrowInnerStroke,
+		...props
+	});
+}
+//#endregion
+export { NavigationMenu$1 as NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuTrigger, NavigationMenuViewport };

package/dist/components/NavigationMenu/NavigationMenu.module.cjs

@@ -0,0 +1,21 @@
+import './NavigationMenu.css';
+//#region src/components/NavigationMenu/NavigationMenu.module.css
+var NavigationMenu_module_default = {
+	"arrow": "BPQarq_arrow",
+	"arrowFill": "BPQarq_arrowFill",
+	"arrowInnerStroke": "BPQarq_arrowInnerStroke",
+	"arrowOuterStroke": "BPQarq_arrowOuterStroke",
+	"backdrop": "BPQarq_backdrop",
+	"content": "BPQarq_content",
+	"icon": "BPQarq_icon",
+	"link": "BPQarq_link",
+	"list": "BPQarq_list",
+	"popup": "BPQarq_popup",
+	"portal": "BPQarq_portal",
+	"positioner": "BPQarq_positioner",
+	"root": "BPQarq_root",
+	"trigger": "BPQarq_trigger",
+	"viewport": "BPQarq_viewport"
+};
+//#endregion
+exports.default = NavigationMenu_module_default;

package/dist/components/NavigationMenu/NavigationMenu.module.js

@@ -0,0 +1,21 @@
+import './NavigationMenu.css';
+//#region src/components/NavigationMenu/NavigationMenu.module.css
+var NavigationMenu_module_default = {
+	"arrow": "BPQarq_arrow",
+	"arrowFill": "BPQarq_arrowFill",
+	"arrowInnerStroke": "BPQarq_arrowInnerStroke",
+	"arrowOuterStroke": "BPQarq_arrowOuterStroke",
+	"backdrop": "BPQarq_backdrop",
+	"content": "BPQarq_content",
+	"icon": "BPQarq_icon",
+	"link": "BPQarq_link",
+	"list": "BPQarq_list",
+	"popup": "BPQarq_popup",
+	"portal": "BPQarq_portal",
+	"positioner": "BPQarq_positioner",
+	"root": "BPQarq_root",
+	"trigger": "BPQarq_trigger",
+	"viewport": "BPQarq_viewport"
+};
+//#endregion
+export { NavigationMenu_module_default as default };

package/dist/components/NavigationMenu/index.d.ts

@@ -1,2 +1 @@
-export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuIcon, NavigationMenuContent, NavigationMenuLink, NavigationMenuPortal, NavigationMenuBackdrop, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuArrow, NavigationMenuViewport, } from './NavigationMenu';
-export type { NavigationMenuPositionerProps, NavigationMenuProps, NavigationMenuTriggerProps, } from './NavigationMenu';
+import { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPositionerProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport } from "./NavigationMenu.js";