import { jsxs as t, Fragment as s, jsx as o } from "react/jsx-runtime";
import { H as c, C as l, a as r, T as e, P as i, av as n, A as d, c as h } from "../index-sdOMz8GW.js";
import { ArrowUp as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => /* @__PURE__ */ t(s, { children: [
  /* @__PURE__ */ o(
    c,
    {
      title: "ScrollToTop",
      description: `A utility component that displays a floating button to scroll back to
          the top of the page. It automatically scrolls to top when the route
          changes and shows a button when the user scrolls down.`,
      icon: /* @__PURE__ */ o("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-500 to-sky-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ o(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__ */ o(l, { className: "overflow-hidden", children: /* @__PURE__ */ o(r, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
    /* @__PURE__ */ t(l, { className: "p-4", children: [
      /* @__PURE__ */ o(e, { tag: "h5", className: "mb-3", children: "Default Usage" }),
      /* @__PURE__ */ o(e, { tag: "p", className: "mb-4", children: "Add this component to your router or app component. By default, it displays a button in the bottom-right corner (24px from edges) that appears when you scroll down more than 400px." }),
      /* @__PURE__ */ o(
        e,
        {
          tag: "p",
          className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
          children: "The button automatically scrolls to the top when clicked and also scrolls to top whenever the route changes."
        }
      ),
      /* @__PURE__ */ o("div", { className: "bg-gray-100 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ o(e, { tag: "p", className: "text-sm", children: "Scroll down on this page to see the button appear in the bottom-right corner." }) })
    ] }),
    /* @__PURE__ */ t(l, { className: "p-4", children: [
      /* @__PURE__ */ o(e, { tag: "h5", className: "mb-3", children: "Custom Position" }),
      /* @__PURE__ */ o(e, { tag: "p", className: "mb-4", children: "You can customize the button position using the position props." }),
      /* @__PURE__ */ t("div", { className: "space-y-2 text-sm", children: [
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "top-left:" }),
          " ",
          /* @__PURE__ */ o("code", { children: "<ScrollToTop top={20} left={20} />" })
        ] }),
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "top-right:" }),
          " ",
          /* @__PURE__ */ o("code", { children: "<ScrollToTop top={20} right={20} />" })
        ] }),
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "bottom-left:" }),
          " ",
          /* @__PURE__ */ o("code", { children: "<ScrollToTop bottom={20} left={20} />" })
        ] }),
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "bottom-right:" }),
          " ",
          /* @__PURE__ */ o("code", { children: "<ScrollToTop bottom={20} right={20} />" })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ t(l, { className: "p-4", children: [
      /* @__PURE__ */ o(e, { tag: "h5", className: "mb-3", children: "Custom Size and Threshold" }),
      /* @__PURE__ */ o(e, { tag: "p", className: "mb-4", children: "Control when the button appears and its size." }),
      /* @__PURE__ */ t("div", { className: "space-y-2 text-sm", children: [
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "Small button:" }),
          " ",
          /* @__PURE__ */ o("code", { children: '<ScrollToTop size="small" />' })
        ] }),
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "Large button:" }),
          " ",
          /* @__PURE__ */ o("code", { children: '<ScrollToTop size="large" />' })
        ] }),
        /* @__PURE__ */ t(e, { tag: "p", children: [
          /* @__PURE__ */ o("code", { className: "text-brand", children: "Show after 200px:" }),
          " ",
          /* @__PURE__ */ o("code", { children: "<ScrollToTop showAfter={200} />" })
        ] })
      ] })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ o(
    i,
    {
      componentName: "ScrollToTop",
      defaultValues: {
        size: "large",
        showAfter: 400,
        bottom: "45%",
        right: 50,
        behavior: "smooth"
      },
      excludeProps: ["scrollContainer"],
      children: (a) => /* @__PURE__ */ o(n, { ...a })
    }
  ),
  /* @__PURE__ */ o(d, { componentName: "ScrollToTop" }),
  /* @__PURE__ */ o(l, { className: "overflow-hidden", children: /* @__PURE__ */ o(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o(
    h,
    {
      language: "tsx",
      code: `import { ScrollToTop } from '@e-burgos/tucu-ui';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* Default: bottom-right, 24px from edges */}
      <ScrollToTop />
      
      {/* Custom position: top-left */}
      <ScrollToTop top={20} left={20} />
      
      {/* Custom size and threshold */}
      <ScrollToTop size="large" showAfter={200} />
      
      {/* Custom position with all props */}
      <ScrollToTop
        bottom={32}
        right={32}
        size="small"
        showAfter={300}
        className="custom-class"
      />
      
      {/* Your routes */}
    </BrowserRouter>
  );
}

// The component:
// - Displays a floating button when user scrolls down
// - Automatically scrolls to top when route changes
// - Uses smooth scrolling behavior
// - Works with React Router
// - Button appears after scrolling showAfter pixels (default: 400px)
// - Position is fixed, customizable via props`
    }
  ) }) }) })
] });
export {
  w as default
};
