import { prop as B, Use as E, html as g, attr as l, computedOf as p, aria as m, When as D, Fragment as y, style as L, on as V, Value as I, Empty as j, WithElement as S, OnDispose as O } from "@tempots/dom";
import { t as h, b as k, h as c, a as v, B as U, I as _ } from "./translations-BGblCUBj.js";
import { ElementRect as W } from "@tempots/ui";
function q(r, e, o, t) {
  const u = [
    "bc-button",
    `bc-button--size-${r}`,
    `bc-control--padding-${r}`,
    `bc-control--rounded-${e}`
  ];
  return o && u.push("bc-button--loading"), t && u.push("bc-button--full-width"), u.join(" ");
}
function z(r, e, o) {
  const t = /* @__PURE__ */ new Map();
  t.set("--button-text-shadow", "var(--text-shadow-none)"), t.set("--button-text-shadow-dark", "var(--text-shadow-none)");
  const u = (a, s, b, i) => {
    o || (t.set("--button-bg-hover", a), t.set("--button-text-hover", b), t.set("--button-bg-hover-dark", s), t.set("--button-text-hover-dark", i));
  };
  switch (r) {
    case "filled": {
      const a = k(e, "solid", "light"), s = k(e, "solid", "dark");
      t.set("--button-bg", a.backgroundColor), t.set("--button-text", a.textColor), t.set("--button-bg-dark", s.backgroundColor), t.set("--button-text-dark", s.textColor), t.set(
        "--button-text-shadow",
        "var(--text-shadow-button-filled, var(--text-shadow-sm))"
      ), t.set(
        "--button-text-shadow-dark",
        "var(--text-shadow-button-filled, var(--text-shadow-sm))"
      );
      const b = c(e, "solid", "light"), i = c(e, "solid", "dark");
      u(
        b.backgroundColor,
        i.backgroundColor,
        b.textColor,
        i.textColor
      );
      break;
    }
    case "light": {
      const a = k(e, "light", "light"), s = k(e, "light", "dark");
      t.set("--button-bg", a.backgroundColor), t.set("--button-text", a.textColor), t.set("--button-bg-dark", s.backgroundColor), t.set("--button-text-dark", s.textColor);
      const b = c(e, "light", "light"), i = c(e, "light", "dark");
      u(
        b.backgroundColor,
        i.backgroundColor,
        b.textColor,
        i.textColor
      );
      break;
    }
    case "outline": {
      t.set("--button-bg", "transparent"), t.set("--button-bg-dark", "transparent"), t.set("--button-border", v(e, "light")), t.set("--button-border-dark", v(e, "dark")), t.set("--button-text", h(e, "light")), t.set("--button-text-dark", h(e, "dark")), t.set(
        "--button-text-shadow",
        "var(--text-shadow-button-light, var(--text-shadow-xs))"
      ), t.set(
        "--button-text-shadow-dark",
        "var(--text-shadow-button-light, var(--text-shadow-xs))"
      );
      const a = c(e, "light", "light"), s = c(e, "light", "dark");
      u(
        a.backgroundColor,
        s.backgroundColor,
        a.textColor,
        s.textColor
      );
      break;
    }
    case "dashed": {
      t.set("--button-bg", "transparent"), t.set("--button-bg-dark", "transparent"), t.set("--button-border", v(e, "light")), t.set("--button-border-dark", v(e, "dark")), t.set("--button-border-style", "dashed"), t.set("--button-text", h(e, "light")), t.set("--button-text-dark", h(e, "dark"));
      const a = c(e, "light", "light"), s = c(e, "light", "dark");
      u(
        a.backgroundColor,
        s.backgroundColor,
        a.textColor,
        s.textColor
      );
      break;
    }
    case "default": {
      const a = k("neutral", "light", "light"), s = k("neutral", "light", "dark");
      t.set("--button-bg", a.backgroundColor), t.set("--button-text", h(e, "light")), t.set("--button-bg-dark", s.backgroundColor), t.set("--button-text-dark", h(e, "dark")), t.set(
        "--button-text-shadow",
        "var(--text-shadow-button-default, var(--text-shadow-2xs))"
      ), t.set(
        "--button-text-shadow-dark",
        "var(--text-shadow-button-default, var(--text-shadow-2xs))"
      );
      const b = c("base", "light", "light"), i = c("base", "light", "dark");
      u(
        b.backgroundColor,
        i.backgroundColor,
        t.get("--button-text") ?? a.textColor,
        t.get("--button-text-dark") ?? s.textColor
      );
      break;
    }
    case "text": {
      t.set("--button-bg", "transparent"), t.set("--button-bg-dark", "transparent"), t.set("--button-text", h(e, "light")), t.set("--button-text-dark", h(e, "dark")), o || t.set("--button-hover-decoration", "underline");
      break;
    }
  }
  return Array.from(t.entries()).map(([a, s]) => `${a}: ${s}`).join("; ");
}
function R({
  type: r = "button",
  disabled: e = !1,
  loading: o = !1,
  variant: t = "filled",
  size: u = "md",
  color: a = "base",
  roundedness: s = "sm",
  onClick: b = () => {
  },
  fullWidth: i = !1,
  stopPropagation: C = !0
}, ...w) {
  const x = B(null);
  return E(
    U,
    (f) => g.button(
      l.type(r),
      l.disabled(
        p(
          e,
          o
        )((n, d) => n || d)
      ),
      // Add ARIA attributes for accessibility
      m.busy(o ?? !1),
      D(o ?? !1, () => m.label(f.$.loadingExtended)),
      l.class(
        p(u, s, o, i)(q)
      ),
      l.style(p(t, a, e)(z)),
      D(
        o ?? !1,
        () => y(
          L.width(
            x.map((n) => n == null ? "" : `${n.width}px`)
          ),
          L.height(
            x.map((n) => n == null ? "" : `${n.height}px`)
          ),
          _({ icon: "line-md:loading-twotone-loop", size: u ?? "md" }),
          // Hidden live region for screen reader announcements
          g.span(
            l.class("sr-only"),
            m.live("polite"),
            f.$.loadingExtended
          )
        ),
        () => y(
          V.click((n) => {
            r !== "submit" && n.preventDefault(), C && n.stopPropagation(), b();
          }),
          ...w
        )
      ),
      D(
        o != null,
        () => W((n) => (n.on((d) => {
          I.get(o ?? !1) || x.set(d);
        }), j))
      )
    )
  );
}
function A(r, e, o) {
  const t = [
    r ? "bc-base-input-container" : "bc-input-container"
  ];
  return e ? t.push(
    r ? "bc-base-input-container--disabled" : "bc-input-container--disabled"
  ) : t.push(
    r ? "bc-base-input-container--default" : "bc-input-container--default"
  ), o && t.push("bc-input-container--error"), t.join(" ");
}
function F(r, e) {
  const o = ["bc-input-container__input"];
  return r || (o.push(`bc-control--padding-${e}`), o.push(`bc-control--text-size-${e}`)), o.join(" ");
}
const G = ({
  baseContainer: r,
  class: e,
  classes: o,
  disabled: t,
  input: u,
  before: a,
  after: s,
  hasError: b,
  focusableSelector: i = "input, select, textarea",
  growInput: C = !0,
  size: w
}, ...x) => {
  const f = I.map(t ?? !1, (n) => n);
  return g.div(
    S((n) => {
      const d = () => {
        n.querySelector(i)?.focus();
      };
      return n.addEventListener("click", d), O(() => n.removeEventListener("click", d));
    }),
    l.class(
      p(
        r,
        f,
        b ?? !1
        // size ?? 'md'
      )(
        (n, d, $) => A(
          n ?? !1,
          d ?? !1,
          $ ?? !1
          // (size ?? 'md') as ControlSize
        )
      )
    ),
    l.class(e),
    l.class(o?.container),
    a != null ? g.span(l.class("bc-input-container__before"), a) : null,
    g.div(
      l.class(
        p(
          r,
          w ?? "md"
        )(
          (n, d) => F(
            n ?? !1,
            d ?? "md"
          )
        )
      ),
      // attr.class('bc-input-container__input'),
      l.class(
        I.map(
          C,
          (n) => n ? "bc-input-container__input--grow" : ""
        )
      ),
      l.class(o?.wrapper),
      u
    ),
    s != null ? g.span(l.class("bc-input-container__after"), s) : null,
    ...x
  );
};
function J({
  icon: r,
  size: e = "md",
  color: o = "neutral"
}) {
  return g.span(
    l.class("bc-input-container__icon"),
    _({ icon: r, size: e, color: o })
  );
}
export {
  R as B,
  G as I,
  J as a,
  q as b,
  z as c,
  F as g
};
