@vectara/vectara-ui 18.4.0 → 19.1.0

package/lib/components/index.d.ts

@@ -16,12 +16,21 @@ import { VuiButtonTertiary } from "./button/ButtonTertiary";
 import { VuiIconButton } from "./button/IconButton";
 import { VuiCallout } from "./callout/Callout";
 import { VuiCard, VuiSimpleCard } from "./card";
+import { BarChartSeries, VuiBarChart } from "./chart/BarChart";
+import { LineChartSeries, LineChartVariant, VuiLineChart } from "./chart/LineChart";
+import { VuiPieChart } from "./chart/PieChart";
+import { VuiSparkline } from "./chart/Sparkline";
+import { VuiTreeMap } from "./chart/TreeMap";
+import { ScatterSeries, VuiScatterChart } from "./chart/ScatterChart";
+import { ComposedSeries, VuiComposedChart } from "./chart/ComposedChart";
+import { CHART_PALETTE } from "./chart/palette";
 import { CALLOUT_COLOR, CALLOUT_SIZE, CalloutColor } from "./callout/types";
 import { ChatTurn, ChatStyle, ChatLanguage } from "./chat/types";
 import { VuiChat } from "./chat/Chat";
 import { VuiChip } from "./chip/Chip";
 import { VuiCode } from "./code/Code";
 import { CodeLanguage } from "./code/types";
+import { VuiComposer, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission } from "./composer/Composer";
 import { VuiComplexConfigurationButton } from "./complexConfigurationButton/ComplexConfigurationButton";
 import { VuiContextProvider } from "./context/Context";
 import { VuiCopyButton } from "./copyButton/CopyButton";
@@ -30,6 +39,7 @@ import { VuiDateRangePicker } from "./datePicker/DateRangePicker";
 import { VuiDrawer } from "./drawer/Drawer";
 import { DURATION_BAR_COLOR, VuiDurationBar } from "./durationBar/DurationBar";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
+import { VuiFileDropTarget } from "./fileDropTarget/FileDropTarget";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
 import { CheckboxConfig, CodeEditorColorConfig, CodeEditorError, RadioButtonConfig, generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
@@ -63,6 +73,7 @@ import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
 import { OptionListItem } from "./optionsList/types";
 import { VuiPagination, Pagination } from "./pagination/Pagination";
 import { VuiPanel } from "./panel/Panel";
+import { PATCH_COLOR, PatchColor, VuiPatch } from "./patch/VuiPatch";
 import { VuiPopover, AnchorSide } from "./popover/Popover";
 import { VuiPortal } from "./portal/Portal";
 import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
@@ -105,5 +116,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, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, 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, VuiChip, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, 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 };
+export type { AnchorSide, AppContentPadding, BarChartSeries, ComposedSeries, LineChartSeries, LineChartVariant, ScatterSeries, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, ComposerFileError, ComposerShortcutApi, ComposerShortcutHandler, ComposerSubmission, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, PatchColor, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabNavigatorRoute, TabSize, Tree, TreeItem };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, 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, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, 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

@@ -14,10 +14,19 @@ import { VuiButtonTertiary } from "./button/ButtonTertiary";
 import { VuiIconButton } from "./button/IconButton";
 import { VuiCallout } from "./callout/Callout";
 import { VuiCard, VuiSimpleCard } from "./card";
+import { VuiBarChart } from "./chart/BarChart";
+import { VuiLineChart } from "./chart/LineChart";
+import { VuiPieChart } from "./chart/PieChart";
+import { VuiSparkline } from "./chart/Sparkline";
+import { VuiTreeMap } from "./chart/TreeMap";
+import { VuiScatterChart } from "./chart/ScatterChart";
+import { VuiComposedChart } from "./chart/ComposedChart";
+import { CHART_PALETTE } from "./chart/palette";
 import { CALLOUT_COLOR, CALLOUT_SIZE } from "./callout/types";
 import { VuiChat } from "./chat/Chat";
 import { VuiChip } from "./chip/Chip";
 import { VuiCode } from "./code/Code";
+import { VuiComposer } from "./composer/Composer";
 import { VuiComplexConfigurationButton } from "./complexConfigurationButton/ComplexConfigurationButton";
 import { VuiContextProvider } from "./context/Context";
 import { VuiCopyButton } from "./copyButton/CopyButton";
@@ -26,6 +35,7 @@ import { VuiDateRangePicker } from "./datePicker/DateRangePicker";
 import { VuiDrawer } from "./drawer/Drawer";
 import { DURATION_BAR_COLOR, VuiDurationBar } from "./durationBar/DurationBar";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
