@common-origin/design-system 3.0.0 → 3.2.0

package/dist/components/molecules/SidebarNavSection/SidebarNavSection.mjs

@@ -0,0 +1,202 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId, useState, useEffect } from 'react';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import tokensJson from '../../../styles/tokens.json.mjs';
+import { rowRadius, interactiveRow, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { useSidebarNav } from '../SidebarNavItem/SidebarNavContext.mjs';
+import { SidebarNavItem } from '../SidebarNavItem/SidebarNavItem.mjs';
+import { Fold } from '../SidebarNavItem/sidebarNavMotion.mjs';
+
+// How long the items take to show or hide: the clip lifts after this even if no transition ran
+// (reduced motion, or a background tab)
+var COLLAPSE_MS = parseInt(tokensJson.semantic.motion.duration.moderate, 10);
+var semantic = tokens.semantic;
+var space = semantic.space,
+  color = semantic.color,
+  motion = semantic.motion,
+  size = semantic.size,
+  border = semantic.border,
+  typography = semantic.typography;
+// The space above a section is the same expanded and in the rail, so the switch never shifts rows;
+// only the rule's colour changes: clear when the label separates the section, visible in the rail,
+// where there's no label (issue 348)
+var Section = /*#__PURE__*/styled(Fold).withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavSection__Section",
+  componentId: "sc-16cbmnb-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  padding-top: ", ";\n  border-top: ", " solid ", ";\n\n  /* Nothing above to separate it from */\n  &:first-child {\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n"], ["\n  margin-top: ", ";\n  padding-top: ", ";\n  border-top: ", " solid ", ";\n\n  /* Nothing above to separate it from */\n  &:first-child {\n    margin-top: 0;\n    padding-top: 0;\n    border-top: none;\n  }\n"])), space[200], space[100], border.width.thin, function (_a) {
+  var $collapsed = _a.$collapsed;
+  return $collapsed ? color.border["default"] : 'transparent';
+});
+var Header = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarNavSection__Header",
+  componentId: "sc-16cbmnb-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  min-height: ", ";\n"
+// The label's look: quiet, small and muted, so the items lead
+])), space[100], size.row.sm);
+// The label's look: quiet, small and muted, so the items lead
+var labelText = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n"], ["\n  font: ", ";\n  color: ", ";\n"])), typography.caption, color.text.muted);
+var StaticLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SidebarNavSection__StaticLabel",
+  componentId: "sc-16cbmnb-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"], ["\n  ", "\n  flex: 1;\n  min-width: 0;\n  padding: 0 ", ";\n"])), labelText, space.inset.sm);
+var Disclosure = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavSection__Disclosure",
+  componentId: "sc-16cbmnb-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  padding: 0 ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n\n  /* The caret points down when shown and right when hidden */\n  & > span:first-child {\n    transition: transform ", " ", ";\n    transform: rotate(", ");\n  }\n\n  ", " {\n    & > span:first-child {\n      transition: none;\n    }\n  }\n"
+// The items' height animates from nothing to their own height with grid rows, so no
+// "no limit" max-height is needed. Once hidden, the items leave the keyboard and screen readers.
+])), labelText, space[100], size.row.sm, space.inset.sm, rowRadius, motion.duration.fast, motion.easing.decelerate, interactiveRow(), border.focus, border.focusOffset, motion.duration.fast, motion.easing.standard, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '0deg' : '-90deg';
+}, reducedMotion);
+// The items' height animates from nothing to their own height with grid rows, so no
+// "no limit" max-height is needed. Once hidden, the items leave the keyboard and screen readers.
+var Collapse = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavSection__Collapse",
+  componentId: "sc-16cbmnb-4"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: grid;\n  grid-template-rows: ", ";\n  opacity: ", ";\n  /* Shown items inherit, so a section folded away in the rail hides them too */\n  visibility: ", ";\n  /* The items fold and fade together (issue 348) */\n  transition: grid-template-rows ", " ", ",\n    opacity ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-rows: ", ";\n  opacity: ", ";\n  /* Shown items inherit, so a section folded away in the rail hides them too */\n  visibility: ", ";\n  /* The items fold and fade together (issue 348) */\n  transition: grid-template-rows ", " ", ",\n    opacity ", " ", ",\n    visibility ", " ", ";\n\n  ", " {\n    transition: opacity ", " ", ",\n      visibility ", " ", ";\n  }\n"
+// Clipped only while hidden or moving: once shown, an item's Badge can overhang its row
+])), function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? '1fr' : '0fr';
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? 1 : 0;
+}, function (_a) {
+  var $expanded = _a.$expanded;
+  return $expanded ? 'inherit' : 'hidden';
+}, motion.duration.moderate, motion.easing.decelerate, motion.duration.moderate, motion.easing.decelerate, motion.duration.moderate, motion.easing.decelerate, reducedMotion, motion.duration.fast, motion.easing.decelerate, motion.duration.fast, motion.easing.decelerate);
+// Clipped only while hidden or moving: once shown, an item's Badge can overhang its row
+var List = /*#__PURE__*/styled.ul.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "SidebarNavSection__List",
+  componentId: "sc-16cbmnb-5"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"], ["\n  min-height: 0;\n  overflow: ", ";\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n"
+/**
+ * A labelled group of SidebarNavItems (#328), optionally collapsible, with one optional action.
+ * In the rail its label and action are hidden and a rule separates it from the section above.
+ */])), function (_a) {
+  var $clip = _a.$clip;
+  return $clip ? 'hidden' : 'visible';
+});
+/**
+ * A labelled group of SidebarNavItems (#328), optionally collapsible, with one optional action.
+ * In the rail its label and action are hidden and a rule separates it from the section above.
+ */
+var SidebarNavSection = function SidebarNavSection(_a) {
+  var label = _a.label,
+    children = _a.children,
+    _b = _a.collapsible,
+    collapsible = _b === void 0 ? false : _b,
+    expandedProp = _a.expanded,
+    _c = _a.defaultExpanded,
+    defaultExpanded = _c === void 0 ? true : _c,
+    onExpandedChange = _a.onExpandedChange,
+    action = _a.action,
+    dataTestId = _a["data-testid"];
+  var _d = useSidebarNav(),
+    collapsed = _d.collapsed,
+    inNav = _d.inNav;
+  var labelId = useId();
+  var listId = useId();
+  var _e = useState(defaultExpanded),
+    uncontrolledExpanded = _e[0],
+    setUncontrolledExpanded = _e[1];
+  var _f = useState(false),
+    animating = _f[0],
+    setAnimating = _f[1];
+  var isControlled = expandedProp !== undefined;
+  var userExpanded = isControlled ? expandedProp : uncontrolledExpanded;
+  // The rail has no disclosure button, so a section always shows its items there
+  var expanded = !collapsible || collapsed || userExpanded;
+  useEffect(function () {
+    if (!animating) return;
+    var timer = setTimeout(function () {
+      return setAnimating(false);
+    }, COLLAPSE_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [animating]);
+  var toggle = function toggle() {
+    var next = !expanded;
+    setAnimating(true);
+    if (!isControlled) setUncontrolledExpanded(next);
+    onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+  };
+  // The rail shows items by their icons only; a section with none has nothing to show there, so it
+  // isn't drawn at all, not even its separating rule. Items wrapped in other components count as
+  // showing, since their icons can't be seen from here.
+  var showsInRail = React.Children.toArray(children).some(function (child) {
+    return ! /*#__PURE__*/React.isValidElement(child) || child.type !== SidebarNavItem || Boolean(child.props.icon);
+  });
+  // The header stays mounted, folding away in the rail; the list keeps its name from it there
+  var header = jsxs(Header, {
+    children: [collapsible ? jsxs(Disclosure, {
+      type: "button",
+      id: labelId,
+      "aria-expanded": expanded,
+      "aria-controls": listId,
+      "$expanded": expanded,
+      onClick: toggle,
+      children: [jsx(Icon, {
+        name: "caretDown",
+        size: "sm",
+        iconColor: "inherit"
+      }), label]
+    }) : jsx(StaticLabel, {
+      id: labelId,
+      children: label
+    }), action]
+  });
+  return (
+    // In a SidebarNav the body is one list, so the section is one of its items
+    // In the rail, a section with nothing to show folds away, rule and all
+    jsx(Section, {
+      as: inNav ? 'li' : 'div',
+      "$open": !collapsed || showsInRail,
+      "$collapsed": collapsed,
+      "data-testid": dataTestId,
+      children: jsxs("div", {
+        children: [jsx(Fold, {
+          "$open": !collapsed,
+          children: jsx("div", {
+            children: header
+          })
+        }), jsx(Collapse, {
+          "$expanded": expanded,
+          onTransitionEnd: function onTransitionEnd(event) {
+            if (event.target === event.currentTarget && event.propertyName === 'grid-template-rows') setAnimating(false);
+          },
+          children: jsx(List, {
+            id: listId,
+            "aria-labelledby": labelId,
+            "$clip": !expanded || animating,
+            children: children
+          })
+        })]
+      })
+    })
+  );
+};
+SidebarNavSection.displayName = 'SidebarNavSection';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { SidebarNavSection };
+//# sourceMappingURL=SidebarNavSection.mjs.map

package/dist/components/molecules/SidebarNavSection/SidebarNavSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavSection.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/SidebarNavSection/index.d.mts

@@ -0,0 +1,2 @@
+export { SidebarNavSection } from './SidebarNavSection.mjs';
+export type { SidebarNavSectionProps } from './SidebarNavSection.mjs';

package/dist/components/molecules/SidebarNavSection/index.d.ts

@@ -0,0 +1,2 @@
+export { SidebarNavSection } from './SidebarNavSection';
+export type { SidebarNavSectionProps } from './SidebarNavSection';

package/dist/components/molecules/TabBar/TabBar.mjs

@@ -5,7 +5,7 @@ import { useRef, useState, useEffect } from 'react';
 import styled$module from 'styled-components';
 const styled = styled$module.default || styled$module;
 import tokens from '../../../lib/cssTokens.mjs';
-import { forcedColors } from '../../../lib/styleUtils.mjs';
+import { rowRadius, forcedColors } from '../../../lib/styleUtils.mjs';
 
 var semantic = tokens.semantic;
 var StyledTabList = /*#__PURE__*/styled.div.withConfig({
@@ -20,7 +20,7 @@ var StyledTab = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-1g9ib0y-1"
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", ";\n  padding: ", " ", ";\n  font: ", ";\n  white-space: nowrap;\n  cursor: ", ";\n  border: none;\n  background: transparent;\n  transition: ", ";\n  position: relative;\n  \n  /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n     The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n  border-radius: ", " ", " 0 0;\n  background-color: ", ";\n  color: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    left: 0;\n    right: 0;\n    height: ", ";\n    background-color: ", ";\n    transition: ", ";\n  }\n\n  /* Forced colours drop the fill, so the selected tab's underline carries its state in the\n     system selection colour (decision 0038) */\n  ", " {\n    &::after {\n      forced-color-adjust: none;\n      background-color: ", ";\n    }\n  }\n\n  &:hover:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active:not(:disabled) {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  /* Disabled state */\n  opacity: ", ";\n  \n  /* Focus state */\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n    z-index: 1;\n  }\n\n"])), semantic.space[200], semantic.space[300], semantic.space[400], tokens.component.button.sizes.medium.font, function (props) {
   return props.$disabled ? 'not-allowed' : 'pointer';
-}, semantic.motion.transition.feedback, semantic.radius.sm, semantic.radius.sm, function (props) {
+}, semantic.motion.transition.feedback, rowRadius, rowRadius, function (props) {
   return props.$isActive ? semantic.color.fill['accent-muted'] : 'transparent';
 }, function (props) {
   return props.$isActive ? semantic.color.text.accent : semantic.color.text.muted;
@@ -63,7 +63,7 @@ var StyledBadge = /*#__PURE__*/styled.span.withConfig({
  *   onTabChange={setActiveTab}
  * />
  * ```
- */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic.radius.full, semantic.color.fill.accent, semantic.color.text.inverse);
+ */])), tokens.component.tabBar.badge.size, tokens.component.tabBar.badge.size, semantic.space[100], tokens.component.tabBar.badge.typography, tokens.component.tabBar.badge.fontWeight, semantic.radius.full, semantic.color.fill.accent, semantic.color.text['on-fill']);
 /**
  * TabBar component for tabbed navigation
  *

package/dist/components/molecules/TransactionListItem/TransactionListItem.mjs

@@ -16,7 +16,7 @@ import { interactiveRow } from '../../../lib/styleUtils.mjs';
 var StyledContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TransactionListItem__StyledContainer",
   componentId: "sc-7yunm0-0"
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", " ", ";\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.component.transactionListItem.minHeight, tokens.semantic.space[300], tokens.semantic.space[300], tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", "; /* follows density with the row's height (decision 0051) */\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: ", ";\n  padding: ", "; /* follows density with the row's height (decision 0051) */\n  background-color: ", ";\n  border-bottom: ", " solid ", ";\n  gap: ", ";\n  transition: background-color ", " ", ";\n  \n  /* A clickable row uses the shared row states (decision 0030) */\n  ", "\n"])), tokens.semantic.size.row.lg, tokens.semantic.space.inset.md, tokens.semantic.surface.base, tokens.semantic.border.width.thin, tokens.semantic.color.border["default"], tokens.semantic.space[300], tokens.semantic.motion.duration.moderate, tokens.semantic.motion.easing.decelerate, function (_a) {
   var $clickable = _a.$clickable;
   return $clickable && "\n    cursor: pointer;\n    ".concat(interactiveRow(), "\n    \n    &:focus-visible {\n      outline: ").concat(tokens.semantic.border.focus, ";\n      outline-offset: calc(-1 * ").concat(tokens.semantic.border.focusOffset, ");\n    }\n  ");
 });

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.d.mts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface Workspace {
+    /** Identifies the workspace in `value` and `onChange` */
+    id: string;
+    /** The workspace's name */
+    name: string;
+    /** The workspace's logo or picture, shown in its Avatar */
+    picture?: string;
+    /** Secondary text in the menu, such as the plan */
+    description?: string;
+}
+export interface WorkspaceSwitcherProps {
+    /** The workspaces to choose from */
+    workspaces: Workspace[];
+    /** The current workspace's id */
+    value: string;
+    /** Called with a workspace's id when it's chosen */
+    onChange: (id: string) => void;
+    /**
+     * The label of the workspaces group in the menu.
+     * @default 'Workspaces'
+     */
+    label?: string;
+    /**
+     * Actions after the workspaces, such as `<MenuItem>Create workspace</MenuItem>`. They can use
+     * everything a Menu item supports.
+     */
+    children?: React.ReactNode;
+    /** Test identifier for the trigger */
+    'data-testid'?: string;
+}
+/**
+ * Shows the current workspace and switches between workspaces (#330), from SidebarNav's header.
+ * Built on Menu: a labelled group of the workspaces as radio items, then any actions.
+ */
+export declare const WorkspaceSwitcher: {
+    ({ workspaces, value, onChange, label, children, "data-testid": dataTestId, }: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface Workspace {
+    /** Identifies the workspace in `value` and `onChange` */
+    id: string;
+    /** The workspace's name */
+    name: string;
+    /** The workspace's logo or picture, shown in its Avatar */
+    picture?: string;
+    /** Secondary text in the menu, such as the plan */
+    description?: string;
+}
+export interface WorkspaceSwitcherProps {
+    /** The workspaces to choose from */
+    workspaces: Workspace[];
+    /** The current workspace's id */
+    value: string;
+    /** Called with a workspace's id when it's chosen */
+    onChange: (id: string) => void;
+    /**
+     * The label of the workspaces group in the menu.
+     * @default 'Workspaces'
+     */
+    label?: string;
+    /**
+     * Actions after the workspaces, such as `<MenuItem>Create workspace</MenuItem>`. They can use
+     * everything a Menu item supports.
+     */
+    children?: React.ReactNode;
+    /** Test identifier for the trigger */
+    'data-testid'?: string;
+}
+/**
+ * Shows the current workspace and switches between workspaces (#330), from SidebarNav's header.
+ * Built on Menu: a labelled group of the workspaces as radio items, then any actions.
+ */
+export declare const WorkspaceSwitcher: {
+    ({ workspaces, value, onChange, label, children, "data-testid": dataTestId, }: WorkspaceSwitcherProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs

@@ -0,0 +1,133 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import styled$module, { css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { interactiveRow } from '../../../lib/styleUtils.mjs';
+import { Avatar } from '../../atoms/Avatar/Avatar.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { Tooltip } from '../../atoms/Tooltip/Tooltip.mjs';
+import { Menu, MenuGroup, MenuItemRadio, MenuDivider } from '../Menu/Menu.mjs';
+import { useSidebarNav } from '../SidebarNavItem/SidebarNavContext.mjs';
+
+var semantic = tokens.semantic;
+var space = semantic.space,
+  color = semantic.color,
+  motion = semantic.motion,
+  radius = semantic.radius,
+  size = semantic.size,
+  border = semantic.border,
+  typography = semantic.typography;
+var Trigger = /*#__PURE__*/styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "WorkspaceSwitcher__Trigger",
+  componentId: "sc-s35ke-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", ";\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  min-height: ", ";\n  padding: ", " ", ";\n  border: none;\n  border-radius: ", ";\n  background: none;\n  font: ", ";\n  color: ", ";\n  text-align: left;\n  cursor: pointer;\n  transition: background-color ", " ", ";\n\n  ", "\n\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: ", ";\n    outline-offset: calc(-1 * ", ");\n  }\n"])), space[200], size.row.sm, space.inset.xs, space.inset.sm, radius.md, typography.label, color.text["default"], motion.duration.fast, motion.easing.decelerate, interactiveRow(), function (_a) {
+  var $collapsed = _a.$collapsed;
+  return $collapsed && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      justify-content: center;\n      padding: ", ";\n    "], ["\n      justify-content: center;\n      padding: ", ";\n    "])), space.inset.xs);
+}, border.focus, border.focusOffset);
+var Name = /*#__PURE__*/styled.span.withConfig({
+  displayName: "WorkspaceSwitcher__Name",
+  componentId: "sc-s35ke-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+var Decoration = /*#__PURE__*/styled.span.withConfig({
+  displayName: "WorkspaceSwitcher__Decoration",
+  componentId: "sc-s35ke-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: ", ";\n"], ["\n  display: inline-flex;\n  flex-shrink: 0;\n  color: ", ";\n"
+/**
+ * Shows the current workspace and switches between workspaces (#330), from SidebarNav's header.
+ * Built on Menu: a labelled group of the workspaces as radio items, then any actions.
+ */])), color.text.muted);
+/**
+ * Shows the current workspace and switches between workspaces (#330), from SidebarNav's header.
+ * Built on Menu: a labelled group of the workspaces as radio items, then any actions.
+ */
+var WorkspaceSwitcher = function WorkspaceSwitcher(_a) {
+  var workspaces = _a.workspaces,
+    value = _a.value,
+    onChange = _a.onChange,
+    _b = _a.label,
+    label = _b === void 0 ? 'Workspaces' : _b,
+    children = _a.children,
+    dataTestId = _a["data-testid"];
+  var collapsed = useSidebarNav().collapsed;
+  var match = workspaces.find(function (workspace) {
+    return workspace.id === value;
+  });
+  var fallback = !match && workspaces.length > 0 ? workspaces[0].name : undefined;
+  // Showing the first keeps the header usable, but the app's value is wrong, so say so, once per value
+  useEffect(function () {
+    if (fallback) console.warn("WorkspaceSwitcher: no workspace has the id \"".concat(value, "\"; showing \"").concat(fallback, "\""));
+  }, [value, fallback]);
+  var current = match !== null && match !== void 0 ? match : workspaces[0];
+  if (!current) return null;
+  var trigger = jsxs(Trigger, {
+    type: "button",
+    "$collapsed": collapsed,
+    "aria-label": collapsed ? current.name : undefined,
+    "data-testid": dataTestId,
+    children: [jsx(Decoration, {
+      "aria-hidden": "true",
+      children: jsx(Avatar, {
+        name: current.name,
+        picture: current.picture,
+        size: "xs"
+      })
+    }), !collapsed && jsxs(Fragment, {
+      children: [jsx(Name, {
+        children: current.name
+      }), jsx(Decoration, {
+        "aria-hidden": "true",
+        children: jsx(Icon, {
+          name: "caretDown",
+          size: "sm",
+          iconColor: "inherit"
+        })
+      })]
+    })]
+  });
+  return jsxs(Menu, {
+    trigger: collapsed ? jsx(Tooltip, {
+      text: current.name,
+      side: "right",
+      children: trigger
+    }) : trigger,
+    side: collapsed ? 'right' : 'bottom',
+    align: "start",
+    // Lines up with the full-width trigger beneath it (issue 350)
+    matchTriggerWidth: true,
+    children: [jsx(MenuGroup, {
+      label: label,
+      children: workspaces.map(function (workspace) {
+        return jsx(MenuItemRadio, {
+          checked: workspace.id === current.id,
+          // Choosing the current workspace again changes nothing
+          onSelect: function onSelect() {
+            return workspace.id !== current.id && onChange(workspace.id);
+          },
+          icon: jsx(Avatar, {
+            name: workspace.name,
+            picture: workspace.picture,
+            size: "xs"
+          }),
+          description: workspace.description,
+          textValue: workspace.name,
+          children: workspace.name
+        }, workspace.id);
+      })
+    }), children && jsxs(Fragment, {
+      children: [jsx(MenuDivider, {}), jsx(MenuGroup, {
+        children: children
+      })]
+    })]
+  });
+};
+WorkspaceSwitcher.displayName = 'WorkspaceSwitcher';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { WorkspaceSwitcher };
+//# sourceMappingURL=WorkspaceSwitcher.mjs.map

package/dist/components/molecules/WorkspaceSwitcher/WorkspaceSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceSwitcher.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/WorkspaceSwitcher/index.d.mts

@@ -0,0 +1,2 @@
+export { WorkspaceSwitcher } from './WorkspaceSwitcher.mjs';
+export type { WorkspaceSwitcherProps, Workspace } from './WorkspaceSwitcher.mjs';

package/dist/components/molecules/WorkspaceSwitcher/index.d.ts

@@ -0,0 +1,2 @@
+export { WorkspaceSwitcher } from './WorkspaceSwitcher';
+export type { WorkspaceSwitcherProps, Workspace } from './WorkspaceSwitcher';

package/dist/components/molecules/index.d.mts

@@ -14,6 +14,9 @@ export * from './EmptyState/index.mjs';
 export * from './FeatureBlock/index.mjs';
 export * from './Dropdown/index.mjs';
 export * from './List/index.mjs';
+export * from './Menu/index.mjs';
+export * from './SidebarNavItem/index.mjs';
+export * from './SidebarNavSection/index.mjs';
 export * from './Modal/index.mjs';
 export * from './NumberInput/index.mjs';
 export * from './PasswordField/index.mjs';
@@ -23,3 +26,4 @@ export * from './Slider/index.mjs';
 export * from './TabBar/index.mjs';
 export * from './TextField/index.mjs';
 export * from './TransactionListItem/index.mjs';
+export * from './WorkspaceSwitcher/index.mjs';

package/dist/components/molecules/index.d.ts

@@ -14,6 +14,9 @@ export * from './EmptyState';
 export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './List';
+export * from './Menu';
+export * from './SidebarNavItem';
+export * from './SidebarNavSection';
 export * from './Modal';
 export * from './NumberInput';
 export * from './PasswordField';
@@ -23,3 +26,4 @@ export * from './Slider';
 export * from './TabBar';
 export * from './TextField';
 export * from './TransactionListItem';
+export * from './WorkspaceSwitcher';

package/dist/components/organisms/SidebarNav/SidebarNav.d.mts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type SidebarNavContextValue } from '../../molecules/SidebarNavItem/SidebarNavContext.mjs';
+export type SidebarNavWidth = 'narrow' | 'default' | 'wide';
+export interface SidebarNavProps {
+    /** Names the navigation landmark, such as "Main" or "Workspace" */
+    label: string;
+    /**
+     * The body: SidebarNavItems and SidebarNavSections, in order, wrapped in components or Fragments
+     * if you like. It's one list, and scrolls when it's too tall.
+     */
+    children: React.ReactNode;
+    /** Content above the body, such as a WorkspaceSwitcher. The collapse toggle sits beside it. */
+    header?: React.ReactNode;
+    /** Content below the body, such as an upgrade prompt. Hidden in the rail. */
+    footer?: React.ReactNode;
+    /**
+     * The expanded width. Collapsed, it's always the rail.
+     * @default 'default'
+     */
+    width?: SidebarNavWidth;
+    /** Whether it's the icon rail (controlled). Use with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /**
+     * Whether it starts as the rail (uncontrolled). Saving the state between visits is the
+     * product's job.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Called when the toggle collapses or expands it */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Whether it has a collapse toggle. Turn it off where it can't collapse, such as inside a Sheet.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * A router's link component for internal URLs, such as Next's `Link`, used by every item
+     * (decision 0008). Without one, items render plain links.
+     */
+    linkComponent?: SidebarNavContextValue['linkComponent'];
+    /** Test identifier for the nav */
+    'data-testid'?: string;
+}
+/**
+ * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
+ * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
+ * On small screens, place it in a Sheet with `collapsible={false}`.
+ */
+export declare const SidebarNav: {
+    ({ label, children, header, footer, width, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, linkComponent, "data-testid": dataTestId, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/organisms/SidebarNav/SidebarNav.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type SidebarNavContextValue } from '../../molecules/SidebarNavItem/SidebarNavContext';
+export type SidebarNavWidth = 'narrow' | 'default' | 'wide';
+export interface SidebarNavProps {
+    /** Names the navigation landmark, such as "Main" or "Workspace" */
+    label: string;
+    /**
+     * The body: SidebarNavItems and SidebarNavSections, in order, wrapped in components or Fragments
+     * if you like. It's one list, and scrolls when it's too tall.
+     */
+    children: React.ReactNode;
+    /** Content above the body, such as a WorkspaceSwitcher. The collapse toggle sits beside it. */
+    header?: React.ReactNode;
+    /** Content below the body, such as an upgrade prompt. Hidden in the rail. */
+    footer?: React.ReactNode;
+    /**
+     * The expanded width. Collapsed, it's always the rail.
+     * @default 'default'
+     */
+    width?: SidebarNavWidth;
+    /** Whether it's the icon rail (controlled). Use with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /**
+     * Whether it starts as the rail (uncontrolled). Saving the state between visits is the
+     * product's job.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Called when the toggle collapses or expands it */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Whether it has a collapse toggle. Turn it off where it can't collapse, such as inside a Sheet.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * A router's link component for internal URLs, such as Next's `Link`, used by every item
+     * (decision 0008). Without one, items render plain links.
+     */
+    linkComponent?: SidebarNavContextValue['linkComponent'];
+    /** Test identifier for the nav */
+    'data-testid'?: string;
+}
+/**
+ * A product's sidebar navigation (#331): a header, a scrolling body of items and sections, and a
+ * footer, that collapses to an icon rail. Row heights follow density (0051); the width is a prop.
+ * On small screens, place it in a Sheet with `collapsible={false}`.
+ */
+export declare const SidebarNav: {
+    ({ label, children, header, footer, width, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, linkComponent, "data-testid": dataTestId, }: SidebarNavProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};