import { o as H } from "./rolldown-runtime.js";
import { i as Z, n as F, t as J } from "./vendor/react.js";
import { t as W } from "./useRenderElement.js";
import { n as B } from "./useIsoLayoutEffect.js";
import { t as K } from "./dist.js";
import { t as b } from "./utils.js";
import { t as X } from "./useControlled.js";
import { n as Q, t as z } from "./Toggle.js";
import { t as U } from "./CompositeRoot.js";
import { t as Y } from "./ToolbarRootContext.js";
import { t as G } from "./label.js";
import { t as O } from "./use-controllable-state.js";
var D = /* @__PURE__ */ (function(e) {
  return e.disabled = "data-disabled", e.orientation = "data-orientation", e.multiple = "data-multiple", e;
})({}), d = /* @__PURE__ */ H(Z()), n = J(), k = { multiple(e) {
  return e ? { [D.multiple]: "" } : null;
} }, ee = /* @__PURE__ */ d.forwardRef(function(t, r) {
  const { defaultValue: o, disabled: i = !1, loopFocus: a = !0, onValueChange: p, orientation: s = "horizontal", multiple: u = !1, value: l, className: g, render: v, style: _, ...f } = t, C = Y(!0), L = d.useMemo(() => {
    if (l === void 0) return o ?? [];
  }, [l, o]), N = d.useMemo(() => l !== void 0 || o !== void 0, [l, o]), x = (C?.disabled ?? !1) || i, [h, I] = X({
    controlled: l,
    default: L,
    name: "ToggleGroup",
    state: "value"
  }), j = B((y, V, P) => {
    let c;
    if (u ? (c = h.slice(), V ? c.push(y) : c.splice(h.indexOf(y), 1)) : c = V ? [y] : [], Array.isArray(c)) {
      if (p?.(c, P), P.isCanceled) return;
      I(c);
    }
  }), w = {
    disabled: x,
    multiple: u,
    orientation: s
  }, R = d.useMemo(() => ({
    disabled: x,
    orientation: s,
    setGroupValue: j,
    value: h,
    isValueInitialized: N
  }), [
    x,
    s,
    j,
    h,
    N
  ]), E = { role: "group" }, q = W("div", t, {
    enabled: !!C,
    state: w,
    ref: r,
    props: [E, f],
    stateAttributesMapping: k
  });
  return /* @__PURE__ */ (0, n.jsx)(Q.Provider, {
    value: R,
    children: C ? q : /* @__PURE__ */ (0, n.jsx)(U, {
      render: v,
      className: g,
      style: _,
      state: w,
      refs: [r],
      props: [E, f],
      stateAttributesMapping: k,
      loopFocus: a,
      enableHomeAndEndKeys: !0,
      orientation: s
    })
  });
}), T = K("hover:text-foreground aria-pressed:bg-accent focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,background-color,box-shadow,transform] duration-200 [transition-timing-function:cubic-bezier(0.25,1,0.5,1)] active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] focus-visible:transition-shadow focus-visible:duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
  variants: {
    variant: {
      default: "bg-transparent",
      outline: "border-input hover:bg-muted border bg-transparent shadow-xs"
    },
    size: {
      default: "h-9 min-w-9 px-2",
      sm: "h-8 min-w-8 px-1.5",
      lg: "h-10 min-w-10 px-2.5"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "default"
  }
});
function M({ label: e, className: t, variant: r = "default", size: o = "default", pressed: i, defaultPressed: a = !1, onPressedChange: p, ...s }) {
  const u = d.useId(), [l, g] = O({
    value: i,
    defaultValue: a,
    onChange: p
  });
  return e ? /* @__PURE__ */ (0, n.jsxs)("div", {
    className: "flex items-center gap-2",
    "data-disabled": s.disabled || void 0,
    children: [/* @__PURE__ */ (0, n.jsx)(z, {
      id: u,
      "data-slot": "toggle",
      className: b(T({
        variant: r,
        size: o,
        className: t
      })),
      pressed: l,
      onPressedChange: g,
      ...s
    }), /* @__PURE__ */ (0, n.jsx)(G, {
      htmlFor: u,
      className: "cursor-pointer",
      children: e
    })]
  }) : /* @__PURE__ */ (0, n.jsx)(z, {
    "data-slot": "toggle",
    className: b(T({
      variant: r,
      size: o,
      className: t
    })),
    pressed: l,
    onPressedChange: g,
    ...s
  });
}
M.displayName = "Toggle";
var S = d.createContext({
  size: "default",
  variant: "default",
  spacing: 0,
  orientation: "horizontal"
});
function te({ label: e, className: t, children: r, variant: o, size: i, spacing: a = 0, orientation: p = "horizontal", value: s, defaultValue: u, onValueChange: l, ...g }) {
  const [v, _] = O({
    value: s,
    defaultValue: u ?? [],
    onChange: l
  }), f = /* @__PURE__ */ (0, n.jsx)(ee, {
    "data-slot": "toggle-group",
    "data-variant": o,
    "data-size": i,
    "data-spacing": a,
    "data-orientation": p,
    "aria-orientation": void 0,
    style: { "--gap": a },
    className: b("rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", t),
    value: v,
    onValueChange: _,
    ...g,
    children: /* @__PURE__ */ (0, n.jsx)(S.Provider, {
      value: {
        variant: o,
        size: i,
        spacing: a,
        orientation: p
      },
      children: r
    })
  });
  return e ? /* @__PURE__ */ (0, n.jsxs)("div", {
    className: "space-y-2",
    children: [/* @__PURE__ */ (0, n.jsx)(G, { children: e }), f]
  }) : f;
}
te.displayName = "ToggleGroup";
function re({ className: e, children: t, variant: r = "default", size: o = "default", ...i }) {
  const a = d.useContext(S);
  return /* @__PURE__ */ (0, n.jsx)(z, {
    "data-slot": "toggle-group-item",
    "data-variant": a.variant || r,
    "data-size": a.size || o,
    "data-spacing": a.spacing,
    className: b("data-[state=on]:bg-accent group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", T({
      variant: a.variant || r,
      size: a.size || o
    }), e),
    ...i,
    children: t
  });
}
re.displayName = "ToggleGroupItem";
var oe = F();
function ae(e) {
  return { onPressedChange: (t) => {
    e.dispatchEvent(new CustomEvent("pressed-change", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function ne(e) {
  const { _hostElement: t, ...r } = e, o = d.useMemo(() => t ? ae(t) : {}, [t]);
  return d.createElement(M, {
    ...r,
    ...o
  });
}
var m = {
  variant: "string",
  size: "string",
  label: "string",
  pressed: "boolean",
  defaultPressed: "boolean",
  "aria-label": "string"
};
function A(e, t) {
  if (e !== null)
    switch (t) {
      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 $ = 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 r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, oe.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(m).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = m[e] || "string";
    this._props[e] = this._parseValue(t, r), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      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 t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = m[e] || "string";
    return A(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [r, o] of Object.entries(m)) if (r in this._props) e[r] = this._props[r];
    else {
      const i = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = A(this.getAttribute(i), o);
    }
    const t = d.createElement(ne, {
      ...e,
      _hostElement: this
    });
    this._root.render(t);
  }
};
for (const e of Object.keys(m)) Object.defineProperty($.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-toggle") && customElements.define("hf-toggle", $);
export {
  $ as ToggleWC,
  $ as default
};

//# sourceMappingURL=hf-toggle.js.map