npm - @beyondcorp/beyond-ui - Versions diffs - 1.2.89 → 1.2.91 - Mend

@beyondcorp/beyond-ui 1.2.89 → 1.2.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/components/ComponentShowcase/ComponentShowcase.js CHANGED Viewed

@@ -148,17 +148,17 @@ const ComponentShowcase = ({ className }) => {
                 return "w-full";
         }
     };
-    return (jsxs("div", { className: cn("flex h-screen bg-gray-50", className), children: [jsx(Toast, {}), jsxs("div", { ref: sidebarRef, className: cn("bg-white border-r border-gray-200 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 text-gray-700", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => {
+    return (jsxs("div", { className: cn("flex h-screen bg-gray-50 dark:bg-gray-950", darkMode && "dark", className), children: [jsx(Toast, {}), jsxs("div", { ref: sidebarRef, className: cn("bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col", sidebarCollapsed ? "w-16" : "w-80"), tabIndex: sidebarCollapsed ? -1 : 0, onKeyDown: handleKeyNavigation, "aria-label": "Component navigation", children: [jsxs("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: [!sidebarCollapsed && (jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxs("div", { className: "flex items-center space-x-2", children: [jsx("div", { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: jsx(Palette, { className: "h-4 w-4 text-white" }) }), jsx("span", { className: "font-bold text-lg text-gray-900 dark:text-white", children: "Beyond UI" })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(true), children: jsx(ChevronRight, { className: "h-4 w-4" }) })] })), sidebarCollapsed && (jsx("div", { className: "flex justify-center", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) })), !sidebarCollapsed && (jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500" }), jsx(Input, { placeholder: "Search components...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10" })] }))] }), jsx("nav", { className: "flex-1 p-4 overflow-y-auto", children: Object.entries(filteredCategories).map(([categoryName, categoryData]) => (jsxs("div", { className: "mb-4", children: [jsxs("button", { onClick: () => !sidebarCollapsed && toggleCategory(categoryName), className: cn("flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors", "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300", sidebarCollapsed ? "justify-center" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, !sidebarCollapsed && jsx("span", { children: categoryName })] }), !sidebarCollapsed && (jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180") }))] }), !sidebarCollapsed && expandedCategories.includes(categoryName) && (jsx("div", { className: "mt-2 ml-6 space-y-1", children: categoryData.components.map((component) => {
                                         const isActive = selectedComponent === component.id;
                                         return (jsx("button", { "data-component-id": component.id, onClick: () => {
                                                 setSelectedComponent(component.id);
                                                 setFocusedIndex(flatComponents.indexOf(component.id));
                                             }, className: cn("flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", isActive
-                                                ? "bg-primary-50 text-primary-700 border-r-2 border-primary-600"
-                                                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
-                                    }) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white border-b border-gray-200 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { className: cn(darkMode && "dark"), children: showcaseRegistry[selectedComponent]
+                                                ? "bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500"
+                                                : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white"), "aria-current": isActive ? "page" : undefined, children: component.name }, component.id));
+                                    }) }))] }, categoryName))) })] }), jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [jsx("header", { className: "bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4", children: jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: currentDoc?.name || "Component Showcase" }), currentDoc && jsx(Badge, { variant: "outline", children: currentDoc.name })] }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs("div", { className: "flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1", children: [jsx(Button, { variant: viewMode === "desktop" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("desktop"), children: jsx(Monitor, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "tablet" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("tablet"), children: jsx(Tablet, { className: "h-4 w-4" }) }), jsx(Button, { variant: viewMode === "mobile" ? "primary" : "ghost", size: "sm", onClick: () => setViewMode("mobile"), children: jsx(Smartphone, { className: "h-4 w-4" }) })] }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => setDarkMode(!darkMode), children: darkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6", children: currentDoc ? (jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [jsx("div", { children: jsx("p", { className: "text-lg text-gray-600 dark:text-gray-400", children: currentDoc.description }) }), jsxs("div", { children: [jsxs("div", { className: "flex gap-3 mb-4", role: "tablist", "aria-label": "Component details tabs", children: [jsxs(Button, { variant: activeTab === "preview" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("preview"), role: "tab", "aria-selected": activeTab === "preview", children: [jsx(Eye, { className: "h-4 w-4 mr-2" }), "Preview"] }), jsxs(Button, { variant: activeTab === "code" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("code"), role: "tab", "aria-selected": activeTab === "code", children: [jsx(Code, { className: "h-4 w-4 mr-2" }), "Code"] }), jsxs(Button, { variant: activeTab === "props" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("props"), role: "tab", "aria-selected": activeTab === "props", children: [jsx(Settings, { className: "h-4 w-4 mr-2" }), "Props"] })] }), jsxs("div", { children: [jsx("div", { className: "mt-6", children: jsx("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: jsx("div", { className: cn("mx-auto transition-all duration-300", getViewportClass()), children: jsx("div", { children: showcaseRegistry[selectedComponent]
                                                                     ? React.createElement(showcaseRegistry[selectedComponent])
-                                                                    : null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600", children: prop.type }), jsx("td", { className: "p-3 text-gray-600", children: prop.default ? (jsx("code", { className: "bg-gray-100 px-2 py-1 rounded text-sm", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
+                                                                    : null }) }) }) }), activeTab === "code" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Code example", children: jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: [jsxs("div", { className: "flex flex-row items-center justify-between", children: [jsx("h2", { className: "text-lg font-semibold mb-0 dark:text-white", children: "Usage Example" }), jsxs(Button, { variant: "outline", size: "sm", onClick: () => copyToClipboard(currentExample), children: [copiedCode === currentExample ? (jsx(Check, { className: "h-4 w-4 mr-2" })) : (jsx(Copy, { className: "h-4 w-4 mr-2" })), "Copy"] })] }), jsx("pre", { className: "bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto", children: jsx("code", { children: currentExample }) })] }) })), activeTab === "props" && (jsx("div", { className: "mt-6", role: "tabpanel", "aria-label": "Component props", children: jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-lg shadow p-6", children: [jsx("h2", { className: "text-lg font-semibold mb-4 dark:text-white", children: "Component Props" }), jsx("div", { className: "overflow-x-auto", children: jsxs("table", { className: "w-full border-collapse", children: [jsx("thead", { children: jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-800", children: [jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Prop" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Type" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Default" }), jsx("th", { className: "text-left p-3 font-medium text-gray-900 dark:text-gray-100", children: "Description" })] }) }), jsx("tbody", { children: currentProps.length > 0 ? (currentProps.map((prop, index) => (jsxs("tr", { className: "border-b border-gray-100 dark:border-gray-800/50", children: [jsxs("td", { className: "p-3", children: [jsx("code", { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300", children: prop.name }), prop.required && (jsx(Badge, { variant: "danger", className: "ml-2 text-xs", children: "Required" }))] }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.type }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.default ? (jsx("code", { className: "bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300", children: prop.default })) : null }), jsx("td", { className: "p-3 text-gray-600 dark:text-gray-400", children: prop.description })] }, prop.name ?? index)))) : (jsx("tr", { children: jsx("td", { colSpan: 4, className: "p-4 text-center text-gray-500 dark:text-gray-400", children: "No props documented for this component yet." }) })) })] }) })] }) }))] })] })] })) : (jsx("div", { className: "flex items-center justify-center h-full", children: jsxs("div", { className: "text-center", children: [jsx(Book, { className: "h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4" }), jsx("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-2", children: "Select a Component" }), jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Choose a component from the sidebar to view its documentation and examples." })] }) })) })] })] }));
 };
 export { ComponentShowcase };

