@vectara/vectara-ui 0.0.2

package/.github/workflows/deploy-pages-site.yml

@@ -0,0 +1,26 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [main]
+
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Build Docs Site
+        env:
+          CI: false
+        run: |
+          npm i
+          npm run buildDocs
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: ./docs/public
+          clean-exclude: pr-preview/

package/.github/workflows/deploy-pr-preview.yml

@@ -0,0 +1,25 @@
+# .github/workflows/preview.yml
+name: Deploy PR preview
+concurrency: preview-${{ github.ref }}
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm i && npm run buildDocs
+        env:
+          CI: false
+        if: github.event.action != 'closed'
+      - uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./docs/public
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview
+          action: auto

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+## `main`
+
+**Bug fixes**
+
+...
+
+**Non-breaking changes**
+
+...
+
+**Breaking changes**
+
+...

package/NO_LICENSE

@@ -0,0 +1,3 @@
+Vectara, Inc. reserves all rights to this repository and its contents. Nobody else may reproduce, distribute, or create derivative works from this copyrighted material.
+
+This applies retroactively to all past versions, branches, and commits created within this repository.

package/lib/components/accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    header: React.ReactNode;
+    children: React.ReactNode;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+};
+export declare const VuiAccordion: ({ header, children, isOpen, setIsOpen, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/accordion/Accordion.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { BiChevronDown, BiChevronRight } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { createId } from "../../utils/createId";
+export const VuiAccordion = (_a) => {
+    var { header, children, isOpen, setIsOpen } = _a, rest = __rest(_a, ["header", "children", "isOpen", "setIsOpen"]);
+    const buttonId = createId();
+    const contentId = createId();
+    const classes = classNames("vuiAccordionHeader", {
+        "vuiAccordionHeader--isOpen": isOpen
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({ className: classes, onClick: () => setIsOpen(!isOpen), id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: isOpen ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiAccordionHeader__title", grow: 1 }, { children: header }))] })) })), isOpen && (_jsx("div", Object.assign({ id: contentId, "aria-labelledby": buttonId }, { children: children })))] }));
+};

package/lib/components/accordion/_index.scss

@@ -0,0 +1,23 @@
+.vuiAccordionHeader {
+  font-size: $fontSizeStandard;
+  border-bottom: 1px solid $borderColorLight;
+  width: 100%;
+  padding: $sizeXs 0;
+  color: $colorSubdued;
+
+  &:hover {
+    color: $colorPrimary;
+    background-color: $colorPrimaryLighterShade;
+    text-decoration: underline;
+  }
+}
+
+.vuiAccordionHeader--isOpen {
+  color: $colorText;
+  border-bottom-color: $borderColor;
+  font-weight: $fontWeightBold;
+}
+
+.vuiAccordionHeader__title {
+  text-align: left;
+}

package/lib/components/accountMenu/AccountMenu.d.ts

@@ -0,0 +1,13 @@
+type AccountMenuInfo = Array<{
+    title: string;
+    value: React.ReactNode;
+}>;
+type Props = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    button: React.ReactElement;
+    info?: AccountMenuInfo;
+    children?: React.ReactNode;
+};
+export declare const VuiAccountMenu: ({ isOpen, setIsOpen, button, info, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/accountMenu/AccountMenu.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VuiPopover } from "../popover/Popover";
+import { VuiSpacer } from "../spacer/Spacer";
+export const VuiAccountMenu = ({ isOpen, setIsOpen, button, info, children }) => {
+    return (_jsx(VuiPopover, Object.assign({ className: "vuiAccountMenu", isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: button, header: info &&
+            info.length > 0 && (_jsx("div", Object.assign({ className: "vuiAccounrMenuHeader" }, { children: info.map((item, index) => (_jsxs("div", Object.assign({ className: "vuiAccountMenuHeaderItem" }, { children: [_jsx("div", Object.assign({ className: "vuiAccountMenuHeaderItem__title" }, { children: item.title })), _jsx("div", Object.assign({ className: "vuiAccountMenuHeaderItem__value" }, { children: item.value })), index < info.length - 1 && _jsx(VuiSpacer, { size: "m" })] }), index))) }))) }, { children: children })));
+};

package/lib/components/accountMenu/_index.scss

@@ -0,0 +1,20 @@
+.vuiAccountMenu {
+  min-width: 260px;
+}
+
+.vuiAccounrMenuHeader {
+  padding: $sizeM;
+  border-bottom: 1px solid $borderColor;
+}
+
+.vuiAccountMenuHeaderItem__title {
+  font-size: $fontSizeSmall;
+  font-weight: $fontWeightBold;
+  color: $colorDarkerShade;
+}
+
+.vuiAccountMenuHeaderItem__value {
+  font-size: $fontSizeStandard;
+  color: $colorDarkerShade;
+  margin-top: $sizeXxs;
+}

package/lib/components/app/AppContent.d.ts

@@ -0,0 +1,9 @@
+import { AppContentPadding } from "./types";
+type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    padding?: AppContentPadding;
+};
+export declare const VuiAppContent: ({ children, className, fullWidth, padding, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/app/AppContent.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const paddingToClassNameMap = {
+    none: "vuiAppContent--paddingNone",
+    xs: "vuiAppContent--paddingXs",
+    s: "vuiAppContent--paddingS",
+    m: "vuiAppContent--paddingM",
+    l: "vuiAppContent--paddingL",
+    xl: "vuiAppContent--paddingXl"
+};
+export const VuiAppContent = (_a) => {
+    var { children, className, fullWidth, padding = "none" } = _a, rest = __rest(_a, ["children", "className", "fullWidth", "padding"]);
+    const classes = classNames("vuiAppContent", paddingToClassNameMap[padding], {
+        "vuiAppContent--fullWidth": fullWidth
+    }, className);
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/app/AppHeader.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    growRight?: boolean;
+};
+export declare const VuiAppHeader: ({ left, right, growRight, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/app/AppHeader.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+export const VuiAppHeader = (_a) => {
+    var { left, right, growRight } = _a, rest = __rest(_a, ["left", "right", "growRight"]);
+    return (_jsx("div", Object.assign({ className: "vuiAppHeader" }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ className: "vuiAppHeader__inner", justifyContent: "spaceBetween", alignItems: "center" }, { children: [Boolean(left) && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: left }))), Boolean(right) && (_jsx(VuiFlexItem, Object.assign({ grow: growRight ? 1 : false, shrink: false }, { children: right })))] })) })));
+};

package/lib/components/app/AppLayout.d.ts

@@ -0,0 +1,9 @@
+import { Props as VuiAppSideNavProps } from "./appSideNav/AppSideNav";
+type Props = {
+    children: React.ReactNode;
+    navItems?: VuiAppSideNavProps["items"];
+    navContent?: React.ReactNode;
+    full?: boolean;
+};
+export declare const VuiAppLayout: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/app/AppLayout.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { VuiAppSideNav } from "./appSideNav/AppSideNav";
+export const VuiAppLayout = forwardRef(({ children, navItems, navContent, full }, ref) => {
+    const classes = classNames("vuiAppLayout", {
+        "vuiAppLayout--full": full
+    });
+    return (_jsxs("div", Object.assign({ className: classes }, { children: [(navItems || navContent) && (_jsx("div", Object.assign({ className: "vuiAppLayout__sideNav" }, { children: _jsx(VuiAppSideNav, { items: navItems, content: navContent }) }))), _jsx("div", Object.assign({ className: "vuiAppLayout__content", ref: ref }, { children: children }))] })));
+});

package/lib/components/app/_index.scss

@@ -0,0 +1,4 @@
+@import "./appContent";
+@import "./appHeader";
+@import "./appLayout";
+@import "./appSideNav/index";

package/lib/components/app/appContent.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+
+.vuiAppContent {
+  width: 100%;
+  max-width: 1200px;
+}
+
+.vuiAppContent--fullWidth {
+  max-width: 100%;
+}
+
+// Padding
+$padding: (
+  None: 0,
+  Xs: $sizeXs $sizeXs * 1.25,
+  S: $sizeS $sizeS * 1.25,
+  M: $sizeM $sizeM * 1.25,
+  L: $sizeL $sizeL * 1.25,
+  Xl: $sizeXl $sizeXl * 1.25
+);
+
+@each $paddingName, $paddingValue in $padding {
+  .vuiAppContent--padding#{$paddingName} {
+    padding: #{$paddingValue};
+  }
+}

