@yamada-ui/react/dist/types/components/dropzone/dropzone.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { Merge } from "../../utils/index.js";
import { ComponentSlotStyle, LoadingScheme, ThemeProps, WithoutThemeProps } from "../../core/system/index.types.js";
import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
import "../../core/index.js";
import { LoadingProps } from "../loading/loading.js";
import { UseInputBorderProps } from "../input/use-input-border.js";
import { DropzoneStyle } from "./dropzone.style.js";
import { FadeProps } from "../fade/fade.js";
import { UseDropzoneProps } from "./use-dropzone.js";
import "../../index.js";
import * as react_jsx_runtime11 from "react/jsx-runtime";
import * as react909 from "react";
import { FC, PropsWithChildren } from "react";

//#region src/components/dropzone/dropzone.d.ts
interface DropzoneRootProps extends Merge<HTMLStyledProps, UseDropzoneProps>, UseInputBorderProps, ThemeProps<DropzoneStyle>, Pick<DropzoneLoadingProps, "loadingScheme"> {
  /**
   * Props for dropzone input element.
   */
  inputProps?: HTMLStyledProps<"input">;
  /**
   * Props for dropzone loading icon element.
   */
  loadingProps?: DropzoneLoadingProps;
  /**
   * Props for dropzone overlay element.
   */
  overlayProps?: DropzoneOverlayProps;
}
declare const DropzonePropsContext: react909.Context<Partial<DropzoneRootProps> | undefined>, useDropzonePropsContext: () => Partial<DropzoneRootProps> | undefined;
/**
 * `Dropzone` is a component used for uploading files via drag and drop.
 *
 * @see https://yamada-ui.com/docs/components/dropzone
 */
declare const DropzoneRoot: Component<({
  children,
  errorBorderColor,
  focusBorderColor,
  loadingScheme,
  inputProps,
  loadingProps,
  overlayProps,
  ...rest
}: WithoutThemeProps<DropzoneRootProps, ComponentSlotStyle<"title" | "overlay" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "overlay" | "loading" | "icon" | "root" | "description">>, {
  xs: {
    root: {
      minH: "xs";
    };
  };
  sm: {
    root: {
      minH: "sm";
    };
  };
  md: {
    root: {
      minH: "md";
    };
  };
  lg: {
    root: {
      minH: "lg";
    };
  };
  full: {
    root: {
      minH: "full";
    };
  };
}, {
  base: {
    icon: {
      _groupAccept: {
        color: "success";
      };
      _groupReject: {
        color: "error";
      };
    };
    root: {
      color: "fg.subtle";
      _accept: {
        bg: "success.bg";
      };
      _reject: {
        bg: "error.bg";
      };
    };
    title: {
      color: "fg.muted";
    };
  };
  dashed: {
    root: {
      bg: "transparent";
      borderStyle: "dashed";
      borderWidth: "1px";
      _accept: {
        borderColor: "success.muted";
      };
      _reject: {
        borderColor: ["error.muted", "error.subtle"];
      };
      _hover: {
        "&:not([data-accept], [data-reject])": {
          bg: "bg.panel";
        };
      };
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    };
  };
  panel: {
    root: {
      bg: "bg.panel";
      border: "1px solid transparent";
      focusVisibleRing: "inside";
      _hover: {
        bg: "bg.subtle";
      };
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    };
  };
  plain: {
    root: {
      rounded: "0";
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    };
  };
  solid: {
    root: {
      bg: "transparent";
      borderWidth: "1px";
      focusVisibleRing: "inside";
      _accept: {
        borderColor: "success.muted";
      };
      _reject: {
        borderColor: ["error.muted", "error.subtle"];
      };
      _hover: {
        bg: "bg.panel";
      };
      _invalid: {
        borderColor: "{error-border-color}";
        focusRingColor: "{error-border-color}";
      };
    };
  };
}>, keyof DropzoneRootProps>) => react_jsx_runtime11.JSX.Element, DropzoneRootProps>;
interface DropzoneIconProps extends HTMLStyledProps<"svg"> {}
declare const DropzoneIcon: Component<"svg", DropzoneIconProps>;
interface DropzoneTitleProps extends HTMLStyledProps<"p"> {}
declare const DropzoneTitle: Component<"p", DropzoneTitleProps>;
interface DropzoneDescriptionProps extends HTMLStyledProps<"p"> {}
declare const DropzoneDescription: Component<"p", DropzoneDescriptionProps>;
interface DropzoneDescriptionProps extends HTMLStyledProps<"p"> {}
interface DropzoneOverlayProps extends FadeProps {
  loadingProps?: DropzoneLoadingProps;
}
interface DropzoneLoadingProps extends LoadingProps {
  /**
   * The loading scheme.
   *
   * @default 'oval'
   */
  loadingScheme?: LoadingScheme;
}
interface DropzoneAcceptProps extends PropsWithChildren {}
declare const DropzoneAccept: FC<DropzoneAcceptProps>;
interface DropzoneRejectProps extends PropsWithChildren {}
declare const DropzoneReject: FC<DropzoneRejectProps>;
interface DropzoneIdleProps extends PropsWithChildren {}
declare const DropzoneIdle: FC<DropzoneIdleProps>;
//#endregion
export { DropzoneAccept, DropzoneAcceptProps, DropzoneDescription, DropzoneDescriptionProps, DropzoneIcon, DropzoneIconProps, DropzoneIdle, DropzoneIdleProps, DropzonePropsContext, DropzoneReject, DropzoneRejectProps, DropzoneRoot, DropzoneRootProps, DropzoneTitle, DropzoneTitleProps, useDropzonePropsContext };
//# sourceMappingURL=dropzone.d.ts.map