package/dist/components/ComponentShowcase/ComponentShowcase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n Search,\n Copy,\n Check,\n Monitor,\n Tablet,\n Smartphone,\n Sun,\n Moon,\n ChevronRight,\n ChevronDown,\n Code,\n Eye,\n Book,\n Palette,\n Layout,\n MousePointer,\n AlertCircle,\n BarChart3,\n Settings,\n Shield\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n Forms: {\n icon: <MousePointer className=\"h-4 w-4\" />,\n components: [\n { name: \"Button\", id: \"button\" },\n { name: \"Input\", id: \"input\" },\n { name: \"Textarea\", id: \"textarea\" },\n { name: \"Checkbox\", id: \"checkbox\" },\n { name: \"Switch\", id: \"switch\" }\n ]\n },\n \"Data Display\": {\n icon: <BarChart3 className=\"h-4 w-4\" />,\n components: [\n { name: \"Card\", id: \"card\" },\n { name: \"Badge\", id: \"badge\" },\n { name: \"Avatar\", id: \"avatar\" },\n { name: \"StatsCard\", id: \"statscard\" },\n { name: \"Tabs\", id: \"tabs\" },\n { name: \"DataTable\", id: \"datatable\" }\n ]\n },\n Feedback: {\n icon: <AlertCircle className=\"h-4 w-4\" />,\n components: [\n { name: \"Alert\", id: \"alert\" },\n { name: \"Toast\", id: \"toast\" },\n { name: \"Modal\", id: \"modal\" },\n { name: \"Spinner\", id: \"spinner\" },\n { name: \"Skeleton\", id: \"skeleton\" }\n ]\n },\n Authentication: {\n icon: <Shield className=\"h-4 w-4\" />,\n components: [\n { name: \"Auth System\", id: \"auth\" },\n { name: \"Login Page\", id: \"login\" },\n { name: \"Signup Page\", id: \"signup\" },\n { name: \"Password Reset\", id: \"password-reset\" },\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\n ]\n },\n Layout: {\n icon: <Layout className=\"h-4 w-4\" />,\n components: [\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n { name: \"Page Layout\", id: \"page-layout\" },\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n { name: \"Sidebar\", id: \"sidebar\" },\n { name: \"Navbar\", id: \"navbar\" }\n ]\n }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n name: string;\n type: string;\n default?: string;\n description?: string;\n required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\n const [activeTab, setActiveTab] = useState<\"preview\" \| \"code\" \| \"props\">(\"preview\");\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n const [viewMode, setViewMode] = useState<\"desktop\" \| \"tablet\" \| \"mobile\">(\"desktop\");\n const [darkMode, setDarkMode] = useState(false);\n const [copiedCode, setCopiedCode] = useState<string \| null>(null);\n const sidebarRef = useRef<HTMLDivElement \| null>(null);\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n const toggleCategory = (category: string) => {\n setExpandedCategories((prev) =>\n prev.includes(category)\n ? prev.filter((c) => c !== category)\n : [...prev, category]\n );\n };\n\n const flatComponents = useMemo(() => {\n return Object.values(componentCategories).flatMap((category) =>\n category.components.map((component) => component.id)\n );\n }, []);\n\n useEffect(() => {\n if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n '[data-component-id]'\n );\n const target = buttons[focusedIndex];\n if (target) {\n target.focus();\n }\n }\n }, [focusedIndex, sidebarCollapsed]);\n\n const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (sidebarCollapsed) return;\n\n const currentIndex = flatComponents.indexOf(selectedComponent);\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n setFocusedIndex(nextIndex);\n setSelectedComponent(flatComponents[nextIndex]);\n } else if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n setFocusedIndex(prevIndex);\n setSelectedComponent(flatComponents[prevIndex]);\n }\n };\n\n const copyToClipboard = async (code: string) => {\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success(\"Code copied to clipboard!\");\n setTimeout(() => setCopiedCode(null), 2000);\n } else {\n throw new Error(\"Clipboard API unavailable\");\n }\n } catch (err) {\n showToast.error(\"Failed to copy code\");\n }\n };\n\n const filteredCategories = Object.entries(componentCategories).reduce(\n (acc, [categoryName, categoryData]) => {\n const filteredComponents = categoryData.components.filter((component) =>\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n if (filteredComponents.length > 0) {\n (acc as any)[categoryName] = {\n ...categoryData,\n components: filteredComponents\n };\n }\n\n return acc;\n },\n {} as Partial<typeof componentCategories>\n );\n\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n const currentExample = currentDoc?.example ?? '';\n const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n const getViewportClass = () => {\n switch (viewMode) {\n case \"tablet\":\n return \"max-w-2xl\";\n case \"mobile\":\n return \"max-w-sm\";\n default:\n return \"w-full\";\n }\n };\n\n return (\n <div className={cn(\"flex h-screen bg-gray-50\", className)}>\n <Toast />\n\n {/* Sidebar /}\n <div\n ref={sidebarRef}\n className={cn(\n \"bg-white border-r border-gray-200 transition-all duration-300 flex flex-col\",\n sidebarCollapsed ? \"w-16\" : \"w-80\"\n )}\n tabIndex={sidebarCollapsed ? -1 : 0}\n onKeyDown={handleKeyNavigation}\n aria-label=\"Component navigation\"\n >\n {/ Sidebar Header /}\n <div className=\"p-4 border-b border-gray-200\">\n {!sidebarCollapsed && (\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center space-x-2\">\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n <Palette className=\"h-4 w-4 text-white\" />\n </div>\n <span className=\"font-bold text-lg text-gray-900\">Beyond UI</span>\n </div>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(true)}\n >\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n </div>\n )}\n\n {sidebarCollapsed && (\n <div className=\"flex justify-center\">\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(false)}\n >\n <Palette className=\"h-4 w-4\" />\n </Button>\n </div>\n )}\n\n {!sidebarCollapsed && (\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n <Input\n placeholder=\"Search components...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"pl-10\"\n />\n </div>\n )}\n </div>\n\n {/ Navigation /}\n <nav className=\"flex-1 p-4 overflow-y-auto\">\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n <div key={categoryName} className=\"mb-4\">\n <button\n onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\n className={cn(\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n \"hover:bg-gray-100 text-gray-700\",\n sidebarCollapsed ? \"justify-center\" : \"justify-between\"\n )}\n >\n <div className=\"flex items-center space-x-2\">\n {categoryData.icon}\n {!sidebarCollapsed && <span>{categoryName}</span>}\n </div>\n {!sidebarCollapsed && (\n <ChevronDown\n className={cn(\n \"h-4 w-4 transition-transform\",\n expandedCategories.includes(categoryName) && \"rotate-180\"\n )}\n />\n )}\n </button>\n\n {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\n <div className=\"mt-2 ml-6 space-y-1\">\n {categoryData.components.map((component) => {\n const isActive = selectedComponent === component.id;\n return (\n <button\n key={component.id}\n data-component-id={component.id}\n onClick={() => {\n setSelectedComponent(component.id);\n setFocusedIndex(flatComponents.indexOf(component.id));\n }}\n className={cn(\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n isActive\n ? \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\"\n : \"text-gray-600 hover:bg-gray-50 hover:text-gray-900\"\n )}\n aria-current={isActive ? \"page\" : undefined}\n >\n {component.name}\n </button>\n );\n })}\n </div>\n )}\n </div>\n ))}\n </nav>\n </div>\n\n {/ Main Content /}\n <div className=\"flex-1 flex flex-col overflow-hidden\">\n {/ Header /}\n <header className=\"bg-white border-b border-gray-200 p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center space-x-4\">\n <h1 className=\"text-2xl font-bold text-gray-900\">\n {currentDoc?.name \|\| \"Component Showcase\"}\n </h1>\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n </div>\n\n <div className=\"flex items-center space-x-2\">\n {/ Viewport Controls /}\n <div className=\"flex items-center bg-gray-100 rounded-lg p-1\">\n <Button\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"desktop\")}\n >\n <Monitor className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"tablet\")}\n >\n <Tablet className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"mobile\")}\n >\n <Smartphone className=\"h-4 w-4\" />\n </Button>\n </div>\n\n {/ Dark Mode Toggle /}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setDarkMode(!darkMode)}\n >\n {darkMode ? (\n <Sun className=\"h-4 w-4\" />\n ) : (\n <Moon className=\"h-4 w-4\" />\n )}\n </Button>\n </div>\n </div>\n </header>\n\n {/ Content /}\n <main className=\"flex-1 overflow-auto p-6\">\n {currentDoc ? (\n <div className=\"max-w-6xl mx-auto space-y-8\">\n {/ Description /}\n <div>\n <p className=\"text-lg text-gray-600\">{currentDoc.description}</p>\n </div>\n\n {/ Tabs /}\n <div>\n <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n <Button\n variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"preview\")}\n role=\"tab\"\n aria-selected={activeTab === \"preview\"}\n >\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </Button>\n <Button\n variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"code\")}\n role=\"tab\"\n aria-selected={activeTab === \"code\"}\n >\n <Code className=\"h-4 w-4 mr-2\" />\n Code\n </Button>\n <Button\n variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"props\")}\n role=\"tab\"\n aria-selected={activeTab === \"props\"}\n >\n <Settings className=\"h-4 w-4 mr-2\" />\n Props\n </Button>\n </div>\n <div>\n <div className=\"mt-6\">\n <div className=\"bg-white rounded-lg shadow p-6\">\n {/ Preview */}\n <div\n className={cn(\n \"mx-auto transition-all duration-300\",\n getViewportClass()\n )}\n >\n <div className={cn(darkMode && \"dark\")}>\n {showcaseRegistry[selectedComponent]\n ? React.createElement(\n showcaseRegistry[selectedComponent]\n )\n : null}\n </div>\n </div>\n </div>\n </div>\n\n {activeTab === \"code\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n <div className=\"bg-white rounded-lg shadow p-6\">\n <div className=\"flex flex-row items-center justify-between\">\n <h2 className=\"text-lg font-semibold mb-0\">\n Usage Example\n </h2>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(currentExample)}\n >\n {copiedCode === currentExample ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy\n </Button>\n </div>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n <code>{currentExample}</code>\n </pre>\n </div>\n </div>\n )}\n\n {activeTab === \"props\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n <div className=\"bg-white rounded-lg shadow p-6\">\n <h2 className=\"text-lg font-semibold mb-4\">\n Component Props\n </h2>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full border-collapse\">\n <thead>\n <tr className=\"border-b border-gray-200\">\n <th className=\"text-left p-3 font-medium text-gray-900\">\n Prop\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900\">\n Type\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900\">\n Default\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900\">\n Description\n </th>\n </tr>\n </thead>\n <tbody>\n {currentProps.length > 0 ? (\n currentProps.map((prop: PropDoc, index) => (\n <tr key={prop.name ?? index} className=\"border-b border-gray-100\">\n <td className=\"p-3\">\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\n {prop.name}\n </code>\n {prop.required && (\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n Required\n </Badge>\n )}\n </td>\n <td className=\"p-3 text-gray-600\">{prop.type}</td>\n <td className=\"p-3 text-gray-600\">\n {prop.default ? (\n <code className=\"bg-gray-100 px-2 py-1 rounded text-sm\">\n {prop.default}\n </code>\n ) : null}\n </td>\n <td className=\"p-3 text-gray-600\">{prop.description}</td>\n </tr>\n ))\n ) : (\n <tr>\n <td colSpan={4} className=\"p-4 text-center text-gray-500\">\n No props documented for this component yet.\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"text-center\">\n <Book className=\"h-16 w-16 text-gray-400 mx-auto mb-4\" />\n <h2 className=\"text-xl font-semibold text-gray-900 mb-2\">\n Select a Component\n </h2>\n <p className=\"text-gray-600\">\n Choose a component from the sidebar to view its documentation and examples.\n </p>\n </div>\n </div>\n )}\n </main>\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"ComponentShowcase.js","sources":["../../../src/components/ComponentShowcase/ComponentShowcase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useMemo, useRef, useEffect } from \"react\";\nimport {\n Search,\n Copy,\n Check,\n Monitor,\n Tablet,\n Smartphone,\n Sun,\n Moon,\n ChevronRight,\n ChevronDown,\n Code,\n Eye,\n Book,\n Palette,\n Layout,\n MousePointer,\n AlertCircle,\n BarChart3,\n Settings,\n Shield\n} from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../Button\";\nimport { Input } from \"../Input\";\nimport { Badge } from \"../Badge\";\nimport { Toast, showToast } from \"../Toast\";\n\nimport { showcaseRegistry } from \"./showcaseRegistry\";\nimport { componentDocs } from \"./componentDocs\";\n\n// Component categories and their items\nconst componentCategories = {\n Forms: {\n icon: <MousePointer className=\"h-4 w-4\" />,\n components: [\n { name: \"Button\", id: \"button\" },\n { name: \"Input\", id: \"input\" },\n { name: \"Textarea\", id: \"textarea\" },\n { name: \"Checkbox\", id: \"checkbox\" },\n { name: \"Switch\", id: \"switch\" }\n ]\n },\n \"Data Display\": {\n icon: <BarChart3 className=\"h-4 w-4\" />,\n components: [\n { name: \"Card\", id: \"card\" },\n { name: \"Badge\", id: \"badge\" },\n { name: \"Avatar\", id: \"avatar\" },\n { name: \"StatsCard\", id: \"statscard\" },\n { name: \"Tabs\", id: \"tabs\" },\n { name: \"DataTable\", id: \"datatable\" }\n ]\n },\n Feedback: {\n icon: <AlertCircle className=\"h-4 w-4\" />,\n components: [\n { name: \"Alert\", id: \"alert\" },\n { name: \"Toast\", id: \"toast\" },\n { name: \"Modal\", id: \"modal\" },\n { name: \"Spinner\", id: \"spinner\" },\n { name: \"Skeleton\", id: \"skeleton\" }\n ]\n },\n Authentication: {\n icon: <Shield className=\"h-4 w-4\" />,\n components: [\n { name: \"Auth System\", id: \"auth\" },\n { name: \"Login Page\", id: \"login\" },\n { name: \"Signup Page\", id: \"signup\" },\n { name: \"Password Reset\", id: \"password-reset\" },\n { name: \"!isAuthenticated Shield\", id: \"shield\" },\n ]\n },\n Layout: {\n icon: <Layout className=\"h-4 w-4\" />,\n components: [\n { name: \"DashboardLayout\", id: \"dashboard-layout\" },\n { name: \"Page Layout\", id: \"page-layout\" },\n { name: \"DashboardGrid\", id: \"dashboard-grid\" },\n { name: \"Sidebar\", id: \"sidebar\" },\n { name: \"Navbar\", id: \"navbar\" }\n ]\n }\n};\n\n// Prop documentation interface\ninterface PropDoc {\n name: string;\n type: string;\n default?: string;\n description?: string;\n required?: boolean;\n}\n\n// Props\ninterface ComponentShowcaseProps {\n className?: string;\n}\n\nexport const ComponentShowcase: React.FC<ComponentShowcaseProps> = ({ className }) => {\n const [selectedComponent, setSelectedComponent] = useState(\"button\");\n const [activeTab, setActiveTab] = useState<\"preview\" \| \"code\" \| \"props\">(\"preview\");\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n const [viewMode, setViewMode] = useState<\"desktop\" \| \"tablet\" \| \"mobile\">(\"desktop\");\n const [darkMode, setDarkMode] = useState(false);\n const [copiedCode, setCopiedCode] = useState<string \| null>(null);\n const sidebarRef = useRef<HTMLDivElement \| null>(null);\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n const toggleCategory = (category: string) => {\n setExpandedCategories((prev) =>\n prev.includes(category)\n ? prev.filter((c) => c !== category)\n : [...prev, category]\n );\n };\n\n const flatComponents = useMemo(() => {\n return Object.values(componentCategories).flatMap((category) =>\n category.components.map((component) => component.id)\n );\n }, []);\n\n useEffect(() => {\n if (focusedIndex >= 0 && sidebarRef.current && !sidebarCollapsed) {\n const buttons = sidebarRef.current.querySelectorAll<HTMLButtonElement>(\n '[data-component-id]'\n );\n const target = buttons[focusedIndex];\n if (target) {\n target.focus();\n }\n }\n }, [focusedIndex, sidebarCollapsed]);\n\n const handleKeyNavigation = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (sidebarCollapsed) return;\n\n const currentIndex = flatComponents.indexOf(selectedComponent);\n\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') {\n event.preventDefault();\n const nextIndex = currentIndex === flatComponents.length - 1 ? 0 : currentIndex + 1;\n setFocusedIndex(nextIndex);\n setSelectedComponent(flatComponents[nextIndex]);\n } else if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n event.preventDefault();\n const prevIndex = currentIndex <= 0 ? flatComponents.length - 1 : currentIndex - 1;\n setFocusedIndex(prevIndex);\n setSelectedComponent(flatComponents[prevIndex]);\n }\n };\n\n const copyToClipboard = async (code: string) => {\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(code);\n setCopiedCode(code);\n showToast.success(\"Code copied to clipboard!\");\n setTimeout(() => setCopiedCode(null), 2000);\n } else {\n throw new Error(\"Clipboard API unavailable\");\n }\n } catch (err) {\n showToast.error(\"Failed to copy code\");\n }\n };\n\n const filteredCategories = Object.entries(componentCategories).reduce(\n (acc, [categoryName, categoryData]) => {\n const filteredComponents = categoryData.components.filter((component) =>\n component.name.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n if (filteredComponents.length > 0) {\n (acc as any)[categoryName] = {\n ...categoryData,\n components: filteredComponents\n };\n }\n\n return acc;\n },\n {} as Partial<typeof componentCategories>\n );\n\n const currentDoc = componentDocs[selectedComponent as keyof typeof componentDocs];\n const currentExample = currentDoc?.example ?? '';\n const currentProps = (currentDoc?.props ?? []) as PropDoc[];\n\n const getViewportClass = () => {\n switch (viewMode) {\n case \"tablet\":\n return \"max-w-2xl\";\n case \"mobile\":\n return \"max-w-sm\";\n default:\n return \"w-full\";\n }\n };\n\n return (\n <div className={cn(\"flex h-screen bg-gray-50 dark:bg-gray-950\", darkMode && \"dark\", className)}>\n <Toast />\n\n {/* Sidebar /}\n <div\n ref={sidebarRef}\n className={cn(\n \"bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-all duration-300 flex flex-col\",\n sidebarCollapsed ? \"w-16\" : \"w-80\"\n )}\n tabIndex={sidebarCollapsed ? -1 : 0}\n onKeyDown={handleKeyNavigation}\n aria-label=\"Component navigation\"\n >\n {/ Sidebar Header /}\n <div className=\"p-4 border-b border-gray-200 dark:border-gray-800\">\n {!sidebarCollapsed && (\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center space-x-2\">\n <div className=\"w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center\">\n <Palette className=\"h-4 w-4 text-white\" />\n </div>\n <span className=\"font-bold text-lg text-gray-900 dark:text-white\">Beyond UI</span>\n </div>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(true)}\n >\n <ChevronRight className=\"h-4 w-4\" />\n </Button>\n </div>\n )}\n\n {sidebarCollapsed && (\n <div className=\"flex justify-center\">\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setSidebarCollapsed(false)}\n >\n <Palette className=\"h-4 w-4\" />\n </Button>\n </div>\n )}\n\n {!sidebarCollapsed && (\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500\" />\n <Input\n placeholder=\"Search components...\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n className=\"pl-10\"\n />\n </div>\n )}\n </div>\n\n {/ Navigation /}\n <nav className=\"flex-1 p-4 overflow-y-auto\">\n {Object.entries(filteredCategories).map(([categoryName, categoryData]) => (\n <div key={categoryName} className=\"mb-4\">\n <button\n onClick={() => !sidebarCollapsed && toggleCategory(categoryName)}\n className={cn(\n \"flex items-center w-full p-2 text-sm font-medium rounded-lg transition-colors\",\n \"hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300\",\n sidebarCollapsed ? \"justify-center\" : \"justify-between\"\n )}\n >\n <div className=\"flex items-center space-x-2\">\n {categoryData.icon}\n {!sidebarCollapsed && <span>{categoryName}</span>}\n </div>\n {!sidebarCollapsed && (\n <ChevronDown\n className={cn(\n \"h-4 w-4 transition-transform\",\n expandedCategories.includes(categoryName) && \"rotate-180\"\n )}\n />\n )}\n </button>\n\n {!sidebarCollapsed && expandedCategories.includes(categoryName) && (\n <div className=\"mt-2 ml-6 space-y-1\">\n {categoryData.components.map((component) => {\n const isActive = selectedComponent === component.id;\n return (\n <button\n key={component.id}\n data-component-id={component.id}\n onClick={() => {\n setSelectedComponent(component.id);\n setFocusedIndex(flatComponents.indexOf(component.id));\n }}\n className={cn(\n \"flex items-center w-full p-2 text-sm rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500\",\n isActive\n ? \"bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border-r-2 border-primary-600 dark:border-primary-500\"\n : \"text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 hover:text-gray-900 dark:hover:text-white\"\n )}\n aria-current={isActive ? \"page\" : undefined}\n >\n {component.name}\n </button>\n );\n })}\n </div>\n )}\n </div>\n ))}\n </nav>\n </div>\n\n {/ Main Content /}\n <div className=\"flex-1 flex flex-col overflow-hidden\">\n {/ Header /}\n <header className=\"bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center space-x-4\">\n <h1 className=\"text-2xl font-bold text-gray-900 dark:text-white\">\n {currentDoc?.name \|\| \"Component Showcase\"}\n </h1>\n {currentDoc && <Badge variant=\"outline\">{currentDoc.name}</Badge>}\n </div>\n\n <div className=\"flex items-center space-x-2\">\n {/ Viewport Controls /}\n <div className=\"flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-1\">\n <Button\n variant={viewMode === \"desktop\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"desktop\")}\n >\n <Monitor className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"tablet\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"tablet\")}\n >\n <Tablet className=\"h-4 w-4\" />\n </Button>\n <Button\n variant={viewMode === \"mobile\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setViewMode(\"mobile\")}\n >\n <Smartphone className=\"h-4 w-4\" />\n </Button>\n </div>\n\n {/ Dark Mode Toggle /}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setDarkMode(!darkMode)}\n >\n {darkMode ? (\n <Sun className=\"h-4 w-4\" />\n ) : (\n <Moon className=\"h-4 w-4\" />\n )}\n </Button>\n </div>\n </div>\n </header>\n\n {/ Content /}\n <main className=\"flex-1 overflow-auto p-6\">\n {currentDoc ? (\n <div className=\"max-w-6xl mx-auto space-y-8\">\n {/ Description /}\n <div>\n <p className=\"text-lg text-gray-600 dark:text-gray-400\">{currentDoc.description}</p>\n </div>\n\n {/ Tabs /}\n <div>\n <div className=\"flex gap-3 mb-4\" role=\"tablist\" aria-label=\"Component details tabs\">\n <Button\n variant={activeTab === \"preview\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"preview\")}\n role=\"tab\"\n aria-selected={activeTab === \"preview\"}\n >\n <Eye className=\"h-4 w-4 mr-2\" />\n Preview\n </Button>\n <Button\n variant={activeTab === \"code\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"code\")}\n role=\"tab\"\n aria-selected={activeTab === \"code\"}\n >\n <Code className=\"h-4 w-4 mr-2\" />\n Code\n </Button>\n <Button\n variant={activeTab === \"props\" ? \"primary\" : \"ghost\"}\n size=\"sm\"\n onClick={() => setActiveTab(\"props\")}\n role=\"tab\"\n aria-selected={activeTab === \"props\"}\n >\n <Settings className=\"h-4 w-4 mr-2\" />\n Props\n </Button>\n </div>\n <div>\n <div className=\"mt-6\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n {/ Preview */}\n <div\n className={cn(\n \"mx-auto transition-all duration-300\",\n getViewportClass()\n )}\n >\n <div>\n {showcaseRegistry[selectedComponent]\n ? React.createElement(\n showcaseRegistry[selectedComponent]\n )\n : null}\n </div>\n </div>\n </div>\n </div>\n\n {activeTab === \"code\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Code example\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n <div className=\"flex flex-row items-center justify-between\">\n <h2 className=\"text-lg font-semibold mb-0 dark:text-white\">\n Usage Example\n </h2>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => copyToClipboard(currentExample)}\n >\n {copiedCode === currentExample ? (\n <Check className=\"h-4 w-4 mr-2\" />\n ) : (\n <Copy className=\"h-4 w-4 mr-2\" />\n )}\n Copy\n </Button>\n </div>\n <pre className=\"bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto\">\n <code>{currentExample}</code>\n </pre>\n </div>\n </div>\n )}\n\n {activeTab === \"props\" && (\n <div className=\"mt-6\" role=\"tabpanel\" aria-label=\"Component props\">\n <div className=\"bg-white dark:bg-gray-900 rounded-lg shadow p-6\">\n <h2 className=\"text-lg font-semibold mb-4 dark:text-white\">\n Component Props\n </h2>\n <div className=\"overflow-x-auto\">\n <table className=\"w-full border-collapse\">\n <thead>\n <tr className=\"border-b border-gray-200 dark:border-gray-800\">\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Prop\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Type\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Default\n </th>\n <th className=\"text-left p-3 font-medium text-gray-900 dark:text-gray-100\">\n Description\n </th>\n </tr>\n </thead>\n <tbody>\n {currentProps.length > 0 ? (\n currentProps.map((prop: PropDoc, index) => (\n <tr key={prop.name ?? index} className=\"border-b border-gray-100 dark:border-gray-800/50\">\n <td className=\"p-3\">\n <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n {prop.name}\n </code>\n {prop.required && (\n <Badge variant=\"danger\" className=\"ml-2 text-xs\">\n Required\n </Badge>\n )}\n </td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.type}</td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">\n {prop.default ? (\n <code className=\"bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm dark:text-gray-300\">\n {prop.default}\n </code>\n ) : null}\n </td>\n <td className=\"p-3 text-gray-600 dark:text-gray-400\">{prop.description}</td>\n </tr>\n ))\n ) : (\n <tr>\n <td colSpan={4} className=\"p-4 text-center text-gray-500 dark:text-gray-400\">\n No props documented for this component yet.\n </td>\n </tr>\n )}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"flex items-center justify-center h-full\">\n <div className=\"text-center\">\n <Book className=\"h-16 w-16 text-gray-400 dark:text-gray-600 mx-auto mb-4\" />\n <h2 className=\"text-xl font-semibold text-gray-900 dark:text-white mb-2\">\n Select a Component\n </h2>\n <p className=\"text-gray-600 dark:text-gray-400\">\n Choose a component from the sidebar to view its documentation and examples.\n </p>\n </div>\n </div>\n )}\n </main>\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/DashboardGrid/DashboardGrid.example.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { DashboardGrid } from './DashboardGrid.js';
-const DashboardGridExample = () => (jsxs(DashboardGrid, { children: [jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 1" }), jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 2" }), jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 3" }), jsx("div", { className: "p-4 bg-gray-100 rounded", children: "Widget 4" })] }));
+const DashboardGridExample = () => (jsxs(DashboardGrid, { children: [jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 1" }), jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 2" }), jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 3" }), jsx("div", { className: "p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded", children: "Widget 4" })] }));
 export { DashboardGridExample };
 //# sourceMappingURL=DashboardGrid.example.js.map

package/dist/components/DashboardGrid/DashboardGrid.example.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardGrid.example.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardGrid } from \"./DashboardGrid\";\n\nexport const DashboardGridExample: React.FC = () => (\n <DashboardGrid>\n <div className=\"p-4 bg-gray-100 rounded\">Widget 1</div>\n <div className=\"p-4 bg-gray-100 rounded\">Widget 2</div>\n <div className=\"p-4 bg-gray-100 rounded\">Widget 3</div>\n <div className=\"p-4 bg-gray-100 rounded\">Widget 4</div>\n </DashboardGrid>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,oBAAoB,GAAa,OAC5CA,IAAA,CAAC,aAAa,eACZC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,~~yBAAyB~~,yBAAe,~~EACvDA~~,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,~~yBAAyB~~,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,~~EACvDA~~,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,~~yBAAyB~~,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,~~EACvDA~~,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,~~yBAAyB~~,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,CAAA,EAAA,~~CACzC~~;;;;"}
1	+ {"version":3,"file":"DashboardGrid.example.js","sources":["../../../src/components/DashboardGrid/DashboardGrid.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardGrid } from \"./DashboardGrid\";\n\nexport const DashboardGridExample: React.FC = () => (\n <DashboardGrid>\n <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 1</div>\n <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 2</div>\n <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 3</div>\n <div className=\"p-4 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded\">Widget 4</div>\n </DashboardGrid>\n);"],"names":["_jsxs","_jsx"],"mappings":";;;AAGO,MAAM,oBAAoB,GAAa,OAC5CA,IAAA,CAAC,aAAa,eACZC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,yBAAe,EACzGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACzGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,EACzGA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2EAA2E,EAAA,QAAA,EAAA,UAAA,EAAA,CAAe,CAAA,EAAA,CAC3F;;;;"}

package/dist/components/DashboardLayout/DashboardLayout.example.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { DashboardLayout } from './DashboardLayout.js';
-const DashboardLayoutExample = () => (jsx(DashboardLayout, { sidebarTitle: "Mazao", sidebarTitleLetter: "A", children: jsx("div", { className: "p-4", children: "This is the dashboard content area." }) }));
+const DashboardLayoutExample = () => (jsx(DashboardLayout, { sidebarTitle: "Mazao", sidebarTitleLetter: "A", children: jsx("div", { className: "p-4 text-gray-900 dark:text-gray-100", children: "This is the dashboard content area." }) }));
 export { DashboardLayoutExample };
 //# sourceMappingURL=DashboardLayout.example.js.map

package/dist/components/DashboardLayout/DashboardLayout.example.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardLayout.example.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardLayout } from \"./DashboardLayout\";\n\nexport const DashboardLayoutExample: React.FC = () => (\n <DashboardLayout sidebarTitle=\"Mazao\" sidebarTitleLetter=\"A\">\n <div className=\"p-4\">This is the dashboard content area.</div>\n </DashboardLayout>\n);"],"names":["_jsx"],"mappings":";;;AAGO,MAAM,sBAAsB,GAAa,OAC9CA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAC,OAAO,EAAC,kBAAkB,EAAC,GAAG,EAAA,QAAA,EAC1DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,~~KAAK~~,EAAA,QAAA,EAAA,qCAAA,EAAA,CAA0C,EAAA,~~CAC9C~~;;;;"}
1	+ {"version":3,"file":"DashboardLayout.example.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.example.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DashboardLayout } from \"./DashboardLayout\";\n\nexport const DashboardLayoutExample: React.FC = () => (\n <DashboardLayout sidebarTitle=\"Mazao\" sidebarTitleLetter=\"A\">\n <div className=\"p-4 text-gray-900 dark:text-gray-100\">This is the dashboard content area.</div>\n </DashboardLayout>\n);"],"names":["_jsx"],"mappings":";;;AAGO,MAAM,sBAAsB,GAAa,OAC9CA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAC,OAAO,EAAC,kBAAkB,EAAC,GAAG,EAAA,QAAA,EAC1DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,qCAAA,EAAA,CAA0C,EAAA,CAC/E;;;;"}

