@uxf/ui 11.28.2 → 11.29.0

package/components.d.ts

@@ -6,10 +6,6 @@ import * as buttonStories from "./button/button.stories";
 import * as buttonGroupStories from "./button-group/button-group.stories";
 import * as buttonListStories from "./button-list/button-list.stories";
 import * as calendarStories from "./calendar/calendar.stories";
-import * as checkboxStories from "./checkbox/checkbox.stories";
-import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
-import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
-import * as chipStories from "./chip/chip.stories";
 import * as colorRadioStories from "./color-radio/color-radio.stories";
 import * as colorRadioGroupStories from "./color-radio-group/color-radio-group.stories";
 import * as comboboxStories from "./combobox/combobox.stories";
@@ -26,6 +22,10 @@ import * as errorMessageStories from "./error-message/error-message.stories";
 import * as fileInputStories from "./file-input/file-input.stories";
 import * as flashMessagesStories from "./flash-messages/flash-messages.stories";
 import * as formComponentStories from "./form-component/form-component.stories";
+import * as checkboxStories from "./checkbox/checkbox.stories";
+import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
+import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
+import * as chipStories from "./chip/chip.stories";
 import * as iconStories from "./icon/icon.stories";
 import * as imageGalleryStories from "./image-gallery/image-gallery.stories";
 import * as inputStories from "./input/input.stories";
@@ -37,6 +37,7 @@ 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 modalHeaderStories from "./modal-header/modal-header.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";
@@ -87,22 +88,6 @@ export declare const components: {
         readonly title: "Calendar";
         readonly stories: typeof calendarStories;
     };
