import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
import { H as h, C as n, a as o, T as t, au as l, P as d, A as c, c as p } from "../index-sdOMz8GW.js";
import { Eye as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => {
  const i = /* @__PURE__ */ a("div", { className: "space-y-2", children: [
    /* @__PURE__ */ e(t, { tag: "p", children: "This is a long piece of content that will be collapsed by default." }),
    /* @__PURE__ */ e(t, { tag: "p", children: 'When the content exceeds the default height, a "Show More" button will appear.' }),
    /* @__PURE__ */ e(t, { tag: "p", children: "Clicking the button will expand the content to show everything." }),
    /* @__PURE__ */ e(t, { tag: "p", children: 'You can then click "Show Less" to collapse it back to the default height.' }),
    /* @__PURE__ */ e(t, { tag: "p", children: "This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view." })
  ] });
  return /* @__PURE__ */ a(r, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "RevealContent",
        description: 'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.',
        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Height 100px" }),
        /* @__PURE__ */ e(l, { defaultHeight: 100, children: i })
      ] }),
      /* @__PURE__ */ a(n, { className: "p-4", children: [
        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Height 150px" }),
        /* @__PURE__ */ e(l, { defaultHeight: 150, children: i })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      d,
      {
        componentName: "RevealContent",
        defaultValues: { defaultHeight: 100 },
        excludeProps: [],
        children: (s) => /* @__PURE__ */ e(l, { ...s, children: /* @__PURE__ */ a("div", { className: "space-y-2", children: [
          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This is the first paragraph of content that is initially visible." }),
          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This second paragraph may be hidden depending on the defaultHeight value." }),
          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "This third paragraph is likely hidden and revealed when expanded." }),
          /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "And here is even more content to demonstrate the reveal functionality." })
        ] }) })
      }
    ),
    /* @__PURE__ */ e(c, { componentName: "RevealContent" }),
    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
      p,
      {
        language: "tsx",
        code: `import { RevealContent, Typography } from '@e-burgos/tucu-ui';

// Basic usage
<RevealContent defaultHeight={100}>
  <div>
    <Typography tag="p">Long content here...</Typography>
    <Typography tag="p">More content...</Typography>
  </div>
</RevealContent>

// With custom height
<RevealContent defaultHeight={150}>
  <div>
    {/* Your long content */}
  </div>
</RevealContent>

// The component automatically:
// - Shows "Show More" if content exceeds defaultHeight
// - Shows "Show Less" when expanded
// - Hides button if content is shorter than defaultHeight`
      }
    ) }) }) })
  ] });
};
export {
  x as default
};
