@vectara/vectara-ui 18.3.0 → 19.0.0

package/lib/components/fileDropTarget/FileDropTarget.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { BiUpload } from "react-icons/bi";
+import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { VuiText } from "../typography/Text";
+const defaultMessage = (_jsxs(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", justifyContent: "center" }, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiIcon, Object.assign({ size: "xxxl", color: "empty" }, { children: _jsx(BiUpload, {}) })) }), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ align: "center", size: "l" }, { children: _jsx("p", { children: "Drop files to add to upload" }) })) })] })));
+export const VuiFileDropTarget = ({ onFilesDropped, scopeRef, message = defaultMessage }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const dragCounterRef = useRef(0);
+    useEffect(() => {
+        var _a;
+        const target = (_a = scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current) !== null && _a !== void 0 ? _a : document;
+        // Reset whenever the target changes (e.g. when scopeRef attaches or the parent
+        // swaps between scoped and global modes) so a stale counter doesn't suppress events.
+        dragCounterRef.current = 0;
+        setIsDragging(false);
+        const handleDragEnter = (e) => {
+            var _a;
+            e.preventDefault();
+            dragCounterRef.current += 1;
+            // Only show the overlay for drags that carry files, not e.g. selected text.
+            if (dragCounterRef.current === 1 && ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) && e.dataTransfer.items.length > 0) {
+                setIsDragging(true);
+            }
+        };
+        const handleDragLeave = (e) => {
+            e.preventDefault();
+            dragCounterRef.current -= 1;
+            if (dragCounterRef.current === 0) {
+                setIsDragging(false);
+            }
+        };
+        const handleDragOver = (e) => {
+            e.preventDefault();
+        };
+        const handleDrop = (e) => {
+            var _a;
+            e.preventDefault();
+            setIsDragging(false);
+            dragCounterRef.current = 0;
+            const files = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+            if (files && files.length > 0) {
+                onFilesDropped(Array.from(files));
+            }
+        };
+        target.addEventListener("dragenter", handleDragEnter);
+        target.addEventListener("dragleave", handleDragLeave);
+        target.addEventListener("dragover", handleDragOver);
+        target.addEventListener("drop", handleDrop);
+        return () => {
+            target.removeEventListener("dragenter", handleDragEnter);
+            target.removeEventListener("dragleave", handleDragLeave);
+            target.removeEventListener("dragover", handleDragOver);
+            target.removeEventListener("drop", handleDrop);
+        };
+    }, [scopeRef, onFilesDropped]);
+    if (!isDragging)
+        return null;
+    // Scoped mode: overlay covers only the parent element.
+    if (scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current) {
+        return createPortal(_jsx("div", Object.assign({ className: "vuiFileDropTarget__scopedOverlay" }, { children: _jsx("div", Object.assign({ className: "vuiFileDropTarget__message" }, { children: message })) })), scopeRef.current);
+    }
+    // Global mode: full-screen overlay.
+    return (_jsx(VuiScreenBlock, Object.assign({ color: "primary" }, { children: _jsx("div", Object.assign({ className: "vuiFileDropTarget__messageContainer" }, { children: _jsx("div", Object.assign({ className: "vuiFileDropTarget__message" }, { children: message })) })) })));
+};

package/lib/components/fileDropTarget/_index.scss

@@ -0,0 +1,34 @@
+.vuiFileDropTarget__messageContainer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vuiFileDropTarget__message {
+  padding: $sizeL;
+  max-width: 400px;
+  width: 100%;
+  pointer-events: none;
+
+  p,
+  span {
+    color: var(--vui-color-empty-shade) !important;
+  }
+}
+
+// Scoped mode: portal-mounted overlay covering only the parent element (which
+// must be non-statically positioned).
+.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;
+}

package/lib/components/index.d.ts

@@ -19,8 +19,10 @@ import { VuiCard, VuiSimpleCard } from "./card";
 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";
@@ -29,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";
@@ -62,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";
@@ -104,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, 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

@@ -16,7 +16,9 @@ import { VuiCallout } from "./callout/Callout";
 import { VuiCard, VuiSimpleCard } from "./card";
 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";
@@ -25,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";
@@ -55,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";
@@ -95,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, 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 {
@@ -1526,6 +1503,51 @@ fieldset {
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
+.vuiChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--vui-color-border-light);
+  background-color: var(--vui-color-light-shade);
+  padding: 4px 12px;
+  border-radius: 16px;
+  transition: all 0.2s;
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px;
+}
+.vuiChip:hover {
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+  border-color: var(--vui-color-medium-shade);
+}
+
+.vuiChip__label {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--vui-color-text);
+  line-height: 1.6;
+}
+
+.vuiChip__append {
+  color: var(--vui-color-subdued-shade);
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 12px;
+}
+
+.vuiChip-isActive {
+  border: 1px solid var(--vui-color-primary-shade);
+  background-color: var(--vui-color-empty-shade);
+}
+.vuiChip-isActive:hover {
+  border: 1px solid var(--vui-color-primary-shade);
+}
+.vuiChip-isActive .vuiChip__label,
+.vuiChip-isActive .vuiChip__append {
+  color: var(--vui-color-primary-shade);
+}
+.vuiChip-isActive .vuiChip__append {
+  background-color: var(--vui-color-primary-lighter-shade);
+}
+
 .vuiCodeContainer {
   position: relative;
   max-height: 480px;
@@ -1594,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);
@@ -2565,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;
@@ -4555,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.3.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>
     </>
   );
 };