@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/LiveDemonstrationsSection-B5iutGu_.js

@@ -0,0 +1,539 @@
+import { jsxs as a, Fragment as K, jsx as e } from "react/jsx-runtime";
+import { useState as d, useRef as X, useEffect as Y } from "react";
+import { aB as Z, aC as q, aD as J, al as _, aE as Q, aF as V, aG as ee, aH as ae, aI as se, aJ as te, aK as re, aL as le, aM as de, H as ie, T as s, C as i, K as l, c, x as r } from "../index-lfg6LZ1p.js";
+import { Play as oe, Monitor as ce, Ruler as ne, MousePointer as me, ChevronDown as he, Copy as ge, Settings as ue, LayoutGrid as pe, Zap as be, ChevronLeft as xe, ChevronRight as Ne, Lock as fe, X as ye } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const Te = () => {
+  const [n, C] = d("Hello, World!"), [m, h] = d(!1), [b, x] = d(!1), [S, N] = d(""), [M, f] = d("Checking..."), T = Z(), { isMobile: E } = q(), [y, I] = J(), { addToast: g } = _(), { isGridCompact: u, setIsGridCompact: L } = Q(), { x: R, y: z } = V(), w = ee(), v = X(null), [B, { width: G, height: D }] = ae(), [W, k] = se(), {
+    sliderEl: H,
+    sliderPrevBtn: $,
+    sliderNextBtn: A,
+    scrollToTheRight: O,
+    scrollToTheLeft: P
+  } = te("/");
+  re(m), le(v, () => {
+    x(!1);
+  }), de("keydown", (t) => {
+    N(t.key), setTimeout(() => N(""), 1e3);
+  }), Y(() => {
+    f(w ? "Component is mounted" : "Component is not mounted");
+  }, [w]);
+  const j = () => {
+    I(n), g({
+      id: `copy-${Date.now()}`,
+      title: "Copied!",
+      message: `Copied "${n}" to clipboard`,
+      variant: "success"
+    });
+  }, U = () => {
+    const t = !u;
+    L(t), g({
+      id: `layout-${Date.now()}`,
+      title: "Layout Changed",
+      message: `Switched to ${t ? "Compact" : "Normal"} layout`,
+      variant: "info"
+    });
+  }, o = (t = "success") => {
+    g({
+      id: `toast-${Date.now()}`,
+      title: "Test Toast",
+      message: `This is a ${t} toast notification`,
+      variant: t,
+      timeout: 3e3
+    });
+  }, F = Array.from({ length: 10 }, (t, p) => ({
+    id: p + 1,
+    title: `Item ${p + 1}`,
+    content: `Content for item ${p + 1}`
+  }));
+  return /* @__PURE__ */ a(K, { children: [
+    /* @__PURE__ */ e(
+      ie,
+      {
+        title: "Live Hook Demonstrations",
+        description: "Interactive examples showing every hook in action. Resize the window, click buttons, and interact with the demos to see real-time hook behavior.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(oe, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Responsive Detection" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Real-time breakpoint detection and mobile state tracking"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(ce, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: "useBreakpoint & useIsMobile" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useBreakpoint" }),
+            /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Current:" }),
+                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: T })
+              ] }),
+              /* @__PURE__ */ e(s, { tag: "p", className: "text-xs text-gray-500", children: "Resize your window to see changes" })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useIsMobile" }),
+            /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Is Mobile:" }),
+                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: E ? "Yes" : "No" })
+              ] }),
+              /* @__PURE__ */ e(s, { tag: "p", className: "text-xs text-gray-500", children: "True for xs, sm, md breakpoints (≤768px)" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+          c,
+          {
+            language: "tsx",
+            noExpand: !0,
+            code: `const breakpoint = useBreakpoint();
+// Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+
+const { isMobile } = useIsMobile();
+// Returns: { isMobile: boolean } — true for xs/sm/md`
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Element Measurement" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Track element dimensions and bounds in real-time"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(ne, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: "useElementSize & useMeasure" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useElementSize" }),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                ref: B,
+                className: "bg-blue-100 dark:bg-blue-800 p-4 rounded-lg border-2 border-dashed border-blue-300 dark:border-blue-600 resize overflow-auto min-h-25",
+                children: [
+                  /* @__PURE__ */ e(s, { tag: "p", className: "text-sm", children: "Resize this element (drag corner)" }),
+                  /* @__PURE__ */ a(
+                    s,
+                    {
+                      tag: "p",
+                      className: "text-xs text-gray-600 dark:text-gray-400 mt-2",
+                      children: [
+                        "Size: ",
+                        Math.round(G),
+                        " ×",
+                        " ",
+                        Math.round(D),
+                        "px"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useMeasure" }),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                ref: W,
+                className: "bg-cyan-100 dark:bg-cyan-800 p-4 rounded-lg border-2 border-dashed border-cyan-300 dark:border-cyan-600 min-h-25",
+                children: [
+                  /* @__PURE__ */ e(s, { tag: "p", className: "text-sm", children: "Measured element" }),
+                  /* @__PURE__ */ a(
+                    s,
+                    {
+                      tag: "p",
+                      className: "text-xs text-gray-600 dark:text-gray-400 mt-2",
+                      children: [
+                        "Bounds: ",
+                        Math.round(k.width),
+                        " ×",
+                        " ",
+                        Math.round(k.height),
+                        "px"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+          c,
+          {
+            language: "tsx",
+            noExpand: !0,
+            code: `// useElementSize — returns [callbackRef, { width, height }]
+const [ref, { width, height }] = useElementSize<HTMLDivElement>();
+
+// useMeasure — returns [callbackRef, bounds]
+const [ref, bounds] = useMeasure<HTMLDivElement>();
+// bounds: { x, y, width, height, top, right, bottom, left }`
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "User Interaction" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Click detection, clipboard, and event handling demos"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-purple-500 to-violet-500 shadow-lg", children: /* @__PURE__ */ e(me, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: "useClickAway & useCopyToClipboard" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useClickAway" }),
+            /* @__PURE__ */ a("div", { className: "relative", ref: v, children: [
+              /* @__PURE__ */ a(
+                r,
+                {
+                  onClick: () => x(!b),
+                  variant: "ghost",
+                  className: "w-full",
+                  children: [
+                    /* @__PURE__ */ e(he, { className: "w-4 h-4 mr-2" }),
+                    "Click to open dropdown"
+                  ]
+                }
+              ),
+              b && /* @__PURE__ */ e("div", { className: "absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border rounded-lg shadow-lg p-4 z-10", children: /* @__PURE__ */ e(s, { tag: "p", className: "text-sm", children: "Click outside to close this dropdown" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useCopyToClipboard" }),
+            /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  type: "text",
+                  value: n,
+                  onChange: (t) => C(t.target.value),
+                  className: "w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-600",
+                  placeholder: "Enter text to copy"
+                }
+              ),
+              /* @__PURE__ */ a(r, { onClick: j, className: "w-full", children: [
+                /* @__PURE__ */ e(ge, { className: "w-4 h-4 mr-2" }),
+                "Copy to Clipboard"
+              ] }),
+              y.value && /* @__PURE__ */ a(
+                s,
+                {
+                  tag: "p",
+                  className: "text-sm text-green-600 dark:text-green-400",
+                  children: [
+                    "✓ Copied: ",
+                    y.value
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+          c,
+          {
+            language: "tsx",
+            noExpand: !0,
+            code: `// useCopyToClipboard — returns [state, copyFn]
+const [state, copyToClipboard] = useCopyToClipboard();
+// state: { value?: string; error?: Error; noUserInteraction: boolean }
+copyToClipboard('text');
+
+// useClickAway — detects clicks outside ref
+const ref = useRef(null);
+useClickAway(ref, () => setIsOpen(false));`
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "UI State Management" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Global state hooks for layout and notifications"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(ue, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: "useGridSwitcher & useToastStore" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useGridSwitcher" }),
+            /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Current layout:" }),
+                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: u ? "Compact" : "Normal" })
+              ] }),
+              /* @__PURE__ */ a(
+                r,
+                {
+                  onClick: U,
+                  variant: "ghost",
+                  className: "w-full",
+                  children: [
+                    /* @__PURE__ */ e(pe, { className: "w-4 h-4 mr-2" }),
+                    "Switch to ",
+                    u ? "Normal" : "Compact"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useToastStore" }),
+            /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-2", children: [
+              /* @__PURE__ */ e(
+                r,
+                {
+                  color: "success",
+                  fullWidth: !0,
+                  onClick: () => o("success"),
+                  children: "Success"
+                }
+              ),
+              /* @__PURE__ */ e(
+                r,
+                {
+                  color: "danger",
+                  fullWidth: !0,
+                  onClick: () => o("destructive"),
+                  children: "Error"
+                }
+              ),
+              /* @__PURE__ */ e(
+                r,
+                {
+                  color: "warning",
+                  fullWidth: !0,
+                  onClick: () => o("warning"),
+                  children: "Warning"
+                }
+              ),
+              /* @__PURE__ */ e(
+                r,
+                {
+                  color: "info",
+                  fullWidth: !0,
+                  onClick: () => o("info"),
+                  children: "Info"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+          c,
+          {
+            language: "tsx",
+            noExpand: !0,
+            code: `// useToastStore — Zustand store for notifications
+const { addToast, dismissToast, toasts } = useToastStore();
+addToast({
+  id: 'unique-id',
+  title: 'Title',
+  message: 'Message text',
+  variant: 'success', // 'default' | 'destructive' | 'success' | 'warning' | 'info'
+  timeout: 3000,
+});
+
+// useGridSwitcher — Zustand store for grid layout
+const { isGridCompact, setIsGridCompact } = useGridSwitcher();`
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Advanced Utilities" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Scroll control, event listeners, and lifecycle hooks"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg", children: /* @__PURE__ */ e(be, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: "useScrollableSlider, useEventListener & more" })
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useScrollableSlider" }),
+          /* @__PURE__ */ a("div", { className: "relative", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                ref: $,
+                onClick: P,
+                className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md opacity-0 invisible transition-opacity",
+                children: /* @__PURE__ */ e(xe, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                ref: H,
+                className: "flex gap-4 overflow-x-auto scrollbar-hide py-4",
+                children: F.map((t) => /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: "shrink-0 w-48 p-4 bg-white dark:bg-gray-800 border rounded-lg",
+                    children: [
+                      /* @__PURE__ */ e(s, { tag: "h6", className: "font-medium mb-2", children: t.title }),
+                      /* @__PURE__ */ e(
+                        s,
+                        {
+                          tag: "p",
+                          className: "text-sm text-gray-600 dark:text-gray-400",
+                          children: t.content
+                        }
+                      )
+                    ]
+                  },
+                  t.id
+                ))
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                ref: A,
+                onClick: O,
+                className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md transition-opacity",
+                children: /* @__PURE__ */ e(Ne, { className: "w-4 h-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useEventListener" }),
+            /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
+              /* @__PURE__ */ e(s, { tag: "p", className: "text-sm mb-2", children: "Press any key:" }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Last key:" }),
+                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: S || "None" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useWindowScroll" }),
+            /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
+              /* @__PURE__ */ e(s, { tag: "p", className: "text-sm mb-2", children: "Scroll position:" }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ a(l, { className: "text-dark dark:text-white", children: [
+                  "X: ",
+                  Math.round(R),
+                  "px"
+                ] }),
+                /* @__PURE__ */ a(l, { className: "text-dark dark:text-white", children: [
+                  "Y: ",
+                  Math.round(z),
+                  "px"
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useIsMounted" }),
+            /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-4 rounded-lg border", children: [
+              /* @__PURE__ */ e(s, { tag: "p", className: "text-sm mb-2", children: "Mount status:" }),
+              /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: M })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(s, { tag: "h5", className: "font-medium mb-3", children: "useLockBodyScroll" }),
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ a(r, { onClick: () => h(!0), variant: "ghost", children: [
+              /* @__PURE__ */ e(fe, { className: "w-4 h-4 mr-2" }),
+              "Open Modal (Locks Scroll)"
+            ] }),
+            /* @__PURE__ */ a(
+              s,
+              {
+                tag: "p",
+                className: "text-sm text-gray-600 dark:text-gray-400",
+                children: [
+                  "Body scroll is ",
+                  m ? "locked" : "unlocked"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    m && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ a("div", { className: "bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h3", className: "font-semibold", children: "Modal with Locked Scroll" }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => h(!1),
+            className: "text-gray-500 hover:text-gray-700",
+            children: /* @__PURE__ */ e(ye, { className: "w-5 h-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-4",
+          children: "While this modal is open, body scrolling is locked using useLockBodyScroll. The scrollbar width is preserved to prevent layout shift."
+        }
+      ),
+      /* @__PURE__ */ e(r, { onClick: () => h(!1), className: "w-full", children: "Close Modal" })
+    ] }) })
+  ] });
+};
+export {
+  Te as default
+};

package/documentation/LiveDemonstrationsSection-CSSKZrex.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const O=()=>{const[o,N]=r.useState("Hello, World!"),[d,i]=r.useState(!1),[m,x]=r.useState(!1),[f,g]=r.useState(""),[w,p]=r.useState("Checking..."),k=s.useBreakpoint(),{isMobile:v}=s.useIsMobile(),[u,T]=s.useCopyToClipboard(),{addToast:n}=s.useToastStore(),{isGridCompact:c,setIsGridCompact:C}=s.useGridSwitcher(),{x:S,y:M}=s.useWindowScroll(),y=s.useIsMounted(),j=r.useRef(null),[B,{width:E,height:R}]=s.useElementSize(),[I,b]=s.useMeasure(),{sliderEl:L,sliderPrevBtn:z,sliderNextBtn:G,scrollToTheRight:D,scrollToTheLeft:W}=s.useScrollableSlider("/");s.useLockBodyScroll(d),s.useClickAway(j,()=>{x(!1)}),s.useEventListener("keydown",a=>{g(a.key),setTimeout(()=>g(""),1e3)}),r.useEffect(()=>{p(y?"Component is mounted":"Component is not mounted")},[y]);const $=()=>{T(o),n({id:`copy-${Date.now()}`,title:"Copied!",message:`Copied "${o}" to clipboard`,variant:"success"})},q=()=>{const a=!c;C(a),n({id:`layout-${Date.now()}`,title:"Layout Changed",message:`Switched to ${a?"Compact":"Normal"} layout`,variant:"info"})},l=(a="success")=>{n({id:`toast-${Date.now()}`,title:"Test Toast",message:`This is a ${a} toast notification`,variant:a,timeout:3e3})},A=Array.from({length:10},(a,h)=>({id:h+1,title:`Item ${h+1}`,content:`Content for item ${h+1}`}));return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Live Hook Demonstrations",description:"Interactive examples showing every hook in action. Resize the window, click buttons, and interact with the demos to see real-time hook behavior.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Play,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Responsive Detection"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Real-time breakpoint detection and mobile state tracking"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(t.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useBreakpoint & useIsMobile"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useBreakpoint"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Current:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:k})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"Resize your window to see changes"})]})]}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMobile"}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Is Mobile:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:v?"Yes":"No"})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"True for xs, sm, md breakpoints (≤768px)"})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`const breakpoint = useBreakpoint();
+// Returns: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+
+const { isMobile } = useIsMobile();
+// Returns: { isMobile: boolean } — true for xs/sm/md`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Element Measurement"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Track element dimensions and bounds in real-time"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(t.Ruler,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useElementSize & useMeasure"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useElementSize"}),e.jsxs("div",{ref:B,className:"bg-blue-100 dark:bg-blue-800 p-4 rounded-lg border-2 border-dashed border-blue-300 dark:border-blue-600 resize overflow-auto min-h-25",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Resize this element (drag corner)"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mt-2",children:["Size: ",Math.round(E)," ×"," ",Math.round(R),"px"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useMeasure"}),e.jsxs("div",{ref:I,className:"bg-cyan-100 dark:bg-cyan-800 p-4 rounded-lg border-2 border-dashed border-cyan-300 dark:border-cyan-600 min-h-25",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Measured element"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mt-2",children:["Bounds: ",Math.round(b.width)," ×"," ",Math.round(b.height),"px"]})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// useElementSize — returns [callbackRef, { width, height }]
+const [ref, { width, height }] = useElementSize<HTMLDivElement>();
+
+// useMeasure — returns [callbackRef, bounds]
+const [ref, bounds] = useMeasure<HTMLDivElement>();
+// bounds: { x, y, width, height, top, right, bottom, left }`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"User Interaction"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Click detection, clipboard, and event handling demos"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 to-violet-500 shadow-lg",children:e.jsx(t.MousePointer,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useClickAway & useCopyToClipboard"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useClickAway"}),e.jsxs("div",{className:"relative",ref:j,children:[e.jsxs(s.Button,{onClick:()=>x(!m),variant:"ghost",className:"w-full",children:[e.jsx(t.ChevronDown,{className:"w-4 h-4 mr-2"}),"Click to open dropdown"]}),m&&e.jsx("div",{className:"absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border rounded-lg shadow-lg p-4 z-10",children:e.jsx(s.Typography,{tag:"p",className:"text-sm",children:"Click outside to close this dropdown"})})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useCopyToClipboard"}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("input",{type:"text",value:o,onChange:a=>N(a.target.value),className:"w-full px-3 py-2 border rounded-lg dark:bg-gray-800 dark:border-gray-600",placeholder:"Enter text to copy"}),e.jsxs(s.Button,{onClick:$,className:"w-full",children:[e.jsx(t.Copy,{className:"w-4 h-4 mr-2"}),"Copy to Clipboard"]}),u.value&&e.jsxs(s.Typography,{tag:"p",className:"text-sm text-green-600 dark:text-green-400",children:["✓ Copied: ",u.value]})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// useCopyToClipboard — returns [state, copyFn]
+const [state, copyToClipboard] = useCopyToClipboard();
+// state: { value?: string; error?: Error; noUserInteraction: boolean }
+copyToClipboard('text');
+
+// useClickAway — detects clicks outside ref
+const ref = useRef(null);
+useClickAway(ref, () => setIsOpen(false));`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"UI State Management"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Global state hooks for layout and notifications"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg",children:e.jsx(t.Settings,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useGridSwitcher & useToastStore"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useGridSwitcher"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Current layout:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:c?"Compact":"Normal"})]}),e.jsxs(s.Button,{onClick:q,variant:"ghost",className:"w-full",children:[e.jsx(t.LayoutGrid,{className:"w-4 h-4 mr-2"}),"Switch to ",c?"Normal":"Compact"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useToastStore"}),e.jsxs("div",{className:"grid grid-cols-2 gap-2",children:[e.jsx(s.Button,{color:"success",fullWidth:!0,onClick:()=>l("success"),children:"Success"}),e.jsx(s.Button,{color:"danger",fullWidth:!0,onClick:()=>l("destructive"),children:"Error"}),e.jsx(s.Button,{color:"warning",fullWidth:!0,onClick:()=>l("warning"),children:"Warning"}),e.jsx(s.Button,{color:"info",fullWidth:!0,onClick:()=>l("info"),children:"Info"})]})]})]}),e.jsx("div",{className:"bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto",children:e.jsx(s.CodeBlock,{language:"tsx",noExpand:!0,code:`// useToastStore — Zustand store for notifications
+const { addToast, dismissToast, toasts } = useToastStore();
+addToast({
+  id: 'unique-id',
+  title: 'Title',
+  message: 'Message text',
+  variant: 'success', // 'default' | 'destructive' | 'success' | 'warning' | 'info'
+  timeout: 3000,
+});
+
+// useGridSwitcher — Zustand store for grid layout
+const { isGridCompact, setIsGridCompact } = useGridSwitcher();`})})]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Advanced Utilities"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Scroll control, event listeners, and lifecycle hooks"})]}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 to-amber-500 shadow-lg",children:e.jsx(t.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"useScrollableSlider, useEventListener & more"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useScrollableSlider"}),e.jsxs("div",{className:"relative",children:[e.jsx("button",{ref:z,onClick:W,className:"absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md opacity-0 invisible transition-opacity",children:e.jsx(t.ChevronLeft,{className:"w-4 h-4"})}),e.jsx("div",{ref:L,className:"flex gap-4 overflow-x-auto scrollbar-hide py-4",children:A.map(a=>e.jsxs("div",{className:"shrink-0 w-48 p-4 bg-white dark:bg-gray-800 border rounded-lg",children:[e.jsx(s.Typography,{tag:"h6",className:"font-medium mb-2",children:a.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:a.content})]},a.id))}),e.jsx("button",{ref:G,onClick:D,className:"absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 border rounded-full p-2 shadow-md transition-opacity",children:e.jsx(t.ChevronRight,{className:"w-4 h-4"})})]})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useEventListener"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Press any key:"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Last key:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:f||"None"})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useWindowScroll"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Scroll position:"}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:["X: ",Math.round(S),"px"]}),e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:["Y: ",Math.round(M),"px"]})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useIsMounted"}),e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-4 rounded-lg border",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm mb-2",children:"Mount status:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:w})]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useLockBodyScroll"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs(s.Button,{onClick:()=>i(!0),variant:"ghost",children:[e.jsx(t.Lock,{className:"w-4 h-4 mr-2"}),"Open Modal (Locks Scroll)"]}),e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Body scroll is ",d?"locked":"unlocked"]})]})]})]})})]}),d&&e.jsx("div",{className:"fixed inset-0 bg-black/50 flex items-center justify-center z-50",children:e.jsxs("div",{className:"bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md w-full mx-4",children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:"Modal with Locked Scroll"}),e.jsx("button",{onClick:()=>i(!1),className:"text-gray-500 hover:text-gray-700",children:e.jsx(t.X,{className:"w-5 h-5"})})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-4",children:"While this modal is open, body scrolling is locked using useLockBodyScroll. The scrollbar width is preserved to prevent layout shift."}),e.jsx(s.Button,{onClick:()=>i(!1),className:"w-full",children:"Close Modal"})]})})]})};exports.default=O;