import { o as F } from "./rolldown-runtime.js";
import { i as G, n as V, t as E } from "./vendor/react.js";
import { t } from "./utils.js";
import { n as I, t as D } from "./field-props.js";
import { t as L } from "./Fieldset.js";
import { a as M, n as R, o as q, u as Z } from "./Field.js";
import { a as $, c as J, i as b, o as B, r as v, s as H, t as W } from "./selection-group.js";
var m = /* @__PURE__ */ F(G(), 1), r = E();
function X({ item: e, checked: s, disabled: i, variant: l, size: o, color: a, filled: x, hasError: d, onToggle: h }) {
  const n = i || e.disabled, c = $[a], p = H[o], u = {
    type: "button",
    role: "checkbox",
    "aria-checked": s,
    disabled: n || void 0,
    onClick: () => h(!s)
  };
  if (l === "default" || l === "simple") return /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": l,
    className: t("group inline-flex items-start gap-3 text-left cursor-pointer transition-colors bg-transparent", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 rounded", n && "cursor-not-allowed opacity-50"),
    children: [/* @__PURE__ */ (0, r.jsx)(b, {
      type: "checkbox",
      checked: s,
      disabled: n,
      size: o,
      color: d ? "destructive" : a,
      className: t(!s && !n && "group-hover:border-primary")
    }), /* @__PURE__ */ (0, r.jsxs)("span", {
      className: "flex flex-col gap-0.5",
      children: [/* @__PURE__ */ (0, r.jsxs)("span", {
        className: "flex items-center gap-2",
        children: [/* @__PURE__ */ (0, r.jsx)("span", {
          className: t("font-medium text-foreground select-none", p),
          children: e.label
        }), e.subtext && /* @__PURE__ */ (0, r.jsx)("span", {
          className: t("text-muted-foreground select-none", p),
          children: e.subtext
        })]
      }), e.description && /* @__PURE__ */ (0, r.jsx)("span", {
        className: t("text-muted-foreground select-none", p),
        children: e.description
      })]
    })]
  });
  if (l === "card") return /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "card",
    className: t("group relative flex items-center text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-lg border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", o === "lg" ? "p-4 gap-4" : "p-3 gap-3", s ? t("border-2", c.border) : "border border-border", x && "bg-muted/50", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
    children: [
      e.avatar && /* @__PURE__ */ (0, r.jsx)("div", {
        className: "shrink-0",
        children: e.avatar
      }),
      e.icon && !e.avatar && /* @__PURE__ */ (0, r.jsx)(v, {
        size: o === "lg" ? "md" : "sm",
        children: e.icon
      }),
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex-1 flex flex-col gap-0.5 min-w-0",
        children: [/* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex items-center gap-2",
          children: [/* @__PURE__ */ (0, r.jsx)("span", {
            className: t("font-medium text-foreground select-none", p),
            children: e.label
          }), e.badge]
        }), e.description && /* @__PURE__ */ (0, r.jsx)("span", {
          className: t("text-muted-foreground select-none", p),
          children: e.description
        })]
      }),
      e.image && e.imagePosition === "trailing" && /* @__PURE__ */ (0, r.jsx)("img", {
        src: e.image,
        alt: "",
        className: "h-5 w-auto object-contain shrink-0"
      }),
      /* @__PURE__ */ (0, r.jsx)(b, {
        type: "checkbox",
        checked: s,
        disabled: n,
        size: o,
        color: d ? "destructive" : a
      })
    ]
  });
  if (l === "pill") {
    const j = o === "lg" ? "px-4 py-3" : "px-3 py-2.5";
    return /* @__PURE__ */ (0, r.jsxs)("button", {
      ...u,
      "data-slot": "checkbox-group-item",
      "data-variant": "pill",
      className: t("group inline-flex items-center gap-3 cursor-pointer transition-all rounded-full delight-selection-press", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", j, s ? t(c.bg, c.text) : "bg-background border border-border", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
      children: [/* @__PURE__ */ (0, r.jsx)(b, {
        type: "checkbox",
        checked: s,
        disabled: n,
        size: o,
        color: d ? "destructive" : a,
        className: s ? "bg-white/20 border-transparent" : void 0
      }), /* @__PURE__ */ (0, r.jsx)("span", {
        className: t("font-medium select-none", p),
        children: e.label
      })]
    });
  }
  return l === "stacked" ? /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "stacked",
    className: t("group w-full text-left cursor-pointer transition-all delight-selection-press", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", "rounded-xl overflow-hidden", n && "cursor-not-allowed opacity-50"),
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: t("flex items-center justify-between p-3 bg-background border", s ? t("border-2", c.border) : "border-border", "rounded-t-xl", !e.description && "rounded-b-xl"),
      children: [/* @__PURE__ */ (0, r.jsx)("span", {
        className: t("font-medium text-foreground select-none", p),
        children: e.label
      }), /* @__PURE__ */ (0, r.jsx)(b, {
        type: "checkbox",
        checked: s,
        disabled: n,
        size: o,
        color: d ? "destructive" : a
      })]
    }), e.description && /* @__PURE__ */ (0, r.jsx)("div", {
      className: t("p-3 bg-background border border-t-0", s ? t("border-2 border-t-0", c.border) : "border-border", "rounded-b-xl"),
      children: /* @__PURE__ */ (0, r.jsx)("span", {
        className: t("text-muted-foreground select-none", p),
        children: e.description
      })
    })]
  }) : l === "chip" ? /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "chip",
    className: t("group relative flex items-center text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", o === "lg" ? "py-3 px-4 gap-4" : o === "md" ? "py-2 px-4 gap-3" : "py-1.5 px-3 gap-2.5", s ? "border-2 border-primary" : "border border-border", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: "flex items-center gap-3 flex-1",
      children: [/* @__PURE__ */ (0, r.jsx)(W, {
        color: e.dotColor,
        size: o
      }), /* @__PURE__ */ (0, r.jsx)("span", {
        className: t("font-medium text-secondary-foreground select-none flex-1", p),
        children: e.label
      })]
    }), /* @__PURE__ */ (0, r.jsx)(b, {
      type: "checkbox",
      checked: s,
      disabled: n,
      size: o,
      color: d ? "destructive" : a
    })]
  }) : l === "icon-simple" ? /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "icon-simple",
    className: t("group relative flex items-start text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", o === "lg" ? "p-4 gap-4" : "p-4 gap-3", s ? t("border-2", c.border) : "border border-border", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
    children: [
      e.icon && /* @__PURE__ */ (0, r.jsx)(v, {
        size: o === "lg" ? "md" : "sm",
        children: e.icon
      }),
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex-1 min-w-0 space-y-0",
        children: [/* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex items-center gap-1 flex-wrap",
          children: [/* @__PURE__ */ (0, r.jsx)("span", {
            className: t("font-medium text-secondary-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
            children: e.label
          }), e.subtext && /* @__PURE__ */ (0, r.jsx)("span", {
            className: t("text-muted-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
            children: e.subtext
          })]
        }), e.description && /* @__PURE__ */ (0, r.jsx)("p", {
          className: t("text-muted-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
          children: e.description
        })]
      }),
      /* @__PURE__ */ (0, r.jsx)("div", {
        className: "shrink-0 pt-0.5",
        children: /* @__PURE__ */ (0, r.jsx)(b, {
          type: "checkbox",
          checked: s,
          disabled: n,
          size: o,
          color: d ? "destructive" : a
        })
      })
    ]
  }) : l === "icon-card" ? /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "icon-card",
    className: t("group relative flex flex-col text-left cursor-pointer transition-all delight-selection-press", "bg-background rounded-xl border box-border overflow-hidden", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", s ? t("border-2", c.border) : "border border-border", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: t("flex items-center gap-1 w-full border-b px-3 py-3", s ? c.border : "border-border"),
      children: [/* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex items-center gap-3 flex-1",
        children: [e.icon && /* @__PURE__ */ (0, r.jsx)(v, {
          size: o === "lg" ? "md" : "sm",
          children: e.icon
        }), /* @__PURE__ */ (0, r.jsx)("span", {
          className: "font-semibold text-secondary-foreground text-base leading-6",
          children: e.label
        })]
      }), /* @__PURE__ */ (0, r.jsx)(b, {
        type: "checkbox",
        checked: s,
        disabled: n,
        size: o,
        color: d ? "destructive" : a
      })]
    }), /* @__PURE__ */ (0, r.jsx)("div", {
      className: "p-4 w-full",
      children: /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex items-start gap-1",
        children: [/* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex-1 space-y-1",
          children: [e.price && /* @__PURE__ */ (0, r.jsxs)("div", {
            className: "flex items-end gap-1",
            children: [/* @__PURE__ */ (0, r.jsx)("span", {
              className: "text-display-sm font-semibold text-secondary-foreground",
              children: e.price
            }), e.pricePeriod && /* @__PURE__ */ (0, r.jsx)("span", {
              className: "text-sm text-muted-foreground pb-[3px]",
              children: e.pricePeriod
            })]
          }), e.description && /* @__PURE__ */ (0, r.jsx)("p", {
            className: "text-sm text-muted-foreground leading-5",
            children: e.description
          })]
        }), e.badge]
      })
    })]
  }) : l === "avatar" ? /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "avatar",
    className: t("group relative flex items-start text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", o === "lg" ? "p-4 gap-4" : "p-4 gap-3", s ? t("border-2", c.border) : "border border-border", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
    children: [
      e.avatar && /* @__PURE__ */ (0, r.jsx)("div", {
        className: "shrink-0",
        children: e.avatar
      }),
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex-1 min-w-0 space-y-0",
        children: [/* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex items-center gap-1 flex-wrap",
          children: [/* @__PURE__ */ (0, r.jsx)("span", {
            className: t("font-medium text-secondary-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
            children: e.label
          }), e.subtext && /* @__PURE__ */ (0, r.jsx)("span", {
            className: t("text-muted-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
            children: e.subtext
          })]
        }), e.description && /* @__PURE__ */ (0, r.jsx)("p", {
          className: t("text-muted-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
          children: e.description
        })]
      }),
      /* @__PURE__ */ (0, r.jsx)("div", {
        className: "shrink-0 pt-0.5",
        children: /* @__PURE__ */ (0, r.jsx)(b, {
          type: "checkbox",
          checked: s,
          disabled: n,
          size: o,
          color: d ? "destructive" : a
        })
      })
    ]
  }) : l === "payment" ? /* @__PURE__ */ (0, r.jsxs)("button", {
    ...u,
    "data-slot": "checkbox-group-item",
    "data-variant": "payment",
    className: t("group relative flex items-start text-left cursor-pointer transition-all delight-selection-press", "bg-card rounded-xl border box-border", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", o === "lg" ? "p-4 gap-4" : "p-4 gap-3", s ? t("border-2", c.border) : "border border-border", n && "cursor-not-allowed opacity-50", !n && !s && "hover:border-muted-foreground/30"),
    children: [
      e.paymentIcon && /* @__PURE__ */ (0, r.jsx)("div", {
        className: "shrink-0 w-[46px] h-8 rounded border border-border bg-background flex items-center justify-center overflow-hidden",
        children: e.paymentIcon
      }),
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex-1 min-w-0 space-y-2",
        children: [
          /* @__PURE__ */ (0, r.jsxs)("div", {
            className: "flex items-center gap-1 flex-wrap",
            children: [/* @__PURE__ */ (0, r.jsx)("span", {
              className: t("font-medium text-secondary-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
              children: e.label
            }), e.subtext && /* @__PURE__ */ (0, r.jsx)("span", {
              className: t("text-muted-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
              children: e.subtext
            })]
          }),
          e.description && /* @__PURE__ */ (0, r.jsx)("p", {
            className: t("text-muted-foreground", o === "lg" ? "text-base leading-6" : "text-sm leading-5"),
            children: e.description
          }),
          e.actions && /* @__PURE__ */ (0, r.jsx)("div", {
            className: "flex items-center gap-3",
            children: e.actions
          })
        ]
      }),
      /* @__PURE__ */ (0, r.jsx)("div", {
        className: "shrink-0 pt-0.5",
        children: /* @__PURE__ */ (0, r.jsx)(b, {
          type: "checkbox",
          checked: s,
          disabled: n,
          size: o,
          color: d ? "destructive" : a
        })
      })
    ]
  }) : null;
}
var y = m.forwardRef(({ className: e, items: s, value: i, defaultValue: l, onValueChange: o, variant: a = "default", size: x = "sm", orientation: d = "horizontal", gap: h = "md", color: n = "primary", filled: c = !1, disabled: p = !1, "aria-label": u, "aria-labelledby": j, ...k }, P) => {
  const [N, S] = J({
    value: i,
    defaultValue: l,
    onValueChange: o
  }), T = m.useMemo(() => new Set(N), [N]), O = Z()?.state === "destructive";
  return /* @__PURE__ */ (0, r.jsx)("div", {
    ref: P,
    role: "group",
    "data-slot": "checkbox-group",
    "data-variant": a,
    "aria-label": u,
    "aria-labelledby": j,
    className: t(B({
      orientation: a === "stacked" ? "vertical" : d,
      gap: h
    }), e),
    ...k,
    children: s.map((g) => /* @__PURE__ */ (0, r.jsx)(X, {
      item: g,
      checked: T.has(g.value),
      disabled: p,
      variant: a,
      size: x,
      color: n,
      filled: c,
      hasError: O,
      onToggle: (A) => S(g.value, A)
    }, g.value))
  });
});
y.displayName = "CheckboxGroupControl";
var C = m.forwardRef((e, s) => {
  const [i, l] = I(e);
  if (!D(i)) return /* @__PURE__ */ (0, r.jsx)(y, {
    ref: s,
    ...l
  });
  const { label: o, description: a, error: x, fieldClassName: d } = i;
  return /* @__PURE__ */ (0, r.jsxs)(L, {
    legend: o,
    className: d,
    children: [/* @__PURE__ */ (0, r.jsx)(y, {
      ref: s,
      ...l
    }), (x || a) && /* @__PURE__ */ (0, r.jsxs)(R, { children: [x && /* @__PURE__ */ (0, r.jsx)(q, { children: x }), !x && a && /* @__PURE__ */ (0, r.jsx)(M, { children: a })] })]
  });
});
C.displayName = "CheckboxGroup";
var K = V(), f = {};
function _(e, s) {
  if (e !== null)
    switch (s) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var w = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const i of Array.from(this.childNodes))
      i.nodeType === Node.TEXT_NODE && !i.textContent?.trim() || e.push(i);
    const s = document.createElement("div");
    for (s.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((i) => this._childrenContainer.appendChild(i)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(s), this._root = (0, K.createRoot)(s), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, s, i) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(f).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, s) {
    const i = f[e] || "string";
    this._props[e] = this._parseValue(s, i), this._render();
  }
  _parseValue(e, s) {
    if (s === "boolean" && typeof e == "boolean" || s === "number" && typeof e == "number" || s === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (s) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const s = e.replace(/([A-Z])/g, "-$1").toLowerCase(), i = f[e] || "string";
    return _(this.getAttribute(s), i);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [i, l] of Object.entries(f)) if (i in this._props) e[i] = this._props[i];
    else {
      const o = i.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[i] = _(this.getAttribute(o), l);
    }
    const s = m.createElement(C, {
      ...e,
      _hostElement: this
    });
    this._root.render(s);
  }
};
for (const e of Object.keys(f)) Object.defineProperty(w.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(s) {
    this._setProp(e, s);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-checkbox-group") && customElements.define("hf-checkbox-group", w);
export {
  w as CheckboxGroupWC,
  w as default
};

//# sourceMappingURL=hf-checkbox-group.js.map