@uxf/ui 11.29.0 → 11.30.1

package/components.d.ts

@@ -6,6 +6,10 @@ 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";
@@ -22,10 +26,6 @@ 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";
@@ -88,6 +88,22 @@ 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;
@@ -152,22 +168,6 @@ 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;

package/components.js

@@ -33,6 +33,10 @@ 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"));
@@ -49,10 +53,6 @@ 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"));
@@ -115,6 +115,22 @@ 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
@@ -179,22 +195,6 @@ 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

package/css/colors.css

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

@@ -50,7 +50,7 @@
         }
     }
 
-    &--variant-rightDrawer {
+    &--variant-drawer-right {
         .uxf-dialog__body {
             @screen sm {
                 align-items: stretch;

package/css/modal-header.css

@@ -22,11 +22,11 @@
     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");
+    padding: theme("spacing.3") theme("spacing.2") theme("spacing.3") theme("spacing.4");
     width: 100%;
 
     &--has-go-back {
-        padding: theme("spacing.2");
+        padding: theme("spacing.3") theme("spacing.2");
     }
 
     &__text-wrapper {
@@ -34,6 +34,10 @@
         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);

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.js

@@ -35,6 +35,7 @@ const react_1 = __importStar(require("react"));
 const _input_with_popover_1 = require("../_input-with-popover");
 const datetime_picker_1 = require("../datetime-picker");
 const icon_1 = require("../icon");
+const get_datetime_string_1 = require("./get-datetime-string");
 (0, dayjs_1.extend)(customParseFormat_1.default);
 exports.ALLOWED_DATETIME_FORMAT = [
     "D. M. YYYY H:mm",
@@ -75,12 +76,10 @@ exports.DatetimePickerInput = (0, react_1.forwardRef)((props, ref) => {
             onChange(value === "" ? null : value);
         }
     }, [onChange]);
-    const value = getValue(props.value);
+    const value = getValue(props.value); // hodnota zobrazená v textinputu (human readable)
     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 }) => (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 })))));
+        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, get_datetime_string_1.getDatetimeString)(props.value), 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/datetime-picker-input/get-datetime-string.d.ts

@@ -0,0 +1,6 @@
+import { DatetimeString } from "@uxf/core/date";
+import { Nullish } from "@uxf/core/types";
+/**
+ * @deprecated tuhle metodu nepoužívat - něco podobného se musí přenést do @uxf/core
+ */
+export declare function getDatetimeString(value: string | Nullish): DatetimeString | null;

package/datetime-picker-input/get-datetime-string.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.getDatetimeString = void 0;
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const dayjs_1 = __importDefault(require("dayjs"));
+/**
+ * @deprecated tuhle metodu nepoužívat - něco podobného se musí přenést do @uxf/core
+ */
+function getDatetimeString(value) {
+    if ((0, is_nil_1.isNil)(value)) {
+        return null;
+    }
+    const date = (0, dayjs_1.default)(value, ["YYYY-MM-DD[T]HH:mm:ssZ", "YYYY-MM-DD[T]HH:mm:ss.SSS[Z]"]);
+    return date.isValid() ? date.format("YYYY-MM-DD[T]HH:mm:ssZ") : null;
+}
+exports.getDatetimeString = getDatetimeString;

package/icons-config.js

@@ -115,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/package.json

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

package/readmes.d.ts

@@ -9,6 +9,10 @@ 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;
@@ -25,10 +29,6 @@ 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;

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("./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_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_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"));
@@ -71,26 +71,26 @@ exports.readmes = {
     "button-group": README_md_6.default,
     "button-list": README_md_7.default,
     "calendar": README_md_8.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,
+    "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,
     "icon": README_md_29.default,
     "image-gallery": README_md_30.default,
     "input": README_md_31.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" })));