@vectara/vectara-ui 0.0.2

package/lib/components/notification/Notification.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { BiX } from "react-icons/bi";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIconButton } from "../button/IconButton";
+import { VuiIcon } from "../icon/Icon";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiHorizontalRule } from "../horizontalRule/HorizontalRule";
+export const VuiNotification = ({ notification, onDismiss, notificationsCount, children }) => {
+    const { color, message } = notification;
+    const classes = classNames("vuiNotification", `vuiNotification--${color}`);
+    const hasManyNotifications = notificationsCount > 1;
+    const placeholder1Classes = classNames("vuiNotification", "vuiNotificationPlaceholder", {
+        "vuiNotificationPlaceholder1-isVisible": notificationsCount > 1
+    });
+    const placeholder2Classes = classNames("vuiNotification", "vuiNotificationPlaceholder", {
+        "vuiNotificationPlaceholder2-isVisible": notificationsCount > 2
+    });
+    return (_jsxs("div", Object.assign({ className: "vuiNotificationContainer" }, { children: [_jsxs("div", Object.assign({ className: classes }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIconButton, { size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(notification) }) })), _jsxs(VuiFlexItem, Object.assign({ grow: 1 }, { children: [_jsx(VuiText, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) }), hasManyNotifications && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: ["+", notificationsCount - 1, " more"] })) }))] }))] }))] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiHorizontalRule, {}), _jsx(VuiSpacer, { size: "xxs" }), children] }))] })), _jsx("div", { className: placeholder2Classes }), _jsx("div", { className: placeholder1Classes })] })));
+};

package/lib/components/notification/Notifications.d.ts

@@ -0,0 +1,10 @@
+import { Notification } from "./Notification";
+type Props = {
+    notifications: Notification[];
+    onShowAll: () => void;
+    onDismiss: (notification: Notification) => void;
+    onDismissAll: () => void;
+    onClose: () => void;
+};
+export declare const VuiNotifications: ({ notifications, onShowAll, onDismiss, onDismissAll, onClose }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/notification/Notifications.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiNotification } from "./Notification";
+import { useEffect, useRef } from "react";
+import { VuiButtonTertiary } from "../button/ButtonTertiary";
+export const VuiNotifications = ({ notifications, onShowAll, onDismiss, onDismissAll, onClose }) => {
+    const timeoutRef = useRef();
+    const startTimeout = () => {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => {
+            onClose();
+        }, 8000);
+        return timeoutRef.current;
+    };
+    useEffect(() => {
+        startTimeout();
+        return () => clearTimeout(timeoutRef.current);
+    }, [notifications]);
+    const onMouseEnter = () => {
+        clearTimeout(timeoutRef.current);
+    };
+    const onMouseLeave = () => {
+        startTimeout();
+    };
+    if (!notifications.length)
+        return null;
+    const classes = classNames("vuiNotificationList", {
+        "vuiNotificationList--hasMany": notifications.length > 1
+    });
+    return (_jsx("div", Object.assign({ className: classes, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: _jsx("div", Object.assign({ className: "vuiNotificationList__notifications" }, { children: _jsx(VuiNotification, Object.assign({ notification: notifications[notifications.length - 1], onDismiss: onDismiss, notificationsCount: notifications.length }, { children: notifications.length > 1 && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiButtonTertiary, Object.assign({ size: "s", color: "primary", onClick: onDismissAll }, { children: "Dismiss all" })) }), _jsx(VuiFlexItem, { children: _jsx(VuiButtonSecondary, Object.assign({ size: "s", color: "primary", onClick: onShowAll }, { children: "See all" })) })] }))] })) })) })) })));
+};

package/lib/components/notification/_index.scss