-    readonly checkbox: {
-        readonly title: "Checkbox";
-        readonly stories: typeof checkboxStories;
-    };
-    readonly "checkbox-button": {
-        readonly title: "CheckboxButton";
-        readonly stories: typeof checkboxButtonStories;
-    };
-    readonly "checkbox-input": {
-        readonly title: "CheckboxInput";
-        readonly stories: typeof checkboxInputStories;
-    };
-    readonly chip: {
-        readonly title: "Chip";
-        readonly stories: typeof chipStories;
-    };
     readonly "color-radio": {
         readonly title: "ColorRadio";
         readonly stories: typeof colorRadioStories;
@@ -167,6 +152,22 @@ export declare const components: {
         readonly title: "FormComponent";
         readonly stories: typeof formComponentStories;
     };
+    readonly checkbox: {
+        readonly title: "Checkbox";
+        readonly stories: typeof checkboxStories;
+    };
+    readonly "checkbox-button": {
+        readonly title: "CheckboxButton";
+        readonly stories: typeof checkboxButtonStories;
+    };
+    readonly "checkbox-input": {
+        readonly title: "CheckboxInput";
+        readonly stories: typeof checkboxInputStories;
+    };
+    readonly chip: {
+        readonly title: "Chip";
+        readonly stories: typeof chipStories;
+    };
     readonly icon: {
         readonly title: "Icon";
         readonly stories: typeof iconStories;
@@ -211,6 +212,10 @@ export declare const components: {
         readonly title: "ModalDialog";
         readonly stories: typeof modalDialogStories;
     };
+    readonly "modal-header": {
+        readonly title: "ModalHeader";
+        readonly stories: typeof modalHeaderStories;
+    };
     readonly "multi-combobox": {
         readonly title: "MultiCombobox";
         readonly stories: typeof multiComboboxStories;

package/components.js

@@ -33,10 +33,6 @@ const buttonStories = __importStar(require("./button/button.stories"));
 const buttonGroupStories = __importStar(require("./button-group/button-group.stories"));
 const buttonListStories = __importStar(require("./button-list/button-list.stories"));
 const calendarStories = __importStar(require("./calendar/calendar.stories"));
-const checkboxStories = __importStar(require("./checkbox/checkbox.stories"));
-const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
-const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
-const chipStories = __importStar(require("./chip/chip.stories"));
 const colorRadioStories = __importStar(require("./color-radio/color-radio.stories"));
 const colorRadioGroupStories = __importStar(require("./color-radio-group/color-radio-group.stories"));
 const comboboxStories = __importStar(require("./combobox/combobox.stories"));
@@ -53,6 +49,10 @@ const errorMessageStories = __importStar(require("./error-message/error-message.
 const fileInputStories = __importStar(require("./file-input/file-input.stories"));
 const flashMessagesStories = __importStar(require("./flash-messages/flash-messages.stories"));
 const formComponentStories = __importStar(require("./form-component/form-component.stories"));
+const checkboxStories = __importStar(require("./checkbox/checkbox.stories"));
+const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
+const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
+const chipStories = __importStar(require("./chip/chip.stories"));
 const iconStories = __importStar(require("./icon/icon.stories"));
 const imageGalleryStories = __importStar(require("./image-gallery/image-gallery.stories"));
 const inputStories = __importStar(require("./input/input.stories"));
@@ -64,6 +64,7 @@ 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 modalHeaderStories = __importStar(require("./modal-header/modal-header.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"));
@@ -114,22 +115,6 @@ exports.components = {
         title: "Calendar",
         stories: calendarStories
     },
-    "checkbox": {
-        title: "Checkbox",
-        stories: checkboxStories
-    },
-    "checkbox-button": {
-        title: "CheckboxButton",
-        stories: checkboxButtonStories
-    },
-    "checkbox-input": {
-        title: "CheckboxInput",
-        stories: checkboxInputStories
-    },
-    "chip": {
-        title: "Chip",
-        stories: chipStories
-    },
     "color-radio": {
         title: "ColorRadio",
         stories: colorRadioStories
@@ -194,6 +179,22 @@ exports.components = {
         title: "FormComponent",
         stories: formComponentStories
     },
+    "checkbox": {
+        title: "Checkbox",
+        stories: checkboxStories
+    },
+    "checkbox-button": {
+        title: "CheckboxButton",
+        stories: checkboxButtonStories
+    },
+    "checkbox-input": {
+        title: "CheckboxInput",
+        stories: checkboxInputStories
+    },
+    "chip": {
+        title: "Chip",
+        stories: chipStories
+    },
     "icon": {
         title: "Icon",
         stories: iconStories
@@ -238,6 +239,10 @@ exports.components = {
         title: "ModalDialog",
         stories: modalDialogStories
     },
+    "modal-header": {
+        title: "ModalHeader",
+        stories: modalHeaderStories
+    },
     "multi-combobox": {
         title: "MultiCombobox",
         stories: multiComboboxStories

package/css/colors.css

@@ -2,6 +2,7 @@
     /** base */
     --uxf-color-base-border-inverted: #ffffff1f;
     --uxf-color-base-border-input: #d2d6db;
+    --uxf-color-base-border-border: #e5e7eb;
     --uxf-color-base-surface-main: #fff;
     --uxf-color-base-surface-main-hover: #f3f4f6;
     --uxf-color-base-surface-input-disabled: #f3f4f6;

package/css/dialog.css

@@ -49,4 +49,20 @@
             border-radius: var(--panel-border-radius);
         }
     }
+
+    &--variant-rightDrawer {
+        .uxf-dialog__body {
+            @screen sm {
+                align-items: stretch;
+                justify-content: flex-end;
+                padding: 0;
+            }
+        }
+
+        .uxf-dialog__panel {
+            @screen sm {
+                border-radius: 0;
+            }
+        }
+    }
 }

package/css/icon.css

@@ -1,4 +1,9 @@
+:root {
+    --uxf-icon-color: initial;
+}
+
 .uxf-icon {
+    color: var(--uxf-icon-color);
     flex-shrink: 0;
     height: var(--i-h);
     width: var(--i-w);
@@ -8,22 +13,22 @@
     }
 
     &--color-default {
-        color: var(--uxf-color-base-text-high-emphasis);
+        --uxf-icon-color: var(--uxf-color-base-text-high-emphasis);
     }
 
     &--color-positive {
-        color: var(--uxf-color-positive-text);
+        --uxf-icon-color: var(--uxf-color-positive-text);
     }
 
     &--color-negative {
-        color: var(--uxf-color-negative-text);
+        --uxf-icon-color: var(--uxf-color-negative-text);
     }
 
     &--color-warning {
-        color: var(--uxf-color-warning-text);
+        --uxf-icon-color: var(--uxf-color-warning-text);
     }
 
     &--color-info {
-        color: var(--uxf-color-info-text);
+        --uxf-icon-color: var(--uxf-color-info-text);
     }
 }

package/css/modal-header.css

@@ -0,0 +1,43 @@
+:root {
+    /** modal header variables */
+    --uxf-modal-header-background-color: var(--uxf-color-base-surface-main);
+    --uxf-modal-header-border-color: var(--uxf-color-base-border-border);
+    --uxf-modal-header-border-width: theme("borderWidth.DEFAULT");
+    --uxf-modal-header-description-font-size: theme("fontSize.caption");
+    --uxf-modal-header-description-font-weight: theme("fontWeight.normal");
+    --uxf-modal-header-description-text-color: var(--uxf-color-base-text-low-emphasis);
+    --uxf-modal-header-title-font-size: 18px;
+    --uxf-modal-header-title-font-weight: theme("fontWeight.semibold");
+    --uxf-modal-header-title-line-height: 1.3333;
+    --uxf-modal-header-title-text-color: var(--uxf-color-base-text-high-emphasis);
+}
+
+.uxf-modal-header {
+    --uxf-icon-color: var(--uxf-modal-header-title-text-color);
+
+    background-color: var(--uxf-modal-header-background-color);
+    border-bottom: var(--uxf-modal-header-border-width) solid var(--uxf-modal-header-border-color);
+    color: var(--uxf-modal-header-title-text-color);
+    display: flex;
+    font-size: var(--uxf-modal-header-title-font-size);
+    font-weight: var(--uxf-modal-header-title-font-weight);
+    line-height: var(--uxf-modal-header-title-line-height);
+    padding: theme("spacing.2") theme("spacing.2") theme("spacing.2") theme("spacing.4");
+    width: 100%;
+
+    &--has-go-back {
+        padding: theme("spacing.2");
+    }
+
+    &__text-wrapper {
+        flex-grow: 1;
+        padding: theme("spacing.1");
+    }
+
+    &__description {
+        color: var(--uxf-modal-header-description-text-color);
+        font-size: var(--uxf-modal-header-description-font-size);
+        font-weight: var(--uxf-modal-header-description-font-weight);
+        margin-top: theme("spacing.1");
+    }
+}

package/datetime-picker-input/datetime-picker-input.d.ts

@@ -1,8 +1,13 @@
+import { DatetimeString } from "@uxf/core/date";
 import React, { ReactNode } from "react";
 import { InputWithPopoverProps } from "../_input-with-popover";
+import { ControlProps } from "../types";
 export declare const ALLOWED_DATETIME_FORMAT: string[];
 export declare const DISPLAY_DATETIME_FORMAT = "D. M. YYYY H:mm";
 export declare const BOUNDARY_DATE_FORMAT = "YYYY-MM-DD";
+interface DatetimePickerProps extends ControlProps<DatetimeString | null> {
+    onClose: () => void;
+}
 export interface DatetimePickerInputProps extends Omit<InputWithPopoverProps<string | null>, "children" | "placeholder" | "triggerElement"> {
     placeholder?: string;
     triggerElement?: ReactNode;
@@ -10,5 +15,7 @@ export interface DatetimePickerInputProps extends Omit<InputWithPopoverProps<str
     maxDate?: string;
     unavailableDates?: Date[];
     bottomContent?: ReactNode;
+    CustomDatetimePicker?: (props: DatetimePickerProps) => ReactNode;
 }
 export declare const DatetimePickerInput: React.ForwardRefExoticComponent<DatetimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/datetime-picker-input/datetime-picker-input.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatetimePickerInput = exports.BOUNDARY_DATE_FORMAT = exports.DISPLAY_DATETIME_FORMAT = exports.ALLOWED_DATETIME_FORMAT = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const dayjs_1 = __importStar(require("dayjs"));
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const react_1 = __importStar(require("react"));
@@ -78,6 +79,8 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
     const parsedMinDate = getBoundaryDate(props.minDate);
     const parsedMaxDate = getBoundaryDate(props.maxDate);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, bottomContent: props.bottomContent, closePopoverHandler: close, onChange: onChange, value: props.value, unavailableDates: props.unavailableDates })))));
