@vinyasa/navigation 1.0.26

package/dist/esm/294.css

@@ -0,0 +1,100 @@
+._1glbv700 {
+  border-radius: var(--vinyasa-radius-sm);
+  background-color: var(--vinyasa-primary);
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--vinyasa-on-primary);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-xs);
+  font-weight: var(--vinyasa-font-weight-semibold);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+._1glbv701 {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+._1glbv702 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  max-width: 16rem;
+  padding: var(--vinyasa-space2);
+  border-radius: var(--vinyasa-radius-sm);
+  color: var(--vinyasa-text-default);
+  cursor: pointer;
+  transition: background-color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  background-color: #0000;
+  border: none;
+  display: inline-flex;
+}
+
+._1glbv702:hover {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1glbv702:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+._1glbv702[data-state="open"] {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1glbv703 {
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+  min-width: 0;
+  display: flex;
+}
+
+._1glbv704 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  display: block;
+  overflow: hidden;
+}
+
+._1glbv705 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-text-muted);
+  display: block;
+  overflow: hidden;
+}
+
+._1glbv706 {
+  color: var(--vinyasa-text-muted);
+  flex-shrink: 0;
+  font-size: 1rem;
+  display: inline-flex;
+}
+
+._1glbv707 {
+  align-items: center;
+  gap: var(--vinyasa-space2);
+  min-width: 14rem;
+  display: flex;
+}
+
+._1glbv708 {
+  color: var(--vinyasa-primary);
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: 1rem;
+}
+

package/dist/esm/294.js

