@trackunit/react-compound-components 1.7.15 → 1.7.19

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
@@ -65,7 +65,7 @@ const setupLibraryTranslations = () => {
65
65
  *
66
66
  */
67
67
  const ConfirmationDialogModal = ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }) => {
68
- return (jsxRuntime.jsxs(reactModal.Modal, { ...modalProps, className: "max-w-xl", children: [jsxRuntime.jsx(reactComponents.CardHeader, { id: "dialogTitle", heading: title, headingVariant: "secondary", onClose: modalProps.close }), jsxRuntime.jsx(reactComponents.CardBody, { className: "bg-secondary-50", id: "dialogDesc", children: message }), jsxRuntime.jsxs(reactComponents.CardFooter, { className: "bg-secondary-50", hideSeparator: true, children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "secondaryAction", onClick: handleSecondaryActionClick, variant: "ghost-neutral", children: secondaryActionLabel }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }));
68
+ return (jsxRuntime.jsxs(reactModal.Modal, { ...modalProps, className: "max-w-xl", children: [jsxRuntime.jsx(reactComponents.CardHeader, { id: "dialogTitle", heading: title, headingVariant: "secondary", onClose: modalProps.close }), jsxRuntime.jsx(reactComponents.CardBody, { className: "bg-neutral-50", id: "dialogDesc", children: message }), jsxRuntime.jsxs(reactComponents.CardFooter, { className: "bg-neutral-50", hideSeparator: true, children: [jsxRuntime.jsx(reactComponents.Button, { dataTestId: "secondaryAction", onClick: handleSecondaryActionClick, variant: "ghost-neutral", children: secondaryActionLabel }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }));
69
69
  };
70
70
 
71
71
  /**
@@ -363,7 +363,7 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
363
363
  className,
364
364
  disabled,
365
365
  clickable: !!(onClick || input),
366
- }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxRuntime.jsxs("div", { className: "flex items-stretch divide-x divide-gray-200", children: [input ? (jsxRuntime.jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, 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) })) : null, input.type === "radio" ? jsxRuntime.jsx(reactFormComponents.RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxRuntime.jsxs("div", { className: "flex grow 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, { height: [11, 12], lines: 2, margin: "4px 0", width: [128, 152] }) })] })) : (jsxRuntime.jsxs("div", { className: "flex grow items-center gap-3", 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, 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 })] })] })), secondTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
366
+ }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxRuntime.jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsxRuntime.jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, 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) })) : null, input.type === "radio" ? jsxRuntime.jsx(reactFormComponents.RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxRuntime.jsxs("div", { className: "flex grow 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 grow items-center gap-3", 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, 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 })] })] })), secondTag ? (jsxRuntime.jsx(reactComponents.Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
367
367
  };
368
368
 
369
369
  /*
package/index.esm.js CHANGED
@@ -63,7 +63,7 @@ const setupLibraryTranslations = () => {
63
63
  *
64
64
  */
65
65
  const ConfirmationDialogModal = ({ title, message, handlePrimaryActionClick, handleSecondaryActionClick, secondaryActionLabel, primaryActionType, primaryActionLabel, ...modalProps }) => {
66
- return (jsxs(Modal, { ...modalProps, className: "max-w-xl", children: [jsx(CardHeader, { id: "dialogTitle", heading: title, headingVariant: "secondary", onClose: modalProps.close }), jsx(CardBody, { className: "bg-secondary-50", id: "dialogDesc", children: message }), jsxs(CardFooter, { className: "bg-secondary-50", hideSeparator: true, children: [jsx(Button, { dataTestId: "secondaryAction", onClick: handleSecondaryActionClick, variant: "ghost-neutral", children: secondaryActionLabel }), jsx(Button, { dataTestId: "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }));
66
+ return (jsxs(Modal, { ...modalProps, className: "max-w-xl", children: [jsx(CardHeader, { id: "dialogTitle", heading: title, headingVariant: "secondary", onClose: modalProps.close }), jsx(CardBody, { className: "bg-neutral-50", id: "dialogDesc", children: message }), jsxs(CardFooter, { className: "bg-neutral-50", hideSeparator: true, children: [jsx(Button, { dataTestId: "secondaryAction", onClick: handleSecondaryActionClick, variant: "ghost-neutral", children: secondaryActionLabel }), jsx(Button, { dataTestId: "primaryAction", onClick: handlePrimaryActionClick, variant: primaryActionType, children: primaryActionLabel })] })] }));
67
67
  };
68
68
 
69
69
  /**
@@ -361,7 +361,7 @@ const PreferenceCard = ({ title, description, icon, input, firstTag, secondTag,
361
361
  className,
362
362
  disabled,
363
363
  clickable: !!(onClick || input),
364
- }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxs("div", { className: "flex items-stretch divide-x divide-gray-200", children: [input ? (jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, 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) })) : null, input.type === "radio" ? jsx(RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsx(ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxs("div", { className: "flex grow 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, { height: [11, 12], lines: 2, margin: "4px 0", width: [128, 152] }) })] })) : (jsxs("div", { className: "flex grow items-center gap-3", 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, 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 })] })] })), secondTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
364
+ }), "overflow-hidden"), "data-testid": dataTestId, onClick: handleCardClick, tabIndex: onClick || input ? (disabled ? -1 : 0) : undefined, children: [jsxs("div", { className: "flex items-stretch divide-x divide-neutral-200", children: [input ? (jsx("div", { className: cvaInputCard({ disabled, checked: input.checked }), onClick: handleInputClick, 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) })) : null, input.type === "radio" ? jsx(RadioItem, { disabled: disabled, value: title }) : null, input.type === "toggle" ? (jsx(ToggleSwitch, { disabled: disabled, onChange: toggled => input.handleInputChange(toggled), toggled: input.checked })) : null] }) })) : null, jsxs("div", { className: "flex grow 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 grow items-center gap-3", 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, 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 })] })] })), secondTag ? (jsx(Tag, { className: "shrink-0", color: disabled ? "unknown" : secondTag.color, size: "medium", children: secondTag.title })) : null] })] }), children] }));
365
365
  };
366
366
 
367
367
  /*
package/package.json CHANGED
@@ -1,23 +1,23 @@
1
1
  {
2
2
  "name": "@trackunit/react-compound-components",
3
- "version": "1.7.15",
3
+ "version": "1.7.19",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "dependencies": {
7
7
  "react": "19.0.0",
8
8
  "tailwind-merge": "^2.0.0",
9
9
  "react-image-gallery": "1.3.0",
10
- "@trackunit/react-core-contexts-api": "1.8.10",
11
- "@trackunit/react-core-hooks": "1.7.11",
12
- "@trackunit/react-components": "1.9.15",
13
- "@trackunit/react-modal": "1.8.15",
14
- "@trackunit/css-class-variance-utilities": "1.7.8",
15
- "@trackunit/date-and-time-utils": "1.7.8",
16
- "@trackunit/react-form-components": "1.8.15",
17
- "@trackunit/i18n-library-translation": "1.7.12",
18
- "@trackunit/react-test-setup": "1.4.8",
19
- "@trackunit/shared-utils": "1.9.8",
20
- "@trackunit/ui-icons": "1.7.10"
10
+ "@trackunit/react-core-contexts-api": "1.8.13",
11
+ "@trackunit/react-core-hooks": "1.7.14",
12
+ "@trackunit/react-components": "1.9.19",
13
+ "@trackunit/react-modal": "1.8.19",
14
+ "@trackunit/css-class-variance-utilities": "1.7.11",
15
+ "@trackunit/date-and-time-utils": "1.7.11",
16
+ "@trackunit/react-form-components": "1.8.19",
17
+ "@trackunit/i18n-library-translation": "1.7.15",
18
+ "@trackunit/react-test-setup": "1.4.11",
19
+ "@trackunit/shared-utils": "1.9.11",
20
+ "@trackunit/ui-icons": "1.7.13"
21
21
  },
22
22
  "engines": {
23
23
  "node": ">=22.x",