@vectara/vectara-ui 10.0.1 → 11.0.1

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

@@ -12,6 +12,7 @@ type ContentProps = {
 };
 type Props = (SidedProps | ContentProps) & {
     className?: string;
+    darkTheme?: boolean;
 };
-export declare const VuiAppHeader: ({ left, right, content, growRight, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiAppHeader: ({ left, right, content, growRight, className, darkTheme, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/app/AppHeader.js

@@ -14,7 +14,9 @@ import classNames from "classnames";
 import { VuiFlexContainer } from "../flex/FlexContainer";
 import { VuiFlexItem } from "../flex/FlexItem";
 export const VuiAppHeader = (_a) => {
-    var { left, right, content, growRight, className } = _a, rest = __rest(_a, ["left", "right", "content", "growRight", "className"]);
-    const classes = classNames("vuiAppHeader", className);
+    var { left, right, content, growRight, className, darkTheme } = _a, rest = __rest(_a, ["left", "right", "content", "growRight", "className", "darkTheme"]);
+    const classes = classNames("vuiAppHeader", className, {
+        vuiThemeDark: darkTheme
+    });
     return (_jsx("div", Object.assign({ className: classes }, rest, { children: content ? (content) : (_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/button/IconButton.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { ButtonColor, BUTTON_SIZE } from "./types";
 import { LinkProps } from "../link/types";
+import { Props as TooltipProps } from "../tooltip/Tooltip";
 type Props = {
     className?: string;
     icon: ReactElement;
@@ -17,6 +18,10 @@ type Props = {
     tabIndex?: number;
     isSelected?: boolean;
     isDisabled?: boolean;
+    tooltip?: {
+        darkTheme?: TooltipProps["darkTheme"];
+        position?: TooltipProps["position"];
+    };
 };
 export declare const VuiIconButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | null>>;
 export {};

package/lib/components/button/IconButton.js

@@ -17,7 +17,7 @@ import { createButtonIcon } from "./createButtonIcon";
 import { useVuiContext } from "../context/Context";
 import { VuiTooltip } from "../tooltip/Tooltip";
 export const VuiIconButton = forwardRef((_a, ref) => {
-    var { className, icon, color = "primary", size = "m", onClick, onMouseOver, onMouseOut, onMouseMove, href, target, track, tabIndex, isSelected = false, isDisabled = false } = _a, rest = __rest(_a, ["className", "icon", "color", "size", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "href", "target", "track", "tabIndex", "isSelected", "isDisabled"]);
+    var { className, icon, color = "primary", size = "m", onClick, onMouseOver, onMouseOut, onMouseMove, href, target, track, tabIndex, tooltip = {}, isSelected = false, isDisabled = false } = _a, rest = __rest(_a, ["className", "icon", "color", "size", "onClick", "onMouseOver", "onMouseOut", "onMouseMove", "href", "target", "track", "tabIndex", "tooltip", "isSelected", "isDisabled"]);
     const { createLink } = useVuiContext();
     const props = Object.assign({ className: classNames("vuiIconButton", className, `vuiIconButton--${color}`, `vuiIconButton--${size}`, {
             [`vuiIconButton--${color}-isSelected`]: isSelected,
@@ -36,5 +36,5 @@ export const VuiIconButton = forwardRef((_a, ref) => {
     else {
         iconButton = (_jsx("button", Object.assign({ type: "button" }, props, { ref: ref, disabled: isDisabled }, { children: buttonIcon })));
     }
-    return _jsx(VuiTooltip, Object.assign({ tip: rest["aria-label"] }, { children: iconButton }));
+    return (_jsx(VuiTooltip, Object.assign({}, tooltip, { tip: rest["aria-label"] }, { children: iconButton })));
 });

package/lib/components/image/ImagePreview.js

@@ -52,8 +52,17 @@ export const VuiImagePreview = ({ images, initialIndex = 0, isOpen, onClose, cla
     return (_jsx(VuiPortal, { children: isOpen && (_jsx("div", Object.assign({ className: className }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: handleOnClose, returnFocus: false, autoFocus: isOpen }, { children: _jsx("figure", { children: _jsx("div", Object.assign({ className: "vuiImagePreview__container" }, { children: _jsxs("div", Object.assign({ className: "vuiImagePreview__mask", onClick: handleOnClose }, { children: [_jsx("div", Object.assign({ onClick: (e) => e.stopPropagation() }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween", className: "vuiImagePreview__header" }, { children: [_jsx(VuiFlexItem, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isCarousel && (_jsxs(_Fragment, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Previous image", onClick: (e) => {
                                                                             e.stopPropagation();
                                                                             handlePrevious();
-                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronLeft, {}) })) }) }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Next image", onClick: (e) => {
+                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronLeft, {}) })), tooltip: {
+                                                                            darkTheme: true,
+                                                                            position: "bottom-end"
+                                                                        } }) }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Next image", onClick: (e) => {
                                                                             e.stopPropagation();
                                                                             handleNext();
-                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronRight, {}) })) }) })] })), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: _jsxs("figcaption", { children: [isCarousel && `Image ${currentIndex + 1} of ${images.length}: `, images[currentIndex].caption] }) })) })) })] })) }), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })) }) })) }))] })) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) }) })) }))) }));
+                                                                        }, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronRight, {}) })), tooltip: {
+                                                                            darkTheme: true,
+                                                                            position: "bottom"
+                                                                        } }) })] })), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: _jsxs("figcaption", { children: [isCarousel && `Image ${currentIndex + 1} of ${images.length}: `, images[currentIndex].caption] }) })) })) })] })) }), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })), tooltip: {
+                                                            darkTheme: true,
+                                                            position: "bottom-end"
+                                                        } }) })) }))] })) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) }) })) }))) }));
 };

