@luscii-healthtech/web-ui 28.4.1 → 28.5.1
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/dist/components/TimelineCard/TimelineCard.d.ts +11 -3
- package/dist/index.development.js +18 -12
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { type FC } from "react";
|
|
1
|
+
import { type FC, type ReactNode } from "react";
|
|
2
2
|
import { IconKey } from "../Icons/types/IconProps.type";
|
|
3
3
|
type Props = {
|
|
4
4
|
title: string;
|
|
5
|
-
subtitle?:
|
|
5
|
+
subtitle?: ReactNode;
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* @deprecated use leadingIcon instead.
|
|
8
8
|
*/
|
|
9
9
|
icon?: {
|
|
10
10
|
url: string;
|
|
@@ -13,6 +13,14 @@ type Props = {
|
|
|
13
13
|
iconKey: IconKey;
|
|
14
14
|
url?: never;
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* The icon to render on the leading side of the card
|
|
18
|
+
*/
|
|
19
|
+
leadingIcon?: ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* The icon to render on the trailing side of the card
|
|
22
|
+
*/
|
|
23
|
+
trailingIcon?: ReactNode;
|
|
16
24
|
/**
|
|
17
25
|
* Copy to display the status of the card
|
|
18
26
|
*/
|
|
@@ -2425,7 +2425,7 @@ const Carousel = ({ slides, className, id }) => {
|
|
|
2425
2425
|
) : React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
2426
2426
|
};
|
|
2427
2427
|
|
|
2428
|
-
var css_248z$c = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-checkbox {\n outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n position: absolute;\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n border-color: #cccccc;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border-color:
|
|
2428
|
+
var css_248z$c = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-checkbox {\n outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n position: absolute;\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n border-color: #cccccc;\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n --tw-border-opacity: 1;\n border-color: rgb(155 44 44 / var(--tw-border-opacity));\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n width: 0.5rem;\n height: 0.5rem;\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n width: 0.5rem;\n height: 0.5rem;\n padding: 4px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n width: 10px;\n height: 10px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n opacity: 0.6;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n width: 56px;\n height: 28px;\n position: relative;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #d1d5db;\n border-radius: 16px;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n position: relative;\n display: block;\n content: \"\";\n height: 20px;\n width: 20px;\n top: 4px;\n left: 4px;\n background-color: white;\n border-radius: 50%;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa6;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n left: 32px;\n}";
|
|
2429
2429
|
styleInject(css_248z$c);
|
|
2430
2430
|
|
|
2431
2431
|
const CheckboxInner = (props) => {
|
|
@@ -6127,7 +6127,7 @@ const StatusIndicator = (props) => {
|
|
|
6127
6127
|
);
|
|
6128
6128
|
};
|
|
6129
6129
|
|
|
6130
|
-
const TimelineCard = ({ title, subtitle, icon, statusText, state = "default", disabled = false, onClick }) => {
|
|
6130
|
+
const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, statusText, state = "default", disabled = false, onClick }) => {
|
|
6131
6131
|
return React__namespace.default.createElement(
|
|
6132
6132
|
Stack,
|
|
6133
6133
|
{ axis: "x", width: "full", align: "center" },
|
|
@@ -6143,21 +6143,27 @@ const TimelineCard = ({ title, subtitle, icon, statusText, state = "default", di
|
|
|
6143
6143
|
}) },
|
|
6144
6144
|
React__namespace.default.createElement(
|
|
6145
6145
|
Stack,
|
|
6146
|
-
{ width: "full",
|
|
6147
|
-
statusText && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, statusText),
|
|
6146
|
+
{ width: "full", p: "m", axis: "x", justify: "between", align: "center" },
|
|
6148
6147
|
React__namespace.default.createElement(
|
|
6149
6148
|
Stack,
|
|
6150
|
-
{ gap: "
|
|
6151
|
-
|
|
6152
|
-
(icon === null || icon === void 0 ? void 0 : icon.iconKey) && React__namespace.default.createElement(Icon, { className: "ui-flex-shrink-0", name: icon.iconKey }),
|
|
6149
|
+
{ gap: "xs" },
|
|
6150
|
+
statusText && React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, statusText),
|
|
6153
6151
|
React__namespace.default.createElement(
|
|
6154
6152
|
Stack,
|
|
6155
|
-
|
|
6156
|
-
(
|
|
6157
|
-
|
|
6158
|
-
|
|
6153
|
+
{ gap: "m", axis: "x", align: "center" },
|
|
6154
|
+
(icon === null || icon === void 0 ? void 0 : icon.url) && React__namespace.default.createElement("img", { className: "ui-flex-shrink-0", width: 24, height: 24, src: icon.url }),
|
|
6155
|
+
(icon === null || icon === void 0 ? void 0 : icon.iconKey) && React__namespace.default.createElement(Icon, { className: "ui-flex-shrink-0", name: icon.iconKey }),
|
|
6156
|
+
leadingIcon,
|
|
6157
|
+
React__namespace.default.createElement(
|
|
6158
|
+
Stack,
|
|
6159
|
+
null,
|
|
6160
|
+
(state === "bold" || state === "highlighted") && React__namespace.default.createElement(Title, { type: "xs" }, title),
|
|
6161
|
+
state === "default" && React__namespace.default.createElement(Text, { variant: "base", color: "slate-500" }, title),
|
|
6162
|
+
typeof subtitle === "string" ? React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, subtitle) : subtitle
|
|
6163
|
+
)
|
|
6159
6164
|
)
|
|
6160
|
-
)
|
|
6165
|
+
),
|
|
6166
|
+
trailingIcon
|
|
6161
6167
|
)
|
|
6162
6168
|
)
|
|
6163
6169
|
),
|