{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "type": "registry:block",
  "title": "Navigation Menu",
  "description": "A horizontal navigation bar with dropdown menus, mega menus, icons, descriptions, nested submenus, and a compact variant. Built with compound components for flexible composition.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react",
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/navigation-menu.tsx",
      "type": "registry:component",
      "target": "@components/wensity/navigation-menu.tsx",
      "content": "\"use client\";\n\n/**\n * Navigation Menu — Base UI Navigation Menu foundation (Phase 5).\n * Shared overlay surface (Portal/Positioner/Popup/Viewport) is rendered\n * by the Root wrapper; per-item Content mounts inside the shared Viewport.\n *\n * Panels use solid `--primitive-surface-overlay` + `--primitive-shadow-overlay`\n * + `--primitive-radius-surface`. Item hover uses `--primitive-surface-hover`,\n * descriptions the muted-foreground role. Positioner: z `--primitive-z-popover`,\n * collisionPadding 12. Viewport transition CSS-driven and RM-gated.\n *\n * D-17: asChild patterns migrated to Base UI's `render` prop.\n *\n * Sub-menu family (Sub / SubTrigger / SubContent) stays custom — Base UI\n * Navigation Menu has no built-in submenu API. Preserved for API compat.\n */\n\nimport * as React from \"react\";\nimport { NavigationMenu as BaseNav } from \"@base-ui/react/navigation-menu\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { IconChevronDown, IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ─── Types ─────────────────────────────────────────────────── */\n\nexport type NavigationMenuSize = \"default\" | \"compact\";\nexport type NavigationMenuAlign = \"start\" | \"center\" | \"end\";\n\nexport interface NavigationMenuProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseNav.Root>,\n    \"value\" | \"defaultValue\" | \"onValueChange\" | \"delay\"\n  > {\n  size?: NavigationMenuSize;\n  /** Delay in ms before opening a menu on hover. Default 120. */\n  delayDuration?: number;\n  /**\n   * @deprecated Base UI owns the hover bridge/close timing; kept for API compat.\n   */\n  skipDelayOnSwitch?: boolean;\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (value: string | null) => void;\n}\n\nexport interface NavigationMenuListProps\n  extends React.ComponentPropsWithoutRef<typeof BaseNav.List> {}\n\nexport interface NavigationMenuItemProps\n  extends React.ComponentPropsWithoutRef<typeof BaseNav.Item> {}\n\nexport interface NavigationMenuTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof BaseNav.Trigger> {\n  /** Whether to show a chevron indicator. Default true. */\n  showChevron?: boolean;\n}\n\nexport interface NavigationMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof BaseNav.Content> {\n  /** Force a specific width. Use for mega menus (e.g. \"w-[48rem]\"). */\n  width?: string;\n  /**\n   * @deprecated Base UI Navigation Menu uses a shared Viewport with\n   * automatic alignment; per-content align is not supported.\n   */\n  align?: NavigationMenuAlign;\n}\n\nexport interface NavigationMenuLinkProps\n  extends React.ComponentPropsWithoutRef<typeof BaseNav.Link> {\n  asChild?: boolean;\n}\n\nexport interface NavigationMenuIconProps\n  extends React.ComponentPropsWithoutRef<typeof BaseNav.Icon> {}\n\nexport interface NavigationMenuDescriptionProps\n  extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport interface NavigationMenuSubProps {\n  children: React.ReactNode;\n}\n\nexport interface NavigationMenuSubTriggerProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport interface NavigationMenuSubContentProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface NavigationMenuGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface NavigationMenuGroupHeadingProps\n  extends React.HTMLAttributes<HTMLHeadingElement> {}\n\n/* ─── Density context ───────────────────────────────────────── */\n\nconst NavigationMenuSizeContext =\n  React.createContext<NavigationMenuSize>(\"default\");\nconst useNavSize = () => React.useContext(NavigationMenuSizeContext);\n\n/* ─── Constants ─────────────────────────────────────────────── */\n\nconst EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];\n\nconst overlaySurfaceClass = cn(\n  \"border border-[var(--border)] bg-[var(--primitive-surface-overlay)] text-[var(--foreground)]\",\n  \"[box-shadow:var(--primitive-shadow-overlay)]\",\n);\n\nconst popupMotionClass = cn(\n  \"origin-[var(--transform-origin)] transform-gpu outline-none\",\n  \"transition-[opacity,scale] duration-[180ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"data-[ending-style]:duration-[120ms]\",\n  \"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0\",\n  \"data-[starting-style]:scale-[0.96] data-[ending-style]:scale-[0.96]\",\n  \"motion-reduce:transition-none motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100\",\n);\n\nconst viewportMotionClass = cn(\n  \"relative overflow-hidden\",\n  \"transition-[width,height] duration-[220ms] ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))]\",\n  \"motion-reduce:transition-none\",\n);\n\n/* ─── <NavigationMenu> ──────────────────────────────────────── */\n\nexport const NavigationMenu = React.forwardRef<\n  HTMLElement,\n  NavigationMenuProps\n>(function NavigationMenu(\n  {\n    size = \"default\",\n    delayDuration = 120,\n    skipDelayOnSwitch: _skipDelayOnSwitch,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    className,\n    children,\n    \"aria-label\": ariaLabel = \"Main navigation\",\n    ...props\n  },\n  ref,\n) {\n  const handleValueChange = React.useMemo(\n    () =>\n      onValueChange\n        ? (v: unknown) => onValueChange((v ?? null) as string | null)\n        : undefined,\n    [onValueChange],\n  );\n\n  return (\n    <NavigationMenuSizeContext.Provider value={size}>\n      <BaseNav.Root data-wensity-primitive=\"\"\n        ref={ref as React.Ref<HTMLElement>}\n        delay={delayDuration}\n        value={valueProp as never}\n        defaultValue={defaultValue as never}\n        onValueChange={handleValueChange as never}\n        data-size={size}\n        aria-label={ariaLabel}\n        className={cn(\"relative\", className)}\n        {...props}\n      >\n        {children}\n        <BaseNav.Portal>\n          <BaseNav.Positioner\n            collisionPadding={12}\n            sideOffset={8}\n            className=\"z-[var(--primitive-z-popover)] outline-none\"\n          >\n            <BaseNav.Popup data-wensity-primitive=\"\"\n              className={cn(\n                overlaySurfaceClass,\n                \"rounded-[var(--primitive-radius-surface)]\",\n                popupMotionClass,\n              )}\n            >\n              <BaseNav.Viewport className={viewportMotionClass} />\n            </BaseNav.Popup>\n          </BaseNav.Positioner>\n        </BaseNav.Portal>\n      </BaseNav.Root>\n    </NavigationMenuSizeContext.Provider>\n  );\n});\n\n/* ─── <NavigationMenuList> ──────────────────────────────────── */\n\nexport const NavigationMenuList = React.forwardRef<\n  HTMLUListElement,\n  NavigationMenuListProps\n>(function NavigationMenuList({ className, ...props }, ref) {\n  const size = useNavSize();\n  return (\n    <BaseNav.List\n      ref={ref}\n      className={cn(\n        \"flex list-none items-center\",\n        size === \"compact\" ? \"gap-0.5\" : \"gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n/* ─── <NavigationMenuItem> ──────────────────────────────────── */\n\nexport const NavigationMenuItem = React.forwardRef<\n  HTMLLIElement,\n  NavigationMenuItemProps\n>(function NavigationMenuItem({ className, ...props }, ref) {\n  return (\n    <BaseNav.Item\n      ref={ref}\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n});\n\n/* ─── <NavigationMenuTrigger> ───────────────────────────────── */\n\nexport const NavigationMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  NavigationMenuTriggerProps\n>(function NavigationMenuTrigger(\n  { className, showChevron = true, children, ...props },\n  ref,\n) {\n  const size = useNavSize();\n  return (\n    <BaseNav.Trigger\n      ref={ref}\n      className={cn(\n        \"group/nav-item relative inline-flex select-none items-center gap-1.5 rounded-[var(--primitive-radius-item)] font-medium outline-none\",\n        \"transition-colors duration-100 ease-out motion-reduce:transition-none\",\n        \"text-[var(--primitive-text-secondary)]\",\n        \"hover:text-[var(--foreground)] hover:bg-[var(--primitive-surface-hover)]\",\n        \"data-[popup-open]:text-[var(--foreground)]\",\n        \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n        \"active:scale-[0.97] motion-reduce:active:scale-100\",\n        size === \"compact\"\n          ? \"px-2.5 py-1.5 text-[13px]\"\n          : \"px-3 py-2 text-[14px]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showChevron && (\n        <IconChevronDown\n          size={size === \"compact\" ? 12 : 14}\n          stroke={2}\n          className={cn(\n            \"shrink-0 text-[var(--muted-foreground)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n            \"group-data-[popup-open]/nav-item:rotate-180\",\n          )}\n        />\n      )}\n    </BaseNav.Trigger>\n  );\n});\n\n/* ─── <NavigationMenuContent> ───────────────────────────────── */\n\nexport const NavigationMenuContent = React.forwardRef<\n  HTMLDivElement,\n  NavigationMenuContentProps\n>(function NavigationMenuContent(\n  { className, width, align: _align, children, ...props },\n  ref,\n) {\n  return (\n    <BaseNav.Content data-wensity-primitive=\"\"\n      ref={ref}\n      className={cn(\"outline-none p-3\", width, className)}\n      {...props}\n    >\n      {children}\n    </BaseNav.Content>\n  );\n});\n\n/* ─── <NavigationMenuLink> ──────────────────────────────────── */\n\nexport const NavigationMenuLink = React.forwardRef<\n  HTMLAnchorElement,\n  NavigationMenuLinkProps\n>(function NavigationMenuLink(\n  { className, asChild, active, children, ...props },\n  ref,\n) {\n  const size = useNavSize();\n  const linkClass = cn(\n    \"group/nav-link inline-flex select-none items-center gap-1.5 rounded-[var(--primitive-radius-item)] font-medium outline-none\",\n    \"transition-colors duration-100 ease-out motion-reduce:transition-none\",\n    \"text-[var(--primitive-text-secondary)]\",\n    \"hover:text-[var(--foreground)] hover:bg-[var(--primitive-surface-hover)]\",\n    \"data-[active]:text-[var(--foreground)]\",\n    \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n    \"active:scale-[0.97] motion-reduce:active:scale-100\",\n    size === \"compact\"\n      ? \"px-2.5 py-1.5 text-[13px]\"\n      : \"px-3 py-2 text-[14px]\",\n    className,\n  );\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <BaseNav.Link\n        ref={ref}\n        active={active}\n        render={children as React.ReactElement}\n        className={linkClass}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <BaseNav.Link\n      ref={ref}\n      active={active}\n      className={linkClass}\n      {...props}\n    >\n      {children}\n    </BaseNav.Link>\n  );\n});\n\n/* ─── <NavigationMenuIcon> ──────────────────────────────────── */\n\nexport const NavigationMenuIcon = React.forwardRef<\n  HTMLSpanElement,\n  NavigationMenuIconProps\n>(function NavigationMenuIcon({ className, ...props }, ref) {\n  const size = useNavSize();\n  return (\n    <BaseNav.Icon\n      ref={ref}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center text-[var(--muted-foreground)]\",\n        \"group-hover/nav-item:text-[var(--foreground)] group-hover/nav-link:text-[var(--foreground)] transition-colors duration-100 motion-reduce:transition-none\",\n        size === \"compact\" ? \"size-4\" : \"size-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n/* ─── <NavigationMenuDescription> ───────────────────────────── */\n\nexport const NavigationMenuDescription = React.forwardRef<\n  HTMLSpanElement,\n  NavigationMenuDescriptionProps\n>(function NavigationMenuDescription({ className, ...props }, ref) {\n  const size = useNavSize();\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"block text-[var(--muted-foreground)] leading-snug\",\n        \"group-hover/nav-link:text-[var(--primitive-text-secondary)] transition-colors duration-100 motion-reduce:transition-none\",\n        size === \"compact\" ? \"text-[11px]\" : \"text-[12px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n/* ─── <NavigationMenuSub> (custom, click-toggle) ────────────── */\n\ntype NavigationMenuSubContextValue = {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentId: string;\n};\n\nconst NavigationMenuSubContext =\n  React.createContext<NavigationMenuSubContextValue | null>(null);\n\nfunction useNavigationMenuSubContext(): NavigationMenuSubContextValue {\n  const ctx = React.useContext(NavigationMenuSubContext);\n  if (!ctx) {\n    throw new Error(\n      \"NavigationMenuSub components must be used within <NavigationMenuSub>\",\n    );\n  }\n  return ctx;\n}\n\nexport function NavigationMenuSub({ children }: NavigationMenuSubProps) {\n  const [open, setOpen] = React.useState(false);\n  const reactId = React.useId();\n  const ctx = React.useMemo<NavigationMenuSubContextValue>(\n    () => ({ open, setOpen, contentId: `nav-sub-${reactId}` }),\n    [open, reactId],\n  );\n\n  return (\n    <NavigationMenuSubContext.Provider value={ctx}>\n      <div className=\"relative\">{children}</div>\n    </NavigationMenuSubContext.Provider>\n  );\n}\nNavigationMenuSub.displayName = \"NavigationMenuSub\";\n\nexport const NavigationMenuSubTrigger = React.forwardRef<\n  HTMLButtonElement,\n  NavigationMenuSubTriggerProps\n>(function NavigationMenuSubTrigger(\n  { className, children, onClick, ...props },\n  ref,\n) {\n  const { open, setOpen, contentId } = useNavigationMenuSubContext();\n  const prefersReducedMotion = useReducedMotion();\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-slot=\"navigation-menu-sub-trigger\"\n      data-state={open ? \"open\" : \"closed\"}\n      aria-expanded={open}\n      aria-controls={contentId}\n      onClick={(e) => {\n        onClick?.(e);\n        if (!e.defaultPrevented) setOpen(!open);\n      }}\n      className={cn(\n        \"relative flex w-full cursor-default select-none items-center gap-2 rounded-[var(--primitive-radius-item)] px-2.5 py-2 text-sm outline-none\",\n        \"transition-colors duration-100 ease-out motion-reduce:transition-none\",\n        \"text-[var(--foreground)]\",\n        \"hover:bg-[var(--primitive-surface-hover)]\",\n        \"data-popup-open:bg-[var(--primitive-surface-hover)] data-open:bg-[var(--primitive-surface-hover)]\",\n        \"focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n        \"active:scale-[0.97] motion-reduce:active:scale-100\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <span className=\"ml-auto flex items-center\">\n        <motion.span\n          aria-hidden=\"true\"\n          animate={{ rotate: open ? 90 : 0 }}\n          transition={\n            prefersReducedMotion\n              ? { duration: 0 }\n              : { duration: 0.18, ease: EASE_OUT }\n          }\n          className=\"flex items-center justify-center text-[var(--muted-foreground)]\"\n        >\n          <IconChevronRight size={14} stroke={2} />\n        </motion.span>\n      </span>\n    </button>\n  );\n});\n\nexport const NavigationMenuSubContent = React.forwardRef<\n  HTMLDivElement,\n  NavigationMenuSubContentProps\n>(function NavigationMenuSubContent(\n  { className, children, ...props },\n  ref,\n) {\n  const { open, contentId } = useNavigationMenuSubContext();\n  const prefersReducedMotion = useReducedMotion();\n\n  // Destructure HTML-only event handlers that conflict with Framer Motion's\n  // drag types to prevent TS2322 when spreading onto motion.div.\n  const {\n    onDrag: _onDrag,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onAnimationStart: _onAnimationStart,\n    ...safeProps\n  } = props;\n\n  return (\n    <AnimatePresence initial={false}>\n      {open && (\n        <motion.div\n          ref={ref}\n          id={contentId}\n          role=\"menu\"\n          data-slot=\"navigation-menu-sub-content\"\n          data-state=\"open\"\n          initial={\n            prefersReducedMotion\n              ? { opacity: 1 }\n              : { opacity: 0, height: 0 }\n          }\n          animate={\n            prefersReducedMotion\n              ? { opacity: 1 }\n              : { opacity: 1, height: \"auto\" }\n          }\n          exit={\n            prefersReducedMotion\n              ? { opacity: 0 }\n              : { opacity: 0, height: 0 }\n          }\n          transition={\n            prefersReducedMotion\n              ? { duration: 0 }\n              : { duration: 0.18, ease: EASE_OUT }\n          }\n          className={cn(\"overflow-hidden pl-4\", className)}\n          {...safeProps}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n});\n\n/* ─── <NavigationMenuGroup> ─────────────────────────────────── */\n\nexport const NavigationMenuGroup = React.forwardRef<\n  HTMLDivElement,\n  NavigationMenuGroupProps\n>(function NavigationMenuGroup({ className, children, ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      data-slot=\"navigation-menu-group\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\n/* ─── <NavigationMenuGroupHeading> ──────────────────────────── */\n\nexport const NavigationMenuGroupHeading = React.forwardRef<\n  HTMLHeadingElement,\n  NavigationMenuGroupHeadingProps\n>(function NavigationMenuGroupHeading({ className, children, ...props }, ref) {\n  return (\n    <h4\n      ref={ref}\n      data-slot=\"navigation-menu-group-heading\"\n      className={cn(\n        \"px-2.5 py-1.5 text-[11px] font-medium tracking-[0.02em] text-[var(--muted-foreground)]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h4>\n  );\n});\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/navigation-menu.tsx. For Pro components and updates, use pnpm dlx wensity@latest add navigation-menu.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "navigation-menu",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/navigation-menu",
      "shadcnUrl": "https://ui.wensity.com/r/navigation-menu",
      "cliInstall": "pnpm dlx wensity@latest add navigation-menu"
    }
  }
}