@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
63 lines (59 loc) • 3.31 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
const require_chevron_up_icon = require('../icon/icons/chevron-up-icon.cjs');
const require_input = require('../input/input.cjs');
const require_input_element = require('../input/input-element.cjs');
const require_use_group = require('../group/use-group.cjs');
const require_input_group = require('../input/input-group.cjs');
const require_number_input_style = require('./number-input.style.cjs');
const require_use_number_input = require('./use-number-input.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/number-input/number-input.tsx
const { PropsContext: NumberInputPropsContext, usePropsContext: useNumberInputPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("number-input", require_number_input_style.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] = require_use_group.useGroupItemProps(props);
const { getDecrementProps, getIncrementProps, getInputProps } = require_use_number_input.useNumberInput(rest);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
className,
css,
colorScheme,
...groupItemProps,
...rootProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputField, { ...getInputProps() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
clickable: true,
...elementProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NumberInputControl, {
...controlProps,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputIncrementButton, { ...getIncrementProps(incrementProps) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumberInputDecrementButton, { ...getDecrementProps(decrementProps) })]
})
})]
});
}, "root")((props) => {
return {
...require_input.useInputPropsContext(),
...props
};
});
const NumberInputField = withContext(require_input.Input, "field")({ "data-group-propagate": "" });
const NumberInputControl = withContext("div", "control")();
const NumberInputIncrementButton = withContext("button", ["button", "increment"])(({ children,...rest }) => ({
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_up_icon.ChevronUpIcon, {}),
...rest
}));
const NumberInputDecrementButton = withContext("button", ["button", "decrement"])(({ children,...rest }) => ({
children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}),
...rest
}));
//#endregion
exports.NumberInput = NumberInput;
exports.NumberInputPropsContext = NumberInputPropsContext;
exports.useNumberInputPropsContext = useNumberInputPropsContext;
//# sourceMappingURL=number-input.cjs.map