@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/documentation/DataFetchingSection-ZdwqQJWR.js

@@ -1,128 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),a=require("../index-DWDUS-PU.js"),q=require("lucide-react");require("react-router-dom");require("react-dom");const u=[{name:"Luke Skywalker",height:"172",mass:"77",gender:"male",birth_year:"19BBY"},{name:"C-3PO",height:"167",mass:"75",gender:"n/a",birth_year:"112BBY"},{name:"R2-D2",height:"96",mass:"32",gender:"n/a",birth_year:"33BBY"},{name:"Darth Vader",height:"202",mass:"136",gender:"male",birth_year:"41.9BBY"},{name:"Leia Organa",height:"150",mass:"49",gender:"female",birth_year:"19BBY"},{name:"Owen Lars",height:"178",mass:"120",gender:"male",birth_year:"52BBY"},{name:"Beru Whitesun lars",height:"165",mass:"75",gender:"female",birth_year:"47BBY"},{name:"R5-D4",height:"97",mass:"32",gender:"n/a",birth_year:"unknown"},{name:"Biggs Darklighter",height:"183",mass:"84",gender:"male",birth_year:"24BBY"},{name:"Obi-Wan Kenobi",height:"182",mass:"77",gender:"male",birth_year:"57BBY"},{name:"Anakin Skywalker",height:"188",mass:"84",gender:"male",birth_year:"41.9BBY"},{name:"Wilhuff Tarkin",height:"180",mass:"unknown",gender:"male",birth_year:"64BBY"},{name:"Chewbacca",height:"228",mass:"112",gender:"male",birth_year:"200BBY"},{name:"Han Solo",height:"180",mass:"80",gender:"male",birth_year:"29BBY"},{name:"Greedo",height:"173",mass:"74",gender:"male",birth_year:"44BBY"}],L=()=>{const[i,j]=n.useState("server"),[k,b]=n.useState(!1),[N,f]=n.useState(!1),[S,d]=n.useState([]),[C,m]=n.useState(0),[P,w]=n.useState(0),[I,y]=n.useState(!1),p=n.useRef(!0),[s,B]=n.useState({pageIndex:0,pageSize:10}),T=[{id:"name",accessorKey:"name",header:"Character Name",cell:t=>e.jsx("span",{className:"font-semibold text-gray-900 dark:text-gray-100",children:String(t.getValue())})},{id:"height",accessorKey:"height",header:"Height (cm)"},{id:"mass",accessorKey:"mass",header:"Mass (kg)"},{id:"gender",accessorKey:"gender",header:"Gender",cell:t=>{const x=String(t.getValue()),l=x==="male"?"info":x==="female"?"danger":"gray";return e.jsx(a.Badge,{variant:"soft",color:l,children:x})}},{id:"birth_year",accessorKey:"birth_year",header:"Birth Year"}];return n.useEffect(()=>{let t=!0;return(async()=>{if(p.current?(b(!0),p.current=!1):f(!0),y(!1),i==="server"){const l=s.pageIndex*s.pageSize,g=Math.floor(l/10)+1;try{w(r=>r+1);const c=await fetch(`https://swapi.py4e.com/api/people/?page=${g}`);if(!c.ok)throw new Error("API down");const o=await c.json();if(t){const r=l%10;let h=o.results.slice(r,r+s.pageSize);if(h.length<s.pageSize&&o.next){const v=await fetch(`https://swapi.py4e.com/api/people/?page=${g+1}`);if(v.ok){const D=await v.json(),F=s.pageSize-h.length;h=[...h,...D.results.slice(0,F)]}}d(h),m(o.count)}}catch(c){if(console.warn("SWAPI failed, using local fallback data",c),t){y(!0);const o=s.pageIndex*s.pageSize,r=o+s.pageSize;d(u.slice(o,r)),m(u.length)}}finally{t&&(b(!1),f(!1))}}else try{w(r=>r+1);const[l,g]=await Promise.all([fetch("https://swapi.py4e.com/api/people/?page=1"),fetch("https://swapi.py4e.com/api/people/?page=2")]);if(!l.ok||!g.ok)throw new Error("API down");const[c,o]=await Promise.all([l.json(),g.json()]);if(t){const r=[...c.results,...o.results];d(r),m(r.length)}}catch(l){console.warn("SWAPI failed, using local fallback data",l),t&&(y(!0),d(u),m(u.length))}finally{t&&(b(!1),f(!1))}})(),()=>{t=!1}},[i,s.pageIndex,s.pageSize]),e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(a.HeroCard,{title:"Data Fetching & Pagination",description:"See how the DataTable handles remote data fetching. Toggle between Server-side pagination (on-demand API requests) and Client-side pagination (single-fetch local processing).",icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-indigo-500/50",children:e.jsx(q.Globe,{className:"w-8 h-8 sm:w-10 sm:h-10 text-white"})})}),e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h4",className:"font-bold text-gray-900 dark:text-gray-100",children:"Interactive Demo Settings"}),e.jsx(a.Typography,{className:"text-sm text-foreground/60 mt-1",children:"Select how you want to paginate and display the Star Wars character dataset."})]}),e.jsxs("div",{className:"flex items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1.5 rounded-xl border border-border/40",children:[e.jsx("button",{onClick:()=>{j("server"),d([]),p.current=!0},className:`px-4 py-2 rounded-lg text-xs font-semibold transition-all ${i==="server"?"bg-white dark:bg-gray-700 shadow-xs text-brand":"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`,children:"Server-Side Pagination"}),e.jsx("button",{onClick:()=>{j("client"),d([]),p.current=!0},className:`px-4 py-2 rounded-lg text-xs font-semibold transition-all ${i==="client"?"bg-white dark:bg-gray-700 shadow-xs text-brand":"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`,children:"Client-Side Pagination"})]})]}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-border/60",children:[e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-[10px] uppercase font-bold text-gray-400 tracking-wider",children:"Active Mode"}),e.jsxs("span",{className:"text-sm font-semibold text-indigo-600 dark:text-indigo-400 mt-1 flex items-center gap-1.5",children:[e.jsxs("span",{className:"relative flex h-2 w-2",children:[e.jsx("span",{className:"animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"}),e.jsx("span",{className:"relative inline-flex rounded-full h-2 w-2 bg-indigo-500"})]}),i==="server"?"Server-Side":"Client-Side"]})]}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-[10px] uppercase font-bold text-gray-400 tracking-wider",children:"API Requests (CORS)"}),e.jsxs("span",{className:"text-sm font-semibold text-gray-800 dark:text-gray-200 mt-1",children:[P," calls"]})]}),e.jsxs("div",{className:"flex flex-col",children:[e.jsx("span",{className:"text-[10px] uppercase font-bold text-gray-400 tracking-wider",children:"Source Status"}),e.jsx("span",{className:"text-sm font-semibold mt-1",children:I?e.jsx(a.Badge,{variant:"soft",color:"warning",children:"Offline Fallback (Local Mock)"}):e.jsx(a.Badge,{variant:"soft",color:"success",children:"Connected to SWAPI API"})})]})]})]}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.DataTable,{tableId:`sw-${i}-table`,columns:T,data:S,title:i==="server"?"Star Wars Directory (Server Paginated)":"Star Wars Directory (Client Paginated)",isLoading:k,isFetching:N,border:!0,pagination:i==="server"?{showPagination:!0,serverPagination:{totalCount:C,pagination:s,setPagination:t=>B(t)}}:{showPagination:!0,pageSize:5}},`sw-${i}-table`)}),e.jsxs("section",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Server-Side Pagination",className:"mb-4",children:[e.jsx(a.Typography,{className:"text-sm text-foreground/75 mb-3",children:"In Server-side mode, the table configuration state is mapped to backend API parameters. Clicking pages, ordering headers, or filtering content triggers a callback to make a new query."}),e.jsxs("div",{className:"space-y-2 mt-4 text-xs",children:[e.jsxs("div",{className:"flex justify-between border-b border-border/40 pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Ideal for:"}),e.jsx("span",{children:"Millions of records, heavy datasets"})]}),e.jsxs("div",{className:"flex justify-between border-b border-border/40 pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"First Load:"}),e.jsx("span",{className:"text-emerald-600 font-semibold",children:"Fast (queries only 10 rows)"})]}),e.jsxs("div",{className:"flex justify-between border-b border-border/40 pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Page Navigation:"}),e.jsx("span",{className:"text-amber-600 font-semibold",children:"Requires Fetch (network latency)"})]}),e.jsxs("div",{className:"flex justify-between pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Server Overhead:"}),e.jsx("span",{children:"High (multiple database hits)"})]})]})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Client-Side Pagination",className:"mb-4",children:[e.jsx(a.Typography,{className:"text-sm text-foreground/75 mb-3",children:"In Client-side mode, all records are fetched from the API during the initial mount. Once loaded in memory, the local TanStack table instance handles pages slicing, sorting, and filter queries instantly."}),e.jsxs("div",{className:"space-y-2 mt-4 text-xs",children:[e.jsxs("div",{className:"flex justify-between border-b border-border/40 pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Ideal for:"}),e.jsx("span",{children:"Small/medium datasets (< 10,000 rows)"})]}),e.jsxs("div",{className:"flex justify-between border-b border-border/40 pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"First Load:"}),e.jsx("span",{className:"text-amber-600 font-semibold",children:"Slower (downloads all data once)"})]}),e.jsxs("div",{className:"flex justify-between border-b border-border/40 pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Page Navigation:"}),e.jsx("span",{className:"text-emerald-600 font-semibold",children:"Instant (handled locally in RAM)"})]}),e.jsxs("div",{className:"flex justify-between pb-2",children:[e.jsx("span",{className:"font-semibold text-gray-500",children:"Server Overhead:"}),e.jsx("span",{children:"Low (one single HTTP query)"})]})]})]})})]}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"Implementation Code Comparison",className:"mb-4",children:[e.jsx(a.Typography,{className:"text-sm text-foreground/60 mb-6",children:"Compare the configuration options between server-side and client-side setup."}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h6",className:"font-bold text-indigo-500 mb-2",children:"Server-Side Configuration"}),e.jsx(a.CodeBlock,{language:"tsx",code:`// Server-Side: Fetch page-by-page
-const [pagination, setPagination] = useState({
-  pageIndex: 0,
-  pageSize: 10,
-});
-
-useEffect(() => {
-  fetchData(pagination.pageIndex);
-}, [pagination.pageIndex]);
-
-return (
-  <DataTable
-    tableId="server-table"
-    columns={columns}
-    data={serverData}
-    isLoading={isLoading}
-    isFetching={isFetching}
-    pagination={{
-      showPagination: true,
-      serverPagination: {
-        totalCount: totalRowsCount,
-        pagination: pagination,
-        setPagination: (p) => setPagination(p),
-      },
-    }}
-  />
-);`})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h6",className:"font-bold text-emerald-500 mb-2",children:"Client-Side Configuration"}),e.jsx(a.CodeBlock,{language:"tsx",code:`// Client-Side: Fetch all once
-useEffect(() => {
-  fetchAllData(); // sets clientData once
-}, []);
-
-return (
-  <DataTable
-    tableId="client-table"
-    columns={columns}
-    data={clientData} // Array of all items
-    isLoading={isLoading}
-    isFetching={isFetching}
-    pagination={{
-      showPagination: true,
-      pageSize: 10, // Slices locally
-    }}
-  />
-);`})]})]})]})}),e.jsx(a.CardContainer,{className:"p-6",children:e.jsxs(a.CardTitle,{title:"React Query Code Comparison",className:"mb-4",children:[e.jsxs(a.Typography,{className:"text-sm text-foreground/60 mb-6",children:["The same two fetching strategies implemented with"," ",e.jsx("code",{className:"text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono text-brand",children:"@tanstack/react-query"}),". React Query handles caching, background re-fetching, loading and error states automatically — removing the need for manual"," ",e.jsx("code",{className:"text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono",children:"useEffect"})," ","boilerplate."]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h6",className:"font-bold text-indigo-500 mb-2",children:"Server-Side with React Query"}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
-import { DataTable } from '@e-burgos/tucu-ui';
-
-// Fetch function (one page at a time)
-async function fetchPage(pageIndex: number, pageSize: number) {
-  const swapiPage = Math.floor((pageIndex * pageSize) / 10) + 1;
-  const res = await fetch(
-    \`https://swapi.py4e.com/api/people/?page=\${swapiPage}\`
-  );
-  if (!res.ok) throw new Error('Network response was not ok');
-  return res.json(); // { count, results }
-}
-
-export function ServerSideTable() {
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-
-  // useQuery re-runs automatically when pagination changes
-  const { data, isLoading, isFetching } = useQuery({
-    queryKey: ['swapi-server', pagination.pageIndex, pagination.pageSize],
-    queryFn: () =>
-      fetchPage(pagination.pageIndex, pagination.pageSize),
-    placeholderData: (prev) => prev, // keeps old rows while fetching next
-  });
-
-  return (
-    <DataTable
-      tableId="server-table"
-      columns={columns}
-      data={data?.results ?? []}
-      isLoading={isLoading}
-      isFetching={isFetching}
-      pagination={{
-        showPagination: true,
-        serverPagination: {
-          totalCount: data?.count ?? 0,
-          pagination,
-          setPagination: (p) => setPagination(p),
-        },
-      }}
-    />
-  );
-}`})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h6",className:"font-bold text-emerald-500 mb-2",children:"Client-Side with React Query"}),e.jsx(a.CodeBlock,{language:"tsx",code:`import { useQuery } from '@tanstack/react-query';
-import { DataTable } from '@e-burgos/tucu-ui';
-
-// Fetch function — loads all data once
-async function fetchAllCharacters() {
-  const [res1, res2] = await Promise.all([
-    fetch('https://swapi.py4e.com/api/people/?page=1'),
-    fetch('https://swapi.py4e.com/api/people/?page=2'),
-  ]);
-  if (!res1.ok || !res2.ok)
-    throw new Error('Network response was not ok');
-  const [json1, json2] = await Promise.all([
-    res1.json(),
-    res2.json(),
-  ]);
-  return [...json1.results, ...json2.results]; // full local array
-}
-
-export function ClientSideTable() {
-  // Single fetch → result is cached by React Query automatically
-  const { data = [], isLoading, isFetching } = useQuery({
-    queryKey: ['swapi-client-all'],
-    queryFn: fetchAllCharacters,
-    staleTime: 5 * 60 * 1000, // keep fresh for 5 minutes
-  });
-
-  return (
-    <DataTable
-      tableId="client-table"
-      columns={columns}
-      data={data} // full array — DataTable slices locally
-      isLoading={isLoading}
-      isFetching={isFetching}
-      pagination={{
-        showPagination: true,
-        pageSize: 10, // client-side slicing, no extra fetches
-      }}
-    />
-  );
-}`})]})]}),e.jsxs("div",{className:"mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4",children:[e.jsxs("div",{className:"p-4 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800",children:[e.jsx("p",{className:"text-xs font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-wider mb-1",children:"queryKey"}),e.jsxs("p",{className:"text-xs text-gray-600 dark:text-gray-400",children:["Server-side includes"," ",e.jsx("code",{className:"font-mono bg-white dark:bg-gray-800 px-1 rounded",children:"pageIndex"})," ","&"," ",e.jsx("code",{className:"font-mono bg-white dark:bg-gray-800 px-1 rounded",children:"pageSize"})," ","in the key so each page is cached independently."]})]}),e.jsxs("div",{className:"p-4 rounded-xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800",children:[e.jsx("p",{className:"text-xs font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider mb-1",children:"placeholderData"}),e.jsxs("p",{className:"text-xs text-gray-600 dark:text-gray-400",children:["Using"," ",e.jsx("code",{className:"font-mono bg-white dark:bg-gray-800 px-1 rounded",children:"placeholderData: (prev) => prev"})," ","keeps the previous page visible while the next one loads — equivalent to ",e.jsx("em",{children:"keepPreviousData"})," in v4."]})]}),e.jsxs("div",{className:"p-4 rounded-xl bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800",children:[e.jsx("p",{className:"text-xs font-bold text-amber-600 dark:text-amber-400 uppercase tracking-wider mb-1",children:"staleTime"}),e.jsxs("p",{className:"text-xs text-gray-600 dark:text-gray-400",children:["Client-side uses"," ",e.jsx("code",{className:"font-mono bg-white dark:bg-gray-800 px-1 rounded",children:"staleTime"})," ","to avoid re-fetching the full dataset on every window focus or component re-mount."]})]})]})]})})]})};exports.default=L;

package/documentation/DefiAppLogoSection-CM6swWaf.js

@@ -1,38 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const a=[{key:"prop",label:"Prop",render:i=>e.jsx("code",{className:"text-xs text-brand",children:String(i)})},{key:"type",label:"Type",render:i=>e.jsx("code",{className:"text-xs",children:String(i)})},{key:"default",label:"Default",render:i=>{const t=String(i);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],r=[{prop:"...SVGAttributes",type:"React.SVGAttributes<SVGElement>",default:"-",description:"All standard SVG attributes are supported"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"DefiAppLogo",description:`An animated brain-inspired logo component designed for DeFi
-          applications, featuring pulsing nodes and signal flows that represent
-          financial data processing.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Diamond,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),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:"Default Animated Logo"}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(s.DefiAppLogo,{width:100,height:100})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),e.jsxs("div",{className:"flex items-center gap-4 flex-wrap justify-center",children:[e.jsx(s.DefiAppLogo,{width:60,height:60}),e.jsx(s.DefiAppLogo,{width:100,height:100}),e.jsx(s.DefiAppLogo,{width:150,height:150})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Classes"}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(s.DefiAppLogo,{width:120,height:120,className:"opacity-90 hover:opacity-100 transition-opacity"})})]})]})})})}),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:a,data:r})})})}),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 { DefiAppLogo } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<DefiAppLogo width={100} height={100} />
-
-// Different sizes
-<DefiAppLogo width={60} height={60} />
-<DefiAppLogo width={100} height={100} />
-<DefiAppLogo width={150} height={150} />
-
-// With custom classes
-<DefiAppLogo 
-  width={120} 
-  height={120} 
-  className="opacity-90 hover:opacity-100 transition-opacity" 
-/>
-
-// With SVG attributes
-<DefiAppLogo 
-  width={80} 
-  height={80} 
-  className="custom-class"
-  viewBox="0 0 100 100"
-/>
-
-// Perfect for DeFi applications
-<div className="flex items-center gap-2">
-  <DefiAppLogo width={40} height={40} />
-  <span>My DeFi App</span>
-</div>
-
-// Features:
-// - Animated pulsing nodes
-// - Signal flow animations
-// - Gradient colors (blue, purple, pink)
-// - Perfect for financial/blockchain apps`})})})}),e.jsx(s.PropPlayground,{componentName:"TucuUiLogo",title:"Logo Playground",defaultValues:{size:48},excludeProps:["props","className"],children:i=>e.jsx(s.TucuUiLogo,{...i})}),e.jsx(s.AutoPropsTable,{componentName:"TucuUiLogo"})]})};exports.default=l;

package/documentation/DefiAppLogoSection-DdW6TZ5c.js

@@ -1,132 +0,0 @@
-import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as c, C as s, a as o, T as l, ai as t, y as d, c as p, P as m, ah as h, A as f } from "../index-DoxeCFUJ.js";
-import { Diamond as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const v = () => /* @__PURE__ */ a(n, { children: [
-  /* @__PURE__ */ e(
-    c,
-    {
-      title: "DefiAppLogo",
-      description: `An animated brain-inspired logo component designed for DeFi
-          applications, featuring pulsing nodes and signal flows that represent
-          financial data processing.`,
-      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { 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(s, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Default Animated Logo" }),
-      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(t, { width: 100, height: 100 }) })
-    ] }),
-    /* @__PURE__ */ a(s, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
-      /* @__PURE__ */ a("div", { className: "flex items-center gap-4 flex-wrap justify-center", children: [
-        /* @__PURE__ */ e(t, { width: 60, height: 60 }),
-        /* @__PURE__ */ e(t, { width: 100, height: 100 }),
-        /* @__PURE__ */ e(t, { width: 150, height: 150 })
-      ] })
-    ] }),
-    /* @__PURE__ */ a(s, { className: "p-4", children: [
-      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
-      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
-        t,
-        {
-          width: 120,
-          height: 120,
-          className: "opacity-90 hover:opacity-100 transition-opacity"
-        }
-      ) })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
-    {
-      key: "prop",
-      label: "Prop",
-      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
-    },
-    {
-      key: "type",
-      label: "Type",
-      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
-    },
-    {
-      key: "default",
-      label: "Default",
-      render: (i) => {
-        const r = String(i);
-        return r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r });
-      }
-    },
-    {
-      key: "description",
-      label: "Description"
-    }
-  ], data: [
-    {
-      prop: "...SVGAttributes",
-      type: "React.SVGAttributes<SVGElement>",
-      default: "-",
-      description: "All standard SVG attributes are supported"
-    }
-  ] }) }) }) }),
-  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    p,
-    {
-      language: "tsx",
-      code: `import { DefiAppLogo } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<DefiAppLogo width={100} height={100} />
-
-// Different sizes
-<DefiAppLogo width={60} height={60} />
-<DefiAppLogo width={100} height={100} />
-<DefiAppLogo width={150} height={150} />
-
-// With custom classes
-<DefiAppLogo 
-  width={120} 
-  height={120} 
-  className="opacity-90 hover:opacity-100 transition-opacity" 
-/>
-
-// With SVG attributes
-<DefiAppLogo 
-  width={80} 
-  height={80} 
-  className="custom-class"
-  viewBox="0 0 100 100"
-/>
-
-// Perfect for DeFi applications
-<div className="flex items-center gap-2">
-  <DefiAppLogo width={40} height={40} />
-  <span>My DeFi App</span>
-</div>
-
-// Features:
-// - Animated pulsing nodes
-// - Signal flow animations
-// - Gradient colors (blue, purple, pink)
-// - Perfect for financial/blockchain apps`
-    }
-  ) }) }) }),
-  /* @__PURE__ */ e(
-    m,
-    {
-      componentName: "TucuUiLogo",
-      title: "Logo Playground",
-      defaultValues: {
-        size: 48
-      },
-      excludeProps: ["props", "className"],
-      children: (i) => /* @__PURE__ */ e(h, { ...i })
-    }
-  ),
-  /* @__PURE__ */ e(f, { componentName: "TucuUiLogo" })
-] });
-export {
-  v as default
-};

