@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/navigation-menu.d.ts

@@ -0,0 +1,139 @@
+import * as React from 'react';
+
+type NavigationMenuRadius = 'sm' | 'md' | 'lg' | 'xl';
+declare const navigationMenuSizeMap: {
+    readonly sm: {
+        readonly trigger: "h-8 text-sm px-3 gap-2";
+        readonly link: "h-8 text-sm px-3 gap-2";
+        readonly icon: "icon-xs";
+        readonly collapsedSquare: "size-8";
+        readonly collapsedWidth: 56;
+        readonly dropdownLink: "px-3 py-1.5 text-sm gap-2";
+        readonly subLink: "h-8 text-sm pl-8 pr-3 gap-2";
+        readonly groupLabel: "text-2xs px-3 mb-1";
+        readonly groupMargin: "mt-4 first:mt-0";
+    };
+    readonly md: {
+        readonly trigger: "h-9 text-md px-3.5 gap-2";
+        readonly link: "h-9 text-md px-3.5 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-9";
+        readonly collapsedWidth: 60;
+        readonly dropdownLink: "px-3 py-1.5 text-md gap-2";
+        readonly subLink: "h-9 text-md pl-9 pr-3.5 gap-2";
+        readonly groupLabel: "text-xs px-3.5 mb-1";
+        readonly groupMargin: "mt-4 first:mt-0";
+    };
+    readonly default: {
+        readonly trigger: "h-10 text-md px-4 gap-2";
+        readonly link: "h-10 text-md px-4 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-10";
+        readonly collapsedWidth: 64;
+        readonly dropdownLink: "px-3 py-2 text-md gap-2";
+        readonly subLink: "h-10 text-md pl-10 pr-4 gap-2";
+        readonly groupLabel: "text-xs px-4 mb-1.5";
+        readonly groupMargin: "mt-5 first:mt-0";
+    };
+    readonly lg: {
+        readonly trigger: "h-12 text-base px-6 gap-2";
+        readonly link: "h-12 text-base px-6 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-12";
+        readonly collapsedWidth: 72;
+        readonly dropdownLink: "px-3 py-2.5 text-base gap-2";
+        readonly subLink: "h-12 text-base pl-12 pr-6 gap-2";
+        readonly groupLabel: "text-xs px-4 mb-2";
+        readonly groupMargin: "mt-6 first:mt-0";
+    };
+};
+interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size of the menu items */
+    size?: 'sm' | 'md' | 'default' | 'lg';
+    /** Vertical only: show icons only (collapsed sidebar) */
+    collapsed?: boolean;
+    /** Vertical only: sidebar width (default: 256px / 16rem) */
+    width?: number | string;
+    /** Vertical only: collapsed sidebar width (default: 64px / 4rem) */
+    collapsedWidth?: number | string;
+    /** Border radius for dropdown content and items */
+    radius?: NavigationMenuRadius;
+    /** Font weight for menu items (default: normal, active items always use semibold) */
+    fontWeight?: 'normal' | 'semibold';
+    /** Horizontal only: delay before hover opens in ms */
+    delayDuration?: number;
+    /** Horizontal only: skip delay when moving between triggers */
+    skipDelayDuration?: number;
+    /** Controlled active menu item value */
+    value?: string;
+    /** Default active menu item value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when active item changes */
+    onValueChange?: (value: string) => void;
+}
+interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
+}
+declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /** Value identifier for Radix (horizontal mode) */
+    value?: string;
+    /** Vertical only: default open state for sub-menu */
+    defaultOpen?: boolean;
+}
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon displayed before the label */
+    icon?: React.ReactNode;
+    /** Custom chevron icon (default: built-in ChevronDown for horizontal, ChevronRight for vertical) */
+    chevronIcon?: React.ReactNode;
+}
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Whether the link represents the current page */
+    active?: boolean;
+    /** Compose with custom link component (Radix Slot) */
+    asChild?: boolean;
+    /** Icon displayed before the label */
+    icon?: React.ReactNode;
+}
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface NavigationMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Group header label */
+    label?: string;
+}
+declare const NavigationMenuGroup: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Active indicator dot color (default: dark/foreground, primary: brand color) */
+    color?: 'default' | 'primary';
+}
+declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>> & {
+    List: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+    Trigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Link: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+    Viewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
+};
+declare namespace NavigationMenu {
+    type ListProps = NavigationMenuListProps;
+    type ItemProps = NavigationMenuItemProps;
+    type TriggerProps = NavigationMenuTriggerProps;
+    type ContentProps = NavigationMenuContentProps;
+    type LinkProps = NavigationMenuLinkProps;
+    type GroupProps = NavigationMenuGroupProps;
+    type IndicatorProps = NavigationMenuIndicatorProps;
+    type ViewportProps = NavigationMenuViewportProps;
+}
+
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, navigationMenuSizeMap };

