@dndbuilder.com/react
Version:
Drag and drop builder for React
90 lines (89 loc) • 3.13 kB
JavaScript
"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