@vinyasa/navigation 1.0.26

package/README.md

@@ -0,0 +1,45 @@
+# @vinyasa/navigation
+
+Describe what Navigation does here.
+
+## Installation
+
+```bash
+pnpm add @vinyasa/navigation @vinyasa/tokens react react-dom
+```
+
+`@vinyasa/tokens` is a peer dependency: Navigation's styles reference the shared design-token contract, and rendering it requires a `VinyasaProvider` (from `@vinyasa/tokens`) somewhere above it in the tree. See [`@vinyasa/tokens`'s README](../tokens/README.md) for what that provider does.
+
+No separate stylesheet import is needed — Navigation's CSS is bundled into its own JS entry and loads automatically when you import the component.
+
+## Usage
+
+```tsx
+import { VinyasaProvider } from '@vinyasa/tokens';
+import { Navigation } from '@vinyasa/navigation';
+
+function App() {
+	return (
+		<VinyasaProvider>
+			<Navigation />
+		</VinyasaProvider>
+	);
+}
+```
+
+## Subpath import
+
+```tsx
+import Navigation from '@vinyasa/navigation/navigation';
+```
+
+## Development
+
+From the repository root:
+
+```bash
+pnpm --filter @vinyasa/navigation build
+pnpm --filter @vinyasa/navigation test
+pnpm --filter @vinyasa/navigation lint
+pnpm storybook   # Components/Navigation
+```

package/dist/cjs/breadcrumbs.cjs

@@ -0,0 +1,240 @@
+"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__, {
+    Breadcrumbs: ()=>Breadcrumbs
+});
+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");
+var item = '_48ex311';
+var Breadcrumbs_css_link = '_48ex312';
+var list = '_48ex310';
+var page = '_48ex313';
+var separator = '_48ex314';
+var truncatedLabel = '_48ex315';
+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 Breadcrumbs_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 Breadcrumbs_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 BreadcrumbsRoot = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { label = 'Breadcrumb' } = _ref1, rest = _object_without_properties(_ref1, [
+        "label"
+    ]), [ref] = _rest;
+    const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("nav", _object_spread({
+        ref: themedRef,
+        "aria-label": label
+    }, rest));
+});
+BreadcrumbsRoot.displayName = 'BreadcrumbsRoot';
+const BreadcrumbsList = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("ol", _object_spread({
+        className: className ? `${list} ${className}` : list
+    }, rest));
+};
+BreadcrumbsList.displayName = 'BreadcrumbsList';
+const BreadcrumbsItem = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", _object_spread({
+        className: className ? `${item} ${className}` : item
+    }, rest));
+};
+BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+const BreadcrumbsLink = (_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 ? `${Breadcrumbs_css_link} ${className}` : Breadcrumbs_css_link
+    }, rest));
+};
+BreadcrumbsLink.displayName = 'BreadcrumbsLink';
+const BreadcrumbsPage = (_0)=>{
+    let { className } = _0, rest = _object_without_properties(_0, [
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", _object_spread({
+        className: className ? `${page} ${className}` : page,
+        "aria-current": "page"
+    }, rest));
+};
+BreadcrumbsPage.displayName = 'BreadcrumbsPage';
+const BreadcrumbsSeparator = (_0)=>{
+    let { className, children } = _0, rest = _object_without_properties(_0, [
+        "className",
+        "children"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("li", _object_spread_props(_object_spread({
+        "aria-hidden": "true",
+        className: className ? `${separator} ${className}` : separator
+    }, rest), {
+        children: null != children ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ChevronRightIcon, {})
+    }));
+};
+BreadcrumbsSeparator.displayName = 'BreadcrumbsSeparator';
+const BreadcrumbsImpl = (_0)=>{
+    let { items, separator: separatorNode, linkComponent, label, className } = _0, rest = _object_without_properties(_0, [
+        "items",
+        "separator",
+        "linkComponent",
+        "label",
+        "className"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreadcrumbsRoot, _object_spread_props(_object_spread({
+        label: label,
+        className: className
+    }, rest), {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreadcrumbsList, {
+            children: items.map((itemSpec, index)=>{
+                var _itemSpec_key;
+                const isLast = index === items.length - 1;
+                const key = null != (_itemSpec_key = itemSpec.key) ? _itemSpec_key : 'string' == typeof itemSpec.label ? itemSpec.label : index;
+                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_namespaceObject.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreadcrumbsItem, {
+                            children: isLast ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreadcrumbsPage, {
+                                className: truncatedLabel,
+                                children: itemSpec.label
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreadcrumbsLink, {
+                                as: null != linkComponent ? linkComponent : 'a',
+                                href: itemSpec.href,
+                                className: truncatedLabel,
+                                children: itemSpec.label
+                            })
+                        }),
+                        isLast ? null : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(BreadcrumbsSeparator, {
+                            children: separatorNode
+                        })
+                    ]
+                }, key);
+            })
+        })
+    }));
+};
+BreadcrumbsImpl.displayName = 'Breadcrumbs';
+const Breadcrumbs = Object.assign(BreadcrumbsImpl, {
+    Root: BreadcrumbsRoot,
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+    Page: BreadcrumbsPage,
+    Separator: BreadcrumbsSeparator
+});
+exports.Breadcrumbs = __webpack_exports__.Breadcrumbs;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Breadcrumbs"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/breadcrumbs.css

