@trackunit/react-compound-components 1.7.163 → 1.7.168
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js
CHANGED
|
@@ -67,18 +67,13 @@ const cvaPreferenceCard = cssClassVarianceUtilities.cvaMerge(["rounded-lg", "bor
|
|
|
67
67
|
clickable: true,
|
|
68
68
|
class: "cursor-not-allowed",
|
|
69
69
|
},
|
|
70
|
-
{
|
|
71
|
-
disabled: false,
|
|
72
|
-
clickable: true,
|
|
73
|
-
class: "focus:ring-primary-600 focus:border-primary-600 focus:outline-none focus:ring-1",
|
|
74
|
-
},
|
|
75
70
|
],
|
|
76
71
|
defaultVariants: {
|
|
77
72
|
disabled: false,
|
|
78
73
|
clickable: false,
|
|
79
74
|
},
|
|
80
75
|
});
|
|
81
|
-
const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-
|
|
76
|
+
const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-start", "px-4", "py-[21px]", "rounded-l-lg", "border", "border-transparent"], {
|
|
82
77
|
variants: {
|
|
83
78
|
disabled: {
|
|
84
79
|
true: "bg-neutral-50",
|
|
@@ -93,12 +88,12 @@ const cvaInputCard = cssClassVarianceUtilities.cvaMerge(["flex", "items-center",
|
|
|
93
88
|
{
|
|
94
89
|
disabled: false,
|
|
95
90
|
checked: true,
|
|
96
|
-
class: "bg-primary-50",
|
|
91
|
+
class: "bg-primary-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
|
|
97
92
|
},
|
|
98
93
|
{
|
|
99
94
|
disabled: false,
|
|
100
95
|
checked: false,
|
|
101
|
-
class: "bg-neutral-50",
|
|
96
|
+
class: "bg-neutral-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
|
|
102
97
|
},
|
|
103
98
|
],
|
|
104
99
|
defaultVariants: {
|
|
@@ -145,8 +140,8 @@ const cvaIconBackground = cssClassVarianceUtilities.cvaMerge(["flex", "h-8", "w-
|
|
|
145
140
|
* with various states and visual treatments.
|
|
146
141
|
* It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
|
|
147
142
|
*/
|
|
148
|
-
const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
|
|
149
|
-
const
|
|
143
|
+
const PreferenceCard = ({ title, description, icon, image, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
|
|
144
|
+
const handleInputContainerClick = react.useCallback(() => {
|
|
150
145
|
if (!disabled && !loading) {
|
|
151
146
|
if (onClick) {
|
|
152
147
|
onClick();
|
|
@@ -159,11 +154,38 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
|
|
|
159
154
|
const handleInputClick = react.useCallback((event) => {
|
|
160
155
|
event.stopPropagation();
|
|
161
156
|
}, []);
|
|
162
|
-
return (jsxRuntime.
|
|
157
|
+
return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaPreferenceCard({
|
|
163
158
|
className,
|
|
164
159
|
disabled,
|
|
165
|
-
|
|
166
|
-
|
|
160
|
+
}), "overflow-hidden"), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsxRuntime.jsx("button", { "aria-label": `input-${title.toLowerCase().replace(/ /g, "-")}`, "aria-pressed": input.checked, className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputContainerClick, tabIndex: disabled ? -1 : 0, type: "button", children: jsxRuntime.jsxs(reactComponents.Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked), stopPropagation: true })) : null, input.type === "radio" ? (jsxRuntime.jsx(reactFormComponents.RadioItem, { checked: input.checked, disabled: disabled, onClick: handleInputClick, value: input.value })) : null, input.type === "toggle" ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), onClick: handleInputClick, toggled: input.checked })) : null] }) })) : null, jsxRuntime.jsxs("div", { className: "flex flex-1 px-4 py-3", children: [loading ? (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: jsxRuntime.jsx(reactComponents.SkeletonLines, { gap: 4, height: [11, 12], lines: 2, width: [128, 152] }) })] })) : (jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [icon ? (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsxRuntime.jsx(reactComponents.Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, image ? (jsxRuntime.jsx("div", { className: "flex-shrink-0", children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaIconBackground({ disabled }), disabled ? "" : image.backgroundColor || "bg-gray-100"), children: jsxRuntime.jsx("img", { alt: image.alt, className: "aspect-square h-8 w-8 rounded-md border border-neutral-200 object-contain", src: image.src }) }) })) : null, jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx(reactComponents.Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsxRuntime.jsx(reactComponents.Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] }), children] })), secondTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }) }));
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* PreferenceCardGroup allows multiple PreferenceCards to work together as a group.
|
|
165
|
+
*/
|
|
166
|
+
const PreferenceCardGroup = ({ cards, selectedValue, onSelectionChange, groupId, isRadioMode = false, disabled = false, loading = false, "data-testid": dataTestId, }) => {
|
|
167
|
+
if (isRadioMode) {
|
|
168
|
+
return (jsxRuntime.jsx(reactFormComponents.RadioGroup, { "data-testid": dataTestId, disabled: disabled, id: groupId, onChange: event => onSelectionChange(event.target.value), value: typeof selectedValue === "string" ? selectedValue : "", children: cards.map(card => (jsxRuntime.jsx(PreferenceCard, { disabled: disabled, ...card, input: {
|
|
169
|
+
type: "radio",
|
|
170
|
+
checked: selectedValue === card.id,
|
|
171
|
+
value: card.id,
|
|
172
|
+
}, loading: loading, onClick: () => {
|
|
173
|
+
if (!disabled && !loading) {
|
|
174
|
+
onSelectionChange(card.id);
|
|
175
|
+
}
|
|
176
|
+
} }, card.id))) }));
|
|
177
|
+
}
|
|
178
|
+
return (jsxRuntime.jsx("div", { className: "flex flex-col gap-2", "data-testid": dataTestId, id: groupId, children: cards.map(card => (jsxRuntime.jsx(PreferenceCard, { ...card, disabled: disabled, input: {
|
|
179
|
+
type: card.input?.type === "toggle" ? "toggle" : "checkbox",
|
|
180
|
+
checked: Array.isArray(selectedValue) ? selectedValue.includes(card.id) : false,
|
|
181
|
+
handleInputChange: () => {
|
|
182
|
+
const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
|
|
183
|
+
const newValues = currentValues.includes(card.id)
|
|
184
|
+
? currentValues.filter(v => v !== card.id)
|
|
185
|
+
: [...currentValues, card.id];
|
|
186
|
+
onSelectionChange(newValues);
|
|
187
|
+
},
|
|
188
|
+
}, loading: loading }, card.id))) }));
|
|
167
189
|
};
|
|
168
190
|
|
|
169
191
|
/*
|
|
@@ -176,3 +198,4 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
|
|
|
176
198
|
setupLibraryTranslations();
|
|
177
199
|
|
|
178
200
|
exports.PreferenceCard = PreferenceCard;
|
|
201
|
+
exports.PreferenceCardGroup = PreferenceCardGroup;
|
package/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { registerTranslations } from '@trackunit/i18n-library-translation';
|
|
3
3
|
import { Tooltip, SkeletonLines, Icon, Text, Tag } from '@trackunit/react-components';
|
|
4
|
-
import { Checkbox, RadioItem, ToggleSwitch } from '@trackunit/react-form-components';
|
|
4
|
+
import { Checkbox, RadioItem, ToggleSwitch, RadioGroup } from '@trackunit/react-form-components';
|
|
5
5
|
import { useCallback } from 'react';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
7
|
import { cvaMerge } from '@trackunit/css-class-variance-utilities';
|
|
@@ -65,18 +65,13 @@ const cvaPreferenceCard = cvaMerge(["rounded-lg", "border", "border-neutral-200"
|
|
|
65
65
|
clickable: true,
|
|
66
66
|
class: "cursor-not-allowed",
|
|
67
67
|
},
|
|
68
|
-
{
|
|
69
|
-
disabled: false,
|
|
70
|
-
clickable: true,
|
|
71
|
-
class: "focus:ring-primary-600 focus:border-primary-600 focus:outline-none focus:ring-1",
|
|
72
|
-
},
|
|
73
68
|
],
|
|
74
69
|
defaultVariants: {
|
|
75
70
|
disabled: false,
|
|
76
71
|
clickable: false,
|
|
77
72
|
},
|
|
78
73
|
});
|
|
79
|
-
const cvaInputCard = cvaMerge(["flex", "items-
|
|
74
|
+
const cvaInputCard = cvaMerge(["flex", "items-start", "px-4", "py-[21px]", "rounded-l-lg", "border", "border-transparent"], {
|
|
80
75
|
variants: {
|
|
81
76
|
disabled: {
|
|
82
77
|
true: "bg-neutral-50",
|
|
@@ -91,12 +86,12 @@ const cvaInputCard = cvaMerge(["flex", "items-center", "p-4"], {
|
|
|
91
86
|
{
|
|
92
87
|
disabled: false,
|
|
93
88
|
checked: true,
|
|
94
|
-
class: "bg-primary-50",
|
|
89
|
+
class: "bg-primary-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
|
|
95
90
|
},
|
|
96
91
|
{
|
|
97
92
|
disabled: false,
|
|
98
93
|
checked: false,
|
|
99
|
-
class: "bg-neutral-50",
|
|
94
|
+
class: "bg-neutral-50 focus:border focus:border-blue-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500",
|
|
100
95
|
},
|
|
101
96
|
],
|
|
102
97
|
defaultVariants: {
|
|
@@ -143,8 +138,8 @@ const cvaIconBackground = cvaMerge(["flex", "h-8", "w-8", "items-center", "justi
|
|
|
143
138
|
* with various states and visual treatments.
|
|
144
139
|
* It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
|
|
145
140
|
*/
|
|
146
|
-
const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
|
|
147
|
-
const
|
|
141
|
+
const PreferenceCard = ({ title, description, icon, image, input, firstTag, secondTag, disabled = false, loading = false, className, "data-testid": dataTestId, children, onClick, }) => {
|
|
142
|
+
const handleInputContainerClick = useCallback(() => {
|
|
148
143
|
if (!disabled && !loading) {
|
|
149
144
|
if (onClick) {
|
|
150
145
|
onClick();
|
|
@@ -157,11 +152,38 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
|
|
|
157
152
|
const handleInputClick = useCallback((event) => {
|
|
158
153
|
event.stopPropagation();
|
|
159
154
|
}, []);
|
|
160
|
-
return (
|
|
155
|
+
return (jsx("div", { className: twMerge(cvaPreferenceCard({
|
|
161
156
|
className,
|
|
162
157
|
disabled,
|
|
163
|
-
|
|
164
|
-
|
|
158
|
+
}), "overflow-hidden"), "data-testid": dataTestId, children: jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsx("button", { "aria-label": `input-${title.toLowerCase().replace(/ /g, "-")}`, "aria-pressed": input.checked, className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputContainerClick, tabIndex: disabled ? -1 : 0, type: "button", children: jsxs(Tooltip, { disabled: !input.tooltipText, label: input.tooltipText, placement: "top", children: [input.type === "checkbox" ? (jsx(Checkbox, { checked: input.checked, disabled: disabled, onChange: event => input.handleInputChange(event.target.checked), stopPropagation: true })) : null, input.type === "radio" ? (jsx(RadioItem, { checked: input.checked, disabled: disabled, onClick: handleInputClick, value: input.value })) : null, input.type === "toggle" ? (jsx(ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), onClick: handleInputClick, toggled: input.checked })) : null] }) })) : null, jsxs("div", { className: "flex flex-1 px-4 py-3", children: [loading ? (jsxs("div", { className: "flex grow items-center gap-3", children: [jsx("div", { className: "flex-shrink-0", children: jsx(SkeletonLines, { className: "rounded-md", height: 32, lines: 1, width: 32 }) }), jsx("div", { className: "min-w-0 flex-1", children: jsx(SkeletonLines, { gap: 4, height: [11, 12], lines: 2, width: [128, 152] }) })] })) : (jsxs("div", { className: "flex flex-1 flex-col", children: [jsxs("div", { className: "flex flex-shrink-0 items-center gap-2", children: [icon ? (jsx("div", { className: "flex-shrink-0", children: jsx("div", { className: twMerge(cvaIconBackground({ disabled }), disabled ? "" : icon.backgroundColor), children: jsx(Icon, { color: "white", name: icon.name, size: "small", type: "solid" }) }) })) : null, image ? (jsx("div", { className: "flex-shrink-0", children: jsx("div", { className: twMerge(cvaIconBackground({ disabled }), disabled ? "" : image.backgroundColor || "bg-gray-100"), children: jsx("img", { alt: image.alt, className: "aspect-square h-8 w-8 rounded-md border border-neutral-200 object-contain", src: image.src }) }) })) : null, jsxs("div", { className: "min-w-0 flex-1", children: [jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsx(Text, { className: cvaTitleCard({ disabled }), size: "medium", weight: "bold", children: title }), firstTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : firstTag.color, size: "small", children: firstTag.title })) : null] }) }), jsx(Text, { className: cvaDescriptionCard({ disabled }), size: "small", type: "p", children: description })] })] }), children] })), secondTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }) }));
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* PreferenceCardGroup allows multiple PreferenceCards to work together as a group.
|
|
163
|
+
*/
|
|
164
|
+
const PreferenceCardGroup = ({ cards, selectedValue, onSelectionChange, groupId, isRadioMode = false, disabled = false, loading = false, "data-testid": dataTestId, }) => {
|
|
165
|
+
if (isRadioMode) {
|
|
166
|
+
return (jsx(RadioGroup, { "data-testid": dataTestId, disabled: disabled, id: groupId, onChange: event => onSelectionChange(event.target.value), value: typeof selectedValue === "string" ? selectedValue : "", children: cards.map(card => (jsx(PreferenceCard, { disabled: disabled, ...card, input: {
|
|
167
|
+
type: "radio",
|
|
168
|
+
checked: selectedValue === card.id,
|
|
169
|
+
value: card.id,
|
|
170
|
+
}, loading: loading, onClick: () => {
|
|
171
|
+
if (!disabled && !loading) {
|
|
172
|
+
onSelectionChange(card.id);
|
|
173
|
+
}
|
|
174
|
+
} }, card.id))) }));
|
|
175
|
+
}
|
|
176
|
+
return (jsx("div", { className: "flex flex-col gap-2", "data-testid": dataTestId, id: groupId, children: cards.map(card => (jsx(PreferenceCard, { ...card, disabled: disabled, input: {
|
|
177
|
+
type: card.input?.type === "toggle" ? "toggle" : "checkbox",
|
|
178
|
+
checked: Array.isArray(selectedValue) ? selectedValue.includes(card.id) : false,
|
|
179
|
+
handleInputChange: () => {
|
|
180
|
+
const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
|
|
181
|
+
const newValues = currentValues.includes(card.id)
|
|
182
|
+
? currentValues.filter(v => v !== card.id)
|
|
183
|
+
: [...currentValues, card.id];
|
|
184
|
+
onSelectionChange(newValues);
|
|
185
|
+
},
|
|
186
|
+
}, loading: loading }, card.id))) }));
|
|
165
187
|
};
|
|
166
188
|
|
|
167
189
|
/*
|
|
@@ -173,4 +195,4 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
|
|
|
173
195
|
*/
|
|
174
196
|
setupLibraryTranslations();
|
|
175
197
|
|
|
176
|
-
export { PreferenceCard };
|
|
198
|
+
export { PreferenceCard, PreferenceCardGroup };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-compound-components",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.168",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"react": "19.0.0",
|
|
11
11
|
"tailwind-merge": "^2.0.0",
|
|
12
|
-
"@trackunit/css-class-variance-utilities": "1.7.
|
|
13
|
-
"@trackunit/react-form-components": "1.8.
|
|
14
|
-
"@trackunit/i18n-library-translation": "1.7.
|
|
15
|
-
"@trackunit/shared-utils": "1.9.
|
|
16
|
-
"@trackunit/ui-icons": "1.7.
|
|
17
|
-
"@trackunit/react-components": "1.10.
|
|
12
|
+
"@trackunit/css-class-variance-utilities": "1.7.115",
|
|
13
|
+
"@trackunit/react-form-components": "1.8.166",
|
|
14
|
+
"@trackunit/i18n-library-translation": "1.7.136",
|
|
15
|
+
"@trackunit/shared-utils": "1.9.115",
|
|
16
|
+
"@trackunit/ui-icons": "1.7.116",
|
|
17
|
+
"@trackunit/react-components": "1.10.91"
|
|
18
18
|
},
|
|
19
19
|
"module": "./index.esm.js",
|
|
20
20
|
"main": "./index.cjs.js",
|
|
@@ -20,6 +20,14 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
|
|
|
20
20
|
name: IconName;
|
|
21
21
|
backgroundColor: string;
|
|
22
22
|
};
|
|
23
|
+
/**
|
|
24
|
+
* Custom image to display instead of an icon
|
|
25
|
+
*/
|
|
26
|
+
image?: {
|
|
27
|
+
src: string;
|
|
28
|
+
alt: string;
|
|
29
|
+
backgroundColor?: string;
|
|
30
|
+
};
|
|
23
31
|
/**
|
|
24
32
|
* Input component to display in the card
|
|
25
33
|
*/
|
|
@@ -31,6 +39,7 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
|
|
|
31
39
|
} | {
|
|
32
40
|
type: "radio";
|
|
33
41
|
checked: boolean;
|
|
42
|
+
value: string;
|
|
34
43
|
tooltipText?: string;
|
|
35
44
|
};
|
|
36
45
|
/**
|
|
@@ -69,4 +78,4 @@ export interface PreferenceCardProps extends CommonProps, MappedOmit<VariantProp
|
|
|
69
78
|
* with various states and visual treatments.
|
|
70
79
|
* It is recommended to be primarily used as an input component, as it supports checkboxes, radio buttons and toggles.
|
|
71
80
|
*/
|
|
72
|
-
export declare const PreferenceCard: ({ title, description, icon, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => ReactNode;
|
|
81
|
+
export declare const PreferenceCard: ({ title, description, icon, image, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => ReactNode;
|
|
@@ -3,7 +3,7 @@ import { ReactElement } from "react";
|
|
|
3
3
|
import { PreferenceCardProps } from "./PreferenceCard";
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
|
-
component: ({ title, description, icon, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => import("react").ReactNode;
|
|
6
|
+
component: ({ title, description, icon, image, input, firstTag, secondTag, disabled, loading, className, "data-testid": dataTestId, children, onClick, }: PreferenceCardProps) => import("react").ReactNode;
|
|
7
7
|
args: {};
|
|
8
8
|
tags: string[];
|
|
9
9
|
parameters: {
|
|
@@ -9,7 +9,9 @@ export interface PreferenceCardGroupProps extends CommonProps {
|
|
|
9
9
|
/**
|
|
10
10
|
* Include your card data here to showcase multiple PreferenceCard components
|
|
11
11
|
*/
|
|
12
|
-
cards: Array<PreferenceCardProps
|
|
12
|
+
cards: Array<PreferenceCardProps & {
|
|
13
|
+
id: string;
|
|
14
|
+
}>;
|
|
13
15
|
/**
|
|
14
16
|
* The currently selected value(s)
|
|
15
17
|
*/
|
package/src/index.d.ts
CHANGED