@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/ListItemSection-D3CkNixV.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const l=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const i=String(t);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],c=[{prop:"id",type:"string | number",default:"required",description:"Unique identifier for the item"},{prop:"label",type:"string",default:"-",description:"Text label for the item"},{prop:"icon",type:"React.ReactNode",default:"-",description:"Icon to display before the label"},{prop:"content",type:"React.ReactNode",default:"-",description:"Custom content to display instead of label"},{prop:"onClick",type:"() => void",default:"-",description:"Click handler function"},{prop:"disabled",type:"boolean",default:"false",description:"Whether the item is disabled"},{prop:"active",type:"boolean",default:"false",description:"Whether the item is active"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ListItem"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A list item component for displaying items in dropdowns and menus with support for icons, labels, and custom content."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic List Items"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Item 1"}),e.jsx(s.ListItem,{id:"2",label:"Item 2"}),e.jsx(s.ListItem,{id:"3",label:"Item 3"})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Home",icon:e.jsx(a.Home,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"2",label:"Settings",icon:e.jsx(a.Settings,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"3",label:"Profile",icon:e.jsx(a.User,{className:"w-4 h-4"})})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"States"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Active Item",active:!0}),e.jsx(s.ListItem,{id:"2",label:"Normal Item"}),e.jsx(s.ListItem,{id:"3",label:"Disabled Item",disabled:!0})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Content"}),e.jsx("ul",{className:"space-y-1",children:e.jsx(s.ListItem,{id:"1",content:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Star,{className:"w-4 h-4"}),e.jsx("span",{children:"Custom Content"})]})})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:l,data:c})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { ListItem, LucideIcons } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<ul>
+  <ListItem id="1" label="Item 1" />
+  <ListItem id="2" label="Item 2" />
+</ul>
+
+// With icons
+<ListItem
+  id="1"
+  label="Home"
+  icon={<LucideIcons.Home className="w-4 h-4" />}
+/>
+
+// With states
+<ListItem id="1" label="Active" active />
+<ListItem id="2" label="Disabled" disabled />
+
+// With custom content
+<ListItem
+  id="1"
+  content={
+    <div className="flex items-center gap-2">
+      <LucideIcons.Star className="w-4 h-4" />
+      <span>Custom</span>
+    </div>
+  }
+/>
+
+// With onClick
+<ListItem
+  id="1"
+  label="Clickable"
+  onClick={() => handleClick()}
+/>`})})})})]})};exports.default=r;

package/LiveDemoSection-DQDdyS8_.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsx(e.Fragment,{children:e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Live Demo Form",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 bg-linear-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg",children:e.jsx(s.Play,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:"Interactive Form Example"})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx(r.Button,{size:"small",className:"animate-bounce",children:e.jsx(r.AnchorLink,{to:"/form-system/example",children:"Go to Form Example"})})})]})})})});exports.default=i;

package/LiveDemoSection-Duz-z9Az.mjs

@@ -0,0 +1,16 @@
+import { jsx as e, Fragment as r, jsxs as a } from "react/jsx-runtime";
+import { C as m, a as s, T as t, s as i, W as l } from "./index-Hq6IUBmn.mjs";
+import { Play as o } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(s, { title: "Live Demo Form", className: "mt-2 mb-6", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-4", children: [
+    /* @__PURE__ */ e("div", { className: "p-2 bg-linear-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+    /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold", children: "Interactive Form Example" })
+  ] }),
+  /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(i, { size: "small", className: "animate-bounce", children: /* @__PURE__ */ e(l, { to: "/form-system/example", children: "Go to Form Example" }) }) })
+] }) }) }) });
+export {
+  x as default
+};

package/LiveDemonstrationsSection-7OJufZVy.js

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("./index-CjRk4ezu.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const P=()=>{const[d,f]=r.useState("Hello, World!"),[m,w]=s.useCopyToClipboard(),[i,o]=r.useState(!1),[x,g]=r.useState(!1),[k,p]=r.useState(""),[T,y]=r.useState("Checking..."),u=s.useBreakpoint(),{isMobile:j}=s.useIsMobile(),{addToast:n}=s.useToastStore(),{isGridCompact:c,setIsGridCompact:C}=s.useGridSwitcher(),{x:S,y:M}=s.useWindowScroll(),N=s.useIsMounted(),b=r.useRef(null),[B,{width:I,height:L}]=s.useElementSize(),[R,v]=s.useMeasure(),{sliderEl:z,sliderPrevBtn:E,sliderNextBtn:W,scrollToTheRight:$,scrollToTheLeft:D}=s.useScrollableSlider("/");s.useLockBodyScroll(i),s.useClickAway(b,()=>{g(!1)}),s.useEventListener("keydown",a=>{p(a.key),setTimeout(()=>p(""),1e3)}),r.useEffect(()=>{y(N?"Component is mounted":"Component is not mounted")},[N]);const G=()=>{w(d),n({id:`copy-${Date.now()}`,title:"Copied!",message:`Copied "${d}" 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})},O=Array.from({length:10},(a,h)=>({id:h+1,title:`Item ${h+1}`,content:`Content for item ${h+1}`}));return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Live Hook Demonstrations"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Interactive examples showing hooks in action"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",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 via-cyan-500 to-teal-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-xl font-semibold",children:"Responsive Detection"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Real-time breakpoint detection and mobile state tracking."}),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:u})]}),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:j?"Yes":"No"})]}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-500",children:"True for xs, sm, md breakpoints"})]})]})]}),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();
+const { isMobile } = useIsMobile();
+// Current: ${u}, Mobile: ${j}`})})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",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 via-emerald-500 to-teal-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-xl font-semibold",children:"Element Measurement"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track element dimensions and bounds in real-time."}),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-[100px]",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(I)," ×"," ",Math.round(L),"px"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-medium mb-3",children:"useMeasure"}),e.jsxs("div",{ref:R,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-[100px]",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(v.width)," ×"," ",Math.round(v.height),"px"]})]})]})]})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",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 via-violet-500 to-indigo-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-xl font-semibold",children:"User Interaction"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Interactive demonstrations of click detection and clipboard operations."}),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:b,children:[e.jsxs(s.Button,{onClick:()=>g(!x),variant:"ghost",className:"w-full",children:[e.jsx(t.ChevronDown,{className:"w-4 h-4 mr-2"}),"Click to open dropdown"]}),x&&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:d,onChange:a=>f(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:G,className:"w-full",children:[e.jsx(t.Copy,{className:"w-4 h-4 mr-2"}),"Copy to Clipboard"]}),m&&e.jsxs(s.Typography,{tag:"p",className:"text-sm text-green-600 dark:text-green-400",children:["✓ Copied: ",String(m)]})]})]})]})]})}),e.jsx(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",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 via-emerald-500 to-teal-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-xl font-semibold",children:"UI State Management"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Global state management for UI behaviors and notifications."}),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(s.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",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 via-amber-500 to-yellow-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-xl font-semibold",children:"Advanced Utilities"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Advanced hooks for complex UI behaviors and interactions."}),e.jsxs("div",{className:"space-y-6",children:[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:E,onClick:D,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:z,className:"flex gap-4 overflow-x-auto scrollbar-hide py-4",children:O.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:W,onClick:$,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-2 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 to see event detection:"}),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:k||"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:"Current scroll position:"}),e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:"X:"}),e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:[Math.round(S),"px"]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:"Y:"}),e.jsxs(s.Badge,{className:"text-dark dark:text-white",children:[Math.round(M),"px"]})]})]})]})]})]}),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:()=>o(!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 ",i?"locked":"unlocked"]})]})]}),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:"Component mount status:"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Status:"}),e.jsx(s.Badge,{className:"text-dark dark:text-white",children:T})]})]})]})]})]})})]}),i&&e.jsx("div",{className:"fixed inset-0 bg-black bg-opacity-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:()=>o(!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 the useLockBodyScroll hook. The scrollbar width is preserved to prevent layout shift."}),e.jsx(s.Button,{onClick:()=>o(!1),className:"w-full",children:"Close Modal"})]})})]})};exports.default=P;

