import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { a as $a049562f99e7db0e$export$f9c6924e160136d1, b as $3985021b0ad6602f$export$37fb8590cf2c088c, c as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-ChJaTNa5.js";
import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-npzfSoYo.js";
import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-cvK1vxO7.js";
import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.js";
import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-BCjjZWaz.js";
import { 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";
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__ */ 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__ */ 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__ */ React__default.createElement("input", {
    type: "hidden",
    name: props.name,
    form: props.form,
    value: isNaN(state.numberValue) ? "" : state.numberValue
  }));
});
/**
 * 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 {NumberPickerSize} [props.size='default'] - Determines the input field size.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The NumberPicker component.
 *
 * @typedef {'compact' | 'small' | 'default'} NumberPickerSize
 *
 * @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",
  "aria-label": ariaLabel,
  hidden,
  ...props
}) => {
  const [isInputFocused, setIsInputFocused] = useState(false);
  if (hidden) {
    return null;
  }
  const sizes = {
    compact: {
      field: "es:min-h-5",
      noPrefixPadding: "es:pl-1.5",
      extraContentSeparator: "es:h-[1.875rem]"
    },
    small: {
      field: "es:min-h-9",
      noPrefixPadding: "es:pl-2",
      extraContentSeparator: "es:h-[2.125rem]"
    },
    default: {
      field: "es:min-h-10",
      noPrefixPadding: "es:pl-2",
      extraContentSeparator: "es:h-[2.375rem]"
    }
  };
  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,
          className: "es:text-sm",
          children: /* @__PURE__ */ jsxs(
            $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
            {
              className: clsx(
                "es:group es:flex es:w-fit es:items-center es:rounded-10 es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-sm es:focus-within:shadow-md es:transition",
                "es:inset-ring es:inset-ring-secondary-100",
                isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                !prefix && (sizes?.[size]?.noPrefixPadding ?? sizes.default.noPrefixPadding),
                sizes?.[size]?.field ?? sizes.default.field,
                "es:disabled:shadow-none es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50"
              ),
              children: [
                prefix && /* @__PURE__ */ jsx(
                  "span",
                  {
                    slot: "prefix",
                    className: "es:col-start-1 es:row-span-2 es:mr-0.5 es:select-none es:self-center es:text-sm es:text-secondary-400",
                    children: prefix
                  }
                ),
                /* @__PURE__ */ jsx(
                  $3985021b0ad6602f$export$f5b8910cec6cf069,
                  {
                    onFocus: () => setIsInputFocused(true),
                    onBlur: () => setIsInputFocused(false),
                    className: "es:col-start-2 es:row-span-2 es:border-none! es:bg-transparent es:px-0! es:py-1! es:text-sm es:tabular-nums es:shadow-none! es:outline-hidden! es:selection:bg-accent-500/20 es:selection:text-accent-950 es:focus:shadow-none! es:any-focus:outline-hidden",
                    placeholder,
                    style: {
                      width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? "0.75ch + " : ""}${(max ?? 1e3)?.toString()?.length} * 1ch)`
                    },
                    "aria-label": ariaLabel ?? __("Enter a number", "eightshift-ui-components")
                  }
                ),
                /* @__PURE__ */ jsxs("div", { className: clsx("es:opacity-0 es:group-hover:opacity-100 es:group-focus-visible:opacity-100 es:transition-opacity", disabled && "es:invisible"), children: [
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      type: "ghost",
                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
                      slot: "increment",
                      icon: icons.caretUpFill
                    }
                  ),
                  /* @__PURE__ */ jsx(
                    Button,
                    {
                      type: "ghost",
                      className: "es:col-start-4 es:h-3 es:w-4 es:text-secondary-500! es:disabled:text-secondary-300! es:icon:size-[0.8rem]",
                      slot: "decrement",
                      icon: icons.caretDownFill
                    }
                  )
                ] }),
                suffix && /* @__PURE__ */ jsx(
                  "span",
                  {
                    slot: "suffix",
                    className: "es:col-start-3 es:row-span-2 es:select-none es:self-center es:text-sm es:text-secondary-400 es:mr-0.5",
                    children: suffix
                  }
                ),
                children && /* @__PURE__ */ jsxs(Fragment, { children: [
                  /* @__PURE__ */ jsx("div", { className: clsx("es:w-px es:bg-secondary-300", sizes?.[size]?.extraContentSeparator ?? sizes.default.extraContentSeparator) }),
                  /* @__PURE__ */ jsx("div", { className: "es:p-0.5 es:pr-0", children: Array.isArray(children) ? children.map((child) => cloneElement(child, { slot: null })) : cloneElement(children, { slot: null }) })
                ] })
              ]
            }
          )
        }
      )
    }
  );
};
export {
  NumberPicker
};
