@vectara/vectara-ui 15.9.6 → 16.0.0

package/lib/components/index.d.ts

@@ -73,7 +73,8 @@ import { SPINNER_COLOR, SPINNER_SIZE } from "./spinner/types";
 import { Stat, VuiStatList } from "./statList/StatList";
 import { VuiStat } from "./stat/Stat";
 import { VuiStatus } from "./status/Status";
-import { VuiSteps, StepStatus, StepSize, VuiStepProps } from "./steps/Steps";
+import { VuiSteps, StepStatus, StepSize, Steps } from "./steps/Steps";
+import { VuiStepsVertical, StepsVertical, StepVerticalStatus } from "./stepsVertical/StepsVertical";
 import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
 import { VuiSummary, VuiSummaryCitation } from "./summary";
 import { VuiTable } from "./table/Table";
@@ -93,5 +94,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabSize, Tree, TreeItem };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -67,6 +67,7 @@ import { VuiStatList } from "./statList/StatList";
 import { VuiStat } from "./stat/Stat";
 import { VuiStatus } from "./status/Status";
 import { VuiSteps } from "./steps/Steps";
+import { VuiStepsVertical } from "./stepsVertical/StepsVertical";
 import { SKELETON_COLOR, VuiSkeleton } from "./skeleton/Skeleton";
 import { VuiSummary, VuiSummaryCitation } from "./summary";
 import { VuiTable } from "./table/Table";
@@ -86,4 +87,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/steps/Step.d.ts

@@ -1,18 +1,13 @@
 import { ReactNode } from "react";
 import { StepSize, StepStatus } from "./types";
