@kopexa/sight 17.12.0 → 17.13.0

package/dist/components/file-upload/avatar-upload.js

@@ -0,0 +1,841 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/file-upload/avatar-upload.tsx
+var avatar_upload_exports = {};
+__export(avatar_upload_exports, {
+  AvatarUpload: () => AvatarUpload
+});
+module.exports = __toCommonJS(avatar_upload_exports);
+var import_button = require("@kopexa/button");
+var import_callout = require("@kopexa/callout");
+var import_i18n4 = require("@kopexa/i18n");
+var import_icons2 = require("@kopexa/icons");
+var import_image_crop = require("@kopexa/image-crop");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_react2 = require("react");
+
+// src/hooks/use-file-upload/index.ts
+var import_i18n2 = require("@kopexa/i18n");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react = require("react");
+
+// src/hooks/use-file-upload/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  file_exceeds_max: {
+    id: "use_file_upload.file_exceeds_max",
+    defaultMessage: `File "{name}" exceeds the maximum size of {max}.`,
+    description: "Shown when a single file is larger than allowed"
+  },
+  file_not_accepted: {
+    id: "use_file_upload.file_not_accepted",
+    defaultMessage: `File "{name}" is not an accepted file type.`,
+    description: "Shown when file type/extension doesn't match accept"
+  },
+  too_many_files: {
+    id: "file_upload.too_many_files",
+    defaultMessage: "You can only upload a maximum of {max} files.",
+    description: "Shown when maxFiles would be exceeded"
+  }
+});
+
+// src/hooks/use-file-upload/index.ts
+var useFileUpload = (options = {}) => {
+  const {
+    maxFiles = Number.POSITIVE_INFINITY,
+    maxSize = Number.POSITIVE_INFINITY,
+    accept = "*",
+    multiple = false,
+    initialFiles = [],
+    onFilesChange,
+    onFilesAdded,
+    onError
+  } = options;
+  const t = (0, import_i18n2.useSafeIntl)();
+  const [state, setState] = (0, import_react.useState)({
+    files: initialFiles.map((file) => ({
+      file,
+      id: file.id,
+      preview: file.url
+    })),
+    isDragging: false,
+    errors: []
+  });
+  const inputRef = (0, import_react.useRef)(null);
+  const validateFile = (0, import_react.useCallback)(
+    (file) => {
+      if (file instanceof File) {
+        if (file.size > maxSize) {
+          return t.formatMessage(messages.file_exceeds_max, {
+            name: file.name,
+            max: (0, import_shared_utils.formatBytes)(maxSize)
+          });
+        }
+      } else {
+        if (file.size > maxSize) {
+          return t.formatMessage(messages.file_exceeds_max, {
+            name: file.name,
+            max: (0, import_shared_utils.formatBytes)(maxSize)
+          });
+        }
+      }
+      if (accept !== "*") {
+        const acceptedTypes = accept.split(",").map((type) => type.trim());
+        const fileType = file instanceof File ? file.type || "" : file.type;
+        const fileExtension = `.${file instanceof File ? file.name.split(".").pop() : file.name.split(".").pop()}`;
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return fileExtension.toLowerCase() === type.toLowerCase();
+          }
+          if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0];
+            return fileType.startsWith(`${baseType}/`);
+          }
+          return fileType === type;
+        });
+        if (!isAccepted) {
+          return t.formatMessage(messages.file_not_accepted, {
+            name: file instanceof File ? file.name : file.name
+          });
+        }
+      }
+      return null;
+    },
+    [accept, maxSize, t.formatMessage]
+  );
+  const createPreview = (0, import_react.useCallback)(
+    (file) => {
+      if (file instanceof File) {
+        return URL.createObjectURL(file);
+      }
+      return file.url;
+    },
+    []
+  );
+  const generateUniqueId = (0, import_react.useCallback)((file) => {
+    if (file instanceof File) {
+      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    return file.id;
+  }, []);
+  const clearFiles = (0, import_react.useCallback)(() => {
+    setState((prev) => {
+      for (const file of prev.files) {
+        if (file.preview && file.file instanceof File && file.file.type.startsWith("image/")) {
+          URL.revokeObjectURL(file.preview);
+        }
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+      const newState = {
+        ...prev,
+        files: [],
+        errors: []
+      };
+      onFilesChange == null ? void 0 : onFilesChange(newState.files);
+      return newState;
+    });
+  }, [onFilesChange]);
+  const addFiles = (0, import_react.useCallback)(
+    (newFiles) => {
+      if (!newFiles || newFiles.length === 0) return;
+      const newFilesArray = Array.from(newFiles);
+      const errors = [];
+      setState((prev) => ({ ...prev, errors: [] }));
+      if (!multiple) {
+        clearFiles();
+      }
+      if (multiple && maxFiles !== Number.POSITIVE_INFINITY && state.files.length + newFilesArray.length > maxFiles) {
+        errors.push(
+          t.formatMessage(messages.too_many_files, {
+            max: maxFiles
+          })
+        );
+        onError == null ? void 0 : onError(errors);
+        setState((prev) => ({ ...prev, errors }));
+        return;
+      }
+      const validFiles = [];
+      for (const file of newFilesArray) {
+        if (multiple) {
+          const isDuplicate = state.files.some(
+            (existingFile) => existingFile.file.name === file.name && existingFile.file.size === file.size
+          );
+          if (isDuplicate) {
+            return;
+          }
+        }
+        if (file.size > maxSize) {
+          errors.push(
+            multiple ? `Some files exceed the maximum size of ${(0, import_shared_utils.formatBytes)(maxSize)}.` : `File exceeds the maximum size of ${(0, import_shared_utils.formatBytes)(maxSize)}.`
+          );
+          continue;
+        }
+        const error = validateFile(file);
+        if (error) {
+          errors.push(error);
+        } else {
+          validFiles.push({
+            file,
+            id: generateUniqueId(file),
+            preview: createPreview(file)
+          });
+        }
+      }
+      if (validFiles.length > 0) {
+        onFilesAdded == null ? void 0 : onFilesAdded(validFiles);
+        setState((prev) => {
+          const newFiles2 = !multiple ? validFiles : [...prev.files, ...validFiles];
+          onFilesChange == null ? void 0 : onFilesChange(newFiles2);
+          return {
+            ...prev,
+            files: newFiles2,
+            errors
+          };
+        });
+      } else if (errors.length > 0) {
+        onError == null ? void 0 : onError(errors);
+        setState((prev) => ({
+          ...prev,
+          errors
+        }));
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [
+      onError,
+      state.files,
+      maxFiles,
+      multiple,
+      maxSize,
+      validateFile,
+      createPreview,
+      generateUniqueId,
+      clearFiles,
+      onFilesChange,
+      onFilesAdded,
+      t.formatMessage
+    ]
+  );
+  const removeFile = (0, import_react.useCallback)(
+    (id) => {
+      setState((prev) => {
+        const fileToRemove = prev.files.find((file) => file.id === id);
+        if ((fileToRemove == null ? void 0 : fileToRemove.preview) && fileToRemove.file instanceof File && fileToRemove.file.type.startsWith("image/")) {
+          URL.revokeObjectURL(fileToRemove.preview);
+        }
+        const newFiles = prev.files.filter((file) => file.id !== id);
+        onFilesChange == null ? void 0 : onFilesChange(newFiles);
+        return {
+          ...prev,
+          files: newFiles,
+          errors: []
+        };
+      });
+    },
+    [onFilesChange]
+  );
+  const clearErrors = (0, import_react.useCallback)(() => {
+    setState((prev) => ({
+      ...prev,
+      errors: []
+    }));
+  }, []);
+  const handleDragEnter = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setState((prev) => ({ ...prev, isDragging: true }));
+  }, []);
+  const handleDragLeave = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    setState((prev) => ({ ...prev, isDragging: false }));
+  }, []);
+  const handleDragOver = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = (0, import_react.useCallback)(
+    (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      setState((prev) => ({ ...prev, isDragging: false }));
+      if ((_a = inputRef.current) == null ? void 0 : _a.disabled) {
+        return;
+      }
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        if (!multiple) {
+          const file = e.dataTransfer.files[0];
+          addFiles([file]);
+        } else {
+          addFiles(e.dataTransfer.files);
+        }
+      }
+    },
+    [addFiles, multiple]
+  );
+  const handleFileChange = (0, import_react.useCallback)(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = (0, import_react.useCallback)(() => {
+    if (inputRef.current) {
+      inputRef.current.click();
+    }
+  }, []);
+  const getInputProps = (0, import_react.useCallback)(
+    (props = {}) => {
+      return {
+        ...props,
+        type: "file",
+        onChange: handleFileChange,
+        accept: props.accept || accept,
+        multiple: props.multiple !== void 0 ? props.multiple : multiple,
+        ref: inputRef
+      };
+    },
+    [accept, multiple, handleFileChange]
+  );
+  return [
+    state,
+    {
+      addFiles,
+      removeFile,
+      clearFiles,
+      clearErrors,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      handleFileChange,
+      openFileDialog,
+      getInputProps
+    }
+  ];
+};
+
+// src/components/dialog/dialog.tsx
+var import_dialog = require("@base-ui/react/dialog");
+var import_icons = require("@kopexa/icons");
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_use_controllable_state = require("@kopexa/use-controllable-state");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
+var DialogRoot = (props) => {
+  const {
+    open: openProp,
+    onOpenChange,
+    size,
+    radius,
+    placement,
+    scrollBehavior,
+    ...restProps
+  } = props;
+  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false
+  });
+  const styles = (0, import_theme.dialog)({ size, radius, placement, scrollBehavior });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Root,
+    {
+      "data-slot": "dialog",
+      open,
+      onOpenChange: (open2) => setOpen(open2),
+      ...restProps
+    }
+  ) });
+};
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: (0, import_shared_utils2.cn)(styles.overlay(), className),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dialog.Dialog.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: (0, import_shared_utils2.cn)(styles.content(), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_dialog.Dialog.Close,
+            {
+              "data-slot": "dialog-close",
+              className: styles.close(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: styles.header({ className }),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: styles.footer({ className }),
+      ...props
+    }
+  );
+}
+function DialogBody({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-body",
+      className: styles.body({ className }),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: (0, import_shared_utils2.cn)(styles.title(), className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: (0, import_shared_utils2.cn)(styles.description(), className),
+      ...props
+    }
+  );
+}
+function DialogCloseTrigger({
+  className,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_dialog.Dialog.Close,
+    {
+      "data-slot": "dialog-close-trigger",
+      className: (0, import_shared_utils2.cn)(styles.closeTrigger(), className),
+      ...props
+    }
+  );
+}
+
+// src/components/dialog/index.ts
+var Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Body: DialogBody,
+  CloseTrigger: DialogCloseTrigger,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Header: DialogHeader,
+  Overlay: DialogOverlay,
+  Portal: DialogPortal,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+});
+
+// src/components/file-upload/messages.ts
+var import_i18n3 = require("@kopexa/i18n");
+var messages2 = (0, import_i18n3.defineMessages)({
+  change_avatar: {
+    id: "file_upload.change_avatar",
+    defaultMessage: "Change Avatar",
+    description: "Label for changing the avatar image"
+  },
+  upload_avatar: {
+    id: "file_upload.upload_avatar",
+    defaultMessage: "Upload Avatar",
+    description: "Label for uploading a new avatar image"
+  },
+  remove_avatar: {
+    id: "file_upload.remove_avatar",
+    defaultMessage: "Remove Avatar",
+    description: "Label for removing the current avatar image"
+  },
+  avatar_uploaded: {
+    id: "file_upload.avatar_uploaded",
+    defaultMessage: "Avatar uploaded",
+    description: "Message displayed when the avatar is uploaded successfully"
+  },
+  accepted_file_types: {
+    id: "file_upload.accepted_file_types",
+    defaultMessage: "{types}{size, select, none {} other { up to {size}}}",
+    description: "Message indicating the accepted file types for upload"
+  },
+  cancel: {
+    id: "file_upload.cancel",
+    defaultMessage: "Cancel",
+    description: "Label for canceling the file upload"
+  },
+  apply_crop: {
+    id: "file_upload.apply_crop",
+    defaultMessage: "Apply",
+    description: "Label for applying the crop to the image"
+  }
+});
+
+// src/components/file-upload/utils/data-url-to-file.ts
+async function dataUrlToFile(dataUrl, fileName, typeHint) {
+  const res = await fetch(dataUrl);
+  const blob = await res.blob();
+  const type = typeHint || blob.type || "image/png";
+  const ext = type.includes("jpeg") ? "jpg" : type.split("/")[1] || "png";
+  const safeName = fileName.replace(/\.[^.]+$/, "");
+  return new File([blob], `${safeName}-cropped.${ext}`, { type });
+}
+
+// src/components/file-upload/utils/format-accept-types.ts
+var WILDCARD_GROUPS = {
+  "image/*": "common image formats",
+  "audio/*": "common audio formats",
+  "video/*": "common video formats",
+  "application/*": "common document formats"
+};
+var MIME_TO_LABEL = {
+  "image/png": "PNG",
+  "image/jpeg": "JPG",
+  "image/jpg": "JPG",
+  "application/pdf": "PDF",
+  "text/csv": "CSV",
+  "text/plain": "TXT"
+};
+var EXT_TO_LABEL = {
+  ".png": "PNG",
+  ".jpg": "JPG",
+  ".jpeg": "JPG",
+  ".pdf": "PDF",
+  ".csv": "CSV",
+  ".txt": "TXT"
+};
+function normalizeToken(token) {
+  return token.trim().toLowerCase();
+}
+function formatAcceptedTypes(accept) {
+  var _a, _b;
+  if (!accept || typeof accept !== "string") return "";
+  const tokens = accept.split(",").map(normalizeToken).filter(Boolean);
+  const labels = [];
+  for (const token of tokens) {
+    if (WILDCARD_GROUPS[token]) {
+      labels.push(WILDCARD_GROUPS[token]);
+      continue;
+    }
+    if (token.startsWith(".")) {
+      labels.push(
+        (_a = EXT_TO_LABEL[token]) != null ? _a : token.replace(/^\./, "").toUpperCase()
+      );
+      continue;
+    }
+    if (token.includes("/")) {
+      labels.push((_b = MIME_TO_LABEL[token]) != null ? _b : token.split("/")[1].toUpperCase());
+    }
+  }
+  const seen = /* @__PURE__ */ new Set();
+  return labels.filter((x) => {
+    if (seen.has(x)) return false;
+    seen.add(x);
+    return true;
+  }).join(", ");
+}
+
+// src/components/file-upload/utils/is-image-like.ts
+function isImageLike(file) {
+  var _a, _b;
+  if ((_a = file.type) == null ? void 0 : _a.startsWith("image/")) return true;
+  const name = ((_b = file.name) == null ? void 0 : _b.toLowerCase()) || "";
+  return name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg") || name.endsWith(".webp");
+}
+
+// src/components/file-upload/avatar-upload.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultMaxSize = 2 * 1024 * 1024;
+var AvatarUpload = (props) => {
+  const {
+    maxSize = defaultMaxSize,
+    className,
+    onFileChange,
+    defaultAvatar,
+    orientation,
+    size,
+    shape,
+    accept = ".png,.jpg",
+    cropperEnabled = true,
+    cropAspect = 1,
+    cropMaxImageSize = defaultMaxSize,
+    onCroppedFile,
+    ...rest
+  } = props;
+  const t = (0, import_i18n4.useSafeIntl)();
+  const [cropOpen, setCropOpen] = (0, import_react2.useState)(false);
+  const [cropSourceFile, setCropSourceFile] = (0, import_react2.useState)(null);
+  const pendingOriginalId = (0, import_react2.useRef)(null);
+  const [
+    { files, isDragging, errors },
+    {
+      removeFile,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      getInputProps,
+      clearErrors,
+      addFiles
+    }
+  ] = useFileUpload({
+    maxFiles: 1,
+    maxSize,
+    accept,
+    multiple: false,
+    onFilesChange: (files2) => {
+      onFileChange == null ? void 0 : onFileChange(files2[0] || null);
+    },
+    onFilesAdded: (added) => {
+      var _a;
+      if (!cropperEnabled) return;
+      const raw = (_a = added[0]) == null ? void 0 : _a.file;
+      if (raw instanceof File && isImageLike(raw)) {
+        pendingOriginalId.current = added[0].id;
+        setCropSourceFile(raw);
+        setCropOpen(true);
+      }
+    }
+  });
+  const currentFile = files[0];
+  const previewUrl = (currentFile == null ? void 0 : currentFile.preview) || defaultAvatar;
+  const handleRemove = () => {
+    if (currentFile) {
+      removeFile(currentFile.id);
+      clearErrors();
+    }
+  };
+  const styles = (0, import_theme2.avatarUpload)({
+    size,
+    shape,
+    orientation
+  });
+  const typesLabel = formatAcceptedTypes(accept);
+  const handleCropCancel = (0, import_react2.useCallback)(() => {
+    setCropOpen(false);
+    setCropSourceFile(null);
+    pendingOriginalId.current = null;
+  }, []);
+  const handleCropApply = (0, import_react2.useCallback)(
+    async (croppedDataUrl) => {
+      if (!croppedDataUrl || !cropSourceFile) {
+        handleCropCancel();
+        return;
+      }
+      const newFile = await dataUrlToFile(
+        croppedDataUrl,
+        cropSourceFile.name,
+        cropSourceFile.type
+      );
+      if (pendingOriginalId.current) {
+        removeFile(pendingOriginalId.current);
+        pendingOriginalId.current = null;
+      }
+      addFiles([newFile]);
+      onCroppedFile == null ? void 0 : onCroppedFile(newFile);
+      setCropOpen(false);
+      setCropSourceFile(null);
+    },
+    [cropSourceFile, addFiles, removeFile, onCroppedFile, handleCropCancel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        "data-slot": "avatar-upload",
+        className: styles.root({ className }),
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.previewAndText(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.previewContainer(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": previewUrl ? t.formatMessage(messages2.change_avatar) : t.formatMessage(messages2.upload_avatar),
+                  "data-dragging": (0, import_shared_utils3.dataAttr)(isDragging),
+                  "data-hasimage": (0, import_shared_utils3.dataAttr)(!!previewUrl),
+                  className: styles.preview(),
+                  onDragEnter: handleDragEnter,
+                  onDragLeave: handleDragLeave,
+                  onDragOver: handleDragOver,
+                  onDrop: handleDrop,
+                  onClick: openFileDialog,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ...getInputProps(), className: "sr-only" }),
+                    previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "img",
+                      {
+                        src: previewUrl,
+                        alt: "Avatar",
+                        className: styles.previewImg()
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.placeholderWrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.UserCircleIcon, { className: styles.placeholder() }) })
+                  ]
+                }
+              ),
+              currentFile && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_button.IconButton,
+                {
+                  variant: "outline",
+                  color: "default",
+                  onClick: handleRemove,
+                  size: "sm",
+                  className: styles.removeButton(),
+                  "aria-label": t.formatMessage(messages2.remove_avatar),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CloseIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: styles.instructionsContainer(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: styles.instructions(), children: currentFile ? t.formatMessage(messages2.avatar_uploaded) : t.formatMessage(messages2.upload_avatar) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: styles.acceptedFiles(), children: t.formatMessage(messages2.accepted_file_types, {
+                types: typesLabel || "-",
+                size: maxSize ? (0, import_shared_utils3.formatBytes)(maxSize) : "none"
+              }) })
+            ] })
+          ] }),
+          errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_callout.Callout, { variant: "destructive", children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: styles.errorItem(), children: error }, index.toString())) })
+        ]
+      }
+    ),
+    cropperEnabled && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Dialog.Root,
+      {
+        open: cropOpen,
+        onOpenChange: (v) => !v ? handleCropCancel() : null,
+        size: "2xl",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Title, { children: t.formatMessage(messages2.change_avatar) }) }),
+          cropSourceFile && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            import_image_crop.ImageCrop,
+            {
+              aspect: cropAspect,
+              file: cropSourceFile,
+              maxImageSize: cropMaxImageSize,
+              onCrop: handleCropApply,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_image_crop.ImageCropContent, { className: "max-w-md" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Dialog.Footer, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    Dialog.CloseTrigger,
+                    {
+                      render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_button.Button,
+                        {
+                          variant: "ghost",
+                          color: "default",
+                          startContent: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CloseIcon, {}),
+                          children: t.formatMessage(messages2.cancel)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_image_crop.ImageCropApply,
+                    {
+                      color: "primary",
+                      variant: "solid",
+                      render: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_button.Button, { startContent: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.CropIcon, {}), children: t.formatMessage(messages2.apply_crop) })
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvatarUpload
+});