@dscout/particle 1.0.0-alpha.44 → 1.0.0-alpha.45

package/lib/cjs/components/callout.d.ts

@@ -8,12 +8,14 @@ interface Props extends CommonComponentProps, MarginModifierProp, ModifierClassP
     title: ReactNode;
     variant?: 'error' | 'info' | 'tip' | 'warning';
     width?: Dimensions;
+    withIcon?: boolean;
 }
 /**
  * Renders a Callout styled component in one of four variants: 'error', 'info', 'tip', or 'warning'.
  * Optionally can include accordion/collapsible details content via the `detailsContent` and `detailsButtonLabel` props
  * Or can provide a clickable action button via the `actionLabel` and `onActionClick` props.
  * If a `detailsContent` prop is present without a `detailsButtonLabel` prop, details will appear in a fixed, open state.
+ * If `withIcon` (default `true`) is provided as false, the callout will render without a decorative icon
  */
-export declare function Callout({ _modifierClass, actionLabel, margin, detailsContent, detailsButtonLabel, onActionClick, title, variant, width, ...rest }: Props): React.JSX.Element;
+export declare function Callout({ _modifierClass, actionLabel, margin, detailsContent, detailsButtonLabel, onActionClick, title, variant, width, withIcon, ...rest }: Props): React.JSX.Element;
 export default Callout;

package/lib/cjs/components/callout.js

@@ -57,18 +57,18 @@ var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
 var button_plain_1 = require("./button_plain");
 var collapsible_content_1 = require("./collapsible_content");
 var button_1 = require("./button");
