"use client";
import { jsxs as s, jsx as r } from "react/jsx-runtime";
import { Label as C } from "../shared/label.js";
import { Tooltip as i } from "../shared/tooltip.js";
import { useAppSelector as j } from "../../hooks/use-app-selector.js";
import { useSettings as v } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as T } from "../../../../../store/selectors.js";
import { classNames as g } from "../../../../../utils.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-gray-100  controls-[state=on]:bg-gray-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: d,
    controls: h,
    className: x,
    label: l,
    responsive: n,
    fieldName: e,
    direction: b,
    mode: o,
    defaultValue: a,
    ...w
  }, y) => {
    const c = j(T), [m, p] = v(
      n && o ? `${e}.${c}.${o}` : n ? `${e}.${c}` : o ? `${e}.${o}` : e,
      d
    );
    return /* @__PURE__ */ s(
      "div",
      {
        className: g(
          "mt-4 flex w-full gap-1.5",
          R({ direction: b, className: x })
        ),
        ref: y,
        ...w,
        children: [
          l && /* @__PURE__ */ s(C, { className: "flex items-center gap-1", children: [
            l,
            " ",
            n && /* @__PURE__ */ r(N, {})
          ] }),
          /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
            k,
            {
              loop: !0,
              value: m,
              onValueChange: (t) => {
                p(a && !t ? a : t);
              },
              className: "inline-flex rounded-sm border",
              type: "single",
              children: h.map(({ toggleTrigger: t, tooltipContent: u, value: f }, $) => /* @__PURE__ */ s(i, { children: [
                /* @__PURE__ */ r(i.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
                  B,
                  {
                    className: g(S, "border-r last:border-r-0", {
                      "bg-gray-100": f === m
                    }),
                    value: f,
                    children: t
                  }
                ) }),
                u && /* @__PURE__ */ r(i.Content, { children: u })
              ] }, $))
            }
          ) })
        ]
      }
    );
  }
);
V.displayName = "ToggleGroupControl";
export {
  V as ToggleGroupControl
};
//# sourceMappingURL=toggle-group.control.js.map