+        react_1.default.createElement(_input_with_popover_1._InputWithPopover, { ...props, className: className, onChange: onInputChange, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : (0, dayjs_1.default)().format(exports.DISPLAY_DATETIME_FORMAT), ref: ref, value: value, triggerElement: (_b = props.triggerElement) !== null && _b !== void 0 ? _b : react_1.default.createElement(icon_1.Icon, { name: "calendar", size: 20 }) }, ({ close }) => (0, is_not_nil_1.isNotNil)(props.CustomDatetimePicker) ? (react_1.default.createElement(props.CustomDatetimePicker, { value: (0, is_not_nil_1.isNotNil)(value)
+                ? (0, dayjs_1.default)(value).format("YYYY-MM-DD[T]HH:mm:ssZ")
+                : null, onChange: onChange, onClose: close })) : (react_1.default.createElement(datetime_picker_1.DatetimePicker, { minDate: parsedMinDate, maxDate: parsedMaxDate, bottomContent: props.bottomContent, closePopoverHandler: close, onChange: onChange, value: props.value, unavailableDates: props.unavailableDates })))));
 });
 exports.DatetimePickerInput.displayName = "UxfUiDatePickerInput";

package/dialog/theme.d.ts

@@ -1,4 +1,5 @@
 export interface DialogVariants {
     default: true;
+    "drawer-right": true;
 }
 export type DialogVariant = keyof DialogVariants;