package/LiveDemonstrationsSection-DFRqLVsW.mjs

@@ -0,0 +1,445 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as i, useRef as X, useEffect as Y } from "react";
+import { aj as q, ak as K, al as V, a6 as Z, am as _, an as F, ao as J, ap as Q, aq as ee, ar as ae, as as te, at as se, au as re, T as t, C as d, D as l, c as le, s as r } from "./index-Hq6IUBmn.mjs";
+import { Monitor as ie, Ruler as de, MousePointer as oe, ChevronDown as ne, Copy as ce, Settings as me, LayoutGrid as he, Zap as ge, ChevronLeft as pe, ChevronRight as ue, Lock as xe, X as Ne } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const Ce = () => {
+  const [n, S] = i("Hello, World!"), [u, M] = q(), [c, m] = i(!1), [x, N] = i(!1), [T, b] = i(""), [I, y] = i("Checking..."), v = K(), { isMobile: f } = V(), { addToast: h } = Z(), { isGridCompact: g, setIsGridCompact: L } = _(), { x: B, y: z } = F(), w = J(), k = X(null), [E, { width: R, height: D }] = Q(), [W, C] = ee(), {
+    sliderEl: $,
+    sliderPrevBtn: G,
+    sliderNextBtn: j,
+    scrollToTheRight: A,
+    scrollToTheLeft: O
+  } = ae("/");
+  te(c), se(k, () => {
+    N(!1);
+  }), re("keydown", (s) => {
+    b(s.key), setTimeout(() => b(""), 1e3);
+  }), Y(() => {
+    y(w ? "Component is mounted" : "Component is not mounted");
+  }, [w]);
+  const P = () => {
+    M(n), h({
+      id: `copy-${Date.now()}`,
+      title: "Copied!",
+      message: `Copied "${n}" to clipboard`,
+      variant: "success"
+    });
+  }, U = () => {
+    const s = !g;
+    L(s), h({
+      id: `layout-${Date.now()}`,
+      title: "Layout Changed",
+      message: `Switched to ${s ? "Compact" : "Normal"} layout`,
+      variant: "info"
+    });
+  }, o = (s = "success") => {
+    h({
+      id: `toast-${Date.now()}`,
+      title: "Test Toast",
+      message: `This is a ${s} toast notification`,
+      variant: s,
+      timeout: 3e3
+    });
+  }, H = Array.from({ length: 10 }, (s, p) => ({
+    id: p + 1,
+    title: `Item ${p + 1}`,
+    content: `Content for item ${p + 1}`
+  }));
+  return /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Live Hook Demonstrations" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Interactive examples showing hooks in action"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", 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 via-cyan-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(ie, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "Responsive Detection" })
+        ] }),
+        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Real-time breakpoint detection and mobile state tracking." }),
+        /* @__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(t, { 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: v })
+              ] }),
+              /* @__PURE__ */ e(t, { 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(t, { 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: f ? "Yes" : "No" })
+              ] }),
+              /* @__PURE__ */ e(t, { tag: "p", className: "text-xs text-gray-500", children: "True for xs, sm, md breakpoints" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-gray-700 overflow-x-auto", children: /* @__PURE__ */ e(
+          le,
+          {
+            language: "tsx",
+            noExpand: !0,
+            code: `
+const breakpoint = useBreakpoint();
+const { isMobile } = useIsMobile();
+// Current: ${v}, Mobile: ${f}`
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", 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 via-emerald-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(de, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "Element Measurement" })
+        ] }),
+        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Track element dimensions and bounds in real-time." }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useElementSize" }),
+            /* @__PURE__ */ a(
+              "div",
+              {
+                ref: E,
+                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-[100px]",
+                children: [
+                  /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "Resize this element (drag corner)" }),
+                  /* @__PURE__ */ a(
+                    t,
+                    {
+                      tag: "p",
+                      className: "text-xs text-gray-600 dark:text-gray-400 mt-2",
+                      children: [
+                        "Size: ",
+                        Math.round(R),
+                        " ×",
+                        " ",
+                        Math.round(D),
+                        "px"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { 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-[100px]",
+                children: [
+                  /* @__PURE__ */ e(t, { tag: "p", className: "text-sm", children: "Measured element" }),
+                  /* @__PURE__ */ a(
+                    t,
+                    {
+                      tag: "p",
+                      className: "text-xs text-gray-600 dark:text-gray-400 mt-2",
+                      children: [
+                        "Bounds: ",
+                        Math.round(C.width),
+                        " ×",
+                        " ",
+                        Math.round(C.height),
+                        "px"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", 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 via-violet-500 to-indigo-500 shadow-lg", children: /* @__PURE__ */ e(oe, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "User Interaction" })
+        ] }),
+        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Interactive demonstrations of click detection and clipboard operations." }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useClickAway" }),
+            /* @__PURE__ */ a("div", { className: "relative", ref: k, children: [
+              /* @__PURE__ */ a(
+                r,
+                {
+                  onClick: () => N(!x),
+                  variant: "ghost",
+                  className: "w-full",
+                  children: [
+                    /* @__PURE__ */ e(ne, { className: "w-4 h-4 mr-2" }),
+                    "Click to open dropdown"
+                  ]
+                }
+              ),
+              x && /* @__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(t, { tag: "p", className: "text-sm", children: "Click outside to close this dropdown" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { 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: (s) => S(s.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: P, className: "w-full", children: [
+                /* @__PURE__ */ e(ce, { className: "w-4 h-4 mr-2" }),
+                "Copy to Clipboard"
+              ] }),
+              u && /* @__PURE__ */ a(
+                t,
+                {
+                  tag: "p",
+                  className: "text-sm text-green-600 dark:text-green-400",
+                  children: [
+                    "✓ Copied: ",
+                    String(u)
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", 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 via-emerald-500 to-teal-500 shadow-lg", children: /* @__PURE__ */ e(me, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "UI State Management" })
+        ] }),
+        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Global state management for UI behaviors and notifications." }),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { 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: g ? "Compact" : "Normal" })
+              ] }),
+              /* @__PURE__ */ a(
+                r,
+                {
+                  onClick: U,
+                  variant: "ghost",
+                  className: "w-full",
+                  children: [
+                    /* @__PURE__ */ e(he, { className: "w-4 h-4 mr-2" }),
+                    "Switch to ",
+                    g ? "Normal" : "Compact"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { 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(d, { className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1", 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 via-amber-500 to-yellow-500 shadow-lg", children: /* @__PURE__ */ e(ge, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(t, { tag: "h3", className: "text-xl font-semibold", children: "Advanced Utilities" })
+        ] }),
+        /* @__PURE__ */ e(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: "Advanced hooks for complex UI behaviors and interactions." }),
+        /* @__PURE__ */ a("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useScrollableSlider" }),
+            /* @__PURE__ */ a("div", { className: "relative", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  ref: G,
+                  onClick: O,
+                  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(pe, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: $,
+                  className: "flex gap-4 overflow-x-auto scrollbar-hide py-4",
+                  children: H.map((s) => /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: "shrink-0 w-48 p-4 bg-white dark:bg-gray-800 border rounded-lg",
+                      children: [
+                        /* @__PURE__ */ e(t, { tag: "h6", className: "font-medium mb-2", children: s.title }),
+                        /* @__PURE__ */ e(
+                          t,
+                          {
+                            tag: "p",
+                            className: "text-sm text-gray-600 dark:text-gray-400",
+                            children: s.content
+                          }
+                        )
+                      ]
+                    },
+                    s.id
+                  ))
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  ref: j,
+                  onClick: A,
+                  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(ue, { className: "w-4 h-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+            /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ e(t, { 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(t, { tag: "p", className: "text-sm mb-2", children: "Press any key to see event detection:" }),
+                /* @__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: T || "None" })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ e(t, { 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(t, { tag: "p", className: "text-sm mb-2", children: "Current scroll position:" }),
+                /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: "X:" }),
+                    /* @__PURE__ */ a(l, { className: "text-dark dark:text-white", children: [
+                      Math.round(B),
+                      "px"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: "Y:" }),
+                    /* @__PURE__ */ a(l, { className: "text-dark dark:text-white", children: [
+                      Math.round(z),
+                      "px"
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { tag: "h5", className: "font-medium mb-3", children: "useLockBodyScroll" }),
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ a(r, { onClick: () => m(!0), variant: "ghost", children: [
+                /* @__PURE__ */ e(xe, { className: "w-4 h-4 mr-2" }),
+                "Open Modal (Locks Scroll)"
+              ] }),
+              /* @__PURE__ */ a(
+                t,
+                {
+                  tag: "p",
+                  className: "text-sm text-gray-600 dark:text-gray-400",
+                  children: [
+                    "Body scroll is ",
+                    c ? "locked" : "unlocked"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { children: [
+            /* @__PURE__ */ e(t, { 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(t, { tag: "p", className: "text-sm mb-2", children: "Component mount status:" }),
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ e("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Status:" }),
+                /* @__PURE__ */ e(l, { className: "text-dark dark:text-white", children: I })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    c && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-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(t, { tag: "h3", className: "font-semibold", children: "Modal with Locked Scroll" }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => m(!1),
+            className: "text-gray-500 hover:text-gray-700",
+            children: /* @__PURE__ */ e(Ne, { className: "w-5 h-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-4",
+          children: "While this modal is open, body scrolling is locked using the useLockBodyScroll hook. The scrollbar width is preserved to prevent layout shift."
+        }
+      ),
+      /* @__PURE__ */ e(r, { onClick: () => m(!1), className: "w-full", children: "Close Modal" })
+    ] }) })
+  ] });
+};
+export {
+  Ce as default
+};

package/LivePriceFeedSection-BwQbsy1e.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const t=[{name:1,value:45e3},{name:2,value:45200},{name:3,value:44800},{name:4,value:45100},{name:5,value:45300}],s=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const i=String(r);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],n=[{prop:"id",type:"string",default:"required",description:"Unique identifier for the price feed"},{prop:"name",type:"string",default:"required",description:"Full name of the cryptocurrency"},{prop:"symbol",type:"string",default:"required",description:"Cryptocurrency symbol"},{prop:"icon",type:"React.ReactElement",default:"required",description:"Icon element for the cryptocurrency"},{prop:"balance",type:"string",default:"required",description:"Coin balance amount"},{prop:"usdBalance",type:"string",default:"required",description:"USD equivalent balance"},{prop:"change",type:"string",default:"required",description:"Price change percentage"},{prop:"isChangePositive",type:"boolean",default:"required",description:"Whether the price change is positive"},{prop:"prices",type:"Price[]",default:"required",description:"Array of price data points for the chart"},{prop:"isBorder",type:"boolean",default:"false",description:"Whether to show border instead of shadow"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"LivePriceFeed"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Real-time price display with integrated chart visualization for cryptocurrency price tracking."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Chart"}),e.jsx(a.LivePriceFeed,{id:"bitcoin",name:"Bitcoin",symbol:"BTC",icon:e.jsx(a.Bitcoin,{className:"w-6 h-6"}),balance:"1.25",usdBalance:"45,000",change:"+2.5%",isChangePositive:!0,prices:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Negative Change"}),e.jsx(a.LivePriceFeed,{id:"ethereum",name:"Ethereum",symbol:"ETH",icon:e.jsx(a.Ethereum,{className:"w-6 h-6"}),balance:"5.5",usdBalance:"16,500",change:"-1.8%",isChangePositive:!1,prices:[{name:1,value:3e3},{name:2,value:2950},{name:3,value:2980},{name:4,value:2920},{name:5,value:2900}]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:s,data:n})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { LivePriceFeed } from '@e-burgos/tucu-ui';
+
+const priceData = [
+  { name: 1, value: 45000 },
+  { name: 2, value: 45200 },
+  { name: 3, value: 44800 },
+  { name: 4, value: 45100 },
+];
+
+<LivePriceFeed
+  id="bitcoin"
+  name="Bitcoin"
+  symbol="BTC"
+  icon={<Bitcoin />}
+  balance="1.25"
+  usdBalance="45,000"
+  change="+2.5%"
+  isChangePositive={true}
+  prices={priceData}
+/>`})})})})]})};exports.default=c;