package/lib/components/tabs/_enclosed.scss

@@ -1,6 +1,6 @@
 .vuiTabs--enclosed {
   display: inline-flex;
-  background-color: $colorLightShade;
+  background-color: var(--color-light-shade);
   border-radius: $sizeXxs;
   padding: $sizeXxxs $sizeXs;
 
@@ -23,18 +23,18 @@
   .vuiTab {
     &:hover {
       .vuiTab__inner {
-        color: $colorFullShade;
-        background-color: transparentize($colorEmptyShade, 0.25);
+        color: var(--color-full-shade);
+        background-color: rgba(var(--color-empty-shade-rgb), 0.75);
 
         .vuiIcon__inner {
-          color: $colorFullShade !important;
+          color: var(--color-full-shade) !important;
         }
       }
     }
 
     &.vuiTab-isActive {
       .vuiTab__inner {
-        background-color: $colorEmptyShade;
+        background-color: var(--color-empty-shade);
         box-shadow: $shadowSmallEnd;
       }
     }

package/lib/components/tabs/_index.scss

@@ -65,7 +65,7 @@
   white-space: nowrap;
   flex-grow: 0;
   flex-shrink: 0;
-  color: $colorSubdued;
+  color: var(--color-subdued);
   text-decoration: none;
   cursor: pointer;
 
@@ -79,6 +79,6 @@
 
   &.vuiTab-isActive {
     pointer-events: none;
-    color: $colorFullShade;
+    color: var(--color-full-shade);
   }
 }

package/lib/components/tabs/_open.scss

@@ -37,7 +37,7 @@
       box-shadow: var(--color-border) 0px 1px 0px;
 
       .vuiTab__inner {
-        background-color: $colorLightShade;
+        background-color: var(--color-light-shade);
       }
     }
   }

package/lib/components/tooltip/Tooltip.d.ts