package/lib/components/app/appHeader.scss

@@ -0,0 +1,15 @@
+.vuiAppHeader {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: $appHeaderHeight;
+  background-color: $colorEmptyShade;
+  padding: $sizeXs $sizeM;
+  z-index: $appHeaderZIndex;
+  border-bottom: 1px solid $borderColor;
+}
+
+.vuiAppHeader__inner {
+  flex-grow: 1;
+}

package/lib/components/app/appLayout.scss

@@ -0,0 +1,23 @@
+.vuiAppLayout {
+  display: flex;
+  flex-direction: row;
+  padding-top: $appHeaderHeight;
+  height: 100vh;
+}
+
+.vuiAppLayout--full {
+  padding-top: 0;
+}
+
+.vuiAppLayout__sideNav {
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.vuiAppLayout__content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: auto;
+}

package/lib/components/app/appSideNav/AppSideNav.d.ts

@@ -0,0 +1,7 @@
+import { Sections, Tree } from "../types";
+export declare const buildSideNavItems: (items: Sections | Tree) => import("react/jsx-runtime").JSX.Element;
+export type Props = {
+    items?: Sections | Tree;
+    content?: React.ReactNode;
+};
+export declare const VuiAppSideNav: ({ items, content }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/app/appSideNav/AppSideNav.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { BiChevronLeft, BiChevronRight } from "react-icons/bi";
+import { VuiIconButton } from "../../button/IconButton";
+import { VuiIcon } from "../../icon/Icon";
+import { buildSections } from "./AppSideNavSections";
+import { buildTree } from "./AppSideNavTree";
+import { VuiFlexContainer } from "../../flex/FlexContainer";
+import { VuiFlexItem } from "../../flex/FlexItem";
+export const buildSideNavItems = (items) => {
+    return isTree(items) ? buildTree(items) : buildSections(items);
+};
+// Type guard to determine if we have a Tree or Sections.
+const isTree = (items) => {
+    return items.findIndex((item) => item.path) !== -1;
+};
+export const VuiAppSideNav = ({ items = [], content }) => {
+    const [isTouched, setIsTouched] = useState(false);
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const collapseButtonRef = useRef(null);
+    const expandButtonRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        // Prevent the button from being focused when it first renders.
+        if (isTouched) {
+            if (isCollapsed) {
+                (_a = expandButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = collapseButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }, [isTouched, isCollapsed]);
+    const classes = classNames("vuiAppSideNav", {
+        "vuiAppSideNav-isCollapsed": isCollapsed
+    });
+    const contentClasses = classNames("vuiAppSideNavContent", {
+        "vuiAppSideNavContent-isHidden": isCollapsed
+    });
+    const navItems = buildSideNavItems(items);
+    return (_jsx("div", Object.assign({ className: classes }, { children: _jsxs("div", Object.assign({ className: "vuiAppSideNav__inner" }, { children: [isCollapsed ? (_jsx(VuiIconButton, { ref: expandButtonRef, "aria-label": "Expand nav", onClick: () => setIsCollapsed(false), className: "vuiAppSideNavExpandButton", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiChevronRight, {}) }) })) : (_jsx(_Fragment, { children: _jsx("button", Object.assign({ ref: collapseButtonRef, className: "vuiAppSideNavCollapseButton", onClick: () => {
+                            setIsTouched(true);
+                            setIsCollapsed(true);
+                        } }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: _jsx(VuiIcon, { children: _jsx(BiChevronLeft, {}) }) })), _jsx(VuiFlexItem, Object.assign({ shrink: false, grow: false }, { children: "Collapse nav" }))] })) })) })), _jsxs("div", Object.assign({ className: contentClasses, inert: isCollapsed ? "" : null }, { children: [navItems, content] }))] })) })));
+};

