import { jsxs as v, jsx as r } from "react/jsx-runtime";
import { useState as A, useEffect as V } from "react";
import { p as k, b as C } from "./index.dWlEA7uO.js";
import { a as R } from "./index.CfQlFjZU.js";
import { n as w } from "./index.B0wX8xO7.js";
import { c as b } from "./index.CfM2L_w0.js";
import { S as x } from "./shared.EdGf6tcG.js";
import { u as y } from "./useId.7P31viIO.js";
import { B as S } from "./Button.CpTwUWVr.js";
const z = "creator_container_QXqjo", D = "creator_label_y3UVd", M = "creator_helper_WIDqY", T = "creator_helper__error_fc4Ns", j = "creator_field_p04-r", B = "creator_field__disabled_v5DN6", K = "creator_field__error_u3BS1", Y = "creator_button_9paJh", q = "creator_value_7SVI1", a = { container: z, label: D, helper: M, helper__error: T, field: j, field__disabled: B, field__error: K, button: Y, value: q }, E = ({
  value: o,
  min: p = 0,
  max: u = 100,
  step: i = 1,
  label: h,
  helper: d,
  isDisabled: t = !1,
  isError: n = !1,
  onChange: m,
  className: l
}) => {
  const [s, c] = A(o), _ = y(), f = y();
  V(() => {
    c(o);
  }, [o]);
  const I = () => {
    if (t) return;
    const e = Math.min(s + i, u);
    c(e), m?.(e);
  }, N = () => {
    if (t) return;
    const e = Math.max(s - i, p);
    c(e), m?.(e);
  };
  return {
    currentValue: s,
    handleIncrement: I,
    handleDecrement: N,
    handleKeyDown: (e) => {
      e.key === "ArrowUp" || e.key === "ArrowRight" ? (e.preventDefault(), I()) : (e.key === "ArrowDown" || e.key === "ArrowLeft") && (e.preventDefault(), N());
    },
    labelId: _,
    label: h,
    helperId: f,
    helper: d,
    labelledby: `${_} ${f}`,
    isDisabled: t,
    containerClassName: b(a.container, l),
    labelClassName: a.label,
    helperClassName: b(a.helper, {
      [a.helper__error]: n
    }),
    fieldClassName: b(a.field, {
      [a.field__disabled]: t,
      [a.field__error]: n
    })
  };
}, U = ({
  currentValue: o,
  handleIncrement: p,
  handleDecrement: u,
  handleKeyDown: i,
  labelId: h,
  label: d,
  helperId: t,
  helper: n,
  labelledby: m,
  isDisabled: l,
  containerClassName: s,
  labelClassName: c,
  helperClassName: _,
  fieldClassName: f
}) => /* @__PURE__ */ v("div", { className: s, children: [
  /* @__PURE__ */ r(
    w,
    {
      value: d,
      then: /* @__PURE__ */ r("label", { id: h, className: c, children: d })
    }
  ),
  /* @__PURE__ */ v(
    "div",
    {
      className: f,
      "aria-labelledby": m,
      "aria-disabled": l,
      tabIndex: l ? -1 : 0,
      onKeyDown: i,
      role: "spinbutton",
      children: [
        /* @__PURE__ */ r(
          S,
          {
            semantic: x.TERTIARY,
            size: "2xsmall",
            label: "Decrease value",
            prefixIcon: /* @__PURE__ */ r(k, { size: 24 }),
            onClick: u,
            disabled: l,
            tabIndex: -1
          }
        ),
        /* @__PURE__ */ r("span", { className: a.value, children: o }),
        /* @__PURE__ */ r(
          S,
          {
            semantic: x.TERTIARY,
            size: "2xsmall",
            label: "Increase value",
            prefixIcon: /* @__PURE__ */ r(C, { size: 24 }),
            onClick: p,
            disabled: l,
            tabIndex: -1
          }
        )
      ]
    }
  ),
  /* @__PURE__ */ r(
    w,
    {
      value: n,
      then: /* @__PURE__ */ r("label", { id: t, className: _, children: n })
    }
  )
] }), O = R(U, E);
export {
  O as S
};
