import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { createContext as C, useState as w, useRef as g, useContext as b, useEffect as k } from "react";
import { Classes as i } from "../../constants/selectors.js";
import { useIsDarkTheme as y } from "../../hooks/use-is-dark-theme.js";
import { CheckIcon as N } from "../../icons/index.js";
import { cn as l } from "../../utils/cn.js";
import { copyToClipboard as _ } from "../../utils/copy-to-clipboard.js";
import { Tooltip as v } from "../tooltip/tooltip.js";
const d = C("compact"), u = ({ children: o, variant: t, className: c }) => /* @__PURE__ */ e(d.Provider, { value: t, children: /* @__PURE__ */ e(
  "div",
  {
    className: l(
      i.Color,
      "group flex py-6",
      t === "table" && "flex-col gap-6",
      t === "compact" && "flex-row flex-wrap gap-x-2 gap-y-4",
      c
    ),
    "data-variant": t,
    children: o
  }
) }), T = ({ children: o, title: t }) => /* @__PURE__ */ s(
  "div",
  {
    className: l(
      i.ColorRow,
      "flex flex-col gap-2 md:flex-row md:items-center"
    ),
    children: [
      !!t && /* @__PURE__ */ e(
        "div",
        {
          className: "w-full shrink-0 md:w-[120px]",
          "data-component-part": "color-row-title-container",
          children: /* @__PURE__ */ e(
            "p",
            {
              className: "m-0 truncate font-medium text-sm text-stone-900 tracking-[-0.1px] dark:text-stone-200",
              "data-component-part": "color-row-title",
              title: t,
              children: t
            }
          )
        }
      ),
      /* @__PURE__ */ e(
        "div",
        {
          className: "flex w-full gap-1 md:gap-2",
          "data-component-part": "color-row-items-container",
          children: o
        }
      )
    ]
  }
), I = ({ name: o, value: t }) => {
  const [c, m] = w("idle"), n = g(null), { isDarkTheme: x } = y(), r = b(d);
  k(() => () => {
    n.current && clearTimeout(n.current);
  }, []);
  const a = typeof t == "string" ? t : t[x ? "dark" : "light"], f = async () => {
    await _(a) !== "error" && (m("copied"), n.current && clearTimeout(n.current), n.current = setTimeout(() => m("idle"), 2e3));
  }, p = /* @__PURE__ */ e(
    "button",
    {
      "aria-label": o || `Color ${a}`,
      "aria-pressed": c === "copied",
      "aria-roledescription": c === "copied" ? "Copied" : "Copy",
      className: l(
        "relative flex cursor-copy items-center justify-center rounded-lg border border-stone-200 dark:border-stone-800",
        r === "compact" && "aspect-square max-h-[104px]",
        r === "table" && "aspect-square w-full md:h-10"
      ),
      "data-component-part": "color-item-button",
      onClick: f,
      style: { backgroundColor: a },
      type: "button",
      children: /* @__PURE__ */ e(
        N,
        {
          "aria-hidden": !0,
          className: l(
            "pointer-events-none absolute inset-0 m-auto opacity-0 transition-opacity duration-100",
            "filter-[drop-shadow(0_0_2px_rgb(0_0_0/0.1))_drop-shadow(0_0_4px_rgb(0_0_0/0.1))] text-white dark:text-white",
            c === "copied" && "opacity-100"
          )
        }
      )
    }
  );
  return /* @__PURE__ */ s(
    "div",
    {
      className: l(
        i.ColorItem,
        r === "compact" && "flex shrink-0 flex-col gap-2",
        r === "table" && "w-full max-w-[50px] md:max-w-[60px]"
      ),
      children: [
        r === "table" ? /* @__PURE__ */ e(v, { title: a, children: p }) : p,
        r === "compact" && /* @__PURE__ */ s("div", { className: "flex w-[104px] min-w-0 flex-col gap-0.5", children: [
          o && /* @__PURE__ */ e(
            "p",
            {
              className: "m-0 truncate text-center font-medium text-sm text-stone-900 dark:text-stone-200",
              "data-component-part": "color-item-name",
              title: o,
              children: o
            }
          ),
          /* @__PURE__ */ e(
            "p",
            {
              className: "m-0 truncate text-center font-mono text-stone-600 text-xs dark:text-stone-400",
              "data-component-part": "color-item-value",
              title: a,
              children: a
            }
          )
        ] })
      ]
    }
  );
};
u.Row = T;
u.Item = I;
export {
  u as Color
};
