@lglab/compose-ui 0.27.0 → 0.29.0

package/dist/navigation-menu.d.ts

@@ -1,96 +1,111 @@
-import { JSX } from 'react/jsx-runtime';
-import { NavigationMenu } from '@base-ui/react/navigation-menu';
-import * as React_2 from 'react';
-
-export declare const NavigationMenuArrow: {
-    ({ className, ...props }: NavigationMenuArrowProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuArrowProps = React_2.ComponentProps<typeof NavigationMenu.Arrow>;
-
-export declare const NavigationMenuBackdrop: {
-    ({ className, ...props }: NavigationMenuBackdropProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuBackdropProps = React_2.ComponentProps<typeof NavigationMenu.Backdrop>;
-
-export declare const NavigationMenuContent: {
-    ({ className, ...props }: NavigationMenuContentProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuContentProps = React_2.ComponentProps<typeof NavigationMenu.Content>;
-
-export declare const NavigationMenuIcon: {
-    ({ className, ...props }: NavigationMenuIconProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuIconProps = React_2.ComponentProps<typeof NavigationMenu.Icon>;
-
-export declare const NavigationMenuItem: {
-    ({ className, ...props }: NavigationMenuItemProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuItemProps = React_2.ComponentProps<typeof NavigationMenu.Item>;
-
-export declare const NavigationMenuLink: {
-    ({ className, ...props }: NavigationMenuLinkProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuLinkProps = React_2.ComponentProps<typeof NavigationMenu.Link>;
-
-export declare const NavigationMenuList: {
-    ({ className, ...props }: NavigationMenuListProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuListProps = React_2.ComponentProps<typeof NavigationMenu.List>;
-
-export declare const NavigationMenuPopup: {
-    ({ className, ...props }: NavigationMenuPopupProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuPopupProps = React_2.ComponentProps<typeof NavigationMenu.Popup>;
-
-export declare const NavigationMenuPortal: {
-    (props: NavigationMenuPortalProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuPortalProps = React_2.ComponentProps<typeof NavigationMenu.Portal>;
-
-export declare const NavigationMenuPositioner: {
-    ({ className, sideOffset, collisionPadding, ...props }: NavigationMenuPositionerProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuPositionerProps = React_2.ComponentProps<typeof NavigationMenu.Positioner>;
-
-export declare const NavigationMenuRoot: {
-    ({ className, ...props }: NavigationMenuRootProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuRootProps = React_2.ComponentProps<typeof NavigationMenu.Root>;
-
-export declare const NavigationMenuTrigger: {
-    ({ className, ...props }: NavigationMenuTriggerProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuTriggerProps = React_2.ComponentProps<typeof NavigationMenu.Trigger>;
-
-export declare const NavigationMenuViewport: {
-    ({ className, ...props }: NavigationMenuViewportProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type NavigationMenuViewportProps = React_2.ComponentProps<typeof NavigationMenu.Viewport>;
-
-export { }
+import * as React from "react";
+import * as react_jsx_runtime86 from "react/jsx-runtime";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+
+//#region src/components/navigation-menu.d.ts
+type NavigationMenuRootProps = React.ComponentProps<typeof NavigationMenu.Root>;
+declare const NavigationMenuRoot: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuRootProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuListProps = React.ComponentProps<typeof NavigationMenu.List>;
+declare const NavigationMenuList: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuListProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuItemProps = React.ComponentProps<typeof NavigationMenu.Item>;
+declare const NavigationMenuItem: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuItemProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuTriggerProps = React.ComponentProps<typeof NavigationMenu.Trigger>;
+declare const NavigationMenuTrigger: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuTriggerProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuIconProps = React.ComponentProps<typeof NavigationMenu.Icon>;
+declare const NavigationMenuIcon: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuIconProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuContentProps = React.ComponentProps<typeof NavigationMenu.Content>;
+declare const NavigationMenuContent: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuContentProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuLinkProps = React.ComponentProps<typeof NavigationMenu.Link>;
+declare const NavigationMenuLink: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuLinkProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuPortalProps = React.ComponentProps<typeof NavigationMenu.Portal>;
+declare const NavigationMenuPortal: {
+  (props: NavigationMenuPortalProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuPositionerProps = React.ComponentProps<typeof NavigationMenu.Positioner>;
+declare const NavigationMenuPositioner: {
+  ({
+    className,
+    sideOffset,
+    collisionPadding,
+    ...props
+  }: NavigationMenuPositionerProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuPopupProps = React.ComponentProps<typeof NavigationMenu.Popup>;
+declare const NavigationMenuPopup: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuPopupProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuViewportProps = React.ComponentProps<typeof NavigationMenu.Viewport>;
+declare const NavigationMenuViewport: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuViewportProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuArrowProps = React.ComponentProps<typeof NavigationMenu.Arrow>;
+declare const NavigationMenuArrow: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuArrowProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+type NavigationMenuBackdropProps = React.ComponentProps<typeof NavigationMenu.Backdrop>;
+declare const NavigationMenuBackdrop: {
+  ({
+    className,
+    ...props
+  }: NavigationMenuBackdropProps): react_jsx_runtime86.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { NavigationMenuArrow, type NavigationMenuArrowProps, NavigationMenuBackdrop, type NavigationMenuBackdropProps, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIcon, type NavigationMenuIconProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, NavigationMenuPopup, type NavigationMenuPopupProps, NavigationMenuPortal, type NavigationMenuPortalProps, NavigationMenuPositioner, type NavigationMenuPositionerProps, NavigationMenuRoot, type NavigationMenuRootProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps };
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","names":[],"sources":["../src/components/navigation-menu.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/navigation-menu.js

@@ -1,176 +1,118 @@
-"use client";
-import { jsx as e } from "react/jsx-runtime";
-import { NavigationMenu as o } from "@base-ui/react/navigation-menu";
-import { A as c } from "./arrow-svg-C6zQTvgS.js";
-import { c as n } from "./utils-B6yFEsav.js";
-const i = [
-  "inline-flex items-center justify-center rounded-md text-sm font-medium outline-none select-none",
-  "h-9 px-4 py-2",
-  "transition-colors",
-  "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-  "focus:bg-accent focus:text-accent-foreground"
-], r = [
-  "group-data-content/content:block group-data-content/content:h-auto group-data-content/content:w-auto group-data-content/content:p-2",
-  "group-data-content/content:hover:bg-accent group-data-content/content:hover:text-accent-foreground"
-], l = ({ className: t, ...a }) => /* @__PURE__ */ e(o.Root, { className: n("min-w-max", t), ...a });
-l.displayName = "NavigationMenuRoot";
-const u = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.List,
-  {
-    className: n("flex items-center gap-1 relative", t),
-    ...a
-  }
-);
-u.displayName = "NavigationMenuList";
-const g = ({ className: t, ...a }) => /* @__PURE__ */ e(o.Item, { className: n(t), ...a });
-g.displayName = "NavigationMenuItem";
-const p = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Trigger,
-  {
-    className: n(
-      i,
-      r,
-      "group gap-1",
-      "group-data-content/content:inline-flex group-data-content/content:w-full group-data-content/content:justify-between",
-      t
-    ),
-    ...a
-  }
-);
-p.displayName = "NavigationMenuTrigger";
-const m = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Icon,
-  {
-    className: n(
-      "transition-transform duration-200 ease-in-out",
-      "group-data-popup-open:rotate-180",
-      t
-    ),
-    ...a
-  }
-);
-m.displayName = "NavigationMenuIcon";
-const f = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Content,
-  {
-    "data-content": !0,
-    className: n(
-      "group/content",
-      "w-[calc(100vw-40px)] h-full p-2 xs:w-max xs:min-w-[400px] xs:w-max",
-      "transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
-      "data-starting-style:opacity-0 data-ending-style:opacity-0",
-      "data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%]",
-      "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%]",
-      t
-    ),
-    ...a
-  }
-);
-f.displayName = "NavigationMenuContent";
-const b = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Link,
-  {
-    className: n(
-      i,
-      r,
-      "data-active:bg-accent data-active:text-accent-foreground",
-      t
-    ),
-    ...a
-  }
-);
-b.displayName = "NavigationMenuLink";
-const N = (t) => /* @__PURE__ */ e(o.Portal, { ...t });
-N.displayName = "NavigationMenuPortal";
-const v = ({
-  className: t,
-  sideOffset: a = 10,
-  collisionPadding: s = { top: 5, bottom: 5, left: 20, right: 20 },
-  ...d
-}) => /* @__PURE__ */ e(
-  o.Positioner,
-  {
-    className: n(
-      "z-50 box-border",
-      "h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)",
-      "transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
-      "data-instant:transition-none",
-      // Gap element to maintain hover when moving to popup
-      "before:absolute before:content-['']",
-      "data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5",
-      "data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5",
-      "data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5",
-      "data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5",
-      t
-    ),
-    sideOffset: a,
-    collisionPadding: s,
-    ...d
-  }
-);
-v.displayName = "NavigationMenuPositioner";
-const h = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Popup,
-  {
-    className: n(
-      "relative rounded-lg border border-border bg-background shadow-lg",
-      "h-(--popup-height) w-(--popup-width)",
-      "origin-(--transform-origin)",
-      "transition-[opacity,transform,width,height,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
-      "data-starting-style:scale-90 data-starting-style:opacity-0",
-      "data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150",
-      t
-    ),
-    ...a
-  }
-);
-h.displayName = "NavigationMenuPopup";
-const y = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Viewport,
-  {
-    className: n("relative h-full w-full overflow-hidden", t),
-    ...a
-  }
-);
-y.displayName = "NavigationMenuViewport";
-const x = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Arrow,
-  {
-    className: n(
-      "flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]",
-      "data-[side=bottom]:top-[-9px] data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180",
-      t
-    ),
-    ...a,
-    children: /* @__PURE__ */ e(c, {})
-  }
-);
-x.displayName = "NavigationMenuArrow";
-const w = ({ className: t, ...a }) => /* @__PURE__ */ e(
-  o.Backdrop,
-  {
-    className: n(
-      "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm",
-      "transition-opacity duration-200",
-      "data-starting-style:opacity-0 data-ending-style:opacity-0",
-      t
-    ),
-    ...a
-  }
-);
-w.displayName = "NavigationMenuBackdrop";
-export {
-  x as NavigationMenuArrow,
-  w as NavigationMenuBackdrop,
-  f as NavigationMenuContent,
-  m as NavigationMenuIcon,
-  g as NavigationMenuItem,
-  b as NavigationMenuLink,
-  u as NavigationMenuList,
-  h as NavigationMenuPopup,
-  N as NavigationMenuPortal,
-  v as NavigationMenuPositioner,
-  l as NavigationMenuRoot,
-  p as NavigationMenuTrigger,
-  y as NavigationMenuViewport
+'use client';
+
+import { cn } from "./lib/utils.js";
+import { ArrowSvg } from "./lib/arrow-svg.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+
+//#region src/components/navigation-menu.tsx
+const rootItemStyles = [
+	"inline-flex items-center justify-center rounded-md text-sm font-medium outline-none select-none",
+	"h-9 px-4 py-2",
+	"transition-colors",
+	"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+	"focus:bg-accent focus:text-accent-foreground"
+];
+const submenuItemStyles = ["group-data-content/content:block group-data-content/content:h-auto group-data-content/content:w-auto group-data-content/content:p-2", "group-data-content/content:hover:bg-accent group-data-content/content:hover:text-accent-foreground"];
+const NavigationMenuRoot = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Root, {
+		className: cn("min-w-max", className),
+		...props
+	});
 };
+NavigationMenuRoot.displayName = "NavigationMenuRoot";
+const NavigationMenuList = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.List, {
+		className: cn("flex items-center gap-1 relative", className),
+		...props
+	});
+};
+NavigationMenuList.displayName = "NavigationMenuList";
+const NavigationMenuItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Item, {
+		className: cn(className),
+		...props
+	});
+};
+NavigationMenuItem.displayName = "NavigationMenuItem";
+const NavigationMenuTrigger = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Trigger, {
+		className: cn(rootItemStyles, submenuItemStyles, "group gap-1", "group-data-content/content:inline-flex group-data-content/content:w-full group-data-content/content:justify-between", className),
+		...props
+	});
+};
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+const NavigationMenuIcon = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Icon, {
+		className: cn("transition-transform duration-200 ease-in-out", "group-data-popup-open:rotate-180", className),
+		...props
+	});
+};
+NavigationMenuIcon.displayName = "NavigationMenuIcon";
+const NavigationMenuContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Content, {
+		"data-content": true,
+		className: cn("group/content", "w-[calc(100vw-40px)] h-full p-2 xs:w-max xs:min-w-[400px] xs:w-max", "transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]", "data-starting-style:opacity-0 data-ending-style:opacity-0", "data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%]", "data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%]", className),
+		...props
+	});
+};
+NavigationMenuContent.displayName = "NavigationMenuContent";
+const NavigationMenuLink = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Link, {
+		className: cn(rootItemStyles, submenuItemStyles, "data-active:bg-accent data-active:text-accent-foreground", className),
+		...props
+	});
+};
+NavigationMenuLink.displayName = "NavigationMenuLink";
+const NavigationMenuPortal = (props) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Portal, { ...props });
+};
+NavigationMenuPortal.displayName = "NavigationMenuPortal";
+const NavigationMenuPositioner = ({ className, sideOffset = 10, collisionPadding = {
+	top: 5,
+	bottom: 5,
+	left: 20,
+	right: 20
+}, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
+		className: cn("z-50 box-border", "h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)", "transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]", "data-instant:transition-none", "before:absolute before:content-['']", "data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5", "data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5", "data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5", "data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5", className),
+		sideOffset,
+		collisionPadding,
+		...props
+	});
+};
+NavigationMenuPositioner.displayName = "NavigationMenuPositioner";
+const NavigationMenuPopup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Popup, {
+		className: cn("relative rounded-lg border border-border bg-background shadow-lg", "h-(--popup-height) w-(--popup-width)", "origin-(--transform-origin)", "transition-[opacity,transform,width,height,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]", "data-starting-style:scale-90 data-starting-style:opacity-0", "data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150", className),
+		...props
+	});
+};
+NavigationMenuPopup.displayName = "NavigationMenuPopup";
+const NavigationMenuViewport = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Viewport, {
+		className: cn("relative h-full w-full overflow-hidden", className),
+		...props
+	});
+};
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+const NavigationMenuArrow = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Arrow, {
+		className: cn("flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]", "data-[side=bottom]:top-[-9px] data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowSvg, {})
+	});
+};
+NavigationMenuArrow.displayName = "NavigationMenuArrow";
+const NavigationMenuBackdrop = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(NavigationMenu.Backdrop, {
+		className: cn("fixed inset-0 z-40 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", "data-starting-style:opacity-0 data-ending-style:opacity-0", className),
+		...props
+	});
+};
+NavigationMenuBackdrop.displayName = "NavigationMenuBackdrop";
+
+//#endregion
+export { NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuViewport };
+//# sourceMappingURL=navigation-menu.js.map

package/dist/navigation-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.js","names":["BaseNavigationMenu"],"sources":["../src/components/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu'\nimport * as React from 'react'\n\nimport { ArrowSvg } from '../lib/arrow-svg'\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// Shared Styles\n// ============================================================================\n\nconst rootItemStyles = [\n  'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none select-none',\n  'h-9 px-4 py-2',\n  'transition-colors',\n  'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',\n  'focus:bg-accent focus:text-accent-foreground',\n]\n\nconst submenuItemStyles = [\n  'group-data-content/content:block group-data-content/content:h-auto group-data-content/content:w-auto group-data-content/content:p-2',\n  'group-data-content/content:hover:bg-accent group-data-content/content:hover:text-accent-foreground',\n]\n\n// ============================================================================\n// NavigationMenuRoot\n// ============================================================================\n\ntype NavigationMenuRootProps = React.ComponentProps<typeof BaseNavigationMenu.Root>\n\nconst NavigationMenuRoot = ({ className, ...props }: NavigationMenuRootProps) => {\n  return <BaseNavigationMenu.Root className={cn('min-w-max', className)} {...props} />\n}\n\nNavigationMenuRoot.displayName = 'NavigationMenuRoot'\n\n// ============================================================================\n// NavigationMenuList\n// ============================================================================\n\ntype NavigationMenuListProps = React.ComponentProps<typeof BaseNavigationMenu.List>\n\nconst NavigationMenuList = ({ className, ...props }: NavigationMenuListProps) => {\n  return (\n    <BaseNavigationMenu.List\n      className={cn('flex items-center gap-1 relative', className)}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuList.displayName = 'NavigationMenuList'\n\n// ============================================================================\n// NavigationMenuItem\n// ============================================================================\n\ntype NavigationMenuItemProps = React.ComponentProps<typeof BaseNavigationMenu.Item>\n\nconst NavigationMenuItem = ({ className, ...props }: NavigationMenuItemProps) => {\n  return <BaseNavigationMenu.Item className={cn(className)} {...props} />\n}\n\nNavigationMenuItem.displayName = 'NavigationMenuItem'\n\n// ============================================================================\n// NavigationMenuTrigger\n// ============================================================================\n\ntype NavigationMenuTriggerProps = React.ComponentProps<typeof BaseNavigationMenu.Trigger>\n\nconst NavigationMenuTrigger = ({ className, ...props }: NavigationMenuTriggerProps) => {\n  return (\n    <BaseNavigationMenu.Trigger\n      className={cn(\n        rootItemStyles,\n        submenuItemStyles,\n        'group gap-1',\n        'group-data-content/content:inline-flex group-data-content/content:w-full group-data-content/content:justify-between',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuTrigger.displayName = 'NavigationMenuTrigger'\n\n// ============================================================================\n// NavigationMenuIcon\n// ============================================================================\n\ntype NavigationMenuIconProps = React.ComponentProps<typeof BaseNavigationMenu.Icon>\n\nconst NavigationMenuIcon = ({ className, ...props }: NavigationMenuIconProps) => {\n  return (\n    <BaseNavigationMenu.Icon\n      className={cn(\n        'transition-transform duration-200 ease-in-out',\n        'group-data-popup-open:rotate-180',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuIcon.displayName = 'NavigationMenuIcon'\n\n// ============================================================================\n// NavigationMenuContent\n// ============================================================================\n\ntype NavigationMenuContentProps = React.ComponentProps<typeof BaseNavigationMenu.Content>\n\nconst NavigationMenuContent = ({ className, ...props }: NavigationMenuContentProps) => {\n  return (\n    <BaseNavigationMenu.Content\n      data-content\n      className={cn(\n        'group/content',\n        'w-[calc(100vw-40px)] h-full p-2 xs:w-max xs:min-w-[400px] xs:w-max',\n        'transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]',\n        'data-starting-style:opacity-0 data-ending-style:opacity-0',\n        'data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%]',\n        'data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuContent.displayName = 'NavigationMenuContent'\n\n// ============================================================================\n// NavigationMenuLink\n// ============================================================================\n\ntype NavigationMenuLinkProps = React.ComponentProps<typeof BaseNavigationMenu.Link>\n\nconst NavigationMenuLink = ({ className, ...props }: NavigationMenuLinkProps) => {\n  return (\n    <BaseNavigationMenu.Link\n      className={cn(\n        rootItemStyles,\n        submenuItemStyles,\n        'data-active:bg-accent data-active:text-accent-foreground',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n\n// ============================================================================\n// NavigationMenuPortal\n// ============================================================================\n\ntype NavigationMenuPortalProps = React.ComponentProps<typeof BaseNavigationMenu.Portal>\n\nconst NavigationMenuPortal = (props: NavigationMenuPortalProps) => {\n  return <BaseNavigationMenu.Portal {...props} />\n}\n\nNavigationMenuPortal.displayName = 'NavigationMenuPortal'\n\n// ============================================================================\n// NavigationMenuPositioner\n// ============================================================================\n\ntype NavigationMenuPositionerProps = React.ComponentProps<\n  typeof BaseNavigationMenu.Positioner\n>\n\nconst NavigationMenuPositioner = ({\n  className,\n  sideOffset = 10,\n  collisionPadding = { top: 5, bottom: 5, left: 20, right: 20 },\n  ...props\n}: NavigationMenuPositionerProps) => {\n  return (\n    <BaseNavigationMenu.Positioner\n      className={cn(\n        'z-50 box-border',\n        'h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)',\n        'transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]',\n        'data-instant:transition-none',\n        // Gap element to maintain hover when moving to popup\n        \"before:absolute before:content-['']\",\n        'data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5',\n        'data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5',\n        'data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5',\n        'data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5',\n        className,\n      )}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuPositioner.displayName = 'NavigationMenuPositioner'\n\n// ============================================================================\n// NavigationMenuPopup\n// ============================================================================\n\ntype NavigationMenuPopupProps = React.ComponentProps<typeof BaseNavigationMenu.Popup>\n\nconst NavigationMenuPopup = ({ className, ...props }: NavigationMenuPopupProps) => {\n  return (\n    <BaseNavigationMenu.Popup\n      className={cn(\n        'relative rounded-lg border border-border bg-background shadow-lg',\n        'h-(--popup-height) w-(--popup-width)',\n        'origin-(--transform-origin)',\n        'transition-[opacity,transform,width,height,scale] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]',\n        'data-starting-style:scale-90 data-starting-style:opacity-0',\n        'data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuPopup.displayName = 'NavigationMenuPopup'\n\n// ============================================================================\n// NavigationMenuViewport\n// ============================================================================\n\ntype NavigationMenuViewportProps = React.ComponentProps<\n  typeof BaseNavigationMenu.Viewport\n>\n\nconst NavigationMenuViewport = ({ className, ...props }: NavigationMenuViewportProps) => {\n  return (\n    <BaseNavigationMenu.Viewport\n      className={cn('relative h-full w-full overflow-hidden', className)}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuViewport.displayName = 'NavigationMenuViewport'\n\n// ============================================================================\n// NavigationMenuArrow\n// ============================================================================\n\ntype NavigationMenuArrowProps = React.ComponentProps<typeof BaseNavigationMenu.Arrow>\n\nconst NavigationMenuArrow = ({ className, ...props }: NavigationMenuArrowProps) => {\n  return (\n    <BaseNavigationMenu.Arrow\n      className={cn(\n        'flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]',\n        'data-[side=bottom]:top-[-9px] data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-9px] data-[side=top]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      <ArrowSvg />\n    </BaseNavigationMenu.Arrow>\n  )\n}\n\nNavigationMenuArrow.displayName = 'NavigationMenuArrow'\n\n// ============================================================================\n// NavigationMenuBackdrop\n// ============================================================================\n\ntype NavigationMenuBackdropProps = React.ComponentProps<\n  typeof BaseNavigationMenu.Backdrop\n>\n\nconst NavigationMenuBackdrop = ({ className, ...props }: NavigationMenuBackdropProps) => {\n  return (\n    <BaseNavigationMenu.Backdrop\n      className={cn(\n        'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm',\n        'transition-opacity duration-200',\n        'data-starting-style:opacity-0 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nNavigationMenuBackdrop.displayName = 'NavigationMenuBackdrop'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n  NavigationMenuRoot,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuIcon,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuPortal,\n  NavigationMenuPositioner,\n  NavigationMenuPopup,\n  NavigationMenuViewport,\n  NavigationMenuArrow,\n  NavigationMenuBackdrop,\n}\n\nexport type {\n  NavigationMenuRootProps,\n  NavigationMenuListProps,\n  NavigationMenuItemProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuIconProps,\n  NavigationMenuContentProps,\n  NavigationMenuLinkProps,\n  NavigationMenuPortalProps,\n  NavigationMenuPositionerProps,\n  NavigationMenuPopupProps,\n  NavigationMenuViewportProps,\n  NavigationMenuArrowProps,\n  NavigationMenuBackdropProps,\n}\n"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACD;AAED,MAAM,oBAAoB,CACxB,uIACA,qGACD;AAQD,MAAM,sBAAsB,EAAE,WAAW,GAAG,YAAqC;AAC/E,QAAO,oBAACA,eAAmB;EAAK,WAAW,GAAG,aAAa,UAAU;EAAE,GAAI;GAAS;;AAGtF,mBAAmB,cAAc;AAQjC,MAAM,sBAAsB,EAAE,WAAW,GAAG,YAAqC;AAC/E,QACE,oBAACA,eAAmB;EAClB,WAAW,GAAG,oCAAoC,UAAU;EAC5D,GAAI;GACJ;;AAIN,mBAAmB,cAAc;AAQjC,MAAM,sBAAsB,EAAE,WAAW,GAAG,YAAqC;AAC/E,QAAO,oBAACA,eAAmB;EAAK,WAAW,GAAG,UAAU;EAAE,GAAI;GAAS;;AAGzE,mBAAmB,cAAc;AAQjC,MAAM,yBAAyB,EAAE,WAAW,GAAG,YAAwC;AACrF,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,gBACA,mBACA,eACA,uHACA,UACD;EACD,GAAI;GACJ;;AAIN,sBAAsB,cAAc;AAQpC,MAAM,sBAAsB,EAAE,WAAW,GAAG,YAAqC;AAC/E,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,iDACA,oCACA,UACD;EACD,GAAI;GACJ;;AAIN,mBAAmB,cAAc;AAQjC,MAAM,yBAAyB,EAAE,WAAW,GAAG,YAAwC;AACrF,QACE,oBAACA,eAAmB;EAClB;EACA,WAAW,GACT,iBACA,sEACA,gGACA,6DACA,mJACA,+IACA,UACD;EACD,GAAI;GACJ;;AAIN,sBAAsB,cAAc;AAQpC,MAAM,sBAAsB,EAAE,WAAW,GAAG,YAAqC;AAC/E,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,gBACA,mBACA,4DACA,UACD;EACD,GAAI;GACJ;;AAIN,mBAAmB,cAAc;AAQjC,MAAM,wBAAwB,UAAqC;AACjE,QAAO,oBAACA,eAAmB,UAAO,GAAI,QAAS;;AAGjD,qBAAqB,cAAc;AAUnC,MAAM,4BAA4B,EAChC,WACA,aAAa,IACb,mBAAmB;CAAE,KAAK;CAAG,QAAQ;CAAG,MAAM;CAAI,OAAO;CAAI,EAC7D,GAAG,YACgC;AACnC,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,mBACA,4EACA,0FACA,gCAEA,uCACA,4IACA,mIACA,sIACA,yIACA,UACD;EACW;EACM;EAClB,GAAI;GACJ;;AAIN,yBAAyB,cAAc;AAQvC,MAAM,uBAAuB,EAAE,WAAW,GAAG,YAAsC;AACjF,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,oEACA,wCACA,+BACA,yGACA,8DACA,yFACA,UACD;EACD,GAAI;GACJ;;AAIN,oBAAoB,cAAc;AAUlC,MAAM,0BAA0B,EAAE,WAAW,GAAG,YAAyC;AACvF,QACE,oBAACA,eAAmB;EAClB,WAAW,GAAG,0CAA0C,UAAU;EAClE,GAAI;GACJ;;AAIN,uBAAuB,cAAc;AAQrC,MAAM,uBAAuB,EAAE,WAAW,GAAG,YAAsC;AACjF,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,8EACA,gNACA,UACD;EACD,GAAI;YAEJ,oBAAC,aAAW;GACa;;AAI/B,oBAAoB,cAAc;AAUlC,MAAM,0BAA0B,EAAE,WAAW,GAAG,YAAyC;AACvF,QACE,oBAACA,eAAmB;EAClB,WAAW,GACT,mDACA,mCACA,6DACA,UACD;EACD,GAAI;GACJ;;AAIN,uBAAuB,cAAc"}