@vincihairclinic/design-system 0.1.2 → 0.2.0

package/README.md

@@ -23,6 +23,7 @@ use these guides:
 - [Conversational form](docs/components/conversational-form.md)
 - [Navigation](docs/components/navigation.md)
 - [Cards and content](docs/components/cards.md)
+- [Dashboard components](docs/components/dashboard.md)
 - [React](docs/platforms/react.md)
 - [WordPress and Elementor](docs/platforms/wordpress-elementor.md)
 - [Contributing](docs/contributing.md)
@@ -31,12 +32,12 @@ use these guides:
 ## React
 
 ```sh
-npm install @vinci-hair-clinic/design-system
+npm install @vincihairclinic/design-system
 ```
 
 ```tsx
-import "@vinci-hair-clinic/design-system/styles.css";
-import { Button } from "@vinci-hair-clinic/design-system";
+import "@vincihairclinic/design-system/styles.css";
+import { Button } from "@vincihairclinic/design-system";
 
 export function BookingCallToAction() {
   return <Button>Book a consultation</Button>;
@@ -51,7 +52,7 @@ See the [Button API](docs/components/button.md) for variants and native props.
 make plugin
 ```
 
-Install `artifacts/vinci-design-system-wordpress-0.1.0.zip` from the WordPress
+Install the versioned ZIP from `artifacts/` through the WordPress
 plugin screen. Apply documented `vinci-*` classes through Elementor's
 **Advanced → CSS Classes** field.
 

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(index_exports, {
   Checkbox: () => Checkbox,
   ChoiceChip: () => ChoiceChip,
   ConversationPanel: () => ConversationPanel,
+  DashboardShell: () => DashboardShell,
   FieldWithAction: () => FieldWithAction,
   Footer: () => Footer,
   Header: () => Header,
@@ -32,6 +33,8 @@ __export(index_exports, {
   LocationCard: () => LocationCard,
   LocationCombobox: () => LocationCombobox,
   MessageBubble: () => MessageBubble,
+  Modal: () => Modal,
+  MultiSelect: () => MultiSelect,
   NorwoodOptionCard: () => NorwoodOptionCard,
   NumberInput: () => NumberInput,
   PasswordInput: () => PasswordInput,
@@ -41,6 +44,7 @@ __export(index_exports, {
   ResultsCard: () => ResultsCard,
   StickyCTABar: () => StickyCTABar,
   Switch: () => Switch,
+  Table: () => Table,
   TestimonialCard: () => TestimonialCard,
   TextInput: () => TextInput,
   TypingIndicator: () => TypingIndicator
@@ -908,6 +912,526 @@ function PinInput({
     error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "vinci-form-helper is-error", id: errorId, children: error })
   ] });
 }
+
+// src/components/MultiSelect.tsx
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ChevronIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m8 10 4 4 4-4" }) });
+}
+function RemoveIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m4.5 4.5 7 7m0-7-7 7" }) });
+}
+function MultiSelect({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder,
+  removeLabel,
+  instructions
+}) {
+  const generatedId = (0, import_react10.useId)();
+  const rootRef = (0, import_react10.useRef)(null);
+  const triggerRef = (0, import_react10.useRef)(null);
+  const optionRefs = (0, import_react10.useRef)([]);
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
+  const labelId = `${generatedId}-label`;
+  const summaryId = `${generatedId}-summary`;
+  const listboxId = `${generatedId}-listbox`;
+  const instructionsId = `${generatedId}-instructions`;
+  const selectedOptions = options.filter((option) => value.includes(option.value));
+  (0, import_react10.useEffect)(() => {
+    if (!isOpen) return;
+    function handlePointerDown(event) {
+      if (!rootRef.current?.contains(event.target)) setIsOpen(false);
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [isOpen]);
+  function focusOption(index) {
+    setActiveIndex(index);
+    requestAnimationFrame(() => optionRefs.current[index]?.focus());
+  }
+  function openList(preferredIndex) {
+    if (options.length === 0) return;
+    const firstSelectedIndex = options.findIndex(
+      (option) => value.includes(option.value)
+    );
+    const nextIndex = preferredIndex ?? (firstSelectedIndex >= 0 ? firstSelectedIndex : 0);
+    setIsOpen(true);
+    focusOption(nextIndex);
+  }
+  function closeList(returnFocus) {
+    setIsOpen(false);
+    if (returnFocus) requestAnimationFrame(() => triggerRef.current?.focus());
+  }
+  function toggleOption(optionValue) {
+    const selected = value.includes(optionValue);
+    onChange(
+      options.filter(
+        (option) => selected ? value.includes(option.value) && option.value !== optionValue : value.includes(option.value) || option.value === optionValue
+      ).map((option) => option.value)
+    );
+  }
+  function handleTriggerKeyDown(event) {
+    if (options.length > 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      openList(event.key === "ArrowUp" ? options.length - 1 : void 0);
+    }
+  }
+  function handleControlClick(event) {
+    const target = event.target;
+    if (target.closest("[data-multiselect-chip]") || target.closest("button")) {
+      return;
+    }
+    if (!isOpen) openList();
+  }
+  function handleOptionKeyDown(event, index, optionValue) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusOption((index + 1) % options.length);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusOption((index - 1 + options.length) % options.length);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      focusOption(event.key === "Home" ? 0 : options.length - 1);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggleOption(optionValue);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeList(true);
+      return;
+    }
+    if (event.key === "Tab") setIsOpen(false);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: rootRef, className: "vinci-multiselect__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id: labelId, className: "vinci-multiselect__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: instructionsId, className: "vinci-multiselect__visually-hidden", children: instructions }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className: `vinci-multiselect__control ${isOpen ? "vinci-multiselect__control-open" : ""}`,
+        onClick: handleControlClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { id: summaryId, className: "vinci-multiselect__selection", children: selectedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "vinci-multiselect__placeholder", children: placeholder }) : selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "span",
+            {
+              className: "vinci-multiselect__chip",
+              "data-multiselect-chip": true,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: option.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "vinci-multiselect__remove-button",
+                    "aria-label": removeLabel.replace("{label}", option.label),
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      toggleOption(option.value);
+                      requestAnimationFrame(() => triggerRef.current?.focus());
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RemoveIcon, {})
+                  }
+                )
+              ]
+            },
+            option.value
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              className: "vinci-multiselect__trigger",
+              "aria-labelledby": `${labelId} ${summaryId}`,
+              "aria-describedby": instructionsId,
+              "aria-haspopup": "listbox",
+              "aria-expanded": isOpen,
+              "aria-controls": listboxId,
+              onClick: () => isOpen ? closeList(false) : openList(),
+              onKeyDown: handleTriggerKeyDown,
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronIcon, {})
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "ul",
+      {
+        id: listboxId,
+        className: "vinci-multiselect__listbox",
+        role: "listbox",
+        "aria-labelledby": labelId,
+        "aria-multiselectable": "true",
+        children: options.map((option, index) => {
+          const selected = value.includes(option.value);
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "li",
+            {
+              ref: (element) => {
+                optionRefs.current[index] = element;
+              },
+              className: "vinci-multiselect__option",
+              role: "option",
+              "aria-selected": selected,
+              tabIndex: activeIndex === index ? 0 : -1,
+              "data-active": activeIndex === index,
+              onClick: () => toggleOption(option.value),
+              onFocus: () => setActiveIndex(index),
+              onKeyDown: (event) => handleOptionKeyDown(event, index, option.value),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "vinci-multiselect__option-indicator", "aria-hidden": "true", children: selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "m3.5 8 3 3 6-6" }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: option.label })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/components/Modal.tsx
+var import_react11 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Modal = (0, import_react11.forwardRef)(function Modal2({
+  open,
+  onClose,
+  title,
+  description,
+  closeLabel,
+  children,
+  size = "default",
+  className
+}, ref) {
+  const dialogRef = (0, import_react11.useRef)(null);
+  const timerRef = (0, import_react11.useRef)(null);
+  const returnFocusRef = (0, import_react11.useRef)(null);
+  const id = (0, import_react11.useId)();
+  const titleId = `${id}-title`;
+  const descriptionId = `${id}-description`;
+  function close() {
+    const dialog = dialogRef.current;
+    if (!dialog?.open || dialog.dataset.closing === "true") return;
+    dialog.dataset.closing = "true";
+    const duration = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 100 : 160;
+    timerRef.current = window.setTimeout(() => {
+      dialog.close();
+      delete dialog.dataset.closing;
+      returnFocusRef.current?.focus();
+      onClose();
+    }, duration);
+  }
+  (0, import_react11.useImperativeHandle)(ref, () => ({ close }));
+  (0, import_react11.useEffect)(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+      dialog.close();
+      delete dialog.dataset.closing;
+      returnFocusRef.current?.focus();
+    }
+  }, [open]);
+  (0, import_react11.useEffect)(() => () => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: ["vinci-modal", size === "compact" && "vinci-modal--compact", className].filter(Boolean).join(" "),
+      "aria-labelledby": titleId,
+      "aria-describedby": description ? descriptionId : void 0,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) close();
+      },
+      onCancel: (event) => {
+        event.preventDefault();
+        close();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "vinci-modal__panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "vinci-modal__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: titleId, children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: descriptionId, children: description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "vinci-modal__close", "aria-label": closeLabel, onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 6 12 12M18 6 6 18" }) }) })
+        ] }),
+        children
+      ] })
+    }
+  );
+});
+
+// src/components/Table.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Table({ caption, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "vinci-table-scroll", role: "region", "aria-label": caption, tabIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: ["vinci-table", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("caption", { className: "vinci-visually-hidden", children: caption }),
+    children
+  ] }) });
+}
+
+// src/components/DashboardShell.tsx
+var import_react12 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Icon({ name }) {
+  const paths = {
+    chevron: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m8 10 4 4 4-4" }),
+    menu: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M4 7h16M4 12h16M4 17h16" }),
+    close: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m6 6 12 12M18 6 6 18" }),
+    search: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "11", cy: "11", r: "6.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m16 16 4 4" })
+    ] }),
+    notification: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M18 9a6 6 0 0 0-12 0c0 7-3 7-3 8.5h18C21 16 18 16 18 9Z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 20h4" })
+    ] }),
+    settings: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.86 2.86-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21H9.5v-.1A1.7 1.7 0 0 0 8.4 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.86-2.86.06-.06A1.7 1.7 0 0 0 4 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H2V9.5h.3A1.7 1.7 0 0 0 4 8.4a1.7 1.7 0 0 0-.34-1.88l-.06-.06L6.46 3.6l.06.06A1.7 1.7 0 0 0 8.4 4a1.7 1.7 0 0 0 1-.6A1.7 1.7 0 0 0 9.8 2.3V2h4.1v.3A1.7 1.7 0 0 0 15 4a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.86 2.86-.06.06A1.7 1.7 0 0 0 19.4 8.4a1.7 1.7 0 0 0 .6 1 1.7 1.7 0 0 0 1.1.4h.1v4.1h-.1A1.7 1.7 0 0 0 19.4 15Z" })
+    ] }),
+    logout: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M10 5H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "m15 8 4 4-4 4m4-4H9" })
+    ] })
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: paths[name] });
+}
+function Navigation({ groups, activePath, idPrefix, label, renderLink, onNavigate }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { className: "vinci-dashboard__navigation", "aria-label": label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "vinci-dashboard__nav-track", "aria-hidden": "true" }),
+    groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      NavigationGroup,
+      {
+        group,
+        activePath,
+        panelId: `${idPrefix}-${group.id}-items`,
+        renderLink,
+        onNavigate
+      },
+      `${group.id}-${activePath}`
+    ))
+  ] });
+}
+function NavigationGroup({ group, activePath, panelId, renderLink, onNavigate }) {
+  const activeIndex = group.items.findIndex((item) => item.href === activePath);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(activeIndex >= 0);
+  const activeIndicatorStyle = { "--active-offset": `${Math.max(activeIndex, 0) * 56}px` };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__nav-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "vinci-dashboard__nav-group-trigger",
+        "aria-expanded": isOpen,
+        "aria-controls": panelId,
+        onClick: () => setIsOpen((value) => !value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: group.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "vinci-dashboard__nav-chevron", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "chevron" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: panelId, className: `vinci-dashboard__nav-group-panel ${isOpen ? "vinci-dashboard__nav-group-panel-open" : ""}`, "aria-hidden": !isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "vinci-dashboard__nav-group-panel-inner", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__nav-items", style: activeIndicatorStyle, children: [
+      activeIndex >= 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "vinci-dashboard__nav-active-indicator", "aria-hidden": "true" }),
+      group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react12.Fragment, { children: renderLink({
+        href: item.href,
+        className: `vinci-dashboard__nav-link ${activePath === item.href ? "vinci-dashboard__nav-link-active" : ""}`,
+        "aria-current": activePath === item.href ? "page" : void 0,
+        tabIndex: isOpen ? void 0 : -1,
+        onClick: onNavigate,
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "vinci-dashboard__nav-icon", children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: item.label })
+        ] })
+      }) }, item.href))
+    ] }) }) })
+  ] });
+}
+function DashboardShell({
+  children,
+  brand,
+  navigationGroups,
+  activePath,
+  title,
+  user,
+  onSignOut,
+  labels,
+  renderLink = (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { ...props }),
+  footer
+}) {
+  const id = (0, import_react12.useId)();
+  const dialogRef = (0, import_react12.useRef)(null);
+  const menuButtonRef = (0, import_react12.useRef)(null);
+  const profileRef = (0, import_react12.useRef)(null);
+  const profileButtonRef = (0, import_react12.useRef)(null);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react12.useState)(false);
+  (0, import_react12.useEffect)(() => {
+    if (!isProfileOpen) return;
+    function dismiss(event) {
+      if (!profileRef.current?.contains(event.target)) {
+        setIsProfileOpen(false);
+        profileButtonRef.current?.focus();
+      }
+    }
+    function escape(event) {
+      if (event.key === "Escape") {
+        setIsProfileOpen(false);
+        profileButtonRef.current?.focus();
+      }
+    }
+    document.addEventListener("pointerdown", dismiss);
+    document.addEventListener("keydown", escape);
+    return () => {
+      document.removeEventListener("pointerdown", dismiss);
+      document.removeEventListener("keydown", escape);
+    };
+  }, [isProfileOpen]);
+  function closeMenu() {
+    dialogRef.current?.close();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__shell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("aside", { className: "vinci-dashboard__sidebar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "vinci-dashboard__brand", children: brand }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Navigation,
+        {
+          groups: navigationGroups,
+          activePath,
+          idPrefix: `${id}-sidebar`,
+          label: labels.navigation,
+          renderLink
+        }
+      ),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "vinci-dashboard__sidebar-footer", children: footer })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__workspace", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { className: "vinci-dashboard__header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            ref: menuButtonRef,
+            type: "button",
+            className: "vinci-dashboard__icon-button vinci-dashboard__menu-button",
+            "aria-label": labels.openMenu,
+            onClick: () => dialogRef.current?.showModal(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "menu" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: "vinci-dashboard__search-field", title: labels.comingSoon, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "vinci-visually-hidden", children: labels.search }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "search" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "search", placeholder: labels.searchPlaceholder, disabled: true })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__header-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "vinci-dashboard__header-action",
+              "aria-label": `${labels.notifications} \u2014 ${labels.comingSoon}`,
+              title: `${labels.notifications} \u2014 ${labels.comingSoon}`,
+              disabled: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "notification" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "vinci-dashboard__header-action",
+              "aria-label": `${labels.settings} \u2014 ${labels.comingSoon}`,
+              title: `${labels.settings} \u2014 ${labels.comingSoon}`,
+              disabled: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "settings" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: profileRef, className: "vinci-dashboard__profile", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                ref: profileButtonRef,
+                type: "button",
+                className: "vinci-dashboard__profile-button",
+                "aria-label": labels.profile.replace("{name}", user.name),
+                "aria-expanded": isProfileOpen,
+                "aria-controls": `${id}-profile-menu`,
+                onClick: () => setIsProfileOpen((value) => !value),
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "vinci-dashboard__avatar", "aria-hidden": "true", children: user.initials })
+              }
+            ),
+            isProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { id: `${id}-profile-menu`, className: "vinci-dashboard__profile-menu", role: "region", "aria-label": labels.profileMenu, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "vinci-dashboard__profile-eyebrow", children: labels.signedInAs }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "vinci-dashboard__profile-name", children: user.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "vinci-dashboard__profile-email", children: user.email }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("button", { type: "button", className: "vinci-dashboard__sign-out", onClick: () => {
+                setIsProfileOpen(false);
+                onSignOut();
+              }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "logout" }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: labels.signOut })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("main", { className: "vinci-dashboard__main", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h1", { className: "vinci-visually-hidden", children: title }),
+        children
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "dialog",
+      {
+        ref: dialogRef,
+        className: "vinci-dashboard__drawer",
+        "aria-label": labels.navigation,
+        onClick: (event) => {
+          if (event.target === event.currentTarget) closeMenu();
+        },
+        onClose: () => menuButtonRef.current?.focus(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__drawer-panel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "vinci-dashboard__drawer-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "vinci-dashboard__brand", children: brand }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "vinci-dashboard__icon-button", "aria-label": labels.closeMenu, onClick: closeMenu, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "close" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Navigation,
+            {
+              groups: navigationGroups,
+              activePath,
+              idPrefix: `${id}-drawer`,
+              label: labels.navigation,
+              renderLink,
+              onNavigate: closeMenu
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnnouncementBar,
@@ -915,6 +1439,7 @@ function PinInput({
   Checkbox,
   ChoiceChip,
   ConversationPanel,
+  DashboardShell,
   FieldWithAction,
   Footer,
   Header,
@@ -922,6 +1447,8 @@ function PinInput({
   LocationCard,
   LocationCombobox,
   MessageBubble,
+  Modal,
+  MultiSelect,
   NorwoodOptionCard,
   NumberInput,
   PasswordInput,
@@ -931,6 +1458,7 @@ function PinInput({
   ResultsCard,
   StickyCTABar,
   Switch,
+  Table,
   TestimonialCard,
   TextInput,
   TypingIndicator