@yamada-ui/dropzone 1.0.30 → 2.0.0-next-20240513040311

Sign up to get free protection for your applications and to get access to all the features.
@@ -151,14 +151,7 @@ var LoadingOverlay = ({ loadingProps, ...rest }) => {
151
151
  className: "ui-dropzone__overlay",
152
152
  __css: css,
153
153
  ...rest,
154
- children: /* @__PURE__ */ jsx(
155
- Loading,
156
- {
157
- className: "ui-dropzone__overlay__loading",
158
- size: "4xl",
159
- ...loadingProps
160
- }
161
- )
154
+ children: /* @__PURE__ */ jsx(Loading, { className: "ui-dropzone__loading", size: "4xl", ...loadingProps })
162
155
  }
163
156
  );
164
157
  };
@@ -181,4 +174,4 @@ export {
181
174
  DropzoneReject,
182
175
  DropzoneIdle
183
176
  };
184
- //# sourceMappingURL=chunk-NSRSYGWG.mjs.map
177
+ //# sourceMappingURL=chunk-BEV5QJHE.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n size=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading className=\"ui-dropzone__loading\" size=\"4xl\" {...loadingProps} />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
package/dist/dropzone.js CHANGED
@@ -162,14 +162,7 @@ var LoadingOverlay = ({ loadingProps, ...rest }) => {
162
162
  className: "ui-dropzone__overlay",
163
163
  __css: css,
164
164
  ...rest,
165
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
166
- import_loading.Loading,
167
- {
168
- className: "ui-dropzone__overlay__loading",
169
- size: "4xl",
170
- ...loadingProps
171
- }
172
- )
165
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { className: "ui-dropzone__loading", size: "4xl", ...loadingProps })
173
166
  }
174
167
  );
175
168
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n size=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/dropzone.tsx"],"sourcesContent":["import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading className=\"ui-dropzone__loading\" size=\"4xl\" {...loadingProps} />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n"],"mappings":"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","names":[]}
package/dist/dropzone.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  DropzoneAccept,
5
5
  DropzoneIdle,
6
6
  DropzoneReject
7
- } from "./chunk-NSRSYGWG.mjs";
7
+ } from "./chunk-BEV5QJHE.mjs";
8
8
  export {
9
9
  Dropzone,
10
10
  DropzoneAccept,
package/dist/index.js CHANGED
@@ -171,14 +171,7 @@ var LoadingOverlay = ({ loadingProps, ...rest }) => {
171
171
  className: "ui-dropzone__overlay",
172
172
  __css: css,
173
173
  ...rest,
174
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
175
- import_loading.Loading,
176
- {
177
- className: "ui-dropzone__overlay__loading",
178
- size: "4xl",
179
- ...loadingProps
180
- }
181
- )
174
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loading.Loading, { className: "ui-dropzone__loading", size: "4xl", ...loadingProps })
182
175
  }
183
176
  );