@@ -0,0 +1,99 @@
+.vuiNotificationList {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: $notificationsZIndex;
+  animation: popTop 0.4s cubic-bezier(0.5, 0, 0.5, 1) 1;
+}
+
+.vuiNotificationList__notifications {
+  padding: $sizeXxs;
+  border-bottom-left-radius: $sizeM;
+  transition: all $transitionSpeed;
+}
+
+.vuiNotificationList--hasMany {
+  .vuiNotificationList__notifications {
+    border-bottom-left-radius: $sizeXs;
+  }
+}
+
+.vuiNotificationContainer {
+  position: relative;
+}
+
+.vuiNotification {
+  position: relative;
+  z-index: 1;
+  border-radius: $sizeS;
+  padding: $sizeS;
+  font-size: $fontSizeStandard;
+  color: $colorText;
+  width: 420px;
+  box-shadow: $shadowLargeStart;
+  background-color: $colorEmptyShade;
+}
+
+.vuiNotificationPlaceholder {
+  position: absolute;
+  z-index: 0;
+  bottom: 0;
+}
+
+.vuiNotificationPlaceholder1-isVisible {
+  bottom: -$sizeXxs;
+  animation: popBottom1 0.2s cubic-bezier(0.5, 0, 0.5, 1) 1;
+}
+
+.vuiNotificationPlaceholder2-isVisible {
+  bottom: -$sizeXxs * 1.75;
+  animation: popBottom2 0.2s cubic-bezier(0.5, 0, 0.5, 1) 1;
+}
+
+@keyframes popTop {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateY(10px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes popBottom1 {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateY(2px);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes popBottom2 {
+  0% {
+    transform: translateY(0);
+    opacity: 0;
+  }
+
+  50% {
+    transform: translateY(8x);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}

package/lib/components/optionsButton/OptionsButton.d.ts

@@ -0,0 +1,7 @@
+import { Props as ButtonPrimaryProps } from "../button/ButtonPrimary";
+import { Props as OptionsListProps } from "../optionsList/OptionsList";
+import { Props as PopoverProps } from "../popover/Popover";
+export type Props = Pick<PopoverProps, "isOpen" | "setIsOpen"> & Pick<OptionsListProps<any>, "options" | "onSelectOption"> & Pick<ButtonPrimaryProps, "children" | "icon" | "color" | "size" | "className" | "fullWidth" | "onClick"> & {
+    type?: "primary" | "secondary";
+};
+export declare const VuiOptionsButton: ({ type, isOpen, setIsOpen, children, icon, color, size, className, fullWidth, onSelectOption, options, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/optionsButton/OptionsButton.js

@@ -0,0 +1,25 @@
+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 { BiCaretDown } from "react-icons/bi";
+import { VuiButtonPrimary } from "../button/ButtonPrimary";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiOptionsList } from "../optionsList/OptionsList";
+import { VuiIcon } from "../icon/Icon";
+import { VuiPopover } from "../popover/Popover";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+export const VuiOptionsButton = (_a) => {
+    var { type = "primary", isOpen, setIsOpen, children, icon, color, size, className, fullWidth, onSelectOption, options } = _a, rest = __rest(_a, ["type", "isOpen", "setIsOpen", "children", "icon", "color", "size", "className", "fullWidth", "onSelectOption", "options"]);
+    const Button = type === "primary" ? VuiButtonPrimary : VuiButtonSecondary;
+    return (_jsxs(VuiFlexContainer, Object.assign({ spacing: "none", alignItems: "center", className: className }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(Button, Object.assign({ icon: icon, color: color, size: size, className: "vuiOptionsButtonLeft", fullWidth: fullWidth }, rest, { children: children })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx(Button, { color: color, size: size, className: `vuiOptionsButtonRight vuiOptionsButtonRight--${color}`, isSelected: isOpen, icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }) }) }, { children: _jsx(VuiOptionsList, { onSelectOption: onSelectOption, options: options }) })) }))] })));
+};

package/lib/components/optionsButton/_index.scss

@@ -0,0 +1,42 @@
+.vuiOptionsButtonLeft {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+.vuiOptionsButtonRight {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 1px solid;
+}
+
+// Color
+$colorPrimaryButton: (
+  accent: transparentize($colorEmptyShade, 0.5),
+  primary: transparentize($colorEmptyShade, 0.5),
+  success: transparentize($colorEmptyShade, 0.5),
+  danger: transparentize($colorEmptyShade, 0.5),
+  warning: transparentize($colorEmptyShade, 0.5),
+  neutral: transparentize($colorText, 0.8)
+);
+
+@each $colorName, $colorValue in $colorPrimaryButton {
+  .vuiButtonPrimary.vuiOptionsButtonRight--#{$colorName} {
+    border-left-color: $colorValue;
+  }
+}
+
+$coloSecondaryButton: (
+  accent: transparentize($colorAccent, 0.7),
+  primary: transparentize($colorPrimary, 0.7),
+  success: transparentize($colorSuccess, 0.7),
+  danger: transparentize($colorDanger, 0.7),
+  warning: transparentize($colorWarning, 0.7),
+  neutral: transparentize($colorText, 0.8)
+);
+
+@each $colorName, $colorValue in $coloSecondaryButton {
+  .vuiButtonSecondary.vuiOptionsButtonRight--#{$colorName} {
+    border-left-color: $colorValue;
+  }
+}