@@ -0,0 +1,58 @@
+._48ex310 {
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+._48ex311 {
+  align-items: center;
+  display: flex;
+}
+
+._48ex312 {
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  border-radius: var(--vinyasa-radius-sm);
+  transition: color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  text-decoration: none;
+}
+
+._48ex312:hover {
+  color: var(--vinyasa-text-default);
+  text-decoration: underline;
+}
+
+._48ex312:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+._48ex313 {
+  color: var(--vinyasa-text-default);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+}
+
+._48ex314 {
+  margin: 0 var(--vinyasa-space1);
+  color: var(--vinyasa-text-muted);
+  justify-content: center;
+  align-items: center;
+  font-size: .875rem;
+  display: inline-flex;
+}
+
+._48ex315 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  max-width: 16rem;
+  display: inline-block;
+  overflow: hidden;
+}
+

package/dist/cjs/command-navigation.cjs

@@ -0,0 +1,215 @@
+"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__, {
+    CommandNavigation: ()=>CommandNavigation
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@vinyasa/icons");
+const command_palette_namespaceObject = require("@vinyasa/overlay/command-palette");
+const typography_namespaceObject = require("@vinyasa/typography");
+const external_react_namespaceObject = require("react");
+var trigger = '_1pp4pc70';
+var triggerIcon = '_1pp4pc71';
+var triggerKbd = '_1pp4pc73';
+var triggerText = '_1pp4pc72';
+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 CommandNavigation_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 CommandNavigation_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 defaultNavigate = (href)=>{
+    window.location.assign(href);
+};
+const CommandNavigationImpl = ({ groups, label = 'Command navigation', placeholder = 'Search or jump to...', emptyMessage, onNavigate = defaultNavigate, open: openProp, defaultOpen = false, onOpenChange, disableShortcut = false })=>{
+    const [internalOpen, setInternalOpen] = (0, external_react_namespaceObject.useState)(defaultOpen);
+    const isControlled = void 0 !== openProp;
+    const open = isControlled ? openProp : internalOpen;
+    const openRef = (0, external_react_namespaceObject.useRef)(open);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        openRef.current = open;
+    }, [
+        open
+    ]);
+    const setOpen = (next)=>{
+        if (!isControlled) setInternalOpen(next);
+        null == onOpenChange || onOpenChange(next);
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (disableShortcut) return;
+        const handleKeyDown = (event)=>{
+            if ('k' === event.key.toLowerCase() && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                setOpen(!openRef.current);
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        disableShortcut
+    ]);
+    const paletteGroups = groups.map((group)=>({
+            key: group.key,
+            heading: group.heading,
+            items: group.items.map((item)=>({
+                    key: item.key,
+                    label: item.label,
+                    icon: item.icon,
+                    shortcut: item.shortcut,
+                    keywords: item.keywords,
+                    disabled: item.disabled,
+                    onSelect: ()=>{
+                        setOpen(false);
+                        if (item.onSelect) item.onSelect();
+                        else if (item.href) onNavigate(item.href);
+                    }
+                }))
+        }));
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(command_palette_namespaceObject.CommandPalette, {
+        label: label,
+        placeholder: placeholder,
+        emptyMessage: emptyMessage,
+        groups: paletteGroups,
+        open: open,
+        onOpenChange: setOpen
+    });
+};
+CommandNavigationImpl.displayName = 'CommandNavigation';
+const CommandNavigationTrigger = (_0)=>{
+    let { placeholder = 'Search or jump to...', shortcutLabel = '⌘K', className, children } = _0, rest = _object_without_properties(_0, [
+        "placeholder",
+        "shortcutLabel",
+        "className",
+        "children"
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", _object_spread_props(_object_spread({
+        type: "button",
+        className: className ? `${trigger} ${className}` : trigger
+    }, rest), {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.SearchIcon, {
+                className: triggerIcon
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: triggerText,
+                children: null != children ? children : placeholder
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(typography_namespaceObject.Kbd, {
+                className: triggerKbd,
+                children: shortcutLabel
+            })
+        ]
+    }));
+};
+CommandNavigationTrigger.displayName = 'CommandNavigationTrigger';
+const CommandNavigation = Object.assign(CommandNavigationImpl, {
+    Trigger: CommandNavigationTrigger
+});
+exports.CommandNavigation = __webpack_exports__.CommandNavigation;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CommandNavigation"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/command-navigation.css

@@ -0,0 +1,46 @@
+._1pp4pc70 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  width: 100%;
+  max-width: 20rem;
+  height: 2.25rem;
+  padding: 0 var(--vinyasa-space3);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  border-radius: var(--vinyasa-radius-md);
+  background-color: var(--vinyasa-surface);
+  color: var(--vinyasa-text-muted);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), border-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  display: inline-flex;
+}
+
+._1pp4pc70:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1pp4pc70:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+._1pp4pc71 {
+  flex-shrink: 0;
+  font-size: 1rem;
+  display: inline-flex;
+}
+
+._1pp4pc72 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: left;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+._1pp4pc73 {
+  flex-shrink: 0;
+}
+