"use client";
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { BreakpointSelector as n } from "../shared/breakpoint-selector.js";
import { ToggleGroupControl as w } from "./toggle-group.control.js";
import { Input as a } from "../shared/input.js";
import { Label as c } from "../shared/label.js";
import { useAppSelector as C } from "../../hooks/use-app-selector.js";
import { useSettings as m } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as S } from "../../../../../store/selectors.js";
import { classNames as i } from "../../../../../utils.js";
import { BiBlock as k, BiDotsVerticalRounded as B } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/bi/index.js";
import { CgArrowAlignH as $ } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/cg/index.js";
import { MdVerticalAlignCenter as b } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
const R = ({
  className: g,
  type: t,
  fieldName: u,
  growFieldName: p,
  shrinkFieldName: f,
  label: x = "Size"
}) => {
  const o = C(S), [l] = m(`${u}.${o}`, t), [d, N] = m(
    `${p}.${o}`,
    t
  ), [h, v] = m(
    `${f}.${o}`,
    t
  );
  return /* @__PURE__ */ r("div", { className: i("mt-5 ", g), children: [
    /* @__PURE__ */ e(
      w,
      {
        type: t,
        fieldName: "flexSize",
        label: x,
        responsive: !0,
        controls: [
          {
            tooltipContent: "None",
            toggleTrigger: /* @__PURE__ */ e(k, { className: "text-sm" }),
            value: "none"
          },
          {
            tooltipContent: "Grow",
            toggleTrigger: /* @__PURE__ */ e($, { className: "text-sm" }),
            value: "grow"
          },
          {
            tooltipContent: "Shrink",
            toggleTrigger: /* @__PURE__ */ e(b, { className: "rotate-90 text-sm" }),
            value: "shrink"
          },
          {
            tooltipContent: "Custom",
            toggleTrigger: /* @__PURE__ */ e(B, { className: "text-sm" }),
            value: "custom"
          }
        ]
      }
    ),
    /* @__PURE__ */ e(
      "div",
      {
        className: i(
          "grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200",
          {
            "grid-rows-[1fr]": l === "custom"
          }
        ),
        children: /* @__PURE__ */ r("div", { className: i("min-h-0", { "h-auto": l === "custom" }), children: [
          /* @__PURE__ */ r(c, { className: "mt-3 flex items-center", children: [
            "Flex Grow ",
            /* @__PURE__ */ e(n, { className: "ms-1" }),
            /* @__PURE__ */ e(
              a,
              {
                value: d ?? 0,
                onChange: (s) => {
                  N(Number(s.target.value));
                },
                type: "number",
                className: "ms-auto w-[60px]",
                min: 0
              }
            )
          ] }),
          /* @__PURE__ */ r(c, { className: "mt-1 flex items-center", children: [
            "Flex Shrink ",
            /* @__PURE__ */ e(n, { className: "ms-1" }),
            /* @__PURE__ */ e(
              a,
              {
                value: h ?? 0,
                onChange: (s) => {
                  v(Number(s.target.value));
                },
                type: "number",
                className: "ms-auto w-[60px]",
                min: 0
              }
            )
          ] })
        ] })
      }
    )
  ] });
};
export {
  R as FlexSizeControl
};
//# sourceMappingURL=flex-size.control.js.map