184
177
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/dropzone.tsx","../src/accept-types.ts"],"sourcesContent":["export {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport * from \"./accept-types\"\nexport type {\n FileRejection,\n FileError,\n ErrorCode,\n DropEvent,\n} from \"react-dropzone-esm\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading\n className=\"ui-dropzone__overlay__loading\"\n size=\"4xl\"\n {...loadingProps}\n />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n","export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/dropzone.tsx","../src/accept-types.ts"],"sourcesContent":["export {\n Dropzone,\n DropzoneAccept,\n DropzoneIdle,\n DropzoneReject,\n} from \"./dropzone\"\nexport type { DropzoneProps } from \"./dropzone\"\nexport * from \"./accept-types\"\nexport type {\n FileRejection,\n FileError,\n ErrorCode,\n DropEvent,\n} from \"react-dropzone-esm\"\n","import type {\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n ColorModeToken,\n CSS,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n omitThemeProps,\n useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport type { FadeProps } from \"@yamada-ui/transitions\"\nimport { Fade } from \"@yamada-ui/transitions\"\nimport {\n assignRef,\n createContext,\n cx,\n dataAttr,\n isArray,\n splitObject,\n} from \"@yamada-ui/utils\"\nimport type { FC, ForwardedRef, PropsWithChildren } from \"react\"\nimport { Fragment } from \"react\"\nimport type {\n Accept,\n DropzoneOptions as ReactDropzoneOptions,\n} from \"react-dropzone-esm\"\nimport { useDropzone } from \"react-dropzone-esm\"\n\ntype DropzoneContext = {\n isLoading?: boolean\n isDragAccept: boolean\n isDragReject: boolean\n isDragIdle: boolean\n styles: Record<string, CSSUIObject>\n}\n\nconst [DropzoneProvider, useDropzoneContext] = createContext<DropzoneContext>({\n name: \"DropzoneContext\",\n errorMessage: `useDropzoneContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Dropzone />\"`,\n})\n\ntype DropzoneOptions = {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * If `true`, display the dropzone loading icon.\n *\n * @default false\n */\n isLoading?: boolean\n /**\n * Props for dropzone overlay element.\n */\n overlayProps?: FadeProps\n /**\n * Props for dropzone loading icon element.\n */\n loadingProps?: LoadingProps\n /**\n * File types to accept.\n */\n accept?: Accept | string[]\n /**\n * Ref to a open function.\n */\n openRef?: ForwardedRef<() => void | undefined>\n}\n\nexport type DropzoneProps = Omit<HTMLUIProps<\"div\">, \"onDrop\"> &\n ThemeProps<\"Dropzone\"> &\n DropzoneOptions &\n FormControlOptions &\n Omit<ReactDropzoneOptions, \"accept\">\n\n/**\n * `Dropzone` is a component used for uploading files via drag and drop.\n *\n * @see Docs https://yamada-ui.com/components/forms/dropzone\n */\nexport const Dropzone = forwardRef<DropzoneProps, \"input\">((props, ref) => {\n const [styles, mergedProps] = useMultiComponentStyle(\"Dropzone\", props)\n const {\n id,\n name,\n className,\n isLoading,\n overlayProps,\n loadingProps,\n openRef,\n accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n\n const disabled = isLoading || rest.disabled || rest.readOnly\n\n const [formControlProps, containerProps] = splitObject(\n rest,\n formControlProperties,\n )\n\n const { getRootProps, getInputProps, isDragAccept, isDragReject, open } =\n useDropzone({\n disabled,\n accept: isArray(accept)\n ? accept.reduce((prev, current) => ({ ...prev, [current]: [] }), {})\n : accept,\n onDrop,\n onDropAccepted,\n onDropRejected,\n multiple,\n maxSize,\n maxFiles,\n autoFocus,\n noClick,\n noDrag,\n noDragEventsBubbling,\n noKeyboard,\n onDragEnter,\n onDragLeave,\n onDragOver,\n onFileDialogCancel,\n onFileDialogOpen,\n preventDropOnDocument,\n useFsAccessApi,\n })\n\n assignRef(openRef, open)\n\n const isDragIdle = !isDragAccept && !isDragReject\n\n const css: CSSUIObject = {\n position: \"relative\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.container,\n }\n\n return (\n <DropzoneProvider\n value={{ isLoading, isDragAccept, isDragReject, isDragIdle, styles }}\n >\n <ui.div\n className={cx(\"ui-dropzone\", className)}\n __css={css}\n {...containerProps}\n {...getRootProps()}\n data-accept={dataAttr(isDragAccept)}\n data-reject={dataAttr(isDragReject)}\n data-idle={dataAttr(isDragIdle)}\n data-loading={dataAttr(isLoading)}\n >\n <LoadingOverlay loadingProps={loadingProps} {...overlayProps} />\n <ui.input\n ref={ref}\n id={id}\n name={name}\n {...formControlProps}\n {...getInputProps()}\n />\n {children}\n </ui.div>\n </DropzoneProvider>\n )\n})\n\ntype LoadingOverlayProps = FadeProps & { loadingProps?: LoadingProps }\n\nconst LoadingOverlay: FC<LoadingOverlayProps> = ({ loadingProps, ...rest }) => {\n const { isLoading, styles } = useDropzoneContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: 0,\n left: 0,\n w: \"100%\",\n h: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n ...styles.overlay,\n }\n\n return (\n <Fade\n isOpen={isLoading}\n unmountOnExit\n className=\"ui-dropzone__overlay\"\n __css={css}\n {...rest}\n >\n <Loading className=\"ui-dropzone__loading\" size=\"4xl\" {...loadingProps} />\n </Fade>\n )\n}\n\nexport const DropzoneAccept: FC<PropsWithChildren> = ({ children }) => {\n const { isDragAccept } = useDropzoneContext()\n\n return isDragAccept ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneReject: FC<PropsWithChildren> = ({ children }) => {\n const { isDragReject } = useDropzoneContext()\n\n return isDragReject ? <Fragment>{children}</Fragment> : null\n}\n\nexport const DropzoneIdle: FC<PropsWithChildren> = ({ children }) => {\n const { isDragIdle } = useDropzoneContext()\n\n return isDragIdle ? <Fragment>{children}</Fragment> : null\n}\n","export const ACCEPT_TYPES = {\n txt: \"text/plain\",\n html: \"text/html\",\n csv: \"text/csv\",\n png: \"image/png\",\n gif: \"image/gif\",\n jpeg: \"image/jpeg\",\n svg: \"image/svg+xml\",\n webp: \"image/webp\",\n mp3: \"audio/mpeg\",\n mpeg: \"video/mpeg\",\n mp4: \"video/mp4\",\n zip: \"application/zip\",\n pdf: \"application/pdf\",\n doc: \"application/msword\",\n docx: \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n xls: \"application/vnd.ms-excel\",\n xlsx: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n ppt: \"application/vnd.ms-powerpoint\",\n pptx: \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n exe: \"application/vnd.microsoft.portable-executable\",\n} as const\n\nexport const IMAGE_ACCEPT_TYPE = [\n ACCEPT_TYPES.png,\n ACCEPT_TYPES.gif,\n ACCEPT_TYPES.jpeg,\n ACCEPT_TYPES.svg,\n ACCEPT_TYPES.webp,\n]\nexport const PDF_ACCEPT_TYPE = [ACCEPT_TYPES.pdf]\nexport const MS_WORD_ACCEPT_TYPE = [ACCEPT_TYPES.doc, ACCEPT_TYPES.docx]\nexport const MS_EXCEL_ACCEPT_TYPE = [ACCEPT_TYPES.xls, ACCEPT_TYPES.xlsx]\nexport const MS_POWER_POINT_ACCEPT_TYPE = [ACCEPT_TYPES.ppt, ACCEPT_TYPES.pptx]\nexport const EXE_ACCEPT_TYPE = [ACCEPT_TYPES.exe]\n"],"mappings":"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","names":[]}
package/dist/index.mjs CHANGED
@@ -13,7 +13,7 @@ import {
13
13
  DropzoneAccept,
14
14
  DropzoneIdle,
15
15
  DropzoneReject
16
- } from "./chunk-NSRSYGWG.mjs";
16
+ } from "./chunk-BEV5QJHE.mjs";
17
17
  export {
18
18
  ACCEPT_TYPES,
19
19
  Dropzone,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/dropzone",
3
- "version": "1.0.30",
3
+ "version": "2.0.0-next-20240513040311",
4
4
  "description": "Yamada UI dropzone component",
5
5
  "keywords": [
6
6
  "yamada",