@yamada-ui/dropzone 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hirotomo Yamada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @yamada-ui/dropzone
+
+## Installation
+
+```sh
+$ pnpm add @yamada-ui/dropzone
+```
+
+or
+
+```sh
+$ yarn add @yamada-ui/dropzone
+```
+
+or
+
+```sh
+$ npm install @yamada-ui/dropzone
+```
+
+## Contribution
+
+Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
+
+## Licence
+
+This package is licensed under the terms of the
+[MIT license](https://github.com/hirotomoyamada/yamada-ui/blob/main/LICENSE).

package/dist/accept-types.d.ts

@@ -0,0 +1,26 @@
+declare const ACCEPT_TYPES: {
+    readonly png: "image/png";
+    readonly gif: "image/gif";
+    readonly jpeg: "image/jpeg";
+    readonly svg: "image/svg+xml";
+    readonly webp: "image/webp";
+    readonly mp4: "video/mp4";
+    readonly zip: "application/zip";
+    readonly csv: "text/csv";
+    readonly pdf: "application/pdf";
+    readonly doc: "application/msword";
+    readonly docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+    readonly xls: "application/vnd.ms-excel";
+    readonly xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+    readonly ppt: "application/vnd.ms-powerpoint";
+    readonly pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+    readonly exe: "application/vnd.microsoft.portable-executable";
+};
+declare const IMAGE_ACCEPT_TYPE: ("image/png" | "image/gif" | "image/jpeg" | "image/svg+xml" | "image/webp")[];
+declare const PDF_ACCEPT_TYPE: "application/pdf"[];
+declare const MS_WORD_ACCEPT_TYPE: ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document")[];
+declare const MS_EXCEL_ACCEPT_TYPE: ("application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")[];
+declare const MS_POWERPOINT_ACCEPT_TYPE: ("application/vnd.ms-powerpoint" | "application/vnd.openxmlformats-officedocument.presentationml.presentation")[];
+declare const EXE_ACCEPT_TYPE: "application/vnd.microsoft.portable-executable"[];
+
+export { ACCEPT_TYPES, EXE_ACCEPT_TYPE, IMAGE_ACCEPT_TYPE, MS_EXCEL_ACCEPT_TYPE, MS_POWERPOINT_ACCEPT_TYPE, MS_WORD_ACCEPT_TYPE, PDF_ACCEPT_TYPE };

package/dist/accept-types.js

@@ -0,0 +1,71 @@
+"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/accept-types.ts
+var accept_types_exports = {};
+__export(accept_types_exports, {
+  ACCEPT_TYPES: () => ACCEPT_TYPES,
+  EXE_ACCEPT_TYPE: () => EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE: () => IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE: () => MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE: () => MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE: () => MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE: () => PDF_ACCEPT_TYPE
+});
+module.exports = __toCommonJS(accept_types_exports);
+var ACCEPT_TYPES = {
+  png: "image/png",
+  gif: "image/gif",
+  jpeg: "image/jpeg",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  mp4: "video/mp4",
+  zip: "application/zip",
+  csv: "text/csv",
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  exe: "application/vnd.microsoft.portable-executable"
+};
+var IMAGE_ACCEPT_TYPE = [
+  ACCEPT_TYPES.png,
+  ACCEPT_TYPES.gif,
+  ACCEPT_TYPES.jpeg,
+  ACCEPT_TYPES.svg,
+  ACCEPT_TYPES.webp
+];
+var PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf];
+var MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx];
+var MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx];
+var MS_POWERPOINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx];
+var EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ACCEPT_TYPES,
+  EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE
+});

package/dist/accept-types.mjs

@@ -0,0 +1,18 @@
+import {
+  ACCEPT_TYPES,
+  EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE
+} from "./chunk-3VSGNLGM.mjs";
+export {
+  ACCEPT_TYPES,
+  EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE
+};

package/dist/chunk-3VSGNLGM.mjs