@@ -0,0 +1,114 @@
+import "./294.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, PlusIcon } from "@vinyasa/icons";
+import { DropdownMenu } from "@vinyasa/overlay/dropdown-menu";
+import { forwardRef } from "react";
+var avatar = '_1glbv700';
+var avatarImage = '_1glbv701';
+var item = '_1glbv707';
+var itemCheck = '_1glbv708';
+var trigger = '_1glbv702';
+var triggerDescription = '_1glbv705';
+var triggerIcon = '_1glbv706';
+var triggerName = '_1glbv704';
+var triggerText = '_1glbv703';
+const initials = (name)=>name.trim().split(/\s+/).slice(0, 2).map((word)=>word[0]).join('').toUpperCase();
+const WorkspaceAvatar = ({ workspace, className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${avatar} ${className}` : avatar,
+        "aria-hidden": "true",
+        ...rest,
+        children: workspace.avatar ?? initials(workspace.name)
+    });
+WorkspaceAvatar.displayName = 'WorkspaceAvatar';
+const WorkspaceSwitcherTrigger = /*#__PURE__*/ forwardRef(({ workspace, className, ...rest }, ref)=>/*#__PURE__*/ jsxs("button", {
+        ref: ref,
+        type: "button",
+        className: className ? `${trigger} ${className}` : trigger,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsx(WorkspaceAvatar, {
+                workspace: workspace
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: triggerText,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: triggerName,
+                    children: workspace.name
+                })
+            }),
+            /*#__PURE__*/ jsx(ChevronDownIcon, {
+                className: triggerIcon
+            })
+        ]
+    }));
+WorkspaceSwitcherTrigger.displayName = 'WorkspaceSwitcherTrigger';
+const WorkspaceSwitcherItem = ({ workspace, active })=>/*#__PURE__*/ jsxs("span", {
+        className: item,
+        children: [
+            /*#__PURE__*/ jsx(WorkspaceAvatar, {
+                workspace: workspace
+            }),
+            /*#__PURE__*/ jsxs("span", {
+                className: triggerText,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: triggerName,
+                        children: workspace.name
+                    }),
+                    workspace.description ? /*#__PURE__*/ jsx("span", {
+                        className: triggerDescription,
+                        children: workspace.description
+                    }) : null
+                ]
+            }),
+            active ? /*#__PURE__*/ jsx(CheckIcon, {
+                className: itemCheck,
+                "aria-hidden": "true"
+            }) : null
+        ]
+    });
+WorkspaceSwitcherItem.displayName = 'WorkspaceSwitcherItem';
+const WorkspaceSwitcherImpl = ({ workspaces, activeWorkspaceId, onWorkspaceChange, onCreateWorkspace, createWorkspaceLabel = 'Create workspace' })=>{
+    if (0 === workspaces.length) return null;
+    const activeWorkspace = workspaces.find((workspace)=>workspace.id === activeWorkspaceId) ?? workspaces[0];
+    const entries = [
+        ...workspaces.map((workspace)=>({
+                type: 'item',
+                key: workspace.id,
+                label: /*#__PURE__*/ jsx(WorkspaceSwitcherItem, {
+                    workspace: workspace,
+                    active: workspace.id === activeWorkspaceId
+                }),
+                onSelect: ()=>{
+                    onWorkspaceChange(workspace.id);
+                }
+            })),
+        ...onCreateWorkspace ? [
+            {
+                type: 'separator',
+                key: 'create-workspace-separator'
+            },
+            {
+                type: 'item',
+                key: 'create-workspace',
+                label: createWorkspaceLabel,
+                icon: /*#__PURE__*/ jsx(PlusIcon, {}),
+                onSelect: onCreateWorkspace
+            }
+        ] : []
+    ];
+    return /*#__PURE__*/ jsx(DropdownMenu, {
+        trigger: /*#__PURE__*/ jsx(WorkspaceSwitcherTrigger, {
+            workspace: activeWorkspace
+        }),
+        items: entries,
+        align: "start"
+    });
+};
+WorkspaceSwitcherImpl.displayName = 'WorkspaceSwitcher';
+const WorkspaceSwitcher = Object.assign(WorkspaceSwitcherImpl, {
+    Trigger: WorkspaceSwitcherTrigger,
+    Item: WorkspaceSwitcherItem,
+    Avatar: WorkspaceAvatar
+});
+export { WorkspaceSwitcher, avatarImage };

package/dist/esm/375.css

@@ -0,0 +1,153 @@
+._1szfqcu0 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+._1szfqcu0[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+._1szfqcu1 {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
+._1szfqcu1[data-orientation="vertical"] {
+  flex-direction: row;
+  flex: initial;
+  align-items: stretch;
+  min-width: auto;
+}
+
+._1szfqcu2 {
+  align-items: center;
+  display: flex;
+}
+
+[data-orientation="vertical"] ._1szfqcu2 {
+  flex-direction: column;
+  align-items: center;
+}
+
+._1szfqcu3 {
+  background-color: var(--vinyasa-border-color-default);
+  flex: 1;
+}
+
+[data-orientation="horizontal"] ._1szfqcu3 {
+  height: 2px;
+  margin-inline: var(--vinyasa-space2);
+}
+
+[data-orientation="vertical"] ._1szfqcu3 {
+  width: 2px;
+  margin-block: var(--vinyasa-space1);
+}
+
+li:last-child ._1szfqcu3 {
+  visibility: hidden;
+}
+
+[data-state="completed"] ._1szfqcu3 {
+  background-color: var(--vinyasa-status-success-text);
+}
+
+._1szfqcu4 {
+  border-radius: var(--vinyasa-radius-full);
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  background-color: var(--vinyasa-surface);
+  width: 2rem;
+  height: 2rem;
+  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);
+  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), color var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+[data-state="current"] ._1szfqcu4 {
+  border-color: var(--vinyasa-primary);
+  color: var(--vinyasa-primary);
+}
+
+[data-state="completed"] ._1szfqcu4 {
+  border-color: var(--vinyasa-status-success-text);
+  background-color: var(--vinyasa-status-success-text);
+  color: var(--vinyasa-status-success-bg);
+}
+
+[data-state="error"] ._1szfqcu4 {
+  border-color: var(--vinyasa-status-error-text);
+  background-color: var(--vinyasa-status-error-text);
+  color: var(--vinyasa-status-error-bg);
+}
+
+._1szfqcu5 {
+  font-size: 1.125rem;
+  display: inline-flex;
+}
+
+._1szfqcu6 {
+  border: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  cursor: pointer;
+}
+
+._1szfqcu6:hover {
+  border-color: var(--vinyasa-primary);
+}
+
+._1szfqcu6:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+._1szfqcu7 {
+  min-width: 0;
+  padding-top: var(--vinyasa-space2);
+}
+
+[data-orientation="vertical"] ._1szfqcu7 {
+  min-width: auto;
+  padding-top: 0;
+  padding-left: var(--vinyasa-space3);
+  padding-bottom: var(--vinyasa-space5);
+}
+
+li[data-orientation="vertical"]:last-child ._1szfqcu7 {
+  padding-bottom: 0;
+}
+
+._1szfqcu8 {
+  overflow-wrap: break-word;
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  font-weight: var(--vinyasa-font-weight-medium);
+  color: var(--vinyasa-text-muted);
+  display: block;
+}
+
+[data-state="current"] ._1szfqcu8, [data-state="completed"] ._1szfqcu8 {
+  color: var(--vinyasa-text-default);
+}
+
+[data-state="error"] ._1szfqcu8 {
+  color: var(--vinyasa-status-error-text);
+}
+
+._1szfqcu9 {
+  overflow-wrap: break-word;
+  margin-top: var(--vinyasa-space1);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-xs);
+  color: var(--vinyasa-text-muted);
+  display: block;
+}
+

package/dist/esm/375.js

@@ -0,0 +1,120 @@
+import "./375.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangleIcon, CheckIcon } from "@vinyasa/icons";
+import { useThemedRef } from "@vinyasa/tokens";
+import { createContext, forwardRef, useContext } from "react";
+var connector = '_1szfqcu3';
+var content = '_1szfqcu7';
+var description = '_1szfqcu9';
+var indicator = '_1szfqcu4';
+var indicatorArea = '_1szfqcu2';
+var indicatorButton = '_1szfqcu6 _1szfqcu4';
+var indicatorIcon = '_1szfqcu5';
+var label = '_1szfqcu8';
+var root = '_1szfqcu0';
+var step = '_1szfqcu1';
+const StepperContext = /*#__PURE__*/ createContext({
+    orientation: 'horizontal'
+});
+const StepperRoot = /*#__PURE__*/ forwardRef(({ orientation = 'horizontal', className, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
+    return /*#__PURE__*/ jsx(StepperContext.Provider, {
+        value: {
+            orientation
+        },
+        children: /*#__PURE__*/ jsx("ol", {
+            ref: themedRef,
+            "data-orientation": orientation,
+            className: className ? `${root} ${className}` : root,
+            ...rest
+        })
+    });
+});
+StepperRoot.displayName = 'StepperRoot';
+const StepperStep = ({ state = 'upcoming', className, ...rest })=>{
+    const { orientation } = useContext(StepperContext);
+    return /*#__PURE__*/ jsx("li", {
+        "data-state": state,
+        "data-orientation": orientation,
+        className: className ? `${step} ${className}` : step,
+        ...rest
+    });
+};
+StepperStep.displayName = 'StepperStep';
+const StepperIndicator = ({ children, onClick, className, ...rest })=>/*#__PURE__*/ jsxs("div", {
+        className: indicatorArea,
+        children: [
+            onClick ? /*#__PURE__*/ jsx("button", {
+                type: "button",
+                onClick: onClick,
+                className: className ? `${indicatorButton} ${className}` : indicatorButton,
+                ...rest,
+                children: children
+            }) : /*#__PURE__*/ jsx("span", {
+                className: className ? `${indicator} ${className}` : indicator,
+                children: children
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: connector,
+                "aria-hidden": "true"
+            })
+        ]
+    });
+StepperIndicator.displayName = 'StepperIndicator';
+const StepperContent = ({ className, ...rest })=>/*#__PURE__*/ jsx("div", {
+        className: className ? `${content} ${className}` : content,
+        ...rest
+    });
+StepperContent.displayName = 'StepperContent';
+const StepperLabel = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${label} ${className}` : label,
+        ...rest
+    });
+StepperLabel.displayName = 'StepperLabel';
+const StepperDescription = ({ className, ...rest })=>/*#__PURE__*/ jsx("span", {
+        className: className ? `${description} ${className}` : description,
+        ...rest
+    });
+StepperDescription.displayName = "StepperDescription";
+const StepperImpl = ({ steps, activeStep, onStepClick, ...rest })=>/*#__PURE__*/ jsx(StepperRoot, {
+        ...rest,
+        children: steps.map((stepSpec, index)=>{
+            const state = stepSpec.error ? 'error' : index < activeStep ? 'completed' : index === activeStep ? 'current' : 'upcoming';
+            return /*#__PURE__*/ jsxs(StepperStep, {
+                state: state,
+                children: [
+                    /*#__PURE__*/ jsx(StepperIndicator, {
+                        onClick: onStepClick ? ()=>{
+                            onStepClick(index);
+                        } : void 0,
+                        "aria-label": 'string' == typeof stepSpec.label ? `Step ${String(index + 1)}: ${stepSpec.label}` : void 0,
+                        children: 'completed' === state ? /*#__PURE__*/ jsx(CheckIcon, {
+                            className: indicatorIcon
+                        }) : 'error' === state ? /*#__PURE__*/ jsx(AlertTriangleIcon, {
+                            className: indicatorIcon
+                        }) : index + 1
+                    }),
+                    /*#__PURE__*/ jsxs(StepperContent, {
+                        children: [
+                            /*#__PURE__*/ jsx(StepperLabel, {
+                                children: stepSpec.label
+                            }),
+                            stepSpec.description ? /*#__PURE__*/ jsx(StepperDescription, {
+                                children: stepSpec.description
+                            }) : null
+                        ]
+                    })
+                ]
+            }, stepSpec.key ?? index);
+        })
+    });
+StepperImpl.displayName = 'Stepper';
+const Stepper = Object.assign(StepperImpl, {
+    Root: StepperRoot,
+    Step: StepperStep,
+    Indicator: StepperIndicator,
+    Content: StepperContent,
+    Label: StepperLabel,
+    Description: StepperDescription
+});
+export { Stepper };

