@pushwoosh/dumb-components 1.1.211 → 1.1.212

package/RadioCard/RadioCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
 import { Radio } from '../Radio';
+import { TooltipTrigger } from '../Tooltip';
 import { RootBox } from './styled';
 /**
  * Selectable card with a title, optional description and a radio indicator — a richer
@@ -14,23 +15,37 @@ export function RadioCard(props) {
   const {
     title,
     description,
+    titleTooltip,
     width = '262px',
     isActive,
+    isDisabled,
     onClick,
     children
   } = props;
   return _jsxs(RootBox, {
     "$width": width,
     isActive: isActive,
-    onClick: onClick,
+    isDisabled: isDisabled,
+    onClick: isDisabled ? undefined : onClick,
     children: [_jsxs(Vertical, {
+      "$gap": 0,
       children: [_jsxs(Horizontal, {
         "$alignItems": "center",
         "$justifyContent": "space-between",
-        children: [_jsx(H4, {
-          children: title
+        children: [_jsxs(Horizontal, {
+          "$alignItems": "center",
+          "$gap": 4,
+          children: [_jsx(H4, {
+            children: title
+          }), titleTooltip && _jsx(TooltipTrigger, {
+            content: titleTooltip,
+            position: "top-middle",
+            view: "question"
+          })]
         }), _jsx(Radio, {
-          isChecked: isActive
+          isChecked: isActive,
+          isDisabled: isDisabled,
+          size: "compact"
         })]
       }), description && _jsx(Paragraph, {
         children: description

package/RadioCard/styled.d.ts

@@ -18,5 +18,6 @@ export declare const RootBox: import("styled-components").StyledComponent<"div",
     $gap: number;
 } & {
     isActive?: boolean;
+    isDisabled?: boolean;
     $width: string | number;
 }, "$gridAutoFlow" | "$bgColor" | "$borderRadius" | "$padding" | "$alignItems" | "$gap">;

package/RadioCard/styled.js

@@ -6,12 +6,20 @@ export const RootBox = styled(Vertical).attrs({
   $alignItems: 'start',
   $bgColor: Color.CLEAR,
   $borderRadius: ShapeRadius.SECTION,
-  $gap: 12
+  $gap: 0
 }).withConfig({
   displayName: "RootBox",
   componentId: "sc-tkztr1-0"
-})(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:pointer;&:hover{background:", ";}"], ({
+})(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:", ";opacity:", ";pointer-events:", ";&:hover{background:", ";}"], ({
   $width
 }) => toCssValue($width), ({
   isActive
-}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`, Color.ROW_HOVER);
+}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`, ({
+  isDisabled
+}) => isDisabled ? 'default' : 'pointer', ({
+  isDisabled
+}) => isDisabled ? 0.5 : 1, ({
+  isDisabled
+}) => isDisabled ? 'none' : 'auto', ({
+  isDisabled
+}) => isDisabled ? Color.CLEAR : Color.ROW_HOVER);

package/RadioCard/types.d.ts

@@ -5,10 +5,14 @@ export interface RadioCardProps {
     title: string;
     /** Supporting text under the title. */
     description?: string;
+    /** Help tooltip shown via a question-mark icon next to the title. */
+    titleTooltip?: ReactNode;
     /** CSS width of the card (default `"262px"`). */
     width?: string | number;
     /** Whether this card is the selected one (drives the radio + active styling). */
     isActive?: boolean;
+    /** Dim the card and ignore clicks. */
+    isDisabled?: boolean;
     /** Extra content rendered below the description. */
     children?: ReactNode;
     /** Fires when the card is clicked. */

package/package.json

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