package/lib/components/app/appSideNav/AppSideNavLink.d.ts

@@ -0,0 +1,4 @@
+import { TreeItem } from "../types";
+type Props = Pick<TreeItem, "name" | "path" | "iconBefore" | "iconAfter" | "isActive" | "className">;
+export declare const VuiAppSideNavLink: ({ path, name, iconBefore, iconAfter, isActive, className, ...rest }: Props) => JSX.Element;
+export {};

package/lib/components/app/appSideNav/AppSideNavLink.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiFlexContainer } from "../../flex/FlexContainer";
+import { VuiFlexItem } from "../../flex/FlexItem";
+import { VuiIcon } from "../../icon/Icon";
+import { useVuiContext } from "../../context/Context";
+export const VuiAppSideNavLink = (_a) => {
+    var { path, name, iconBefore, iconAfter, isActive, className } = _a, rest = __rest(_a, ["path", "name", "iconBefore", "iconAfter", "isActive", "className"]);
+    const { createLink, getPath } = useVuiContext();
+    const classes = classNames("vuiAppSideNavLink", {
+        "vuiAppSideNavLink--active": isActive !== null && isActive !== void 0 ? isActive : path === getPath()
+    }, className);
+    const content = iconBefore || iconAfter ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [iconBefore && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconBefore })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: name })), iconAfter && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: iconAfter })) })))] }))) : (name);
+    return createLink(Object.assign({ className: classes, children: content, href: path !== null && path !== void 0 ? path : "/" }, rest));
+};