+import { VuiFileDropTarget } from "./fileDropTarget/FileDropTarget";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
 import { generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
@@ -56,6 +66,7 @@ import { VuiOptionsList } from "./optionsList/OptionsList";
 import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
 import { VuiPagination } from "./pagination/Pagination";
 import { VuiPanel } from "./panel/Panel";
+import { PATCH_COLOR, VuiPatch } from "./patch/VuiPatch";
 import { VuiPopover } from "./popover/Popover";
 import { VuiPortal } from "./portal/Portal";
 import { PROGRESS_BAR_COLOR, VuiProgressBar } from "./progressBar/ProgressBar";
@@ -96,4 +107,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, DURATION_BAR_COLOR, 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, VuiChip, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, 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 };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CHART_PALETTE, CALLOUT_COLOR, CALLOUT_SIZE, DURATION_BAR_COLOR, ICON_COLOR, ICON_SIZE, ICON_TYPE, PATCH_COLOR, 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, VuiBarChart, VuiComposedChart, VuiLineChart, VuiPieChart, VuiScatterChart, VuiSparkline, VuiTreeMap, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiChip, VuiCode, VuiCodeEditor, VuiComposer, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiDurationBar, VuiErrorBoundary, VuiFileDropTarget, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiMenuList, VuiMenuListButton, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPatch, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSideList, VuiSideListButton, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, 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/patch/VuiPatch.d.ts

