import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { useState } from "react";
import i from "chroma-js";
import { baseColors as $ } from "../../../../sdk/dist/shared/themes/color-system.js";
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 { a as e$1 } from "../../../../sdk/dist/shared/chunk-RDZK73KV.js";
import { tx as D } from "../../../../style-system/dist/twind.js";
import { a as l } from "../../../../style-system/dist/chunk-7QUZ3RFU.js";
import { useTheme } from "../../../../../use-page-data.js";
import { generateRelatedNeutral } from "../utils/colors.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 { Button as o } 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/button.js";
import { Root as n, Text as u } 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/callout.js";
import { Root as C, Trigger as u$1, 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";
import { Root as m, List as b, Trigger as P, 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 { Text as p } 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/text.js";
const gradientMixs = [
  ["100", "200"],
  ["100", "300"],
  ["200", "400"],
  ["300", "500"],
  ["400", "600"],
  ["500", "700"],
  ["600", "800"],
  ["700", "900"]
];
const baseColorPalette = {
  // Gray - Pure neutrals from Tailwind
  gray: {
    "50": "hsl(0, 0%, 98%)",
    // Even lighter
    "100": "hsl(0, 0%, 95%)",
    // Even lighter
    "200": "hsl(0, 0%, 90%)",
    // Even lighter
    "800": "hsl(0, 0%, 25%)",
    // Darker
    "900": "hsl(0, 0%, 15%)",
    // Darker
    "950": "hsl(0, 0%, 8%)"
    // Much darker
  },
  // Amber - Tailwind amber color scale
  amber: {
    "50": "hsl(48, 100%, 98%)",
    // Even lighter
    "100": "hsl(48, 96%, 95%)",
    // Even lighter
    "200": "hsl(48, 97%, 90%)",
    // Even lighter
    "800": "hsl(32, 95%, 25%)",
    // Darker
    "900": "hsl(28, 93%, 15%)",
    // Darker
    "950": "hsl(24, 94%, 8%)"
    // Much darker
  },
  // Yellow - Tailwind yellow color scale
  yellow: {
    "50": "hsl(55, 92%, 98%)",
    // Even lighter
    "100": "hsl(55, 97%, 95%)",
    // Even lighter
    "200": "hsl(53, 98%, 90%)",
    // Even lighter
    "800": "hsl(32, 81%, 25%)",
    // Darker
    "900": "hsl(28, 73%, 15%)",
    // Darker
    "950": "hsl(26, 77%, 8%)"
    // Much darker
  },
  // Lime - Tailwind lime color scale
  lime: {
    "50": "hsl(78, 92%, 98%)",
    // Even lighter
    "100": "hsl(80, 89%, 95%)",
    // Even lighter
    "200": "hsl(81, 88%, 90%)",
    // Even lighter
    "800": "hsl(84, 81%, 25%)",
    // Darker
    "900": "hsl(88, 61%, 15%)",
    // Darker
    "950": "hsl(89, 80%, 8%)"
    // Much darker
  },
  // Green - Tailwind green color scale
  green: {
    "50": "hsl(138, 76%, 98%)",
    // Even lighter
    "100": "hsl(141, 84%, 95%)",
    // Even lighter
    "200": "hsl(141, 79%, 90%)",
    // Even lighter
    "800": "hsl(158, 64%, 25%)",
    // Darker
    "900": "hsl(158, 68%, 15%)",
    // Darker
    "950": "hsl(164, 86%, 8%)"
    // Much darker
  },
  // Emerald - Tailwind emerald color scale
  emerald: {
    "50": "hsl(152, 81%, 98%)",
    // Even lighter
    "100": "hsl(149, 80%, 95%)",
    // Even lighter
    "200": "hsl(152, 76%, 90%)",
    // Even lighter
    "800": "hsl(158, 84%, 25%)",
    // Darker
    "900": "hsl(158, 84%, 15%)",
    // Darker
    "950": "hsl(164, 96%, 8%)"
    // Much darker
  },
  // Teal - Tailwind teal color scale
  teal: {
    "50": "hsl(166, 76%, 98%)",
    // Even lighter
    "100": "hsl(167, 85%, 95%)",
    // Even lighter
    "200": "hsl(168, 84%, 90%)",
    // Even lighter
    "800": "hsl(183, 81%, 25%)",
    // Darker
    "900": "hsl(184, 91%, 15%)",
    // Darker
    "950": "hsl(186, 100%, 8%)"
    // Much darker
  },
  // Cyan - Tailwind cyan color scale
  cyan: {
    "50": "hsl(183, 100%, 98%)",
    // Even lighter
    "100": "hsl(185, 96%, 95%)",
    // Even lighter
    "200": "hsl(186, 94%, 90%)",
    // Even lighter
    "800": "hsl(200, 84%, 25%)",
    // Darker
    "900": "hsl(202, 83%, 15%)",
    // Darker
    "950": "hsl(205, 100%, 8%)"
    // Much darker
  },
  // Sky - Tailwind sky color scale
  sky: {
    "50": "hsl(204, 100%, 98%)",
    // Even lighter
    "100": "hsl(204, 94%, 95%)",
    // Even lighter
    "200": "hsl(201, 94%, 90%)",
    // Even lighter
    "800": "hsl(213, 92%, 25%)",
    // Darker
    "900": "hsl(218, 79%, 15%)",
    // Darker
    "950": "hsl(223, 88%, 8%)"
    // Much darker
  },
  // Blue - Tailwind blue color scale
  blue: {
    "50": "hsl(214, 100%, 98%)",
    // Even lighter
    "100": "hsl(214, 95%, 95%)",
    // Even lighter
    "200": "hsl(213, 97%, 90%)",
    // Even lighter
    "800": "hsl(213, 94%, 25%)",
    // Darker
    "900": "hsl(215, 92%, 15%)",
    // Darker
    "950": "hsl(221, 100%, 8%)"
    // Much darker
  },
  // Indigo - Tailwind indigo color scale
  indigo: {
    "50": "hsl(228, 100%, 98%)",
    // Even lighter
    "100": "hsl(228, 100%, 95%)",
    // Even lighter
    "200": "hsl(228, 100%, 90%)",
    // Even lighter
    "800": "hsl(228, 100%, 25%)",
    // Darker
    "900": "hsl(228, 100%, 15%)",
    // Darker
    "950": "hsl(228, 100%, 8%)"
    // Much darker
  },
  // Violet - Tailwind violet color scale
  violet: {
    "50": "hsl(250, 100%, 98%)",
    // Even lighter
    "100": "hsl(251, 91%, 95%)",
    // Even lighter
    "200": "hsl(251, 95%, 90%)",
    // Even lighter
    "800": "hsl(258, 90%, 25%)",
    // Darker
    "900": "hsl(259, 94%, 15%)",
    // Darker
    "950": "hsl(261, 100%, 8%)"
    // Much darker
  },
  // Purple - Tailwind purple color scale
  purple: {
    "50": "hsl(270, 100%, 98%)",
    // Even lighter
    "100": "hsl(269, 100%, 95%)",
    // Even lighter
    "200": "hsl(269, 100%, 90%)",
    // Even lighter
    "800": "hsl(273, 85%, 25%)",
    // Darker
    "900": "hsl(275, 100%, 15%)",
    // Darker
    "950": "hsl(279, 100%, 8%)"
    // Much darker
  },
  // Fuchsia - Tailwind fuchsia color scale
  fuchsia: {
    "50": "hsl(289, 100%, 98%)",
    // Even lighter
    "100": "hsl(287, 100%, 95%)",
    // Even lighter
    "200": "hsl(288, 96%, 90%)",
    // Even lighter
    "800": "hsl(295, 100%, 25%)",
    // Darker
    "900": "hsl(297, 100%, 15%)",
    // Darker
    "950": "hsl(303, 100%, 8%)"
    // Much darker
  },
  // Pink - Tailwind pink color scale
  pink: {
    "50": "hsl(327, 73%, 98%)",
    // Even lighter
    "100": "hsl(326, 78%, 95%)",
    // Even lighter
    "200": "hsl(326, 85%, 90%)",
    // Even lighter
    "800": "hsl(335, 78%, 25%)",
    // Darker
    "900": "hsl(336, 84%, 15%)",
    // Darker
    "950": "hsl(340, 87%, 8%)"
    // Much darker
  },
  // Rose - Tailwind rose color scale
  rose: {
    "50": "hsl(356, 100%, 98%)",
    // Even lighter
    "100": "hsl(356, 100%, 95%)",
    // Even lighter
    "200": "hsl(356, 100%, 90%)",
    // Even lighter
    "800": "hsl(356, 100%, 25%)",
    // Darker
    "900": "hsl(356, 100%, 15%)",
    // Darker
    "950": "hsl(356, 100%, 8%)"
    // Much darker
  },
  // Orange - Tailwind orange color scale
  orange: {
    "50": "hsl(33, 100%, 98%)",
    // Even lighter
    "100": "hsl(34, 100%, 95%)",
    // Even lighter
    "200": "hsl(32, 98%, 90%)",
    // Even lighter
    "800": "hsl(15, 79%, 25%)",
    // Darker
    "900": "hsl(9, 87%, 15%)",
    // Darker
    "950": "hsl(15, 86%, 8%)"
    // Much darker
  },
  // Red - Tailwind red color scale
  red: {
    "50": "hsl(0, 86%, 98%)",
    // Even lighter
    "100": "hsl(0, 93%, 95%)",
    // Even lighter
    "200": "hsl(0, 96%, 90%)",
    // Even lighter
    "800": "hsl(0, 84%, 25%)",
    // Darker
    "900": "hsl(0, 63%, 15%)",
    // Darker
    "950": "hsl(0, 75%, 8%)"
    // Much darker
  }
};
const BaseColorPicker = ({
  colorType,
  initialValue = 120,
  onChange = () => {
  }
}) => {
  const [selectedColor, setSelectedColor] = useState(initialValue);
  const theme = useTheme();
  const handleColorSelect = (color) => {
    setSelectedColor(color);
    onChange(color);
  };
  const isBaseColor = colorType === "base100";
  const isNeutralColor = colorType === "neutral";
  const palette = isBaseColor ? baseColorPalette : isNeutralColor ? generateNeutralOptions(theme) : l;
  const cols = isBaseColor ? 3 : 7;
  if (isBaseColor) {
    const darkShades = Object.entries(palette).flatMap(
      ([colorName, shades]) => Object.entries(shades).filter((shade) => {
        const shadeInt = parseInt(shade[0], 10);
        return shadeInt >= 900;
      }).map(([shadeName, color]) => {
        return [colorName, shadeName, i(color).css("oklch")];
      })
    ).toSorted((a, b2) => {
      const shadeA = parseInt(a[1], 10);
      const shadeB = parseInt(b2[1], 10);
      return shadeA - shadeB;
    });
    const lightShades = Object.entries(palette).flatMap(
      ([colorName, shades]) => Object.entries(shades).filter((shade) => {
        const shadeInt = parseInt(shade[0], 10);
        return shadeInt <= 100;
      }).map(([shadeName, color]) => {
        return [colorName, shadeName, i(color).css("oklch")];
      })
    ).toSorted((a, b2) => {
      const shadeA = parseInt(a[1], 10);
      const shadeB = parseInt(b2[1], 10);
      return shadeA - shadeB;
    });
    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(p, { as: "p", size: "2", className: "!capitalize !font-medium select-none", children: $[colorType] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(n, { className: "mt-3 -mx-4 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u, { size: "1", className: D("text-pretty"), children: "Base color are very light or very dark colors that are used as backgrounds or for large areas. So don't worry if those colors look too light or too dark, they are meant to!" }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { defaultValue: theme.browserColorScheme, children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(e, { clip: "padding-box", side: "x", pb: "current", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { size: "1", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "light", className: "!flex-1", children: "Light" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "dark", className: "!flex-1", children: "Dark" })
        ] }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "light", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-wrap gap-3`, children: [
          lightShades.map(([colorName, shadeName, color]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              title: `${colorName} ${shadeName}`,
              id: `${colorName}-${shadeName}`,
              className: D(
                "outline outline-gray-200 outline-offset-1  transition-transform hover:scale-110 focus:outline-upstart-300",
                "w-6 h-6 rounded-full",
                selectedColor === color && "outline-upstart-300"
              ),
              style: {
                background: color,
                filter: "saturate(180%)"
              },
              onClick: () => handleColorSelect(color),
              "aria-label": `Select color ${color}`
            },
            `${colorName}-${shadeName}`
          )),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            o,
            {
              size: "1",
              variant: "outline",
              className: "!mt-1 self-stretch !basis-full block",
              onClick: () => handleColorSelect("#ffffff"),
              children: "Full white"
            }
          )
        ] }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "dark", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-wrap gap-3`, children: [
          darkShades.map(([colorName, shadeName, color]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              className: D(
                "outline outline-gray-200 outline-offset-1 transition-transform hover:scale-110 focus:outline-upstart-300",
                "w-6 h-6 rounded-full",
                selectedColor === color && "outline-upstart-300"
              ),
              title: `Dark ${colorName} ${shadeName}`,
              style: {
                background: color,
                filter: "saturate(180%)"
              },
              onClick: () => handleColorSelect(color)
            },
            `${colorName}-${shadeName}`
          )),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            o,
            {
              size: "1",
              variant: "outline",
              className: "!mt-1 self-stretch !basis-full block",
              onClick: () => handleColorSelect("#000000"),
              children: "Full black"
            }
          )
        ] }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 p-2 bg-gray-100 rounded mt-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "div",
          {
            className: "w-8 h-8 flex-nowrap shrink-0 aspect-square rounded-md shadow-sm",
            style: { background: selectedColor }
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs text-gray-600", children: selectedColor })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "form",
        {
          className: "group mt-2",
          onSubmit: (e2) => {
            e2.preventDefault();
            const color = new FormData(e2.currentTarget).get("customColor");
            e$1(color, "Color is required");
            handleColorSelect(color);
          }
        }
      )
    ] });
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(p, { as: "p", size: "2", color: "gray", className: "!capitalize !font-medium", children: $[colorType] }),
    colorType.endsWith("Content") && /* @__PURE__ */ jsxRuntimeExports.jsx(n, { className: "mt-3 -mx-4 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u, { size: "1", className: D("text-pretty"), children: "Text content colors are auto-generated when you select the associated background color. We recommend using the generated one, but you can also select a different one if you want." }) }),
    colorType === "neutral" && /* @__PURE__ */ jsxRuntimeExports.jsx(n, { className: "mt-3 -mx-4 !py-2 !px-3 !rounded-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(u, { size: "1", className: D("text-pretty"), children: "Neutral color is a subdued color derived from the primary color. It is used for backgrounds and elements that need to be less prominent." }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "div",
      {
        className: D(
          `grid grid-cols-${cols} gap-3 mt-3 pt-1 pb-1 pl-1 w-full pr-5 max-h-[45dvh] overflow-y-scroll scrollbar-thin scrollbar-color-violet`
        ),
        style: {
          scrollbarGutter: "stable"
        },
        children: Object.entries(palette).map(
          ([colorName, shades], i2) => Object.entries(shades).filter((shade) => {
            const shadeInt = parseInt(shade[0], 10);
            return isNeutralColor || shadeInt >= 200 && shadeInt <= 800;
          }).map(([shadeName, color]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              id: `${colorName}-${shadeName}`,
              className: D(
                "outline outline-gray-200 outline-offset-1 transition-transform hover:scale-110 focus:outline-upstart-300",
                //isBaseColor ? "w-5 h-5 aspect-square rounded-full" :
                "w-6 h-6 rounded-full",
                selectedColor === color && "outline-upstart-300"
              ),
              style: {
                background: color
              },
              onClick: () => handleColorSelect(color),
              "aria-label": `Select color ${color}`
            },
            `${colorName}-${shadeName}`
          ))
        )
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 p-2 bg-gray-100 rounded mt-3", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "div",
        {
          className: "w-8 h-8 flex-nowrap shrink-0 aspect-square rounded-md shadow-sm",
          style: { background: selectedColor }
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "text-xs", children: selectedColor })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "form",
      {
        className: "group mt-2",
        onSubmit: (e2) => {
          e2.preventDefault();
          const color = new FormData(e2.currentTarget).get("customColor");
          e$1(color, "Color is required");
          handleColorSelect(color);
        }
      }
    )
  ] });
};
function ColorPillList({
  type,
  colors,
  onChange,
  cols,
  children,
  currentColor,
  elementColorType
}) {
  const [gradientDir, setGradientDir] = useState(getInitialGradientDir());
  const [gradient, setGradient] = useState(getInitialGradient());
  function getInitialGradientDir() {
    const match = currentColor?.match(/to-(\w+)/);
    if (match) {
      return match[1];
    }
    return "b";
  }
  function getInitialGradient() {
    if (currentColor?.includes("bg-gradient")) {
      const from = currentColor.match(/from-(\w+)/)?.[1];
      const to = currentColor.match(/to-(\w+)/)?.[1];
      return from && to ? { from, to } : null;
    }
    return null;
  }
  if (type === "solid") {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `grid grid-cols-${cols} gap-2.5 mx-auto`, children: colors.map((color) => /* @__PURE__ */ jsxRuntimeExports.jsx(
        "button",
        {
          type: "button",
          className: D(
            "mx-auto h-7 w-7 rounded-full shadow-sm shadow-upstart-300 transition-transform",
            `bg-${color} hover:outline-gray-300 hover:scale-110`
          ),
          onClick: () => {
            if (elementColorType.includes("background")) {
              onChange(`bg-${color}`);
            } else if (elementColorType.includes("text")) {
              onChange(`text-${color}`);
            } else if (elementColorType.includes("border")) {
              onChange(`border-${color}`);
            }
          }
        },
        color
      )) }),
      children
    ] });
  } else if (type === "gradient") {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(
        C,
        {
          defaultValue: gradientDir,
          size: "1",
          onValueChange: (g2) => {
            setGradientDir(g2);
            if (gradient) {
              onChange(`bg-gradient-to-${g2} from-${gradient.from} to-${gradient.to}`);
            }
          },
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx(u$1, { className: "!w-full" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx(g, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(y, { children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(h, { children: "Gradient direction" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "t", children: "To top" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "b", children: "To bottom" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "l", children: "To left" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "r", children: "To right" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "tl", children: "To top left" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "tr", children: "To top right" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "bl", children: "To bottom left" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(v, { value: "br", children: "To bottom right" })
            ] }) })
          ]
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `grid grid-cols-${gradientMixs.length} gap-3 mt-3.5`, children: [
        colors.flatMap(
          (color) => gradientMixs.map((mix) => ({ from: `${color.from}-${mix[0]}`, to: `${color.to}-${mix[1]}` })).map((color2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              className: D(
                "mx-auto h-7 w-7 rounded-full shadow-sm shadow-upstart-300 transition-transform",
                `bg-gradient-to-${gradientDir} from-${color2.from} to-${color2.to} hover:scale-110`
              ),
              onClick: () => {
                onChange(`bg-gradient-to-${gradientDir} from-${color2.from} to-${color2.to}`);
                setGradient(color2);
              }
            },
            `${color2.from}-${color2.to}`
          ))
        ),
        children
      ] })
    ] });
  }
}
function makeGradientCombinations(colors) {
  const gradients = [];
  for (let i2 = 0; i2 < colors.length; i2++) {
    for (let j = i2; j < colors.length; j++) {
      if (colors[i2] === "neutral" && colors[j] !== "neutral" || colors[i2] !== "neutral" && colors[j] === "neutral" || colors[i2] !== colors[j]) {
        continue;
      }
      gradients.push({ from: colors[i2], to: colors[j] });
    }
  }
  return gradients;
}
function getAvailableColorsAndShadesForElement(elementType) {
  if (elementType === "page-background") {
    return {
      colors: ["primary", "secondary", "neutral"],
      shades: ["100", "300", "500", "700", "900"],
      colorButtons: [
        { label: "White", value: "#FFFFFF" },
        { label: "Black", value: "#000000" }
      ]
    };
  }
  if (elementType === "background") {
    return {
      colors: ["primary", "secondary", "accent", "neutral"],
      shades: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
      colorButtons: [
        { label: "Reset", value: null },
        { label: "White", value: "#FFFFFF" },
        { label: "Black", value: "#000000" },
        { label: "Transparent", value: "transparent" }
      ]
    };
  }
  if (elementType === "border") {
    return {
      colors: ["primary", "secondary", "accent", "neutral"],
      shades: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
      colorButtons: [
        // { label: "Auto", value: "border-auto" },
        { label: "White", value: "#FFFFFF" },
        { label: "Black", value: "#000000" },
        { label: "Transparent", value: "transparent" }
      ]
    };
  }
  if (elementType === "text") {
    return {
      colors: ["primary", "secondary", "accent", "neutral"],
      shades: ["100", "300", "500", "700", "900"],
      colorButtons: [
        { label: "Reset", value: null },
        { label: "White", value: "#FFFFFF" },
        { label: "Black", value: "#000000" }
      ]
    };
  }
  return {
    colors: ["primary", "secondary", "accent", "neutral"],
    shades: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
  };
}
function makeCominations(colors, shades) {
  return colors.flatMap((color) => shades.map((shade) => `${color}-${shade}`));
}
const ElementColorPicker = ({
  initialValue,
  elementColorType,
  onChange = () => {
  }
}) => {
  const defaultColorType = initialValue?.includes("gradient") ? "gradient" : "solid";
  const { colors, shades, colorButtons } = getAvailableColorsAndShadesForElement(elementColorType);
  if (elementColorType === "page-background") {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { defaultValue: defaultColorType, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(e, { clip: "padding-box", side: "top", pb: "current", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { size: "1", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "solid", className: "!flex-1", children: "Solid" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "gradient", className: "!flex-1", children: "Gradient" })
      ] }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "solid", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        ColorPillList,
        {
          type: "solid",
          elementColorType,
          currentColor: initialValue,
          cols: shades.length,
          colors: makeCominations(colors, shades),
          onChange,
          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonsBar, { colorButtons, onChange, shadesLen: shades.length })
        }
      ) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "gradient", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        ColorPillList,
        {
          elementColorType,
          currentColor: initialValue,
          type: "gradient",
          cols: 4,
          colors: makeGradientCombinations(colors),
          onChange
        }
      ) })
    ] });
  }
  if (elementColorType === "border") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
      ColorPillList,
      {
        type: "solid",
        elementColorType,
        currentColor: initialValue,
        cols: shades.length,
        colors: makeCominations(colors, shades),
        onChange,
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonsBar, { colorButtons, onChange, shadesLen: shades.length })
      }
    ) });
  }
  if (elementColorType === "text") {
    return /* @__PURE__ */ jsxRuntimeExports.jsx(
      ColorPillList,
      {
        type: "solid",
        elementColorType,
        currentColor: initialValue,
        cols: shades.length,
        colors: makeCominations(colors, shades),
        onChange,
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonsBar, { colorButtons, onChange, shadesLen: shades.length })
      }
    );
  }
  if (elementColorType === "background") {
    return /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { defaultValue: defaultColorType, children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(e, { clip: "padding-box", side: "top", pb: "current", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(b, { size: "1", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "solid", className: "!flex-1", children: "Solid" }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(P, { value: "gradient", className: "!flex-1", children: "Gradient" })
      ] }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "solid", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        ColorPillList,
        {
          type: "solid",
          elementColorType,
          currentColor: initialValue,
          cols: shades.length,
          colors: makeCominations(colors, shades),
          onChange,
          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonsBar, { colorButtons, onChange, shadesLen: shades.length })
        }
      ) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(f, { value: "gradient", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
        ColorPillList,
        {
          elementColorType,
          currentColor: initialValue,
          type: "gradient",
          cols: 4,
          colors: makeGradientCombinations(colors),
          onChange
        }
      ) })
    ] });
  }
  return null;
};
function ButtonsBar({
  colorButtons,
  onChange,
  shadesLen
}) {
  if (!colorButtons) return null;
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D(`flex gap-1.5 mt-1 w-full`, `col-span-${shadesLen}`), children: colorButtons.map((button) => /* @__PURE__ */ jsxRuntimeExports.jsx(
    "button",
    {
      type: "button",
      onClick: () => onChange(button.value),
      className: "grow h-6 text-xs rounded-lg outline outline-gray-200 hover:outline-gray-300",
      children: button.label
    },
    button.value
  )) });
}
function generateNeutralOptions(theme) {
  return {
    primary: {
      default: generateRelatedNeutral(theme.colors.primary, "same-hue")
    },
    primary_temperature: {
      default: generateRelatedNeutral(theme.colors.primary, "temperature")
    },
    primary_analogous: {
      default: generateRelatedNeutral(theme.colors.primary, "analogous")
    },
    primary_complementary: {
      default: generateRelatedNeutral(theme.colors.primary, "complementary")
    },
    pureGray: {
      default: "oklch(45% 0 0)"
    },
    coolGray: {
      default: "oklch(45% 0.02 240)"
    },
    warmGray: {
      default: "oklch(45% 0.03 40)"
    }
  };
}
export {
  ElementColorPicker,
  BaseColorPicker as default
};
//# sourceMappingURL=ColorPicker.js.map
