@vectara/vectara-ui 15.0.2 → 15.1.0

package/lib/components/button/iconButton.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .vuiIconButton {
   display: inline-block;
   border-radius: $sizeXxs;
@@ -7,26 +9,47 @@
 
 // Color
 $color: (
-  accent: var(--vui-color-accent-shade-rgb),
-  primary: var(--vui-color-primary-shade-rgb),
-  success: var(--vui-color-success-shade-rgb),
-  warning: var(--vui-color-warning-shade-rgb),
-  danger: var(--vui-color-danger-shade-rgb),
-  neutral: var(--vui-color-darker-shade-rgb),
-  subdued: var(--vui-color-subdued-shade-rgb)
+  accent: (
+    "color": var(--vui-color-accent-shade-rgb),
+    "background-color": var(--vui-color-accent-shade-rgb)
+  ),
+  primary: (
+    "color": var(--vui-color-primary-shade-rgb),
+    "background-color": var(--vui-color-primary-shade-rgb)
+  ),
+  success: (
+    "color": var(--vui-color-success-shade-rgb),
+    "background-color": var(--vui-color-success-shade-rgb)
+  ),
+  danger: (
+    "color": var(--vui-color-danger-shade-rgb),
+    "background-color": var(--vui-color-danger-shade-rgb)
+  ),
+  warning: (
+    "color": var(--vui-color-warning-shade-rgb),
+    "background-color": var(--vui-color-warning-shade-rgb)
+  ),
+  neutral: (
+    "color": var(--vui-color-darker-shade-rgb),
+    "background-color": var(--vui-color-subdued-shade-rgb)
+  ),
+  subdued: (
+    "color": var(--vui-color-subdued-shade-rgb),
+    "background-color": var(--vui-color-subdued-shade-rgb)
+  )
 );
 
 @each $colorName, $colorValue in $color {
   .vuiIconButton--#{$colorName} {
-    color: rgb($colorValue);
-    background-color: rgba($colorValue, 0);
+    color: rgb(#{map.get($colorValue, "color")});
+    background-color: rgba(#{map.get($colorValue, "background-color")}, 0);
 
     &:hover {
-      background-color: rgba($colorValue, 0.1);
+      background-color: rgba(#{map.get($colorValue, "background-color")}, 0.1);
     }
 
     &-isSelected {
-      background-color: rgba($colorValue, 0.1);
+      background-color: rgba(#{map.get($colorValue, "background-color")}, 0.1);
     }
   }
 }

package/lib/components/form/_index.scss

@@ -5,5 +5,6 @@
 @import "label/index";
 @import "radioButton/index";
 @import "select/index";
+@import "superCheckboxGroup/index";
 @import "superRadioGroup/index";
 @import "textArea/index";

package/lib/components/form/index.d.ts

@@ -6,10 +6,12 @@ export { VuiLabel } from "./label/Label";
 export { VuiNumberInput } from "./input/NumberInput";
 export { VuiRadioButton } from "./radioButton/RadioButton";
 export { VuiSelect } from "./select/Select";
+export { VuiSuperCheckboxGroup } from "./superCheckboxGroup/SuperCheckboxGroup";
 export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
 export { VuiTextInput } from "./input/TextInput";
 export { VuiTextArea } from "./textArea/TextArea";
 export { VuiPasswordInput } from "./input/PasswordInput";
 export type { CodeEditorError, CodeEditorColorConfig } from "./codeEditor/CodeEditor";
 export type { Props as TextInputProps } from "./input/TextInput";
+export type { CheckboxConfig } from "./superCheckboxGroup/types";
 export type { RadioButtonConfig } from "./superRadioGroup/types";

package/lib/components/form/index.js

@@ -6,6 +6,7 @@ export { VuiLabel } from "./label/Label";
 export { VuiNumberInput } from "./input/NumberInput";
 export { VuiRadioButton } from "./radioButton/RadioButton";
 export { VuiSelect } from "./select/Select";
+export { VuiSuperCheckboxGroup } from "./superCheckboxGroup/SuperCheckboxGroup";
 export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
 export { VuiTextInput } from "./input/TextInput";
 export { VuiTextArea } from "./textArea/TextArea";

package/lib/components/form/superCheckboxGroup/SuperCheckbox.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxConfig } from "./types";
+type Props<T> = CheckboxConfig<T> & {
+    onChange: (value: string) => void;
+};
+export declare const VuiSuperCheckbox: <T extends string>({ label, description, value, checked, onChange, ...rest }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/superCheckboxGroup/SuperCheckbox.js

@@ -0,0 +1,22 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createId } from "../../../utils/createId";
+import { VuiFlexContainer } from "../../flex/FlexContainer";
+import { VuiFlexItem } from "../../flex/FlexItem";
+import { VuiSpacer } from "../../spacer/Spacer";
+import { VuiText } from "../../typography/Text";
+export const VuiSuperCheckbox = (_a) => {
+    var { label, description, value, checked, onChange } = _a, rest = __rest(_a, ["label", "description", "value", "checked", "onChange"]);
+    const id = createId();
+    return (_jsx("label", Object.assign({ className: "vuiSuperCheckbox", htmlFor: id }, { children: _jsxs(VuiFlexContainer, Object.assign({ spacing: "l", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: 0 }, { children: _jsx("input", Object.assign({ id: id, type: "checkbox", checked: checked, onChange: () => onChange(value) }, rest)) })), _jsxs(VuiFlexItem, Object.assign({ grow: false, shrink: 1 }, { children: [_jsx(VuiText, { children: _jsx("p", Object.assign({ className: "vuiSuperCheckbox__text" }, { children: label })) }), description && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsx("p", Object.assign({ className: "vuiSuperCheckbox__text vuiSuperCheckbox__description" }, { children: description })) }))] }))] }))] })) })));
+};

