@yamada-ui/react/dist/esm/components/number-input/number-input.js

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

"use client";


import { createSlotComponent } from "../../core/components/create-component.js";
import { ChevronDownIcon } from "../icon/icons/chevron-down-icon.js";
import { ChevronUpIcon } from "../icon/icons/chevron-up-icon.js";
import { Input, useInputPropsContext } from "../input/input.js";
import { InputElement } from "../input/input-element.js";
import { useGroupItemProps } from "../group/use-group.js";
import { InputGroupRoot } from "../input/input-group.js";
import { numberInputStyle } from "./number-input.style.js";
import { useNumberInput } from "./use-number-input.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/number-input/number-input.tsx
const { PropsContext: NumberInputPropsContext, usePropsContext: useNumberInputPropsContext, withContext, withProvider } = createSlotComponent("number-input", numberInputStyle);
/**
* `NumberInput` is a component used to obtain numeric input from the user.
*
* @see https://yamada-ui.com/docs/components/number-input
*/
const NumberInput = withProvider(({ className, css, colorScheme, controlProps, decrementProps, elementProps, incrementProps, rootProps,...props }) => {
	const [groupItemProps, rest] = useGroupItemProps(props);
	const { getDecrementProps, getIncrementProps, getInputProps } = useNumberInput(rest);
	return /* @__PURE__ */ jsxs(InputGroupRoot, {
		className,
		css,
		colorScheme,
		...groupItemProps,
		...rootProps,
		children: [/* @__PURE__ */ jsx(NumberInputField, { ...getInputProps() }), /* @__PURE__ */ jsx(InputElement, {
			clickable: true,
			...elementProps,
			children: /* @__PURE__ */ jsxs(NumberInputControl, {
				...controlProps,
				children: [/* @__PURE__ */ jsx(NumberInputIncrementButton, { ...getIncrementProps(incrementProps) }), /* @__PURE__ */ jsx(NumberInputDecrementButton, { ...getDecrementProps(decrementProps) })]
			})
		})]
	});
}, "root")((props) => {
	return {
		...useInputPropsContext(),
		...props
	};
});
const NumberInputField = withContext(Input, "field")({ "data-group-propagate": "" });
const NumberInputControl = withContext("div", "control")();
const NumberInputIncrementButton = withContext("button", ["button", "increment"])(({ children,...rest }) => ({
	children: children ?? /* @__PURE__ */ jsx(ChevronUpIcon, {}),
	...rest
}));
const NumberInputDecrementButton = withContext("button", ["button", "decrement"])(({ children,...rest }) => ({
	children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {}),
	...rest
}));

//#endregion
export { NumberInput, NumberInputPropsContext, useNumberInputPropsContext };
//# sourceMappingURL=number-input.js.map