-var IconChevronDown = express_1.ExpressIcons.IconChevronDown, IconCircleInfoAltOutlined = express_1.ExpressIcons.IconCircleInfoAltOutlined, IconLightbulb = express_1.ExpressIcons.IconLightbulb, IconTriangleExclamation = express_1.ExpressIcons.IconTriangleExclamation;
+var IconChevronDown = express_1.ExpressIcons.IconChevronDown, IconCircleInfoAltFilled = express_1.ExpressIcons.IconCircleInfoAltFilled, IconLightbulbFilled = express_1.ExpressIcons.IconLightbulbFilled, IconTriangleExclamationFilled = express_1.ExpressIcons.IconTriangleExclamationFilled;
 var getVariantIcon = function (variant) {
     switch (variant) {
         case 'error':
-            return react_1.default.createElement(IconTriangleExclamation, { base: "16" });
+            return react_1.default.createElement(IconTriangleExclamationFilled, { base: "16", "aria-hidden": true });
         case 'info':
-            return react_1.default.createElement(IconCircleInfoAltOutlined, { base: "16" });
+            return react_1.default.createElement(IconCircleInfoAltFilled, { base: "16", "aria-hidden": true });
         case 'warning':
-            return react_1.default.createElement(IconTriangleExclamation, { base: "16" });
+            return react_1.default.createElement(IconTriangleExclamationFilled, { base: "16", "aria-hidden": true });
         case 'tip':
         default:
-            return react_1.default.createElement(IconLightbulb, { base: "16" });
+            return react_1.default.createElement(IconLightbulbFilled, { base: "16", "aria-hidden": true });
     }
 };
 /**
@@ -76,17 +76,18 @@ var getVariantIcon = function (variant) {
  * Optionally can include accordion/collapsible details content via the `detailsContent` and `detailsButtonLabel` props
  * Or can provide a clickable action button via the `actionLabel` and `onActionClick` props.
  * If a `detailsContent` prop is present without a `detailsButtonLabel` prop, details will appear in a fixed, open state.
+ * If `withIcon` (default `true`) is provided as false, the callout will render without a decorative icon
  */
 function Callout(_a) {
-    var _modifierClass = _a._modifierClass, actionLabel = _a.actionLabel, margin = _a.margin, detailsContent = _a.detailsContent, detailsButtonLabel = _a.detailsButtonLabel, onActionClick = _a.onActionClick, title = _a.title, _b = _a.variant, variant = _b === void 0 ? 'info' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, rest = __rest(_a, ["_modifierClass", "actionLabel", "margin", "detailsContent", "detailsButtonLabel", "onActionClick", "title", "variant", "width"]);
-    var _d = (0, react_1.useState)(true), hideDetails = _d[0], setHideDetails = _d[1];
-    var icon = getVariantIcon(variant);
+    var _modifierClass = _a._modifierClass, actionLabel = _a.actionLabel, margin = _a.margin, detailsContent = _a.detailsContent, detailsButtonLabel = _a.detailsButtonLabel, onActionClick = _a.onActionClick, title = _a.title, _b = _a.variant, variant = _b === void 0 ? 'info' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c, _d = _a.withIcon, withIcon = _d === void 0 ? true : _d, rest = __rest(_a, ["_modifierClass", "actionLabel", "margin", "detailsContent", "detailsButtonLabel", "onActionClick", "title", "variant", "width", "withIcon"]);
+    var _e = (0, react_1.useState)(true), hideDetails = _e[0], setHideDetails = _e[1];
+    var icon = withIcon && getVariantIcon(variant);
     var renderWithDetailsAccordion = !!detailsContent && !!detailsButtonLabel;
     var renderWithActionButton = !!actionLabel && !!onActionClick;
     var containerClassnames = (0, class_names_1.default)('Callout flex direction--column rounded--med align-items--stretch', "Callout--".concat(variant), _modifierClass, (0, modifier_classes_1.getDimensionClass)('width', width), (0, modifier_classes_1.getMarginClass)(margin));
     return (react_1.default.createElement("div", __assign({ className: containerClassnames }, (0, data_attributes_1.default)(rest)),
         react_1.default.createElement("div", { className: "Callout__Title-Container flex" },
-            react_1.default.createElement("div", { className: "Callout__Icon-Container rounded--small height--1.5 width--1.5 flex-shrink--0 flex-grow--0 margin-r--0.75 flex justify--center align-self--start" }, icon),
+            !!icon && (react_1.default.createElement("div", { className: "Callout__Icon-Container padding--0.25 flex-shrink--0 flex-grow--0 margin-r--0.75 flex justify--center align-self--start" }, icon)),
             react_1.default.createElement("div", { className: (0, class_names_1.default)('flex-grow--1', {
                     'padding-r--1': renderWithDetailsAccordion || renderWithActionButton
                 }) },

package/lib/cjs/components/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../../src/components/callout.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwD;AAExD,qEAA8C;AAC9C,4CAAgD;AAQhD,8DAA8E;AAC9E,6EAAyD;AACzD,+CAA6C;AAC7C,6DAA2D;AAC3D,mCAAkC;AAGhC,IAAA,eAAe,GAIb,sBAAY,gBAJC,EACf,yBAAyB,GAGvB,sBAAY,0BAHW,EACzB,aAAa,GAEX,sBAAY,cAFD,EACb,uBAAuB,GACrB,sBAAY,wBADS,CACR;AAejB,IAAM,cAAc,GAAG,UAAC,OAAsC;IAC5D,QAAQ,OAAO,EAAE;QACf,KAAK,OAAO;YACV,OAAO,8BAAC,uBAAuB,IAAC,IAAI,EAAC,IAAI,GAAG,CAAC;QAC/C,KAAK,MAAM;YACT,OAAO,8BAAC,yBAAyB,IAAC,IAAI,EAAC,IAAI,GAAG,CAAC;QACjD,KAAK,SAAS;YACZ,OAAO,8BAAC,uBAAuB,IAAC,IAAI,EAAC,IAAI,GAAG,CAAC;QAC/C,KAAK,KAAK,CAAC;QACX;YACE,OAAO,8BAAC,aAAa,IAAC,IAAI,EAAC,IAAI,GAAG,CAAC;KACtC;AACH,CAAC,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,OAAO,CAAC,EAWhB;IAVN,IAAA,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,cAAc,oBAAA,EACd,kBAAkB,wBAAA,EAClB,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EACX,IAAI,cAVe,iIAWvB,CADQ;IAED,IAAA,KAAgC,IAAA,gBAAQ,EAAC,IAAI,CAAC,EAA7C,WAAW,QAAA,EAAE,cAAc,QAAkB,CAAC;IAErD,IAAM,IAAI,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;IAErC,IAAM,0BAA0B,GAAG,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,kBAAkB,CAAC;IAC5E,IAAM,sBAAsB,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,aAAa,CAAC;IAEhE,IAAM,mBAAmB,GAAG,IAAA,qBAAU,EACpC,kEAAkE,EAClE,mBAAY,OAAO,CAAE,EACrB,cAAc,EACd,IAAA,oCAAiB,EAAC,OAAO,EAAE,KAAK,CAAC,EACjC,IAAA,iCAAc,EAAC,MAAM,CAAC,CACvB,CAAC;IAEF,OAAO,CACL,gDAAK,SAAS,EAAE,mBAAmB,IAAM,IAAA,yBAAiB,EAAC,IAAI,CAAC;QAC9D,uCAAK,SAAS,EAAC,+BAA+B;YAC5C,uCAAK,SAAS,EAAC,iJAAiJ,IAC7J,IAAI,CACD;YACN,uCACE,SAAS,EAAE,IAAA,qBAAU,EAAC,cAAc,EAAE;oBACpC,cAAc,EAAE,0BAA0B,IAAI,sBAAsB;iBACrE,CAAC;gBAEF,wCAAM,SAAS,EAAC,wCAAwC,IACrD,KAAK,CACD,CACH;YACL,0BAA0B,IAAI,CAC7B,8BAAC,0BAAW,IACV,MAAM,EAAE;oBACN,IAAI,EAAE,MAAM;iBACb,EACD,OAAO,EAAE,cAAM,OAAA,cAAc,CAAC,CAAC,WAAW,CAAC,EAA5B,CAA4B,EAC3C,cAAc,EAAC,gBAAgB;gBAE/B,wCAAM,SAAS,EAAC,yCAAyC;oBACvD,wCAAM,SAAS,EAAC,6BAA6B,IAC1C,kBAAkB,CACd;oBACP,8BAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAI,CACzD,CACK,CACf;YACA,sBAAsB,IAAI,CACzB,8BAAC,eAAM,IACL,OAAO,EAAE,aAAa,EACtB,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE;oBACN,IAAI,EAAE,MAAM;iBACb,EACD,IAAI,EAAC,OAAO,EACZ,cAAc,EAAC,gBAAgB;gBAE/B,wCAAM,SAAS,EAAC,EAAE,IAAE,WAAW,CAAQ,CAChC,CACV,CACG;QACL,CAAC,CAAC,cAAc,IAAI,CACnB,8BAAC,wCAAkB,IACjB,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK;YAEnD,uCAAK,SAAS,EAAC,qCAAqC;gBAClD,uCAAK,SAAS,EAAC,cAAc,IAAE,cAAc,CAAO,CAChD,CACa,CACtB,CACG,CACP,CAAC;AACJ,CAAC;AAnFD,0BAmFC;AAED,kBAAe,OAAO,CAAC"}
+{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../../src/components/callout.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/chip.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Colors, CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
 import type { GetRef } from '../utils/refs';
+import type { BuiltInTooltipConfig } from './tooltip/types';
 interface ChipProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     color?: Colors;
@@ -9,30 +10,100 @@ interface ChipProps extends CommonComponentProps, MarginModifierProp, ModifierCl
     outline?: boolean;
     textColor?: Colors;
     title?: string;
+    tooltipConfig?: Partial<Omit<BuiltInTooltipConfig, 'tooltipContent'>>;
     variant?: 'legacy' | 'modern';
     /**
      * For modern variant only
      */
     bgColor?: Colors;
     icon?: React.ReactNode;
+    maxCharacters?: number;
+    actionConfig?: {
+        disabled?: boolean;
+        onClick: React.MouseEventHandler<HTMLSpanElement>;
+        hoverBgColor: Colors;
+        activeBgColor: Colors;
+        icon: React.ReactNode;
+    };
 }
 /**
+ * A versatile component for displaying attributes in a compact form. Supports both
+ * static display and interactive button functionality with optional text truncation.
+ *
+ * ## Variants
+ *
+ * - **Legacy**: Traditional uppercase styling with medium radius
+ * - **Modern**: Contemporary styling with smaller text and radius (recommended)
+ *
+ * ## Color Behavior
+ *
  * With no color specified, the `<Chip />` bases its colors off of the text
  * color inherited by CSS. However, there's a slight difference between the
- * default and the `outline` variants that's important to point out:
+ * default and the `outline` variants:
  *
- * __Default__: With no color specified, the background color will match the
+ * **Default**: With no color specified, the background color will match the
  * inherited text color and the text color will default to `invert`. If the
- * default text color is not suitable for legibility- or a11y-purposes, an
+ * default text color is not suitable for legibility or accessibility purposes, an
  * explicit text color will need to be set with the `textColor` prop. For
  * example, if you're placing a `<Chip />` in an element with white text (such
  * as `<Button color="dscout" />`) you'll need to specify a text color
  * or else it won't be visible.
  *
- *
- * __Outline__: With no color specified, the outline color _and_ the text color
+ * **Outline**: With no color specified, the outline color _and_ the text color
  * will match the inherited text color. If desired, the text color can be set
  * explicitly with `textColor` prop, but that's an unlikely use case.
+ *
+ * ## Interactive Functionality
+ *
+ * The `actionConfig` prop transforms the chip into a semantic `button` element
+ * with hover and active states. When provided, it must include:
+ * - `onClick`: Click handler function
+ * - `hoverBgColor`: Background color on hover
+ * - `activeBgColor`: Background color when pressed
+ * - `icon`: Icon to display (typically a close or action icon)
+ * - `disabled` (optional): Disables interaction when true
+ *
+ * ## Text Truncation
+ *
+ * The `maxCharacters` prop enables automatic text truncation with tooltip support.
+ * When the chip's text content exceeds the specified character limit, it will be
+ * truncated with "..." and a tooltip will show the full content on hover.
+ *
+ * - Only works with string `children` content
+ * - Use `tooltipConfig` to customize tooltip placement, z-index, etc.
+ * - When truncation is active, the `getRef` prop cannot be used as the ref is
+ *   managed by the tooltip container
+ *
+ * @example
+ * ```tsx
+ * // Basic chip
+ * <Chip variant="modern" bgColor="blue-100" textColor="blue-700">
+ *   Tag Label
+ * </Chip>
+ *
+ * // Interactive chip
+ * <Chip
+ *   variant="modern"
+ *   bgColor="gray-100"
+ *   actionConfig={{
+ *     onClick: handleRemove,
+ *     hoverBgColor: "gray-200",
+ *     activeBgColor: "gray-300",
+ *     icon: <CloseIcon />
+ *   }}
+ * >
+ *   Removable Tag
+ * </Chip>
+ *
+ * // Truncated chip
+ * <Chip
+ *   variant="modern"
+ *   maxCharacters={20}
+ *   tooltipConfig={{ placement: "top" }}
+ * >
+ *   Very long chip label that will be truncated
+ * </Chip>
+ * ```
  */
-export declare function Chip({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, bgColor, getRef, icon, id, margin, outline, textColor, title, variant, ...rest }: ChipProps): React.JSX.Element;
+export declare function Chip({ _modifierClass, actionConfig, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, bgColor, getRef, icon, id, margin, maxCharacters, outline, textColor, tooltipConfig, title, variant, ...rest }: ChipProps): React.JSX.Element;
 export {};

package/lib/cjs/components/chip.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -26,32 +49,95 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
 var modifier_classes_1 = require("../utils/modifier_classes");
+var tooltip_container_1 = require("./tooltip/tooltip_container");
 var DEFAULT_TEXT_COLOR = 'invert';
 /**
+ * A versatile component for displaying attributes in a compact form. Supports both
+ * static display and interactive button functionality with optional text truncation.
+ *
+ * ## Variants
+ *
+ * - **Legacy**: Traditional uppercase styling with medium radius
+ * - **Modern**: Contemporary styling with smaller text and radius (recommended)
+ *
+ * ## Color Behavior
+ *
  * With no color specified, the `<Chip />` bases its colors off of the text
  * color inherited by CSS. However, there's a slight difference between the
- * default and the `outline` variants that's important to point out:
+ * default and the `outline` variants:
  *
- * __Default__: With no color specified, the background color will match the
+ * **Default**: With no color specified, the background color will match the
  * inherited text color and the text color will default to `invert`. If the
- * default text color is not suitable for legibility- or a11y-purposes, an
+ * default text color is not suitable for legibility or accessibility purposes, an
  * explicit text color will need to be set with the `textColor` prop. For
  * example, if you're placing a `<Chip />` in an element with white text (such
  * as `<Button color="dscout" />`) you'll need to specify a text color
  * or else it won't be visible.
  *
- *
- * __Outline__: With no color specified, the outline color _and_ the text color
+ * **Outline**: With no color specified, the outline color _and_ the text color
  * will match the inherited text color. If desired, the text color can be set
  * explicitly with `textColor` prop, but that's an unlikely use case.
+ *
+ * ## Interactive Functionality
+ *
+ * The `actionConfig` prop transforms the chip into a semantic `button` element
+ * with hover and active states. When provided, it must include:
+ * - `onClick`: Click handler function
+ * - `hoverBgColor`: Background color on hover
+ * - `activeBgColor`: Background color when pressed
+ * - `icon`: Icon to display (typically a close or action icon)
+ * - `disabled` (optional): Disables interaction when true
+ *
+ * ## Text Truncation
+ *
+ * The `maxCharacters` prop enables automatic text truncation with tooltip support.
+ * When the chip's text content exceeds the specified character limit, it will be
+ * truncated with "..." and a tooltip will show the full content on hover.
+ *
+ * - Only works with string `children` content
+ * - Use `tooltipConfig` to customize tooltip placement, z-index, etc.
+ * - When truncation is active, the `getRef` prop cannot be used as the ref is
+ *   managed by the tooltip container
+ *
+ * @example
+ * ```tsx
+ * // Basic chip
+ * <Chip variant="modern" bgColor="blue-100" textColor="blue-700">
+ *   Tag Label
+ * </Chip>
+ *
+ * // Interactive chip
+ * <Chip
+ *   variant="modern"
+ *   bgColor="gray-100"
+ *   actionConfig={{
+ *     onClick: handleRemove,
+ *     hoverBgColor: "gray-200",
+ *     activeBgColor: "gray-300",
+ *     icon: <CloseIcon />
+ *   }}
+ * >
+ *   Removable Tag
+ * </Chip>
+ *
+ * // Truncated chip
+ * <Chip
+ *   variant="modern"
+ *   maxCharacters={20}
+ *   tooltipConfig={{ placement: "top" }}
+ * >
+ *   Very long chip label that will be truncated
+ * </Chip>
+ * ```
  */
 function Chip(_a) {
     var _b, _c;
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, color = _a.color, bgColor = _a.bgColor, getRef = _a.getRef, icon = _a.icon, id = _a.id, margin = _a.margin, outline = _a.outline, textColor = _a.textColor, title = _a.title, _d = _a.variant, variant = _d === void 0 ? 'legacy' : _d, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "color", "bgColor", "getRef", "icon", "id", "margin", "outline", "textColor", "title", "variant"]);
+    var _modifierClass = _a._modifierClass, actionConfig = _a.actionConfig, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, color = _a.color, bgColor = _a.bgColor, getRef = _a.getRef, icon = _a.icon, id = _a.id, margin = _a.margin, maxCharacters = _a.maxCharacters, outline = _a.outline, textColor = _a.textColor, tooltipConfig = _a.tooltipConfig, title = _a.title, _d = _a.variant, variant = _d === void 0 ? 'legacy' : _d, rest = __rest(_a, ["_modifierClass", "actionConfig", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "color", "bgColor", "getRef", "icon", "id", "margin", "maxCharacters", "outline", "textColor", "tooltipConfig", "title", "variant"]);
+    var truncLength = Math.max(0, Math.floor(Number(maxCharacters) || 0));
     function getContentColor() {
         if (outline)
             return textColor || null;
@@ -65,16 +151,76 @@ function Chip(_a) {
         _b["bg-color--".concat(color)] = color && !outline && !bgColor,
         _b["bg-color--".concat(bgColor)] = bgColor,
         _b['Chip--modern'] = variant === 'modern',
+        _b['Chip--interactive'] = !!actionConfig && !actionConfig.disabled,
         _b));
     var contentClassname = (0, class_names_1.default)('Chip__Content', (_c = {},
         _c["color--".concat(contentColor)] = contentColor,
         _c['Chip__Content--modern'] = variant === 'modern',
-        _c['Chip__Content--with-icon'] = !!icon,
+        _c['Chip__Content--with-icon'] = !!icon || !!(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.icon),
         _c));
-    return (react_1.default.createElement("span", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: chipClassname, id: id, ref: getRef, title: title }),
-        react_1.default.createElement("span", { className: contentClassname },
-            icon && icon,
-            children)));
+    var interactiveProps = (0, react_1.useMemo)(function () {
+        if (!actionConfig || actionConfig.disabled) {
+            return {
+                'aria-disabled': actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.disabled,
+                style: {
+                    '--Chip____hover-bg-color': "var(--color--".concat(bgColor, ")"),
+                    '--Chip____active-bg-color': "var(--color--".concat(bgColor, ")")
+                }
+            };
+        }
+        var onClick = actionConfig.onClick, hoverBgColor = actionConfig.hoverBgColor, activeBgColor = actionConfig.activeBgColor;
+        return {
+            role: 'button',
+            onClick: onClick,
+            tabIndex: 0,
+            onKeyDown: function (e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    // Delegate to click handler for keyboard activation
+                    onClick(e);
+                }
+            },
+            style: {
+                '--Chip____hover-bg-color': "var(--color--".concat(hoverBgColor, ")"),
+                '--Chip____active-bg-color': "var(--color--".concat(activeBgColor, ")")
+            }
+        };
+    }, [actionConfig, bgColor]);
+    var containerProps = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, (0, data_attributes_1.default)(rest)), interactiveProps), { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, className: chipClassname, id: id, ref: getRef, title: title })); }, [
+        ariaDescribedby,
+        ariaLabel,
+        ariaLabelledby,
+        chipClassname,
+        getRef,
+        id,
+        interactiveProps,
+        rest,
+        title
+    ]);
+    var shouldRenderTooltip = typeof truncLength === 'number' &&
+        truncLength > 0 &&
+        typeof children === 'string' &&
+        children.length > truncLength;
+    var chipContent = (0, react_1.useMemo)(function () { return (react_1.default.createElement("span", { className: contentClassname, "aria-label": shouldRenderTooltip ? children : undefined },
+        !!icon && icon,
+        shouldRenderTooltip
+            ? "".concat(children.slice(0, truncLength), "...")
+            : children,
+        !!(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.icon) && actionConfig.icon)); }, [
+        actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.icon,
+        children,
+        contentClassname,
+        icon,
+        truncLength,
+        shouldRenderTooltip
+    ]);
+    if (shouldRenderTooltip) {
+        return (react_1.default.createElement(tooltip_container_1.TooltipContainer, __assign({}, (tooltipConfig !== null && tooltipConfig !== void 0 ? tooltipConfig : {}), { tooltipContent: children }), function (_a) {
+            var ref = _a.ref;
+            return (react_1.default.createElement("span", __assign({}, containerProps, { ref: ref }), chipContent));
+        }));
+    }
+    return react_1.default.createElement("span", __assign({}, containerProps), chipContent);
 }
 exports.Chip = Chip;
 //# sourceMappingURL=chip.js.map

