@vectara/vectara-ui 18.4.0 → 19.0.0

package/lib/components/index.d.ts

@@ -22,6 +22,7 @@ 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 +31,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 +65,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 +108,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, 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, 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, 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

@@ -18,6 +18,7 @@ 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 +27,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 +58,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 +99,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, 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, 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,27 @@ 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--xs {
-  padding: 12px 16px;
-}
-
 .vuiSimpleCard--s {
-  padding: 16px 24px;
+  padding: 12px;
 }
 
 .vuiSimpleCard--m {
-  padding: 24px 32px;
+  padding: 16px;
 }
 
 .vuiSimpleCard--l {
-  padding: 32px 40px;
+  padding: 24px;
 }
 
 .vuiChatTurn {
@@ -1639,6 +1616,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 +2592,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 +4614,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.0.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

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>
     </>
   );
 };

package/src/docs/pages/colorPalette/CategoricalColors.tsx

@@ -0,0 +1,89 @@
+import { BiSolidBookmark } from "react-icons/bi";
+import { VuiCopyButton, VuiFlexContainer, VuiFlexItem, VuiSpacer, VuiText, VuiTextColor } from "../../../lib";
+
+// Categorical colors carry no fixed meaning — the hue just distinguishes one category from another.
+// Each is a pair: a tinted background and a saturated foreground for text and icons.
+const categoricalColors = [
+  // Warm
+  { name: "Red", background: "--vui-color-red-background", text: "--vui-color-red-text" },
+  { name: "Orange", background: "--vui-color-orange-background", text: "--vui-color-orange-text" },
+  { name: "Amber", background: "--vui-color-amber-background", text: "--vui-color-amber-text" },
+  // Greens
+  { name: "Lime", background: "--vui-color-lime-background", text: "--vui-color-lime-text" },
+  { name: "Emerald", background: "--vui-color-emerald-background", text: "--vui-color-emerald-text" },
+  { name: "Teal", background: "--vui-color-teal-background", text: "--vui-color-teal-text" },
+  // Blues
+  { name: "Sky", background: "--vui-color-sky-background", text: "--vui-color-sky-text" },
+  { name: "Indigo", background: "--vui-color-indigo-background", text: "--vui-color-indigo-text" },
+  // Purples and pinks
+  { name: "Purple", background: "--vui-color-purple-background", text: "--vui-color-purple-text" },
+  { name: "Fuchsia", background: "--vui-color-fuchsia-background", text: "--vui-color-fuchsia-text" },
+  { name: "Pink", background: "--vui-color-pink-background", text: "--vui-color-pink-text" },
+  // Neutral
+  { name: "Slate", background: "--vui-color-slate-background", text: "--vui-color-slate-text" }
+];
+
+// A single CSS variable row: the variable name plus a button to copy its var() reference.
+const VariableRow = ({ cssVariable }: { cssVariable: string }) => (
+  <VuiFlexContainer alignItems="center" spacing="xs" justifyContent="spaceBetween">
+    <VuiFlexItem grow={false}>
+      <VuiText size="xs">
+        <p>
+          <code>{cssVariable}</code>
+        </p>
+      </VuiText>
+    </VuiFlexItem>
+
+    <VuiFlexItem grow={false}>
+      <VuiCopyButton size="xs" value={`var(${cssVariable})`} title={`Copy var(${cssVariable})`} />
+    </VuiFlexItem>
+  </VuiFlexContainer>
+);
+
+export const CategoricalColors = () => {
+  return (
+    <>
+      <VuiText>
+        <p>
+          <VuiTextColor color="subdued">
+            Interchangeable hue pairs for color-coding categories. The icon inherits the foreground color via{" "}
+            <code>currentColor</code>, so a patch only needs the background and text variables.
+          </VuiTextColor>
+        </p>
+      </VuiText>
+
+      <VuiSpacer size="l" />
+
+      <VuiFlexContainer spacing="l" wrap>
+        {categoricalColors.map(({ name, background, text }) => (
+          <VuiFlexItem grow={false} key={name}>
+            <div style={{ width: 220 }}>
+              {/* A representative patch built from the pair. */}
+              <div
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "4px 10px",
+                  borderRadius: 6,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  backgroundColor: `var(${background})`,
+                  color: `var(${text})`
+                }}
+              >
+                <BiSolidBookmark />
+                {name}
+              </div>
+
+              <VuiSpacer size="s" />
+
+              <VariableRow cssVariable={background} />
+              <VariableRow cssVariable={text} />
+            </div>
+          </VuiFlexItem>
+        ))}
+      </VuiFlexContainer>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/NeutralColors.tsx

