@uxf/ui 10.5.0 → 11.0.0-beta.16

package/avatar-file-input/avatar-file-input.d.ts

@@ -1,18 +1,10 @@
-import React, { MouseEventHandler, ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { FileInputBaseProps } from "../_file-input-base";
-import { IconName } from "../icon/types";
 import { AvatarFileInputVariant } from "./theme";
 export interface AvatarFileInputProps extends FileInputBaseProps {
-    customControls?: (args: {
-        onSelectFile: MouseEventHandler;
-        onRemoveFile: MouseEventHandler;
-    }) => ReactNode;
     helperText?: ReactNode;
-    hiddenLabel?: boolean;
-    icon?: IconName;
     label?: ReactNode;
-    removeFileLabel?: ReactNode;
-    selectFileLabel?: ReactNode;
+    changeFileLabel?: ReactNode;
     variant?: AvatarFileInputVariant;
 }
 export declare const AvatarFileInput: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;

package/avatar-file-input/avatar-file-input.js

@@ -26,37 +26,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AvatarFileInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const file_1 = require("@uxf/core/utils/file");
 const react_1 = __importStar(require("react"));
 const _file_input_base_1 = require("../_file-input-base");
 const avatar_1 = require("../avatar");
-const button_1 = require("../button");
-const form_component_1 = require("../form-component");
 const icon_1 = require("../icon");
 exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     const generatedId = (0, react_1.useId)();
     const id = props.id || generatedId;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const errorId = props.isInvalid && props.id ? `${props.id}--errormessage` : undefined;
-    const stateClassName = (0, cx_1.cx)(((_a = props.isFocused) !== null && _a !== void 0 ? _a : input.focused) && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
-    const rootClassName = (0, cx_1.cx)(`uxf-avatar-file-input uxf-avatar-file-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, stateClassName, props.className);
-    const onSelectFile = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.click(); };
-    const onRemoveFile = () => props.onChange(null);
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label },
-        react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
-            react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
-                react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onFocus: input.onFocus, onChange: props.onChange, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), value: props.value }),
-                props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-avatar-file-input__input-avatar", src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__input-empty" },
-                    react_1.default.createElement(icon_1.Icon, { className: "uxf-avatar-file-input__input-empty-icon", name: (_c = props.icon) !== null && _c !== void 0 ? _c : "cloud" })))),
-            react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls" }, props.customControls ? (props.customControls({
-                onSelectFile,
-                onRemoveFile,
-            })) : (react_1.default.createElement("div", { className: "uxf-avatar-file-input__controls-buttons" },
-                react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--select", disabled: props.isDisabled, onClick: onSelectFile, size: "sm", variant: "white" }, (_d = props.selectFileLabel) !== null && _d !== void 0 ? _d : "Upload image"),
-                !!props.value && !props.isDisabled && (react_1.default.createElement(button_1.Button, { className: "uxf-avatar-file-input__controls-button uxf-avatar-file-input__controls-button--remove", color: "error", disabled: props.isDisabled, onClick: onRemoveFile, size: "sm", variant: "white" }, (_e = props.removeFileLabel) !== null && _e !== void 0 ? _e : "Remove avatar"))))))));
+    const stateClassNames = (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID);
+    const label = props.value && props.changeFileLabel ? props.changeFileLabel : props.label;
+    return (react_1.default.createElement("div", { className: `uxf-avatar-file-input uxf-avatar-file-input--variant-${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
+        react_1.default.createElement("div", { className: "uxf-avatar-file-input__label-wrapper" },
+            props.value ? (react_1.default.createElement(avatar_1.Avatar, { className: (0, cx_1.cx)("uxf-avatar-file-input__image", stateClassNames), src: (0, file_1.getFileUrl)(props.value) })) : (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label", stateClassNames), htmlFor: id, tabIndex: 0 },
+                react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-avatar-file-input__label-icon", stateClassNames), name: "cloud", size: 28 }))),
+            (props.label && typeof props.label === "string") ||
+                (props.value && props.changeFileLabel && typeof props.changeFileLabel === "string") ? (react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-avatar-file-input__label-text", stateClassNames), htmlFor: id, tabIndex: 0 }, label)) : (label)),
+        react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: ref, value: props.value }),
+        props.helperText && (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", errorId && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/create-component-preview-page/ui-components.d.ts

@@ -27,7 +27,6 @@ import * as InputStories from "@uxf/ui/input/input.stories";
 import * as LabelStories from "@uxf/ui/label/label.stories";
 import * as ListItemStories from "@uxf/ui/list-item/list-item.stories";
 import * as LoaderStories from "@uxf/ui/loader/loader.stories";
-import * as MessageStories from "@uxf/ui/message/message.stories";
 import * as ModalStories from "@uxf/ui/modal/modal.stories";
 import * as MultiComboboxStories from "@uxf/ui/multi-combobox/multi-combobox.stories";
 import * as MultiSelectStories from "@uxf/ui/multi-select/multi-select.stories";
@@ -46,7 +45,6 @@ import * as TimePickerStories from "@uxf/ui/time-picker/time-picker-input.storie
 import * as ToggleStories from "@uxf/ui/toggle/toggle.stories";
 import * as TooltipStories from "@uxf/ui/tooltip/tooltip.stories";
 import * as TypographyStories from "@uxf/ui/typography/typography.stories";
-import * as ImageGalleryStories from "../image-gallery/image-gallery.stories";
 export declare const uiComponents: {
     readonly avatar: {
         readonly title: "Avatar";
@@ -148,10 +146,6 @@ export declare const uiComponents: {
         readonly title: "Icon";
         readonly stories: typeof IconStories;
     };
-    readonly "image-gallery": {
-        readonly title: "ImageGallery";
-        readonly stories: typeof ImageGalleryStories;
-    };
     readonly input: {
         readonly title: "Input";
         readonly stories: typeof InputStories;
@@ -168,10 +162,6 @@ export declare const uiComponents: {
         readonly title: "Loader";
         readonly stories: typeof LoaderStories;
     };
-    readonly message: {
-        readonly title: "Message";
-        readonly stories: typeof MessageStories;
-    };
     readonly modal: {
         readonly title: "Modal";
         readonly stories: typeof ModalStories;

package/create-component-preview-page/ui-components.js

@@ -53,7 +53,6 @@ const InputStories = __importStar(require("@uxf/ui/input/input.stories"));
 const LabelStories = __importStar(require("@uxf/ui/label/label.stories"));
 const ListItemStories = __importStar(require("@uxf/ui/list-item/list-item.stories"));
 const LoaderStories = __importStar(require("@uxf/ui/loader/loader.stories"));
-const MessageStories = __importStar(require("@uxf/ui/message/message.stories"));
 const ModalStories = __importStar(require("@uxf/ui/modal/modal.stories"));
 const MultiComboboxStories = __importStar(require("@uxf/ui/multi-combobox/multi-combobox.stories"));
 const MultiSelectStories = __importStar(require("@uxf/ui/multi-select/multi-select.stories"));
@@ -72,7 +71,6 @@ const TimePickerStories = __importStar(require("@uxf/ui/time-picker/time-picker-
 const ToggleStories = __importStar(require("@uxf/ui/toggle/toggle.stories"));
 const TooltipStories = __importStar(require("@uxf/ui/tooltip/tooltip.stories"));
 const TypographyStories = __importStar(require("@uxf/ui/typography/typography.stories"));
-const ImageGalleryStories = __importStar(require("../image-gallery/image-gallery.stories"));
 exports.uiComponents = {
     avatar: {
         title: "Avatar",
@@ -174,10 +172,6 @@ exports.uiComponents = {
         title: "Icon",
         stories: IconStories,
     },
-    "image-gallery": {
-        title: "ImageGallery",
-        stories: ImageGalleryStories,
-    },
     input: {
         title: "Input",
         stories: InputStories,
@@ -194,10 +188,6 @@ exports.uiComponents = {
         title: "Loader",
         stories: LoaderStories,
     },
-    message: {
-        title: "Message",
-        stories: MessageStories,
-    },
     modal: {
         title: "Modal",
         stories: ModalStories,

package/create-component-preview-page/ui-readmes.js

@@ -29,30 +29,28 @@ const README_md_22 = __importDefault(require("@uxf/ui/file-input/README.md"));
 const README_md_23 = __importDefault(require("@uxf/ui/flash-messages/README.md"));
 const README_md_24 = __importDefault(require("@uxf/ui/form-component/README.md"));
 const README_md_25 = __importDefault(require("@uxf/ui/icon/README.md"));
-const README_md_26 = __importDefault(require("@uxf/ui/image-gallery/README.md"));
-const README_md_27 = __importDefault(require("@uxf/ui/input/README.md"));
-const README_md_28 = __importDefault(require("@uxf/ui/label/README.md"));
-const README_md_29 = __importDefault(require("@uxf/ui/list-item/README.md"));
-const README_md_30 = __importDefault(require("@uxf/ui/loader/README.md"));
-const README_md_31 = __importDefault(require("@uxf/ui/message/README.md"));
-const README_md_32 = __importDefault(require("@uxf/ui/modal/README.md"));
-const README_md_33 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
-const README_md_34 = __importDefault(require("@uxf/ui/multi-select/README.md"));
-const README_md_35 = __importDefault(require("@uxf/ui/pagination/README.md"));
-const README_md_36 = __importDefault(require("@uxf/ui/paper/README.md"));
-const README_md_37 = __importDefault(require("@uxf/ui/radio-group/README.md"));
-const README_md_38 = __importDefault(require("@uxf/ui/radio/README.md"));
-const README_md_39 = __importDefault(require("@uxf/ui/raster-image/README.md"));
-const README_md_40 = __importDefault(require("@uxf/ui/select/README.md"));
-const README_md_41 = __importDefault(require("@uxf/ui/tabs/README.md"));
-const README_md_42 = __importDefault(require("@uxf/ui/text-input/README.md"));
-const README_md_43 = __importDefault(require("@uxf/ui/text-link/README.md"));
-const README_md_44 = __importDefault(require("@uxf/ui/textarea/README.md"));
-const README_md_45 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
-const README_md_46 = __importDefault(require("@uxf/ui/time-picker/README.md"));
-const README_md_47 = __importDefault(require("@uxf/ui/toggle/README.md"));
-const README_md_48 = __importDefault(require("@uxf/ui/tooltip/README.md"));
-const README_md_49 = __importDefault(require("@uxf/ui/typography/README.md"));
+const README_md_26 = __importDefault(require("@uxf/ui/input/README.md"));
+const README_md_27 = __importDefault(require("@uxf/ui/label/README.md"));
+const README_md_28 = __importDefault(require("@uxf/ui/list-item/README.md"));
+const README_md_29 = __importDefault(require("@uxf/ui/loader/README.md"));
+const README_md_30 = __importDefault(require("@uxf/ui/modal/README.md"));
+const README_md_31 = __importDefault(require("@uxf/ui/multi-combobox/README.md"));
+const README_md_32 = __importDefault(require("@uxf/ui/multi-select/README.md"));
+const README_md_33 = __importDefault(require("@uxf/ui/pagination/README.md"));
+const README_md_34 = __importDefault(require("@uxf/ui/paper/README.md"));
+const README_md_35 = __importDefault(require("@uxf/ui/radio-group/README.md"));
+const README_md_36 = __importDefault(require("@uxf/ui/radio/README.md"));
+const README_md_37 = __importDefault(require("@uxf/ui/raster-image/README.md"));
+const README_md_38 = __importDefault(require("@uxf/ui/select/README.md"));
+const README_md_39 = __importDefault(require("@uxf/ui/tabs/README.md"));
+const README_md_40 = __importDefault(require("@uxf/ui/text-input/README.md"));
+const README_md_41 = __importDefault(require("@uxf/ui/text-link/README.md"));
+const README_md_42 = __importDefault(require("@uxf/ui/textarea/README.md"));
+const README_md_43 = __importDefault(require("@uxf/ui/time-picker-input/README.md"));
+const README_md_44 = __importDefault(require("@uxf/ui/time-picker/README.md"));
+const README_md_45 = __importDefault(require("@uxf/ui/toggle/README.md"));
+const README_md_46 = __importDefault(require("@uxf/ui/tooltip/README.md"));
+const README_md_47 = __importDefault(require("@uxf/ui/typography/README.md"));
 exports.uiReadmes = {
     avatar: README_md_2.default,
     "avatar-file-input": README_md_1.default,
@@ -79,28 +77,26 @@ exports.uiReadmes = {
     "flash-messages": README_md_23.default,
     "form-component": README_md_24.default,
     icon: README_md_25.default,
-    "image-gallery": README_md_26.default,
-    input: README_md_27.default,
-    label: README_md_28.default,
-    "list-item": README_md_29.default,
-    loader: README_md_30.default,
-    message: README_md_31.default,
-    modal: README_md_32.default,
-    "multi-combobox": README_md_33.default,
-    "multi-select": README_md_34.default,
-    pagination: README_md_35.default,
-    paper: README_md_36.default,
-    radio: README_md_38.default,
-    "radio-group": README_md_37.default,
-    "raster-image": README_md_39.default,
-    select: README_md_40.default,
-    tabs: README_md_41.default,
-    "text-input": README_md_42.default,
-    "text-link": README_md_43.default,
-    textarea: README_md_44.default,
-    "time-picker": README_md_46.default,
-    "time-picker-input": README_md_45.default,
-    toggle: README_md_47.default,
-    tooltip: README_md_48.default,
-    typography: README_md_49.default,
+    input: README_md_26.default,
+    label: README_md_27.default,
+    "list-item": README_md_28.default,
+    loader: README_md_29.default,
+    modal: README_md_30.default,
+    "multi-combobox": README_md_31.default,
+    "multi-select": README_md_32.default,
+    pagination: README_md_33.default,
+    paper: README_md_34.default,
+    radio: README_md_36.default,
+    "radio-group": README_md_35.default,
+    "raster-image": README_md_37.default,
+    select: README_md_38.default,
+    tabs: README_md_39.default,
+    "text-input": README_md_40.default,
+    "text-link": README_md_41.default,
+    textarea: README_md_42.default,
+    "time-picker": README_md_44.default,
+    "time-picker-input": README_md_43.default,
+    toggle: README_md_45.default,
+    tooltip: README_md_46.default,
+    typography: README_md_47.default,
 };

package/css/avatar-file-input.css

@@ -1,146 +1,116 @@
 .uxf-avatar-file-input {
-    &.is-disabled .uxf-avatar-file-input__inner-wrapper {
-        cursor: not-allowed;
+    align-items: center;
+    display: flex;
+    gap: theme("spacing.4");
+
+    &__input {
+        display: none;
     }
 
-    &__inner-wrapper {
-        align-items: center;
-        display: flex;
-        gap: theme("spacing.4");
-        margin-top: theme("spacing.2");
+    &--variant-default {
+        .uxf-avatar-file-input__label {
+            border-radius: theme("borderRadius.full");
+        }
     }
 
-    &__input {
+    &__label {
+        @apply transition-all duration-75;
+
+        align-items: center;
+        border-style: dashed;
+        border-width: theme("borderWidth.2");
         cursor: pointer;
-        flex-shrink: 0;
+        display: flex;
         height: theme("height.20");
-        position: relative;
+        justify-content: center;
         width: theme("width.20");
 
-        &:hover .uxf-avatar-file-input__input-empty {
-            :root .light & {
-                --bg-color: theme("colors.lightBorder/.25");
-            }
+        :root .light & {
+            border-color: theme("colors.lightBorder");
+        }
 
-            :root .dark & {
-                --bg-color: theme("colors.darkBorder/.25");
-            }
+        :root .dark & {
+            border-color: theme("colors.darkBorder");
+        }
+
+        &-wrapper {
+            align-items: center;
+            display: flex;
+            gap: theme("spacing.4");
         }
 
-        &.is-invalid .uxf-avatar-file-input__input-empty {
+        &-icon {
             :root .light & {
-                --bg-color: theme("colors.error.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.error.DEFAULT");
+                color: theme("colors.lightLow");
             }
 
             :root .dark & {
-                --bg-color: theme("colors.error.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.error.DEFAULT");
+                color: theme("colors.lightBorder");
             }
-        }
 
-        &.is-disabled {
-            pointer-events: none;
-
-            .uxf-avatar-file-input__input-empty {
+            &.is-invalid {
                 :root .light & {
-                    --border-color: var(--color);
-                    --color: theme("colors.lightBorder");
+                    color: theme("colors.error.DEFAULT");
                 }
 
                 :root .dark & {
-                    --border-color: var(--color);
-                    --color: theme("colors.darkBorder");
+                    color: theme("colors.error.DEFAULT");
                 }
             }
-
-            .uxf-avatar-file-input__input-avatar {
-                opacity: 0.5;
-            }
         }
-    }
-
-    &__input-element {
-        @apply sr-only;
 
-        &:focus-visible + .uxf-avatar-file-input__input-empty {
+        &:hover {
             border-width: theme("borderWidth.4");
+        }
 
-            /* :root .light & {
-                --bg-color: theme("colors.primary.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.primary.DEFAULT");
+        &.is-invalid {
+            :root .light & {
+                border-color: theme("colors.error.DEFAULT");
             }
 
             :root .dark & {
-                --bg-color: theme("colors.primary.DEFAULT/.05");
-                --border-color: var(--color);
-                --color: theme("colors.primary.DEFAULT");
-            */
+                border-color: theme("colors.error.DEFAULT");
+            }
         }
-    }
 
-    &__input-avatar {
-        border-radius: inherit;
-        display: flex;
-        height: 100%;
-        width: 100%;
-    }
+        &.is-disabled {
+            background-color: theme("colors.lightLow/.20");
+            cursor: not-allowed;
 
-    &__input-empty {
-        --bg-color: transparent;
+            &:hover {
+                border-width: theme("borderWidth.2");
+            }
+        }
+    }
 
-        @apply transition-all duration-75;
+    &__label-text {
+        @apply text-sm shadow-sm;
 
-        align-items: center;
-        background-color: var(--bg-color);
-        border: theme("borderWidth.2") dashed var(--border-color);
-        border-radius: inherit;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        width: 100%;
+        border: theme("borderWidth.DEFAULT") solid theme("colors.gray.300");
+        padding: theme("spacing[1.5]") theme("spacing.3");
+        text-align: center;
 
         :root .light & {
-            --color: theme("colors.lightMedium");
-            --border-color: theme("colors.lightBorder");
+            color: theme("colors.lightHigh");
         }
 
         :root .dark & {
-            --color: theme("colors.darkMedium");
-            --border-color: theme("colors.darkBorder");
+            color: theme("colors.lightBorder");
         }
-    }
-
-    &__input-empty-icon {
-        color: var(--color);
-        height: theme("width.6");
-        width: theme("width.6");
-    }
-
-    &__controls-buttons {
-        align-items: flex-start;
-        display: flex;
-        flex-direction: column;
-        gap: theme("spacing.2");
-        justify-content: center;
-    }
 
-    &__controls-button--remove .uxf-button__text {
-        color: theme("colors.error.DEFAULT");
-    }
+        &.is-invalid {
+            :root .light & {
+                color: theme("colors.error.DEFAULT");
+            }
 
-    &--variant-default {
-        .uxf-avatar-file-input__input {
-            border-radius: theme("borderRadius.full");
+            :root .dark & {
+                color: theme("colors.error.DEFAULT");
+            }
         }
     }
 
-    &--variant-square {
-        .uxf-avatar-file-input__input {
-            border-radius: 0;
-        }
+    &__image {
+        height: theme("height.20");
+        width: theme("width.20");
     }
 }

package/css/calendar.css

@@ -115,6 +115,8 @@
                 :root .light & {
                     --bg-color: theme("backgroundColor.lightHigh");
                     --color: theme("colors.white");
+
+                    border: 2px solid theme("colors.lightMedium");
                 }
 
                 :root .dark & {
@@ -128,8 +130,11 @@
             &.uxf-calendar__cell--selected {
                 .uxf-calendar__cell__inner {
                     background-color: theme("backgroundColor.transparent");
-                    border: 2px solid theme("colors.darkMedium");
                     color: theme("colors.white");
+
+                    :root .light & {
+                        border-color: theme("colors.white");
+                    }
                 }
             }
 

package/message/README.md

@@ -1,25 +1 @@
-# Message
-
-## CSS dependencies
-
-```css
-@import url("@uxf/ui/message/message.css");
-@import url("@uxf/ui/dialog/dialog.css");
-@import url("@uxf/ui/button/button.css");
-```
-
-## Implementation
-
-```tsx
-import {AppProps} from "next/app";
-import {getMessageRef, Message} from "@uxf/ui/message";
-
-function App(props: AppProps) {
-    return (
-        <UiContextProvider value={...}>
-            {props.children}
-            <Message ref={getMessageRef()}/>
-        </UiContextProvider>
-    );
-}
-```
+# Message

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.5.0",
+  "version": "11.0.0-beta.16",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,9 @@
   "dependencies": {
     "@floating-ui/react": "0.26.0",
     "@headlessui/react": "1.7.14",
-    "@uxf/core": "10.4.0",
+    "@uxf/core": "10.0.0",
     "@uxf/datepicker": "10.0.0",
-    "@uxf/styles": "10.4.0",
+    "@uxf/styles": "10.0.0",
     "color2k": "2.0.2",
     "dayjs": "1.11.10",
     "jump.js": "1.0.2",

package/radio-group/radio-group.d.ts

@@ -6,7 +6,7 @@ export type RadioGroupOptionValueId = string | number;
 export interface RadioGroupOption {
     disabled?: boolean;
     id: RadioGroupOptionValueId;
-    label: ReactNode;
+    label: string;
 }
 export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValueId | null> {
     className?: string;

package/tabs/tabs.d.ts

@@ -7,7 +7,6 @@ export interface TabsPanelProps {
 }
 export interface TabsProps {
     className?: string;
-    customTabListContent?: ReactNode;
     defaultIndex?: number;
     grow?: boolean;
     onChange?: (index: number) => void;

package/tabs/tabs.js

@@ -62,8 +62,7 @@ const TabsRoot = (0, react_2.forwardRef)((props, ref) => {
             react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
                     var _a;
                     return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
-                }, key: `${tab.title}--${index}` }, tab.title)))),
-            props.customTabListContent),
+                }, key: `${tab.title}--${index}` }, tab.title))))),
         react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
 });
 TabsRoot.displayName = "UxfUiTabs";

package/image-gallery/README.md

@@ -1,8 +0,0 @@
-# Image Gallery
-
-## CSS dependencies
-
-```css
-@import url("@uxf/ui/icon/icon.css");
-@import url("@uxf/ui/image-gallery/image-gallery.css");
-```