import { o as H } from "./rolldown-runtime.js";
import { i as J, n as W, t as X } from "./vendor/react.js";
import { t as G } from "./chevron-down.js";
import { t as Q } from "./chevron-up.js";
import { t as P } from "./minus.js";
import { t as K } from "./plus.js";
import { t as o } from "./utils.js";
import { t as Y } from "./FieldTooltip.js";
import { n as z, t as ee } from "./field-props.js";
import { t as M } from "./Input.js";
import { a as te, c as re, i as ne, l as oe, n as ie, o as se, r as ae, s as le, t as ue } from "./Field.js";
var m = /* @__PURE__ */ H(J(), 1), t = X(), w = {
  sm: "h-8 text-sm",
  md: "h-9 text-sm",
  lg: "h-11 text-base"
}, V = {
  sm: "px-2",
  md: "px-3",
  lg: "px-4"
}, b = {
  sm: "[&>svg]:size-3.5",
  md: "[&>svg]:size-4",
  lg: "[&>svg]:size-5"
};
function ce(e, r, n) {
  let l = e;
  return r !== void 0 && l < r && (l = r), n !== void 0 && l > n && (l = n), l;
}
function de(e, { delay: r = 400, interval: n = 100 } = {}) {
  const l = m.useRef(void 0), a = m.useRef(void 0), u = m.useCallback(() => {
    e(), l.current = setTimeout(() => {
      a.current = setInterval(e, n);
    }, r);
  }, [
    e,
    r,
    n
  ]), d = m.useCallback(() => {
    l.current && clearTimeout(l.current), a.current && clearInterval(a.current);
  }, []);
  return m.useEffect(() => d, [d]), {
    start: u,
    stop: d
  };
}
function x({ onClick: e, disabled: r, children: n, className: l, ...a }) {
  const { start: u, stop: d } = de(e);
  return /* @__PURE__ */ (0, t.jsx)("button", {
    type: "button",
    tabIndex: -1,
    disabled: r,
    onMouseDown: r ? void 0 : u,
    onMouseUp: d,
    onMouseLeave: d,
    onTouchStart: r ? void 0 : u,
    onTouchEnd: d,
    className: o("flex items-center justify-center transition-[colors,transform] duration-150 ease-smooth motion-reduce:transition-none", "hover:bg-muted active:bg-muted/80 active:scale-95 motion-reduce:active:scale-100", "disabled:opacity-50 disabled:pointer-events-none", "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11", l),
    ...a,
    children: n
  });
}
var L = m.forwardRef(({ className: e, value: r, defaultValue: n = 0, onChange: l, min: a, max: u, step: d = 1, variant: j = "default", size: i = "md", destructive: p = !1, disabled: s, readOnly: f, ...v }, g) => {
  const k = r !== void 0, [q, $] = m.useState(n), c = k ? r : q, [y, A] = m.useState(String(c));
  m.useEffect(() => {
    A(String(c));
  }, [c]);
  const C = m.useCallback((h) => {
    const _ = ce(h, a, u);
    k || $(_), l?.(_), A(String(_));
  }, [
    k,
    a,
    u,
    l
  ]), D = m.useCallback(() => {
    C(c + d);
  }, [
    c,
    d,
    C
  ]), I = m.useCallback(() => {
    C(c - d);
  }, [
    c,
    d,
    C
  ]), T = (h) => {
    A(h.target.value);
  }, E = (h) => {
    const _ = parseFloat(y);
    Number.isNaN(_) ? A(String(c)) : C(_), v.onBlur?.(h);
  }, B = (h) => {
    h.key === "ArrowUp" ? (h.preventDefault(), C(c + d * (h.shiftKey ? 10 : 1))) : h.key === "ArrowDown" && (h.preventDefault(), C(c - d * (h.shiftKey ? 10 : 1))), v.onKeyDown?.(h);
  }, R = a !== void 0 && c <= a, F = u !== void 0 && c >= u, N = !f;
  return j === "default" ? /* @__PURE__ */ (0, t.jsx)("div", {
    "data-slot": "number-input",
    className: o("relative flex", e),
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: o("flex w-full items-center overflow-hidden rounded-lg border transition-[border-color,box-shadow] duration-200 ease-smooth motion-reduce:transition-none", "border-input bg-card", p && "border-destructive", s && "opacity-50"),
      children: [/* @__PURE__ */ (0, t.jsx)(M, {
        ref: g,
        type: "text",
        inputMode: "numeric",
        role: "spinbutton",
        "data-slot": "number-input-field",
        value: y,
        onChange: T,
        onBlur: E,
        onKeyDown: B,
        disabled: s,
        readOnly: f,
        "aria-invalid": p || void 0,
        "aria-valuemin": a,
        "aria-valuemax": u,
        "aria-valuenow": c,
        className: o("flex-1 border-0 bg-transparent text-center outline-none", "focus:ring-0", w[i], V[i]),
        ...v
      }), N && /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex items-center gap-1.5 px-1.5",
        children: [/* @__PURE__ */ (0, t.jsx)(x, {
          onClick: I,
          disabled: s || R,
          "aria-label": "Decrease value",
          className: o("rounded bg-primary/10 p-1 text-primary", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(P, {})
        }), /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: D,
          disabled: s || F,
          "aria-label": "Increase value",
          className: o("rounded bg-primary/10 p-1 text-primary", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(K, {})
        })]
      })]
    })
  }) : j === "verticalButtons" ? /* @__PURE__ */ (0, t.jsx)("div", {
    "data-slot": "number-input",
    className: o("relative flex", e),
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: o("flex w-full items-center overflow-hidden rounded-lg border transition-[border-color,box-shadow] duration-200 ease-smooth motion-reduce:transition-none", "border-input bg-card", p && "border-destructive", s && "opacity-50"),
      children: [/* @__PURE__ */ (0, t.jsx)(M, {
        ref: g,
        type: "text",
        inputMode: "numeric",
        role: "spinbutton",
        "data-slot": "number-input-field",
        value: y,
        onChange: T,
        onBlur: E,
        onKeyDown: B,
        disabled: s,
        readOnly: f,
        "aria-invalid": p || void 0,
        "aria-valuemin": a,
        "aria-valuemax": u,
        "aria-valuenow": c,
        className: o("flex-1 border-0 bg-transparent text-center outline-none", "focus:ring-0", w[i], V[i]),
        ...v
      }), N && /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex h-full flex-col border-l border-input",
        children: [/* @__PURE__ */ (0, t.jsx)(x, {
          onClick: D,
          disabled: s || F,
          "aria-label": "Increase value",
          className: o("flex-1 border-b border-input px-1.5 text-muted-foreground", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(Q, {})
        }), /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: I,
          disabled: s || R,
          "aria-label": "Decrease value",
          className: o("flex-1 px-1.5 text-muted-foreground", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(G, {})
        })]
      })]
    })
  }) : j === "horizontalButtons" ? /* @__PURE__ */ (0, t.jsx)("div", {
    "data-slot": "number-input",
    className: o("relative flex", e),
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: o("flex w-full items-center overflow-hidden rounded-lg border transition-[border-color,box-shadow] duration-200 ease-smooth motion-reduce:transition-none", "border-input bg-card", p && "border-destructive", s && "opacity-50"),
      children: [/* @__PURE__ */ (0, t.jsx)(M, {
        ref: g,
        type: "text",
        inputMode: "numeric",
        role: "spinbutton",
        "data-slot": "number-input-field",
        value: y,
        onChange: T,
        onBlur: E,
        onKeyDown: B,
        disabled: s,
        readOnly: f,
        "aria-invalid": p || void 0,
        "aria-valuemin": a,
        "aria-valuemax": u,
        "aria-valuenow": c,
        className: o("flex-1 border-0 bg-transparent text-center outline-none", "focus:ring-0", w[i], V[i]),
        ...v
      }), N && /* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex h-full items-center",
        children: [/* @__PURE__ */ (0, t.jsx)(x, {
          onClick: I,
          disabled: s || R,
          "aria-label": "Decrease value",
          className: o("h-full border-l border-input px-2.5 text-muted-foreground", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(P, {})
        }), /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: D,
          disabled: s || F,
          "aria-label": "Increase value",
          className: o("h-full border-l border-input px-2.5 text-muted-foreground", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(K, {})
        })]
      })]
    })
  }) : j === "stretchedButtons" ? /* @__PURE__ */ (0, t.jsx)("div", {
    "data-slot": "number-input",
    className: o("relative flex", e),
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: o("flex w-full items-center overflow-hidden rounded-lg border transition-[border-color,box-shadow] duration-200 ease-smooth motion-reduce:transition-none", "border-input bg-card", p && "border-destructive", s && "opacity-50"),
      children: [
        N && /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: I,
          disabled: s || R,
          "aria-label": "Decrease value",
          className: o("h-full border-r border-input px-2.5 text-muted-foreground", b[i], w[i]),
          children: /* @__PURE__ */ (0, t.jsx)(P, {})
        }),
        /* @__PURE__ */ (0, t.jsx)(M, {
          ref: g,
          type: "text",
          inputMode: "numeric",
          role: "spinbutton",
          "data-slot": "number-input-field",
          value: y,
          onChange: T,
          onBlur: E,
          onKeyDown: B,
          disabled: s,
          readOnly: f,
          "aria-invalid": p || void 0,
          "aria-valuemin": a,
          "aria-valuemax": u,
          "aria-valuenow": c,
          className: o("flex-1 border-0 bg-transparent text-center outline-none", "focus:ring-0", w[i], V[i]),
          ...v
        }),
        N && /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: D,
          disabled: s || F,
          "aria-label": "Increase value",
          className: o("h-full border-l border-input px-2.5 text-muted-foreground", b[i], w[i]),
          children: /* @__PURE__ */ (0, t.jsx)(K, {})
        })
      ]
    })
  }) : j === "mini" ? /* @__PURE__ */ (0, t.jsx)("div", {
    "data-slot": "number-input",
    className: o("relative flex w-32", e),
    children: /* @__PURE__ */ (0, t.jsxs)("div", {
      className: o("flex w-full items-center gap-1.5 overflow-hidden rounded-lg border px-3 py-2", "border-input bg-card", p && "border-destructive", s && "opacity-50"),
      children: [
        N && /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: I,
          disabled: s || R,
          "aria-label": "Decrease value",
          className: o("rounded bg-primary/10 p-1 text-primary", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(P, {})
        }),
        /* @__PURE__ */ (0, t.jsx)(M, {
          ref: g,
          type: "text",
          inputMode: "numeric",
          role: "spinbutton",
          "data-slot": "number-input-field",
          value: y,
          onChange: T,
          onBlur: E,
          onKeyDown: B,
          disabled: s,
          readOnly: f,
          "aria-invalid": p || void 0,
          "aria-valuemin": a,
          "aria-valuemax": u,
          "aria-valuenow": c,
          className: o("flex-1 border-0 bg-transparent text-center text-sm outline-none", "focus:ring-0"),
          ...v
        }),
        N && /* @__PURE__ */ (0, t.jsx)(x, {
          onClick: D,
          disabled: s || F,
          "aria-label": "Increase value",
          className: o("rounded bg-primary/10 p-1 text-primary", b[i]),
          children: /* @__PURE__ */ (0, t.jsx)(K, {})
        })
      ]
    })
  }) : null;
});
L.displayName = "NumberInputControl";
var U = m.forwardRef((e, r) => {
  const [n, l] = z(e);
  if (!ee(n)) return /* @__PURE__ */ (0, t.jsx)(L, {
    ref: r,
    ...l,
    required: n.required
  });
  const { label: a, required: u, labelIcon: d, tooltip: j, topRight: i, description: p, bottomRight: s, error: f, fieldClassName: v } = n, g = l, k = a || i, q = p || s || f;
  return /* @__PURE__ */ (0, t.jsxs)(ue, {
    state: f ? "destructive" : void 0,
    disabled: g.disabled,
    className: v,
    children: [
      k && /* @__PURE__ */ (0, t.jsxs)(re, { children: [a && /* @__PURE__ */ (0, t.jsxs)(le, {
        required: u,
        labelIcon: d,
        children: [a, j && /* @__PURE__ */ (0, t.jsx)(Y, { content: j })]
      }), i && /* @__PURE__ */ (0, t.jsx)(oe, { children: i })] }),
      /* @__PURE__ */ (0, t.jsx)(ne, { children: () => /* @__PURE__ */ (0, t.jsx)(L, {
        ref: r,
        ...g,
        required: u,
        destructive: !!f || g.destructive
      }) }),
      q && /* @__PURE__ */ (0, t.jsxs)(ie, { children: [
        f && /* @__PURE__ */ (0, t.jsx)(se, { children: f }),
        !f && p && /* @__PURE__ */ (0, t.jsx)(te, { children: p }),
        s && /* @__PURE__ */ (0, t.jsx)(ae, {
          className: "ms-auto",
          children: s
        })
      ] })
    ]
  });
});
U.displayName = "NumberInput";
var pe = W(), S = {};
function O(e, r) {
  if (e !== null)
    switch (r) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var Z = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const n of Array.from(this.childNodes))
      n.nodeType === Node.TEXT_NODE && !n.textContent?.trim() || e.push(n);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((n) => this._childrenContainer.appendChild(n)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, pe.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, n) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(S).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const n = S[e] || "string";
    this._props[e] = this._parseValue(r, n), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), n = S[e] || "string";
    return O(this.getAttribute(r), n);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [n, l] of Object.entries(S)) if (n in this._props) e[n] = this._props[n];
    else {
      const a = n.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[n] = O(this.getAttribute(a), l);
    }
    const r = m.createElement(U, {
      ...e,
      _hostElement: this
    });
    this._root.render(r);
  }
};
for (const e of Object.keys(S)) Object.defineProperty(Z.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-number-input") && customElements.define("hf-number-input", Z);
export {
  Z as NumberInputWC,
  Z as default
};

//# sourceMappingURL=hf-number-input.js.map