import { l as a } from "./if-defined-66202ed0.mjs";
import { n as f, o as O } from "./static-be5c3b1c.mjs";
import { P as g, r as w, n as r } from "./plus-base-1920dd44.mjs";
import { e as z } from "./custom-element-eaccb8d2.mjs";
import { t as F } from "./state-4d7d9621.mjs";
import { s as _ } from "./index-975d3293.mjs";
const B = _({
  slots: {
    base: [
      "relative flex items-center justify-center font-sans 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: {
        base: ""
      },
      primary: {
        base: ""
      }
    },
    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",
      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 = (b, i, t, d) => {
  for (var s = d > 1 ? void 0 : d ? j(i, t) : i, u = b.length - 1, n; u >= 0; u--)
    (n = b[u]) && (s = (d ? n(i, t, s) : n(s)) || s);
  return d && s && S(i, t, s), s;
};
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: b, type: i, disabled: t, kind: d, status: s, title: u, name: n, value: h, href: v, target: m, download: y, rel: x, groupOrder: $, groupPosition: k, loading: p } = this, { base: P } = B({ size: b, disabled: t, kind: d, status: s, groupOrder: $, groupPosition: k, loading: p }), l = this.isLink(), c = O(l ? "a" : "button");
    return f`
      <${c}
        part="base"
        class="${P()}"
        ?disabled=${t}
        type=${a(l ? void 0 : i)}
        title=${u}
        name=${a(n)}
        value=${a(h)}
        href=${a(l ? v : 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=${p ? "true" : "false"}
        tabindex=${t ? "-1" : "0"}
        @blur=${this.handleBlur}
        @focus=${this.handleFocus}
        @click=${this.handleClick}
      >
      <slot></slot>
      ${p ? f`<plus-loading></plus-loading>` : ""}
      </${c}>
    `;
  }
};
e.styles = [...g.styles, w(C)];
o([
  r({ type: String })
], e.prototype, "size", 2);
o([
  r({ type: String })
], e.prototype, "kind", 2);
o([
  r({ type: String })
], e.prototype, "status", 2);
o([
  r()
], e.prototype, "type", 2);
o([
  r()
], e.prototype, "href", 2);
o([
  r()
], e.prototype, "target", 2);
o([
  r()
], e.prototype, "download", 2);
o([
  r()
], e.prototype, "rel", 2);
o([
  r({ reflect: !0, attribute: "group-order" })
], e.prototype, "groupOrder", 2);
o([
  r({ reflect: !0, attribute: "group-position" })
], e.prototype, "groupPosition", 2);
o([
  r({ type: Boolean })
], e.prototype, "loading", 2);
o([
  F()
], e.prototype, "hasFocus", 2);
e = o([
  z("plus-button")
], e);
export {
  e as ButtonComponent
};
