@vectara/vectara-ui 13.2.4 → 13.3.1

package/lib/components/badge/Badge.d.ts

@@ -10,6 +10,7 @@ type Props = {
     href?: LinkProps["href"];
     target?: LinkProps["target"];
     track?: LinkProps["track"];
+    isSelected?: boolean;
 };
-export declare const VuiBadge: ({ children, className, color, onClick, onClose, href, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiBadge: ({ children, className, color, onClick, onClose, href, target, track, isSelected, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/badge/Badge.js

@@ -11,24 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import { BiX } from "react-icons/bi";
+import { BiCheck, BiX } from "react-icons/bi";
 import { getTrackingProps } from "../../utils/getTrackingProps";
 import { useVuiContext } from "../context/Context";
 import { VuiIconButton } from "../button/IconButton";
 import { VuiIcon } from "../icon/Icon";
 import { VuiFlexContainer } from "../flex/FlexContainer";
 import { VuiFlexItem } from "../flex/FlexItem";
+import { createId } from "../../utils/createId";
 export const BADGE_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral"];
 export const VuiBadge = (_a) => {
-    var { children, className, color, onClick, onClose, href, target, track } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "onClose", "href", "target", "track"]);
+    var { children, className, color, onClick, onClose, href, target, track, isSelected } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "onClose", "href", "target", "track", "isSelected"]);
     const { createLink } = useVuiContext();
+    const id = onClose ? createId() : undefined;
     const classes = classNames(className, "vuiBadge", `vuiBadge--${color}`, {
         "vuiBadge--clickable": onClick !== null && onClick !== void 0 ? onClick : href
     });
-    const content = onClose ? (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, { children: children }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove", size: "xs", color: "subdued", className: "vuiBadge__closeButton", onClick: (e) => {
+    const content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xxs" }, { children: [isSelected && (_jsx(VuiFlexItem, { children: _jsx(VuiIcon, Object.assign({ size: "xs", color: "inherit", className: "vuiBadge__icon" }, { children: _jsx(BiCheck, {}) })) })), _jsx(VuiFlexItem, Object.assign({ id: id }, { children: children })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Remove", "aria-describedby": id, size: "xs", color: "subdued", className: "vuiBadge__icon", onClick: (e) => {
                         e.stopPropagation();
                         onClose === null || onClose === void 0 ? void 0 : onClose();
-                    }, icon: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiX, {}) })) }) })] }))) : (children);
+                    }, icon: _jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiX, {}) })) }) }))] })));
     if (onClick) {
         return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button" }, rest, { children: content })));
     }

package/lib/components/badge/_index.scss

@@ -3,7 +3,7 @@
 .vuiBadge {
   display: inline-block;
   font-size: $fontSizeSmall;
-  line-height: 1;
+  line-height: 1.25;
   padding: $sizeXxs $sizeXs;
   border-radius: $sizeS;
   font-family: inherit;
@@ -15,7 +15,7 @@
   cursor: pointer;
 }
 