package/lib/cjs/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAU1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAqB3D,IAAM,kBAAkB,GAAG,QAAQ,CAAC;AAEpC;;;;;;;;;;;;;;;;;GAiBG;AAEH,SAAgB,IAAI,CAAC,EAiBT;;IAhBV,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,MAAM,YAAA,EACN,OAAO,aAAA,EACP,SAAS,eAAA,EACT,KAAK,WAAA,EACL,eAAkB,EAAlB,OAAO,mBAAG,QAAQ,KAAA,EACf,IAAI,cAhBY,qLAiBpB,CADQ;IAEP,SAAS,eAAe;QACtB,IAAI,OAAO;YAAE,OAAO,SAAS,IAAI,IAAI,CAAC;QAEtC,OAAO,SAAS,IAAI,kBAAkB,CAAC;IACzC,CAAC;IAED,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,aAAa,GAAG,IAAA,qBAAU,EAC9B,MAAM,EACN,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc;YAEZ,gBAAgB,EAAE,OAAO;;QACzB,GAAC,iBAAU,KAAK,CAAE,IAAG,KAAK,IAAI,OAAO;QACrC,GAAC,oBAAa,KAAK,CAAE,IAAG,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO;QACrD,GAAC,oBAAa,OAAO,CAAE,IAAG,OAAO;QACjC,kBAAc,GAAE,OAAO,KAAK,QAAQ;YAEvC,CAAC;IACF,IAAM,gBAAgB,GAAG,IAAA,qBAAU,EAAC,eAAe;QACjD,GAAC,iBAAU,YAAY,CAAE,IAAG,YAAY;QACxC,2BAAuB,GAAE,OAAO,KAAK,QAAQ;QAC7C,8BAA0B,GAAE,CAAC,CAAC,IAAI;YAClC,CAAC;IAEH,OAAO,CACL,mDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,aAAa,EACxB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK;QAEZ,wCAAM,SAAS,EAAE,gBAAgB;YAC9B,IAAI,IAAI,IAAI;YACZ,QAAQ,CACJ,CACF,CACR,CAAC;AACJ,CAAC;AA7DD,oBA6DC"}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/filter_chip.d.ts

