"use client";
import { t as e } from "../chunks/clsx.js";
import { getBgColor as t, getComplementaryTextColor as n, getThemeColor as r } from "./helpers/colors/colors.js";
import { useEffect as i, useRef as a, useState as o } from "react";
import { jsx as s, jsxs as c } from "react/jsx-runtime";
//#region lib/ui/FlipCard.tsx
var l = "flex w-full justify-center overflow-hidden", u = e(l, "relative h-full"), d = e(u, "rounded-16 rounded-b-4"), f = e(u, "rounded-16 rounded-t-4"), p = e(l, "absolute inset-x-0 h-16 w-full"), m = e(p, "rounded-16 rounded-b-4 top-0 origin-bottom [transform:rotateX(0deg)] [backface-visibility:hidden] [transform-style:preserve-3d]"), h = e(p, "rounded-16 rounded-t-4 top-16 origin-top [transform:rotateX(180deg)] [backface-visibility:hidden] [transform-style:preserve-3d]");
function g({ className: a, theme: l = "white", value: u, ...p }) {
	let [g, v] = o(0), [y, b] = o(!1), x = _(g);
	i(() => {
		u !== x && (v(u), b((e) => !e));
	}, [u, x]);
	let S = r(l), C = t(S), w = n(S);
	return /* @__PURE__ */ c("div", {
		...p,
		role: "figure",
		className: e("relative isolate grid h-32 w-22 grid-rows-2 [perspective:40px] [perspective-origin:50%_50%]", a),
		children: [
			/* @__PURE__ */ s("div", {
				className: e(d, C),
				children: /* @__PURE__ */ s("span", {
					className: e("text-b4 translate-y-1/3", w),
					children: g
				})
			}),
			/* @__PURE__ */ s("div", {
				className: e(f, C),
				children: /* @__PURE__ */ s("span", {
					className: e("text-b4 -translate-y-2/3", w),
					children: x
				})
			}),
			/* @__PURE__ */ s("div", {
				className: e(y ? m : h, C, y ? "animate-tick" : "animate-tock"),
				children: /* @__PURE__ */ s("span", {
					className: e("text-b4", y ? "translate-y-1/3" : "-translate-y-2/3", w),
					children: y ? x : g
				})
			}),
			/* @__PURE__ */ s("div", {
				className: e(y ? h : m, C, y ? "animate-tock" : "animate-tick"),
				children: /* @__PURE__ */ s("span", {
					className: e("text-b4", y ? "-translate-y-2/3" : "translate-y-1/3", w),
					children: y ? g : x
				})
			})
		]
	});
}
function _(e) {
	let t = a(0);
	return i(() => {
		t.current = e;
	}, [e]), t.current;
}
//#endregion
export { g as FlipCard };

//# sourceMappingURL=FlipCard.js.map