package/lib/components/optionsList/OptionsList.d.ts

@@ -0,0 +1,13 @@
+import { OptionListItem } from "./types";
+declare const SIZE: readonly ["s", "m", "l"];
+export type Props<T> = {
+    className?: string;
+    options: OptionListItem<T>[];
+    onSelectOption?: (value: T) => void;
+    selected?: T | T[];
+    isSelectable?: boolean;
+    isScrollable?: boolean;
+    size?: (typeof SIZE)[number];
+};
+export declare const VuiOptionsList: <T extends unknown = unknown>({ className, options, onSelectOption, selected, isSelectable, isScrollable, size, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/optionsList/OptionsList.js

@@ -0,0 +1,31 @@
+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 { VuiOptionsListItem } from "./OptionsListItem";
+const SIZE = ["s", "m", "l"];
+// https://github.com/typescript-eslint/typescript-eslint/issues/4062
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+export const VuiOptionsList = (_a) => {
+    var { className, options, onSelectOption, selected, isSelectable = false, isScrollable = false, size = "s" } = _a, rest = __rest(_a, ["className", "options", "onSelectOption", "selected", "isSelectable", "isScrollable", "size"]);
+    const classes = classNames("vuiOptionsList", `vuiOptionsList--${size}`, {
+        "vuiOptionsList--scrollable": isScrollable
+    }, className);
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: options.map((_a) => {
+            var { value, label, onClick } = _a, rest = __rest(_a, ["value", "label", "onClick"]);
+            const isSelected = Array.isArray(selected) ? selected.includes(value) : value === selected;
+            return (_jsx(VuiOptionsListItem, Object.assign({ value: value, label: label, onClick: () => {
+                    onClick === null || onClick === void 0 ? void 0 : onClick(value);
+                    onSelectOption === null || onSelectOption === void 0 ? void 0 : onSelectOption(value);
+                }, isSelectable: isSelectable, isSelected: isSelected }, rest), label));
+        }) })));
+};

package/lib/components/optionsList/OptionsListItem.d.ts

@@ -0,0 +1,10 @@
+import { OptionListItem } from "./types";
+import { LinkProps } from "../link/types";
+export declare const colorIcon: (icon: OptionListItem<string>["icon"], color: OptionListItem<string>["color"]) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+type Props<T> = OptionListItem<T> & {
+    isSelectable?: boolean;
+    isSelected?: boolean;
+    target?: LinkProps["target"];
+};
+export declare const VuiOptionsListItem: <T extends unknown = unknown>({ value, label, icon, color, href, target, onClick, isSelectable, isSelected, testId, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/optionsList/OptionsListItem.js

@@ -0,0 +1,41 @@
+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 { cloneElement } from "react";
+import { BiCheck } from "react-icons/bi";
+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 colorIcon = (icon, color) => {
+    return icon
+        ? cloneElement(icon, {
+            color,
+            size: "s"
+        })
+        : null;
+};
+// https://github.com/typescript-eslint/typescript-eslint/issues/4062
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+export const VuiOptionsListItem = (_a) => {
+    var { value, label, icon, color = "neutral", href, target, onClick, isSelectable, isSelected, testId } = _a, rest = __rest(_a, ["value", "label", "icon", "color", "href", "target", "onClick", "isSelectable", "isSelected", "testId"]);
+    const { createLink } = useVuiContext();
+    const labelContent = icon ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: colorIcon(icon, color) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: label }))] }))) : (label);
+    const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isSelectable && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIcon, Object.assign({ className: isSelected ? "" : "vuiOptionsListItem__selected--unselected", color: "accent", size: "s" }, { children: _jsx(BiCheck, {}) })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: labelContent }))] })));
+    const classes = classNames("vuiOptionsListItem", `vuiOptionsListItem--${color}`);
+    if (href) {
+        return createLink(Object.assign({ className: classes, href,
+            target, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), "data-testid": testId, children: content }, rest));
+    }
+    return (_jsx("button", Object.assign({ className: classes, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(value), "data-testid": testId }, rest, { children: content })));
+};

