@trail-ui/react/dist/chunk-M3OTIQDY.mjs

import {
  _Input
} from "./chunk-VGAQK5WY.mjs";

// src/number-input/number-input.tsx
import { clsx } from "@trail-ui/shared-utils";
import { button, numberInput } from "@trail-ui/theme";
import { useMemo } from "react";
import { Button, FieldError, Group, Label, NumberField, Text } from "react-aria-components";
import { jsx, jsxs } from "react/jsx-runtime";
function NumberInput(props) {
  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, { 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 })
  ] });
}

export {
  NumberInput
};