import { jsx, jsxs } from "react/jsx-runtime";
import $dbSRa$react__default, { forwardRef, createContext, useRef } from "react";
import "../../default-i18n-CnQeC5Pl.js";
import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNksOWg.js";
import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BXjXzdW_.js";
import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DGpXyJOJ.js";
import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DwBG6m1U.js";
import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-ztX6G1zR.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BQvmiUqb.js";
import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D2fUHql3.js";
import { ButtonGroup, Button } from "../button/button.js";
import { icons } from "../../icons/icons.js";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { BaseControl } from "../base-control/base-control.js";
import { c as cva } from "../../index-BHpUy2Ix.js";
const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
const $b91743d66a0ed188$export$6cc906c6cff9bec5 = /* @__PURE__ */ createContext(null);
const $b91743d66a0ed188$export$63c5fa0b2fdccd2e = /* @__PURE__ */ forwardRef(function NumberField(props, ref) {
  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
  let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
  var _props_validationBehavior, _ref;
  let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
  let state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
    ...props,
    locale,
    validationBehavior
  });
  let inputRef = useRef(null);
  let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
  let { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, ...validation } = $81397a9303501bda$export$23f548e970bdf099({
    ...$64fa3d84918910a7$export$ef03459518577ad4(props),
    label,
    validationBehavior
  }, state, inputRef);
  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
    ...props,
    values: {
      state,
      isDisabled: props.isDisabled || false,
      isInvalid: validation.isInvalid || false,
      isRequired: props.isRequired || false
    },
    defaultClassName: "react-aria-NumberField"
  });
  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
    global: true
  });
  delete DOMProps.id;
  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
    values: [
      [
        $b91743d66a0ed188$export$6cc906c6cff9bec5,
        state
      ],
      [
        $a049562f99e7db0e$export$f9c6924e160136d1,
        groupProps
      ],
      [
        $3985021b0ad6602f$export$37fb8590cf2c088c,
        {
          ...inputProps,
          ref: inputRef
        }
      ],
      [
        $01b77f81d0f07f68$export$75b6ee27786ba447,
        {
          ...labelProps,
          ref: labelRef
        }
      ],
      [
        $d2b4bc8c273e7be6$export$24d547caef80ccd1,
        {
          slots: {
            increment: incrementButtonProps,
            decrement: decrementButtonProps
          }
        }
      ],
      [
        $514c0188e459b4c0$export$9afb8bc826b033ea,
        {
          slots: {
            description: descriptionProps,
            errorMessage: errorMessageProps
          }
        }
      ],
      [
        $ee014567cb39d3f0$export$ff05c3ac10437e03,
        validation
      ]
    ]
  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
    ...DOMProps,
    ...renderProps,
    ref,
    slot: props.slot || void 0,
    "data-disabled": props.isDisabled || void 0,
    "data-required": props.isRequired || void 0,
    "data-invalid": validation.isInvalid || void 0
  }), props.name && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
    type: "hidden",
    name: props.name,
    form: props.form,
    value: isNaN(state.numberValue) ? "" : state.numberValue,
    disabled: props.isDisabled || void 0
  }));
});
/**
 * A number picker component.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {number} props.value - The current value of the number picker.
 * @param {Function} props.onChange - Function to run when the value changes.
 * @param {number} [props.min=0] - The minimum value of the number picker.
 * @param {number} [props.max] - The maximum value of the number picker.
 * @param {number} [props.step=1] - The step value of the number picker.
 * @param {string} [props.label] - The label of the number picker.
 * @param {JSX.Element} [props.icon] - Icon to display within the number picker.
 * @param {string} [props.subtitle] - The subtitle of the number picker.
 * @param {string} [props.help] - The help text shown below the number picker.
 * @param {boolean} [props.readOnly] - If `true`, the number picker is read-only.
 * @param {boolean} [props.disabled] - If `true`, the number picker is disabled.
 * @param {string} [props.placeholder] - Placeholder text to display in the number picker.
 * @param {JSX.Element} [props.prefix] - Element to display to the left of the number picker.
 * @param {JSX.Element} [props.suffix] - Element to display to the right of the number picker.
 * @param {number} [props.fixedWidth] - If passed, sets the width of the input field to the provided number of characters. Useful if you have e.g. value from 1 to 1000, but you don't want the input field to change size when on lower values.
 * @param {boolean} [props.inline] - If `true`, the number picker is displayed inline.
 * @param {boolean} [props.noScrollToChange=false] - If `true`, the number picker does not change value when scrolling.
 * @param {InputSize} [props.size='default'] - Determines the input field size.
 * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The NumberPicker component.
 *
 * @typedef {'small' | 'medium' | 'default' | 'large'} InputSize
 *
 * @example
 * <NumberPicker
 * 	value={value}
 * 	onChange={setValue}
 * />
 *
 * @preserve
 */