package/lib/components/form/superCheckboxGroup/SuperCheckboxGroup.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxConfig } from "./types";
+type Props<T> = {
+    group: CheckboxConfig<T>[];
+    onChange: (value: string) => void;
+};
+export declare const VuiSuperCheckboxGroup: <T extends string>({ group, onChange }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/superCheckboxGroup/SuperCheckboxGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VuiSuperCheckbox } from "./SuperCheckbox";
+export const VuiSuperCheckboxGroup = ({ group, onChange }) => {
+    return (_jsx("div", Object.assign({ className: "vuiSuperCheckboxGroup" }, { children: group.map((item) => (_jsx(VuiSuperCheckbox, Object.assign({}, item, { onChange: onChange }), item.value))) })));
+};

package/lib/components/form/superCheckboxGroup/_index.scss

@@ -0,0 +1,29 @@
+.vuiSuperCheckboxGroup {
+  display: grid;
+}
+
+.vuiSuperCheckbox {
+  display: block;
+  width: 100%;
+  border-radius: $sizeXs;
+  padding: $sizeS $sizeL;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all $transitionSpeed;
+  text-decoration-color: var(--vui-color-text);
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--vui-color-primary-shade);
+    background-color: var(--vui-color-primary-lighter-shade);
+
+    .vuiSuperCheckbox__text {
+      color: var(--vui-color-primary-shade) !important;
+    }
+  }
+}
+
+.vuiSuperCheckbox__description {
+  color: var(--vui-color-subdued-shade);
+}

package/lib/components/form/superCheckboxGroup/types.d.ts

@@ -0,0 +1,8 @@
+export type CheckboxConfig<T> = {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: T;
+    checked: boolean;
+    disabled?: boolean;
+    "data-testid"?: string;
+};

package/lib/components/form/superCheckboxGroup/types.js

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

package/lib/components/index.d.ts

@@ -29,7 +29,7 @@ import { VuiDrawer } from "./drawer/Drawer";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
-import { CodeEditorColorConfig, CodeEditorError, RadioButtonConfig, generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { CheckboxConfig, CodeEditorColorConfig, CodeEditorError, RadioButtonConfig, generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid, VuiGridItem, VuiSimpleGrid } from "./grid";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
@@ -91,5 +91,5 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 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, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, Stat, StepStatus, StepSize, TabSize, Tree, TreeItem, VuiStepProps };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -25,7 +25,7 @@ import { VuiDrawer } from "./drawer/Drawer";
 import { VuiErrorBoundary } from "./errorBoundary/ErrorBoundary";
 import { VuiFlexContainer } from "./flex/FlexContainer";
 import { VuiFlexItem } from "./flex/FlexItem";
