"use client";
import { jsxs as l, jsx as r } from "react/jsx-runtime";
import { Label as j } from "../shared/label.js";
import { Tooltip as n } from "../shared/tooltip.js";
import { useAppSelector as v } from "../../hooks/use-app-selector.js";
import { useSettings as y } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as T } from "../../../../../store/selectors.js";
import { classNames as d } from "../../utils/index.js";
import { Root as k, Item as B } from "../../../../../node_modules/.pnpm/@radix-ui_react-toggle-group@1.1.2_@types_react-dom@19.0.4_@types_react@19.0.10__@types_react_ekyper3tmrq4kddyrjf5jj7cxq/node_modules/@radix-ui/react-toggle-group/dist/index.js";
import { cva as G } from "../../../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { forwardRef as I } from "react";
import { BreakpointSelector as N } from "../shared/breakpoint-selector.js";
const R = G("", {
  variants: {
    direction: {
      row: "flex-row justify-between items-center",
      col: "flex-col"
    }
  },
  defaultVariants: {
    direction: "row"
  }
}), S = "hover:bg-slate-100  controls-[state=on]:bg-slate-100 flex h-[28px] w-[35px] items-center justify-center bg-white text-base leading-4 first:rounded-l last:rounded-r focus:z-10 focus:outline-hidden", V = I(
  ({
    type: g,
    controls: h,
    className: x,
    label: i,
    responsive: s,
    fieldName: e,
    direction: b,
    mode: t,
    defaultValue: a,
    ...w
  }, $) => {
    const c = v(T), [m, p] = y(
      s && t ? `${e}.${c}.${t}` : s ? `${e}.${c}` : t ? `${e}.${t}` : e,
      g
    );
    return /* @__PURE__ */ l(
      "div",
      {
        className: d(
          "mt-4 flex w-full gap-1.5",
          R({ direction: b, className: x })
        ),
        ref: $,
        ...w,
        children: [
          i && /* @__PURE__ */ l(j, { className: "flex items-center gap-1", children: [
            i,
            " ",
            s && /* @__PURE__ */ r(N, {})
          ] }),
          /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
            k,
            {
              loop: !0,
              value: m,
              onValueChange: (o) => {
                p(a && !o ? a : o);
              },
              className: "inline-flex rounded-sm border",
              type: "single",
              children: h.map(({ toggleTrigger: o, tooltipContent: u, value: f }, C) => /* @__PURE__ */ l(n, { children: [
                /* @__PURE__ */ r(n.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
                  B,
                  {
                    className: d(S, "border-r last:border-r-0", {
                      "bg-slate-100": f === m
                    }),
                    value: f,
                    children: o
                  }
                ) }),
                u && /* @__PURE__ */ r(n.Content, { children: u })
              ] }, C))
            }
          ) })
        ]
      }
    );
  }
);
V.displayName = "ToggleGroupControl";
export {
  V as ToggleGroupControl
};
//# sourceMappingURL=toggle-group.control.js.map
