@uxf/ui 11.27.1 → 11.28.1

package/button/button.stories.js

@@ -33,7 +33,7 @@ function Basic() {
     // eslint-disable-next-line no-console
     const onClick = console.log;
     const gridColumnsCount = config.variants.length * config.sizes.length + 1;
-    const gridTemplateColumns = `repeat(${gridColumnsCount}, 100px)`;
+    const gridTemplateColumns = `repeat(${gridColumnsCount}, 180px)`;
     return (react_1.default.createElement("div", { className: "p-4" },
         react_1.default.createElement("div", { className: "grid gap-3 p-4", style: { gridTemplateColumns } },
             react_1.default.createElement("div", null),
@@ -44,13 +44,15 @@ function Basic() {
             config.variants.flatMap((variant) => config.sizes.map((size) => (react_1.default.createElement("div", { key: variant, className: "text-center text-xs text-gray-400" },
                 "size=",
                 size))))),
-        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "bg-[#1F2A37] dark:bg-white" : undefined, key: color },
+        config.colors.map((color) => (react_1.default.createElement("div", { className: color === "inverted" ? "min-w-fit bg-[#1F2A37] dark:bg-white" : undefined, key: color },
             react_1.default.createElement("div", { className: "grid gap-3 py-2", style: { gridTemplateColumns } },
                 react_1.default.createElement("div", { className: "flex items-center text-center text-xs text-gray-400" },
                     "color=",
                     color),
-                config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "flex items-center justify-center" },
-                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Button")))))))))))));
+                config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "flex items-center justify-center gap-2" },
+                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant }, "Button"),
+                    react_1.default.createElement(button_1.Button, { color: color, onClick: onClick, size: size, variant: variant, isIconButton: true },
+                        react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation" }))))))))))))));
 }
 exports.Basic = Basic;
 function Default() {

package/components.d.ts

@@ -36,6 +36,7 @@ import * as loaderStories from "./loader/loader.stories";
 import * as lozengeStories from "./lozenge/lozenge.stories";
 import * as messageStories from "./message/message.stories";
 import * as modalStories from "./modal/modal.stories";
+import * as modalDialogStories from "./modal-dialog/modal-dialog.stories";
 import * as multiComboboxStories from "./multi-combobox/multi-combobox.stories";
 import * as multiSelectStories from "./multi-select/multi-select.stories";
 import * as paginationStories from "./pagination/pagination.stories";
@@ -206,6 +207,10 @@ export declare const components: {
         readonly title: "Modal";
         readonly stories: typeof modalStories;
     };
+    readonly "modal-dialog": {
+        readonly title: "ModalDialog";
+        readonly stories: typeof modalDialogStories;
+    };
     readonly "multi-combobox": {
         readonly title: "MultiCombobox";
         readonly stories: typeof multiComboboxStories;

package/components.js

@@ -63,6 +63,7 @@ const loaderStories = __importStar(require("./loader/loader.stories"));
 const lozengeStories = __importStar(require("./lozenge/lozenge.stories"));
 const messageStories = __importStar(require("./message/message.stories"));
 const modalStories = __importStar(require("./modal/modal.stories"));
+const modalDialogStories = __importStar(require("./modal-dialog/modal-dialog.stories"));
 const multiComboboxStories = __importStar(require("./multi-combobox/multi-combobox.stories"));
 const multiSelectStories = __importStar(require("./multi-select/multi-select.stories"));
 const paginationStories = __importStar(require("./pagination/pagination.stories"));
@@ -233,6 +234,10 @@ exports.components = {
         title: "Modal",
         stories: modalStories
     },
+    "modal-dialog": {
+        title: "ModalDialog",
+        stories: modalDialogStories
+    },
     "multi-combobox": {
         title: "MultiCombobox",
         stories: multiComboboxStories

package/css/button.css

@@ -3,8 +3,8 @@
     --uxf-button-height: theme("inputSize.default");
     --uxf-button-border-radius: theme("borderRadius.md");
     --uxf-button-font-size: theme("fontSize.sm");
-    --uxf-button-icon-size: theme("spacing.6");
-    --uxf-button-loading-size: theme("spacing.6");
+    --uxf-button-icon-size: theme("spacing.5");
+    --uxf-button-loading-size: theme("spacing.5");
     --uxf-button-px: theme("spacing.4");
     --uxf-button-border-color: initial;
     --uxf-button-background-color: initial;
@@ -18,6 +18,9 @@
 }
 
 .uxf-button {
+    --i-h: var(--uxf-button-icon-size);
+    --i-w: var(--uxf-button-icon-size);
+
     align-items: center;
     background-color: var(--uxf-button-background-color);
     border-color: var(--uxf-button-border-color);
@@ -44,11 +47,6 @@
         background-color: var(--uxf-button-background-color-hover);
     }
 
-    .uxf-icon {
-        height: var(--uxf-button-icon-size);
-        width: var(--uxf-button-icon-size);
-    }
-
     &__text {
         @apply truncate;
     }
@@ -60,6 +58,7 @@
     }
 
     &--icon-button {
+        flex-shrink: 0;
         padding: 0;
         width: var(--uxf-button-height);
     }
@@ -112,12 +111,16 @@
     &--size-lg {
         --uxf-button-font-size: theme("fontSize.base");
         --uxf-button-height: theme("inputSize.lg");
+        --uxf-button-icon-size: theme("spacing.6");
+        --uxf-button-loading-size: theme("spacing.6");
     }
 
     &--size-xl {
         --uxf-button-px: theme("spacing.6");
         --uxf-button-font-size: theme("fontSize.base");
         --uxf-button-height: theme("inputSize.xl");
+        --uxf-button-icon-size: theme("spacing.7");
+        --uxf-button-loading-size: theme("spacing.7");
     }
 
     /* VARIANTS */
@@ -169,6 +172,7 @@
 
     &--variant-secondary {
         --uxf-button-background-color-hover: var(--uxf-color-base-surface-main-hover);
+        --uxf-button-background-color: var(--uxf-color-base-surface-main);
 
         border-style: solid;
         border-width: 1px;
@@ -201,15 +205,12 @@
         &.uxf-button--color-inverted {
             --uxf-button-border-color: var(--uxf-color-base-border-inverted);
             --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color-hover: #ffffff1f;
+            --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
+            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
 
             &.uxf-button--is-disabled {
-                --uxf-button-border-color: var(--uxf-color-base-surface-disabled);
-                --uxf-button-background-color: var(--uxf-color-base-surface-disabled);
-            }
-
-            :root .dark & {
-                --uxf-button-background-color-hover: #d2d6db2f;
+                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
+                --uxf-button-background-color: var(--uxf-color-base-surface-inverted-main);
             }
         }
 
@@ -245,14 +246,12 @@
             --uxf-button-text-color: var(--uxf-color-info-text);
         }
 
-        /** TODO @vejvis - UX musí doladit inverted button... teď je to strašnej hack */
         &.uxf-button--color-inverted {
             --uxf-button-text-color: var(--uxf-color-base-text-inverted-high-emphasis);
-            --uxf-button-background-color-hover: #ffffff1f;
+            --uxf-button-background-color-hover: var(--uxf-color-base-surface-inverted-main-hover);
 
-            :root .dark & {
-                --uxf-button-background-color-hover: #d2d6db2f;
-                --uxf-button-text-color: #d2d6db;
+            &.uxf-button--is-disabled {
+                --uxf-button-text-color: var(--uxf-color-base-text-inverted-disabled);
             }
         }
 

package/css/colors.css

@@ -6,9 +6,14 @@
     --uxf-color-base-surface-main-hover: #f3f4f6;
     --uxf-color-base-surface-input-disabled: #f3f4f6;
     --uxf-color-base-surface-disabled: #d2d6db;
+    --uxf-color-base-surface-inverted-main: #ffffff14;
+    --uxf-color-base-surface-inverted-main-hover: #ffffff29;
     --uxf-color-base-text-disabled: #9da4ae;
     --uxf-color-base-text-high-emphasis: #111927;
+    --uxf-color-base-text-low-emphasis: #4d5761;
     --uxf-color-base-text-inverted-high-emphasis: #fff;
+    --uxf-color-base-text-inverted-low-emphasis: #fffc;
+    --uxf-color-base-text-inverted-disabled: #ffffffb3;
 
     /** primary */
     --uxf-color-primary-surface-default: #155dee;
@@ -46,9 +51,14 @@
         --uxf-color-base-surface-main-hover: #1f2a37;
         --uxf-color-base-surface-input-disabled: #4d5761;
         --uxf-color-base-surface-disabled: #d2d6db;
+        --uxf-color-base-surface-inverted-main: #20293914;
+        --uxf-color-base-surface-inverted-main-hover: #20293929;
         --uxf-color-base-text-disabled: #ffffff80;
         --uxf-color-base-text-high-emphasis: #fff;
+        --uxf-color-base-text-low-emphasis: #ffffffbf;
         --uxf-color-base-text-inverted-high-emphasis: #111927;
+        --uxf-color-base-text-inverted-low-emphasis: #202939cc;
+        --uxf-color-base-text-inverted-disabled: #202939b3;
 
         /** primary */
         --uxf-color-primary-surface-default: #518bff;

package/css/icon.css

@@ -1,11 +1,29 @@
 .uxf-icon {
-    @apply h-[var(--i-h)] w-[var(--i-w)] shrink-0;
+    flex-shrink: 0;
+    height: var(--i-h);
+    width: var(--i-w);
 
-    :root .dark & {
-        color: theme("colors.white");
+    & > use {
+        pointer-events: none;
     }
 
-    & > use {
-        @apply pointer-events-none;
+    &--color-default {
+        color: var(--uxf-color-base-text-high-emphasis);
+    }
+
+    &--color-positive {
+        color: var(--uxf-color-positive-text);
+    }
+
+    &--color-negative {
+        color: var(--uxf-color-negative-text);
+    }
+
+    &--color-warning {
+        color: var(--uxf-color-warning-text);
+    }
+
+    &--color-info {
+        color: var(--uxf-color-info-text);
     }
 }

package/css/modal-dialog.css

@@ -0,0 +1,38 @@
+.uxf-modal-dialog {
+    background-color: var(--uxf-color-base-surface-main);
+    display: flex;
+    flex-direction: column;
+    font-size: var(--uxf-typo-main-size);
+    gap: theme("spacing.3");
+    line-height: var(--uxf-typo-main-line-height);
+    padding: theme("spacing.4");
+
+    &__icon {
+        flex-shrink: 0;
+        height: theme("spacing.5");
+        transform: translateY(2px);
+        width: theme("spacing.5");
+    }
+
+    &__header {
+        align-items: flex-start;
+        display: flex;
+        gap: theme("spacing.2");
+    }
+
+    &__title {
+        color: var(--uxf-color-base-text-high-emphasis);
+        font-weight: theme("fontWeight.medium");
+    }
+
+    &__text {
+        color: var(--uxf-color-base-text-low-emphasis);
+    }
+
+    &__footer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: theme("spacing.4");
+        justify-content: flex-end;
+    }
+}

package/icon/icon.d.ts

@@ -1,4 +1,5 @@
 import React, { CSSProperties } from "react";
+import { IconColor } from "./theme";
 import { IconName } from "./types";
 type NameOrComponentType = {
     name: IconName;
@@ -13,6 +14,7 @@ export type IconProps = {
     mode?: "meet" | "slice";
     size?: number;
     style?: CSSProperties;
+    color?: IconColor;
 } & NameOrComponentType;
 export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 export {};

package/icon/icon.js

@@ -32,7 +32,7 @@ exports.Icon = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b;
     const componentContext = (0, context_1.useComponentContext)("icon");
     const CustomComponent = props.Component;
-    const className = (0, cx_1.cx)("uxf-icon", props.className);
+    const className = (0, cx_1.cx)("uxf-icon", props.color && `uxf-icon--color-${props.color}`, props.className);
     const preserveAspectRatio = `xMidYMid ${(_a = props.mode) !== null && _a !== void 0 ? _a : "meet"}`;
     const style = props.size
         ? {

package/icon/theme.d.ts

@@ -1,2 +1,10 @@
 export interface IconsSet extends Record<string, boolean> {
 }
+export interface IconColors {
+    default: true;
+    positive: true;
+    negative: true;
+    warning: true;
+    info: true;
+}
+export type IconColor = keyof IconColors;

package/icons-config.js

@@ -10,6 +10,11 @@ module.exports = {
         height: 512,
         data: `<path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/>`,
     },
+    "badge-check-solid": {
+        width: 512,
+        height: 512,
+        data: `<path fill="currentColor" d="M256 0c36.8 0 68.8 20.7 84.9 51.1C373.8 41 411 49 437 75s34 63.3 23.9 96.1C491.3 187.2 512 219.2 512 256s-20.7 68.8-51.1 84.9C471 373.8 463 411 437 437s-63.3 34-96.1 23.9C324.8 491.3 292.8 512 256 512s-68.8-20.7-84.9-51.1C138.2 471 101 463 75 437s-34-63.3-23.9-96.1C20.7 324.8 0 292.8 0 256s20.7-68.8 51.1-84.9C41 138.2 49 101 75 75s63.3-34 96.1-23.9C187.2 20.7 219.2 0 256 0zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/>`,
+    },
     calendar: {
         width: 448,
         height: 512,
@@ -75,6 +80,11 @@ module.exports = {
         height: 512,
         data: `<path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9-.1-2.7-.2-5.4-.2-8.1 0-88.4 71.6-160 160-160 59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96 0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z" fill="currentColor"/>`,
     },
+    "circle-info-solid": {
+        width: 512,
+        height: 512,
+        data: `<path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>`,
+    },
     copy: {
         width: 512,
         height: 512,
@@ -110,6 +120,11 @@ module.exports = {
         height: 512,
         data: `<path fill="currentColor" d="M248.4 84.3c1.6-2.7 4.5-4.3 7.6-4.3s6 1.6 7.6 4.3L461.9 410c1.4 2.3 2.1 4.9 2.1 7.5c0 8-6.5 14.5-14.5 14.5H62.5c-8 0-14.5-6.5-14.5-14.5c0-2.7 .7-5.3 2.1-7.5L248.4 84.3zm-41-25L9.1 385c-6 9.8-9.1 21-9.1 32.5C0 452 28 480 62.5 480h387c34.5 0 62.5-28 62.5-62.5c0-11.5-3.2-22.7-9.1-32.5L304.6 59.3C294.3 42.4 275.9 32 256 32s-38.3 10.4-48.6 27.3zM288 368a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-8-184c0-13.3-10.7-24-24-24s-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24V184z"/>`,
     },
+    "triangle-exclamation-solid": {
+        width: 512,
+        height: 512,
+        data: `<path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" fill="currentColor"/>`,
+    },
     user: {
         width: 448,
         height: 512,
@@ -125,6 +140,11 @@ module.exports = {
         height: 512,
         data: `<path fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/>`,
     },
+    "xmark-octagon-solid": {
+        width: 512,
+        height: 512,
+        data: `<path fill="currentColor" d="M140.6 21.2C154.1 7.7 172.4 .1 191.5 .1l129 0c19.1 0 37.4 7.6 50.9 21.1L490.8 140.6c13.5 13.5 21.1 31.8 21.1 50.9l0 129c0 19.1-7.6 37.4-21.1 50.9L371.4 490.8c-13.5 13.5-31.8 21.1-50.9 21.1l-129 0c-19.1 0-37.4-7.6-50.9-21.1L21.2 371.4C7.7 357.9 .1 339.6 .1 320.5l0-129c0-19.1 7.6-37.4 21.1-50.9L140.6 21.2zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/>`,
+    },
     xmarkLarge: {
         width: 448,
         height: 512,

package/message/README.md

@@ -1,4 +1,6 @@
-# Message
+# Message !!! DEPRECATED !!!
+
+Use component [ModalDialog](/docs/ui/modal-dialog) and method [openModal()](/docs/ui/modal).
 
 ## CSS dependencies
 

package/message/message-content.d.ts

@@ -16,4 +16,5 @@ export interface ConfirmProps {
     title: string;
     variant?: MessageVariant;
 }
+/** @deprecated use ModalDialog */
 export declare const MessageContent: FC<ConfirmProps>;

package/message/message-content.js

@@ -13,6 +13,7 @@ const BUTTON_COLOR = {
     warning: "warning",
     success: "positive",
 };
+/** @deprecated use ModalDialog */
 const MessageContent = (props) => {
     var _a, _b, _c;
     const onAcceptClick = () => {

package/message/message-service.d.ts

@@ -4,6 +4,7 @@ declare function getMessageRef(): import("react").RefObject<MessageRef>;
 declare function openAlert(confirm: Omit<MessageProps, "onAccept" | "acceptLabel">): void;
 declare function openConfirm(confirm: Omit<MessageProps, "onAccept" | "acceptLabel"> & Required<Pick<MessageProps, "onAccept" | "acceptLabel">>): void;
 declare function close(): void;
+/** @deprecated use openModal with ModalDialog component */
 export declare const MessageService: {
     getMessageRef: typeof getMessageRef;
     openAlert: typeof openAlert;

package/message/message-service.js

@@ -21,6 +21,7 @@ function close() {
         messageRef.current.close();
     }
 }
+/** @deprecated use openModal with ModalDialog component */
 exports.MessageService = {
     getMessageRef,
     openAlert,

package/modal-dialog/README.md

@@ -0,0 +1,8 @@
+# ModalDialog
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/typography.css");
+@import url("@uxf/ui/css/modal-dialog.css");
+```

package/modal-dialog/modal-dialog.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+interface ModalDialogProps {
+    children?: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+    icon?: ReactNode;
+    title: string;
+}
+export declare function ModalDialog(props: ModalDialogProps): React.JSX.Element;
+export {};

package/modal-dialog/modal-dialog.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDialog = void 0;
+const react_1 = __importDefault(require("react"));
+function ModalDialog(props) {
+    var _a;
+    return (react_1.default.createElement("div", { className: `uxf-modal-dialog ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
+        react_1.default.createElement("div", { className: "uxf-modal-dialog__header" },
+            props.icon && react_1.default.createElement("div", { className: "uxf-modal-dialog__icon" }, props.icon),
+            react_1.default.createElement("div", { className: "uxf-modal-dialog__title" }, props.title)),
+        props.children && react_1.default.createElement("div", { className: "uxf-modal-dialog__text" }, props.children),
+        props.footer && react_1.default.createElement("div", { className: "uxf-modal-dialog__footer" }, props.footer)));
+}
+exports.ModalDialog = ModalDialog;

package/modal-dialog/modal-dialog.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/modal-dialog/modal-dialog.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("../icon");
+const modal_dialog_1 = require("./modal-dialog");
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-6 bg-neutral-200 p-6" },
+        react_1.default.createElement(modal_dialog_1.ModalDialog, { title: "Default dialog", footer: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(button_1.Button, { variant: "text" }, "Close"),
+                react_1.default.createElement(button_1.Button, null, "Button")) }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
+        react_1.default.createElement(modal_dialog_1.ModalDialog, { title: "Warning dialog", icon: react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation-solid", color: "warning" }), footer: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(button_1.Button, { variant: "text" }, "Close"),
+                react_1.default.createElement(button_1.Button, { color: "warning" }, "Button")) }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
+        react_1.default.createElement(modal_dialog_1.ModalDialog, { title: "Positive dialog asda ksdjahs kjdhakj shdk jahksdjh kajsdh k", icon: react_1.default.createElement(icon_1.Icon, { name: "badge-check-solid", color: "positive" }), footer: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
+                react_1.default.createElement(button_1.Button, { color: "positive" }, "Save")) }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
+        react_1.default.createElement(modal_dialog_1.ModalDialog, { title: "Negative dialog", icon: react_1.default.createElement(icon_1.Icon, { name: "xmark-octagon-solid", color: "negative" }), footer: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
+                react_1.default.createElement(button_1.Button, { color: "negative" }, "Save")) }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi."),
+        react_1.default.createElement(modal_dialog_1.ModalDialog, { title: "Info dialog", icon: react_1.default.createElement(icon_1.Icon, { name: "circle-info-solid", color: "info" }), footer: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(button_1.Button, { variant: "text" }, "Cancel"),
+                react_1.default.createElement(button_1.Button, { color: "info" }, "Save")) }, "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent dapibus. Vestibulum fermentum tortor id mi.")));
+}
+exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.27.1",
+  "version": "11.28.1",
   "description": "",
   "publishConfig": {
     "access": "public"

package/readmes.d.ts

@@ -39,6 +39,7 @@ export declare const readmes: {
     readonly lozenge: typeof alertBubbleReadme;
     readonly message: typeof alertBubbleReadme;
     readonly modal: typeof alertBubbleReadme;
+    readonly "modal-dialog": typeof alertBubbleReadme;
     readonly "multi-combobox": typeof alertBubbleReadme;
     readonly "multi-select": typeof alertBubbleReadme;
     readonly pagination: typeof alertBubbleReadme;

package/readmes.js

@@ -43,23 +43,24 @@ const README_md_35 = __importDefault(require("./loader/README.md"));
 const README_md_36 = __importDefault(require("./lozenge/README.md"));
 const README_md_37 = __importDefault(require("./message/README.md"));
 const README_md_38 = __importDefault(require("./modal/README.md"));
-const README_md_39 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_40 = __importDefault(require("./multi-select/README.md"));
-const README_md_41 = __importDefault(require("./pagination/README.md"));
-const README_md_42 = __importDefault(require("./paper/README.md"));
-const README_md_43 = __importDefault(require("./radio/README.md"));
-const README_md_44 = __importDefault(require("./radio-group/README.md"));
-const README_md_45 = __importDefault(require("./raster-image/README.md"));
-const README_md_46 = __importDefault(require("./select/README.md"));
-const README_md_47 = __importDefault(require("./tabs/README.md"));
-const README_md_48 = __importDefault(require("./text-input/README.md"));
-const README_md_49 = __importDefault(require("./text-link/README.md"));
-const README_md_50 = __importDefault(require("./textarea/README.md"));
-const README_md_51 = __importDefault(require("./time-picker/README.md"));
-const README_md_52 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_53 = __importDefault(require("./toggle/README.md"));
-const README_md_54 = __importDefault(require("./tooltip/README.md"));
-const README_md_55 = __importDefault(require("./typography/README.md"));
+const README_md_39 = __importDefault(require("./modal-dialog/README.md"));
+const README_md_40 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_41 = __importDefault(require("./multi-select/README.md"));
+const README_md_42 = __importDefault(require("./pagination/README.md"));
+const README_md_43 = __importDefault(require("./paper/README.md"));
+const README_md_44 = __importDefault(require("./radio/README.md"));
+const README_md_45 = __importDefault(require("./radio-group/README.md"));
+const README_md_46 = __importDefault(require("./raster-image/README.md"));
+const README_md_47 = __importDefault(require("./select/README.md"));
+const README_md_48 = __importDefault(require("./tabs/README.md"));
+const README_md_49 = __importDefault(require("./text-input/README.md"));
+const README_md_50 = __importDefault(require("./text-link/README.md"));
+const README_md_51 = __importDefault(require("./textarea/README.md"));
+const README_md_52 = __importDefault(require("./time-picker/README.md"));
+const README_md_53 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_54 = __importDefault(require("./toggle/README.md"));
+const README_md_55 = __importDefault(require("./tooltip/README.md"));
+const README_md_56 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "alert-bubble": README_md_1.default,
     "avatar": README_md_2.default,
@@ -99,21 +100,22 @@ exports.readmes = {
     "lozenge": README_md_36.default,
     "message": README_md_37.default,
     "modal": README_md_38.default,
-    "multi-combobox": README_md_39.default,
-    "multi-select": README_md_40.default,
-    "pagination": README_md_41.default,
-    "paper": README_md_42.default,
-    "radio": README_md_43.default,
-    "radio-group": README_md_44.default,
-    "raster-image": README_md_45.default,
-    "select": README_md_46.default,
-    "tabs": README_md_47.default,
-    "text-input": README_md_48.default,
-    "text-link": README_md_49.default,
-    "textarea": README_md_50.default,
-    "time-picker": README_md_51.default,
-    "time-picker-input": README_md_52.default,
-    "toggle": README_md_53.default,
-    "tooltip": README_md_54.default,
-    "typography": README_md_55.default,
+    "modal-dialog": README_md_39.default,
+    "multi-combobox": README_md_40.default,
+    "multi-select": README_md_41.default,
+    "pagination": README_md_42.default,
+    "paper": README_md_43.default,
+    "radio": README_md_44.default,
+    "radio-group": README_md_45.default,
+    "raster-image": README_md_46.default,
+    "select": README_md_47.default,
+    "tabs": README_md_48.default,
+    "text-input": README_md_49.default,
+    "text-link": README_md_50.default,
+    "textarea": README_md_51.default,
+    "time-picker": README_md_52.default,
+    "time-picker-input": README_md_53.default,
+    "toggle": README_md_54.default,
+    "tooltip": README_md_55.default,
+    "typography": README_md_56.default,
 };