@uxf/ui 11.28.4 → 11.30.0

package/components.d.ts

@@ -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";
@@ -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

@@ -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"));
@@ -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;
@@ -36,6 +37,8 @@
     --uxf-color-warning-border: #fec84b;
     --uxf-color-warning-surface-default: #dc6803;
     --uxf-color-warning-surface-default-hover: #b54707;
+    --uxf-color-warning-surface-muted: #fef0c7;
+    --uxf-color-warning-icon-on-muted: #b54707;
 
     /** info */
     --uxf-color-info-text: #3e4783;

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,47 @@
+: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.3") theme("spacing.2") theme("spacing.3") theme("spacing.4");
+    width: 100%;
+
+    &--has-go-back {
+        padding: theme("spacing.3") theme("spacing.2");
+    }
+
+    &__text-wrapper {
+        flex-grow: 1;
+        padding: theme("spacing.1");
+    }
+
+    &__title {
+        padding-top: 1px;
+    }
+
+    &__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/css/text-link.css

@@ -1,9 +1,24 @@
 .uxf-text-link {
-    @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400 relative underline outline-none
-        transition before:absolute
-        before:-inset-1 focus-visible:before:rounded-lg focus-visible:before:border-2;
+    @apply relative underline outline-none transition before:absolute before:-inset-1 focus-visible:before:rounded-lg focus-visible:before:border-2;
 
     :root .dark & {
         @apply text-primary focus-visible:before:border-primary is-hoverable:text-primary-400;
     }
+
+    &--variant-default {
+        color: var(--uxf-color-primary-surface-default);
+
+        @apply is-hoverable:text-[--uxf-color-primary-surface-default-hover] focus-visible:before:border-[--uxf-color-primary-surface-default];
+    }
+
+    &--variant-text {
+        color: var(--uxf-color-base-text-high-emphasis);
+
+        @apply is-hoverable:text-[--uxf-color-base-text-low-emphasis] focus-visible:before:border-[--uxf-color-base-text-high-emphasis];
+    }
+
+    &.is-disabled {
+        color: var(--uxf-color-base-text-disabled);
+        pointer-events: none;
+    }
 }

package/css/toggle.css

