import { j as e } from "../../../../../../../_virtual/jsx-runtime.js";
import { useState as g, useCallback as G } from "react";
import "../../../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@18.3.0-canary-3d9b20132-20240124_react@18.3.0-canary-3d_c02c1e17bf76c343fd22d1f22394ecf5/node_modules/react-hot-toast/dist/index.js";
import { FieldTitle as R } from "../field-factory.js";
import { tx as u } from "../../../../../../style-system/dist/twind.js";
import { RxCross2 as m } from "../../../../../../../node_modules/.pnpm/react-icons@5.3.0_react@18.3.0-canary-3d9b20132-20240124/node_modules/react-icons/rx/index.js";
import { Root as V, Trigger as P, Content as O } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/popover.js";
import { Root as $, List as z, Trigger as x, Content as h } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Inset as F } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/inset.js";
import { Root as I, Trigger as L, Content as S, Group as E, Label as W, Item as i } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.1.4_@types_react-dom@18.3.6_@types_react@18.3.3__@types_react@18.3.3_46b1dabc193c5ff5696ee783983c694e/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const Y = (p) => {
  const { schema: s, currentValue: r, onChange: n, title: j, description: f } = p, [o, b] = g(
    r?.gradientDirection ?? s["ui:default-gradient-direction"] ?? "bg-gradient-to-tr"
  ), l = s["ui:presets"], v = Object.entries(l).filter(([t]) => t.includes("gradient") === !0).length > 0, [C, N] = g(
    r?.color?.includes("gradient") ? "gradient" : "solid"
  ), T = s["ui:solid-columns"] ?? 10, w = s["ui:gradient-columns"] ?? 8, y = G(
    (t) => {
      b(t), r?.color?.includes("gradient") && n({
        ...r,
        gradientDirection: t
      });
    },
    [r, n]
  );
  return /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between flex-1 gap-2 flex-wrap", children: [
    /* @__PURE__ */ e.jsx(R, { title: j, description: f }),
    /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsxs(V, { children: [
      /* @__PURE__ */ e.jsx(P, { children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx(
        "button",
        {
          type: "button",
          className: u(
            "rounded-full w-6 h-6 ring ring-transparent hover:ring-upstart-400 border border-upstart-300",
            l[r?.color ?? "none"]?.className
          )
        }
      ) }) }),
      /* @__PURE__ */ e.jsx(O, { side: "bottom", align: "center", maxWidth: "372px", children: /* @__PURE__ */ e.jsxs($, { defaultValue: C, onValueChange: (t) => N(t), children: [
        /* @__PURE__ */ e.jsx(F, { clip: "padding-box", side: "top", pb: "current", children: v && /* @__PURE__ */ e.jsxs(z, { size: "1", children: [
          /* @__PURE__ */ e.jsx(x, { value: "solid", className: "!flex-1", children: "Solid" }),
          /* @__PURE__ */ e.jsx(x, { value: "gradient", className: "!flex-1", children: "Gradient" })
        ] }) }),
        /* @__PURE__ */ e.jsx(h, { value: "solid", children: /* @__PURE__ */ e.jsx("div", { className: `grid grid-cols-${T} items-center gap-x-2 gap-y-2`, children: Object.entries(l).filter(([t]) => t.includes("gradient") === !1).map(([t, { className: a, label: D }], d) => /* @__PURE__ */ e.jsx(
          "button",
          {
            onClick: (c) => {
              c.preventDefault(), n({
                ...r,
                color: t
              });
            },
            type: "button",
            className: u(
              a,
              "h-7 w-7 rounded-full outline outline-2 relative inline-flex items-center justify-center shadow-sm shadow-upstart-300",
              r?.color === t ? "outline-upstart-600" : "outline-transparent hover:scale-105"
            ),
            children: t === "none" && /* @__PURE__ */ e.jsx(m, { className: "h-4 w-4 text-red-700 opacity-50" })
          },
          d
        )) }) }),
        /* @__PURE__ */ e.jsxs(h, { value: "gradient", children: [
          /* @__PURE__ */ e.jsxs(I, { defaultValue: o, size: "1", onValueChange: y, children: [
            /* @__PURE__ */ e.jsx(L, { className: "!w-full !mb-3" }),
            /* @__PURE__ */ e.jsx(S, { children: /* @__PURE__ */ e.jsxs(E, { children: [
              /* @__PURE__ */ e.jsx(W, { children: "Gradient direction" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-t", children: "To top" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-b", children: "To bottom" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-l", children: "To left" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-r", children: "To right" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-tl", children: "To top left" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-tr", children: "To top right" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-bl", children: "To bottom left" }),
              /* @__PURE__ */ e.jsx(i, { value: "bg-gradient-to-br", children: "To bottom right" })
            ] }) })
          ] }),
          /* @__PURE__ */ e.jsx("div", { className: `grid grid-cols-${w} items-center gap-x-2 gap-y-2`, children: Object.entries(l).filter(([t]) => t.includes("gradient") === !0).map(([t, { className: a, label: D }], d) => /* @__PURE__ */ e.jsx(
            "button",
            {
              onClick: (c) => {
                c.preventDefault(), n({
                  gradientDirection: o,
                  color: t
                });
              },
              type: "button",
              className: u(
                a,
                o,
                "h-7 w-7 rounded-full outline outline-2 relative inline-flex items-center justify-center shadow-sm shadow-upstart-300",
                r?.color === t ? "outline-upstart-600" : "outline-transparent hover:scale-105"
              ),
              children: t === "none" && /* @__PURE__ */ e.jsx(m, { className: "h-4 w-4 text-red-700 opacity-50" })
            },
            d
          )) })
        ] })
      ] }) })
    ] }) })
  ] });
};
export {
  Y as default
};
//# sourceMappingURL=color-preset.js.map