@@ -0,0 +1,41 @@
+// src/accept-types.ts
+var ACCEPT_TYPES = {
+  png: "image/png",
+  gif: "image/gif",
+  jpeg: "image/jpeg",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  mp4: "video/mp4",
+  zip: "application/zip",
+  csv: "text/csv",
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  exe: "application/vnd.microsoft.portable-executable"
+};
+var IMAGE_ACCEPT_TYPE = [
+  ACCEPT_TYPES.png,
+  ACCEPT_TYPES.gif,
+  ACCEPT_TYPES.jpeg,
+  ACCEPT_TYPES.svg,
+  ACCEPT_TYPES.webp
+];
+var PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf];
+var MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx];
+var MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx];
+var MS_POWERPOINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx];
+var EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe];
+
+export {
+  ACCEPT_TYPES,
+  IMAGE_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  EXE_ACCEPT_TYPE
+};

package/dist/chunk-V5XO36JL.mjs

@@ -0,0 +1,139 @@
+// src/dropzone.tsx
+import {
+  ui,
+  forwardRef,
+  omitThemeProps,
+  useMultiComponentStyle
+} from "@yamada-ui/core";
+import {
+  formControlProperties,
+  useFormControlProps
+} from "@yamada-ui/form-control";
+import { Loading } from "@yamada-ui/loading";
+import { Fade } from "@yamada-ui/transitions";
+import { assignRef, createContext, cx, dataAttr, isArray, pickObject } from "@yamada-ui/utils";
+import { Fragment } from "react";
+import { useDropzone } from "react-dropzone";
+import { jsx, jsxs } from "react/jsx-runtime";
+var [DropzoneProvider, useDropzoneContext] = createContext({
+  name: "NativeSelectContext",
+  errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
+});
+var Dropzone = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("Dropzone", props);
+  const {
+    id,
+    name,
+    className,
+    isLoading,
+    overlayProps,
+    loadingProps,
+    openRef,
+    accept,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    multiple,
+    maxSize,
+    maxFiles,
+    autoFocus,
+    noClick,
+    noDrag,
+    noDragEventsBubbling,
+    noKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi,
+    children,
+    ...rest
+  } = useFormControlProps(omitThemeProps(mergedProps));
+  const disabled = isLoading || rest.disabled || rest.readOnly;
+  const formControlProps = pickObject(rest, formControlProperties);
+  const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = useDropzone({
+    disabled,
+    accept: isArray(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    multiple,
+    maxSize,
+    maxFiles,
+    autoFocus,
+    noClick,
+    noDrag,
+    noDragEventsBubbling,
+    noKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi
+  });
+  assignRef(openRef, open);
+  const isDragIdle = !isDragAccept && !isDragReject;
+  const css = {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.container
+  };
+  return /* @__PURE__ */ jsx(DropzoneProvider, { value: { isLoading, isDragAccept, isDragReject, isDragIdle, styles }, children: /* @__PURE__ */ jsxs(
+    ui.div,
+    {
+      className: cx("ui-dropzone", className),
+      __css: css,
+      ...rest,
+      ...getRootProps(),
+      "data-accept": dataAttr(isDragAccept),
+      "data-reject": dataAttr(isDragReject),
+      "data-idle": dataAttr(isDragIdle),
+      "data-loading": dataAttr(isLoading),
+      children: [
+        /* @__PURE__ */ jsx(LoadingOverlay, { loadingProps, ...overlayProps }),
+        /* @__PURE__ */ jsx(ui.input, { ref, id, name, ...formControlProps, ...getInputProps() }),
+        children
+      ]
+    }
+  ) });
+});
+var LoadingOverlay = ({ loadingProps, ...rest }) => {
+  const { isLoading, styles } = useDropzoneContext();
+  const css = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    w: "100%",
+    h: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.overlay
+  };
+  return /* @__PURE__ */ jsx(Fade, { isOpen: isLoading, unmountOnExit: true, className: "ui-dropzone-overlay", __css: css, ...rest, children: /* @__PURE__ */ jsx(Loading, { className: "ui-dropzone-loading", size: "8", ...loadingProps }) });
+};
+var DropzoneAccept = ({ children }) => {
+  const { isDragAccept } = useDropzoneContext();
+  return isDragAccept ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+};
+var DropzoneReject = ({ children }) => {
+  const { isDragReject } = useDropzoneContext();
+  return isDragReject ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+};
+var DropzoneIdle = ({ children }) => {
+  const { isDragIdle } = useDropzoneContext();
+  return isDragIdle ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+};
+
+export {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneReject,
+  DropzoneIdle
+};