package/dist/esm/555.css

@@ -0,0 +1,171 @@
+._1nqk0670 {
+  border-right: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  background-color: var(--vinyasa-surface);
+  height: 100%;
+  transition: width var(--vinyasa-motion-duration-normal) var(--vinyasa-motion-easing-standard);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+._1nqk0671 {
+  width: 4.5rem;
+}
+
+._1nqk0672 {
+  width: 16rem;
+}
+
+._1nqk0673 {
+  min-height: 3.5rem;
+  padding: 0 var(--vinyasa-space3);
+  border-bottom: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+._1nqk0674 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+._1nqk0675 {
+  padding: var(--vinyasa-space2);
+  gap: var(--vinyasa-space4);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow-y: auto;
+}
+
+._1nqk0676 {
+  padding: var(--vinyasa-space2);
+  border-top: var(--vinyasa-border-width-thin) solid var(--vinyasa-border-color-default);
+  flex-shrink: 0;
+}
+
+._1nqk0677 {
+  gap: var(--vinyasa-space1);
+  flex-direction: column;
+  display: flex;
+}
+
+._1nqk0678 {
+  padding: var(--vinyasa-space2) var(--vinyasa-space3) 0;
+  font-size: var(--vinyasa-font-size-xs);
+  font-weight: var(--vinyasa-font-weight-medium);
+  color: var(--vinyasa-text-muted);
+  white-space: nowrap;
+  transition: opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+}
+
+._1nqk0679 {
+  opacity: 0;
+  pointer-events: none;
+}
+
+._1nqk067a {
+  opacity: 1;
+}
+
+._1nqk067b {
+  align-items: center;
+  gap: var(--vinyasa-space3);
+  padding: var(--vinyasa-space2) var(--vinyasa-space3);
+  border-radius: var(--vinyasa-radius-sm);
+  color: var(--vinyasa-on-secondary);
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-sm);
+  cursor: pointer;
+  text-align: left;
+  background-color: #0000;
+  border: none;
+  width: 100%;
+  text-decoration: none;
+  display: flex;
+}
+
+._1nqk067b:hover:not(:disabled) {
+  background-color: var(--vinyasa-secondary);
+}
+
+._1nqk067b:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: -2px;
+}
+
+._1nqk067b:disabled {
+  opacity: var(--vinyasa-opacity-disabled);
+  cursor: not-allowed;
+}
+
+._1nqk067c {
+  background-color: var(--vinyasa-tertiary);
+  color: var(--vinyasa-on-tertiary);
+  font-weight: var(--vinyasa-font-weight-medium);
+}
+
+._1nqk067d {
+  justify-content: center;
+}
+
+._1nqk067e {
+  flex-shrink: 0;
+  font-size: 1.125rem;
+  display: inline-flex;
+}
+
+._1nqk067f {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: opacity var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  overflow: hidden;
+}
+
+._1nqk067g {
+  opacity: 0;
+  width: 0;
+}
+
+._1nqk067h {
+  opacity: 1;
+}
+
+._1nqk067i {
+  border-radius: var(--vinyasa-radius-sm);
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--vinyasa-text-muted);
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-left: auto;
+  display: inline-flex;
+}
+
+._1nqk067i:hover {
+  background-color: var(--vinyasa-secondary);
+  color: var(--vinyasa-on-secondary);
+}
+
+._1nqk067i:focus-visible {
+  outline: 2px solid var(--vinyasa-focus);
+  outline-offset: 2px;
+}
+
+._1nqk067j {
+  transition: transform var(--vinyasa-motion-duration-fast) var(--vinyasa-motion-easing-standard);
+  display: inline-flex;
+}
+
+._1nqk067k {
+  transform: rotate(180deg);
+}
+