@luscii-healthtech/web-ui 35.7.0 → 35.7.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/Tag/Tag.d.ts +2 -1
- package/dist/index.development.js +18 -18
- 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-tailwind.css +981 -377
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ type Size = "base" | "small";
|
|
|
4
4
|
interface TagPropsShared extends React.ComponentPropsWithoutRef<"span"> {
|
|
5
5
|
colorTheme?: Color;
|
|
6
6
|
size?: Size;
|
|
7
|
+
variant?: "flat" | "bordered";
|
|
7
8
|
className?: string;
|
|
8
9
|
}
|
|
9
10
|
interface PropsWithChildren extends TagPropsShared {
|
|
@@ -21,5 +22,5 @@ interface PropsWithText extends TagPropsShared {
|
|
|
21
22
|
text: string;
|
|
22
23
|
}
|
|
23
24
|
export type Props = PropsWithChildren | PropsWithText;
|
|
24
|
-
export declare const Tag: ({ text, colorTheme, className, size, children, ...rest }: Props) => React.JSX.Element;
|
|
25
|
+
export declare const Tag: ({ text, colorTheme, className, size, variant, children, ...rest }: Props) => React.JSX.Element;
|
|
25
26
|
export {};
|
|
@@ -2277,24 +2277,24 @@ const Modal = (props) => {
|
|
|
2277
2277
|
};
|
|
2278
2278
|
Modal.setAppElement = ReactModal__default.default.setAppElement;
|
|
2279
2279
|
|
|
2280
|
-
const textColor = {
|
|
2281
|
-
red: "red",
|
|
2282
|
-
amber: "amber",
|
|
2283
|
-
green: "green",
|
|
2284
|
-
gray: "base",
|
|
2285
|
-
// Blue must be 800 here to pass the contrast test
|
|
2286
|
-
blue: "blue-800"
|
|
2287
|
-
};
|
|
2288
2280
|
const Tag = (_a) => {
|
|
2289
|
-
var { text, colorTheme = "gray", className, size = "base", children } = _a, rest = __rest(_a, ["text", "colorTheme", "className", "size", "children"]);
|
|
2281
|
+
var { text, colorTheme = "gray", className, size = "base", variant = "flat", children } = _a, rest = __rest(_a, ["text", "colorTheme", "className", "size", "variant", "children"]);
|
|
2290
2282
|
return React__namespace.default.createElement(
|
|
2291
2283
|
"div",
|
|
2292
|
-
Object.assign({ className: classNames__default.default("ui-inline-
|
|
2293
|
-
"ui-bg-
|
|
2294
|
-
"ui-bg-
|
|
2295
|
-
"ui-bg-
|
|
2296
|
-
"ui-bg-
|
|
2297
|
-
"ui-bg-
|
|
2284
|
+
Object.assign({ className: classNames__default.default("ui-inline-flex ui-items-center ui-rounded-lg ui-px-2 ui-py-1", className, {
|
|
2285
|
+
"ui-bg-negative-background ui-text-on-negative": colorTheme === "red",
|
|
2286
|
+
"ui-bg-warning-background ui-text-on-warning": colorTheme === "amber",
|
|
2287
|
+
"ui-bg-positive-background ui-text-on-positive": colorTheme === "green",
|
|
2288
|
+
"ui-bg-neutral-background ui-text-on-surface": colorTheme === "gray",
|
|
2289
|
+
"ui-bg-primary-background ui-text-primary": colorTheme === "blue"
|
|
2290
|
+
}, {
|
|
2291
|
+
/**
|
|
2292
|
+
* Adding a border adds it to the outside of an element. This means that the border will
|
|
2293
|
+
* increase the width and height of the element. To have the "flat" and "bordered"
|
|
2294
|
+
* variants have the same dimensions, we need to adjust the padding to account for
|
|
2295
|
+
* the border width.
|
|
2296
|
+
*/
|
|
2297
|
+
"ui-border ui-border-current ui-px-[calc(theme('spacing.2')-1px)] ui-py-[calc(theme('spacing.1')-1px)]": variant === "bordered"
|
|
2298
2298
|
}) }, rest),
|
|
2299
2299
|
React__namespace.default.createElement(
|
|
2300
2300
|
Text,
|
|
@@ -2303,7 +2303,7 @@ const Tag = (_a) => {
|
|
|
2303
2303
|
* Ensures the `small` size, with smaller text, is the same height as the `base` size.
|
|
2304
2304
|
*/
|
|
2305
2305
|
className: "ui-leading-5",
|
|
2306
|
-
color:
|
|
2306
|
+
color: "current",
|
|
2307
2307
|
variant: size === "small" ? "sm-strong" : "base"
|
|
2308
2308
|
},
|
|
2309
2309
|
text !== null && text !== void 0 ? text : children
|
|
@@ -2591,7 +2591,7 @@ const Carousel = ({ slides, className, id }) => {
|
|
|
2591
2591
|
) : React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
2592
2592
|
};
|
|
2593
2593
|
|
|
2594
|
-
var css_248z$b = "/**\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 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(
|
|
2594
|
+
var css_248z$b = "/**\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 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(153 27 27 / 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 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}";
|
|
2595
2595
|
styleInject(css_248z$b);
|
|
2596
2596
|
|
|
2597
2597
|
const CheckboxInner = (props) => {
|
|
@@ -2783,7 +2783,7 @@ const HelperAndErrorText = (props) => {
|
|
|
2783
2783
|
);
|
|
2784
2784
|
};
|
|
2785
2785
|
|
|
2786
|
-
var css_248z$a = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n --tw-border-opacity: 1;\n border-color: rgb(30 64 175 / var(--tw-border-opacity));\n}\n.ui-radio-form-field-label input[type=\"radio\"]:disabled + .ui-radio-circle {\n opacity: 0.5;\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n --tw-border-opacity: 1;\n border-color: rgb(
|
|
2786
|
+
var css_248z$a = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n --tw-border-opacity: 1;\n border-color: rgb(30 64 175 / var(--tw-border-opacity));\n}\n.ui-radio-form-field-label input[type=\"radio\"]:disabled + .ui-radio-circle {\n opacity: 0.5;\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n --tw-border-opacity: 1;\n border-color: rgb(185 28 28 / var(--tw-border-opacity));\n outline-color: #FFF1F1;\n}\n\n.ui-radio-form-field-label\n input[type=\"radio\"]:checked\n + .ui-radio-circle\n .ui-radio-inner-circle {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n";
|
|
2787
2787
|
styleInject(css_248z$a);
|
|
2788
2788
|
|
|
2789
2789
|
const StyledRadio = React__namespace.default.forwardRef((props, ref) => {
|