import { j as jsxRuntimeExports } from "../../../../../../../_virtual/jsx-runtime.js";
import { useState, useCallback } 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@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { FieldTitle } from "../field-factory.js";
import { tx as D } from "../../../../../../style-system/dist/twind.js";
import { RxCross2 } from "../../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/rx/index.js";
import { Root as P, Trigger as s, Content as i } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/popover.js";
import { Root as m, List as b, Trigger as P$1, Content as f } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tabs.js";
import { Inset as e } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/inset.js";
import { Root as C, Trigger as u, Content as g, Group as y, Label as h, Item as v } from "../../../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/select.js";
const ColorPresetField = (props) => {
  const { schema, currentValue, onChange, title, description } = props;
  const [gradientDir, setGradientDir] = useState(
    currentValue?.gradientDirection ?? schema["ui:default-gradient-direction"] ?? "bg-gradient-to-tr"
  );
  const presets = schema["ui:presets"];
  const hasGradientPresets = Object.entries(presets).filter(([key]) => key.includes("gradient") === true).length > 0;
  const [tab, setTab] = useState(
    currentValue?.color?.includes("gradient") ? "gradient" : "solid"
  );
  const solidCols = schema["ui:solid-columns"] ?? 10;
  const gradientCols = schema["ui:gradient-columns"] ?? 8;
  const onGradientChange = useCallback(
    (value) => {
      setGradientDir(value);
      if (currentValue?.color?.includes("gradient")) {
        onChange({
          ...currentValue,
          gradientDirection: value
        });
      }
    },
    [currentValue, onChange]
  );
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between flex-1 gap-2 flex-wrap", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(FieldTitle, { withIcon: true, title, description }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(P, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        "button",
        {
          type: "button",
          className: D(
            "rounded-full w-6 h-6 ring ring-transparent hover:ring-upstart-400 border border-upstart-300",
            presets[currentValue?.color ?? "none"]?.className
          )
        }
      ) }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(i, { side: "bottom", align: "center", maxWidth: "372px", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { defaultValue: tab, onValueChange: (value) => setTab(value), children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(e, { clip: "padding-box", side: "top", pb: "current", children: hasGradientPresets && /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { size: "1", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { value: "solid", className: "!flex-1", children: "Solid" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(P$1, { value: "gradient", className: "!flex-1", children: "Gradient" })
        ] }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "solid", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `grid grid-cols-${solidCols} items-center gap-x-2 gap-y-2`, children: Object.entries(presets).filter(([key]) => key.includes("gradient") === false).map(([key, { className, label }], index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            onClick: (e2) => {
              e2.preventDefault();
              if (key === "none") {
                onChange(null);
              } else {
                onChange({
                  ...currentValue,
                  color: key
                });
              }
            },
            type: "button",
            className: D(
              className,
              "h-7 w-7 rounded-full outline outline-2 relative inline-flex items-center justify-center shadow-sm shadow-upstart-300",
              currentValue?.color === key || !currentValue?.color && key === "none" ? "outline-upstart-600" : "outline-transparent hover:scale-105"
            ),
            children: key === "none" && /* @__PURE__ */ jsxRuntimeExports.jsx(RxCross2, { className: "h-4 w-4 text-red-700 opacity-50" })
          },
          index
        )) }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs(f, { value: "gradient", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsxs(C, { defaultValue: gradientDir, size: "1", onValueChange: onGradientChange, children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(u, { className: "!w-full !mb-3" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(g, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(y, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(h, { children: "Gradient direction" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-t", children: "To top" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-b", children: "To bottom" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-l", children: "To left" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-r", children: "To right" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-tl", children: "To top left" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-tr", children: "To top right" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-bl", children: "To bottom left" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bg-gradient-to-br", children: "To bottom right" })
            ] }) })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `grid grid-cols-${gradientCols} items-center gap-x-2 gap-y-2`, children: Object.entries(presets).filter(([key]) => key.includes("gradient") === true).map(([key, { className, label }], index) => {
            return /* @__PURE__ */ jsxRuntimeExports.jsx(
              "button",
              {
                onClick: (e2) => {
                  e2.preventDefault();
                  if (key === "none") {
                    onChange(null);
                  } else {
                    onChange({
                      gradientDirection: gradientDir,
                      color: key
                    });
                  }
                },
                type: "button",
                className: D(
                  className,
                  gradientDir,
                  "h-7 w-7 rounded-full outline outline-2 relative inline-flex items-center justify-center shadow-sm shadow-upstart-300",
                  currentValue?.color === key || !currentValue?.color && key === "none" ? "outline-upstart-600" : "outline-transparent hover:scale-105"
                ),
                children: key === "none" && /* @__PURE__ */ jsxRuntimeExports.jsx(RxCross2, { className: "h-4 w-4 text-red-700 opacity-50" })
              },
              index
            );
          }) })
        ] })
      ] }) })
    ] }) })
  ] });
};
export {
  ColorPresetField as default
};
//# sourceMappingURL=color-preset.js.map