const NumberPicker = ({
  value,
  onChange,
  min = 0,
  max,
  step = 1,
  label,
  icon,
  subtitle,
  help,
  readOnly,
  disabled,
  placeholder,
  prefix,
  fixedWidth = null,
  suffix,
  children,
  inline,
  noScrollToChange = false,
  size = "default",
  flat,
  className,
  hidden,
  ...props
}) => {
  if (hidden) {
    return null;
  }
  const inputClass = cva(
    [
      "es:group",
      "es:overflow-clip",
      "es:flex es:items-center",
      "es:leading-none",
      "es:w-fit",
      "es:rounded-lg es:focus-within:rounded-xl",
      "es:transition-plus",
      "es:inset-ring",
      "es:focus-visible-within:ring-2 es:focus-visible-within:ring-accent-500/30",
      "es:focus-visible-within:text-accent-950 es:focus-visible-within:inset-ring-accent-500",
      "es:focus:placeholder:text-surface-400",
      "es:text-13",
      className
    ],
    {
      variants: {
        size: {
          small: ["es:min-h-8", "es:px-2.5 es:py-1"],
          medium: ["es:min-h-9", "es:px-3 es:py-1"],
          default: ["es:min-h-10", "es:px-3 es:py-1.5"],
          large: ["es:min-h-12", "es:px-4 es:py-1.5"]
        },
        disabled: {
          false: "es:selection:bg-surface-100 es:selection:text-accent-800",
          true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
        }
      },
      compoundVariants: [
        {
          flat: false,
          disabled: false,
          readOnly: false,
          class: [
            "es:bg-white",
            "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
            "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
            "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus-within:inset-ring-surface-400",
            "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
            "es:hover:placeholder:text-surface-400",
            "es:placeholder:text-secondary-400",
            "es:shadow-xs es:shadow-black/5"
          ]
        },
        {
          flat: true,
          disabled: false,
          readOnly: false,
          class: [
            "es:inset-ring-secondary-100",
            "es:focus-within:text-accent-950",
            "es:placeholder:text-secondary-500/80",
            "es:bg-secondary-100 es:focus-within:bg-surface-50",
            "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus-within:inset-ring-surface-200"
          ]
        },
        { disabled: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"] },
        { readOnly: true, flat: false, class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"] },
        { readOnly: true, flat: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"] }
      ],
      defaultVariants: { disabled: false, flat: false, size: "default", readOnly: false }
    }
  );
  return /* @__PURE__ */ jsx(
    $b91743d66a0ed188$export$63c5fa0b2fdccd2e,
    {
      value,
      onChange,
      isDisabled: disabled,
      isReadOnly: readOnly,
      minValue: min,
      maxValue: max,
      step,
      isWheelDisabled: noScrollToChange,
      ...props,
      children: /* @__PURE__ */ jsx(
        BaseControl,
        {
          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
          icon,
          label,
          subtitle,
          help,
          inline,
          children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
            /* @__PURE__ */ jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: inputClass({ disabled, flat, size, readOnly }), children: [
              prefix && /* @__PURE__ */ jsx(
                "span",
                {
                  slot: "prefix",
                  className: 'es:mr-1 es:select-none es:leading-none es:text-current/60 es:font-variation-["wdth"_100,"wght"_400,"slnt"_-1] es:group-focus-within:text-surface-500',
                  children: prefix
                }
              ),
              /* @__PURE__ */ jsx(
                $3985021b0ad6602f$export$f5b8910cec6cf069,
                {
                  className: 'es:tracking-wide es:font-variation-["wdth"_84,"YTLC"_520,"wght"_325,"slnt"_0,"YTFI"_788] es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8] es:any-focus:outline-hidden! es:p-px es:border-none! es:shadow-none! es:bg-transparent',
                  placeholder,
                  style: {
                    width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "0.75ch + " : "0.5ch + "}${(max ?? 1e3)?.toString()?.length} * 1ch)`
                  }
                }
              ),
              /* @__PURE__ */ jsxs(
                ButtonGroup,
                {
                  className: clsx(
                    "es:hidden es:transition-discrete es:gap-0! es:transition es:pl-0.5 es:ease-spring-smooth es:duration-300 es:origin-left",
                    "es:starting:opacity-0 es:starting:blur-[2px] es:starting:translate-x-2",
                    "es:opacity-100 es:blur-none es:translate-x-0",
                    !disabled && !readOnly && "es:group-hover:flex es:group-focus-within:flex",
                    disabled && "es:hidden"
                  ),
                  vertical: true,
                  children: [
                    /* @__PURE__ */ jsx(
                      Button,
                      {
                        type: "ghost",
                        className: clsx(
                          "es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2",
                          size === "small" ? "es:h-3" : "es:h-3.5"
                        ),
                        slot: "increment",
                        icon: icons.chevronUp
                      }
                    ),
                    /* @__PURE__ */ jsx(
                      Button,
                      {
                        type: "ghost",
                        className: clsx(
                          "es:col-start-4 es:w-4 es:disabled:opacity-40 es:text-current/80 es:group-focus-within:text-surface-500 es:icon:size-[0.65rem] es:icon:stroke-2",
                          size === "small" ? "es:h-3" : "es:h-3.5"
                        ),
                        slot: "decrement",
                        icon: icons.chevronDown
                      }
                    )
                  ]
                }
              ),
              suffix && /* @__PURE__ */ jsx(
                "span",
                {
                  slot: "suffix",
                  className: 'es:ml-1 es:select-none es:leading-none es:text-current/60 es:font-variation-["wdth"_100,"wght"_400,"slnt"_-1] es:group-focus-within:text-surface-500',
                  children: suffix
                }
              )
            ] }),
            children
          ] })
        }
      )
    }
  );
};
export {
  NumberPicker
};