package/icons-config.js

@@ -1,5 +1,10 @@
 /** @type {import('@uxf/icons-generator/types').Config['icons']} */
 module.exports = {
+    "angle-left": {
+        width: 320,
+        height: 512,
+        data: `<path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/>`,
+    },
     "arrow-left": {
         width: 448,
         height: 512,
@@ -10,11 +15,6 @@ 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,
@@ -80,11 +80,6 @@ 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,
@@ -120,11 +115,6 @@ 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,
@@ -140,11 +130,6 @@ 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/modal/modal.stories.js

@@ -54,7 +54,13 @@ function Default() {
                     react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - disable backdrop close"),
                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
                 disableBackdropClose: true,
-            }) }, "Click to open modal - disable backdrop close")));
+            }) }, "Click to open modal - disable backdrop close"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - variant right drawer"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                variant: "drawer-right",
+            }) }, "Click to open modal - variant right drawer")));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
         react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyModals)));
 }

package/modal/theme.d.ts

@@ -8,5 +8,6 @@ export interface ModalWidths {
 export type ModalWidth = keyof ModalWidths;
 export interface ModalVariants {
     default: true;
+    "drawer-right": true;
 }
 export type ModalVariant = keyof ModalVariants;

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

@@ -13,16 +13,16 @@ function Default() {
         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(modal_dialog_1.ModalDialog, { title: "Warning dialog", icon: react_1.default.createElement(icon_1.Icon, { name: "triangle-exclamation", 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(modal_dialog_1.ModalDialog, { title: "Positive dialog asda ksdjahs kjdhakj shdk jahksdjh kajsdh k", icon: react_1.default.createElement(icon_1.Icon, { name: "youtube", 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(modal_dialog_1.ModalDialog, { title: "Negative dialog", icon: react_1.default.createElement(icon_1.Icon, { name: "xmark", 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(modal_dialog_1.ModalDialog, { title: "Info dialog", icon: react_1.default.createElement(icon_1.Icon, { name: "circle-info", 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.")));
 }

package/modal-header/README.md

@@ -0,0 +1,23 @@
+#  ModalHeader
+
+Figma: <a href="https://www.figma.com/design/InhbHrNUhDGbBvRDRonXsD/Vent-UI?node-id=5643-63799">zde</a>
+
+## Usage
+
+```tsx
+import { ModalHeader } from "@uxf/ui/modal-header";
+
+function Example() {
+    return (
+        <ModalHeader description="View and manage your time off" title="Time of details" onGoBack={() => void null} />
+    );
+}
+```
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/button.css");
+@import url("@uxf/ui/css/modal-header.css");
+@import url("@uxf/ui/css/icon.css");
+```

package/modal-header/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalHeader } from "./modal-header";
+export type { ModalHeaderProps } from "./modal-header";

package/modal-header/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalHeader = void 0;
+var modal_header_1 = require("./modal-header");
+Object.defineProperty(exports, "ModalHeader", { enumerable: true, get: function () { return modal_header_1.ModalHeader; } });

package/modal-header/modal-header.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface ModalHeaderProps {
+    className?: string;
+    onGoBack?: () => void;
+    onClose?: () => void;
+    actionsComponent?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+}
+export declare function ModalHeader(props: ModalHeaderProps): React.JSX.Element;

package/modal-header/modal-header.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalHeader = void 0;
+const show_1 = require("@uxf/core-react/components/show");
+const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const react_1 = __importDefault(require("react"));
+const button_1 = require("../button");
+const icon_1 = require("../icon");
+function ModalHeader(props) {
+    return (react_1.default.createElement("header", { className: (0, cx_1.cx)("uxf-modal-header", props.onGoBack && "uxf-modal-header--has-go-back") },
+        react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.onGoBack) },
+            react_1.default.createElement(button_1.Button, { onClick: props.onGoBack, size: "sm", variant: "text", isIconButton: true },
+                react_1.default.createElement(icon_1.Icon, { name: "angle-left" }))),
+        react_1.default.createElement("div", { className: "uxf-modal-header__text-wrapper" },
+            react_1.default.createElement("div", { className: "uxf-modal-header__title" }, props.title),
+            react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.description) },
+                react_1.default.createElement("div", { className: "uxf-modal-header__description" }, props.description))),
+        props.actionsComponent,
+        react_1.default.createElement(show_1.Show, { when: (0, is_not_nil_1.isNotNil)(props.onClose) },
+            react_1.default.createElement(button_1.Button, { onClick: props.onClose, size: "sm", variant: "text", isIconButton: true },
+                react_1.default.createElement(icon_1.Icon, { name: "xmark" })))));
+}
+exports.ModalHeader = ModalHeader;

package/modal-header/modal-header.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/modal-header/modal-header.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const modal_header_stories_1 = require("./modal-header.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(modal_header_stories_1.Default, null));

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

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

package/modal-header/modal-header.stories.js

@@ -0,0 +1,19 @@
+"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 react_1 = __importDefault(require("react"));
+const button_1 = require("../button");
+const icon_1 = require("../icon");
+const modal_header_1 = require("./modal-header");
+function Default() {
+    return (react_1.default.createElement("div", { className: "flex max-w-[480px] flex-col gap-4 p-8" },
+        react_1.default.createElement(modal_header_1.ModalHeader, { title: "Time of details", onClose: () => void null }),
+        react_1.default.createElement(modal_header_1.ModalHeader, { description: "View and manage your time off", title: "Time of details" }),
+        react_1.default.createElement(modal_header_1.ModalHeader, { description: "View and manage your time off", onClose: () => void null, onGoBack: () => alert("going back!"), title: "Time of details" }),
+        react_1.default.createElement(modal_header_1.ModalHeader, { actionsComponent: react_1.default.createElement(button_1.Button, { onClick: () => alert("action!"), size: "sm", variant: "text", isIconButton: true },
+                react_1.default.createElement(icon_1.Icon, { name: "ellipsis-vertical" })), description: "View and manage your time off", onClose: () => void null, onGoBack: () => alert("going back!"), title: "Time of details" })));
+}
+exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "11.28.2",
+  "version": "11.29.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,10 @@
   "dependencies": {
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "11.22.0",
-    "@uxf/core-react": "11.22.0",
+    "@uxf/core": "11.29.0",
+    "@uxf/core-react": "11.29.0",
     "@uxf/datepicker": "11.25.0",
-    "@uxf/styles": "11.22.0",
+    "@uxf/styles": "11.29.0",
     "color2k": "2.0.3",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/readmes.d.ts

@@ -9,10 +9,6 @@ export declare const readmes: {
     readonly "button-group": typeof alertBubbleReadme;
     readonly "button-list": typeof alertBubbleReadme;
     readonly calendar: typeof alertBubbleReadme;
-    readonly checkbox: typeof alertBubbleReadme;
-    readonly "checkbox-button": typeof alertBubbleReadme;
-    readonly "checkbox-input": typeof alertBubbleReadme;
-    readonly chip: typeof alertBubbleReadme;
     readonly "color-radio": typeof alertBubbleReadme;
     readonly "color-radio-group": typeof alertBubbleReadme;
     readonly combobox: typeof alertBubbleReadme;
@@ -29,6 +25,10 @@ export declare const readmes: {
     readonly "file-input": typeof alertBubbleReadme;
     readonly "flash-messages": typeof alertBubbleReadme;
     readonly "form-component": typeof alertBubbleReadme;
+    readonly checkbox: typeof alertBubbleReadme;
+    readonly "checkbox-button": typeof alertBubbleReadme;
+    readonly "checkbox-input": typeof alertBubbleReadme;
+    readonly chip: typeof alertBubbleReadme;
     readonly icon: typeof alertBubbleReadme;
     readonly "image-gallery": typeof alertBubbleReadme;
     readonly input: typeof alertBubbleReadme;
@@ -40,6 +40,7 @@ export declare const readmes: {
     readonly message: typeof alertBubbleReadme;
     readonly modal: typeof alertBubbleReadme;
     readonly "modal-dialog": typeof alertBubbleReadme;
+    readonly "modal-header": typeof alertBubbleReadme;
     readonly "multi-combobox": typeof alertBubbleReadme;
     readonly "multi-select": typeof alertBubbleReadme;
     readonly pagination: typeof alertBubbleReadme;

package/readmes.js

@@ -13,26 +13,26 @@ const README_md_5 = __importDefault(require("./button/README.md"));
 const README_md_6 = __importDefault(require("./button-group/README.md"));
 const README_md_7 = __importDefault(require("./button-list/README.md"));
 const README_md_8 = __importDefault(require("./calendar/README.md"));
-const README_md_9 = __importDefault(require("./checkbox/README.md"));
-const README_md_10 = __importDefault(require("./checkbox-button/README.md"));
-const README_md_11 = __importDefault(require("./checkbox-input/README.md"));
-const README_md_12 = __importDefault(require("./chip/README.md"));
-const README_md_13 = __importDefault(require("./color-radio/README.md"));
-const README_md_14 = __importDefault(require("./color-radio-group/README.md"));
-const README_md_15 = __importDefault(require("./combobox/README.md"));
-const README_md_16 = __importDefault(require("./date-picker/README.md"));
-const README_md_17 = __importDefault(require("./date-picker-input/README.md"));
-const README_md_18 = __importDefault(require("./date-range-picker/README.md"));
-const README_md_19 = __importDefault(require("./date-range-picker-input/README.md"));
-const README_md_20 = __importDefault(require("./datetime-picker/README.md"));
-const README_md_21 = __importDefault(require("./datetime-picker-input/README.md"));
-const README_md_22 = __importDefault(require("./dialog/README.md"));
-const README_md_23 = __importDefault(require("./dropdown/README.md"));
-const README_md_24 = __importDefault(require("./dropzone/README.md"));
-const README_md_25 = __importDefault(require("./error-message/README.md"));
-const README_md_26 = __importDefault(require("./file-input/README.md"));
-const README_md_27 = __importDefault(require("./flash-messages/README.md"));
-const README_md_28 = __importDefault(require("./form-component/README.md"));
+const README_md_9 = __importDefault(require("./color-radio/README.md"));
+const README_md_10 = __importDefault(require("./color-radio-group/README.md"));
+const README_md_11 = __importDefault(require("./combobox/README.md"));
+const README_md_12 = __importDefault(require("./date-picker/README.md"));
+const README_md_13 = __importDefault(require("./date-picker-input/README.md"));
+const README_md_14 = __importDefault(require("./date-range-picker/README.md"));
+const README_md_15 = __importDefault(require("./date-range-picker-input/README.md"));
+const README_md_16 = __importDefault(require("./datetime-picker/README.md"));
+const README_md_17 = __importDefault(require("./datetime-picker-input/README.md"));
+const README_md_18 = __importDefault(require("./dialog/README.md"));
+const README_md_19 = __importDefault(require("./dropdown/README.md"));
+const README_md_20 = __importDefault(require("./dropzone/README.md"));
+const README_md_21 = __importDefault(require("./error-message/README.md"));
+const README_md_22 = __importDefault(require("./file-input/README.md"));
+const README_md_23 = __importDefault(require("./flash-messages/README.md"));
+const README_md_24 = __importDefault(require("./form-component/README.md"));
+const README_md_25 = __importDefault(require("./checkbox/README.md"));
+const README_md_26 = __importDefault(require("./checkbox-button/README.md"));
+const README_md_27 = __importDefault(require("./checkbox-input/README.md"));
+const README_md_28 = __importDefault(require("./chip/README.md"));
 const README_md_29 = __importDefault(require("./icon/README.md"));
 const README_md_30 = __importDefault(require("./image-gallery/README.md"));
 const README_md_31 = __importDefault(require("./input/README.md"));
@@ -44,23 +44,24 @@ 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("./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"));
+const README_md_40 = __importDefault(require("./modal-header/README.md"));
+const README_md_41 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_42 = __importDefault(require("./multi-select/README.md"));
+const README_md_43 = __importDefault(require("./pagination/README.md"));
+const README_md_44 = __importDefault(require("./paper/README.md"));
+const README_md_45 = __importDefault(require("./radio/README.md"));
+const README_md_46 = __importDefault(require("./radio-group/README.md"));
+const README_md_47 = __importDefault(require("./raster-image/README.md"));
+const README_md_48 = __importDefault(require("./select/README.md"));
+const README_md_49 = __importDefault(require("./tabs/README.md"));
+const README_md_50 = __importDefault(require("./text-input/README.md"));
+const README_md_51 = __importDefault(require("./text-link/README.md"));
+const README_md_52 = __importDefault(require("./textarea/README.md"));
+const README_md_53 = __importDefault(require("./time-picker/README.md"));
+const README_md_54 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_55 = __importDefault(require("./toggle/README.md"));
+const README_md_56 = __importDefault(require("./tooltip/README.md"));
+const README_md_57 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "alert-bubble": README_md_1.default,
     "avatar": README_md_2.default,
@@ -70,26 +71,26 @@ exports.readmes = {
     "button-group": README_md_6.default,
     "button-list": README_md_7.default,
     "calendar": README_md_8.default,
-    "checkbox": README_md_9.default,
-    "checkbox-button": README_md_10.default,
-    "checkbox-input": README_md_11.default,
-    "chip": README_md_12.default,
-    "color-radio": README_md_13.default,
-    "color-radio-group": README_md_14.default,
-    "combobox": README_md_15.default,
-    "date-picker": README_md_16.default,
-    "date-picker-input": README_md_17.default,
-    "date-range-picker": README_md_18.default,
-    "date-range-picker-input": README_md_19.default,
-    "datetime-picker": README_md_20.default,
-    "datetime-picker-input": README_md_21.default,
-    "dialog": README_md_22.default,
-    "dropdown": README_md_23.default,
-    "dropzone": README_md_24.default,
-    "error-message": README_md_25.default,
-    "file-input": README_md_26.default,
-    "flash-messages": README_md_27.default,
-    "form-component": README_md_28.default,
+    "color-radio": README_md_9.default,
+    "color-radio-group": README_md_10.default,
+    "combobox": README_md_11.default,
+    "date-picker": README_md_12.default,
+    "date-picker-input": README_md_13.default,
+    "date-range-picker": README_md_14.default,
+    "date-range-picker-input": README_md_15.default,
+    "datetime-picker": README_md_16.default,
+    "datetime-picker-input": README_md_17.default,
+    "dialog": README_md_18.default,
+    "dropdown": README_md_19.default,
+    "dropzone": README_md_20.default,
+    "error-message": README_md_21.default,
+    "file-input": README_md_22.default,
+    "flash-messages": README_md_23.default,
+    "form-component": README_md_24.default,
+    "checkbox": README_md_25.default,
+    "checkbox-button": README_md_26.default,
+    "checkbox-input": README_md_27.default,
+    "chip": README_md_28.default,
     "icon": README_md_29.default,
     "image-gallery": README_md_30.default,
     "input": README_md_31.default,
@@ -101,21 +102,22 @@ exports.readmes = {
     "message": README_md_37.default,
     "modal": README_md_38.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,
+    "modal-header": README_md_40.default,
+    "multi-combobox": README_md_41.default,
+    "multi-select": README_md_42.default,
+    "pagination": README_md_43.default,
+    "paper": README_md_44.default,
+    "radio": README_md_45.default,
+    "radio-group": README_md_46.default,
+    "raster-image": README_md_47.default,
+    "select": README_md_48.default,
+    "tabs": README_md_49.default,
+    "text-input": README_md_50.default,
+    "text-link": README_md_51.default,
+    "textarea": README_md_52.default,
+    "time-picker": README_md_53.default,
+    "time-picker-input": README_md_54.default,
+    "toggle": README_md_55.default,
+    "tooltip": README_md_56.default,
+    "typography": README_md_57.default,
 };

package/types/form-control-props.d.ts

@@ -1,7 +1,9 @@
 import { ChangeEvent, FocusEventHandler } from "react";
-export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
+export interface ControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
     value: ValueType;
     onChange: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+}
+export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> extends ControlProps<ValueType, ElementType, RestParams> {
     onBlur?: FocusEventHandler<ElementType>;
     onFocus?: FocusEventHandler<ElementType>;
     name: string;