import { jsx as e, jsxs as l, Fragment as d } from "react/jsx-runtime";
import { T as a, H as n, C as r, a as t, Z as c, P as m, A as h, c as p } from "../index-sdOMz8GW.js";
import { ScrollText as b } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => {
  const o = Array.from({ length: 20 }, (i, s) => /* @__PURE__ */ e("div", { className: "p-4 border-b", children: /* @__PURE__ */ l(a, { tag: "p", children: [
    "Content item ",
    s + 1
  ] }) }, s));
  return /* @__PURE__ */ l(d, { children: [
    /* @__PURE__ */ e(
      n,
      {
        title: "Scrollbar",
        description: `A customizable scrollbar component with auto-hide functionality and
          custom styling options.`,
        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-teal-600 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
      /* @__PURE__ */ l(r, { className: "p-4", children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Vertical Scrollbar" }),
        /* @__PURE__ */ e(c, { className: "h-48", children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) }) })
      ] }),
      /* @__PURE__ */ l(r, { className: "p-4", children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Auto Hide on Leave" }),
        /* @__PURE__ */ e(c, { className: "h-48", autoHide: "leave", children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) }) })
      ] }),
      /* @__PURE__ */ l(r, { className: "p-4", children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Never Hide" }),
        /* @__PURE__ */ e(c, { className: "h-48", autoHide: "never", children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) }) })
      ] }),
      /* @__PURE__ */ l(r, { className: "p-4", children: [
        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Custom Styled" }),
        /* @__PURE__ */ e(
          c,
          {
            className: "h-48",
            scrollbarStyle: {
              track: { backgroundColor: "transparent" },
              thumb: { borderRadius: "8px", width: "8px" }
            },
            children: /* @__PURE__ */ e("div", { children: o.slice(0, 10) })
          }
        )
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ e(
      m,
      {
        componentName: "Scrollbar",
        defaultValues: { autoHide: "scroll", direction: "vertical" },
        excludeProps: ["scrollbarStyle", "style"],
        children: (i) => /* @__PURE__ */ e(c, { ...i, style: { height: 200 }, children: /* @__PURE__ */ l("div", { style: { height: 600, padding: 16 }, children: [
          /* @__PURE__ */ e("p", { children: "Scroll down to see more content..." }),
          /* @__PURE__ */ e("p", { style: { marginTop: 200 }, children: "Middle content" }),
          /* @__PURE__ */ e("p", { style: { marginTop: 200 }, children: "End of content" })
        ] }) })
      }
    ),
    /* @__PURE__ */ e(h, { componentName: "Scrollbar" }),
    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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 { Scrollbar } from '@e-burgos/tucu-ui';

// Basic usage
<Scrollbar className="h-48">
  <div>
    {/* Your content here */}
  </div>
</Scrollbar>

// Auto hide on leave
<Scrollbar className="h-48" autoHide="leave">
  <div>{content}</div>
</Scrollbar>

// Never hide
<Scrollbar className="h-48" autoHide="never">
  <div>{content}</div>
</Scrollbar>

// Custom styled
<Scrollbar
  className="h-48"
  scrollbarStyle={{
    track: { backgroundColor: 'transparent' },
    thumb: { borderRadius: '8px', width: '8px' },
  }}
>
  <div>{content}</div>
</Scrollbar>`
      }
    ) }) }) })
  ] });
};
export {
  w as default
};