@@ -0,0 +1,76 @@
+import React, { type ComponentProps } from 'react';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { GetRef } from '../utils/refs';
+import type { BuiltInTooltipConfig } from './tooltip/types';
+import { Chip } from './chip';
+type FilterBase = {
+    id: string;
+    title: string;
+};
+/**
+ * A compound component that displays a labeled group of removable filter chips.
+ * Combines a tooltip-enabled label with a list of interactive or static chips.
+ *
+ * ## Purpose
+ * Designed for filtering interfaces where users need to see applied filters
+ * and optionally remove them. The component provides visual grouping with
+ * a descriptive label and consistent chip styling.
+ *
+ * ## Type Safety
+ * The component automatically infers the filter type from the `filters` prop
+ * while ensuring each filter has required `id` and `title` properties for proper
+ * rendering and key management. The full filter type is preserved in callbacks.
+ *
+ * ## Interaction Modes
+ *
+ * **Static Mode**: When `onRemoveFilterChip` is not provided, chips are
+ * display-only with no interaction capabilities.
+ *
+ * **Interactive Mode**: When `onRemoveFilterChip` is provided, each chip
+ * becomes clickable with a remove icon, hover states, and proper button
+ * semantics. The `chipsDisabled` prop can temporarily disable interactions.
+ *
+ * ## Chip Behavior
+ * All chips inherit the modern variant styling and use consistent colors
+ * (gray-50 background, gray-800 text). Individual chip truncation and
+ * tooltips are controlled via `chipMaxCharacters` and `chipTooltipConfig`.
+ *
+ * @example
+ * ```tsx
+ * // Static display mode
+ * <FilterChip
+ *   label="Applied Filters"
+ *   icon={<FilterIcon />}
+ *   filters={[
+ *     { id: '1', title: 'Active Users' },
+ *     { id: '2', title: 'Last 30 Days' }
+ *   ]}
+ *   tooltipConfig={{ tooltipContent: "Current filter criteria" }}
+ *   getRef={containerRef}
+ * />
+ *
+ * // Interactive mode with removal
+ * <FilterChip
+ *   label="Active Filters"
+ *   filters={appliedFilters}
+ *   onRemoveFilterChip={(filter) => removeFilter(filter.id)}
+ *   chipsDisabled={isLoading}
+ *   chipMaxCharacters={25}
+ *   tooltipConfig={{ tooltipContent: "Click chips to remove" }}
+ *   getRef={containerRef}
+ * />
+ * ```
+ */
+interface FilterChipProps<T extends FilterBase = FilterBase> extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+    chipMaxCharacters?: ComponentProps<typeof Chip>['maxCharacters'];
+    chipTooltipConfig?: ComponentProps<typeof Chip>['tooltipConfig'];
+    chipsDisabled?: boolean;
+    filters: T[];
+    getRef: GetRef<HTMLDivElement>;
+    icon?: React.ReactNode;
+    label: string;
+    onRemoveFilterChip?: (filter: T, event: React.MouseEvent) => unknown;
+    tooltipConfig: BuiltInTooltipConfig;
+}
+export declare function FilterChip<T extends FilterBase = FilterBase>({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, chipMaxCharacters, chipTooltipConfig, chipsDisabled, filters, getRef, icon, label, margin, onRemoveFilterChip, tooltipConfig, ...rest }: FilterChipProps<T>): React.JSX.Element;
+export {};