@@ -0,0 +1,42 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Neutral shades run from the empty shade (the app background) to the full shade.
+// In the dark theme these invert, so reach for the semantic name rather than the literal lightness.
+const neutralSwatches = [
+  { name: "Empty shade", cssVariable: "--vui-color-empty-shade", value: "#ffffff" },
+  { name: "Light shade", cssVariable: "--vui-color-light-shade", value: "#f1f4f6" },
+  { name: "Medium shade", cssVariable: "--vui-color-medium-shade", value: "#cbd1de" },
+  { name: "Dark shade", cssVariable: "--vui-color-dark-shade", value: "#3f4551" },
+  { name: "Darker shade", cssVariable: "--vui-color-darker-shade", value: "#1c1d22" },
+  { name: "Full shade", cssVariable: "--vui-color-full-shade", value: "#0b0c0e" }
+];
+
+// Special-purpose accents that sit outside the semantic families.
+const specialSwatches = [
+  { name: "Primary highlight", cssVariable: "--vui-color-primary-highlight-shade", value: "#d9e2ff" },
+  { name: "Subdued", cssVariable: "--vui-color-subdued-shade", value: "#6d7686" }
+];
+
+export const NeutralColors = () => {
+  return (
+    <>
+      <Subsection title="Neutrals">
+        <VuiFlexContainer spacing="l" wrap>
+          {neutralSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+
+      <Subsection title="Special">
+        <VuiFlexContainer spacing="l" wrap>
+          {specialSwatches.map((swatch) => (
+            <Swatch key={swatch.cssVariable} {...swatch} />
+          ))}
+        </VuiFlexContainer>
+      </Subsection>
+    </>
+  );
+};

package/src/docs/pages/colorPalette/SemanticColors.tsx

@@ -0,0 +1,64 @@
+import { VuiFlexContainer } from "../../../lib";
+import { Subsection } from "../../components/Subsection";
+import { Swatch } from "./Swatch";
+
+// Each semantic family has three shades: a base "shade", a 50%-opacity "light shade",
+// and a tinted "lighter shade" suitable for backgrounds.
+const families = [
+  {
+    name: "Accent",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-accent-shade", value: "#5f30c3" },
+      { name: "Light shade", cssVariable: "--vui-color-accent-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-accent-lighter-shade", value: "#eee7ff" }
+    ]
+  },
+  {
+    name: "Primary",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-primary-shade", value: "#045dda" },
+      { name: "Light shade", cssVariable: "--vui-color-primary-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-primary-lighter-shade", value: "#f1f7ff" }
+    ]
+  },
+  {
+    name: "Success",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-success-shade", value: "#249719" },
+      { name: "Light shade", cssVariable: "--vui-color-success-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-success-lighter-shade", value: "#e2f2e0" }
+    ]
+  },
+  {
+    name: "Warning",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-warning-shade", value: "#a86f1b" },
+      { name: "Light shade", cssVariable: "--vui-color-warning-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-warning-lighter-shade", value: "#ffeed4" }
+    ]
+  },
+  {
+    name: "Danger",
+    swatches: [
+      { name: "Shade", cssVariable: "--vui-color-danger-shade", value: "#d22d2d" },
+      { name: "Light shade", cssVariable: "--vui-color-danger-light-shade", value: "50% opacity" },
+      { name: "Lighter shade", cssVariable: "--vui-color-danger-lighter-shade", value: "#fff1f1" }
+    ]
+  }
+];
+
+export const SemanticColors = () => {
+  return (
+    <>
+      {families.map((family) => (
+        <Subsection key={family.name} title={family.name}>
+          <VuiFlexContainer spacing="l" wrap>
+            {family.swatches.map((swatch) => (
+              <Swatch key={swatch.cssVariable} {...swatch} />
+            ))}
+          </VuiFlexContainer>
+        </Subsection>
+      ))}
+    </>
+  );
+};