@yamada-ui/react/dist/esm/components/file-button/file-button.js

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createComponent } from "../../core/components/create-component.js";
import { Portal } from "../portal/portal.js";
import { useInputBorder } from "../input/use-input-border.js";
import { Button } from "../button/button.js";
import { fileButtonStyle } from "./file-button.style.js";
import { useFileButton } from "./use-file-button.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/file-button/file-button.tsx
const { PropsContext: FileButtonPropsContext, usePropsContext: useFileButtonPropsContext, withContext } = createComponent("file-button", fileButtonStyle);
/**
* `FileButton` is a button component used for users to select files.
*
* @see https://yamada-ui.com/docs/components/file-button
*/
const FileButton = withContext(({ as: As = Button, children, errorBorderColor,...rest }) => {
	const { getButtonProps, getInputProps } = useFileButton(rest);
	const varProps = useInputBorder({ errorBorderColor });
	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(styled.input, { ...getInputProps() }) }), /* @__PURE__ */ jsx(As, {
		...varProps,
		...getButtonProps(),
		children
	})] });
})();

//#endregion
export { FileButton, FileButtonPropsContext, useFileButtonPropsContext };
//# sourceMappingURL=file-button.js.map