lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
132 lines • 8.71 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavigationMenuViewport = exports.NavigationMenuIndicator = exports.NavigationMenuLink = exports.NavigationMenuTrigger = exports.NavigationMenuContent = exports.NavigationMenuItem = exports.NavigationMenuList = exports.NavigationMenu = exports.navigationMenuTriggerStyle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const lucide_react_1 = require("lucide-react");
const utils_1 = require("@/components/lib/utils");
const NavigationMenuContext = React.createContext(undefined);
const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => {
const [open, setOpen] = React.useState({});
const [activeItem, setActiveItem] = React.useState(null);
const toggleMenu = React.useCallback((id) => {
setOpen((prev) => ({
...prev,
[id]: !prev[id],
}));
}, []);
return ((0, jsx_runtime_1.jsx)(NavigationMenuContext.Provider, { value: { open, activeItem, toggleMenu, setActiveItem }, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)("relative z-10 flex max-w-max flex-1 items-center justify-center", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(NavigationMenuViewport, {})] }) }));
});
exports.NavigationMenu = NavigationMenu;
NavigationMenu.displayName = "NavigationMenu";
const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)("ul", { ref: ref, className: (0, utils_1.cn)("group flex flex-1 list-none items-center justify-center space-x-1", className), ...props })));
exports.NavigationMenuList = NavigationMenuList;
NavigationMenuList.displayName = "NavigationMenuList";
const NavigationMenuItem = React.forwardRef(({ className, value, ...props }, ref) => {
return ((0, jsx_runtime_1.jsx)("li", { ref: ref, className: (0, utils_1.cn)("relative", className), "data-value": value, ...props }));
});
exports.NavigationMenuItem = NavigationMenuItem;
NavigationMenuItem.displayName = "NavigationMenuItem";
// Trigger style
const navigationMenuTriggerStyle = () => {
return "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50";
};
exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
const NavigationMenuTrigger = React.forwardRef(({ className, children, id, ...props }, ref) => {
// --- FIX START ---
// 1. Call useId unconditionally to get a fallback ID.
const generatedId = React.useId();
// 2. Use the provided id prop, or fall back to the generated one.
const menuId = id || generatedId;
// --- FIX END ---
const ctx = React.useContext(NavigationMenuContext);
if (!ctx) {
throw new Error("NavigationMenuTrigger must be used within NavigationMenu");
}
const { open, toggleMenu } = ctx;
const isOpen = open[menuId] || false;
return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, utils_1.cn)(navigationMenuTriggerStyle(), "group", className), onClick: () => toggleMenu(menuId), "aria-expanded": isOpen, "aria-controls": `nav-menu-${menuId}`, "data-state": isOpen ? "open" : "closed", ...props, children: [children, " ", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
});
exports.NavigationMenuTrigger = NavigationMenuTrigger;
NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
const NavigationMenuContent = React.forwardRef(({ className, children, id, forceMount = false, ...props }, ref) => {
// --- FIX START ---
// 1. Call useId unconditionally to get a fallback ID.
const generatedId = React.useId();
// 2. Use the provided id prop, or fall back to the generated one.
const menuId = id || generatedId;
// --- FIX END ---
const ctx = React.useContext(NavigationMenuContext);
if (!ctx) {
throw new Error("NavigationMenuContent must be used within NavigationMenu");
}
const { open } = ctx;
const isOpen = open[menuId] || false;
if (!isOpen && !forceMount)
return null;
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("absolute left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto", className), id: `nav-menu-${menuId}`, "data-state": isOpen ? "open" : "closed", ...props, children: children }));
});
exports.NavigationMenuContent = NavigationMenuContent;
NavigationMenuContent.displayName = "NavigationMenuContent";
const NavigationMenuLink = React.forwardRef(({ className, children, ...props }, ref) => {
return ((0, jsx_runtime_1.jsx)("a", { ref: ref, className: (0, utils_1.cn)(navigationMenuTriggerStyle(), className), ...props, children: children }));
});
exports.NavigationMenuLink = NavigationMenuLink;
NavigationMenuLink.displayName = "NavigationMenuLink";
const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => {
const viewportRef = React.useRef(null);
const ctx = React.useContext(NavigationMenuContext);
if (!ctx) {
return null;
}
const hasOpenMenu = Object.values(ctx.open).some(Boolean);
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("absolute left-0 top-full flex justify-center"), children: (0, jsx_runtime_1.jsx)("div", { ref: viewportRef, className: (0, utils_1.cn)("origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]", !hasOpenMenu && "hidden", className), ...props }) }));
});
exports.NavigationMenuViewport = NavigationMenuViewport;
NavigationMenuViewport.displayName = "NavigationMenuViewport";
const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => {
const ctx = React.useContext(NavigationMenuContext);
if (!ctx) {
return null;
}
const hasActiveItem = !!ctx.activeItem;
if (!hasActiveItem)
return null;
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className), "data-state": hasActiveItem ? "visible" : "hidden", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-background shadow-md" }) }));
});
exports.NavigationMenuIndicator = NavigationMenuIndicator;
NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
//# sourceMappingURL=navigation-menu.js.map