package/lib/components/app/appSideNav/AppSideNavSections.d.ts

@@ -0,0 +1,2 @@
+import { Sections } from "../types";
+export declare const buildSections: (sections: Sections) => import("react/jsx-runtime").JSX.Element;

package/lib/components/app/appSideNav/AppSideNavSections.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VuiAppSideNavLink } from "./AppSideNavLink";
+export const buildSections = (sections) => {
+    return (_jsx("div", Object.assign({ className: "vuiAppSideNavSections" }, { children: sections.map(({ name, pages }) => {
+            const renderedPages = pages.map(({ name, path }) => (_jsx(VuiAppSideNavLink, { path: path, name: name }, path !== null && path !== void 0 ? path : name)));
+            return (_jsx(VuiAppSideNavSection, Object.assign({ name: name }, { children: renderedPages }), name));
+        }) })));
+};
+const VuiAppSideNavSection = ({ name, children }) => {
+    return (_jsxs("div", Object.assign({ className: "vuiAppSideNavSection" }, { children: [_jsx("div", Object.assign({ className: "vuiAppSideNavSection__title" }, { children: name })), _jsx("div", Object.assign({ className: "vuiAppSideNavSection__items" }, { children: children }))] }), name));
+};

package/lib/components/app/appSideNav/AppSideNavTree.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from "../types";
+export declare const buildTree: (items: Tree) => import("react/jsx-runtime").JSX.Element;

package/lib/components/app/appSideNav/AppSideNavTree.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { BiChevronDown, BiChevronUp } from "react-icons/bi";
+import { VuiIcon } from "../../icon/Icon";
+import { VuiIconButton } from "../../button/IconButton";
+import { VuiAppSideNavLink } from "./AppSideNavLink";
+export const buildTree = (items) => {
+    return _jsx("div", Object.assign({ className: "vuiAppSideNavTree" }, { children: buildTreeItems(items) }));
+};
+const buildTreeItems = (items) => {
+    return items.map((_a) => {
+        var { name, pages, path, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "pages", "path", "iconBefore", "iconAfter", "isActive"]);
+        if (path) {
+            if (pages) {
+                const childPages = buildTreeItems(pages);
+                return (_jsx(AppSideNavTreeSection, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest, { children: childPages }), path !== null && path !== void 0 ? path : name));
+            }
+            return (_jsx(VuiAppSideNavLink, Object.assign({ path: path, name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest), path !== null && path !== void 0 ? path : name));
+        }
+        return (_jsx("div", Object.assign({ className: "vuiAppSideNavTreeSection__subTitle" }, rest, { children: name }), name));
+    });
+};
+const AppSideNavTreeSection = (_a) => {
+    var { name, path, children, iconBefore, iconAfter, isActive } = _a, rest = __rest(_a, ["name", "path", "children", "iconBefore", "iconAfter", "isActive"]);
+    const [isOpen, setIsOpen] = useState(true);
+    return (_jsxs("div", Object.assign({ className: "vuiAppSideNavTreeSection" }, { children: [_jsx(VuiAppSideNavLink, Object.assign({ path: path !== null && path !== void 0 ? path : "/", name: name, iconBefore: iconBefore, iconAfter: iconAfter, isActive: isActive }, rest)), _jsx(VuiIconButton, { size: "s", className: "vuiAppSideNavTreeToggleButton", onClick: () => setIsOpen(!isOpen), color: "neutral", icon: _jsx(VuiIcon, { children: isOpen ? _jsx(BiChevronUp, {}) : _jsx(BiChevronDown, {}) }) }), isOpen && _jsx("div", Object.assign({ className: "vuiAppSideNavTreeChildren" }, { children: children }))] })));
+};

package/lib/components/app/appSideNav/_index.scss

