@vinyasa/navigation 1.0.26

package/dist/cjs/navigation-menu.cjs

@@ -0,0 +1,302 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    NavigationMenu: ()=>NavigationMenu
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_navigation_menu_namespaceObject = require("@radix-ui/react-navigation-menu");
+const icons_namespaceObject = require("@vinyasa/icons");
+const tokens_namespaceObject = require("@vinyasa/tokens");
+const external_react_namespaceObject = require("react");
+var content = 'bzjbii9';
+var contentGrid = 'bzjbiia';
+var contentLink = 'bzjbiib';
+var contentLinkDescription = 'bzjbiid';
+var contentLinkTitle = 'bzjbiic';
+var indicator = 'bzjbii5';
+var NavigationMenu_css_link = 'bzjbii4';
+var list = 'bzjbii1';
+var root = 'bzjbii0';
+var trigger = 'bzjbii2';
+var triggerIcon = 'bzjbii3';
+var viewport = 'bzjbii8';
+var viewportPosition = 'bzjbii6';
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function NavigationMenu_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else NavigationMenu_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys, key, i;
+    if ("u" > typeof Reflect && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (!(excluded.indexOf(key) >= 0)) {
+                if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+            }
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (null == source) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (!(excluded.indexOf(key) >= 0)) {
+            if (Object.prototype.propertyIsEnumerable.call(source, key)) target[key] = source[key];
+        }
+    }
+    return target;
+}
+const NavigationMenuRoot = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className, children } = _ref1, rest = _object_without_properties(_ref1, [
+        "className",
+        "children"
+    ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Root, _object_spread_props(_object_spread({
+        ref: themedRef,
+        className: className ? `${root} ${className}` : root
+    }, rest), {
+        children: children
+    }));
+});
+NavigationMenuRoot.displayName = 'NavigationMenuRoot';
+const NavigationMenuList = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.List, _object_spread({
+        className: className ? `${list} ${className}` : list
+    }, rest));
+};
+NavigationMenuList.displayName = 'NavigationMenuList';
+const NavigationMenuItem = react_navigation_menu_namespaceObject.Item;
+const NavigationMenuTrigger = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { className, children } = _ref1, rest = _object_without_properties(_ref1, [
+        "className",
+        "children"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_navigation_menu_namespaceObject.Trigger, _object_spread_props(_object_spread({
+        ref: ref,
+        className: className ? `${trigger} ${className}` : trigger
+    }, rest), {
+        children: [
+            children,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ChevronDownIcon, {
+                className: triggerIcon,
+                "aria-hidden": true
+            })
+        ]
+    }));
+});
+NavigationMenuTrigger.displayName = 'NavigationMenuTrigger';
+const NavigationMenuLink = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Link, _object_spread({
+        className: className ? `${NavigationMenu_css_link} ${className}` : NavigationMenu_css_link
+    }, rest));
+};
+NavigationMenuLink.displayName = 'NavigationMenuLink';
+const NavigationMenuContent = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Content, _object_spread({
+        className: className ? `${content} ${className}` : content
+    }, rest));
+};
+NavigationMenuContent.displayName = 'NavigationMenuContent';
+const NavigationMenuIndicator = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Indicator, _object_spread({
+        className: className ? `${indicator} ${className}` : indicator
+    }, rest));
+};
+NavigationMenuIndicator.displayName = 'NavigationMenuIndicator';
+const NavigationMenuViewport = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: viewportPosition,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Viewport, _object_spread({
+            className: className ? `${viewport} ${className}` : viewport
+        }, rest))
+    });
+};
+NavigationMenuViewport.displayName = 'NavigationMenuViewport';
+const SimpleLink = ({ href, active, linkComponent: Link, className, children })=>{
+    if (Link) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuLink, {
+        asChild: true,
+        active: active,
+        className: className,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Link, {
+            href: href,
+            children: children
+        })
+    });
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuLink, {
+        href: href,
+        active: active,
+        className: className,
+        children: children
+    });
+};
+const NavigationMenuImpl = (_0)=>{
+    let { items, linkComponent } = _0, rest = _object_without_properties(_0, [
+        "items",
+        "linkComponent"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(NavigationMenuRoot, _object_spread_props(_object_spread({}, rest), {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(NavigationMenuList, {
+                children: [
+                    items.map((itemSpec)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuItem, {
+                            children: itemSpec.links ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuTrigger, {
+                                        children: itemSpec.label
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuContent, {
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                            className: contentGrid,
+                                            children: itemSpec.links.map((linkSpec)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(SimpleLink, {
+                                                    href: linkSpec.href,
+                                                    active: linkSpec.active,
+                                                    linkComponent: linkComponent,
+                                                    className: contentLink,
+                                                    children: [
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            className: contentLinkTitle,
+                                                            children: linkSpec.label
+                                                        }),
+                                                        linkSpec.description ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            className: contentLinkDescription,
+                                                            children: linkSpec.description
+                                                        }) : null
+                                                    ]
+                                                }, linkSpec.key))
+                                        })
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SimpleLink, {
+                                href: itemSpec.href,
+                                active: itemSpec.active,
+                                linkComponent: linkComponent,
+                                children: itemSpec.label
+                            })
+                        }, itemSpec.key)),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuIndicator, {})
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuViewport, {})
+        ]
+    }));
+};
+NavigationMenuImpl.displayName = 'NavigationMenu';
+const NavigationMenu = Object.assign(NavigationMenuImpl, {
+    Root: NavigationMenuRoot,
+    List: NavigationMenuList,
+    Item: NavigationMenuItem,
+    Trigger: NavigationMenuTrigger,
+    Link: NavigationMenuLink,
+    Content: NavigationMenuContent,
+    Indicator: NavigationMenuIndicator,
+    Viewport: NavigationMenuViewport
+});
+exports.NavigationMenu = __webpack_exports__.NavigationMenu;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "NavigationMenu"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/navigation-menu.css