@@ -0,0 +1,10 @@
+export declare const PATCH_COLOR: readonly ["red", "orange", "amber", "lime", "emerald", "teal", "sky", "indigo", "purple", "fuchsia", "pink", "slate"];
+export type PatchColor = (typeof PATCH_COLOR)[number];
+type Props = {
+    color: PatchColor;
+    size?: "xs" | "s" | "m";
+    children?: React.ReactNode;
+    "data-testid"?: string;
+};
+export declare const VuiPatch: ({ color, size, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/patch/VuiPatch.js

@@ -0,0 +1,32 @@
+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";
+export const PATCH_COLOR = [
+    "red",
+    "orange",
+    "amber",
+    "lime",
+    "emerald",
+    "teal",
+    "sky",
+    "indigo",
+    "purple",
+    "fuchsia",
+    "pink",
+    "slate"
+];
+export const VuiPatch = (_a) => {
+    var { color, size = "xs", children } = _a, rest = __rest(_a, ["color", "size", "children"]);
+    const classes = classNames("vuiPatch", `vuiPatch--${color}`, `vuiPatch--${size}`);
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/patch/_index.scss

@@ -0,0 +1,30 @@
+.vuiPatch {
+  flex: 0 0 auto;
+  border-radius: $sizeXs;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+$colors: "indigo", "emerald", "amber", "pink", "sky", "orange", "slate", "teal", "lime", "purple", "fuchsia", "red";
+
+@each $color in $colors {
+  .vuiPatch--#{$color} {
+    background-color: var(--vui-color-#{$color}-background);
+    color: var(--vui-color-#{$color}-text);
+  }
+}
+
+$size: (
+  xs: $sizeXs,
+  s: $sizeS,
+  m: $sizeM
+);
+
+$sizes: "xs", "s", "m";
+
+@each $sizeName, $sizeValue in $size {
+  .vuiPatch--#{$sizeName} {
+    padding: $sizeValue;
+  }
+}

package/lib/styles/index.css

@@ -1310,50 +1310,49 @@ fieldset {
 }
 
 .vuiSimpleCard--interactive {
-  border: 1px solid var(--vui-color-primary-highlight-shade);
   transition: box-shadow 0.2s, border-color 0.2s;
 }
 .vuiSimpleCard--interactive:hover {
-  border-color: var(--vui-color-primary-shade);
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
-}
-
-.vuiSimpleCard--danger {
-  border-color: var(--vui-color-danger-shade);
-}
-.vuiSimpleCard--danger.vuiSimpleCard--interactive:hover {
-  border-color: var(--vui-color-danger-shade);
-}
-
-.vuiSimpleCard--warning {
-  border-color: var(--vui-color-warning-shade);
-}
-.vuiSimpleCard--warning.vuiSimpleCard--interactive:hover {
-  border-color: var(--vui-color-warning-shade);
+  border-color: var(--vui-color-primary-highlight-shade);
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
 .vuiSimpleCard--fullHeight {
   height: 100%;
 }
 
-.vuiSimpleCard--xxs {
-  padding: 8px 12px;
+.vuiSimpleCard--s {
+  padding: 12px;
 }
 
-.vuiSimpleCard--xs {
-  padding: 12px 16px;
+.vuiSimpleCard--m {
+  padding: 16px;
 }
 
-.vuiSimpleCard--s {
-  padding: 16px 24px;
+.vuiSimpleCard--l {
+  padding: 24px;
 }
 
-.vuiSimpleCard--m {
-  padding: 24px 32px;
+.vuiBarChart,
+.vuiLineChart,
+.vuiPieChart,
+.vuiScatterChart,
+.vuiComposedChart,
+.vuiTreeMap {
+  width: 100%;
+}
+.vuiBarChart .recharts-legend-item,
+.vuiLineChart .recharts-legend-item,
+.vuiPieChart .recharts-legend-item,
+.vuiScatterChart .recharts-legend-item,
+.vuiComposedChart .recharts-legend-item,
+.vuiTreeMap .recharts-legend-item {
+  margin-right: 16px !important;
 }
 
-.vuiSimpleCard--l {
-  padding: 32px 40px;
+.vuiSparkline {
+  display: inline-block;
+  line-height: 0;
 }
 
 .vuiChatTurn {
@@ -1639,6 +1638,11 @@ fieldset {
   padding: 8px 4px 0 24px;
 }
 
+.vuiComposer {
+  position: relative;
+  width: 100%;
+}
+
 .vuiComplexConfigurationButton {
   width: 100%;
   border: 1px solid var(--vui-color-primary-highlight-shade);
@@ -2610,6 +2614,38 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-medium-shade);
 }
 
+.vuiFileDropTarget__messageContainer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vuiFileDropTarget__message {
+  padding: 24px;
+  max-width: 400px;
+  width: 100%;
+  pointer-events: none;
+}
+.vuiFileDropTarget__message p,
+.vuiFileDropTarget__message span {
+  color: var(--vui-color-empty-shade) !important;
+}
+
+.vuiFileDropTarget__scopedOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(var(--vui-color-primary-shade-rgb), 0.6);
+  z-index: 10;
+}
+
 .vuiFlexContainer {
   display: flex;
   align-items: stretch;
@@ -4600,6 +4636,86 @@ h2.react-datepicker__current-month {
   height: auto;
 }
 
+.vuiPatch {
+  flex: 0 0 auto;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vuiPatch--indigo {
+  background-color: var(--vui-color-indigo-background);
+  color: var(--vui-color-indigo-text);
+}
+
+.vuiPatch--emerald {
+  background-color: var(--vui-color-emerald-background);
+  color: var(--vui-color-emerald-text);
+}
+
+.vuiPatch--amber {
+  background-color: var(--vui-color-amber-background);
+  color: var(--vui-color-amber-text);
+}
+
+.vuiPatch--pink {
+  background-color: var(--vui-color-pink-background);
+  color: var(--vui-color-pink-text);
+}
+
+.vuiPatch--sky {
+  background-color: var(--vui-color-sky-background);
+  color: var(--vui-color-sky-text);
+}
+
+.vuiPatch--orange {
+  background-color: var(--vui-color-orange-background);
+  color: var(--vui-color-orange-text);
+}
+
+.vuiPatch--slate {
+  background-color: var(--vui-color-slate-background);
+  color: var(--vui-color-slate-text);
+}
+
+.vuiPatch--teal {
+  background-color: var(--vui-color-teal-background);
+  color: var(--vui-color-teal-text);
+}
+
+.vuiPatch--lime {
+  background-color: var(--vui-color-lime-background);
+  color: var(--vui-color-lime-text);
+}
+
+.vuiPatch--purple {
+  background-color: var(--vui-color-purple-background);
+  color: var(--vui-color-purple-text);
+}
+
+.vuiPatch--fuchsia {
+  background-color: var(--vui-color-fuchsia-background);
+  color: var(--vui-color-fuchsia-text);
+}
+
+.vuiPatch--red {
+  background-color: var(--vui-color-red-background);
+  color: var(--vui-color-red-text);
+}
+
+.vuiPatch--xs {
+  padding: 8px;
+}
+
+.vuiPatch--s {
+  padding: 12px;
+}
+
+.vuiPatch--m {
+  padding: 16px;
+}
+
 .vuiPopover {
   position: absolute;
   background-color: var(--vui-color-empty-shade);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "18.4.0",
+  "version": "19.1.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
@@ -31,8 +31,8 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "start": "PORT=2000 react-scripts start",
-    "buildDocs": "BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build",
+    "start": "REACT_APP_VUI_VERSION=$npm_package_version PORT=2000 react-scripts start",
+    "buildDocs": "REACT_APP_VUI_VERSION=$npm_package_version BUILD_PATH='./docs/public' PUBLIC_URL='.' react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "build": "npx tsc --project tsconfig.lib.json && npm run copyStyleUtils && npm run copyComponentStyles && npm run compileCss",
@@ -62,6 +62,7 @@
     "react-icons": "^4.10.1",
     "react-scripts": "^5.0.1",
     "react-tooltip": "^5.30.0",
+    "recharts": "^3.8.1",
     "sonner": "^2.0.6",
     "web-vitals": "^2.1.4"
   },

package/src/docs/Docs.tsx

@@ -10,6 +10,7 @@ import {
   VuiAppLayout,
   VuiButtonSecondary,
   VuiContextProvider,
+  VuiBadge,
   LinkProps
 } from "../lib";
 import { HeaderLogo } from "./components/HeaderLogo";
@@ -18,6 +19,9 @@ import { Home } from "./Home";
 import { Page } from "./Page";
 import "./index.scss";
 
+// Baked in at build time from package.json via the REACT_APP_VUI_VERSION env var.
+const VUI_VERSION = process.env.REACT_APP_VUI_VERSION;
+
 export const Docs = () => {
   return (
     <Router>
@@ -67,6 +71,12 @@ const DocsContent = () => {
               </VuiTitle>
             </VuiFlexItem>
 
+            {VUI_VERSION && (
+              <VuiFlexItem grow={false} shrink={false}>
+                <VuiBadge color="neutral">{`v${VUI_VERSION}`}</VuiBadge>
+              </VuiFlexItem>
+            )}
+
             <VuiFlexItem grow={false} shrink={false}>
               <VuiButtonSecondary size="s" color="neutral" href="/">
                 Home

package/src/docs/pages/barChart/Basic.tsx

@@ -0,0 +1,21 @@
+import { VuiBarChart } from "../../../lib";
+
+const data = [
+  { quarter: "Q1", queries: 4200, documents: 1800 },
+  { quarter: "Q2", queries: 5100, documents: 2400 },
+  { quarter: "Q3", queries: 6800, documents: 3100 },
+  { quarter: "Q4", queries: 7400, documents: 3600 }
+];
+
+export const Basic = () => {
+  return (
+    <VuiBarChart
+      data={data}
+      categoryKey="quarter"
+      series={[
+        { dataKey: "queries", name: "Queries" },
+        { dataKey: "documents", name: "Documents" }
+      ]}
+    />
+  );
+};

package/src/docs/pages/barChart/Horizontal.tsx

@@ -0,0 +1,20 @@
+import { VuiBarChart } from "../../../lib";
+
+const data = [
+  { source: "Documentation", count: 3200 },
+  { source: "Blog", count: 2100 },
+  { source: "Support tickets", count: 1450 },
+  { source: "Forums", count: 980 },
+  { source: "Release notes", count: 540 }
+];
+
+export const Horizontal = () => {
+  return (
+    <VuiBarChart
+      data={data}
+      categoryKey="source"
+      orientation="bars"
+      series={[{ dataKey: "count", name: "Indexed documents", color: "teal" }]}
+    />
+  );
+};

package/src/docs/pages/barChart/Stacked.tsx

@@ -0,0 +1,23 @@
+import { VuiBarChart } from "../../../lib";
+
+const data = [
+  { team: "Search", shipped: 12, inProgress: 5, planned: 8 },
+  { team: "Platform", shipped: 9, inProgress: 7, planned: 4 },
+  { team: "Growth", shipped: 6, inProgress: 3, planned: 9 },
+  { team: "Docs", shipped: 4, inProgress: 2, planned: 3 }
+];
+
+export const Stacked = () => {
+  return (
+    <VuiBarChart
+      data={data}
+      categoryKey="team"
+      stacked
+      series={[
+        { dataKey: "shipped", name: "Shipped" },
+        { dataKey: "inProgress", name: "In progress" },
+        { dataKey: "planned", name: "Planned" }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,29 @@
+import { Basic } from "./Basic";
+import { Stacked } from "./Stacked";
+import { Horizontal } from "./Horizontal";
+
+const BasicSource = require("!!raw-loader!./Basic");
+const StackedSource = require("!!raw-loader!./Stacked");
+const HorizontalSource = require("!!raw-loader!./Horizontal");
+
+export const barChart = {
+  name: "Bar chart",
+  path: "/bar-chart",
+  examples: [
+    {
+      name: "Basic",
+      component: <Basic />,
+      source: BasicSource.default.toString()
+    },
+    {
+      name: "Stacked",
+      component: <Stacked />,
+      source: StackedSource.default.toString()
+    },
+    {
+      name: "Horizontal",
+      component: <Horizontal />,
+      source: HorizontalSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages/card/SimpleCard.tsx

@@ -1,8 +1,11 @@
 import { useState } from "react";
 import {
+  VuiBadge,
   VuiFlexContainer,
   VuiGrid,
+  VuiHorizontalRule,
   VuiIcon,
+  VuiPatch,
   VuiSelect,
   VuiSimpleCard,
   VuiSpacer,
@@ -10,18 +13,16 @@ import {
   VuiTextColor,
   VuiTitle
 } from "../../../lib";
-import { BiPencil } from "react-icons/bi";
+import { BiData, BiPencil, BiRightArrowAlt } from "react-icons/bi";
 
 const paddingOptions = [
-  { text: "Extra extra small", value: "xxs" },
-  { text: "Extra small", value: "xs" },
   { text: "Small", value: "s" },
   { text: "Medium", value: "m" },
   { text: "Large", value: "l" }
 ];
 
 export const SimpleCard = () => {
-  const [padding, setPadding] = useState<"xxs" | "xs" | "s" | "m" | "l">("xs");
+  const [padding, setPadding] = useState<"s" | "m" | "l">("l");
 
   return (
     <>
@@ -29,7 +30,7 @@ export const SimpleCard = () => {
         id="paddingOptions"
         options={paddingOptions}
         value={padding}
-        onChange={(event) => setPadding(event.target.value as "xxs" | "xs" | "s" | "m" | "l")}
+        onChange={(event) => setPadding(event.target.value as "s" | "m" | "l")}
       />
 
       <VuiSpacer size="m" />
@@ -130,7 +131,11 @@ export const SimpleCard = () => {
           </VuiText>
         </VuiSimpleCard>
 
-        <VuiSimpleCard padding={padding} warning="Missing configuration" onClick={() => console.log("Raccoon says hi!")}>
+        <VuiSimpleCard
+          padding={padding}
+          warning="Missing configuration"
+          onClick={() => console.log("Raccoon says hi!")}
+        >
           <VuiTitle size="xs">
             <h3>Raccoon</h3>
           </VuiTitle>
@@ -144,6 +149,67 @@ export const SimpleCard = () => {
           </VuiText>
         </VuiSimpleCard>
       </VuiGrid>
+
+      <VuiSpacer size="m" />
+
+      <div style={{ maxWidth: "400px" }}>
+        <VuiSimpleCard padding={padding} onClick={() => console.log("Selected")}>
+          <VuiFlexContainer alignItems="start" justifyContent="spaceBetween">
+            <VuiPatch color="emerald" size="s">
+              <VuiIcon>
+                <BiData />
+              </VuiIcon>
+            </VuiPatch>
+
+            <VuiBadge color="primary">Sources</VuiBadge>
+          </VuiFlexContainer>
+
+          <VuiSpacer size="m" />
+
+          <VuiTitle size="s">
+            <h3>
+              <strong>Tyrannodata</strong>
+            </h3>
+          </VuiTitle>
+
+          <VuiSpacer size="xxs" />
+
+          <VuiText size="xs">
+            <p>
+              <VuiTextColor color="subdued">Terrible, horrible, no-good data</VuiTextColor>
+            </p>
+          </VuiText>
+
+          <VuiSpacer size="s" />
+
+          <VuiText size="s">
+            <p>
+              <VuiTextColor color="subdued">
+                This data has seen better days. Where once it soared, mighty and free, above the lesser data, these days
+                it spends its time scavenging for bytes.
+              </VuiTextColor>
+            </p>
+          </VuiText>
+
+          <VuiSpacer size="l" />
+
+          <VuiHorizontalRule color="subdued" />
+
+          <VuiSpacer size="l" />
+
+          <VuiFlexContainer alignItems="center" justifyContent="spaceBetween">
+            <VuiText size="s">
+              <p>
+                <VuiTextColor color="primary">Select</VuiTextColor>
+              </p>
+            </VuiText>
+
+            <VuiIcon color="primary" size="s">
+              <BiRightArrowAlt />
+            </VuiIcon>
+          </VuiFlexContainer>
+        </VuiSimpleCard>
+      </div>
     </>
   );
 };