import { o as m } from "./rolldown-runtime.js";
import { i as b, n as g, t as _ } from "./vendor/react.js";
import { l as N } from "./useRenderElement.js";
import { t as p } from "./dist.js";
import { t as s } from "./utils.js";
import { t as x } from "./Separator.js";
import { t as y } from "./separator2.js";
import { t as C } from "./useRender.js";
var n = _(), v = p("has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
  variants: {
    orientation: {
      horizontal: "[&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s [&>[data-slot]~[data-slot]]:border-s-black/15 [&>[data-slot]]:rounded-e-none",
      vertical: "flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t [&>[data-slot]~[data-slot]]:border-t-black/15 [&>[data-slot]]:rounded-b-none"
    },
    shape: {
      rounded: "",
      round: ""
    }
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      shape: "rounded",
      className: "[&>[data-slot]:first-child]:rounded-s-lg [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg!"
    },
    {
      orientation: "horizontal",
      shape: "round",
      className: "[&>[data-slot]:first-child]:rounded-s-full [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-full!"
    },
    {
      orientation: "vertical",
      shape: "rounded",
      className: "[&>[data-slot]:first-child]:rounded-t-lg [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!"
    },
    {
      orientation: "vertical",
      shape: "round",
      className: "[&>[data-slot]:first-child]:rounded-t-full [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-full!"
    }
  ],
  defaultVariants: {
    orientation: "horizontal",
    shape: "rounded"
  }
});
function z({ className: t, orientation: o, shape: e, "aria-label": a, ...i }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    role: "group",
    "data-slot": "button-group",
    "data-orientation": o,
    "aria-label": a,
    className: s(v({
      orientation: o,
      shape: e
    }), t),
    ...i
  });
}
function c({ className: t, render: o, ...e }) {
  return C({
    defaultTagName: "div",
    props: N({ className: s("bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", t) }, e),
    render: o,
    state: { slot: "button-group-text" }
  });
}
function w({ className: t, orientation: o = "vertical", ...e }) {
  return /* @__PURE__ */ (0, n.jsx)(y, {
    "data-slot": "button-group-separator",
    orientation: o,
    className: s("bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", t),
    ...e
  });
}
z.displayName = "ButtonGroup";
c.displayName = "ButtonGroupText";
w.displayName = "ButtonGroupSeparator";
var G = p("has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot]]:shadow-none", {
  variants: {
    orientation: {
      horizontal: "[&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s [&>[data-slot]~[data-slot]]:border-s-black/15 [&>[data-slot]]:rounded-e-none [&>[data-slot]:has(~[data-slot])]:border-e-0",
      vertical: "flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t [&>[data-slot]~[data-slot]]:border-t-black/15 [&>[data-slot]]:rounded-b-none [&>[data-slot]:has(~[data-slot])]:border-b-0"
    },
    shape: {
      rounded: "",
      round: ""
    }
  },
  compoundVariants: [
    {
      orientation: "horizontal",
      shape: "rounded",
      className: "[&>[data-slot]:first-child]:rounded-s-lg [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg!"
    },
    {
      orientation: "horizontal",
      shape: "round",
      className: "[&>[data-slot]:first-child]:rounded-s-full [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-full!"
    },
    {
      orientation: "vertical",
      shape: "rounded",
      className: "[&>[data-slot]:first-child]:rounded-t-lg [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!"
    },
    {
      orientation: "vertical",
      shape: "round",
      className: "[&>[data-slot]:first-child]:rounded-t-full [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-full!"
    }
  ],
  defaultVariants: {
    orientation: "horizontal",
    shape: "round"
  }
});
function d({ className: t, orientation: o, shape: e, ...a }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    role: "group",
    "data-slot": "button-group",
    "data-orientation": o,
    className: s(G({
      orientation: o,
      shape: e
    }), t),
    ...a
  });
}
d.displayName = "ButtonGroup";
function h({ className: t, orientation: o = "vertical", ...e }) {
  return /* @__PURE__ */ (0, n.jsx)(x, {
    "data-slot": "button-group-separator",
    orientation: o,
    className: s("bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", t),
    ...e
  });
}
h.displayName = "ButtonGroupSeparator";
var j = Object.assign(d, {
  Root: d,
  Separator: h,
  Text: c
}), l = /* @__PURE__ */ m(b(), 1), E = g(), r = {
  variant: "string",
  size: "string"
};
function u(t, o) {
  if (t !== null)
    switch (o) {
      case "number":
        return Number(t);
      case "boolean":
        return t !== "false" && t !== "0";
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
}
var f = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const t = [];
    for (const e of Array.from(this.childNodes))
      e.nodeType === Node.TEXT_NODE && !e.textContent?.trim() || t.push(e);
    const o = document.createElement("div");
    for (o.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((e) => this._childrenContainer.appendChild(e)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(o), this._root = (0, E.createRoot)(o), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, o, e) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(r).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, o) {
    const e = r[t] || "string";
    this._props[t] = this._parseValue(o, e), this._render();
  }
  _parseValue(t, o) {
    if (o === "boolean" && typeof t == "boolean" || o === "number" && typeof t == "number" || o === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (o) {
      case "boolean":
        return t !== "false" && t !== "0" && t !== "";
      case "number":
        return Number(t);
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
    return t;
  }
  _getProp(t) {
    if (t in this._props) return this._props[t];
    const o = t.replace(/([A-Z])/g, "-$1").toLowerCase(), e = r[t] || "string";
    return u(this.getAttribute(o), e);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const t = {};
    for (const [e, a] of Object.entries(r)) if (e in this._props) t[e] = this._props[e];
    else {
      const i = e.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[e] = u(this.getAttribute(i), a);
    }
    const o = l.createElement(j, {
      ...t,
      _hostElement: this
    }, l.createElement("span", {
      ref: (e) => {
        e && this._childrenContainer && e.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(o);
  }
};
for (const t of Object.keys(r)) Object.defineProperty(f.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(o) {
    this._setProp(t, o);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-button-group") && customElements.define("hf-button-group", f);
export {
  f as ButtonGroupWC,
  f as default
};

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