package/dist/dropzone.d.ts

@@ -0,0 +1,24 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import { LoadingProps } from '@yamada-ui/loading';
+import { FadeProps } from '@yamada-ui/transitions';
+import { FC, PropsWithChildren, ForwardedRef } from 'react';
+import { DropzoneOptions as DropzoneOptions$1, Accept } from 'react-dropzone';
+
+type DropzoneOptions = {
+    focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    isLoading?: boolean;
+    overlayProps?: FadeProps;
+    loadingProps?: LoadingProps;
+    accept?: Accept | string[];
+    openRef?: ForwardedRef<() => void | undefined>;
+};
+type DropzoneProps = Omit<HTMLUIProps<'div'>, 'onDrop'> & ThemeProps<'Dropzone'> & DropzoneOptions & FormControlOptions & Omit<DropzoneOptions$1, 'accept'>;
+declare const Dropzone: _yamada_ui_core.Component<"input", DropzoneProps>;
+declare const DropzoneAccept: FC<PropsWithChildren>;
+declare const DropzoneReject: FC<PropsWithChildren>;
+declare const DropzoneIdle: FC<PropsWithChildren>;
+
+export { Dropzone, DropzoneAccept, DropzoneIdle, DropzoneProps, DropzoneReject };

package/dist/dropzone.js

@@ -0,0 +1,158 @@
+"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/dropzone.tsx
+var dropzone_exports = {};
+__export(dropzone_exports, {
+  Dropzone: () => Dropzone,
+  DropzoneAccept: () => DropzoneAccept,
+  DropzoneIdle: () => DropzoneIdle,
+  DropzoneReject: () => DropzoneReject
+});
+module.exports = __toCommonJS(dropzone_exports);
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_loading = require("@yamada-ui/loading");
+var import_transitions = require("@yamada-ui/transitions");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_react_dropzone = require("react-dropzone");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
+  name: "NativeSelectContext",
+  errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
+});
+var Dropzone = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Dropzone", props);
+  const {
+    id,
+    name,
+    className,
+    isLoading,
+    overlayProps,
+    loadingProps,
+    openRef,
+    accept,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    multiple,
+    maxSize,
+    maxFiles,
+    autoFocus,
+    noClick,
+    noDrag,
+    noDragEventsBubbling,
+    noKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi,
+    children,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
+  const disabled = isLoading || rest.disabled || rest.readOnly;
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = (0, import_react_dropzone.useDropzone)({
+    disabled,
+    accept: (0, import_utils.isArray)(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    multiple,
+    maxSize,
+    maxFiles,
+    autoFocus,
+    noClick,
+    noDrag,
+    noDragEventsBubbling,
+    noKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi
+  });
+  (0, import_utils.assignRef)(openRef, open);
+  const isDragIdle = !isDragAccept && !isDragReject;
+  const css = {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropzoneProvider, { value: { isLoading, isDragAccept, isDragReject, isDragIdle, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.ui.div,
+    {
+      className: (0, import_utils.cx)("ui-dropzone", className),
+      __css: css,
+      ...rest,
+      ...getRootProps(),
+      "data-accept": (0, import_utils.dataAttr)(isDragAccept),
+      "data-reject": (0, import_utils.dataAttr)(isDragReject),
+      "data-idle": (0, import_utils.dataAttr)(isDragIdle),
+      "data-loading": (0, import_utils.dataAttr)(isLoading),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingOverlay, { loadingProps, ...overlayProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ref, id, name, ...formControlProps, ...getInputProps() }),
+        children
+      ]
+    }
+  ) });
+});
+var LoadingOverlay = ({ loadingProps, ...rest }) => {
+  const { isLoading, styles } = useDropzoneContext();
+  const css = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    w: "100%",
+    h: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.overlay
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_transitions.Fade, { isOpen: isLoading, unmountOnExit: true, className: "ui-dropzone-overlay", __css: css, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { className: "ui-dropzone-loading", size: "8", ...loadingProps }) });
+};
+var DropzoneAccept = ({ children }) => {
+  const { isDragAccept } = useDropzoneContext();
+  return isDragAccept ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
+};
+var DropzoneReject = ({ children }) => {
+  const { isDragReject } = useDropzoneContext();
+  return isDragReject ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
+};
+var DropzoneIdle = ({ children }) => {
+  const { isDragIdle } = useDropzoneContext();
+  return isDragIdle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneIdle,
+  DropzoneReject
+});

