@getsoren/design-system 4.84.0 → 4.85.1

package/dist/src/components/Inputs/CheckboxCard/CheckboxCard.d.ts

@@ -1,20 +1,33 @@
 import { ReactNode } from 'react';
 export interface CheckboxCardProps {
+    /** Main line — one line in a horizontal card, up to three in a vertical one */
+    label: string;
     /** Secondary line under the label — one line, ellipsized */
     description?: string;
     /** Leading visual, rendered in a 40px tile — an outlined icon, an avatar, an illustration */
-    icon: ReactNode;
-    /** Selected state — the card is a stateless toggle (`aria-checked`), the group logic
-     * (single or multi select) belongs to the consumer. For a plain radio list without icon
-     * or description, prefer `FormControlLabel variant="card"` with a Radio. */
-    isSelected: boolean;
-    /** Main line — one line, ellipsized */
-    label: string;
+    icon?: ReactNode;
+    /** Content before the texts, rendered as is (an avatar, a badge) */
+    leading?: ReactNode;
+    /** Content after the texts of a horizontal card (an icon) */
+    trailing?: ReactNode;
+    /** Picture: above the texts of a vertical card, after them in a 56×48 box of a horizontal one */
+    picture?: ReactNode;
+    /** Shows a skeleton over the picture box */
+    isPictureLoading?: boolean;
+    /** `horizontal`: texts in a row; `vertical`: picture on top, for a catalog */
+    layout?: "horizontal" | "vertical";
+    /** Selection indicator; `none` for a plain choice. The group logic (single or multi select) belongs to the consumer */
+    control?: "checkbox" | "radio" | "none";
+    /** `end`: a check (or a dot) fading in after the texts; `start`: a circled indicator before them */
+    controlPlacement?: "start" | "end";
+    selected: boolean;
+    disabled?: boolean;
     onClick: () => void;
+    testId?: string;
 }
 /**
- * Large tap-target selection card: icon tile, label, optional description and a check indicator.
- * Sized for tablet use in the field.
+ * Large tap-target selection card: optional icon tile or picture, label, description and a selection
+ * indicator. Sized for tablet use in the field.
  */
-declare const CheckboxCard: ({ description, icon, isSelected, label, onClick }: CheckboxCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const CheckboxCard: ({ label, description, icon, leading, trailing, picture, isPictureLoading, layout, control, controlPlacement, selected, disabled, onClick, testId, }: CheckboxCardProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default CheckboxCard;

package/dist/src/components/Inputs/PillGroup/PillGroup.d.ts

@@ -8,7 +8,7 @@ export interface PillOption {
 }
 interface PillGroupBaseProps {
     options: PillOption[];
-    /** Draws the pills in the invalid colour */
+    /** Draws the pills in the invalid colour and marks the group invalid for assistive technologies */
     error?: boolean;
     /** Palette of the invalid state and of the helper text */
     errorColor?: InvalidColor;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@getsoren/design-system",
   "description": "Design System React library",
   "sideEffects": false,
-  "version": "4.84.0",
+  "version": "4.85.1",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",