@luscii-healthtech/web-ui 2.20.5 → 2.22.0
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/Form/form.types.d.ts +2 -1
- package/dist/components/Timeline/TimelineStep.d.ts +2 -7
- package/dist/types/general.types.d.ts +1 -0
- package/dist/web-ui-tailwind.css +5 -1
- package/dist/web-ui.cjs.development.js +14 -12
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.js +14 -12
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ import { InputProps } from "../Input/Input";
|
|
|
4
4
|
import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
|
|
5
5
|
import { SelectProps } from "../Select/SelectV2";
|
|
6
6
|
import { ImagePickerProps } from "../ImagePicker/ImagePicker";
|
|
7
|
+
import { PartialProperties } from "../../types/general.types";
|
|
7
8
|
export declare type AllowedTextInputTypes = Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
|
|
8
9
|
export interface GenericFormProps<TFieldValues extends FieldValues> {
|
|
9
10
|
fields: FormFieldProps<TFieldValues>[];
|
|
@@ -41,7 +42,7 @@ export interface FormFieldSelectProps extends FormFieldGenericProps<SelectProps>
|
|
|
41
42
|
type: "select";
|
|
42
43
|
fieldProps: SelectProps;
|
|
43
44
|
}
|
|
44
|
-
declare type ImagePickerFieldProps = Omit<ImagePickerProps, "name"
|
|
45
|
+
declare type ImagePickerFieldProps = PartialProperties<Omit<ImagePickerProps, "name">, "handleChange">;
|
|
45
46
|
export interface FormFieldImagePickerProps extends FormFieldGenericProps<ImagePickerFieldProps> {
|
|
46
47
|
type: "imagePicker";
|
|
47
48
|
fieldProps: ImagePickerFieldProps;
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export interface TimelineStepProps {
|
|
3
3
|
key: string | number;
|
|
4
|
-
type?: "wide" | "base";
|
|
4
|
+
type?: "wide" | "base" | "withoutDot" | "emptyDot";
|
|
5
5
|
content: React.ReactNode;
|
|
6
6
|
}
|
|
7
|
-
export declare const TimelineStep: {
|
|
8
|
-
({ content, type, }: TimelineStepProps): JSX.Element;
|
|
9
|
-
defaultProps: {
|
|
10
|
-
type: "wide" | "base" | undefined;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
7
|
+
export declare const TimelineStep: ({ content, type, }: TimelineStepProps) => JSX.Element;
|
package/dist/web-ui-tailwind.css
CHANGED
|
@@ -1080,6 +1080,10 @@ video {
|
|
|
1080
1080
|
border-width: 2px;
|
|
1081
1081
|
}
|
|
1082
1082
|
|
|
1083
|
+
.border-4 {
|
|
1084
|
+
border-width: 4px;
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1083
1087
|
.border {
|
|
1084
1088
|
border-width: 1px;
|
|
1085
1089
|
}
|
|
@@ -1296,7 +1300,7 @@ video {
|
|
|
1296
1300
|
height: 0.375rem;
|
|
1297
1301
|
}
|
|
1298
1302
|
|
|
1299
|
-
.
|
|
1303
|
+
.first\:h-0:first-child {
|
|
1300
1304
|
height: 0;
|
|
1301
1305
|
}
|
|
1302
1306
|
|
|
@@ -2350,7 +2350,7 @@ var CenteredHero = function CenteredHero(_ref) {
|
|
|
2350
2350
|
})));
|
|
2351
2351
|
};
|
|
2352
2352
|
|
|
2353
|
-
var css_248z$8 = ".cweb-checkbox {\n outline: none;\n
|
|
2353
|
+
var css_248z$8 = ".cweb-checkbox {\n outline: none;\n}\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\n.cweb-checkbox.type-regular .cweb-checkbox-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n border: 1px solid #cccccc;\n border-radius: 4px;\n}\n\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n border: 1px solid #ff6266;\n}\n\n.cweb-checkbox.type-regular .cweb-checkbox-icon {\n display: block;\n}\n\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n border-color: #0074dd;\n}\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\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\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\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\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\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\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa6;\n}\n\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n left: 32px;\n}\n";
|
|
2354
2354
|
styleInject(css_248z$8);
|
|
2355
2355
|
|
|
2356
2356
|
var Checkbox = function Checkbox(_ref) {
|
|
@@ -2445,7 +2445,7 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
2445
2445
|
onFocus: handleFocus,
|
|
2446
2446
|
onChange: handleChange
|
|
2447
2447
|
}), /*#__PURE__*/React__default.createElement("span", {
|
|
2448
|
-
className: classNames("cweb-checkbox-icon-container",
|
|
2448
|
+
className: classNames("cweb-checkbox-icon-container", {
|
|
2449
2449
|
"bg-primary": checked || indeterminate,
|
|
2450
2450
|
"bg-white": !checked && !indeterminate,
|
|
2451
2451
|
"hover:bg-primary-dark": checked || indeterminate,
|
|
@@ -6071,20 +6071,22 @@ var TimelineStep = function TimelineStep(_ref) {
|
|
|
6071
6071
|
var _classNames;
|
|
6072
6072
|
|
|
6073
6073
|
var content = _ref.content,
|
|
6074
|
-
type = _ref.type
|
|
6074
|
+
_ref$type = _ref.type,
|
|
6075
|
+
type = _ref$type === void 0 ? "base" : _ref$type;
|
|
6075
6076
|
var isWideStep = type === "wide";
|
|
6076
6077
|
var borderClassNames = "ml-4 pl-6 border-blue-800 border-l-2";
|
|
6077
6078
|
var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
|
|
6078
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
6079
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isWideStep && /*#__PURE__*/React__default.createElement("div", {
|
|
6080
|
+
className: classNames(borderClassNames, "h-4 first:h-0")
|
|
6081
|
+
}), /*#__PURE__*/React__default.createElement("div", {
|
|
6079
6082
|
className: containerClassNames
|
|
6080
|
-
}, content,
|
|
6081
|
-
className: "rounded-lg
|
|
6082
|
-
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
}
|
|
6086
|
-
|
|
6087
|
-
type: "base"
|
|
6083
|
+
}, content, /*#__PURE__*/React__default.createElement("span", {
|
|
6084
|
+
className: classNames("rounded-lg h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px", {
|
|
6085
|
+
hidden: ["wide", "withoutDot"].includes(type),
|
|
6086
|
+
"bg-blue-800": "base" === type,
|
|
6087
|
+
"bg-white border-blue-800 border-4": "emptyDot" === type
|
|
6088
|
+
})
|
|
6089
|
+
})));
|
|
6088
6090
|
};
|
|
6089
6091
|
|
|
6090
6092
|
var Timeline = function Timeline(props) {
|