package/documentation/DeploymentSection-BptA4WV3.js

@@ -1,36 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(r.HeroCard,{title:"Self-Hosting & Deployment",description:"Deploy the MCP server to Docker, Fly.io, or any container platform for team-wide access.",icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-sky-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Cloud,{className:"w-8 h-8 sm:w-10 sm:h-10 text-white"})})}),e.jsx(r.CardContainer,{children:e.jsxs(r.CardTitle,{title:"Live Instance",children:[e.jsx(r.Typography,{className:"text-sm text-foreground/70 mb-3",children:"A public instance is available for testing and evaluation:"}),e.jsxs("div",{className:"p-4 rounded-lg border border-emerald-500/20 bg-emerald-500/5 flex items-center gap-3",children:[e.jsx(r.Badge,{variant:"soft",className:"bg-emerald-500/10 text-emerald-500",children:"LIVE"}),e.jsx("code",{className:"text-sm font-mono text-emerald-600 dark:text-emerald-400",children:"https://tucu-ui-mcp.fly.dev"})]})]})}),e.jsx(r.CardContainer,{children:e.jsxs(r.CardTitle,{title:"Docker",children:[e.jsx(r.Typography,{className:"text-sm text-foreground/70 mb-3",children:"Run with Docker Compose or standalone:"}),e.jsx(r.CodeBlock,{code:`# Using Docker Compose (recommended)
-docker compose up -d
-
-# Or build and run manually
-docker build -t tucu-ui-mcp .
-docker run -d \\
-  --name tucu-ui-mcp \\
-  -p 3100:3100 \\
-  -e MCP_API_KEY=your-secret-key \\
-  tucu-ui-mcp`})]})}),e.jsx(r.CardContainer,{children:e.jsxs(r.CardTitle,{title:"Fly.io",children:[e.jsx(r.Typography,{className:"text-sm text-foreground/70 mb-3",children:"Deploy to Fly.io for a globally-distributed instance:"}),e.jsx(r.CodeBlock,{code:`# Initial setup
-fly launch --name tucu-ui-mcp --region iad
-
-# Set secrets
-fly secrets set MCP_API_KEY=your-secret-key
-
-# Deploy
-fly deploy
-
-# Check status
-fly status
-fly logs`})]})}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Environment Variables",children:e.jsx(r.BasicTable,{columns:[{key:"variable",label:"Variable",render:t=>e.jsx("code",{className:"px-1.5 py-0.5 bg-muted rounded text-xs font-mono",children:String(t)})},{key:"default",label:"Default"},{key:"description",label:"Description"}],data:[{variable:"PORT",default:"3100",description:"HTTP server port"},{variable:"MCP_API_KEY",default:"—",description:"Bearer token for authentication (required in production)"},{variable:"NODE_ENV",default:"production",description:"Environment mode"},{variable:"RATE_LIMIT_MAX",default:"100",description:"Max requests per minute per IP"}]})})}),e.jsx(r.CardContainer,{children:e.jsxs(r.CardTitle,{title:"Docker Compose File",children:[e.jsxs(r.Typography,{className:"text-sm text-foreground/70 mb-3",children:["Reference"," ",e.jsx("code",{className:"px-1.5 py-0.5 bg-muted rounded text-xs font-mono",children:"docker-compose.yml"}),":"]}),e.jsx(r.CodeBlock,{code:`version: '3.8'
-services:
-  mcp-server:
-    build: .
-    ports:
-      - "3100:3100"
-    environment:
-      - PORT=3100
-      - MCP_API_KEY=\${MCP_API_KEY}
-      - NODE_ENV=production
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3100/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3`})]})})]});exports.default=o;

package/documentation/DeploymentSection-Ca1Z8a_c.js

@@ -1,136 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { H as s, C as r, a as o, T as l, K as n, c as a, y as c } from "../index-DoxeCFUJ.js";
-import { Cloud as d } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const b = () => /* @__PURE__ */ t("div", { className: "flex flex-col gap-8", children: [
-  /* @__PURE__ */ e(
-    s,
-    {
-      title: "Self-Hosting & Deployment",
-      description: "Deploy the MCP server to Docker, Fly.io, or any container platform for team-wide access.",
-      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-sky-500 to-blue-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
-    }
-  ),
-  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(o, { title: "Live Instance", children: [
-    /* @__PURE__ */ e(l, { className: "text-sm text-foreground/70 mb-3", children: "A public instance is available for testing and evaluation:" }),
-    /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-emerald-500/20 bg-emerald-500/5 flex items-center gap-3", children: [
-      /* @__PURE__ */ e(
-        n,
-        {
-          variant: "soft",
-          className: "bg-emerald-500/10 text-emerald-500",
-          children: "LIVE"
-        }
-      ),
-      /* @__PURE__ */ e("code", { className: "text-sm font-mono text-emerald-600 dark:text-emerald-400", children: "https://tucu-ui-mcp.fly.dev" })
-    ] })
-  ] }) }),
-  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(o, { title: "Docker", children: [
-    /* @__PURE__ */ e(l, { className: "text-sm text-foreground/70 mb-3", children: "Run with Docker Compose or standalone:" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        code: `# Using Docker Compose (recommended)
-docker compose up -d
-
-# Or build and run manually
-docker build -t tucu-ui-mcp .
-docker run -d \\
-  --name tucu-ui-mcp \\
-  -p 3100:3100 \\
-  -e MCP_API_KEY=your-secret-key \\
-  tucu-ui-mcp`
-      }
-    )
-  ] }) }),
-  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(o, { title: "Fly.io", children: [
-    /* @__PURE__ */ e(l, { className: "text-sm text-foreground/70 mb-3", children: "Deploy to Fly.io for a globally-distributed instance:" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        code: `# Initial setup
-fly launch --name tucu-ui-mcp --region iad
-
-# Set secrets
-fly secrets set MCP_API_KEY=your-secret-key
-
-# Deploy
-fly deploy
-
-# Check status
-fly status
-fly logs`
-      }
-    )
-  ] }) }),
-  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(o, { title: "Environment Variables", children: /* @__PURE__ */ e(
-    c,
-    {
-      columns: [
-        {
-          key: "variable",
-          label: "Variable",
-          render: (i) => /* @__PURE__ */ e("code", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: String(i) })
-        },
-        { key: "default", label: "Default" },
-        { key: "description", label: "Description" }
-      ],
-      data: [
-        {
-          variable: "PORT",
-          default: "3100",
-          description: "HTTP server port"
-        },
-        {
-          variable: "MCP_API_KEY",
-          default: "—",
-          description: "Bearer token for authentication (required in production)"
-        },
-        {
-          variable: "NODE_ENV",
-          default: "production",
-          description: "Environment mode"
-        },
-        {
-          variable: "RATE_LIMIT_MAX",
-          default: "100",
-          description: "Max requests per minute per IP"
-        }
-      ]
-    }
-  ) }) }),
-  /* @__PURE__ */ e(r, { children: /* @__PURE__ */ t(o, { title: "Docker Compose File", children: [
-    /* @__PURE__ */ t(l, { className: "text-sm text-foreground/70 mb-3", children: [
-      "Reference",
-      " ",
-      /* @__PURE__ */ e("code", { className: "px-1.5 py-0.5 bg-muted rounded text-xs font-mono", children: "docker-compose.yml" }),
-      ":"
-    ] }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        code: `version: '3.8'
-services:
-  mcp-server:
-    build: .
-    ports:
-      - "3100:3100"
-    environment:
-      - PORT=3100
-      - MCP_API_KEY=\${MCP_API_KEY}
-      - NODE_ENV=production
-    restart: unless-stopped
-    healthcheck:
-      test: ["CMD", "curl", "-f", "http://localhost:3100/health"]
-      interval: 30s
-      timeout: 10s
-      retries: 3`
-      }
-    )
-  ] }) })
-] });
-export {
-  b as default
-};

package/documentation/DesignPrinciplesSection-BZwAzzwG.js

@@ -1,68 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { H as t, T as a, ax as o } from "../index-DoxeCFUJ.js";
-import { Compass as n, CheckCircle as l, Minimize2 as r, Layers as c, Eye as m } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
-  /* @__PURE__ */ e(
-    t,
-    {
-      title: "Design Principles",
-      description: "Core principles that guide our design decisions and ensure consistency.",
-      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-    /* @__PURE__ */ s("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Core Principles" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "The foundational values behind every design decision"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
-      {
-        title: "Consistency",
-        description: "Unified visual language and interaction patterns across all components.",
-        icon: /* @__PURE__ */ e(l, { className: "h-6 w-6" }),
-        iconBgClassName: "from-emerald-500 via-green-500 to-teal-500"
-      },
-      {
-        title: "Simplicity",
-        description: "Clean, intuitive interfaces that reduce cognitive load.",
-        icon: /* @__PURE__ */ e(r, { className: "h-6 w-6" }),
-        iconBgClassName: "from-blue-500 via-cyan-500 to-sky-500"
-      },
-      {
-        title: "Flexibility",
-        description: "Adaptable components that work across different contexts.",
-        icon: /* @__PURE__ */ e(c, { className: "h-6 w-6" }),
-        iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
-      },
-      {
-        title: "Accessibility",
-        description: "Inclusive design that works for everyone.",
-        icon: /* @__PURE__ */ e(m, { className: "h-6 w-6" }),
-        iconBgClassName: "from-orange-500 via-amber-500 to-yellow-500"
-      }
-    ].map((i) => /* @__PURE__ */ e(
-      o,
-      {
-        layout: "horizontal",
-        title: i.title,
-        description: i.description,
-        icon: i.icon,
-        iconBgClassName: i.iconBgClassName
-      },
-      i.title
-    )) })
-  ] })
-] });
-export {
-  x as default
-};

package/documentation/DesignPrinciplesSection-DYwidCK8.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const a=[{title:"Consistency",description:"Unified visual language and interaction patterns across all components.",icon:e.jsx(s.CheckCircle,{className:"h-6 w-6"}),iconBgClassName:"from-emerald-500 via-green-500 to-teal-500"},{title:"Simplicity",description:"Clean, intuitive interfaces that reduce cognitive load.",icon:e.jsx(s.Minimize2,{className:"h-6 w-6"}),iconBgClassName:"from-blue-500 via-cyan-500 to-sky-500"},{title:"Flexibility",description:"Adaptable components that work across different contexts.",icon:e.jsx(s.Layers,{className:"h-6 w-6"}),iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"},{title:"Accessibility",description:"Inclusive design that works for everyone.",icon:e.jsx(s.Eye,{className:"h-6 w-6"}),iconBgClassName:"from-orange-500 via-amber-500 to-yellow-500"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(t.HeroCard,{title:"Design Principles",description:"Core principles that guide our design decisions and ensure consistency.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Compass,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Core Principles"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"The foundational values behind every design decision"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:a.map(i=>e.jsx(t.FeatureCard,{layout:"horizontal",title:i.title,description:i.description,icon:i.icon,iconBgClassName:i.iconBgClassName},i.title))})]})]})};exports.default=n;

package/documentation/DocumentationSection-BD7CQC84.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs("div",{className:"flex flex-col gap-8",children:[e.jsx(s.HeroCard,{title:"DataTable Documentation",description:"A comprehensive reference guide for DataTable components in tucu-ui. Learn how to configure sorting, pagination, pinning, state persistence, and customized row details.",icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.BookOpen,{className:"w-8 h-8 sm:w-10 sm:h-10 text-white"})})}),e.jsx(s.CardContainer,{children:e.jsxs(s.CardTitle,{title:"Introduction",children:[e.jsxs(s.Typography,{className:"text-sm text-foreground/70 mb-4",children:["The ",e.jsx("code",{children:"DataTable"})," component is a powerful, highly-configurable table wrapper built on top of ",e.jsx("strong",{children:"@tanstack/react-table"}),". It incorporates advanced UI features tailored for dashboard structures while maintaining lightweight bundle profiles."]}),e.jsx(s.Typography,{className:"text-sm text-foreground/70",children:"It natively handles column adjustments (resizing, ordering), row selections (single/multi), custom cell rendering, background fetching states, manual (server-side) or client-side pagination, and automatic persistence of the table configuration inside local storage via Zustand."})]})}),e.jsxs("section",{className:"space-y-6",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Key Features"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Packed with enterprise-grade capabilities out-of-the-box"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{className:"p-5",children:e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("div",{className:"p-2.5 bg-indigo-500/10 rounded-lg text-indigo-500",children:e.jsx(a.FolderHeart,{className:"w-6 h-6"})}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold mb-1",children:"State Persistence"}),e.jsx(s.Typography,{className:"text-xs text-foreground/60",children:"Zustand state integration automatically remembers pagination size, sorting parameters, column visibility configurations, pinning states, and column order parameters."})]})]})}),e.jsx(s.CardContainer,{className:"p-5",children:e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("div",{className:"p-2.5 bg-purple-500/10 rounded-lg text-purple-500",children:e.jsx(a.MoveHorizontal,{className:"w-6 h-6"})}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold mb-1",children:"Column Resizing & Reordering"}),e.jsx(s.Typography,{className:"text-xs text-foreground/60",children:"Allow users to drag column boundaries to adjust their size, or drag headers laterally to re-order the columns."})]})]})}),e.jsx(s.CardContainer,{className:"p-5",children:e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("div",{className:"p-2.5 bg-pink-500/10 rounded-lg text-pink-500",children:e.jsx(a.Pin,{className:"w-6 h-6"})}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold mb-1",children:"Column Pinning"}),e.jsx(s.Typography,{className:"text-xs text-foreground/60",children:"Pin critical columns (such as identifier or status) permanently to the left or right boundaries while scrolling horizontally."})]})]})}),e.jsx(s.CardContainer,{className:"p-5",children:e.jsxs("div",{className:"flex gap-4 items-start",children:[e.jsx("div",{className:"p-2.5 bg-blue-500/10 rounded-lg text-blue-500",children:e.jsx(a.FileSpreadsheet,{className:"w-6 h-6"})}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold mb-1",children:"Sub-component Expanding"}),e.jsx(s.Typography,{className:"text-xs text-foreground/60",children:"Drill down on details for any record by expanding rows to show sub-panels, charts, or nested tables in place."})]})]})})]})]}),e.jsx(s.AutoPropsTable,{componentName:"DataTable",showFilePath:!0})]});exports.default=t;