package/dist/components/DataTable/DataTable.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
+import * as React from "react";
 import type { DataTableProps } from "./DataTable.types";
 export declare const DataTable: {
-    <T extends Record<string, any>>({ columns, dataSource, loading, rowKey, pagination, rowSelection, size, bordered, showHeader, title, footer, className, onSort, onFilter, onChange, ...props }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends Record<string, any>>({ columns, dataSource, loading, rowKey, pagination, rowSelection, size, bordered, showHeader, title, footer, className, onSort, onFilter, onChange, emptyLabel, ...props }: DataTableProps<T> & {
+        emptyLabel?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/DataTable/DataTable.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
 import { useState, useCallback, useMemo } from 'react';
 import { ChevronUp, ChevronDown, Filter, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
 import { cva } from 'class-variance-authority';
@@ -98,10 +99,23 @@ const TablePagination = ({ pagination, onChange }) => {
     }));
     return (jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800", children: [jsxs("div", { className: "flex items-center space-x-4", children: [jsxs("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: ["Showing ", startRecord, " to ", endRecord, " of ", total, " results"] }), showSizeChanger && (jsxs("div", { className: "flex items-center space-x-2", children: [jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "Show" }), jsx(Select, { options: selectOptions, value: String(pageSize), onChange: e => onChange(1, Number(e.target.value)), variant: "default", selectSize: "sm", "aria-label": "Select number of items per page" }), jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: "per page" })] }))] }), jsxs("div", { className: "flex items-center space-x-1", children: [jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(1, pageSize), disabled: current === 1, "aria-label": "First page", children: jsx(ChevronsLeft, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(current - 1, pageSize), disabled: current === 1, "aria-label": "Previous page", children: jsx(ChevronLeft, { className: "h-4 w-4" }) }), getPageNumbers().map(page => (jsx(Button, { variant: current === page ? "primary" : "ghost", size: "sm", onClick: () => onChange(page, pageSize), className: "min-w-[32px]", "aria-label": `Go to page ${page}`, children: page }, page))), jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(current + 1, pageSize), disabled: current === totalPages, "aria-label": "Next page", children: jsx(ChevronRight, { className: "h-4 w-4" }) }), jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(totalPages, pageSize), disabled: current === totalPages, "aria-label": "Last page", children: jsx(ChevronsRight, { className: "h-4 w-4" }) })] })] }));
 };