package/lib/cjs/components/filter_chip.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterChip = void 0;
+var react_1 = __importStar(require("react"));
+var class_names_1 = __importDefault(require("../utils/class_names"));
+var modifier_classes_1 = require("../utils/modifier_classes");
+var express_1 = require("../icons/express");
+var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var chip_1 = require("./chip");
+var tooltip_container_1 = require("./tooltip/tooltip_container");
+function FilterChip(_a) {
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], _b = _a.chipMaxCharacters, chipMaxCharacters = _b === void 0 ? 21 : _b, chipTooltipConfig = _a.chipTooltipConfig, chipsDisabled = _a.chipsDisabled, filters = _a.filters, getRef = _a.getRef, icon = _a.icon, label = _a.label, margin = _a.margin, onRemoveFilterChip = _a.onRemoveFilterChip, tooltipConfig = _a.tooltipConfig, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "chipMaxCharacters", "chipTooltipConfig", "chipsDisabled", "filters", "getRef", "icon", "label", "margin", "onRemoveFilterChip", "tooltipConfig"]);
+    var containerClassnames = (0, class_names_1.default)('FilterChip', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass);
+    var getChipInteractiveProps = (0, react_1.useCallback)(function (filter) {
+        var chipsAreInteractive = !!onRemoveFilterChip;
+        if (!chipsAreInteractive) {
+            return undefined;
+        }
+        return {
+            onClick: function (e) {
+                return onRemoveFilterChip(filter, e);
+            },
+            disabled: chipsDisabled,
+            activeBgColor: 'gray-200',
+            hoverBgColor: 'gray-100',
+            icon: (react_1.default.createElement(express_1.ExpressIcons.IconCircleXOutlined, { "aria-hidden": true, color: "gray-500", base: "12" }))
+        };
+    }, [chipsDisabled, onRemoveFilterChip]);
+    // Component is hidden if there are no displayed filters
+    if (!filters.length) {
+        return null;
+    }
+    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { className: containerClassnames, ref: getRef, role: "group", "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Applied filters for ".concat(label) }),
+        react_1.default.createElement(tooltip_container_1.TooltipContainer, __assign({}, tooltipConfig), function (_a) {
+            var ref = _a.ref;
+            return (react_1.default.createElement("div", { className: "FilterChip__Parent", ref: ref },
+                !!icon && icon,
+                react_1.default.createElement("span", { className: "FilterChip__Label" }, label)));
+        }),
+        react_1.default.createElement("div", { className: "FilterChip__List" }, filters.map(function (filter) { return (react_1.default.createElement(chip_1.Chip, { key: filter.id, variant: "modern", maxCharacters: chipMaxCharacters, bgColor: "gray-50", textColor: "gray-800", tooltipConfig: chipTooltipConfig, actionConfig: getChipInteractiveProps(filter), "aria-label": onRemoveFilterChip ? "Remove filter: ".concat(filter.title) : undefined }, filter.title)); }))));
+}
+exports.FilterChip = FilterChip;
+//# sourceMappingURL=filter_chip.js.map

