import { e as h } from "./custom-element-eaccb8d2.mjs";
import { P as v, n as l } from "./plus-base-10eea8a6.mjs";
import { t as g } from "./state-f0bfed48.mjs";
import { n as c } from "./static-5cfd1f40.mjs";
import { l as z, c as y } from "./label.style-1b60b221.mjs";
import { s as d } from "./index-975d3293.mjs";
const b = d({
  slots: {
    host: ["font-sans antialiased flex flex-col  items-start justify-start w-full relative gap-0.5"],
    inputWrapper: ["flex flex-row items-center justify-start gap-2 "]
  },
  variants: {
    size: {
      sm: "",
      md: "",
      lg: ""
    },
    orientation: {
      horizontal: {
        inputWrapper: ["flex-row"]
      },
      vertical: {
        inputWrapper: ["flex-col"]
      }
    }
  },
  compoundVariants: [
    {
      size: "sm",
      orientation: "horizontal",
      class: {
        inputWrapper: ["gap-4"]
      }
    },
    {
      size: "sm",
      orientation: "vertical",
      class: {
        inputWrapper: ["gap-2"]
      }
    },
    {
      size: "md",
      orientation: "horizontal",
      class: {
        inputWrapper: ["gap-5"]
      }
    },
    {
      size: "md",
      orientation: "vertical",
      class: {
        inputWrapper: ["gap-2.5"]
      }
    },
    {
      size: "lg",
      orientation: "horizontal",
      class: {
        inputWrapper: ["gap-6"]
      }
    },
    {
      size: "lg",
      orientation: "vertical",
      class: {
        inputWrapper: ["gap-3"]
      }
    }
  ],
  defaultVariants: {
    size: "md",
    orientation: "horizontal"
  }
});
var x = Object.defineProperty, W = Object.getOwnPropertyDescriptor, a = (e, i, s, o) => {
  for (var t = o > 1 ? void 0 : o ? W(i, s) : i, p = e.length - 1, n; p >= 0; p--)
    (n = e[p]) && (t = (o ? n(i, s, t) : n(t)) || t);
  return o && t && x(i, s, t), t;
};
let r = class extends v {
  constructor() {
    super(...arguments), this.orientation = "horizontal", this.size = "md", this.error = !1, this.hasFocus = !1;
  }
  // private handleClick() {
  //   this.emit("plus-change");
  // }
  // private handleFocus() {
  //   this.hasFocus = true;
  //   this.emit("plus-focus");
  // }
  // private handleBlur() {
  //   this.hasFocus = false;
  //   this.emit("plus-blur");
  // }
  // private handleChange() {
  //   this.emit("plus-change");
  // }
  render() {
    const { size: e, required: i, error: s, label: o, caption: t, orientation: p } = this, { host: n, inputWrapper: u } = b({ size: e, orientation: p }), m = () => o ? c`<label class=${z({ size: e, required: i })} for="input">${o}</label>` : null, f = () => t ? c`<div class=${y({ error: s, size: e })}>${t}</div>` : null;
    return c`
      <div class=${n()}>
        ${m()}
        <div class=${u()}>
          <slot></slot>
        </div>
        ${f()}
      </div>
    `;
  }
};
a([
  l({ type: String })
], r.prototype, "orientation", 2);
a([
  l({ type: String })
], r.prototype, "size", 2);
a([
  l({ type: String })
], r.prototype, "label", 2);
a([
  l({ type: String })
], r.prototype, "caption", 2);
a([
  l({ type: Boolean, converter: (e) => e != "false" })
], r.prototype, "error", 2);
a([
  g()
], r.prototype, "hasFocus", 2);
r = a([
  h("plus-checkbox-group")
], r);
export {
  r as CheckboxGroupComponent
};
