"use client";
import { Clickable as e } from "../ui/Clickable.js";
import { i as t, n, r, t as i } from "../chunks/Tooltip.js";
import { useState as a } from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region lib/examples/tooltip-demo.tsx
function c() {
	let [c, l] = a(!1);
	return /* @__PURE__ */ o("div", {
		className: "flex flex-col gap-24 h-300",
		children: /* @__PURE__ */ s(r, { children: [
			"DARK MODE",
			/* @__PURE__ */ s("div", {
				className: "flex gap-48 items-center",
				children: [
					/* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
						className: "underline decoration-dashed cursor-help",
						children: "Hover me"
					}), /* @__PURE__ */ o(n, { children: "This is a helpful tooltip" })] }),
					/* @__PURE__ */ s(i, {
						open: c,
						children: [/* @__PURE__ */ o(t, { render: /* @__PURE__ */ o(e, {
							className: "rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50",
							onClick: () => l(!c),
							children: "Click me"
						}) }), /* @__PURE__ */ o(n, { children: "This tooltip opens on click" })]
					}),
					/* @__PURE__ */ s(i, {
						open: !0,
						children: [/* @__PURE__ */ o(t, {
							className: "underline decoration-dashed cursor-help",
							children: "Always open"
						}), /* @__PURE__ */ o(n, { children: "This tooltip is always open" })]
					})
				]
			}),
			"LIGHT MODE",
			/* @__PURE__ */ s("div", {
				className: "flex gap-48 items-center",
				children: [
					/* @__PURE__ */ s(i, { children: [/* @__PURE__ */ o(t, {
						className: "underline decoration-dashed cursor-help",
						children: "Hover me"
					}), /* @__PURE__ */ o(n, {
						theme: "light",
						children: "This is a helpful tooltip"
					})] }),
					/* @__PURE__ */ s(i, {
						open: c,
						children: [/* @__PURE__ */ o(t, { render: /* @__PURE__ */ o(e, {
							className: "rounded-lg border-2 border-dashed border-gray-300 p-6 text-center hover:border-gray-400 hover:bg-gray-50",
							onClick: () => l(!c),
							children: "Click me"
						}) }), /* @__PURE__ */ o(n, {
							theme: "light",
							children: "This tooltip opens on click"
						})]
					}),
					/* @__PURE__ */ s(i, {
						open: !0,
						children: [/* @__PURE__ */ o(t, {
							className: "underline decoration-dashed cursor-help",
							children: "Always open"
						}), /* @__PURE__ */ o(n, {
							theme: "light",
							children: "This tooltip is always open"
						})]
					})
				]
			}),
			"POSITIONS",
			/* @__PURE__ */ o("div", {
				className: "flex gap-48 items-center",
				children: /* @__PURE__ */ s(i, { children: [
					/* @__PURE__ */ o(t, {
						className: "underline decoration-dashed cursor-help",
						children: "Hover me"
					}),
					/* @__PURE__ */ o(n, {
						side: "top",
						children: "This tooltip is on the top"
					}),
					/* @__PURE__ */ o(n, {
						side: "bottom",
						children: "This tooltip is on the bottom"
					}),
					/* @__PURE__ */ o(n, {
						side: "right",
						children: "This tooltip is on the right"
					}),
					/* @__PURE__ */ o(n, {
						side: "left",
						children: "This tooltip is on the left"
					})
				] })
			})
		] })
	});
}
//#endregion
export { c as default };

//# sourceMappingURL=tooltip-demo.js.map