package/dist/dropzone.mjs

@@ -0,0 +1,12 @@
+import {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneIdle,
+  DropzoneReject
+} from "./chunk-V5XO36JL.mjs";
+export {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneIdle,
+  DropzoneReject
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { Dropzone, DropzoneAccept, DropzoneIdle, DropzoneProps, DropzoneReject } from './dropzone.js';
+export { ACCEPT_TYPES, EXE_ACCEPT_TYPE, IMAGE_ACCEPT_TYPE, MS_EXCEL_ACCEPT_TYPE, MS_POWERPOINT_ACCEPT_TYPE, MS_WORD_ACCEPT_TYPE, PDF_ACCEPT_TYPE } from './accept-types.js';
+import '@yamada-ui/core';
+import '@yamada-ui/form-control';
+import '@yamada-ui/loading';
+import '@yamada-ui/transitions';
+import 'react';
+import 'react-dropzone';

package/dist/index.js

@@ -0,0 +1,206 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ACCEPT_TYPES: () => ACCEPT_TYPES,
+  Dropzone: () => Dropzone,
+  DropzoneAccept: () => DropzoneAccept,
+  DropzoneIdle: () => DropzoneIdle,
+  DropzoneReject: () => DropzoneReject,
+  EXE_ACCEPT_TYPE: () => EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE: () => IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE: () => MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE: () => MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE: () => MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE: () => PDF_ACCEPT_TYPE
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/dropzone.tsx
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_loading = require("@yamada-ui/loading");
+var import_transitions = require("@yamada-ui/transitions");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_react_dropzone = require("react-dropzone");
+var import_jsx_runtime = require("react/jsx-runtime");
+var [DropzoneProvider, useDropzoneContext] = (0, import_utils.createContext)({
+  name: "NativeSelectContext",
+  errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in "<Dropzone />"`
+});
+var Dropzone = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Dropzone", props);
+  const {
+    id,
+    name,
+    className,
+    isLoading,
+    overlayProps,
+    loadingProps,
+    openRef,
+    accept,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    multiple,
+    maxSize,
+    maxFiles,
+    autoFocus,
+    noClick,
+    noDrag,
+    noDragEventsBubbling,
+    noKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi,
+    children,
+    ...rest
+  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
+  const disabled = isLoading || rest.disabled || rest.readOnly;
+  const formControlProps = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
+  const { getRootProps, getInputProps, isDragAccept, isDragReject, open } = (0, import_react_dropzone.useDropzone)({
+    disabled,
+    accept: (0, import_utils.isArray)(accept) ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {}) : accept,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    multiple,
+    maxSize,
+    maxFiles,
+    autoFocus,
+    noClick,
+    noDrag,
+    noDragEventsBubbling,
+    noKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi
+  });
+  (0, import_utils.assignRef)(openRef, open);
+  const isDragIdle = !isDragAccept && !isDragReject;
+  const css = {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.container
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropzoneProvider, { value: { isLoading, isDragAccept, isDragReject, isDragIdle, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.ui.div,
+    {
+      className: (0, import_utils.cx)("ui-dropzone", className),
+      __css: css,
+      ...rest,
+      ...getRootProps(),
+      "data-accept": (0, import_utils.dataAttr)(isDragAccept),
+      "data-reject": (0, import_utils.dataAttr)(isDragReject),
+      "data-idle": (0, import_utils.dataAttr)(isDragIdle),
+      "data-loading": (0, import_utils.dataAttr)(isLoading),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingOverlay, { loadingProps, ...overlayProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ui.input, { ref, id, name, ...formControlProps, ...getInputProps() }),
+        children
+      ]
+    }
+  ) });
+});
+var LoadingOverlay = ({ loadingProps, ...rest }) => {
+  const { isLoading, styles } = useDropzoneContext();
+  const css = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    w: "100%",
+    h: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...styles.overlay
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_transitions.Fade, { isOpen: isLoading, unmountOnExit: true, className: "ui-dropzone-overlay", __css: css, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { className: "ui-dropzone-loading", size: "8", ...loadingProps }) });
+};
+var DropzoneAccept = ({ children }) => {
+  const { isDragAccept } = useDropzoneContext();
+  return isDragAccept ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
+};
+var DropzoneReject = ({ children }) => {
+  const { isDragReject } = useDropzoneContext();
+  return isDragReject ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
+};
+var DropzoneIdle = ({ children }) => {
+  const { isDragIdle } = useDropzoneContext();
+  return isDragIdle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children }) : null;
+};
+
+// src/accept-types.ts
+var ACCEPT_TYPES = {
+  png: "image/png",
+  gif: "image/gif",
+  jpeg: "image/jpeg",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  mp4: "video/mp4",
+  zip: "application/zip",
+  csv: "text/csv",
+  pdf: "application/pdf",
+  doc: "application/msword",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xls: "application/vnd.ms-excel",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  ppt: "application/vnd.ms-powerpoint",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  exe: "application/vnd.microsoft.portable-executable"
+};
+var IMAGE_ACCEPT_TYPE = [
+  ACCEPT_TYPES.png,
+  ACCEPT_TYPES.gif,
+  ACCEPT_TYPES.jpeg,
+  ACCEPT_TYPES.svg,
+  ACCEPT_TYPES.webp
+];
+var PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf];
+var MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx];
+var MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx];
+var MS_POWERPOINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx];
+var EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ACCEPT_TYPES,
+  Dropzone,
+  DropzoneAccept,
+  DropzoneIdle,
+  DropzoneReject,
+  EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE
+});

package/dist/index.mjs

@@ -0,0 +1,28 @@
+import {
+  ACCEPT_TYPES,
+  EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE
+} from "./chunk-3VSGNLGM.mjs";
+import {
+  Dropzone,
+  DropzoneAccept,
+  DropzoneIdle,
+  DropzoneReject
+} from "./chunk-V5XO36JL.mjs";
+export {
+  ACCEPT_TYPES,
+  Dropzone,
+  DropzoneAccept,
+  DropzoneIdle,
+  DropzoneReject,
+  EXE_ACCEPT_TYPE,
+  IMAGE_ACCEPT_TYPE,
+  MS_EXCEL_ACCEPT_TYPE,
+  MS_POWERPOINT_ACCEPT_TYPE,
+  MS_WORD_ACCEPT_TYPE,
+  PDF_ACCEPT_TYPE
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@yamada-ui/dropzone",
+  "version": "0.1.0",
+  "description": "Yamada UI dropzone component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "dropzone",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/dropzone"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "react-dropzone": "14.2.3",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/form-control": "0.1.0",
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/transitions": "0.1.0",
+    "@yamada-ui/loading": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}