import { l as a } from "./if-defined-09f6e3ef.mjs";
import { n as f, o as P } from "./static-5cfd1f40.mjs";
import { P as g, r as O, n as s } from "./plus-base-10eea8a6.mjs";
import { e as z } from "./custom-element-eaccb8d2.mjs";
import { t as F } from "./state-f0bfed48.mjs";
import { s as _ } from "./index-975d3293.mjs";
const B = _({
  slots: {
    base: [
      "relative antialiased flex items-center justify-center font-sans font-medium rounded border border-color-default",
      "outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:z-[1]"
    ]
  },
  variants: {
    size: {
      sm: {
        base: "gap-2 py-2 px-2 text-sm"
      },
      md: {
        base: "gap-2.5 py-2 px-3 text-base"
      },
      lg: {
        base: "gap-3 py-2 px-4 text-lg"
      }
    },
    kind: {
      filled: {
        base: "border-transparent"
      },
      outlined: {
        base: "bg-color-base"
      },
      dashed: {
        base: "bg-color-base border-dashed "
      },
      text: {
        base: "bg-transparent border-transparent"
      }
    },
    groupPosition: {
      vertical: {
        base: "w-full"
      },
      horizontal: {}
    },
    status: {
      default: "",
      primary: "",
      info: "",
      success: "",
      warning: "",
      error: "",
      invert: ""
    },
    disabled: {
      true: {
        base: "cursor-not-allowed text-color-disabled user-select-none"
      }
    },
    groupOrder: {
      first: {
        base: "rounded-none rounded-l"
      },
      middle: {
        base: "rounded-none"
      },
      last: {
        base: "rounded-none rounded-r"
      }
    },
    loading: {
      true: {
        base: "cursor-wait relative overflow-hidden"
      }
    }
  },
  compoundVariants: [
    {
      groupPosition: "vertical",
      groupOrder: "first",
      class: {
        base: "rounded-none rounded-t"
      }
    },
    {
      groupPosition: "vertical",
      groupOrder: "middle",
      class: {
        base: "rounded-none"
      }
    },
    {
      groupPosition: "vertical",
      groupOrder: "last",
      class: {
        base: "rounded-none rounded-b"
      }
    },
    {
      kind: "filled",
      status: "default",
      disabled: !1,
      class: {
        base: [
          "text-color-default bg-color-default",
          "hover:bg-color-default-hover",
          "active:bg-color-default-pressed",
          "focus-visible:bg-color-default-focus",
          "data-[loading=true]:bg-color-default-pressed"
        ]
      }
    },
    {
      kind: "filled",
      status: "primary",
      disabled: !1,
      class: {
        base: [
          "text-color-base bg-color-primary",
          "hover:bg-color-primary-hover",
          "active:bg-color-primary-pressed",
          "focus-visible:bg-color-primary-focus",
          "data-[loading=true]:bg-color-primary-pressed"
        ]
      }
    },
    {
      kind: "filled",
      status: "info",
      disabled: !1,
      class: {
        base: [
          "text-color-base bg-color-info",
          "hover:bg-color-info-hover",
          "active:bg-color-info-pressed",
          "focus-visible:bg-color-info-focus",
          "data-[loading=true]:bg-color-info-pressed"
        ]
      }
    },
    {
      kind: "filled",
      status: "success",
      disabled: !1,
      class: {
        base: [
          "text-color-base bg-color-success",
          "hover:bg-color-success-hover",
          "active:bg-color-success-pressed",
          "focus-visible:bg-color-success-focus",
          "data-[loading=true]:bg-color-success-pressed"
        ]
      }
    },
    {
      kind: "filled",
      status: "warning",
      disabled: !1,
      class: {
        base: [
          "text-color-base bg-color-warning",
          "hover:bg-color-warning-hover",
          "active:bg-color-warning-pressed",
          "focus-visible:bg-color-warning-focus",
          "data-[loading=true]:bg-color-warning-pressed"
        ]
      }
    },
    {
      kind: "filled",
      status: "error",
      disabled: !1,
      class: {
        base: [
          "text-color-base bg-color-error",
          "hover:bg-color-error-hover",
          "active:bg-color-error-pressed",
          "focus-visible:bg-color-error-focus",
          "data-[loading=true]:bg-color-error-pressed"
        ]
      }
    },
    {
      kind: "filled",
      status: "invert",
      disabled: !1,
      class: {
        base: [
          "text-color-invert-default bg-color-invert-default",
          "hover:bg-color-invert-default-hover",
          "active:bg-color-invert-default-pressed",
          "focus-visible:bg-color-invert-default-focus",
          "data-[loading=true]:bg-color-invert-default-pressed"
        ]
      }
    },
    {
      kind: "filled",
      disabled: !0,
      class: {
        base: "bg-color-disabled"
      }
    },
    {
      kind: "outlined",
      status: "default",
      disabled: !1,
      class: {
        base: [
          "text-color-default border-color-default",
          "hover:bg-color-default-hover",
          "active:bg-color-default-pressed",
          "focus-visible:bg-color-default-focus",
          "data-[loading=true]:bg-color-default-pressed"
        ]
      }
    },
    {
      kind: "outlined",
      status: "primary",
      disabled: !1,
      class: {
        base: [
          "text-color-primary border-color-primary",
          "hover:bg-color-base-hover",
          "active:bg-color-base-pressed",
          "focus-visible:bg-color-base-focus",
          "data-[loading=true]:bg-color-base-pressed"
        ]
      }
    },
    {
      kind: "dashed",
      status: "default",
      disabled: !1,
      class: {
        base: [
          "text-color-default  border-color-default",
          "hover:bg-color-base-hover",
          "active:bg-color-base-pressed",
          "focus-visible:bg-color-base-focus",
          "data-[loading=true]:bg-color-base-pressed"
        ]
      }
    },
    {
      kind: "dashed",
      status: "primary",
      disabled: !1,
      class: {
        base: [
          "text-color-primary border-color-primary",
          "hover:bg-color-base-hover",
          "active:bg-color-base-pressed",
          "focus-visible:bg-color-base-focus",
          "data-[loading=true]:bg-color-base-pressed"
        ]
      }
    },
    {
      kind: "text",
      status: "default",
      disabled: !1,
      class: {
        base: [
          "text-color-default",
          "hover:bg-color-default-hover",
          "active:bg-color-default-pressed",
          "focus-visible:bg-color-default-focus",
          "data-[loading=true]:bg-color-default-pressed"
        ]
      }
    },
    {
      kind: "text",
      status: "primary",
      disabled: !1,
      class: {
        base: ["text-color-primary", "hover:bg-color-base-hover", "active:bg-color-base-pressed", "focus-visible:bg-color-base-focus", "data-[loading=true]:bg-color-base-pressed"]
      }
    }
  ],
  defaultVariants: {
    size: "md",
    kind: "filled",
    status: "default",
    disabled: !1,
    groupOrder: void 0,
    groupPosition: void 0,
    loading: !1
  }
}), C = `:host{display:inline-block;position:relative;width:auto;cursor:pointer}:host([group-order="middle"][group-position="horizontal"]),:host([group-order="last"][group-position="horizontal"]){margin-left:-1px}:host([group-order="middle"][group-position="vertical"]),:host([group-order="last"][group-position="vertical"]){margin-top:-1px}
`;
var S = Object.defineProperty, j = Object.getOwnPropertyDescriptor, o = (n, i, t, d) => {
  for (var r = d > 1 ? void 0 : d ? j(i, t) : i, c = n.length - 1, u; c >= 0; c--)
    (u = n[c]) && (r = (d ? u(i, t, r) : u(r)) || r);
  return d && r && S(i, t, r), r;
};
let e = class extends g {
  constructor() {
    super(...arguments), this.size = "md", this.kind = "filled", this.status = "default", this.type = "button", this.href = "", this.rel = "noreferrer noopener", this.loading = !1, this.hasFocus = !1;
  }
  isLink() {
    return !!this.href;
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("plus-blur");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("plus-focus");
  }
  handleClick() {
    this.emit("plus-click");
  }
  render() {
    const { size: n, type: i, disabled: t, kind: d, status: r, title: c, name: u, value: v, href: h, target: m, download: y, rel: x, groupOrder: k, groupPosition: $, loading: b } = this, { base: w } = B({ size: n, disabled: t, kind: d, status: r, groupOrder: k, groupPosition: $, loading: b }), l = this.isLink(), p = P(l ? "a" : "button");
    return f`
      <${p}
        part="base"
        class="${w()}"
        ?disabled=${t}
        type=${a(l ? void 0 : i)}
        title=${c}
        name=${a(u)}
        value=${a(v)}
        href=${a(l ? h : void 0)}
        target=${a(l ? m : void 0)}
        download=${a(l ? y : void 0)}
        rel=${a(l ? x : void 0)}
        role=${a(l ? void 0 : "button")}
        aria-disabled=${t ? "true" : "false"}
        data-loading=${b ? "true" : "false"}
        tabindex=${t ? "-1" : "0"}
        @blur=${this.handleBlur}
        @focus=${this.handleFocus}
        @click=${this.handleClick}
      >
      <slot></slot>
      ${b ? f`<plus-loading></plus-loading>` : ""}
      </${p}>
    `;
  }
};
e.styles = [...g.styles, O(C)];
o([
  s({ type: String })
], e.prototype, "size", 2);
o([
  s({ type: String })
], e.prototype, "kind", 2);
o([
  s({ type: String })
], e.prototype, "status", 2);
o([
  s()
], e.prototype, "type", 2);
o([
  s()
], e.prototype, "href", 2);
o([
  s()
], e.prototype, "target", 2);
o([
  s()
], e.prototype, "download", 2);
o([
  s()
], e.prototype, "rel", 2);
o([
  s({ reflect: !0, attribute: "group-order" })
], e.prototype, "groupOrder", 2);
o([
  s({ reflect: !0, attribute: "group-position" })
], e.prototype, "groupPosition", 2);
o([
  s({ type: Boolean })
], e.prototype, "loading", 2);
o([
  F()
], e.prototype, "hasFocus", 2);
e = o([
  z("plus-button")
], e);
export {
  e as ButtonComponent
};
