@trackunit/react-compound-components 1.9.11 → 1.9.14
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 +1 -1
- package/index.esm.js +1 -1
- package/package.json +7 -7
package/index.cjs.js
CHANGED
|
@@ -157,7 +157,7 @@ const PreferenceCard = ({ title, description, icon, image, input, firstTag, seco
|
|
|
157
157
|
return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaPreferenceCard({
|
|
158
158
|
className,
|
|
159
159
|
disabled,
|
|
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, {
|
|
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, { 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, { color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }) }));
|
|
161
161
|
};
|
|
162
162
|
|
|
163
163
|
/**
|
package/index.esm.js
CHANGED
|
@@ -155,7 +155,7 @@ const PreferenceCard = ({ title, description, icon, image, input, firstTag, seco
|
|
|
155
155
|
return (jsx("div", { className: twMerge(cvaPreferenceCard({
|
|
156
156
|
className,
|
|
157
157
|
disabled,
|
|
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, {
|
|
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, { 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, { color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }) }));
|
|
159
159
|
};
|
|
160
160
|
|
|
161
161
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-compound-components",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.14",
|
|
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.9.
|
|
13
|
-
"@trackunit/react-form-components": "1.10.
|
|
14
|
-
"@trackunit/i18n-library-translation": "1.9.
|
|
15
|
-
"@trackunit/shared-utils": "1.11.
|
|
16
|
-
"@trackunit/ui-icons": "1.9.
|
|
17
|
-
"@trackunit/react-components": "1.
|
|
12
|
+
"@trackunit/css-class-variance-utilities": "1.9.10",
|
|
13
|
+
"@trackunit/react-form-components": "1.10.14",
|
|
14
|
+
"@trackunit/i18n-library-translation": "1.9.13",
|
|
15
|
+
"@trackunit/shared-utils": "1.11.10",
|
|
16
|
+
"@trackunit/ui-icons": "1.9.10",
|
|
17
|
+
"@trackunit/react-components": "1.13.0"
|
|
18
18
|
},
|
|
19
19
|
"module": "./index.esm.js",
|
|
20
20
|
"main": "./index.cjs.js",
|