@@ -1,59 +1,143 @@
 .uxf-toggle {
-    @apply focus-visible:ring-primary relative inline-flex h-6 w-12 shrink-0 items-center rounded-full bg-gray-200 p-0.5
-        outline-none ring-offset-2 focus-visible:ring-2 [&>*]:active:w-[30px];
+    --uxf-toggle-selected-color: var(--uxf-color-primary-surface-default);
+
+    align-items: center;
+    background-color: theme("colors.gray.200");
+    border-radius: theme("borderRadius.full");
+    display: inline-flex;
+    flex-shrink: 0;
+    outline: none;
+    padding: 2px;
+    position: relative;
+
+    @apply ring-offset-2 focus-visible:ring-2 focus-visible:ring-[--uxf-toggle-selected-color];
+
+    &--size-default {
+        height: 24px;
+        width: 48px;
+
+        .uxf-toggle__inner {
+            height: 20px;
+            width: 20px;
+        }
+
+        &:active {
+            .uxf-toggle__inner {
+                width: 30px;
+            }
+        }
+    }
+
+    &--size-sm {
+        height: 16px;
+        width: 28px;
+
+        .uxf-toggle__inner {
+            height: 12px;
+            width: 12px;
+        }
+
+        &:active {
+            .uxf-toggle__inner {
+                width: 16px;
+            }
+        }
+    }
 
     :root .dark & {
-        @apply focus-visible:ring-primary bg-gray-400 focus-visible:ring-offset-gray-900;
+        background-color: theme("colors.gray.400");
+
+        @apply focus-visible:ring-[--uxf-toggle-background-color] focus-visible:ring-offset-gray-900;
     }
 
     &__wrapper {
-        @apply flex items-center justify-between space-x-4 p-4;
+        align-items: center;
+        display: flex;
+        gap: 16px;
+        justify-content: space-between;
+        padding: 16px;
 
         &--reversed {
-            @apply flex-row-reverse space-x-0;
+            flex-direction: row-reverse;
 
             .uxf-toggle__label {
-                @apply pr-4;
+                padding-right: 16px;
+            }
+        }
+
+        &--size-sm {
+            .uxf-toggle__label {
+                font-size: 14px;
             }
         }
     }
 
     &__label {
-        @apply text-lightMedium w-full;
+        color: theme("colors.lightMedium");
+        width: 100%;
 
         :root .dark & {
-            @apply text-darkMedium;
+            color: theme("colors.darkMedium");
         }
     }
 
     &__inner {
-        @apply inline-block h-5 w-5 transform rounded-full bg-white bg-white transition-all;
+        background-color: theme("colors.white");
+        border-radius: theme("borderRadius.full");
+        display: inline-block;
+
+        @apply transition-all;
 
         :root .dark & {
-            @apply bg-gray-900;
+            background-color: theme("colors.gray.900");
         }
     }
 
     &.is-selected {
-        @apply bg-primary [&>*]:translate-x-6 [&>*]:active:translate-x-[14px];
+        background-color: var(--uxf-toggle-selected-color);
+
+        &.uxf-toggle--size-default {
+            .uxf-toggle__inner {
+                transform: translateX(24px);
+            }
+
+            &:active {
+                .uxf-toggle__inner {
+                    transform: translateX(14px);
+                }
+            }
+        }
+
+        &.uxf-toggle--size-sm {
+            .uxf-toggle__inner {
+                transform: translateX(12px);
+            }
+
+            &:active {
+                .uxf-toggle__inner {
+                    transform: translateX(8px);
+                }
+            }
+        }
 
         :root .dark & {
-            @apply bg-primary;
+            background-color: var(--uxf-toggle-selected-color);
         }
     }
 
     &.is-disabled {
-        @apply pointer-events-none bg-gray-100;
+        background-color: theme("colors.gray.100");
+        pointer-events: none;
 
         :root .dark & {
-            @apply bg-gray-700;
+            background-color: theme("colors.gray.700");
         }
 
         .uxf-toggle__inner {
-            @apply bg-gray-400;
+            background-color: theme("colors.gray.400");
 
             :root .dark & {
-                @apply bg-gray-500;
+                background-color: theme("colors.gray.500");
             }
         }
     }

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,
@@ -110,6 +115,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 fill="currentColor" 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"/>`,
+    },
     user: {
         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-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.4",
+  "version": "11.30.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

@@ -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

@@ -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,
@@ -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/text-link/theme.d.ts

@@ -1,3 +1,4 @@
 export interface TextLinkVariants {
     default: true;
+    text: true;
 }

package/toggle/theme.d.ts

@@ -3,3 +3,8 @@ export interface ToggleVariants {
     reversed: true;
 }
 export type ToggleVariant = keyof ToggleVariants;
+export interface ToggleSizes {
+    sm: true;
+    default: true;
+}
+export type ToggleSize = keyof ToggleSizes;

package/toggle/toggle.d.ts

@@ -1,4 +1,4 @@
-import { ToggleVariant } from "@uxf/ui/toggle/theme";
+import { ToggleSize, ToggleVariant } from "@uxf/ui/toggle/theme";
 import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
 export interface ToggleProps extends FormControlProps<boolean | undefined> {
@@ -6,6 +6,7 @@ export interface ToggleProps extends FormControlProps<boolean | undefined> {
     hiddenLabel?: boolean;
     id?: string;
     label: ReactNode;
+    size?: ToggleSize;
     style?: CSSProperties;
     variant?: ToggleVariant;
 }

package/toggle/toggle.js

@@ -29,10 +29,10 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_2 = __importStar(require("react"));
 exports.Toggle = (0, react_2.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
-            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
+        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, `uxf-toggle__wrapper--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
+            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, `uxf-toggle--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
                 react_2.default.createElement("span", { className: "uxf-toggle__inner" })),
             react_2.default.createElement(react_1.Switch.Label, { hidden: props.hiddenLabel, className: "uxf-toggle__label" }, props.label))));
 });

package/toggle/toggle.stories.js

@@ -36,6 +36,7 @@ function Default() {
     const onChange = (0, action_1.action)("onChange", () => setChecked((prev) => !prev));
     const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, name: "toggle" }),
+        react_1.default.createElement(index_1.Toggle, { label: "Opravdu? - size sm", onChange: onChange, value: checked, name: "toggle", size: "sm" }),
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, isDisabled: true, name: "toggle-disabled" }),
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu?", onChange: onChange, value: checked, hiddenLabel: true, name: "toggle-hidden-label" }),
         react_1.default.createElement(index_1.Toggle, { label: "Opravdu? (reversed)", onChange: onChange, value: checked, variant: "reversed", name: "toggle-reversed" })));

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;