package/lib/cjs/components/filter_chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter_chip.js","sourceRoot":"","sources":["../../../src/components/filter_chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgE;AAQhE,qEAA8C;AAC9C,8DAA2D;AAC3D,4CAAgD;AAChD,6EAAyD;AAEzD,+BAA8B;AAC9B,iEAA+D;AAyE/D,SAAgB,UAAU,CAAoC,EAgBzC;IAfnB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,yBAAsB,EAAtB,iBAAiB,mBAAG,EAAE,KAAA,EACtB,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,OAAO,aAAA,EACP,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,MAAM,YAAA,EACN,kBAAkB,wBAAA,EAClB,aAAa,mBAAA,EACV,IAAI,cAfqD,yNAgB7D,CADQ;IAEP,IAAM,mBAAmB,GAAG,IAAA,qBAAU,EACpC,YAAY,EACZ,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,CAAC;IAEF,IAAM,uBAAuB,GAAG,IAAA,mBAAW,EACzC,UAAC,MAAS;QACR,IAAM,mBAAmB,GAAG,CAAC,CAAC,kBAAkB,CAAC;QAEjD,IAAI,CAAC,mBAAmB,EAAE;YACxB,OAAO,SAAS,CAAC;SAClB;QAED,OAAO;YACL,OAAO,EAAE,UAAC,CAAoC;gBAC5C,OAAA,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAC;YAA7B,CAA6B;YAC/B,QAAQ,EAAE,aAAa;YACvB,aAAa,EAAE,UAAU;YACzB,YAAY,EAAE,UAAU;YACxB,IAAI,EAAE,CACJ,8BAAC,sBAAY,CAAC,mBAAmB,yBAE/B,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,IAAI,GACT,CACH;SACF,CAAC;IACJ,CAAC,EACD,CAAC,aAAa,EAAE,kBAAkB,CAAC,CACpC,CAAC;IAEF,wDAAwD;IACxD,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACnB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,SAAS,EAAE,mBAAmB,EAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,OAAO,qBACK,cAAc,sBACb,eAAe,gBACrB,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,8BAAuB,KAAK,CAAE;QAEvD,8BAAC,oCAAgB,eAAK,aAAa,GAChC,UAAC,EAAO;gBAAL,GAAG,SAAA;YAAO,OAAA,CACZ,uCAAK,SAAS,EAAC,oBAAoB,EAAC,GAAG,EAAE,GAAG;gBACzC,CAAC,CAAC,IAAI,IAAI,IAAI;gBACf,wCAAM,SAAS,EAAC,mBAAmB,IAAE,KAAK,CAAQ,CAC9C,CACP;QALa,CAKb,CACgB;QACnB,uCAAK,SAAS,EAAC,kBAAkB,IAC9B,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,CACvB,8BAAC,WAAI,IACH,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,OAAO,EAAC,QAAQ,EAChB,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,UAAU,EACpB,aAAa,EAAE,iBAAiB,EAChC,YAAY,EAAE,uBAAuB,CAAC,MAAM,CAAC,gBAE3C,kBAAkB,CAAC,CAAC,CAAC,yBAAkB,MAAM,CAAC,KAAK,CAAE,CAAC,CAAC,CAAC,SAAS,IAGlE,MAAM,CAAC,KAAK,CACR,CACR,EAfwB,CAexB,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC;AA5FD,gCA4FC"}