package/dist/components/ui/navigation-menu.js

@@ -0,0 +1,531 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var navigation_menu_exports = {};
+__export(navigation_menu_exports, {
+  NavigationMenu: () => NavigationMenu,
+  NavigationMenuContent: () => NavigationMenuContent,
+  NavigationMenuGroup: () => NavigationMenuGroup,
+  NavigationMenuIndicator: () => NavigationMenuIndicator,
+  NavigationMenuItem: () => NavigationMenuItem,
+  NavigationMenuLink: () => NavigationMenuLink,
+  NavigationMenuList: () => NavigationMenuList,
+  NavigationMenuTrigger: () => NavigationMenuTrigger,
+  NavigationMenuViewport: () => NavigationMenuViewport,
+  navigationMenuSizeMap: () => navigationMenuSizeMap
+});
+module.exports = __toCommonJS(navigation_menu_exports);
+var React = __toESM(require("react"));
+var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"));
+var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_utils = require("../../lib/utils");
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ React.createElement("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }));
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ React.createElement("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }));
+}
+const contentRadiusMap = {
+  sm: "rounded",
+  // 4px
+  md: "rounded-md",
+  // 6px
+  lg: "rounded-lg",
+  // 8px
+  xl: "rounded-xl"
+  // 12px
+};
+const itemRadiusMap = {
+  sm: "rounded-sm",
+  // 2px
+  md: "rounded",
+  // 4px
+  lg: "rounded-md",
+  // 6px
+  xl: "rounded-lg"
+  // 8px
+};
+const NavigationMenuContext = React.createContext({
+  orientation: "horizontal",
+  size: "default",
+  collapsed: false,
+  radius: "lg",
+  fontWeight: "normal"
+});
+const useNavigationMenuContext = () => React.useContext(NavigationMenuContext);
+const ContentLevelContext = React.createContext(false);
+const navigationMenuSizeMap = {
+  sm: {
+    trigger: "h-8 text-sm px-3 gap-2",
+    link: "h-8 text-sm px-3 gap-2",
+    icon: "icon-xs",
+    collapsedSquare: "size-8",
+    collapsedWidth: 56,
+    dropdownLink: "px-3 py-1.5 text-sm gap-2",
+    subLink: "h-8 text-sm pl-8 pr-3 gap-2",
+    groupLabel: "text-2xs px-3 mb-1",
+    groupMargin: "mt-4 first:mt-0"
+  },
+  md: {
+    trigger: "h-9 text-md px-3.5 gap-2",
+    link: "h-9 text-md px-3.5 gap-2",
+    icon: "icon-sm",
+    collapsedSquare: "size-9",
+    collapsedWidth: 60,
+    dropdownLink: "px-3 py-1.5 text-md gap-2",
+    subLink: "h-9 text-md pl-9 pr-3.5 gap-2",
+    groupLabel: "text-xs px-3.5 mb-1",
+    groupMargin: "mt-4 first:mt-0"
+  },
+  default: {
+    trigger: "h-10 text-md px-4 gap-2",
+    link: "h-10 text-md px-4 gap-2",
+    icon: "icon-sm",
+    collapsedSquare: "size-10",
+    collapsedWidth: 64,
+    dropdownLink: "px-3 py-2 text-md gap-2",
+    subLink: "h-10 text-md pl-10 pr-4 gap-2",
+    groupLabel: "text-xs px-4 mb-1.5",
+    groupMargin: "mt-5 first:mt-0"
+  },
+  lg: {
+    trigger: "h-12 text-base px-6 gap-2",
+    link: "h-12 text-base px-6 gap-2",
+    icon: "icon-sm",
+    collapsedSquare: "size-12",
+    collapsedWidth: 72,
+    dropdownLink: "px-3 py-2.5 text-base gap-2",
+    subLink: "h-12 text-base pl-12 pr-6 gap-2",
+    groupLabel: "text-xs px-4 mb-2",
+    groupMargin: "mt-6 first:mt-0"
+  }
+};
+const NavigationMenuRoot = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    size = "default",
+    collapsed = false,
+    width,
+    collapsedWidth,
+    radius = "lg",
+    fontWeight = "normal",
+    delayDuration = 200,
+    skipDelayDuration = 300,
+    value,
+    defaultValue,
+    onValueChange,
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(
+      () => ({ orientation, size, collapsed: orientation === "vertical" ? collapsed : false, radius, fontWeight }),
+      [orientation, size, collapsed, radius, fontWeight]
+    );
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(NavigationMenuContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Root,
+        {
+          ref,
+          className: (0, import_utils.cn)("relative", className),
+          delayDuration,
+          skipDelayDuration,
+          value,
+          defaultValue: defaultValue ?? "",
+          onValueChange
+        },
+        children
+      ));
+    }
+    const resolvedWidth = collapsed ? collapsedWidth ?? navigationMenuSizeMap[size].collapsedWidth : width ?? 256;
+    const widthValue = typeof resolvedWidth === "number" ? `${resolvedWidth}px` : resolvedWidth;
+    return /* @__PURE__ */ React.createElement(NavigationMenuContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+      "nav",
+      {
+        ref,
+        "aria-label": "navigation",
+        className: (0, import_utils.cn)(
+          "flex flex-col",
+          "transition-[width] duration-normal ease-out",
+          className
+        ),
+        style: { width: widthValue, ...style },
+        ...props
+      },
+      children
+    ));
+  }
+);
+NavigationMenuRoot.displayName = "NavigationMenu";
+const NavigationMenuList = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { orientation } = useNavigationMenuContext();
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.List,
+        {
+          ref,
+          className: (0, import_utils.cn)("flex items-center gap-1", className),
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        ref,
+        className: (0, import_utils.cn)("flex flex-col gap-0.5", className),
+        ...props
+      },
+      children
+    );
+  }
+);
+NavigationMenuList.displayName = "NavigationMenuList";
+const NavigationMenuItem = React.forwardRef(
+  ({ className, value, defaultOpen = false, children, ...props }, ref) => {
+    const { orientation, collapsed } = useNavigationMenuContext();
+    const [open, setOpen] = React.useState(defaultOpen);
+    React.useEffect(() => {
+      if (collapsed) setOpen(false);
+    }, [collapsed]);
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Item,
+        {
+          ref,
+          className: (0, import_utils.cn)("relative", className),
+          value,
+          ...props
+        },
+        children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      CollapsiblePrimitive.Root,
+      {
+        open: collapsed ? false : open,
+        onOpenChange: collapsed ? void 0 : setOpen,
+        asChild: true
+      },
+      /* @__PURE__ */ React.createElement("li", { ref, className: (0, import_utils.cn)("", className), ...props }, children)
+    );
+  }
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+const NavigationMenuTrigger = React.forwardRef(
+  ({ className, children, icon, chevronIcon, ...props }, ref) => {
+    const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    const fwClass = fw === "semibold" ? "font-semibold" : "font-normal";
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Trigger,
+        {
+          ref,
+          className: (0, import_utils.cn)(
+            "group inline-flex items-center justify-center",
+            s.trigger,
+            "gap-0",
+            fwClass,
+            "text-text-muted",
+            "transition-colors duration-fast",
+            "hover:text-foreground",
+            "data-[state=open]:text-foreground",
+            "focus-visible:focus-ring",
+            "disabled:pointer-events-none disabled:opacity-50",
+            className
+          ),
+          ...props
+        },
+        icon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0 mr-2", s.icon) }, icon),
+        children,
+        /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0 ml-1 text-text-subtle transition-transform duration-fast group-data-[state=open]:rotate-180", s.icon) }, chevronIcon ?? /* @__PURE__ */ React.createElement(ChevronDownIcon, { className: "size-full" }))
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      CollapsiblePrimitive.Trigger,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "group flex items-center cursor-pointer",
+          contentRadiusMap[radius],
+          collapsed ? [s.collapsedSquare, "justify-center mx-auto"] : ["w-full", s.trigger],
+          fwClass,
+          "text-text-muted transition-colors duration-fast",
+          "hover:text-foreground hover:bg-background-muted",
+          !collapsed && "data-[state=open]:text-foreground",
+          "focus-visible:focus-ring",
+          "disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...collapsed && typeof children === "string" ? { title: children } : {},
+        ...props
+      },
+      icon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0", s.icon) }, icon),
+      !collapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex-1 text-left truncate" }, children), /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: (0, import_utils.cn)(
+            "shrink-0 text-text-subtle transition-transform duration-normal",
+            s.icon,
+            "group-data-[state=open]:rotate-90"
+          )
+        },
+        chevronIcon ?? /* @__PURE__ */ React.createElement(ChevronRightIcon, { className: "size-full" })
+      ))
+    );
+  }
+);
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+const NavigationMenuContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { orientation, size, collapsed, radius } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ React.createElement(ContentLevelContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Content,
+        {
+          ref,
+          className: (0, import_utils.cn)(
+            "absolute left-0 top-full z-dropdown pt-1",
+            "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+            className
+          ),
+          ...props
+        },
+        /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("min-w-[180px] border border-border bg-background shadow-lg p-1.5 grid gap-0.5", contentRadiusMap[radius]) }, children)
+      ));
+    }
+    if (collapsed) return null;
+    return /* @__PURE__ */ React.createElement(ContentLevelContext.Provider, { value: true }, /* @__PURE__ */ React.createElement(
+      CollapsiblePrimitive.Content,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "overflow-hidden",
+          "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up"
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+        "flex flex-col gap-0.5 py-1",
+        className
+      ) }, children)
+    ));
+  }
+);
+NavigationMenuContent.displayName = "NavigationMenuContent";
+const NavigationMenuLink = React.forwardRef(
+  ({ className, active, asChild, icon, children, ...props }, ref) => {
+    const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    const fwClass = fw === "semibold" ? "font-semibold" : "font-normal";
+    const inContent = React.useContext(ContentLevelContext);
+    if (orientation === "horizontal") {
+      const { onSelect, ...radixSafeProps } = props;
+      if (inContent) {
+        return /* @__PURE__ */ React.createElement(
+          NavigationMenuPrimitive.Link,
+          {
+            ref,
+            className: (0, import_utils.cn)(
+              "flex items-center w-full",
+              s.dropdownLink,
+              itemRadiusMap[radius],
+              "text-text-muted transition-colors duration-fast",
+              "hover:text-foreground hover:bg-background-muted",
+              active && "text-foreground bg-background-muted font-semibold",
+              "focus-visible:focus-ring",
+              className
+            ),
+            active,
+            asChild,
+            onSelect,
+            ...radixSafeProps
+          },
+          asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, icon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0", s.icon) }, icon), children)
+        );
+      }
+      return /* @__PURE__ */ React.createElement(
+        NavigationMenuPrimitive.Link,
+        {
+          ref,
+          className: (0, import_utils.cn)(
+            "inline-flex items-center justify-center",
+            s.link,
+            fwClass,
+            "text-text-muted",
+            "transition-colors duration-fast",
+            "hover:text-foreground",
+            active && "text-foreground font-semibold",
+            "focus-visible:focus-ring",
+            className
+          ),
+          active,
+          asChild,
+          onSelect,
+          ...radixSafeProps
+        },
+        asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, icon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0", s.icon) }, icon), children)
+      );
+    }
+    const Comp = asChild ? import_react_slot.Slot : "a";
+    if (inContent) {
+      return /* @__PURE__ */ React.createElement(
+        Comp,
+        {
+          ref,
+          className: (0, import_utils.cn)(
+            "flex items-center w-full cursor-pointer",
+            contentRadiusMap[radius],
+            s.subLink,
+            "text-text-muted transition-colors duration-fast",
+            "hover:text-foreground hover:bg-background-muted",
+            active && "text-foreground bg-background-muted font-semibold",
+            "focus-visible:focus-ring",
+            className
+          ),
+          ...active ? { "aria-current": "page" } : {},
+          ...props
+        },
+        icon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0", s.icon) }, icon),
+        !collapsed && children
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "relative flex items-center cursor-pointer",
+          contentRadiusMap[radius],
+          collapsed ? [s.collapsedSquare, "justify-center mx-auto"] : ["w-full", s.link],
+          "text-text-muted transition-colors duration-fast",
+          "hover:text-foreground hover:bg-background-muted",
+          active && "text-foreground bg-background-muted font-semibold",
+          "focus-visible:focus-ring",
+          className
+        ),
+        ...active ? { "aria-current": "page" } : {},
+        ...collapsed && typeof children === "string" ? { title: children } : {},
+        ...props
+      },
+      icon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)("shrink-0", s.icon) }, icon),
+      !collapsed && /* @__PURE__ */ React.createElement("span", { className: "truncate" }, children)
+    );
+  }
+);
+NavigationMenuLink.displayName = "NavigationMenuLink";
+const NavigationMenuGroup = React.forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    const { size, collapsed } = useNavigationMenuContext();
+    const s = navigationMenuSizeMap[size];
+    return /* @__PURE__ */ React.createElement("div", { ref, role: "group", className: (0, import_utils.cn)(label && !collapsed && s.groupMargin, className), ...props }, label && !collapsed && /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+      "font-semibold text-text-subtle uppercase tracking-wider select-none",
+      s.groupLabel
+    ) }, label), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-0.5" }, children));
+  }
+);
+NavigationMenuGroup.displayName = "NavigationMenuGroup";
+const NavigationMenuIndicator = React.forwardRef(
+  ({ className, color = "default", ...props }, ref) => {
+    const { orientation } = useNavigationMenuContext();
+    if (orientation === "vertical") return null;
+    return /* @__PURE__ */ React.createElement(
+      NavigationMenuPrimitive.Indicator,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "z-10 flex h-[3px] items-end justify-center overflow-hidden",
+          "transition-[width,transform] duration-normal ease-out",
+          "data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out",
+          className
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+        "relative h-full w-full rounded-full",
+        color === "default" ? "bg-foreground" : "bg-primary"
+      ) })
+    );
+  }
+);
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+const NavigationMenuViewport = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useNavigationMenuContext();
+    if (orientation === "vertical") return null;
+    return /* @__PURE__ */ React.createElement("div", { className: "absolute left-0 top-full z-dropdown w-auto pt-1" }, /* @__PURE__ */ React.createElement(
+      NavigationMenuPrimitive.Viewport,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "relative overflow-hidden",
+          "border border-border bg-background rounded-xl shadow-lg",
+          "h-[var(--radix-navigation-menu-viewport-height)]",
+          "w-[var(--radix-navigation-menu-viewport-width)]",
+          "transition-[width,height] duration-fast ease-out",
+          "data-[state=open]:animate-nav-viewport-enter",
+          "data-[state=closed]:animate-nav-viewport-exit",
+          className
+        ),
+        ...props
+      }
+    ));
+  }
+);
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+const NavigationMenu = Object.assign(NavigationMenuRoot, {
+  List: NavigationMenuList,
+  Item: NavigationMenuItem,
+  Trigger: NavigationMenuTrigger,
+  Content: NavigationMenuContent,
+  Link: NavigationMenuLink,
+  Group: NavigationMenuGroup,
+  Indicator: NavigationMenuIndicator,
+  Viewport: NavigationMenuViewport
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuGroup,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuSizeMap
+});
+//# sourceMappingURL=navigation-menu.js.map