@pushwoosh/dumb-components 1.1.122 → 1.1.123

package/Button/ai-documentation.md

@@ -77,9 +77,12 @@ function App() {
 </Button>
 
 // Secondary button with icon
-<Button 
-  color="secondary" 
-  icon={<PlusIcon />}
+// Note: kit-icons require `size` and `view`. Match icon size to Button size:
+// Button size="field" (default) → icon size="medium"
+// Button size="compact"          → icon size="small"
+<Button
+  color="secondary"
+  icon={<PlusIcon size="medium" view="lined" />}
   onClick={() => handleAdd()}
 >
   Add Item
@@ -94,28 +97,28 @@ function App() {
   {isDeleting ? 'Deleting...' : 'Delete'}
 </Button>
 
-// Compact button with right icon
-<Button 
+// Compact button with right icon (size="small" matches size="compact")
+<Button
   color="primary"
   size="compact"
-  rightIcon={<ArrowIcon />}
+  rightIcon={<ArrowIcon size="small" view="lined" />}
 >
   Next
 </Button>
 
 // Ghost view button
-<Button 
+<Button
   color="primary"
   view="ghost"
-  icon={<EditIcon />}
+  icon={<EditIcon size="medium" view="lined" />}
 >
   Edit
 </Button>
 
 // Icon-only button
-<Button 
+<Button
   color="secondary"
-  icon={<SearchIcon />}
+  icon={<SearchIcon size="medium" view="lined" />}
   onClick={() => handleSearch()}
 />
 
@@ -188,8 +191,8 @@ A compact icon-only button with a built-in `CloseIcon` intended for "remove" / "
 | isDisabled | boolean | false | Whether button is disabled |
 | isLoading | boolean | false | Whether button shows loading state |
 | isOpen | boolean | false | Whether button appears in "open" state |
-| icon | ReactNode | undefined | Left icon element |
-| rightIcon | ReactNode | undefined | Right icon element |
+| icon | ReactNode | undefined | Left icon element. For `@pushwoosh/kit-icons` icons, pass `size` and `view` explicitly (both required). Match icon `size` to Button `size`: `size="medium"` for `field` (default), `size="small"` for `compact`. |
+| rightIcon | ReactNode | undefined | Right icon element. Same icon size/view rules as `icon`. |
 | children | ReactNode | undefined | Button text content |
 | boxRef | Ref | undefined | Ref to button element |
 | as | string \| Component | undefined | Render as different element/component |
@@ -218,6 +221,8 @@ A compact icon-only button with a built-in `CloseIcon` intended for "remove" / "
 - Don't use loading state without showing loading text to user
 - Avoid putting buttons inside other interactive elements
 - Don't use `isDisabled` with `isLoading` simultaneously
+- Don't pass icons without `size` and `view` — they are required on `@pushwoosh/kit-icons` and TypeScript won't catch it (Button's `icon` is typed as `ReactNode`)
+- Don't mismatch icon size to button size: `size="small"` icons belong only in `size="compact"` buttons; `field`-sized buttons need `size="medium"` icons
 - Avoid very long button text - keep concise
 
 ### Integration Tips

package/Chip/Chip.constants.d.ts

@@ -2,4 +2,6 @@ import { type ChipVariant } from './Chip.types';
 export declare const variants: Record<ChipVariant, {
     color: string;
     background: string;
+    hoverColor: string;
+    hoverBackground: string;
 }>;

package/Chip/Chip.constants.js

@@ -2,14 +2,20 @@ import { Color } from '@pushwoosh/kit-constants';
 export const variants = {
   primary: {
     color: Color.PRIMARY,
-    background: Color.BRIGHT_LIGHT
+    background: Color.BRIGHT_LIGHT,
+    hoverColor: Color.PRIMARY_HOVER,
+    hoverBackground: Color.BRIGHT_LIGHT_HOVER
   },
   danger: {
     color: Color.DANGER,
-    background: Color.DANGER_LIGHT
+    background: Color.DANGER_LIGHT,
+    hoverColor: Color.DANGER_HOVER,
+    hoverBackground: Color.DANGER_LIGHT_HOVER
   },
   warning: {
     color: Color.WARNING,
-    background: Color.WARNING_LIGHT
+    background: Color.WARNING_LIGHT,
+    hoverColor: Color.WARNING_HOVER,
+    hoverBackground: Color.WARNING_LIGHT_HOVER
   }
 };

package/Chip/Chip.d.ts

@@ -5,6 +5,8 @@ export declare const Chip: React.ForwardRefExoticComponent<{
     $onClose?: React.HTMLAttributes<HTMLDivElement>["onClick"];
     $readOnly?: boolean;
     $maxWidth?: string;
+    $icon?: React.ReactNode;
+    $tooltip?: React.ReactNode;
     as?: string;
 } & {
     children?: React.ReactNode | undefined;

package/Chip/Chip.js

@@ -1,31 +1,43 @@
 import React, { forwardRef } from 'react';
-import { CloseIcon } from '@pushwoosh/kit-icons';
-import { ChipStyled } from './styles';
+import { TooltipTrigger } from '../Tooltip';
+import { ChipCloseIcon, ChipLabel, ChipSlotIcon, ChipStyled } from './styles';
 export const Chip = forwardRef(({
   $variant = 'primary',
   $selected,
   $readOnly,
   $onClose,
   $maxWidth,
+  $icon,
+  $tooltip,
   children,
   as,
   ...rest
 }, ref) => {
+  const isCloseable = !!$onClose && !$readOnly;
+  const hasTooltip = !isCloseable && $tooltip !== undefined;
+  if ($readOnly && $onClose) {
+    console.error('[Chip]: $onClose is ignored when $readOnly is true — read-only chips have no close button.');
+  }
   return React.createElement(ChipStyled, {
     ref: ref,
     "$variant": $variant,
     "$selected": $selected,
-    "$closeable": !!$onClose,
+    "$hasLeadingIcon": !!$icon,
+    "$hasTrailingSlot": isCloseable || hasTooltip,
     "$readOnly": $readOnly,
     "$maxWidth": $maxWidth,
     as: as,
     ...rest
-  }, React.createElement("span", {
-    className: "chipLabel"
-  }, children), $onClose && React.createElement(CloseIcon, {
+  }, $icon && React.createElement(ChipSlotIcon, null, $icon), React.createElement(ChipLabel, {
+    "$truncated": $maxWidth !== undefined
+  }, children), isCloseable && React.createElement(ChipCloseIcon, {
     size: "small",
     onClick: $onClose,
-    as: "span",
-    className: "closeIcon"
-  }));
+    forwardedAs: "span"
+  }), hasTooltip && React.createElement(ChipSlotIcon, null, React.createElement(TooltipTrigger, {
+    view: "question",
+    size: "small",
+    position: "top-middle",
+    content: $tooltip
+  })));
 });

package/Chip/Chip.types.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type HTMLAttributes, type PropsWithChildren, type ReactNode } from 'react';
 export type ChipVariant = 'primary' | 'danger' | 'warning';
 export type ChipProps = PropsWithChildren<{
     $variant?: ChipVariant;
@@ -7,5 +7,7 @@ export type ChipProps = PropsWithChildren<{
     $readOnly?: boolean;
     /** CSS max-width value, e.g. "120px", "50%", "10rem". Enables label truncation with ellipsis. */
     $maxWidth?: string;
+    $icon?: ReactNode;
+    $tooltip?: ReactNode;
     as?: string;
 }> & HTMLAttributes<HTMLDivElement>;

package/Chip/ai-documentation.md

@@ -21,6 +21,9 @@ interface ChipProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
   $selected?: boolean;
   $onClose?: HTMLAttributes<HTMLDivElement>['onClick'];
   $readOnly?: boolean;
+  $maxWidth?: string;
+  $icon?: ReactNode;
+  $tooltip?: ReactNode;
   as?: string;
 }
 ```
@@ -116,6 +119,26 @@ function App() {
   {tag.name}
 </Chip>
 
+import { TagIcon } from '@pushwoosh/kit-icons';
+
+// Chip with leading icon
+<Chip $variant="primary" $icon={<TagIcon size="small" view="lined" />}>
+  Segment
+</Chip>
+
+// Icon + removable
+<Chip
+  $icon={<TagIcon size="small" view="lined" />}
+  $onClose={() => removeTag(tag)}
+>
+  {tag}
+</Chip>
+
+// Read-only chip with "?" tooltip
+<Chip $readOnly $variant="primary" $tooltip="Explanation for this chip">
+  Label
+</Chip>
+
 // Status chips
 function getStatusChip(status: string) {
   const variantMap = {
@@ -139,6 +162,9 @@ function getStatusChip(status: string) {
 | $variant | 'primary' \| 'danger' \| 'warning' | 'primary' | Visual style variant |
 | $selected | boolean | false | Whether chip appears in selected state |
 | $onClose | onClick handler | undefined | Makes chip removable with close icon |
+| $maxWidth | string | undefined | CSS max-width; truncates label with ellipsis |
+| $icon | ReactNode | undefined | Leading icon slot; pass a kit-icon with size="small" |
+| $tooltip | ReactNode | undefined | Tooltip content; renders a trailing "?" trigger on read-only chips |
 | $readOnly | boolean | false | Whether chip is interactive |
 | as | string | 'div' | HTML element to render as |
 | children | ReactNode | required | Chip content |
@@ -152,6 +178,18 @@ function getStatusChip(status: string) {
 | danger | Errors, removable warnings | Error messages, dangerous actions |
 | warning | Cautions, temporary states | Beta features, warnings, alerts |
 
+## Hover States
+
+Each variant darkens its background and tint on hover. Hover is only applied to
+interactive chips — it is intentionally disabled when `$selected` (selected chips
+keep the solid `MAIN` background) or `$readOnly` (non-interactive).
+
+| Variant | Background → hover | Tint → hover |
+|---------|--------------------|--------------|
+| primary | BRIGHT_LIGHT → BRIGHT_LIGHT_HOVER | PRIMARY → PRIMARY_HOVER |
+| danger | DANGER_LIGHT → DANGER_LIGHT_HOVER | DANGER → DANGER_HOVER |
+| warning | WARNING_LIGHT → WARNING_LIGHT_HOVER | WARNING → WARNING_HOVER |
+
 ## AI Agent Guidelines
 
 ### ✅ Recommended Patterns
@@ -161,6 +199,8 @@ function getStatusChip(status: string) {
 - Keep chip text short and descriptive
 - Use semantic variants (danger for errors, warning for cautions)
 - Group related chips together with consistent spacing
+- When adding a leading icon, always use `size="small"` so it fits the chip's 24px height; pass `view` too if the icon defines one
+- Slots are fixed: leading `$icon` on the left; the right side holds exactly one element — the close button on active chips (`$onClose`), or the `$tooltip` "?" trigger on read-only chips. A read-only chip never shows a close button, and the close button + tooltip are mutually exclusive.
 
 ### ❌ Common Mistakes to Avoid
 - Don't use chips for very long text content

package/Chip/index.d.ts

@@ -1 +1,2 @@
 export { Chip } from './Chip';
+export type { ChipProps, ChipVariant } from './Chip.types';

package/Chip/styles.d.ts

@@ -2,7 +2,13 @@ import type { ChipVariant } from './Chip.types';
 export declare const ChipStyled: import("styled-components").StyledComponent<"div", any, {
     $variant: ChipVariant;
     $selected?: boolean;
-    $closeable?: boolean;
+    $hasLeadingIcon?: boolean;
+    $hasTrailingSlot?: boolean;
     $readOnly?: boolean;
     $maxWidth?: string;
 }, never>;
+export declare const ChipSlotIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ChipLabel: import("styled-components").StyledComponent<"span", any, {
+    $truncated?: boolean;
+}, never>;
+export declare const ChipCloseIcon: import("styled-components").StyledComponent<import("react").FC<import("@pushwoosh/kit-icons").CloseIconProps>, any, {}, never>;

package/Chip/styles.js

@@ -1,14 +1,17 @@
 import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
+import { CloseIcon } from '@pushwoosh/kit-icons';
 import { variants } from './Chip.constants';
 export const ChipStyled = styled.div.withConfig({
   displayName: "ChipStyled",
   componentId: "sc-e2g39l-0"
-})(["display:inline-flex;min-height:24px;", " padding:0 ", " 0 8px;align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;& > .chipLabel{", "}& > .closeIcon{transition:transform 0.2s;&:hover{transform:scale(1.3);}}"], ({
+})(["display:inline-flex;min-height:24px;", " padding:0 ", " 0 ", ";align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;", ""], ({
   $maxWidth
 }) => $maxWidth !== undefined && `max-width: ${$maxWidth};`, ({
-  $closeable
-}) => $closeable ? '4px' : '8px', ({
+  $hasTrailingSlot
+}) => $hasTrailingSlot ? '4px' : '8px', ({
+  $hasLeadingIcon
+}) => $hasLeadingIcon ? '4px' : '8px', ({
   $readOnly
 }) => $readOnly ? 'default' : 'pointer', ({
   $variant,
@@ -29,11 +32,32 @@ export const ChipStyled = styled.div.withConfig({
   }
   return $selected ? Color.MAIN : variants[$variant].background;
 }, ({
-  $maxWidth
-}) => $maxWidth !== undefined && `
-      flex: 1 1 0;
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `);
+  $variant,
+  $selected,
+  $readOnly
+}) => !$selected && !$readOnly && `
+    &:hover {
+      color: ${variants[$variant].hoverColor};
+      background: ${variants[$variant].hoverBackground};
+    }
+  `);
+export const ChipSlotIcon = styled.span.withConfig({
+  displayName: "ChipSlotIcon",
+  componentId: "sc-e2g39l-1"
+})(["display:inline-flex;flex-shrink:0;"]);
+export const ChipLabel = styled.span.withConfig({
+  displayName: "ChipLabel",
+  componentId: "sc-e2g39l-2"
+})(["", ""], ({
+  $truncated
+}) => $truncated && `
+    flex: 1 1 0;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `);
+export const ChipCloseIcon = styled(CloseIcon).withConfig({
+  displayName: "ChipCloseIcon",
+  componentId: "sc-e2g39l-3"
+})(["flex-shrink:0;transition:transform 0.2s;&:hover{transform:scale(1.3);}"]);

package/index.d.ts

@@ -39,7 +39,7 @@ export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';
 export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
-export { Chip } from './Chip';
+export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
 export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.122",
+  "version": "1.1.123",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",