UNPKG

@alice-ui/react

Version:
80 lines (77 loc) 2.63 kB
import { _Input } from "./chunk-CUI3OLUE.mjs"; // src/number-input/number-input.tsx import { clsx } from "@alice-ui/shared-utils"; import { button, numberInput } from "@alice-ui/theme"; import { forwardRef, useMemo } from "react"; import { Button, FieldError, Group, Label, NumberField, Text } from "react-aria-components"; import { jsx, jsxs } from "react/jsx-runtime"; function NumberInput(props, ref) { const { className, classNames, label, description, errorMessage, decrementContent = "-", incrementContent = "+", isCompact = false, placeholder, buttonProps, inputProps, ...otherProps } = props; const slots = useMemo( () => numberInput({ isCompact }), [isCompact] ); const buttonStyles = useMemo( () => button({ isIconOnly: true, ...buttonProps }), [buttonProps] ); const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className); return /* @__PURE__ */ jsxs(NumberField, { ref, className: slots.base({ class: baseStyles }), ...otherProps, children: [ label && /* @__PURE__ */ jsx(Label, { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }), /* @__PURE__ */ jsxs(Group, { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [ /* @__PURE__ */ jsx( Button, { slot: "decrement", "data-stepper": "decrement", className: slots.button({ class: clsx(buttonStyles, classNames == null ? void 0 : classNames.button) }), style: { zIndex: 10 }, children: decrementContent } ), /* @__PURE__ */ jsx( _Input, { ...inputProps, placeholder, className: slots.input({ class: classNames == null ? void 0 : classNames.input }) } ), /* @__PURE__ */ jsx( Button, { slot: "increment", "data-stepper": "increment", className: slots.button({ class: clsx(buttonStyles, classNames == null ? void 0 : classNames.button) }), children: incrementContent } ) ] }), description && /* @__PURE__ */ jsx(Text, { slot: "description", className: slots.description({ class: classNames == null ? void 0 : classNames.description }), children: description }), /* @__PURE__ */ jsx(FieldError, { className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage }), children: errorMessage }) ] }); } var _NumberInput = forwardRef(NumberInput); export { _NumberInput };