@@ -0,0 +1,197 @@
+@keyframes bzjbii7 {
+  from {
+    opacity: 0;
+    transform: translateY(-.25rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.bzjbii0 {
+  position: relative;
+}
+
+.bzjbii1 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  position: relative;
+}
+
+.bzjbii2 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  height: 2.5rem;
+  padding: 0 var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  display: inline-flex;
+}
+
+.bzjbii2:hover {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-text-default);
+}
+
+.bzjbii2:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+.bzjbii2[data-state="open"] {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-text-default);
+}
+
+.bzjbii3 {
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  font-size: .875rem;
+  display: inline-flex;
+}
+
+[data-state="open"] > .bzjbii3 {
+  transform: rotate(180deg);
+}
+
+.bzjbii4 {
+  height: 2.5rem;
+  padding: 0 var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  align-items: center;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.bzjbii4:hover {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-text-default);
+}
+
+.bzjbii4:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+.bzjbii4[data-active] {
+  background-color: var(--vinyasa-tertiary);
+  color: var(--vinyasa-on-tertiary);
+  font-weight: var(--vinyasa-font-weight-semibold);
+}
+
+.bzjbii5 {
+  background-color: var(--vinyasa-primary);
+  height: 2px;
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), width var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  bottom: 0;
+}
+
+.bzjbii5[data-state="hidden"] {
+  opacity: 0;
+}
+
+.bzjbii6 {
+  width: 100%;
+  padding-top: var(--vinyasa-space2);
+  justify-content: center;
+  display: flex;
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+
+.bzjbii8 {
+  transform-origin: top;
+  width: var(--radix-navigation-menu-viewport-width);
+  height: var(--radix-navigation-menu-viewport-height);
+  border-radius: var(--vinyasa-radius-md);
+  background-color: var(--vinyasa-surface);
+  box-shadow: var(--vinyasa-elevation-overlay);
+  transition: width var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard), height var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.bzjbii9 {
+  padding: var(--vinyasa-space4);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.bzjbii9[data-state="open"] {
+  animation: bzjbii7 var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+}
+
+.bzjbiia {
+  gap: var(--vinyasa-space2);
+  grid-template-columns: repeat(2, minmax(12rem, 1fr));
+  display: grid;
+}
+
+.bzjbiib {
+  align-items: flex-start;
+  gap: var(--vinyasa-space1);
+  height: auto;
+  padding: var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: inherit;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  flex-direction: column;
+  text-decoration: none;
+  display: flex;
+}
+
+.bzjbiib:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+.bzjbiib:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+.bzjbiib[data-active] {
+  background-color: var(--vinyasa-tertiary);
+}
+
+.bzjbiic {
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  color: var(--vinyasa-text-default);
+}
+
+[data-active] .bzjbiic {
+  color: var(--vinyasa-on-tertiary);
+  font-weight: var(--vinyasa-font-weight-semibold);
+}
+
+.bzjbiid {
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-text-muted);
+}
+
+[data-active] .bzjbiid {
+  color: var(--vinyasa-on-tertiary);
+  opacity: .8;
+}
+