-export type VuiStepProps = {
+export type StepProps = {
     title: React.ReactNode;
     status?: StepStatus;
     subTitle?: React.ReactNode;
     onClick?: () => void;
-    value?: string | number;
-    icon?: ReactNode;
     className?: string;
     ["data-testid"]?: string;
-};
-type StepProps = Omit<VuiStepProps, "step" | "icon"> & {
     size?: StepSize;
     stepNode: ReactNode;
 };
 export declare const VuiStep: ({ title, status, subTitle, onClick, stepNode, size, className, "data-testid": dataTestId }: StepProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/steps/Step.js

@@ -7,18 +7,12 @@ const statusToClassMap = {
     complete: "complete",
     current: "current",
     incomplete: "incomplete",
-    disabled: "disabled",
     warning: "warning",
-    danger: "danger",
-    loading: "loading"
+    danger: "danger"
 };
 export const VuiStep = ({ title, status = "incomplete", subTitle, onClick, stepNode, size = "s", className, "data-testid": dataTestId }) => {
-    const isClickable = onClick && status !== "disabled";
-    const stepContainerClasses = classNames("vuiStep", className, {
-        "vuiStep--clickable": isClickable
-    });
+    const stepContainerClasses = classNames("vuiStep", className);
     const numberClasses = classNames("vuiStep__number", `vuiStep__number--${statusToClassMap[status]}`, {
-        "vuiStep__number--clickable": isClickable,
         [`vuiStep__number--${size}`]: size
     });
     const titleClasses = classNames("vuiStep__title", {
@@ -27,20 +21,14 @@ export const VuiStep = ({ title, status = "incomplete", subTitle, onClick, stepN
     const subTitleClasses = classNames("vuiStep__subTitle", {
         "vuiStep__subTitle--current": status === "current"
     });
-    const handleClick = () => {
-        if (isClickable) {
-            onClick();
-        }
-    };
     const handleKeyDown = (event) => {
-        if (isClickable && (event.key === "Enter" || event.key === " ")) {
+        if (!onClick)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
             event.preventDefault();
             onClick();
         }
     };
     const stepContent = (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "vuiSteps__circleWrapper" }, { children: _jsx("div", Object.assign({ className: numberClasses }, { children: stepNode })) })), _jsx("div", Object.assign({ className: "vuiSteps__contentWrapper" }, { children: _jsx(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", spacing: "xs" }, { children: _jsxs(VuiFlexItem, Object.assign({ grow: false }, { children: [_jsx(VuiText, Object.assign({ size: "s", className: titleClasses }, { children: _jsx("div", Object.assign({ className: "vuiStep__titleText" }, { children: title })) })), subTitle && _jsx("div", Object.assign({ className: subTitleClasses }, { children: subTitle }))] })) })) }))] }));
-    if (isClickable) {
-        return (_jsx("button", Object.assign({ className: stepContainerClasses, onKeyDown: handleKeyDown, onClick: handleClick, type: "button", "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId, "data-status": status }, { children: stepContent })));
-    }
-    return (_jsx("div", Object.assign({ className: stepContainerClasses, "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId }, { children: stepContent })));
+    return (_jsx("button", Object.assign({ className: stepContainerClasses, onKeyDown: handleKeyDown, onClick: onClick, type: "button", "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId, "data-status": status }, { children: stepContent })));
 };

package/lib/components/steps/Steps.d.ts

@@ -1,8 +1,11 @@
-import { VuiStepProps } from "./Step";
+import { StepProps } from "./Step";
 import { StepSize, StepStatus } from "./types";
-export type { VuiStepProps, StepSize, StepStatus };
+export type { StepSize, StepStatus };
+export type Steps = Array<Omit<StepProps & {
+    icon?: React.ReactNode;
+}, "stepNode">>;
 type Props = {
-    steps: VuiStepProps[];
+    steps: Steps;
     className?: string;
     size?: StepSize;
     "data-testid"?: string;

package/lib/components/steps/Steps.js

@@ -13,16 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { BiCheck, BiError, BiSolidHand } from "react-icons/bi";
 import { VuiIcon } from "../icon/Icon";
-import { VuiSpinner } from "../spinner/Spinner";
 import { VuiStep } from "./Step";
 const statusToColor = {
     complete: "success",
     current: "primary",
     incomplete: "subdued",
-    disabled: "neutral",
     warning: "warning",
-    danger: "danger",
-    loading: "accent"
+    danger: "danger"
 };
 export const VuiSteps = (_a) => {
     var { steps, className, size = "s", "data-testid": dataTestId } = _a, rest = __rest(_a, ["steps", "className", "size", "data-testid"]);
@@ -32,7 +29,7 @@ export const VuiSteps = (_a) => {
     const totalSteps = steps.length;
     const currentStepIndex = steps.findIndex((step) => step.status === "current");
     return (_jsx("div", Object.assign({ className: classes, "data-testid": dataTestId }, rest, { children: _jsx("div", Object.assign({ className: "vuiSteps__container" }, { children: steps.map((step, index) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
                 const isFirstStep = index === 0;
                 const isLastStep = index === totalSteps - 1;
                 const stepContainerClasses = classNames("vuiSteps__stepContainer", {
@@ -42,6 +39,6 @@ export const VuiSteps = (_a) => {
                 const icon = (_a = step.icon) !== null && _a !== void 0 ? _a : (step.status === "complete" ? (_jsx(BiCheck, {})) : step.status === "danger" ? (_jsx(BiError, {})) : step.status === "warning" ? (_jsx(BiSolidHand, {})) : null);
                 return (_jsxs("div", Object.assign({ className: stepContainerClasses }, { children: [!isLastStep && (_jsx("div", { className: classNames("vuiSteps__connector", {
                                 "vuiSteps__connector--complete": index < currentStepIndex
-                            }) })), _jsx(VuiStep, { title: step.title, status: step.status, onClick: step.onClick, "data-testid": (_b = step["data-testid"]) !== null && _b !== void 0 ? _b : `${dataTestId}-step-${index}`, stepNode: step.status === "loading" ? (_jsx("div", { children: _jsx(VuiSpinner, {}) })) : icon ? (_jsx(VuiIcon, Object.assign({ color: statusToColor[(_c = step.status) !== null && _c !== void 0 ? _c : "incomplete"], size: size === "xs" ? undefined : size }, { children: icon }))) : size === "xs" ? null : (_jsx("span", Object.assign({ className: "vuiStep__numberText" }, { children: (_d = step.value) !== null && _d !== void 0 ? _d : index + 1 }))), size: size, subTitle: step.subTitle })] }), index));
+                            }) })), _jsx(VuiStep, { title: step.title, status: step.status, onClick: step.onClick, "data-testid": (_b = step["data-testid"]) !== null && _b !== void 0 ? _b : `${dataTestId}-step-${index}`, stepNode: icon ? (_jsx(VuiIcon, Object.assign({ color: statusToColor[(_c = step.status) !== null && _c !== void 0 ? _c : "incomplete"], size: size === "xs" ? undefined : size }, { children: icon }))) : size === "xs" ? null : (_jsx("span", Object.assign({ className: "vuiStep__numberText" }, { children: index + 1 }))), size: size, subTitle: step.subTitle })] }), index));
             }) })) })));
 };

package/lib/components/steps/_index.scss

@@ -82,10 +82,6 @@ $stepSizeM: 36px;
   border-radius: $sizeXxs;
   transition: all 0.2s ease;
 
-  &--clickable {
-    cursor: pointer;
-  }
-
   .vuiSpinner {
     width: var(--step-size);
     height: var(--step-size);
@@ -144,15 +140,6 @@ $stepSizeM: 36px;
   &--danger {
     background-color: var(--vui-color-danger-lighter-shade);
   }
-
-  &--disabled {
-    background-color: var(--vui-color-light-shade);
-    color: var(--vui-color-dark-shade);
-  }
-
-  &--clickable {
-    cursor: pointer;
-  }
 }
 
 .vuiStep__numberText {

package/lib/components/steps/types.d.ts

@@ -1,2 +1,2 @@
-export type StepStatus = "complete" | "current" | "incomplete" | "disabled" | "warning" | "danger" | "loading";
+export type StepStatus = "complete" | "current" | "incomplete" | "warning" | "danger";
 export type StepSize = "xs" | "s" | "m";

package/lib/components/stepsVertical/StepVertical.d.ts

@@ -0,0 +1,11 @@
+import { StepVerticalStatus } from "./types";
+export type Props = {
+    title: React.ReactNode;
+    status: StepVerticalStatus;
+    isActive?: boolean;
+    onClick: () => void;
+    index: number;
+    icon?: React.ReactNode;
+    ["data-testid"]?: string;
+};
+export declare const VuiStepVertical: ({ title, status, isActive, onClick, index, icon, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepsVertical/StepVertical.js

@@ -0,0 +1,35 @@
+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 { VuiIcon } from "../icon/Icon";
+const statusToColor = {
+    complete: "success",
+    current: "primary",
+    incomplete: "subdued",
+    warning: "warning",
+    danger: "danger"
+};
+const statusToClassMap = {
+    complete: "complete",
+    incomplete: "incomplete",
+    warning: "warning",
+    danger: "danger"
+};
+export const VuiStepVertical = (_a) => {
+    var { title, status, isActive, onClick, index, icon } = _a, rest = __rest(_a, ["title", "status", "isActive", "onClick", "index", "icon"]);
+    const classes = classNames("vuiStepVertical", `vuiStepVertical--${statusToClassMap[status]}`, {
+        "vuiStepVertical-isActive": isActive
+    });
+    const finalIcon = (_jsx("div", Object.assign({ className: "vuiStepVerticalContainer__icon" }, { children: icon && (_jsx(VuiIcon, Object.assign({ size: "s", type: "token", color: statusToColor[status !== null && status !== void 0 ? status : "incomplete"] }, { children: icon }))) })));
+    return (_jsxs("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: [_jsxs("div", Object.assign({ className: "vuiStepVertical__index" }, { children: [index, "."] })), _jsx("div", Object.assign({ className: "vuiStepVertical__content" }, { children: _jsx("div", { children: title }) })), finalIcon] })));
+};

package/lib/components/stepsVertical/StepsVertical.d.ts

@@ -0,0 +1,9 @@
+import { Props as StepVerticalProps } from "./StepVertical";
+export type { StepVerticalStatus } from "./types";
+export type StepsVertical = Omit<StepVerticalProps, "index" | "icon">[];
+type Props = {
+    steps: StepsVertical;
+    className?: string;
+    "data-testid"?: string;
+};
+export declare const VuiStepsVertical: ({ steps, className, "data-testid": dataTestId, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/stepsVertical/StepsVertical.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 } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiStepVertical } from "./StepVertical";
+import { BiCheck, BiError, BiSolidHand } from "react-icons/bi";
+export const VuiStepsVertical = (_a) => {
+    var { steps, className, "data-testid": dataTestId } = _a, rest = __rest(_a, ["steps", "className", "data-testid"]);
+    const classes = classNames("vuiStepsVertical", className);
+    return (_jsx("div", Object.assign({ className: classes, "data-testid": dataTestId }, rest, { children: steps.map((step, index) => {
+            var _a;
+            const icon = step.status === "complete" ? (_jsx(BiCheck, {})) : step.status === "danger" ? (_jsx(BiError, {})) : step.status === "warning" ? (_jsx(BiSolidHand, {})) : null;
+            const stepContainerClasses = classNames("vuiStepVerticalContainer", {
+                "vuiStepVerticalContainer-isActive": step.isActive
+            });
+            return (_jsx("div", Object.assign({ className: stepContainerClasses }, { children: _jsx(VuiStepVertical, { title: step.title, status: step.status, isActive: step.isActive, onClick: step.onClick, "data-testid": (_a = step["data-testid"]) !== null && _a !== void 0 ? _a : `${dataTestId}-step-${index}`, index: index + 1, icon: icon }) }), index));
+        }) })));
+};

package/lib/components/stepsVertical/_index.scss

@@ -0,0 +1,81 @@
+.vuiStepsVertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 280px;
+}
+
+.vuiStepVerticalContainer {
+  padding-left: $sizeS;
+  border-left: 1px solid var(--vui-color-medium-shade);
+}
+
+.vuiStepVerticalContainer-isActive {
+  padding-left: $sizeS - 1px;
+  border-left: 2px solid var(--vui-color-primary-shade);
+}
+
+.vuiStepVerticalContainer {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  gap: $sizeS;
+}
+
+.vuiStepVertical {
+  flex-grow: 1;
+  display: flex;
+  gap: $sizeS;
+  align-items: center;
+  padding: $sizeXs $sizeS $sizeXs $sizeM;
+  font-size: $fontSizeStandard;
+  color: var(--vui-color-text);
+  background-color: var(--vui-color-empty-shade);
+  border-radius: $sizeXxs;
+  width: 100%;
+
+  &:focus {
+    // Ensures focus ring is visible.
+    z-index: 2;
+  }
+
+  &:hover,
+  &.vuiStepVertical-isActive {
+    background-color: var(--vui-color-light-shade);
+
+    .vuiStepVerticalContainer__icon {
+      .vuiIcon--token {
+        // border-color: var(--vui-color-medium-shade);
+        box-shadow: $shadowSmallEnd;
+      }
+    }
+  }
+}
+
+.vuiStepVertical__index {
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 26px;
+  text-align: left;
+}
+
+.vuiStepVertical__content {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $sizeXs;
+}
+
+.vuiStepVerticalContainer__icon {
+  // Set consistent size so that empty icons still take up space
+  // and the button height doesn't change when there's no icon.
+  height: 20px;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  .vuiIcon--token {
+    box-shadow: $shadowSmallStart;
+    transition: box-shadow $transitionSpeed;
+  }
+}

package/lib/components/stepsVertical/types.d.ts

@@ -0,0 +1 @@
+export type StepVerticalStatus = "complete" | "incomplete" | "warning" | "danger";

package/lib/components/stepsVertical/types.js

@@ -0,0 +1 @@
+export {};

package/lib/styles/index.css

@@ -4993,9 +4993,6 @@ h2.react-datepicker__current-month {
   border-radius: 4px;
   transition: all 0.2s ease;
 }
-.vuiStep--clickable {
-  cursor: pointer;
-}
 .vuiStep .vuiSpinner {
   width: var(--step-size);
   height: var(--step-size);
@@ -5044,13 +5041,6 @@ h2.react-datepicker__current-month {
 .vuiStep__number--danger {
   background-color: var(--vui-color-danger-lighter-shade);
 }
-.vuiStep__number--disabled {
-  background-color: var(--vui-color-light-shade);
-  color: var(--vui-color-dark-shade);
-}
-.vuiStep__number--clickable {
-  cursor: pointer;
-}
 
 .vuiStep__numberText {
   line-height: 1;
@@ -5084,6 +5074,77 @@ h2.react-datepicker__current-month {
   color: var(--vui-color-medium-shade);
 }
 
+.vuiStepsVertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 280px;
+}
+
+.vuiStepVerticalContainer {
+  padding-left: 12px;
+  border-left: 1px solid var(--vui-color-medium-shade);
+}
+
+.vuiStepVerticalContainer-isActive {
+  padding-left: 11px;
+  border-left: 2px solid var(--vui-color-primary-shade);
+}
+
+.vuiStepVerticalContainer {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.vuiStepVertical {
+  flex-grow: 1;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 12px 8px 16px;
+  font-size: 14px;
+  color: var(--vui-color-text);
+  background-color: var(--vui-color-empty-shade);
+  border-radius: 4px;
+  width: 100%;
+}
+.vuiStepVertical:focus {
+  z-index: 2;
+}
+.vuiStepVertical:hover, .vuiStepVertical.vuiStepVertical-isActive {
+  background-color: var(--vui-color-light-shade);
+}
+.vuiStepVertical:hover .vuiStepVerticalContainer__icon .vuiIcon--token, .vuiStepVertical.vuiStepVertical-isActive .vuiStepVerticalContainer__icon .vuiIcon--token {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+
+.vuiStepVertical__index {
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 26px;
+  text-align: left;
+}
+
+.vuiStepVertical__content {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.vuiStepVerticalContainer__icon {
+  height: 20px;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+.vuiStepVerticalContainer__icon .vuiIcon--token {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
+  transition: box-shadow 0.2s;
+}
+
 .vuiSummary {
   font-size: 16px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "15.9.6",
+  "version": "16.0.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/steps/CustomSteps.tsx

@@ -1,9 +1,9 @@
-import { VuiSteps, VuiStepProps } from "../../../lib";
+import { VuiSteps, Steps } from "../../../lib";
 import { BiUser, BiCog, BiCheck, BiPlanet, BiRocket, BiStar } from "react-icons/bi";
 import { Subsection } from "../../components/Subsection";
 
 export const CustomSteps = () => {
-  const customIconSteps: VuiStepProps[] = [
+  const customIconSteps: Steps = [
     {
       title: "User Registration",
       subTitle: "Create your account",
@@ -39,40 +39,11 @@ export const CustomSteps = () => {
     }
   ];
 
-  const customStepValues: VuiStepProps[] = [
-    {
-      title: "Initialize",
-      subTitle: "Setting up environment",
-      status: "complete",
-      value: "A"
-    },
-    {
-      title: "Configure",
-      subTitle: "Applying settings",
-      status: "current",
-      value: "B"
-    },
-    {
-      title: "Deploy",
-      subTitle: "Launching application",
-      value: "C"
-    },
-    {
-      title: "Monitor",
-      subTitle: "Tracking performance",
-      value: "D"
-    }
-  ];
-
   return (
     <>
       <Subsection title="Custom icons">
         <VuiSteps steps={customIconSteps} />
       </Subsection>
-
-      <Subsection title="Custom step values">
-        <VuiSteps steps={customStepValues} />
-      </Subsection>
     </>
   );
 };

package/src/docs/pages/steps/InteractiveSteps.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { VuiSteps, VuiStepProps, StepStatus } from "../../../lib";
+import { VuiSteps, Steps, StepStatus } from "../../../lib";
 
 export const InteractiveSteps = () => {
   const [currentStep, setCurrentStep] = useState(1);
@@ -13,7 +13,7 @@ export const InteractiveSteps = () => {
     return "incomplete";
   };
 
-  const dynamicSteps: VuiStepProps[] = [
+  const dynamicSteps: Steps = [
     {
       title: "Account Setup",
       status: getStepStatus(0, "danger"),
@@ -34,7 +34,7 @@ export const InteractiveSteps = () => {
     },
     {
       title: "Complete",
-      status: getStepStatus(3, "complete"),
+      status: "incomplete",
       subTitle: "Finish setup",
       onClick: () => setCurrentStep(3)
     }

package/src/docs/pages/steps/StepSizes.tsx

@@ -1,8 +1,8 @@
-import { VuiSteps, VuiStepProps } from "../../../lib";
+import { VuiSteps, Steps } from "../../../lib";
 import { Subsection } from "../../components/Subsection";
 
 export const StepSizes = () => {
-  const basicSteps: VuiStepProps[] = [
+  const basicSteps: Steps = [
     {
       title: "Completed step",
       status: "complete"
@@ -14,10 +14,6 @@ export const StepSizes = () => {
     {
       title: "Incomplete step which will wrap to the next line",
       status: "incomplete"
-    },
-    {
-      title: "Disabled step",
-      status: "disabled"
     }
   ];
 

package/src/docs/pages/steps/StepStatuses.tsx

@@ -1,7 +1,7 @@
-import { VuiSteps, VuiStepProps } from "../../../lib";
+import { VuiSteps, Steps } from "../../../lib";
 
 export const StepStatuses = () => {
-  const statusSteps: VuiStepProps[] = [
+  const statusSteps: Steps = [
     {
       title: "Complete Step",
       subTitle: "This step has been completed",
@@ -17,11 +17,6 @@ export const StepStatuses = () => {
       subTitle: "This step is not yet completed",
       status: "incomplete"
     },
-    {
-      title: "Disabled Step",
-      subTitle: "This step is disabled",
-      status: "disabled"
-    },
     {
       title: "Warning Step",
       subTitle: "This step has a warning",
@@ -31,11 +26,6 @@ export const StepStatuses = () => {
       title: "Danger Step",
       subTitle: "This step has an error",
       status: "danger"
-    },
-    {
-      title: "Loading Step",
-      subTitle: "This step is processing",
-      status: "loading"
     }
   ];
 

package/src/docs/pages/steps/index.tsx

@@ -1,10 +1,8 @@
-import { BasicSteps } from "./BasicSteps";
 import { InteractiveSteps } from "./InteractiveSteps";
 import { StepStatuses } from "./StepStatuses";
 import { StepSizes } from "./StepSizes";
 import { CustomSteps } from "./CustomSteps";
 
-const BasicStepsSource = require("!!raw-loader!./BasicSteps");
 const InteractiveStepsSource = require("!!raw-loader!./InteractiveSteps");
 const StepStatusesSource = require("!!raw-loader!./StepStatuses");
 const StepSizesSource = require("!!raw-loader!./StepSizes");
@@ -14,11 +12,6 @@ export const steps = {
   name: "Steps",
   path: "/steps",
   examples: [
-    {
-      name: "Basic steps",
-      component: <BasicSteps />,
-      source: BasicStepsSource.default.toString()
-    },
     {
       name: "Interactive steps",
       component: <InteractiveSteps />,

package/src/docs/pages/stepsVertical/VerticalSteps.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { VuiStepsVertical, StepsVertical } from "../../../lib";
+
+export const VerticalSteps = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+
+  const steps: StepsVertical = [
+    {
+      title: "General",
+      status: "danger",
+      isActive: currentStep === 0,
+      onClick: () => setCurrentStep(0)
+    },
+    {
+      title: "Model",
+      status: "complete",
+      isActive: currentStep === 1,
+      onClick: () => setCurrentStep(1)
+    },
+    {
+      title: "Abilities",
+      status: "incomplete",
+      isActive: currentStep === 2,
+      onClick: () => setCurrentStep(2)
+    },
+    {
+      title: "Instructions",
+      status: "incomplete",
+      isActive: currentStep === 3,
+      onClick: () => setCurrentStep(3)
+    },
+    {
+      title: "Advanced",
+      status: "warning",
+      isActive: currentStep === 4,
+      onClick: () => setCurrentStep(4)
+    }
+  ];
+
+  return <VuiStepsVertical steps={steps} />;
+};

package/src/docs/pages/stepsVertical/index.tsx

@@ -0,0 +1,15 @@
+import { VerticalSteps } from "./VerticalSteps";
+
+const VerticalStepsSource = require("!!raw-loader!./VerticalSteps");
+
+export const stepsVertical = {
+  name: "Vertical Steps",
+  path: "/verticalSteps",
+  examples: [
+    {
+      name: "Vertical steps",
+      component: <VerticalSteps />,
+      source: VerticalStepsSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -51,6 +51,7 @@ import { stat } from "./pages/stat";
 import { status } from "./pages/status";
 import { statList } from "./pages/statList";
 import { steps } from "./pages/steps";
+import { stepsVertical } from "./pages/stepsVertical";
 import { summary } from "./pages/summary";
 import { skeleton } from "./pages/skeleton";
 import { superCheckboxGroup } from "./pages/superCheckboxGroup";
@@ -89,7 +90,21 @@ export const categories: Category[] = [
   },
   {
     name: "Layout",
-    pages: [tabs, timeline, accordion, steps, popover, infoMenu, flex, grid, spacer, card, panel, horizontalRule]
+    pages: [
+      tabs,
+      timeline,
+      accordion,
+      stepsVertical,
+      steps,
+      popover,
+      infoMenu,
+      flex,
+      grid,
+      spacer,
+      card,
+      panel,
+      horizontalRule
+    ]
   },
   {
     name: "Content",

package/src/docs/pages/steps/BasicSteps.tsx

@@ -1,25 +0,0 @@
-import { VuiSteps, VuiStepProps } from "../../../lib";
-
-export const BasicSteps = () => {
-  const basicSteps: VuiStepProps[] = [
-    {
-      title: "Completed step",
-      status: "complete",
-      "data-testid": "customDataTestId"
-    },
-    {
-      title: "Selected step",
-      status: "current"
-    },
-    {
-      title: "Incomplete step which will wrap to the next line",
-      status: "incomplete"
-    },
-    {
-      title: "Disabled step",
-      status: "disabled"
-    }
-  ];
-
-  return <VuiSteps steps={basicSteps} data-testid="steps" />;
-};