package/lib/cjs/icons/express/index.d.ts

@@ -134,6 +134,7 @@ import { IconLayeredSquaresPlay } from './layered_squares_play';
 import { IconLayeredSquaresQuestion } from './layered_squares_question';
 import { IconLayeredSquaresThree } from './layered_squares_three';
 import { IconLinesStaggered } from './lines_staggered';
+import { IconLightbulbFilled } from './lightbulb_filled';
 import { IconLightbulb } from './lightbulb';
 import { IconLineInRectangle } from './line_in_rectangle';
 import { IconLink } from './link';
@@ -224,6 +225,7 @@ import { IconTriangleDown } from './triangle_down';
 import { IconTriangleLeft } from './triangle_left';
 import { IconTriangleRight } from './triangle_right';
 import { IconTriangleUp } from './triangle_up';
+import { IconTriangleExclamationFilled } from './triangle_exclamation_filled';
 import { IconTriangleExclamation } from './triangle_exclamation';
 import { IconTrophy } from './trophy';
 import { IconWand } from './wand';
@@ -366,6 +368,7 @@ declare const ExpressIcons: {
     IconLayeredSquaresQuestion: typeof IconLayeredSquaresQuestion;
     IconLayeredSquaresThree: typeof IconLayeredSquaresThree;
     IconLinesStaggered: typeof IconLinesStaggered;
+    IconLightbulbFilled: typeof IconLightbulbFilled;
     IconLightbulb: typeof IconLightbulb;
     IconLineInRectangle: typeof IconLineInRectangle;
     IconLink: typeof IconLink;
@@ -456,6 +459,7 @@ declare const ExpressIcons: {
     IconTriangleLeft: typeof IconTriangleLeft;
     IconTriangleRight: typeof IconTriangleRight;
     IconTriangleUp: typeof IconTriangleUp;
+    IconTriangleExclamationFilled: typeof IconTriangleExclamationFilled;
     IconTriangleExclamation: typeof IconTriangleExclamation;
     IconTrophy: typeof IconTrophy;
     IconWand: typeof IconWand;