-import { generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
+import { generateTokensProvider, VuiCheckbox, VuiCodeEditor, VuiItemsInput, VuiLabel, VuiNumberInput, VuiRadioButton, VuiSelect, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTextInput, VuiTextArea, VuiPasswordInput } from "./form";
 import { VuiFormGroup } from "./formGroup/FormGroup";
 import { VuiGrid, VuiGridItem, VuiSimpleGrid } from "./grid";
 import { VuiHorizontalRule } from "./horizontalRule/HorizontalRule";
@@ -84,4 +84,4 @@ import { VuiTooltip } from "./tooltip/Tooltip";
 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, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, 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, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/searchInput/SearchInput.d.ts

@@ -11,6 +11,7 @@ type Props = {
     autoFocus?: boolean;
     onSubmit?: FormEventHandler;
     suggestions?: SearchSuggestion[];
+    onSelectSuggestion?: (suggestion: SearchSuggestion) => void;
     isLoading?: boolean;
 };
 type ClearableProps = {
@@ -20,5 +21,5 @@ type ClearableProps = {
     isClearable?: false;
     onClear?: never;
 };
-export declare const VuiSearchInput: ({ className, size, value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSearchInput: ({ className, size, value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, onSelectSuggestion, isLoading, ...rest }: Props & ClearableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/searchInput/SearchInput.js

@@ -20,13 +20,34 @@ import { createId } from "../../utils/createId";
 import { VuiSpinner } from "../spinner/Spinner";
 const SIZE = ["m", "l"];
 export const VuiSearchInput = (_a) => {
-    var { className, size = "m", value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "onKeyDown", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "isLoading"]);
+    var { className, size = "m", value, onChange, onKeyDown, placeholder, autoFocus, onSubmit, isClearable, onClear, suggestions, onSelectSuggestion, isLoading } = _a, rest = __rest(_a, ["className", "size", "value", "onChange", "onKeyDown", "placeholder", "autoFocus", "onSubmit", "isClearable", "onClear", "suggestions", "onSelectSuggestion", "isLoading"]);
     const classes = classNames("vuiSearchInput", `vuiSearchInput--${size}`, className);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const [areSuggestionsVisible, setAreSuggestionsVisible] = useState(true);
     const suggestionRefs = useRef([]);
     const suppressNextFocus = useRef(false);
+    // Reset suggestions visibility when suggestions change.
+    const prevSuggestionsRef = useRef(suggestions);
+    if (prevSuggestionsRef.current !== suggestions) {
+        prevSuggestionsRef.current = suggestions;
+        if (suggestions && suggestions.length > 0) {
+            setAreSuggestionsVisible(true);
+        }
+    }
+    const hasSuggestions = suggestions && suggestions.length > 0 && areSuggestionsVisible;
+    const controlsId = useMemo(() => `searchSuggestions-${createId()}`, []);
+    // Derive ghost text from the first suggestion if it extends the current value.
+    const ghostText = useMemo(() => {
+        var _a;
+        if (!hasSuggestions || !value || !((_a = suggestions[0]) === null || _a === void 0 ? void 0 : _a.value))
+            return "";
+        const firstValue = suggestions[0].value;
+        if (firstValue.startsWith(value) && firstValue !== value) {
+            return firstValue.slice(value.length);
+        }
+        return "";
+    }, [hasSuggestions, value, suggestions]);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -50,7 +71,7 @@ export const VuiSearchInput = (_a) => {
         }
     };
     const handleInputKeyDown = (e) => {
-        var _a, _b;
+        var _a, _b, _c;
         switch (e.key) {
             case "ArrowDown": {
                 e.preventDefault();
@@ -73,8 +94,14 @@ export const VuiSearchInput = (_a) => {
                 break;
             }
             case "Tab": {
-                // Hide suggestions and allow default tab behavior.
-                setAreSuggestionsVisible(false);
+                // If there's a matching value suggestion, select it instead of default tab.
+                if (hasSuggestions && ghostText && onSelectSuggestion && ((_c = suggestions[0]) === null || _c === void 0 ? void 0 : _c.value)) {
+                    e.preventDefault();
+                    onSelectSuggestion(suggestions[0]);
+                }
+                else {
+                    setAreSuggestionsVisible(false);
+                }
                 break;
             }
             case "Enter": {
@@ -86,7 +113,7 @@ export const VuiSearchInput = (_a) => {
         }
     };
     const handleSuggestionKeyDown = (e, index) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         switch (e.key) {
             case "ArrowDown": {
                 e.preventDefault();
@@ -119,6 +146,16 @@ export const VuiSearchInput = (_a) => {
                 (_e = inputRef.current) === null || _e === void 0 ? void 0 : _e.focus();
                 break;
             }
+            case "Enter": {
+                // For value suggestions, trigger selection, hide suggestions, and refocus input.
+                if (suggestions && ((_f = suggestions[index]) === null || _f === void 0 ? void 0 : _f.value) && onSelectSuggestion) {
+                    e.preventDefault();
+                    onSelectSuggestion(suggestions[index]);
+                    setAreSuggestionsVisible(false);
+                    (_g = inputRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+                }
+                break;
+            }
             case "Tab": {
                 // Hide suggestions and allow default tab behavior.
                 setAreSuggestionsVisible(false);
@@ -126,24 +163,14 @@ export const VuiSearchInput = (_a) => {
             }
         }
     };
-    // Reset suggestions visibility when suggestions change
-    const prevSuggestionsRef = useRef(suggestions);
-    if (prevSuggestionsRef.current !== suggestions) {
-        prevSuggestionsRef.current = suggestions;
-        if (suggestions && suggestions.length > 0) {
-            setAreSuggestionsVisible(true);
-        }
-    }
-    const hasSuggestions = suggestions && suggestions.length > 0 && areSuggestionsVisible;
-    const controlsId = useMemo(() => `searchSuggestions-${createId()}`, []);
     const inputClasses = classNames("vuiSearchInput__input", {
         "vuiSearchInput__input--hasSuggestions": hasSuggestions
     });
     return (_jsx("form", Object.assign({ onSubmit: onSubmit, role: "search" }, { children: _jsxs("div", Object.assign({ ref: containerRef, className: classes, "aria-live": "polite", "aria-atomic": "true", "aria-busy": isLoading ? "true" : "false" }, { children: [_jsx("input", Object.assign({ ref: inputRef, className: inputClasses, type: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: "false", autoFocus: autoFocus, placeholder: placeholder, value: value, onChange: onChange, onFocus: handleInputFocus, onKeyDown: (e) => {
                         handleInputKeyDown(e);
                         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-                    }, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: size === "m" ? "s" : "m" }, { children: _jsx(BiSearch, {}) }))) })), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
+                    }, "aria-autocomplete": "list", "aria-controls": hasSuggestions ? controlsId : undefined }, rest)), ghostText && (_jsxs("div", Object.assign({ className: "vuiSearchInput__ghostText", "aria-hidden": "true" }, { children: [_jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--hidden" }, { children: value })), _jsx("span", Object.assign({ className: "vuiSearchInput__ghostText--visible" }, { children: ghostText }))] }))), _jsx("div", Object.assign({ className: "vuiSearchInput__icon" }, { children: isLoading ? (_jsx(VuiSpinner, { size: size === "m" ? "s" : "m" })) : (_jsx(VuiIcon, Object.assign({ color: "subdued", size: size === "m" ? "s" : "m" }, { children: _jsx(BiSearch, {}) }))) })), isClearable && value && (_jsx(VuiIconButton, { "aria-label": "Clear input", className: "vuiSearchInput__clearButton", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: (e) => {
                         e.preventDefault();
                         onClear();
-                    } })), hasSuggestions && (_jsx(VuiSearchInputSuggestions, { id: controlsId, suggestions: suggestions, onSuggestionKeyDown: handleSuggestionKeyDown, suggestionRefs: suggestionRefs }))] })) })));
+                    } })), hasSuggestions && (_jsx(VuiSearchInputSuggestions, { id: controlsId, suggestions: suggestions, onSuggestionKeyDown: handleSuggestionKeyDown, suggestionRefs: suggestionRefs, onSelectSuggestion: onSelectSuggestion }))] })) })));
 };