-.vuiBadge__closeButton {
+.vuiBadge__icon {
   padding: 0px !important;
   height: min-content !important;
 }
@@ -58,7 +58,7 @@ $color: (
   .vuiBadge--#{$colorName} {
     color: #{map.get($colorValue, "color")} !important;
     background-color: #{map.get($colorValue, "background-color")};
-    border: 1px solid #{map.get($colorValue, "border-color")};
+    border: 1px solid transparent;
     transition: all $transitionSpeed;
 
     &.vuiBadge--clickable:hover {

package/lib/components/flex/FlexItem.d.ts

@@ -17,6 +17,7 @@ type Props = {
     alignItems?: keyof typeof alignItemsToClassNameMap;
     className?: string;
     truncate?: boolean;
+    id?: string;
 };
 export declare const VuiFlexItem: ({ children, grow, shrink, basis, alignItems, className, truncate, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,3 @@
 export declare const ICON_COLOR: readonly ["inherit", "accent", "primary", "success", "warning", "danger", "subdued", "neutral", "empty"];
-export declare const ICON_SIZE: readonly ["s", "m", "l", "xl", "xxl", "xxxl"];
+export declare const ICON_SIZE: readonly ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
 export declare const ICON_TYPE: readonly ["default", "enclosed", "token"];

package/lib/components/icon/types.js

@@ -9,5 +9,5 @@ export const ICON_COLOR = [
     "neutral",
     "empty"
 ];
-export const ICON_SIZE = ["s", "m", "l", "xl", "xxl", "xxxl"];
+export const ICON_SIZE = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
 export const ICON_TYPE = ["default", "enclosed", "token"];

package/lib/styles/index.css

@@ -553,7 +553,7 @@ fieldset {
 .vuiBadge {
   display: inline-block;
   font-size: 12px;
-  line-height: 1;
+  line-height: 1.25;
   padding: 4px 8px;
   border-radius: 12px;
   font-family: inherit;
@@ -565,7 +565,7 @@ fieldset {
   cursor: pointer;
 }
 
-.vuiBadge__closeButton {
+.vuiBadge__icon {
   padding: 0px !important;
   height: min-content !important;
 }
@@ -573,7 +573,7 @@ fieldset {
 .vuiBadge--accent {
   color: var(--vui-color-accent-shade) !important;
   background-color: rgba(var(--vui-color-accent-shade-rgb), 0.1);
-  border: 1px solid rgba(var(--vui-color-accent-shade-rgb), 0.1);
+  border: 1px solid transparent;
   transition: all 0.2s;
 }
 .vuiBadge--accent.vuiBadge--clickable:hover {
@@ -584,7 +584,7 @@ fieldset {
 .vuiBadge--primary {
   color: var(--vui-color-primary-shade) !important;
   background-color: rgba(var(--vui-color-primary-shade-rgb), 0.1);
-  border: 1px solid rgba(var(--vui-color-primary-shade-rgb), 0.1);
+  border: 1px solid transparent;
   transition: all 0.2s;
 }
 .vuiBadge--primary.vuiBadge--clickable:hover {
@@ -595,7 +595,7 @@ fieldset {
 .vuiBadge--success {
   color: var(--vui-color-success-shade) !important;
   background-color: rgba(var(--vui-color-success-shade-rgb), 0.1);
-  border: 1px solid rgba(var(--vui-color-success-shade-rgb), 0.1);
+  border: 1px solid transparent;
   transition: all 0.2s;
 }
 .vuiBadge--success.vuiBadge--clickable:hover {
@@ -606,7 +606,7 @@ fieldset {
 .vuiBadge--warning {
   color: var(--vui-color-warning-shade) !important;
   background-color: rgba(var(--vui-color-warning-shade-rgb), 0.1);
-  border: 1px solid rgba(var(--vui-color-warning-shade-rgb), 0.1);
+  border: 1px solid transparent;
   transition: all 0.2s;
 }
 .vuiBadge--warning.vuiBadge--clickable:hover {
@@ -617,7 +617,7 @@ fieldset {
 .vuiBadge--danger {
   color: var(--vui-color-danger-shade) !important;
   background-color: rgba(var(--vui-color-danger-shade-rgb), 0.1);
-  border: 1px solid rgba(var(--vui-color-danger-shade-rgb), 0.1);
+  border: 1px solid transparent;
   transition: all 0.2s;
 }
 .vuiBadge--danger.vuiBadge--clickable:hover {
@@ -628,7 +628,7 @@ fieldset {
 .vuiBadge--neutral {
   color: var(--vui-color-text) !important;
   background-color: var(--vui-color-light-shade);
-  border: 1px solid rgba(var(--vui-color-text-rgb), 0.1);
+  border: 1px solid transparent;
   transition: all 0.2s;
 }
 .vuiBadge--neutral.vuiBadge--clickable:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "13.2.4",
+  "version": "13.3.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",
@@ -53,7 +53,7 @@
     "react-focus-on": "^3.8.1",
     "react-icons": "^4.10.1",
     "react-scripts": "^5.0.1",
-    "react-tooltip": "^5.28.1",
+    "react-tooltip": "^5.30.0",
     "sonner": "^2.0.6",
     "web-vitals": "^2.1.4"
   },