@cerberus-design/react
Version:
The Cerberus Design React component library.
133 lines (129 loc) • 4.08 kB
JavaScript
;
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/deprecated/NavMenuList.tsx
var NavMenuList_exports = {};
__export(NavMenuList_exports, {
NavMenuList: () => NavMenuList,
getPosition: () => getPosition
});
module.exports = __toCommonJS(NavMenuList_exports);
var import_react2 = require("react");
var import_css2 = require("styled-system/css");
var import_patterns = require("styled-system/patterns");
// src/context/navMenu.tsx
var import_css = require("styled-system/css");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var NavMenuContext = (0, import_react.createContext)(null);
function useNavMenuContext() {
const context = (0, import_react.useContext)(NavMenuContext);
if (!context) {
throw new Error("useNavMenuContext must be used within a NavMenu.");
}
return context;
}
// src/components/show/show.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function Show(props) {
const { when, children, fallback } = props;
if (when) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
}
if (fallback) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
}
return null;
}
// src/components/deprecated/NavMenuList.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function getPosition(position) {
const defaultPositions = {
left: "auto",
right: "auto",
top: "auto",
bottom: "auto"
};
switch (position) {
case "right":
return { ...defaultPositions, top: "0%", left: "105%" };
case "left":
return { ...defaultPositions, top: "0%", right: "105%" };
case "bottom":
return { ...defaultPositions, top: "110%" };
case "top":
return { ...defaultPositions, bottom: "110%" };
default:
return defaultPositions;
}
}
var navListStyles = (0, import_patterns.vstack)({
alignItems: "flex-start",
bgColor: "page.surface.100",
boxShadow: "lg",
gap: "2",
opacity: "0",
p: "4",
position: "absolute",
rounded: "md",
zIndex: "dropdown",
_motionSafe: {
animationName: "zoomIn",
animationDelay: "100ms",
animationDuration: "150ms",
animationFillMode: "both",
animationTimingFunction: "ease-in-out"
},
_positionBottom: {
transformOrigin: "top left"
},
_positionTop: {
transformOrigin: "bottom left"
},
_positionLeft: {
transformOrigin: "top right"
},
_positionRight: {
transformOrigin: "top left"
}
});
function NavMenuList(props) {
const { position, ...nativeProps } = props;
const { menuRef, expanded } = useNavMenuContext();
const locationStyles = (0, import_react2.useMemo)(
() => getPosition(position ?? "bottom"),
[position]
);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: expanded, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"ul",
{
...nativeProps,
"data-position": position ?? "bottom",
className: (0, import_css2.cx)(nativeProps.className, navListStyles),
ref: menuRef,
style: locationStyles
}
) });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
NavMenuList,
getPosition
});
//# sourceMappingURL=NavMenuList.cjs.map