@uxf/ui 10.0.12 → 10.3.0

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

@@ -1,10 +1,18 @@
-import React, { ReactNode } from "react";
+import React, { MouseEventHandler, 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;
-    changeFileLabel?: ReactNode;
+    removeFileLabel?: ReactNode;
+    selectFileLabel?: ReactNode;
     variant?: AvatarFileInputVariant;
 }
 export declare const AvatarFileInput: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -26,28 +26,37 @@ 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;
+    var _a, _b, _c, _d, _e;
     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 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))));
+    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"))))))));
 });
 exports.AvatarFileInput.displayName = "UxfUiAvatarFileInput";

package/css/avatar-file-input.css

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

package/package.json

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