"use client";
import { jsxs as i, jsx as r } from "react/jsx-runtime";
import { Label as h } from "../shared/label.js";
import { Select as t } from "../shared/select.js";
import { useAppSelector as w } from "../../hooks/use-app-selector.js";
import { useSettings as g } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as B } from "../../../../../store/selectors.js";
import { SettingsType as I } from "../../types/index.js";
import { createId as j, classNames as k } from "../../../../../utils.js";
import { cva as b } from "../../../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { BreakpointSelector as y } from "../shared/breakpoint-selector.js";
const L = b("flex", {
  variants: {
    direction: {
      row: "flex-row justify-between items-center",
      col: "flex-col"
    }
  },
  defaultVariants: {
    direction: "row"
  }
}), D = ({
  options: u,
  fieldName: o,
  type: d = I.BLOCK,
  label: a,
  className: x,
  responsive: s = !1,
  mode: c,
  direction: v,
  onValueChange: n,
  defaultValue: S
}) => {
  const f = w(B), [m, $] = g(
    s && c ? `${o}.${f}.${c}` : s ? `${o}.${f}` : c ? `${o}.${c}` : o,
    d
  ), p = j();
  return /* @__PURE__ */ i("div", { className: k("mt-4 w-full gap-1.5", L({ direction: v, className: x })), children: [
    a && /* @__PURE__ */ i(h, { htmlFor: p, className: "flex flex-1 items-center gap-1", children: [
      a,
      " ",
      s && /* @__PURE__ */ r(y, {})
    ] }),
    /* @__PURE__ */ i(
      t,
      {
        onValueChange: (e) => {
          const l = e === "select" ? "" : e;
          $(l), n == null || n(l);
        },
        value: m ?? (S || "select"),
        children: [
          /* @__PURE__ */ r(t.Trigger, { id: p, className: "flex-1 bg-white", children: /* @__PURE__ */ r(t.Value, {}) }),
          /* @__PURE__ */ i(t.Content, { children: [
            /* @__PURE__ */ r(t.Item, { value: "select", children: "Select" }, "clear"),
            u.map((e, l) => /* @__PURE__ */ r(t.Item, { value: e.value, children: e.content }, l))
          ] })
        ]
      }
    )
  ] });
};
export {
  D as SelectControl
};
//# sourceMappingURL=select.control.js.map
