import { e as f } from "./custom-element-eaccb8d2.mjs";
import { P as h, n } from "./plus-base-1920dd44.mjs";
import { t as v } from "./state-4d7d9621.mjs";
import { n as c } from "./static-be5c3b1c.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: ""
    },
    aligment: {
      horizontal: {
        inputWrapper: ["flex-row"]
      },
      vertical: {
        inputWrapper: ["flex-col"]
      }
    }
  },
  compoundVariants: [
    {
      size: "sm",
      aligment: "horizontal",
      class: {
        inputWrapper: ["gap-4"]
      }
    },
    {
      size: "sm",
      aligment: "vertical",
      class: {
        inputWrapper: ["gap-2"]
      }
    },
    {
      size: "md",
      aligment: "horizontal",
      class: {
        inputWrapper: ["gap-5"]
      }
    },
    {
      size: "md",
      aligment: "vertical",
      class: {
        inputWrapper: ["gap-2.5"]
      }
    },
    {
      size: "lg",
      aligment: "horizontal",
      class: {
        inputWrapper: ["gap-6"]
      }
    },
    {
      size: "lg",
      aligment: "vertical",
      class: {
        inputWrapper: ["gap-3"]
      }
    }
  ],
  defaultVariants: {
    size: "md",
    aligment: "horizontal"
  }
});
var x = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (e, l, p, a) => {
  for (var t = a > 1 ? void 0 : a ? W(l, p) : l, i = e.length - 1, o; i >= 0; i--)
    (o = e[i]) && (t = (a ? o(l, p, t) : o(t)) || t);
  return a && t && x(l, p, t), t;
};
let r = class extends h {
  constructor() {
    super(...arguments), this.aligment = "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: l, error: p, label: a, caption: t, aligment: i } = this, { host: o, inputWrapper: m } = b({ size: e, aligment: i }), u = () => a ? c`<label class=${z({ size: e, required: l })} for="input">${a}</label>` : null, g = () => t ? c`<div class=${y({ error: p, size: e })}>${t}</div>` : null;
    return c`
      <div class=${o()}>
        ${u()}
        <div class=${m()}>
          <slot></slot>
        </div>
        ${g()}
      </div>
    `;
  }
};
s([
  n({ type: String })
], r.prototype, "aligment", 2);
s([
  n({ type: String })
], r.prototype, "size", 2);
s([
  n({ type: String })
], r.prototype, "label", 2);
s([
  n({ type: String })
], r.prototype, "caption", 2);
s([
  n({ type: Boolean, converter: (e) => e != "false" })
], r.prototype, "error", 2);
s([
  v()
], r.prototype, "hasFocus", 2);
r = s([
  f("plus-checkbox-group")
], r);
export {
  r as CheckboxGroupComponent
};