@@ -1,6 +1,8 @@
-type Props = {
+import { TooltipRefProps } from "react-tooltip";
+export type Props = {
     children: React.ReactNode;
     tip: React.ReactNode;
+    darkTheme?: boolean;
+    position?: TooltipRefProps["place"];
 };
-export declare const VuiTooltip: ({ children, tip }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const VuiTooltip: ({ children, darkTheme, position, tip }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tooltip/Tooltip.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 import { useState, cloneElement } from "react";
 import { Tooltip } from "react-tooltip";
 const generateTooltipId = () => {
     return `tooltip-${Math.random().toString(36).slice(2, 9)}`;
 };
-export const VuiTooltip = ({ children, tip }) => {
+export const VuiTooltip = ({ children, darkTheme, position, tip }) => {
     const [id] = useState(generateTooltipId());
     const target = cloneElement(children, {
         "data-tooltip-id": id
     });
-    return (_jsxs(_Fragment, { children: [target, _jsx(Tooltip, Object.assign({ id: id, offset: 10, className: "vuiTooltip", opacity: 1 }, { children: tip }))] }));
+    const classes = classNames("vuiTooltip", {
+        vuiThemeDark: darkTheme
+    });
+    return (_jsxs(_Fragment, { children: [target, _jsx(Tooltip, Object.assign({ id: id, offset: 10, className: classes, opacity: 1, place: position }, { children: tip }))] }));
 };
 // This is a workaround for the issue with ResizeObserver in ReactTooltip.
 // Without this, uncaught runtime errors are thrown: "ResizeObserver loop

package/lib/components/tooltip/_index.scss

@@ -1,5 +1,6 @@
 .vuiTooltip {
-  background-color: $colorDarkerShade !important;
+  background-color: var(--color-darker-shade) !important;
+  color: var(--color-empty-shade) !important;
   z-index: $tooltipZIndex !important;
 }
 

package/lib/sassUtils/_colors.scss

@@ -39,7 +39,7 @@ $colorDarkerShade: #1c1d22 !default;
 $colorFullShade: #0b0c0e !default;
 
 :root,
-.lightMode {
+.vuiThemeLight {
   // Semantic colors
   --color-accent: #{$colorAccent};
   --color-accent-rgb: #{toRgb($colorAccent)};
@@ -105,7 +105,7 @@ $colorFullShade: #0b0c0e !default;
   --color-border-light: #e3e4f3;
 }
 
-.darkMode {
+.vuiThemeDark {
   // // Semantic colors
   // --color-accent: #{$colorAccentLighterShade};
   // --color-accent-light-shade: #{$colorAccentLightShade};

package/lib/styles/index.css

@@ -186,7 +186,7 @@ fieldset {
 }
 
 :root,
-.lightMode {
+.vuiThemeLight {
   --color-accent: #5f30c3;
   --color-accent-rgb: 95, 48, 195;
   --color-accent-light-shade: rgba(95, 48, 195, 0.5);
@@ -239,7 +239,7 @@ fieldset {
   --color-border-light: #e3e4f3;
 }
 
-.darkMode {
+.vuiThemeDark {
   --color-primary-highlight: #d9e2ff;
   --color-primary-highlight-rgb: 217, 226, 255;
   --color-subdued: #6d7686;
@@ -2226,7 +2226,7 @@ h2.react-datepicker__current-month {
 }
 
 :root,
-.lightMode {
+.vuiThemeLight {
   --color-accent: #5f30c3;
   --color-accent-rgb: 95, 48, 195;
   --color-accent-light-shade: rgba(95, 48, 195, 0.5);
@@ -2279,7 +2279,7 @@ h2.react-datepicker__current-month {
   --color-border-light: #e3e4f3;
 }
 
-.darkMode {
+.vuiThemeDark {
   --color-primary-highlight: #d9e2ff;
   --color-primary-highlight-rgb: 217, 226, 255;
   --color-subdued: #6d7686;
@@ -4266,7 +4266,7 @@ h2.react-datepicker__current-month {
 }
 
 :root,
-.lightMode {
+.vuiThemeLight {
   --color-accent: #5f30c3;
   --color-accent-rgb: 95, 48, 195;
   --color-accent-light-shade: rgba(95, 48, 195, 0.5);
@@ -4319,7 +4319,7 @@ h2.react-datepicker__current-month {
   --color-border-light: #e3e4f3;
 }
 
-.darkMode {
+.vuiThemeDark {
   --color-primary-highlight: #d9e2ff;
   --color-primary-highlight-rgb: 217, 226, 255;
   --color-subdued: #6d7686;
@@ -4741,12 +4741,12 @@ h2.react-datepicker__current-month {
   box-shadow: var(--color-border) 0px 1px 0px;
 }
 .vuiTabs--open .vuiTab.vuiTab-isActive .vuiTab__inner {
-  background-color: #f1f4f6;
+  background-color: var(--color-light-shade);
 }
 
 .vuiTabs--enclosed {
   display: inline-flex;
-  background-color: #f1f4f6;
+  background-color: var(--color-light-shade);
   border-radius: 4px;
   padding: 2px 8px;
 }
@@ -4757,14 +4757,14 @@ h2.react-datepicker__current-month {
   padding: 8px 16px;
 }
 .vuiTabs--enclosed .vuiTab:hover .vuiTab__inner {
-  color: #0b0c0e;
-  background-color: rgba(255, 255, 255, 0.75);
+  color: var(--color-full-shade);
+  background-color: rgba(var(--color-empty-shade-rgb), 0.75);
 }
 .vuiTabs--enclosed .vuiTab:hover .vuiTab__inner .vuiIcon__inner {
-  color: #0b0c0e !important;
+  color: var(--color-full-shade) !important;
 }
 .vuiTabs--enclosed .vuiTab.vuiTab-isActive .vuiTab__inner {
-  background-color: #ffffff;
+  background-color: var(--color-empty-shade);
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
@@ -4820,7 +4820,7 @@ h2.react-datepicker__current-month {
   white-space: nowrap;
   flex-grow: 0;
   flex-shrink: 0;
-  color: #6d7686;
+  color: var(--color-subdued);
   text-decoration: none;
   cursor: pointer;
 }
@@ -4832,7 +4832,7 @@ h2.react-datepicker__current-month {
 }
 .vuiTab.vuiTab-isActive {
   pointer-events: none;
-  color: #0b0c0e;
+  color: var(--color-full-shade);
 }
 
 .vuiTimelineContainer {
@@ -4923,7 +4923,8 @@ h2.react-datepicker__current-month {
 }
 
 .vuiTooltip {
-  background-color: #1c1d22 !important;
+  background-color: var(--color-darker-shade) !important;
+  color: var(--color-empty-shade) !important;
   z-index: 2000 !important;
 }
 

package/package.json

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