"use client";
import { ElasticHeight as e } from "../ui/ElasticHeight.js";
import { useState as t } from "react";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
//#region lib/examples/elastic-height-demo.tsx
function i() {
	let [i, a] = t(!1);
	return /* @__PURE__ */ r("div", {
		className: "w-full max-w-md space-y-4",
		children: [/* @__PURE__ */ n("button", {
			onClick: () => a(!i),
			className: "rounded-md bg-ultramarine px-4 py-2 text-white hover:bg-blue-700",
			children: i ? "Collapse" : "Expand"
		}), /* @__PURE__ */ n(e, {
			isExpanded: i,
			className: "border rounded-md",
			min: 24,
			children: /* @__PURE__ */ r("div", {
				className: "p-4 space-y-2",
				children: [
					/* @__PURE__ */ n("p", {
						className: "font-semibold",
						children: "Expandable Content"
					}),
					/* @__PURE__ */ n("p", { children: "This content smoothly animates when the container expands or collapses. The ElasticHeight component automatically adjusts to the height of its children." }),
					/* @__PURE__ */ n("p", { children: "Perfect for accordions, collapsible sections, and any UI element that needs smooth height transitions." })
				]
			})
		})]
	});
}
//#endregion
export { i as default };

//# sourceMappingURL=elastic-height-demo.js.map