package/lib/components/searchInput/SearchInputSuggestions.d.ts

@@ -3,8 +3,9 @@ import { SearchSuggestion } from "./types";
 type Props = {
     id: string;
     suggestions: SearchSuggestion[];
-    onSuggestionKeyDown: (e: KeyboardEvent<HTMLAnchorElement>, index: number) => void;
-    suggestionRefs: MutableRefObject<(HTMLAnchorElement | null)[]>;
+    onSuggestionKeyDown: (e: KeyboardEvent<HTMLElement>, index: number) => void;
+    suggestionRefs: MutableRefObject<(HTMLElement | null)[]>;
+    onSelectSuggestion?: (suggestion: SearchSuggestion) => void;
 };
-export declare const VuiSearchInputSuggestions: ({ id, suggestions, onSuggestionKeyDown, suggestionRefs }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiSearchInputSuggestions: ({ id, suggestions, onSuggestionKeyDown, suggestionRefs, onSelectSuggestion }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/searchInput/SearchInputSuggestions.js

@@ -1,4 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const VuiSearchInputSuggestions = ({ id, suggestions, onSuggestionKeyDown, suggestionRefs }) => {
-    return (_jsxs("div", Object.assign({ className: "vuiSearchInputSuggestionsContainer" }, { children: [_jsx("div", Object.assign({ className: "vuiSearchInputSuggestions" }, { children: _jsx("div", Object.assign({ id: id, className: "vuiSearchInputSuggestions__suggestionsList", role: "listbox" }, { children: suggestions.map((suggestion, index) => (_jsx("a", Object.assign({ href: suggestion.href, className: "vuiSearchInputSuggestions__suggestion", ref: (el) => (suggestionRefs.current[index] = el), onKeyDown: (e) => onSuggestionKeyDown(e, index), role: "option", "aria-selected": "false" }, { children: suggestion.label }), index))) })) })), _jsx("div", { className: "vuiSearchInputSuggestions__bottomSpacer" })] })));
+export const VuiSearchInputSuggestions = ({ id, suggestions, onSuggestionKeyDown, suggestionRefs, onSelectSuggestion }) => {
+    return (_jsxs("div", Object.assign({ className: "vuiSearchInputSuggestionsContainer" }, { children: [_jsx("div", Object.assign({ className: "vuiSearchInputSuggestions" }, { children: _jsx("div", Object.assign({ id: id, className: "vuiSearchInputSuggestions__suggestionsList", role: "listbox" }, { children: suggestions.map((suggestion, index) => {
+                        const sharedProps = {
+                            key: index,
+                            className: "vuiSearchInputSuggestions__suggestion",
+                            ref: (el) => (suggestionRefs.current[index] = el),
+                            onKeyDown: (e) => onSuggestionKeyDown(e, index),
+                            role: "option",
+                            "aria-selected": "false"
+                        };
+                        if (suggestion.href) {
+                            return (_jsx("a", Object.assign({ href: suggestion.href }, sharedProps, { children: suggestion.label })));
+                        }
+                        return (_jsx("button", Object.assign({ type: "button" }, sharedProps, { onClick: () => onSelectSuggestion === null || onSelectSuggestion === void 0 ? void 0 : onSelectSuggestion(suggestion) }, { children: suggestion.label })));
+                    }) })) })), _jsx("div", { className: "vuiSearchInputSuggestions__bottomSpacer" })] })));
 };

package/lib/components/searchInput/_index.scss

@@ -67,8 +67,40 @@
   }
 }
 
+.vuiSearchInput__ghostText {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: pre;
+}
+
+.vuiSearchInput__ghostText--hidden {
+  visibility: hidden;
+}
+
+.vuiSearchInput__ghostText--visible {
+  color: var(--vui-color-subdued-shade);
+}
+
+.vuiSearchInput--m .vuiSearchInput__ghostText {
+  padding: $sizeXs $sizeM $sizeXs $sizeXl + $sizeXs;
+  font-size: $fontSizeStandard;
+}
+
+.vuiSearchInput--l .vuiSearchInput__ghostText {
+  padding: $sizeS $sizeM $sizeS $sizeXl + $sizeS;
+  font-size: $fontSizeLarge;
+}
+
 .vuiSearchInput__clearButton {
   position: absolute;
+  height: 100%;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
@@ -115,6 +147,8 @@
   padding: ($sizeXxs + 1px) $sizeS;
   font-size: $fontSizeStandard;
   color: var(--vui-color-text);
+  width: 100%;
+  text-align: left;
 
   &:focus-visible,
   &:hover {

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

@@ -1,4 +1,5 @@
 export type SearchSuggestion = {
     label: string;
-    href: string;
+    href?: string;
+    value?: string;
 };

package/lib/styles/index.css

@@ -1006,17 +1006,6 @@ fieldset {
   background-color: rgba(var(--vui-color-success-shade-rgb), 0.1);
 }
 
-.vuiIconButton--warning {
-  color: rgb(var(--vui-color-warning-shade-rgb));
-  background-color: rgba(var(--vui-color-warning-shade-rgb), 0);
-}
-.vuiIconButton--warning:hover {
-  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
-}
-.vuiIconButton--warning-isSelected {
-  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
-}
-
 .vuiIconButton--danger {
   color: rgb(var(--vui-color-danger-shade-rgb));
   background-color: rgba(var(--vui-color-danger-shade-rgb), 0);
@@ -1028,15 +1017,26 @@ fieldset {
   background-color: rgba(var(--vui-color-danger-shade-rgb), 0.1);
 }
 
+.vuiIconButton--warning {
+  color: rgb(var(--vui-color-warning-shade-rgb));
+  background-color: rgba(var(--vui-color-warning-shade-rgb), 0);
+}
+.vuiIconButton--warning:hover {
+  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
+}
+.vuiIconButton--warning-isSelected {
+  background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
+}
+
 .vuiIconButton--neutral {
   color: rgb(var(--vui-color-darker-shade-rgb));
-  background-color: rgba(var(--vui-color-darker-shade-rgb), 0);
+  background-color: rgba(var(--vui-color-subdued-shade-rgb), 0);
 }
 .vuiIconButton--neutral:hover {
-  background-color: rgba(var(--vui-color-darker-shade-rgb), 0.1);
+  background-color: rgba(var(--vui-color-subdued-shade-rgb), 0.1);
 }
 .vuiIconButton--neutral-isSelected {
-  background-color: rgba(var(--vui-color-darker-shade-rgb), 0.1);
+  background-color: rgba(var(--vui-color-subdued-shade-rgb), 0.1);
 }
 
 .vuiIconButton--subdued {
@@ -2870,6 +2870,34 @@ h2.react-datepicker__current-month {
   max-width: 100%;
 }
 
+.vuiSuperCheckboxGroup {
+  display: grid;
+}
+
+.vuiSuperCheckbox {
+  display: block;
+  width: 100%;
+  border-radius: 8px;
+  padding: 12px 24px;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s;
+  text-decoration-color: var(--vui-color-text);
+  text-align: left;
+}
+.vuiSuperCheckbox:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--vui-color-primary-shade);
+  background-color: var(--vui-color-primary-lighter-shade);
+}
+.vuiSuperCheckbox:hover .vuiSuperCheckbox__text {
+  color: var(--vui-color-primary-shade) !important;
+}
+
+.vuiSuperCheckbox__description {
+  color: var(--vui-color-subdued-shade);
+}
+
 .vuiSuperRadioGroup {
   display: grid;
 }
@@ -4540,8 +4568,40 @@ h2.react-datepicker__current-month {
   font-size: 18px;
 }
 
+.vuiSearchInput__ghostText {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: pre;
+}
+
+.vuiSearchInput__ghostText--hidden {
+  visibility: hidden;
+}
+
+.vuiSearchInput__ghostText--visible {
+  color: var(--vui-color-subdued-shade);
+}
+
+.vuiSearchInput--m .vuiSearchInput__ghostText {
+  padding: 8px 16px 8px 40px;
+  font-size: 14px;
+}
+
+.vuiSearchInput--l .vuiSearchInput__ghostText {
+  padding: 12px 16px 12px 44px;
+  font-size: 18px;
+}
+
 .vuiSearchInput__clearButton {
   position: absolute;
+  height: 100%;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
@@ -4584,6 +4644,8 @@ h2.react-datepicker__current-month {
   padding: 5px 12px;
   font-size: 14px;
   color: var(--vui-color-text);
+  width: 100%;
+  text-align: left;
 }
 .vuiSearchInputSuggestions__suggestion:focus-visible, .vuiSearchInputSuggestions__suggestion:hover {
   text-decoration: underline;

package/package.json

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