@vinyasa/navigation 1.0.26

package/dist/esm/555.js

@@ -0,0 +1,232 @@
+import "./555.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon } from "@vinyasa/icons";
+import { useThemedRef } from "@vinyasa/tokens";
+import { createContext, forwardRef, useContext, useState } from "react";
+import { createRuntimeFn } from "./953.js";
+var collapseTrigger = '_1nqk067i';
+var collapseTriggerIcon = createRuntimeFn({
+    defaultClassName: '_1nqk067j',
+    variantClassNames: {
+        collapsed: {
+            true: '_1nqk067k'
+        }
+    },
+    defaultVariants: {},
+    compoundVariants: []
+});
+var content = '_1nqk0675';
+var footer = '_1nqk0676';
+var header = '_1nqk0673';
+var item = createRuntimeFn({
+    defaultClassName: '_1nqk067b',
+    variantClassNames: {
+        active: {
+            true: '_1nqk067c'
+        },
+        collapsed: {
+            true: '_1nqk067d'
+        }
+    },
+    defaultVariants: {},
+    compoundVariants: []
+});
+var itemIcon = '_1nqk067e';
+var itemLabel = createRuntimeFn({
+    defaultClassName: '_1nqk067f',
+    variantClassNames: {
+        collapsed: {
+            true: '_1nqk067g',
+            false: '_1nqk067h'
+        }
+    },
+    defaultVariants: {},
+    compoundVariants: []
+});
+var root = createRuntimeFn({
+    defaultClassName: '_1nqk0670',
+    variantClassNames: {
+        collapsed: {
+            true: '_1nqk0671',
+            false: '_1nqk0672'
+        }
+    },
+    defaultVariants: {
+        collapsed: false
+    },
+    compoundVariants: []
+});
+var section = '_1nqk0677';
+var sectionLabel = createRuntimeFn({
+    defaultClassName: '_1nqk0678',
+    variantClassNames: {
+        collapsed: {
+            true: '_1nqk0679',
+            false: '_1nqk067a'
+        }
+    },
+    defaultVariants: {},
+    compoundVariants: []
+});
+var truncatedContent = '_1nqk0674';
+const SidebarContext = /*#__PURE__*/ createContext(null);
+const useSidebarContext = ()=>{
+    const context = useContext(SidebarContext);
+    if (!context) throw new Error('Sidebar parts must be rendered inside <Sidebar.Root>.');
+    return context;
+};
+const useSidebarCollapsed = ()=>useSidebarContext().collapsed;
+const SidebarRoot = /*#__PURE__*/ forwardRef(({ collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, className, children, ...rest }, ref)=>{
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isControlled = void 0 !== collapsedProp;
+    const collapsed = isControlled ? collapsedProp : internalCollapsed;
+    const themedRef = useThemedRef(ref);
+    const setCollapsed = (next)=>{
+        if (!isControlled) setInternalCollapsed(next);
+        onCollapsedChange?.(next);
+    };
+    return /*#__PURE__*/ jsx(SidebarContext.Provider, {
+        value: {
+            collapsed,
+            setCollapsed
+        },
+        children: /*#__PURE__*/ jsx("nav", {
+            ref: themedRef,
+            className: className ? `${root({
+                collapsed
+            })} ${className}` : root({
+                collapsed
+            }),
+            ...rest,
+            children: children
+        })
+    });
+});
+SidebarRoot.displayName = 'SidebarRoot';
+const SidebarHeader = ({ className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        className: className ? `${header} ${className}` : header,
+        ...rest
+    });
+SidebarHeader.displayName = 'SidebarHeader';
+const SidebarContent = ({ className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        className: className ? `${content} ${className}` : content,
+        ...rest
+    });
+SidebarContent.displayName = 'SidebarContent';
+const SidebarFooter = ({ className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        className: className ? `${footer} ${className}` : footer,
+        ...rest
+    });
+SidebarFooter.displayName = 'SidebarFooter';
+const SidebarSection = ({ label, className, children, ...rest })=>{
+    const collapsed = useSidebarCollapsed();
+    return /*#__PURE__*/ jsxs("div", {
+        className: className ? `${section} ${className}` : section,
+        ...rest,
+        children: [
+            label ? /*#__PURE__*/ jsx("span", {
+                className: sectionLabel({
+                    collapsed
+                }),
+                children: label
+            }) : null,
+            children
+        ]
+    });
+};
+SidebarSection.displayName = 'SidebarSection';
+const SidebarItem = /*#__PURE__*/ forwardRef(({ as: Component = 'button', icon, active, className, children, title, ...rest }, ref)=>{
+    const collapsed = useSidebarCollapsed();
+    const classes = className ? `${item({
+        active,
+        collapsed
+    })} ${className}` : item({
+        active,
+        collapsed
+    });
+    const resolvedTitle = title ?? (collapsed && 'string' == typeof children ? children : void 0);
+    return /*#__PURE__*/ jsxs(Component, {
+        ref: ref,
+        className: classes,
+        title: resolvedTitle,
+        ...rest,
+        children: [
+            icon ? /*#__PURE__*/ jsx("span", {
+                className: itemIcon,
+                children: icon
+            }) : null,
+            /*#__PURE__*/ jsx("span", {
+                className: itemLabel({
+                    collapsed
+                }),
+                children: children
+            })
+        ]
+    });
+});
+SidebarItem.displayName = 'SidebarItem';
+const SidebarCollapseTrigger = ({ className, ...rest })=>{
+    const { collapsed, setCollapsed } = useSidebarContext();
+    return /*#__PURE__*/ jsx("button", {
+        type: "button",
+        className: className ? `${collapseTrigger} ${className}` : collapseTrigger,
+        "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar',
+        onClick: ()=>{
+            setCollapsed(!collapsed);
+        },
+        ...rest,
+        children: /*#__PURE__*/ jsx(ChevronLeftIcon, {
+            className: collapseTriggerIcon({
+                collapsed
+            })
+        })
+    });
+};
+SidebarCollapseTrigger.displayName = 'SidebarCollapseTrigger';
+const SidebarImpl = ({ header: headerContent, footer: footerContent, sections, collapsible = true, linkComponent, collapsed, defaultCollapsed, onCollapsedChange })=>/*#__PURE__*/ jsxs(SidebarRoot, {
+        collapsed: collapsed,
+        defaultCollapsed: defaultCollapsed,
+        onCollapsedChange: onCollapsedChange,
+        children: [
+            headerContent || collapsible ? /*#__PURE__*/ jsxs(SidebarHeader, {
+                children: [
+                    headerContent ? /*#__PURE__*/ jsx("span", {
+                        className: truncatedContent,
+                        children: headerContent
+                    }) : null,
+                    collapsible ? /*#__PURE__*/ jsx(SidebarCollapseTrigger, {}) : null
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx(SidebarContent, {
+                children: sections.map((sectionSpec)=>/*#__PURE__*/ jsx(SidebarSection, {
+                        label: sectionSpec.label,
+                        children: sectionSpec.items.map((itemSpec)=>/*#__PURE__*/ jsx(SidebarItem, {
+                                as: itemSpec.href ? linkComponent ?? 'a' : 'button',
+                                href: itemSpec.href,
+                                icon: itemSpec.icon,
+                                active: itemSpec.active,
+                                disabled: itemSpec.disabled,
+                                onClick: itemSpec.onClick,
+                                children: itemSpec.label
+                            }, itemSpec.key))
+                    }, sectionSpec.key))
+            }),
+            footerContent ? /*#__PURE__*/ jsx(SidebarFooter, {
+                children: /*#__PURE__*/ jsx("span", {
+                    className: truncatedContent,
+                    children: footerContent
+                })
+            }) : null
+        ]
+    });
+SidebarImpl.displayName = 'Sidebar';
+const Sidebar = Object.assign(SidebarImpl, {
+    Root: SidebarRoot,
+    Header: SidebarHeader,
+    Content: SidebarContent,
+    Section: SidebarSection,
+    Item: SidebarItem,
+    Footer: SidebarFooter,
+    CollapseTrigger: SidebarCollapseTrigger
+});
+export { Sidebar, useSidebarCollapsed };

package/dist/esm/655.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/esm/655.js

@@ -0,0 +1,87 @@
+import "./655.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "@vinyasa/icons";
+import { useThemedRef } from "@vinyasa/tokens";
+import { Fragment, forwardRef } from "react";
+var item = '_48ex311';
+var Breadcrumbs_css_link = '_48ex312';
+var list = '_48ex310';
+var page = '_48ex313';
+var separator = '_48ex314';
+var truncatedLabel = '_48ex315';
+const BreadcrumbsRoot = /*#__PURE__*/ forwardRef(({ label = 'Breadcrumb', ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
+    return /*#__PURE__*/ jsx("nav", {
+        ref: themedRef,
+        "aria-label": label,
+        ...rest
+    });
+});
+BreadcrumbsRoot.displayName = 'BreadcrumbsRoot';
+const BreadcrumbsList = ({ className, ...rest })=>/*#__PURE__*/ jsx("ol", {
+        className: className ? `${list} ${className}` : list,
+        ...rest
+    });
+BreadcrumbsList.displayName = 'BreadcrumbsList';
+const BreadcrumbsItem = ({ className, ...rest })=>/*#__PURE__*/ jsx("li", {
+        className: className ? `${item} ${className}` : item,
+        ...rest
+    });
+BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+const BreadcrumbsLink = ({ as: Component = 'a', className, ...rest })=>/*#__PURE__*/ jsx(Component, {
+        className: className ? `${Breadcrumbs_css_link} ${className}` : Breadcrumbs_css_link,
+        ...rest
+    });
+BreadcrumbsLink.displayName = 'BreadcrumbsLink';
+const BreadcrumbsPage = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${page} ${className}` : page,
+        "aria-current": "page",
+        ...rest
+    });
+BreadcrumbsPage.displayName = 'BreadcrumbsPage';
+const BreadcrumbsSeparator = ({ className, children, ...rest })=>/*#__PURE__*/ jsx("li", {
+        "aria-hidden": "true",
+        className: className ? `${separator} ${className}` : separator,
+        ...rest,
+        children: children ?? /*#__PURE__*/ jsx(ChevronRightIcon, {})
+    });
+BreadcrumbsSeparator.displayName = 'BreadcrumbsSeparator';
+const BreadcrumbsImpl = ({ items, separator: separatorNode, linkComponent, label, className, ...rest })=>/*#__PURE__*/ jsx(BreadcrumbsRoot, {
+        label: label,
+        className: className,
+        ...rest,
+        children: /*#__PURE__*/ jsx(BreadcrumbsList, {
+            children: items.map((itemSpec, index)=>{
+                const isLast = index === items.length - 1;
+                const key = itemSpec.key ?? ('string' == typeof itemSpec.label ? itemSpec.label : index);
+                return /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(BreadcrumbsItem, {
+                            children: isLast ? /*#__PURE__*/ jsx(BreadcrumbsPage, {
+                                className: truncatedLabel,
+                                children: itemSpec.label
+                            }) : /*#__PURE__*/ jsx(BreadcrumbsLink, {
+                                as: linkComponent ?? 'a',
+                                href: itemSpec.href,
+                                className: truncatedLabel,
+                                children: itemSpec.label
+                            })
+                        }),
+                        isLast ? null : /*#__PURE__*/ 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
+});
+export { Breadcrumbs };

package/dist/esm/66.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;
+}
+

package/dist/esm/66.js

@@ -0,0 +1,92 @@
+import "./66.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "@vinyasa/icons";
+import { CommandPalette } from "@vinyasa/overlay/command-palette";
+import { Kbd } from "@vinyasa/typography";
+import { useEffect, useRef, useState } from "react";
+var trigger = '_1pp4pc70';
+var triggerIcon = '_1pp4pc71';
+var triggerKbd = '_1pp4pc73';
+var triggerText = '_1pp4pc72';
+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] = useState(defaultOpen);
+    const isControlled = void 0 !== openProp;
+    const open = isControlled ? openProp : internalOpen;
+    const openRef = useRef(open);
+    useEffect(()=>{
+        openRef.current = open;
+    }, [
+        open
+    ]);
+    const setOpen = (next)=>{
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    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__*/ jsx(CommandPalette, {
+        label: label,
+        placeholder: placeholder,
+        emptyMessage: emptyMessage,
+        groups: paletteGroups,
+        open: open,
+        onOpenChange: setOpen
+    });
+};
+CommandNavigationImpl.displayName = 'CommandNavigation';
+const CommandNavigationTrigger = ({ placeholder = 'Search or jump to...', shortcutLabel = '⌘K', className, children, ...rest })=>/*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: className ? `${trigger} ${className}` : trigger,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(SearchIcon, {
+                className: triggerIcon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: triggerText,
+                children: children ?? placeholder
+            }),
+            /*#__PURE__*/ jsx(Kbd, {
+                className: triggerKbd,
+                children: shortcutLabel
+            })
+        ]
+    });
+CommandNavigationTrigger.displayName = 'CommandNavigationTrigger';
+const CommandNavigation = Object.assign(CommandNavigationImpl, {
+    Trigger: CommandNavigationTrigger
+});
+export { CommandNavigation };

package/dist/esm/694.css

@@ -0,0 +1,109 @@
+._1o0hep20 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+._1o0hep21 {
+  padding: 0;
+  padding-left: var(--vinyasa-space5);
+  margin: 0;
+  list-style: none;
+}
+
+._1o0hep22 {
+  list-style: none;
+}
+
+._1o0hep23 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  min-width: 0;
+  padding: var(--vinyasa-space2) var(--vinyasa-space2) var(--vinyasa-space2) var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-md);
+  color: var(--vinyasa-text-default);
+  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), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  display: flex;
+  position: relative;
+}
+
+._1o0hep23:hover:not([aria-disabled="true"]) {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1o0hep23:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+._1o0hep23[aria-disabled="true"] {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._1o0hep23[aria-selected="true"] {
+  background-color: var(--vinyasa-tertiary);
+  color: var(--vinyasa-primary);
+  font-weight: var(--vinyasa-font-weight-medium);
+}
+
+._1o0hep23[aria-selected="true"]:before {
+  content: "";
+  border-radius: var(--vinyasa-radius-full);
+  background-color: var(--vinyasa-primary);
+  width: .1875rem;
+  position: absolute;
+  top: .25rem;
+  bottom: .25rem;
+  left: .125rem;
+}
+
+._1o0hep24 {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--vinyasa-text-muted);
+  cursor: pointer;
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: #0000;
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+._1o0hep24:hover {
+  color: var(--vinyasa-text-default);
+}
+
+._1o0hep24[data-expanded="true"] {
+  transform: rotate(90deg);
+}
+
+[aria-selected="true"] ._1o0hep24 {
+  color: var(--vinyasa-primary);
+}
+
+._1o0hep25 {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+._1o0hep26 {
+  flex-shrink: 0;
+  font-size: 1rem;
+  display: inline-flex;
+}
+
+._1o0hep27 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+