-const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagination = { current: 1, pageSize: 10, total: 0 }, rowSelection, size = 'middle', bordered = false, showHeader = true, title, footer, className, onSort, onFilter, onChange, ...props }) => {
+const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagination = { current: 1, pageSize: 10, total: 0 }, rowSelection, size = 'middle', bordered = false, showHeader = true, title, footer, className, onSort, onFilter, onChange, emptyLabel = 'No data available', ...props }) => {
     const [sortConfig, setSortConfig] = useState({ key: '', direction: null });
     const [filters, setFilters] = useState({});
     const [selectedRowKeys, setSelectedRowKeys] = useState(rowSelection?.selectedRowKeys || []);
+    const [internalPage, setInternalPage] = useState(pagination && typeof pagination === 'object' && pagination.current ? pagination.current : 1);
+    const [internalPageSize, setInternalPageSize] = useState(pagination && typeof pagination === 'object' && pagination.pageSize ? pagination.pageSize : 10);
+    React.useEffect(() => {
+        if (pagination && typeof pagination === 'object') {
+            if (pagination.current)
+                setInternalPage(pagination.current);
+            if (pagination.pageSize)
+                setInternalPageSize(pagination.pageSize);
+        }
+    }, [
+        pagination && typeof pagination === 'object' ? pagination.current : undefined,
+        pagination && typeof pagination === 'object' ? pagination.pageSize : undefined
+    ]);
     // Get row key function
     const getRowKey = useCallback((record, index) => {
         if (typeof rowKey === 'function') {
@@ -199,21 +213,22 @@ const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagina
     }, [dataSource, filters, sortConfig]);
     // Pagination logic
     const paginatedData = useMemo(() => {
-        if (!pagination)
+        if (pagination === false)
             return processedData;
-        const { current, pageSize } = pagination;
-        const startIndex = (current - 1) * pageSize;
-        return processedData.slice(startIndex, startIndex + pageSize);
-    }, [processedData, pagination]);
+        const startIndex = (internalPage - 1) * internalPageSize;
+        return processedData.slice(startIndex, startIndex + internalPageSize);
+    }, [processedData, pagination, internalPage, internalPageSize]);
     // Update pagination total
     const currentPagination = useMemo(() => {
-        if (!pagination)
+        if (pagination === false)
             return false;
         return {
-            ...pagination,
+            ...(typeof pagination === 'object' ? pagination : {}),
+            current: internalPage,
+            pageSize: internalPageSize,
             total: processedData.length,
         };
-    }, [pagination, processedData.length]);
+    }, [pagination, internalPage, internalPageSize, processedData.length]);
     // Selection state
     const isAllSelected = selectedRowKeys.length === dataSource.length && dataSource.length > 0;
     const isIndeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length;
