@sikka/hawa
Version:
Modern UI Kit made with Tailwind
223 lines (219 loc) • 10 kB
JavaScript
"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);
// elements/navigationMenu/index.ts
var navigationMenu_exports = {};
__export(navigationMenu_exports, {
NavigationMenu: () => NavigationMenu,
NavigationMenuContent: () => NavigationMenuContent,
NavigationMenuIndicator: () => NavigationMenuIndicator,
NavigationMenuItem: () => NavigationMenuItem,
NavigationMenuLink: () => NavigationMenuLink,
NavigationMenuList: () => NavigationMenuList,
NavigationMenuRoot: () => NavigationMenuRoot,
NavigationMenuTrigger: () => NavigationMenuTrigger,
NavigationMenuViewport: () => NavigationMenuViewport,
StandardNavigationMenuItem: () => StandardNavigationMenuItem,
navigationMenuTriggerStyle: () => navigationMenuTriggerStyle
});
module.exports = __toCommonJS(navigationMenu_exports);
// elements/navigationMenu/NavigationMenu.tsx
var React = __toESM(require("react"));
var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"));
// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// elements/navigationMenu/NavigationMenu.tsx
var import_class_variance_authority = require("class-variance-authority");
var navigationMenuTriggerStyle = (0, import_class_variance_authority.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;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuRoot,
NavigationMenuTrigger,
NavigationMenuViewport,
StandardNavigationMenuItem,
navigationMenuTriggerStyle
});
//# sourceMappingURL=index.js.map