package/lib/components/optionsList/_index.scss

@@ -0,0 +1,84 @@
+@use "sass:map";
+
+.vuiOptionsList {
+  display: flex;
+  flex-direction: column;
+  font-size: $fontSizeStandard;
+}
+
+.vuiOptionsList--scrollable {
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.vuiOptionsList--s {
+  .vuiOptionsListItem {
+    padding: ($sizeXxs + 1px) $sizeXs;
+  }
+}
+
+.vuiOptionsList--m {
+  .vuiOptionsListItem {
+    padding: ($sizeXxs + 1px) $sizeS;
+  }
+}
+
+.vuiOptionsList--l {
+  .vuiOptionsListItem {
+    padding: $sizeXs $sizeS;
+  }
+}
+
+.vuiOptionsListItem {
+  background-color: $colorEmptyShade;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Color
+$color: (
+  accent: (
+    "color": $colorAccent,
+    "hover-color": $colorAccent,
+    "selected-color": $colorAccentLightShade
+  ),
+  primary: (
+    "color": $colorPrimary,
+    "hover-color": $colorPrimary,
+    "selected-color": $colorPrimaryLighterShade
+  ),
+  success: (
+    "color": $colorSuccess,
+    "hover-color": $colorSuccess,
+    "selected-color": $colorSuccessLightShade
+  ),
+  danger: (
+    "color": $colorDanger,
+    "hover-color": $colorDanger,
+    "selected-color": $colorDangerLightShade
+  ),
+  warning: (
+    "color": $colorWarning,
+    "hover-color": $colorWarning,
+    "selected-color": $colorWarningLightShade
+  ),
+  neutral: (
+    "color": $colorText,
+    "hover-color": $colorPrimary,
+    "selected-color": $colorPrimaryLighterShade
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiOptionsListItem--#{$colorName} {
+    color: #{map.get($colorValue, "color")};
+
+    &:hover {
+      color: #{map.get($colorValue, "hover-color")};
+      background-color: #{map.get($colorValue, "selected-color")};
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { TextColor } from "../typography/types";
+import { LinkProps } from "../link/types";
+export type OptionListItem<T> = {
+    value: T;
+    label: string;
+    icon?: ReactElement | null;
+    href?: string;
+    target?: LinkProps["target"];
+    onClick?: (value: T) => void;
+    color?: TextColor;
+    testId?: string;
+};

package/lib/components/optionsList/types.js

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

package/lib/components/popover/Popover.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export type Props = {
+    button: React.ReactElement;
+    children?: React.ReactNode;
+    className?: string;
+    header?: React.ReactNode;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    padding?: boolean;
+};
+export declare const VuiPopover: ({ button: originalButton, children, className, header, isOpen, setIsOpen, padding, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/popover/Popover.js

@@ -0,0 +1,91 @@
+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 { cloneElement, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { VuiPortal } from "../portal/Portal";
+import { FocusOn } from "react-focus-on";
+const getPosition = (button) => {
+    if (!button)
+        return undefined;
+    const { bottom, right } = button.getBoundingClientRect();
+    return {
+        top: bottom + 2 + document.documentElement.scrollTop,
+        right: window.innerWidth - right
+    };
+};
+export const VuiPopover = (_a) => {
+    var { button: originalButton, children, className, header, isOpen, setIsOpen, padding } = _a, rest = __rest(_a, ["button", "children", "className", "header", "isOpen", "setIsOpen", "padding"]);
+    const returnFocusElRef = useRef(null);
+    const buttonRef = useRef(null);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [positionMarker, setPositionMarker] = useState(0);
+    const button = cloneElement(originalButton, {
+        isSelected: isOpen,
+        onClick: () => {
+            setIsOpen(!isOpen);
+        },
+        ref: (node) => {
+            buttonRef.current = node;
+        }
+    });
+    useEffect(() => {
+        const updatePosition = () => {
+            // Force a re-render when the window resizes.
+            setPositionMarker(Date.now());
+        };
+        window.removeEventListener("resize", updatePosition);
+        // Mostly defensive to prevent weird bugs where the popover ends
+        // up being rendered partially off-screen.
+        window.removeEventListener("scroll", updatePosition);
+        return () => {
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition);
+        };
+    }, []);
+    useEffect(() => {
+        var _a;
+        if (isOpen) {
+            returnFocusElRef.current = document.activeElement;
+        }
+        else {
+            (_a = returnFocusElRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            returnFocusElRef.current = null;
+        }
+    }, [isOpen]);
+    // Allow contents to respond to blur events before unmounting, and also
+    // enable focus to properly return to the button when the user clicks
+    // outside of the popover.
+    const onCloseDelayed = () => {
+        window.setTimeout(() => {
+            setIsOpen(false);
+        }, 0);
+    };
+    // Always keep menu position up to date. If we tried to cache this inside
+    // a useEffect based on isOpen then there'd be a flicker if the width
+    // of the button changes.
+    const position = getPosition(buttonRef.current);
+    const classes = classNames("vuiPopover", className);
+    const contentClasses = classNames("vuiPopoverContent", {
+        "vuiPopoverContent--padding": padding
+    });
+    return (_jsxs(_Fragment, { children: [button, _jsx(VuiPortal, { children: isOpen && position && (_jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: onCloseDelayed, 
+                    // Enable manual focus return to work.
+                    returnFocus: false, 
+                    // Enable focus on contents when it's open,
+                    // but enable manual focus return to work when it's closed.
+                    autoFocus: isOpen, 
+                    // Enable scrolling of the page.
+                    scrollLock: false, 
+                    // Enable scrolling of the page.
+                    preventScrollOnFocus: false }, { children: _jsxs("div", Object.assign({ className: classes, style: { top: `${position.top}px`, right: `${position.right}px` } }, rest, { children: [header && typeof header === "string" ? _jsx("div", Object.assign({ className: "vuiPopoverTitle" }, { children: header })) : header, children && _jsx("div", Object.assign({ className: contentClasses }, { children: children }))] })) }))) })] }));
+};

package/lib/components/popover/_index.scss

@@ -0,0 +1,29 @@
+.vuiPopover {
+  position: absolute;
+  background-color: $colorEmptyShade;
+  border: 1px solid $borderColor;
+  z-index: $popoverZIndex;
+  box-shadow: $shadowLargeEnd;
+  border-radius: $sizeXxs;
+  overflow: hidden;
+}
+
+.vuiOptionsListItem__selected--unselected {
+  visibility: hidden;
+}
+
+.vuiPopoverTitle {
+  padding: $sizeXs $sizeS;
+  border-bottom: 1px solid $borderColor;
+  font-weight: $fontWeightBold;
+  font-size: $fontSizeStandard;
+  color: $colorDarkerShade;
+}
+
+.vuiPopoverContent {
+  padding: $sizeXxs 0;
+}
+
+.vuiPopoverContent--padding {
+  padding: $sizeS;
+}

package/lib/components/portal/Portal.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+};
+export declare const VuiPortal: ({ children }: Props) => import("react").ReactPortal | null;
+export {};

package/lib/components/portal/Portal.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+export const VuiPortal = ({ children }) => {
+    const portalRef = useRef(null);
+    useEffect(() => {
+        portalRef.current = document.createElement("div");
+        document.body.appendChild(portalRef.current);
+        return () => {
+            var _a, _b;
+            (_b = (_a = portalRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(portalRef.current);
+        };
+    }, []);
+    if (!portalRef.current)
+        return null;
+    return createPortal(children, portalRef.current);
+};

package/lib/components/progressBar/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+export declare const PROGRESS_BAR_COLOR: readonly ["accent", "primary", "danger", "warning", "success", "neutral"];
+type Props = {
+    color: (typeof PROGRESS_BAR_COLOR)[number];
+    percentage: number;
+    className?: string;
+    value?: string;
+};
+export declare const VuiProgressBar: ({ color, percentage, className, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/progressBar/ProgressBar.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 { VuiText } from "../typography/Text";
+export const PROGRESS_BAR_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral"];
+export const VuiProgressBar = (_a) => {
+    var { color, percentage, className, value } = _a, rest = __rest(_a, ["color", "percentage", "className", "value"]);
+    const classes = classNames(className, "vuiProgressBar", `vuiProgressBar--${color}`);
+    const bar = (_jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", { className: "vuiProgressBar__empty" }), _jsx("div", { className: "vuiProgressBar__bar", style: { width: `${percentage}%` } }), _jsx("div", { className: "vuiProgressBar__outline" })] })));
+    if (value) {
+        return (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: value }) }) })), _jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: bar }))] })));
+    }
+    return bar;
+};