@@ -222,7 +237,7 @@ const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagina
     if (loading) {
         return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsx("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden", children: jsx("div", { className: "p-4 space-y-3", children: Array.from({ length: 5 }).map((_, i) => (jsxs("div", { className: "flex space-x-4", children: [jsx(Skeleton, { className: "h-4 w-8" }), jsx(Skeleton, { className: "h-4 flex-1" }), jsx(Skeleton, { className: "h-4 w-24" }), jsx(Skeleton, { className: "h-4 w-16" })] }, i))) }) })] }));
     }
-    return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsxs("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden", children: [isBelow('md') ? (jsx("div", { className: "space-y-4 p-2", children: paginatedData.length === 0 ? (jsxs("div", { className: "text-gray-500 dark:text-gray-400 text-center py-8", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] })) : (paginatedData.map((record, index) => {
+    return (jsxs("div", { className: cn("w-full", className), children: [title && jsx("div", { className: "mb-4", children: title() }), jsxs("div", { className: "border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden", children: [isBelow('md') ? (jsx("div", { className: "space-y-4 p-2", children: paginatedData.length === 0 ? (jsxs("div", { className: "text-gray-500 dark:text-gray-400 text-center py-8", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: emptyLabel })] })) : (paginatedData.map((record, index) => {
                             const key = getRowKey(record, index);
                             const isSelected = selectedRowKeys.includes(key);
                             return (jsx(Card, { variant: isSelected ? "elevated" : "default", padding: "sm", className: cn("transition-shadow", isSelected && "border-primary-600 shadow-lg"), children: jsxs(CardContent, { className: "space-y-2", children: [rowSelection && (jsxs("div", { className: "flex items-center mb-2", children: [jsx(Checkbox, { checked: isSelected, onChange: (e) => handleRowSelect(record, e.target.checked), ...rowSelection.getCheckboxProps?.(record) }), jsx("span", { className: "ml-2 text-xs text-gray-500", children: "Select" })] })), columns.map((column) => (jsxs("div", { className: "flex justify-between items-center py-1 border-b border-gray-200 dark:border-gray-800 last:border-b-0", children: [jsx("span", { className: "font-medium text-gray-700 dark:text-gray-300", children: column.title }), jsx("span", { className: "text-gray-900 dark:text-gray-100", children: column.render
@@ -238,7 +253,7 @@ const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagina
                                                                                 ? "text-primary-600"
                                                                                 : "text-gray-400 dark:text-gray-500") }), jsx(ChevronDown, { className: cn("h-3 w-3 -mt-1", sortConfig.key === column.key && sortConfig.direction === 'desc'
                                                                                 ? "text-primary-600"
-                                                                                : "text-gray-400 dark:text-gray-500") })] }))] }), jsx(ColumnFilter, { column: column, value: filters[column.key], onChange: (value) => handleFilter(column.key, value) })] }) }, column.key)))] }) })), jsx("tbody", { children: paginatedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (rowSelection ? 1 : 0), className: cn(cellVariants({ size, align: "center" }), "py-8"), children: jsxs("div", { className: "text-gray-500", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: "No data available" })] }) }) })) : (paginatedData.map((record, index) => {
+                                                                                : "text-gray-400 dark:text-gray-500") })] }))] }), jsx(ColumnFilter, { column: column, value: filters[column.key], onChange: (value) => handleFilter(column.key, value) })] }) }, column.key)))] }) })), jsx("tbody", { children: paginatedData.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (rowSelection ? 1 : 0), className: cn(cellVariants({ size, align: "center" }), "py-8"), children: jsxs("div", { className: "text-gray-500", children: [jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCCB" }), jsx("div", { children: emptyLabel })] }) }) })) : (paginatedData.map((record, index) => {
                                         const key = getRowKey(record, index);
                                         const isSelected = selectedRowKeys.includes(key);
                                         return (jsxs("tr", { className: cn("hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors", isSelected && "bg-primary-50 dark:bg-primary-900/20"), ...(props.onRow?.(record, index) ?? {}), children: [rowSelection && (jsx("td", { className: cn(cellVariants({ size })), children: jsx(Checkbox, { checked: isSelected, onChange: (e) => handleRowSelect(record, e.target.checked), ...rowSelection.getCheckboxProps?.(record) }) })), columns.map((column) => (jsx("td", { className: cn(cellVariants({
@@ -247,8 +262,10 @@ const DataTable = ({ columns, dataSource, loading = false, rowKey = 'id', pagina
                                                     })), children: column.render
                                                         ? column.render(record[column.dataIndex], record, index)
                                                         : String(record[column.dataIndex] || '') }, column.key)))] }, key));
-                                    })) })] }) })), currentPagination && (jsx("div", { className: "pt-2", children: jsx(TablePagination, { pagination: currentPagination, onChange: (page, pageSize) => {
-                                const newPagination = { ...currentPagination, current: page, pageSize };
+                                    })) })] }) })), currentPagination && (jsx("div", { className: "pt-2", children: jsx(TablePagination, { pagination: currentPagination, onChange: (page, size) => {
+                                setInternalPage(page);
+                                setInternalPageSize(size);
+                                const newPagination = { ...currentPagination, current: page, pageSize: size };
                                 onChange?.(newPagination, filters, sortConfig);
                             } }) }))] }), footer && jsx("div", { className: "mt-4", children: footer() })] }));
 };