@sikka/hawa/dist/navigationMenu/index.mjs

Modern UI Kit made with Tailwind

"use client";

// elements/navigationMenu/NavigationMenu.tsx
import * as React from "react";
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";

// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
  return twMerge(clsx(inputs));
}

// elements/navigationMenu/NavigationMenu.tsx
import { cva } from "class-variance-authority";
var navigationMenuTriggerStyle = cva(
  "hawa-group hawa-inline-flex hawa-h-10 hawa-w-max hawa-items-center hawa-gap-1 hawa-justify-center hawa-rounded-md hawa-bg-background hawa-px-4 hawa-py-2 hawa-text-sm hawa-font-medium hawa-transition-colors hover:hawa-bg-accent hover:hawa-text-accent-foreground focus:hawa-bg-accent focus:hawa-text-accent-foreground focus:hawa-outline-none disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[active]:hawa-bg-accent/50 "
);
var NavigationMenuRoot = React.forwardRef(({ className, children, viewportClassNames, ...props }, ref) => /* @__PURE__ */ React.createElement(
  NavigationMenuPrimitive.Root,
  {
    ref,
    className: cn(
      "hawa-relative hawa-z-10 hawa-flex hawa-flex-1 hawa-items-center hawa-justify-center",
      // "hawa-max-w-max",
      className
    ),
    ...props
  },
  children,
  /* @__PURE__ */ React.createElement(NavigationMenuViewport, { className: viewportClassNames })
));
var NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  NavigationMenuPrimitive.List,
  {
    ref,
    className: cn(
      "hawa-group hawa-flex hawa-flex-1 hawa-list-none hawa-items-center hawa-justify-center hawa-gap-1",
      className
    ),
    ...props
  }
));
var NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
  NavigationMenuPrimitive.Trigger,
  {
    ref,
    className: cn(navigationMenuTriggerStyle(), "hawa-group", className),
    ...props
  },
  children,
  /* @__PURE__ */ React.createElement(
    "svg",
    {
      "aria-label": "Chevron Icon",
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      "aria-hidden": "true",
      className: "hawa-icon hawa-relative hawa-top-[1px] hawa-transition hawa-duration-200 group-data-[state=open]:hawa-rotate-180"
    },
    /* @__PURE__ */ React.createElement("path", { d: "m6 9 6 6 6-6" })
  )
));
var NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  NavigationMenuPrimitive.Content,
  {
    ref,
    className: cn(
      "hawa-absolute hawa-left-0 hawa-top-0 hawa-w-full hawa-rounded",
      // "md:hawa-absolute md:hawa-w-auto  hawa-left-0 hawa-top-0 ",
      //   animation
      "data-[motion^=from-]:hawa-animate-in data-[motion^=to-]:hawa-animate-out data-[motion^=from-]:hawa-fade-in data-[motion^=to-]:hawa-fade-out data-[motion=from-end]:hawa-slide-in-from-right-52 data-[motion=from-start]:hawa-slide-in-from-left-52 data-[motion=to-end]:hawa-slide-out-to-right-52 data-[motion=to-start]:hawa-slide-out-to-left-52",
      className
    ),
    ...props
  }
));
var StandardNavigationMenuItem = ({ icon, title, subtitle, ...linkProps }) => /* @__PURE__ */ React.createElement(NavigationMenuLink, { ...linkProps }, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-max-w-md hawa-cursor-pointer hawa-flex-row hawa-items-center hawa-gap-4 hawa-rounded-inner hawa-p-4 hawa-py-2 hawa-transition-all hover:hawa-bg-muted" }, icon && icon, /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col" }, /* @__PURE__ */ React.createElement("h1", { className: "hawa-text-xl hawa-font-bold" }, title), /* @__PURE__ */ React.createElement("p", { className: "hawa-text-sm" }, subtitle))));
var NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  "div",
  {
    className: cn(
      "hawa-absolute hawa-top-full hawa-flex hawa-w-full hawa-justify-center"
    )
  },
  /* @__PURE__ */ React.createElement(
    NavigationMenuPrimitive.Viewport,
    {
      className: cn(
        "hawa-origin-top-center hawa-relative hawa-mt-1.5 hawa-w-full hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-lg data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-90",
        // hawa-h-[var(--radix-navigation-menu-viewport-height)]
        // "md:hawa-w-[var(--radix-navigation-menu-viewport-width)]",
        className
      ),
      style: {
        height: "calc(var(--radix-navigation-menu-viewport-height) + 1px)"
      },
      ref,
      ...props
    }
  )
));
var NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
  NavigationMenuPrimitive.Indicator,
  {
    ref,
    className: cn(
      "hawa-top-full hawa-z-[1] hawa-flex hawa-h-1.5 hawa-items-end hawa-justify-center hawa-overflow-hidden data-[state=visible]:hawa-animate-in data-[state=hidden]:hawa-animate-out data-[state=hidden]:hawa-fade-out data-[state=visible]:hawa-fade-in",
      className
    ),
    ...props
  },
  /* @__PURE__ */ React.createElement("div", { className: "hawa-relative hawa-top-[60%] hawa-h-2 hawa-w-2 hawa-rotate-45 hawa-rounded-tl-sm hawa-bg-border hawa-shadow-md" })
));
var NavigationMenu = ({
  viewportClassNames,
  rootClassNames,
  triggerClassNames,
  actionFirst,
  ...props
}) => {
  return /* @__PURE__ */ React.createElement(
    NavigationMenuRoot,
    {
      dir: props.direction,
      delayDuration: 0,
      className: rootClassNames,
      viewportClassNames
    },
    /* @__PURE__ */ React.createElement(NavigationMenuList, null, props.items.map((item, i) => /* @__PURE__ */ React.createElement(NavigationMenuItem, { key: i }, item.content ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(NavigationMenuTrigger, { className: cn(triggerClassNames) }, item.trigger), /* @__PURE__ */ React.createElement(NavigationMenuContent, null, item.content)) : /* @__PURE__ */ React.createElement(
      NavigationMenuLink,
      {
        href: actionFirst ? void 0 : item.path,
        onClick: () => {
          if (item.action) {
            item.action();
          }
        },
        className: cn(
          navigationMenuTriggerStyle(),
          "hawa-cursor-pointer hawa-select-none",
          triggerClassNames
        )
      },
      item.trigger
    ))))
  );
};
var NavigationMenuItem = NavigationMenuPrimitive.Item;
var NavigationMenuLink = NavigationMenuPrimitive.Link;
NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
NavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName;
NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
export {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuRoot,
  NavigationMenuTrigger,
  NavigationMenuViewport,
  StandardNavigationMenuItem,
  navigationMenuTriggerStyle
};
//# sourceMappingURL=index.mjs.map