@e-burgos/tucu-ui 2.0.1 → 2.0.3

package/documentation/ListContainerSection-g8e36trw.js

@@ -0,0 +1,125 @@
+import { jsxs as i, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { T as s, C as a, a as n, Y as o, A as d, c as h } from "../index-DsiBIFwo.js";
+import { Activity as g, Edit as p, Trash as C, Share as N } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const w = () => {
+  const [l, c] = m(!1), t = [
+    {
+      id: "1",
+      label: "Edit",
+      icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" }),
+      onClick: () => console.log("Edit clicked")
+    },
+    {
+      id: "2",
+      label: "Delete",
+      icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
+      onClick: () => console.log("Delete clicked")
+    },
+    {
+      id: "3",
+      label: "Share",
+      icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
+      onClick: () => console.log("Share clicked")
+    }
+  ];
+  return /* @__PURE__ */ i(r, { children: [
+    /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ListContainer" }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A dropdown container component for displaying lists of items with customizable trigger and positioning."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ i(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Hover Trigger" }),
+        /* @__PURE__ */ e(o, { items: t, trigger: "hover" })
+      ] }),
+      /* @__PURE__ */ i(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Click Trigger" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            items: t,
+            trigger: "click",
+            isOpen: l,
+            onOpenChange: c
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Custom Icon" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            items: t,
+            triggerIcon: /* @__PURE__ */ e(g, { className: "w-4! h-4!" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Different Positions" }),
+        /* @__PURE__ */ i("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ e(o, { items: t, position: "top" }),
+          /* @__PURE__ */ e(o, { items: t, position: "right" }),
+          /* @__PURE__ */ e(o, { items: t, position: "left" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(d, { componentName: "ListContainer" }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      h,
+      {
+        language: "tsx",
+        code: `import { ListContainer, ListItem, LucideIcons } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: '1',
+    label: 'Edit',
+    icon: <LucideIcons.Edit className="w-4 h-4" />,
+    onClick: () => handleEdit(),
+  },
+  {
+    id: '2',
+    label: 'Delete',
+    icon: <LucideIcons.Trash className="w-4 h-4" />,
+    onClick: () => handleDelete(),
+  },
+];
+
+// Hover trigger
+<ListContainer items={items} trigger="hover" />
+
+// Click trigger
+<ListContainer
+  items={items}
+  trigger="click"
+  isOpen={isOpen}
+  onOpenChange={setIsOpen}
+/>
+
+// With custom icon
+<ListContainer
+  items={items}
+  triggerIcon={<LucideIcons.MoreVertical className="w-5 h-5" />}
+/>
+
+// Different positions
+<ListContainer items={items} position="top" />
+<ListContainer items={items} position="right" />
+<ListContainer items={items} position="bottom" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  w as default
+};

package/documentation/ListItemSection-BKMlFb_B.js

@@ -0,0 +1,134 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { T as l, C as t, a as i, Z as s, s as n, A as d, c as o } from "../index-DsiBIFwo.js";
+import { Home as r, Settings as h, User as p, Star as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const L = () => /* @__PURE__ */ a(m, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ListItem" }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        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."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic List Items" }),
+      /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(s, { id: "1", label: "Item 1" }),
+        /* @__PURE__ */ e(s, { id: "2", label: "Item 2" }),
+        /* @__PURE__ */ e(s, { id: "3", label: "Item 3" })
+      ] })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Icons" }),
+      /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(
+          s,
+          {
+            id: "1",
+            label: "Home",
+            icon: /* @__PURE__ */ e(r, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          s,
+          {
+            id: "2",
+            label: "Settings",
+            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          s,
+          {
+            id: "3",
+            label: "Profile",
+            icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "States" }),
+      /* @__PURE__ */ a("ul", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(s, { id: "1", label: "Active Item", active: !0 }),
+        /* @__PURE__ */ e(s, { id: "2", label: "Normal Item" }),
+        /* @__PURE__ */ e(s, { id: "3", label: "Disabled Item", disabled: !0 })
+      ] })
+    ] }),
+    /* @__PURE__ */ a(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
+      /* @__PURE__ */ e("ul", { className: "space-y-1", children: /* @__PURE__ */ e(
+        s,
+        {
+          id: "1",
+          content: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(u, { className: "w-4 h-4" }),
+            /* @__PURE__ */ e("span", { children: "Custom Content" })
+          ] })
+        }
+      ) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    n,
+    {
+      componentName: "ListItem",
+      defaultValues: { label: "List Item", active: !1, disabled: !1 },
+      excludeProps: ["onClick", "content", "icon", "id"],
+      children: (c) => /* @__PURE__ */ e(s, { ...c })
+    }
+  ),
+  /* @__PURE__ */ e(d, { componentName: "ListItem" }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    o,
+    {
+      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()}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  L as default
+};

package/documentation/ListItemSection-CGRWmUNh.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-D874Kozv.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>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(t.Home,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"2",label:"Settings",icon:e.jsx(t.Settings,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"3",label:"Profile",icon:e.jsx(t.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(t.Star,{className:"w-4 h-4"}),e.jsx("span",{children:"Custom Content"})]})})})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"ListItem",defaultValues:{label:"List Item",active:!1,disabled:!1},excludeProps:["onClick","content","icon","id"],children:a=>e.jsx(s.ListItem,{...a})}),e.jsx(s.AutoPropsTable,{componentName:"ListItem"}),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=i;

package/{LiveDemoSection-BtM__Pji.mjs → documentation/LiveDemoSection-Bi6TUjps.js}

@@ -1,5 +1,5 @@
 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-DAzR4tRy.mjs";
+import { C as m, a as s, T as t, r as i, W as l } from "../index-DsiBIFwo.js";
 import { Play as o } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/LiveDemoSection-CNS2AHrx.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-D874Kozv.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/{LiveDemonstrationsSection-C3oCeAoh.js → documentation/LiveDemonstrationsSection-8IzxP_-q.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("./index-Cj89iBVR.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:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),s=require("../index-D874Kozv.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-WvNWXeuH.mjs → documentation/LiveDemonstrationsSection-BTZH9yJ4.js}

@@ -1,16 +1,16 @@
 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-DAzR4tRy.mjs";
+import { ak as q, al as K, am as V, a6 as Z, an as _, ao as F, ap as J, aq as Q, ar as ee, as as ae, at as te, au as se, av as re, T as t, C as d, G as l, c as le, r } from "../index-DsiBIFwo.js";
 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: $,
+  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: W }] = Q(), [$, C] = ee(), {
+    sliderEl: D,
     sliderPrevBtn: G,
-    sliderNextBtn: j,
-    scrollToTheRight: A,
-    scrollToTheLeft: O
+    sliderNextBtn: A,
+    scrollToTheRight: O,
+    scrollToTheLeft: P
   } = ae("/");
   te(c), se(k, () => {
     N(!1);
@@ -19,14 +19,14 @@ const Ce = () => {
   }), Y(() => {
     y(w ? "Component is mounted" : "Component is not mounted");
   }, [w]);
-  const P = () => {
+  const U = () => {
     M(n), h({
       id: `copy-${Date.now()}`,
       title: "Copied!",
       message: `Copied "${n}" to clipboard`,
       variant: "success"
     });
-  }, U = () => {
+  }, j = () => {
     const s = !g;
     L(s), h({
       id: `layout-${Date.now()}`,
@@ -126,7 +126,7 @@ const { isMobile } = useIsMobile();
                         Math.round(R),
                         " ×",
                         " ",
-                        Math.round(D),
+                        Math.round(W),
                         "px"
                       ]
                     }
@@ -140,7 +140,7 @@ const { isMobile } = useIsMobile();
             /* @__PURE__ */ a(
               "div",
               {
-                ref: W,
+                ref: $,
                 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" }),
@@ -203,7 +203,7 @@ const { isMobile } = useIsMobile();
                   placeholder: "Enter text to copy"
                 }
               ),
-              /* @__PURE__ */ a(r, { onClick: P, className: "w-full", children: [
+              /* @__PURE__ */ a(r, { onClick: U, className: "w-full", children: [
                 /* @__PURE__ */ e(ce, { className: "w-4 h-4 mr-2" }),
                 "Copy to Clipboard"
               ] }),
@@ -239,7 +239,7 @@ const { isMobile } = useIsMobile();
               /* @__PURE__ */ a(
                 r,
                 {
-                  onClick: U,
+                  onClick: j,
                   variant: "ghost",
                   className: "w-full",
                   children: [
@@ -308,7 +308,7 @@ const { isMobile } = useIsMobile();
                 "button",
                 {
                   ref: G,
-                  onClick: O,
+                  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(pe, { className: "w-4 h-4" })
                 }
@@ -316,7 +316,7 @@ const { isMobile } = useIsMobile();
               /* @__PURE__ */ e(
                 "div",
                 {
-                  ref: $,
+                  ref: D,
                   className: "flex gap-4 overflow-x-auto scrollbar-hide py-4",
                   children: H.map((s) => /* @__PURE__ */ a(
                     "div",
@@ -341,8 +341,8 @@ const { isMobile } = useIsMobile();
               /* @__PURE__ */ e(
                 "button",
                 {
-                  ref: j,
-                  onClick: A,
+                  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(ue, { className: "w-4 h-4" })
                 }

package/documentation/LivePriceFeedSection-BETZCxkR.js

@@ -0,0 +1,97 @@
+import { jsxs as a, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as i, C as c, a as l, L as t, B as n, E as r, A as m, c as o } from "../index-DsiBIFwo.js";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ a(s, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "LivePriceFeed" }),
+    /* @__PURE__ */ e(
+      i,
+      {
+        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."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(c, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Chart" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          id: "bitcoin",
+          name: "Bitcoin",
+          symbol: "BTC",
+          icon: /* @__PURE__ */ e(n, { className: "w-6 h-6" }),
+          balance: "1.25",
+          usdBalance: "45,000",
+          change: "+2.5%",
+          isChangePositive: !0,
+          prices: [
+            { name: 1, value: 45e3 },
+            { name: 2, value: 45200 },
+            { name: 3, value: 44800 },
+            { name: 4, value: 45100 },
+            { name: 5, value: 45300 }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(c, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Negative Change" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          id: "ethereum",
+          name: "Ethereum",
+          symbol: "ETH",
+          icon: /* @__PURE__ */ e(r, { 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 }
+          ]
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(m, { componentName: "LivePriceFeed" }),
+  /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    o,
+    {
+      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}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};

package/documentation/LivePriceFeedSection-xqYzz2UJ.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const i=[{name:1,value:45e3},{name:2,value:45200},{name:3,value:44800},{name:4,value:45100},{name:5,value:45300}];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:i})]}),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.AutoPropsTable,{componentName:"LivePriceFeed"}),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=s;