@@ -0,0 +1,17 @@
+$appSideNavWidth: 240px;
+$appSideNavWidthCollapsed: 60px;
+$appSideNavLinkSpacing: $sizeXxs + 2px;
+
+@mixin appSideNavItem {
+  display: block;
+  color: $colorText;
+  font-size: $fontSizeStandard;
+  padding: 0 $sizeM;
+  margin-left: -$sizeM;
+  padding-top: $appSideNavLinkSpacing;
+  padding-bottom: $appSideNavLinkSpacing;
+}
+
+@import "./appSideNav";
+@import "./appSideNavSections";
+@import "./appSideNavTree";

package/lib/components/app/appSideNav/appSideNav.scss

@@ -0,0 +1,75 @@
+.vuiAppSideNav {
+  width: $appSideNavWidth;
+  overflow-x: hidden;
+  transition: all $transitionSpeed;
+  line-height: 1;
+}
+
+.vuiAppSideNav__inner {
+  // Prevent content from being squished as nav collapses.
+  width: $appSideNavWidth;
+  padding: 28px 32px 32px 33px;
+  margin-bottom: $sizeXxl * 4;
+  transition: all $transitionSpeed;
+}
+
+.vuiAppSideNavContent {
+  opacity: 1;
+  transition: all $transitionSpeed;
+}
+
+.vuiAppSideNavContent-isHidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.vuiAppSideNav-isCollapsed {
+  width: $appSideNavWidthCollapsed;
+  // Stop scrolling.
+  height: 100%;
+  overflow-y: hidden;
+
+  .vuiAppSideNav__inner {
+    padding-left: $sizeM;
+  }
+}
+
+.vuiAppSideNavCollapseButton {
+  display: block;
+  color: $colorSubdued;
+  font-size: $fontSizeStandard;
+  text-decoration: none;
+  padding: 0 $sizeM;
+  margin-left: -$sizeXxl;
+  margin-bottom: $sizeM;
+
+  &:hover {
+    color: $colorPrimary;
+    text-decoration: underline;
+  }
+}
+
+.vuiAppSideNavExpandButton {
+  margin-top: -$sizeXxs;
+  // Ensure the content below the expand/collapse button remains
+  // at the same vertical position when collapsed and expanded.
+  margin-bottom: 6px;
+}
+
+.vuiAppSideNavLink {
+  @include truncateText;
+  @include appSideNavItem;
+  text-decoration: none;
+
+  &:hover {
+    background-color: $colorPrimaryLighterShade;
+    border-radius: $sizeM;
+    color: $colorPrimary;
+    text-decoration: underline;
+  }
+}
+
+.vuiAppSideNavLink--active {
+  font-weight: $fontWeightBold;
+  text-decoration: underline;
+}

package/lib/components/app/appSideNav/appSideNavSections.scss

@@ -0,0 +1,33 @@
+.vuiAppSideNavSections {
+  margin-top: $sizeL;
+}
+
+.vuiAppSideNavContent-isHidden {
+  .vuiAppSideNavSections {
+    margin-top: $sizeXs;
+  }
+}
+
+.vuiAppSideNavSection + .vuiAppSideNavSection {
+  margin-top: $sizeL;
+}
+
+.vuiAppSideNavSection__title {
+  color: $colorText;
+  font-weight: $fontWeightBold;
+  font-size: $fontSizeStandard;
+}
+
+.vuiAppSideNavSection__items {
+  margin-top: $sizeS;
+
+  & > .vuiAppSideNavLink {
+    &:first-child {
+      margin-top: -$appSideNavLinkSpacing;
+    }
+
+    &:last-child {
+      margin-bottom: -$appSideNavLinkSpacing;
+    }
+  }
+}

package/lib/components/app/appSideNav/appSideNavTree.scss

@@ -0,0 +1,25 @@
+.vuiAppSideNavTree {
+  margin-top: -$sizeXxs;
+}
+
+.vuiAppSideNavTreeSection {
+  position: relative;
+}
+
+.vuiAppSideNavTreeToggleButton {
+  position: absolute;
+  top: 0;
+  right: -30px;
+}
+
+.vuiAppSideNavTreeChildren {
+  // Sized to match the width of the icons.
+  margin-left: 20px;
+}
+
+.vuiAppSideNavTreeSection__subTitle {
+  @include appSideNavItem;
+  font-size: $fontSizeSmall;
+  font-weight: $fontWeightBold;
+  color: $colorDarkShade;
+}