@vinyasa/navigation 1.0.26

package/dist/cjs/tabs.css

@@ -0,0 +1,122 @@
+@keyframes _1n0eqzz4 {
+  from {
+    opacity: 0;
+    transform: translateY(.25rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+._1n0eqzz0[data-orientation="vertical"] {
+  gap: var(--vinyasa-space5);
+  display: flex;
+}
+
+._1n0eqzz1 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  display: flex;
+  position: relative;
+}
+
+._1n0eqzz1[data-orientation="vertical"] {
+  border-bottom: none;
+  border-right: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: stretch;
+  min-width: 10rem;
+}
+
+._1n0eqzz2 {
+  background-color: var(--vinyasa-primary);
+  opacity: 0;
+  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), height var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+}
+
+[data-orientation="vertical"] ._1n0eqzz2 {
+  width: 2px;
+  height: 0;
+  top: 0;
+  bottom: auto;
+  left: auto;
+  right: -1px;
+}
+
+._1n0eqzz3 {
+  height: 2.5rem;
+  padding: 0 var(--vinyasa-space3);
+  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: color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  align-items: center;
+  display: inline-flex;
+}
+
+._1n0eqzz3:hover:not([data-disabled]) {
+  color: var(--vinyasa-text-default);
+}
+
+._1n0eqzz3:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+._1n0eqzz3[data-disabled] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._1n0eqzz3[data-state="active"] {
+  color: var(--vinyasa-text-default);
+}
+
+[data-orientation="vertical"] ._1n0eqzz3 {
+  justify-content: flex-start;
+}
+
+._1n0eqzz5 {
+  padding-top: var(--vinyasa-space4);
+  grid-area: 1 / 1;
+}
+
+._1n0eqzz5:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+[data-orientation="vertical"] ._1n0eqzz5 {
+  padding-top: 0;
+}
+
+._1n0eqzz5[data-state="active"] {
+  animation: _1n0eqzz4 var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+}
+
+._1n0eqzz5[data-state="inactive"] {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+._1n0eqzz6 {
+  display: grid;
+  position: relative;
+}
+
+[data-orientation="vertical"] ._1n0eqzz6 {
+  flex: 1;
+}
+

package/dist/cjs/top-navigation.cjs

@@ -0,0 +1,363 @@
+"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__, {
+    TopNavigation: ()=>TopNavigation
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@vinyasa/icons");
+const tokens_namespaceObject = require("@vinyasa/tokens");
+const external_react_namespaceObject = require("react");
+function toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+        var i = e.call(t, r || "default");
+        if ("object" != typeof i) return i;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+}
+function toPropertyKey(t) {
+    var i = toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : String(i);
+}
+function _defineProperty(obj, key, value) {
+    key = toPropertyKey(key);
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function createRuntimeFn_62c9670f_esm_ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+        var o = Object.getOwnPropertySymbols(e);
+        r && (o = o.filter(function(r) {
+            return Object.getOwnPropertyDescriptor(e, r).enumerable;
+        })), t.push.apply(t, o);
+    }
+    return t;
+}
+function _objectSpread2(e) {
+    for(var r = 1; r < arguments.length; r++){
+        var t = null != arguments[r] ? arguments[r] : {};
+        r % 2 ? createRuntimeFn_62c9670f_esm_ownKeys(Object(t), !0).forEach(function(r) {
+            _defineProperty(e, r, t[r]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : createRuntimeFn_62c9670f_esm_ownKeys(Object(t)).forEach(function(r) {
+            Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+        });
+    }
+    return e;
+}
+function mapValues(input, fn) {
+    var result = {};
+    for(var _key in input)result[_key] = fn(input[_key], _key);
+    return result;
+}
+var shouldApplyCompound = (compoundCheck, selections, defaultVariants)=>{
+    for (var key of Object.keys(compoundCheck)){
+        var _selections$key;
+        if (compoundCheck[key] !== (null != (_selections$key = selections[key]) ? _selections$key : defaultVariants[key])) return false;
+    }
+    return true;
+};
+var createRuntimeFn = (config)=>{
+    var runtimeFn = (options)=>{
+        var className = config.defaultClassName;
+        var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+        for(var variantName in selections){
+            var _selections$variantNa;
+            var variantSelection = null != (_selections$variantNa = selections[variantName]) ? _selections$variantNa : config.defaultVariants[variantName];
+            if (null != variantSelection) {
+                var selection = variantSelection;
+                if ('boolean' == typeof selection) selection = true === selection ? 'true' : 'false';
+                var selectionClassName = config.variantClassNames[variantName][selection];
+                if (selectionClassName) className += ' ' + selectionClassName;
+            }
+        }
+        for (var [compoundCheck, compoundClassName] of config.compoundVariants)if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) className += ' ' + compoundClassName;
+        return className;
+    };
+    runtimeFn.variants = ()=>Object.keys(config.variantClassNames);
+    runtimeFn.classNames = {
+        get base () {
+            return config.defaultClassName.split(' ')[0];
+        },
+        get variants () {
+            return mapValues(config.variantClassNames, (classNames)=>mapValues(classNames, (className)=>className.split(' ')[0]));
+        }
+    };
+    return runtimeFn;
+};
+var actions = '_383lbb3';
+var brand = '_383lbb1';
+var content = '_383lbb2';
+var item = createRuntimeFn({
+    defaultClassName: '_383lbb4',
+    variantClassNames: {
+        active: {
+            true: '_383lbb5'
+        }
+    },
+    defaultVariants: {},
+    compoundVariants: []
+});
+var mobileTrigger = '_383lbb6';
+var root = '_383lbb0';
+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 TopNavigation_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 TopNavigation_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 TopNavigationContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
+const useTopNavigationContext = ()=>{
+    const context = (0, external_react_namespaceObject.useContext)(TopNavigationContext);
+    if (!context) throw new Error('TopNavigation parts must be rendered inside <TopNavigation.Root>.');
+    return context;
+};
+const TopNavigationRoot = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { open: openProp, defaultOpen = false, onOpenChange, className, children } = _ref1, rest = _object_without_properties(_ref1, [
+        "open",
+        "defaultOpen",
+        "onOpenChange",
+        "className",
+        "children"
+    ]), [ref] = _rest;
+    const [internalOpen, setInternalOpen] = (0, external_react_namespaceObject.useState)(defaultOpen);
+    const isControlled = void 0 !== openProp;
+    const open = isControlled ? openProp : internalOpen;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
+    const setOpen = (next)=>{
+        if (!isControlled) setInternalOpen(next);
+        null == onOpenChange || onOpenChange(next);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TopNavigationContext.Provider, {
+        value: {
+            open,
+            setOpen
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", _object_spread_props(_object_spread({
+            ref: themedRef,
+            className: className ? `${root} ${className}` : root
+        }, rest), {
+            children: children
+        }))
+    });
+});
+TopNavigationRoot.displayName = 'TopNavigationRoot';
+const TopNavigationBrand = (_0)=>{
+    let { as: Component = 'a', className } = _0, rest = _object_without_properties(_0, [
+        "as",
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread({
+        className: className ? `${brand} ${className}` : brand
+    }, rest));
+};
+TopNavigationBrand.displayName = 'TopNavigationBrand';
+const TopNavigationContent = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    const { open } = useTopNavigationContext();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread({
+        "data-open": open,
+        className: className ? `${content} ${className}` : content
+    }, rest));
+};
+TopNavigationContent.displayName = 'TopNavigationContent';
+const TopNavigationActions = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", _object_spread({
+        className: className ? `${actions} ${className}` : actions
+    }, rest));
+};
+TopNavigationActions.displayName = 'TopNavigationActions';
+const TopNavigationItem = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { as: Component = 'button', active, className } = _ref1, rest = _object_without_properties(_ref1, [
+        "as",
+        "active",
+        "className"
+    ]), [ref] = _rest;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread({
+        ref: ref,
+        className: className ? `${item({
+            active
+        })} ${className}` : item({
+            active
+        })
+    }, rest));
+});
+TopNavigationItem.displayName = 'TopNavigationItem';
+const TopNavigationMobileTrigger = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    const { open, setOpen } = useTopNavigationContext();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", _object_spread_props(_object_spread({
+        type: "button",
+        className: className ? `${mobileTrigger} ${className}` : mobileTrigger,
+        "aria-label": open ? 'Close menu' : 'Open menu',
+        "aria-expanded": open,
+        onClick: ()=>{
+            setOpen(!open);
+        }
+    }, rest), {
+        children: open ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.XIcon, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.MenuIcon, {})
+    }));
+};
+TopNavigationMobileTrigger.displayName = 'TopNavigationMobileTrigger';
+const TopNavigationImpl = ({ brand: brandContent, brandHref, items, actions: actionsContent, linkComponent, open, defaultOpen, onOpenChange })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(TopNavigationRoot, {
+        open: open,
+        defaultOpen: defaultOpen,
+        onOpenChange: onOpenChange,
+        children: [
+            brandContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TopNavigationBrand, {
+                as: linkComponent,
+                href: brandHref,
+                children: brandContent
+            }) : null,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TopNavigationContent, {
+                children: items.map((itemSpec)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TopNavigationItem, {
+                        as: itemSpec.href ? null != linkComponent ? linkComponent : 'a' : 'button',
+                        href: itemSpec.href,
+                        active: itemSpec.active,
+                        disabled: itemSpec.disabled,
+                        onClick: itemSpec.onClick,
+                        children: itemSpec.label
+                    }, itemSpec.key))
+            }),
+            actionsContent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TopNavigationActions, {
+                children: actionsContent
+            }) : null,
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TopNavigationMobileTrigger, {})
+        ]
+    });
+TopNavigationImpl.displayName = 'TopNavigation';
+const TopNavigation = Object.assign(TopNavigationImpl, {
+    Root: TopNavigationRoot,
+    Brand: TopNavigationBrand,
+    Content: TopNavigationContent,
+    Item: TopNavigationItem,
+    Actions: TopNavigationActions,
+    MobileTrigger: TopNavigationMobileTrigger
+});
+exports.TopNavigation = __webpack_exports__.TopNavigation;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "TopNavigation"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/top-navigation.css

@@ -0,0 +1,127 @@
+._383lbb0 {
+  align-items: center;
+  gap: var(--vinyasa-space4);
+  height: 3.5rem;
+  padding: 0 var(--vinyasa-space4);
+  background-color: var(--vinyasa-surface);
+  border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  display: flex;
+  position: relative;
+}
+
+._383lbb1 {
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-md);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  color: var(--vinyasa-text-default);
+  flex-shrink: 0;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+._383lbb2 {
+  align-items: center;
+  gap: var(--vinyasa-space1);
+  flex: 1;
+  display: flex;
+}
+
+._383lbb3 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  flex-shrink: 0;
+  display: flex;
+}
+
+._383lbb4 {
+  height: 100%;
+  padding: 0 var(--vinyasa-space3);
+  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;
+  white-space: nowrap;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  border-bottom: 2px solid rgba(0, 0, 0, 0);
+  align-items: center;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+._383lbb4:hover:not(:disabled) {
+  color: var(--vinyasa-text-default);
+}
+
+._383lbb4:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+._383lbb4:disabled {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._383lbb5 {
+  border-bottom-color: var(--vinyasa-primary);
+  color: var(--vinyasa-text-default);
+}
+
+._383lbb6 {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 2rem;
+  height: 2rem;
+  color: var(--vinyasa-text-default);
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0);
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  display: none;
+}
+
+._383lbb6:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+._383lbb6:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+@media (max-width: 768px) {
+  ._383lbb2 {
+    padding: var(--vinyasa-space2);
+    background-color: var(--vinyasa-surface);
+    border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+    box-shadow: var(--vinyasa-elevation-overlay);
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  ._383lbb2:not([data-open="true"]) {
+    display: none;
+  }
+
+  ._383lbb4 {
+    height: auto;
+    padding: var(--vinyasa-space3) var(--vinyasa-space3);
+    border-radius: var(--vinyasa-radius-sm);
+    border-bottom: none;
+  }
+
+  ._383lbb6 {
+    display: inline-flex;
+  }
+}
+