@beyondcorp/beyond-ui 1.3.6 → 1.3.10

package/dist/components/ComponentShowcase/ComponentShowcase.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useRef, useMemo, useEffect } from 'react';
-import { Layout, Shield, AlertCircle, BarChart3, MousePointer, Palette, ChevronRight, Search, ChevronDown, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Settings, Check, Copy, Book } from 'lucide-react';
+import { Layout, Shield, AlertCircle, BarChart3, MousePointer, Palette, ChevronRight, Search, ChevronDown, Menu, Monitor, Tablet, Smartphone, Sun, Moon, Eye, Code, Settings, Check, Copy, Book } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../Button/Button.js';
 import { Input } from '../Input/Input.js';
@@ -9,6 +9,7 @@ import { Badge } from '../Badge/Badge.js';
 import { Toast, showToast } from '../Toast/Toast.js';
 import { showcaseRegistry } from './showcaseRegistry.js';
 import { componentDocs } from './componentDocs.js';
+import { useDarkMode } from '../../hooks/useDarkMode.js';
 
 // Component categories and their items
 const componentCategories = {
@@ -69,10 +70,15 @@ const ComponentShowcase = ({ className }) => {
     const [selectedComponent, setSelectedComponent] = useState("button");
     const [activeTab, setActiveTab] = useState("preview");
     const [searchQuery, setSearchQuery] = useState("");
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+        if (typeof window !== "undefined") {
+            return window.innerWidth < 1024;
+        }
+        return false; // Default for SSR
+    });
     const [expandedCategories, setExpandedCategories] = useState(["Forms"]);
     const [viewMode, setViewMode] = useState("desktop");
-    const [darkMode, setDarkMode] = useState(false);
+    const { isDarkMode, toggle: toggleDarkMode } = useDarkMode();
     const [copiedCode, setCopiedCode] = useState(null);
     const sidebarRef = useRef(null);
     const [focusedIndex, setFocusedIndex] = useState(-1);
@@ -149,15 +155,25 @@ const ComponentShowcase = ({ className }) => {
                 return "w-full";
         }
     };
-    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) => {
+    return (jsxs("div", { className: cn("flex h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100", isDarkMode && "dark", className), children: [jsx(Toast, {}), !sidebarCollapsed && (jsx("div", { className: "fixed inset-0 bg-black/50 dark:bg-black/80 z-10 lg:hidden backdrop-blur-sm transition-opacity", onClick: () => setSidebarCollapsed(true) })), 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 z-20 shrink-0", "max-lg:absolute max-lg:h-full max-lg:shadow-2xl", sidebarCollapsed ? "lg:w-16 max-lg:w-80 max-lg:-translate-x-full" : "w-80 max-lg:translate-x-0"), 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: [jsxs("div", { className: cn("flex items-center justify-between mb-4", sidebarCollapsed ? "lg:hidden" : ""), 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" }) })] }), jsx("div", { className: cn("justify-center", sidebarCollapsed ? "flex max-lg:hidden" : "hidden"), children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(false), children: jsx(Palette, { className: "h-4 w-4" }) }) }), jsxs("div", { className: cn("relative", sidebarCollapsed ? "lg:hidden" : ""), 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: () => {
+                                        if (typeof window !== "undefined" && window.innerWidth < 1024) {
+                                            toggleCategory(categoryName);
+                                        }
+                                        else if (!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 ? "lg:justify-center max-lg:justify-between" : "justify-between"), children: [jsxs("div", { className: "flex items-center space-x-2", children: [categoryData.icon, jsx("span", { className: cn(sidebarCollapsed ? "lg:hidden" : ""), children: categoryName })] }), jsx(ChevronDown, { className: cn("h-4 w-4 transition-transform", expandedCategories.includes(categoryName) && "rotate-180", sidebarCollapsed ? "lg:hidden" : "") })] }), expandedCategories.includes(categoryName) && (jsx("div", { className: cn("mt-2 ml-6 space-y-1", sidebarCollapsed ? "lg:hidden" : ""), 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));
+                                                if (window.innerWidth < 1024) {
+                                                    setSidebarCollapsed(true);
+                                                }
                                             }, 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 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]
+                                    }) }))] }, 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(Button, { variant: "ghost", size: "sm", className: "lg:hidden p-2 -ml-2 shrink-0", onClick: () => setSidebarCollapsed(false), "aria-label": "Open component menu", children: jsx(Menu, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }), jsx("h1", { className: "text-xl md:text-2xl font-bold text-gray-900 dark:text-white truncate", 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: toggleDarkMode, children: isDarkMode ? (jsx(Sun, { className: "h-4 w-4" })) : (jsx(Moon, { className: "h-4 w-4" })) })] })] }) }), jsx("main", { className: "flex-1 overflow-auto p-6 bg-gray-50 dark:bg-gray-950", 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 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." })] }) })) })] })] }));
 };

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

@@ -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      { name: \"Chat Widget\", id: \"chatwidget\" }\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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"}
+{"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  Menu\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\";\nimport { useDarkMode } from \"../../hooks/useDarkMode\";\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      { name: \"Chat Widget\", id: \"chatwidget\" }\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(() => {\n    if (typeof window !== \"undefined\") {\n      return window.innerWidth < 1024;\n    }\n    return false; // Default for SSR\n  });\n  const [expandedCategories, setExpandedCategories] = useState<string[]>([\"Forms\"]);\n  const [viewMode, setViewMode] = useState<\"desktop\" | \"tablet\" | \"mobile\">(\"desktop\");\n  const { isDarkMode, toggle: toggleDarkMode } = useDarkMode();\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 text-gray-900 dark:text-gray-100\", isDarkMode && \"dark\", className)}>\n      <Toast />\n\n      {/* Mobile Overlay for Showcase Sidebar */}\n      {!sidebarCollapsed && (\n        <div\n          className=\"fixed inset-0 bg-black/50 dark:bg-black/80 z-10 lg:hidden backdrop-blur-sm transition-opacity\"\n          onClick={() => setSidebarCollapsed(true)}\n        />\n      )}\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 z-20 shrink-0\",\n          \"max-lg:absolute max-lg:h-full max-lg:shadow-2xl\",\n          sidebarCollapsed ? \"lg:w-16 max-lg:w-80 max-lg:-translate-x-full\" : \"w-80 max-lg:translate-x-0\"\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          <div className={cn(\"flex items-center justify-between mb-4\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\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          <div className={cn(\"justify-center\", sidebarCollapsed ? \"flex max-lg:hidden\" : \"hidden\")}>\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          <div className={cn(\"relative\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\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        </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={() => {\n                  if (typeof window !== \"undefined\" && window.innerWidth < 1024) {\n                    toggleCategory(categoryName);\n                  } else if (!sidebarCollapsed) {\n                    toggleCategory(categoryName);\n                  }\n                }}\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 ? \"lg:justify-center max-lg:justify-between\" : \"justify-between\"\n                )}\n              >\n                <div className=\"flex items-center space-x-2\">\n                  {categoryData.icon}\n                  <span className={cn(sidebarCollapsed ? \"lg:hidden\" : \"\")}>{categoryName}</span>\n                </div>\n                  <ChevronDown\n                    className={cn(\n                      \"h-4 w-4 transition-transform\",\n                      expandedCategories.includes(categoryName) && \"rotate-180\",\n                      sidebarCollapsed ? \"lg:hidden\" : \"\"\n                    )}\n                  />\n              </button>\n\n              {expandedCategories.includes(categoryName) && (\n                <div className={cn(\"mt-2 ml-6 space-y-1\", sidebarCollapsed ? \"lg:hidden\" : \"\")}>\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                  if (window.innerWidth < 1024) {\n                    setSidebarCollapsed(true);\n                  }\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              {/* Mobile Menu Toggle */}\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"lg:hidden p-2 -ml-2 shrink-0\"\n                onClick={() => setSidebarCollapsed(false)}\n                aria-label=\"Open component menu\"\n              >\n                <Menu className=\"h-5 w-5 text-gray-700 dark:text-gray-300\" />\n              </Button>\n              \n              <h1 className=\"text-xl md:text-2xl font-bold text-gray-900 dark:text-white truncate\">\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={toggleDarkMode}\n              >\n                {isDarkMode ? (\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 bg-gray-50 dark:bg-gray-950\">\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/DashboardHeader/DashboardHeader.js

@@ -6,24 +6,27 @@ import { Input } from '../Input/Input.js';
 import { Button } from '../Button/Button.js';
 import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
 import { Badge } from '../Badge/Badge.js';
-import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 
 const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, showBreadcrumbs = true, showNotifications = true, showSettings = true, showProfile = true, showMenuButton = true, leftSlot, centerSlot, rightSlot, onMenuButtonClick, onNotificationClick, onSettingsClick, onProfileClick, onBreadcrumbClick, ...props }, ref) => {
     const [searchValue, setSearchValue] = React.useState("");
-    const { currentBreakpoint } = useBreakpoint();
-    // Helper to resolve ResponsiveShow prop
-    const isSectionVisible = (prop, view) => {
+    // Helper to resolve ResponsiveShow prop directly to Tailwind display classes
+    const getVisibilityClasses = (prop, baseDisplayClass = "flex") => {
         if (typeof prop === "boolean")
-            return prop;
-        if (!prop)
-            return true;
-        if (view === "mobile")
-            return prop.mobile ?? false;
-        if (view === "desktop")
-            return prop.desktop ?? false;
-        return true;
+            return prop ? baseDisplayClass : "hidden";
+        if (prop === undefined)
+            return baseDisplayClass;
+        const showMobile = prop.mobile ?? false;
+        const showDesktop = prop.desktop ?? false;
+        if (showMobile && showDesktop)
+            return baseDisplayClass;
+        if (!showMobile && !showDesktop)
+            return "hidden";
+        if (showMobile && !showDesktop)
+            return `${baseDisplayClass} lg:hidden`;
+        if (!showMobile && showDesktop)
+            return `hidden lg:${baseDisplayClass}`;
+        return baseDisplayClass;
     };
-    const isMobile = currentBreakpoint === "sm" || currentBreakpoint === "md";
     const handleSearchChange = (e) => {
         const value = e.target.value;
         setSearchValue(value);
@@ -31,23 +34,23 @@ const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "
     };
     return (jsx("header", { ref: ref, className: cn("z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex w-full items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(leftSlot)
                             ? leftSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
-                            : leftSlot, (isSectionVisible(showMenuButton, isMobile ? "mobile" : "desktop")) && (jsx(Button, { variant: "ghost", size: "sm", onClick: e => {
+                            : leftSlot, jsx(Button, { variant: "ghost", size: "sm", className: cn(getVisibilityClasses(showMenuButton, "flex lg:hidden"), "p-2 -ml-2 shrink-0 mr-2"), "aria-label": "Open mobile menu", onClick: e => {
                                 onMenuButtonClick?.();
                                 onMenuToggle?.();
-                            }, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) })), isSectionVisible(showBreadcrumbs, isMobile ? "mobile" : "desktop") && (jsx("nav", { className: cn("flex items-center space-x-2 text-sm", isMobile ? "w-full overflow-x-auto whitespace-nowrap py-1" : ""), children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors", onClick: e => {
+                            }, children: jsx(Menu, { className: "h-5 w-5 text-gray-700 dark:text-gray-300" }) }), jsx("nav", { className: cn(getVisibilityClasses(showBreadcrumbs, "flex"), "items-center space-x-2 text-sm", "min-w-0 max-w-full overflow-x-auto whitespace-nowrap py-1 lg:w-auto lg:overflow-visible lg:whitespace-normal lg:py-0"), children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors", onClick: e => {
                                             onBreadcrumbClick?.(item, index);
                                         }, children: item.label })) : (jsx("span", { className: "text-gray-900 dark:text-white font-medium", onClick: e => {
                                             onBreadcrumbClick?.(item, index);
-                                        }, style: onBreadcrumbClick ? { cursor: "pointer" } : undefined, children: item.label }))] }, index))) }))] }), centerSlot ? (jsx("div", { className: "flex-1 min-w-0 flex justify-center", children: Array.isArray(centerSlot)
+                                        }, style: onBreadcrumbClick ? { cursor: "pointer" } : undefined, children: item.label }))] }, index))) })] }), centerSlot ? (jsx("div", { className: "flex-1 min-w-0 flex justify-center", children: Array.isArray(centerSlot)
                         ? centerSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
-                        : centerSlot })) : (isSectionVisible(showSearch, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "flex-1 min-w-0 mx-2", children: 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, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:bg-white dark:focus:bg-gray-900 dark:text-white w-full" })] }) }))), jsxs("div", { className: "flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(rightSlot)
+                        : centerSlot })) : (jsx("div", { className: cn(getVisibilityClasses(showSearch, "flex"), "flex-1 min-w-0 mx-2"), children: 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, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:bg-white dark:focus:bg-gray-900 dark:text-white w-full" })] }) })), jsxs("div", { className: "flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0", children: [Array.isArray(rightSlot)
                             ? rightSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
-                            : rightSlot, isSectionVisible(showNotifications, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", onClick: onNotificationClick, children: [jsx(Bell, { className: "h-5 w-5" }), jsx(Badge, { variant: "danger", className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center", children: "3" })] }) })), isSectionVisible(showSettings, isMobile ? "mobile" : "desktop") && (jsx(Button, { variant: "ghost", size: "sm", onClick: onSettingsClick, children: jsx(Settings, { className: "h-5 w-5" }) })), isSectionVisible(showProfile, isMobile ? "mobile" : "desktop") && (jsxs("div", { className: cn("flex items-center space-x-3 pl-3 border-l border-gray-200", onProfileClick ? "cursor-pointer hover:bg-gray-100 transition" : ""), onClick: onProfileClick, tabIndex: onProfileClick ? 0 : undefined, role: onProfileClick ? "button" : undefined, onKeyDown: onProfileClick ? (e) => {
+                            : rightSlot, jsx("div", { className: cn(getVisibilityClasses(showNotifications, "block"), "relative"), children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", onClick: onNotificationClick, children: [jsx(Bell, { className: "h-5 w-5" }), jsx(Badge, { variant: "danger", className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center", children: "3" })] }) }), jsx("div", { className: getVisibilityClasses(showSettings, "block"), children: jsx(Button, { variant: "ghost", size: "sm", onClick: onSettingsClick, children: jsx(Settings, { className: "h-5 w-5" }) }) }), jsxs("div", { className: cn(getVisibilityClasses(showProfile, "flex"), "items-center space-x-3 pl-3 border-l border-gray-200", onProfileClick ? "cursor-pointer hover:bg-gray-100 transition" : ""), onClick: onProfileClick, tabIndex: onProfileClick ? 0 : undefined, role: onProfileClick ? "button" : undefined, onKeyDown: onProfileClick ? (e) => {
                                 if (e.key === "Enter" || e.key === " ") {
                                     e.preventDefault();
                                     onProfileClick();
                                 }
-                            } : undefined, "aria-label": onProfileClick ? "Profile section" : undefined, children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] }))] })] }) }));
+                            } : undefined, "aria-label": onProfileClick ? "Profile section" : undefined, children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] })] })] }) }));
 });
 DashboardHeader.displayName = "DashboardHeader";
 

package/dist/components/DashboardHeader/DashboardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ntype ResponsiveShow = boolean | { mobile?: boolean; desktop?: boolean };\n\ntype DashboardHeaderSlotItem = {\n  element: React.ReactNode;\n  onClick?: () => void;\n  id?: string;\n};\ntype DashboardHeaderSlot = React.ReactNode | DashboardHeaderSlotItem[];\n\ninterface DashboardHeaderProps {\n  className?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onMenuToggle?: () => void;\n  sidebarCollapsed?: boolean;\n  showSearch?: ResponsiveShow;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  style?: React.CSSProperties;\n\n  // New flexible API\n  showBreadcrumbs?: ResponsiveShow; // default true\n  showNotifications?: ResponsiveShow; // default true\n  showSettings?: ResponsiveShow; // default true\n  showProfile?: ResponsiveShow; // default true\n  showMenuButton?: ResponsiveShow; // default true\n\n  // OnClick handlers for standard components\n  onMenuButtonClick?: () => void;\n  onNotificationClick?: () => void;\n  onSettingsClick?: () => void;\n  onProfileClick?: () => void;\n  onBreadcrumbClick?: (item: BreadcrumbItem, index: number) => void;\n\n  // Custom slots\n  leftSlot?: DashboardHeaderSlot;\n  centerSlot?: DashboardHeaderSlot;\n  rightSlot?: DashboardHeaderSlot;\n}\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n  ({\n    className,\n    breadcrumbs = [{ label: \"Dashboard\" }],\n    onMenuToggle,\n    sidebarCollapsed = false,\n    showSearch = true,\n    searchPlaceholder = \"Search...\",\n    onSearchChange,\n    showBreadcrumbs = true,\n    showNotifications = true,\n    showSettings = true,\n    showProfile = true,\n    showMenuButton = true,\n    leftSlot,\n    centerSlot,\n    rightSlot,\n    onMenuButtonClick,\n    onNotificationClick,\n    onSettingsClick,\n    onProfileClick,\n    onBreadcrumbClick,\n    ...props\n  }, ref) => {\n    const [searchValue, setSearchValue] = React.useState(\"\");\n    const { currentBreakpoint } = useBreakpoint();\n\n    // Helper to resolve ResponsiveShow prop\n    const isSectionVisible = (\n      prop: ResponsiveShow | undefined,\n      view: \"mobile\" | \"desktop\"\n    ): boolean => {\n      if (typeof prop === \"boolean\") return prop;\n      if (!prop) return true;\n      if (view === \"mobile\") return prop.mobile ?? false;\n      if (view === \"desktop\") return prop.desktop ?? false;\n      return true;\n    };\n\n    const isMobile = currentBreakpoint === \"sm\" || currentBreakpoint === \"md\";\n    const isDesktop = currentBreakpoint === \"lg\" || currentBreakpoint === \"xl\" || currentBreakpoint === \"2xl\";\n\n    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      setSearchValue(value);\n      onSearchChange?.(value);\n    };\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-all duration-300\",\n          className\n        )}\n        style={props.style}\n        {...props}\n      >\n        <div className=\"flex w-full items-center justify-between px-6 py-4\">\n          {/* Left Section */}\n          <div className=\"flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom left slot */}\n            {Array.isArray(leftSlot)\n              ? leftSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : leftSlot}\n\n            {/* Mobile Menu Button */}\n            {(isSectionVisible(showMenuButton, isMobile ? \"mobile\" : \"desktop\")) && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={e => {\n                  onMenuButtonClick?.();\n                  onMenuToggle?.();\n                }}\n                className=\"md:hidden\"\n              >\n                <Menu className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* Breadcrumbs */}\n            {isSectionVisible(showBreadcrumbs, isMobile ? \"mobile\" : \"desktop\") && (\n              <nav\n                className={cn(\n                  \"flex items-center space-x-2 text-sm\",\n                  isMobile ? \"w-full overflow-x-auto whitespace-nowrap py-1\" : \"\"\n                )}\n              >\n                {breadcrumbs.map((item, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && (\n                      <span className=\"text-gray-400\">/</span>\n                    )}\n                    {item.href ? (\n                      <a\n                        href={item.href}\n                        className=\"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                      >\n                        {item.label}\n                      </a>\n                    ) : (\n                      <span\n                        className=\"text-gray-900 dark:text-white font-medium\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                        style={onBreadcrumbClick ? { cursor: \"pointer\" } : undefined}\n                      >\n                        {item.label}\n                      </span>\n                    )}\n                  </React.Fragment>\n                ))}\n              </nav>\n            )}\n          </div>\n\n          {/* Center Section - Search or custom center slot */}\n          {centerSlot ? (\n            <div className=\"flex-1 min-w-0 flex justify-center\">\n              {Array.isArray(centerSlot)\n                ? centerSlot.map((item, idx) => (\n                    <span\n                      key={item.id || idx}\n                      onClick={item.onClick}\n                      className={item.onClick ? \"cursor-pointer\" : undefined}\n                    >\n                      {item.element}\n                    </span>\n                  ))\n                : centerSlot}\n            </div>\n          ) : (\n            isSectionVisible(showSearch, isMobile ? \"mobile\" : \"desktop\") && (\n              <div className=\"flex-1 min-w-0 mx-2\">\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                    type=\"text\"\n                    placeholder={searchPlaceholder}\n                    value={searchValue}\n                    onChange={handleSearchChange}\n                    className=\"pl-10 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:bg-white dark:focus:bg-gray-900 dark:text-white w-full\"\n                  />\n                </div>\n              </div>\n            )\n          )}\n\n          {/* Right Section */}\n          <div className=\"flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom right slot */}\n            {Array.isArray(rightSlot)\n              ? rightSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : rightSlot}\n\n            {/* Notifications */}\n            {isSectionVisible(showNotifications, isMobile ? \"mobile\" : \"desktop\") && (\n              <div className=\"relative\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"relative\"\n                  onClick={onNotificationClick}\n                >\n                  <Bell className=\"h-5 w-5\" />\n                  <Badge\n                    variant=\"danger\"\n                    className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n                  >\n                    3\n                  </Badge>\n                </Button>\n              </div>\n            )}\n\n            {/* Settings */}\n            {isSectionVisible(showSettings, isMobile ? \"mobile\" : \"desktop\") && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={onSettingsClick}\n              >\n                <Settings className=\"h-5 w-5\" />\n              </Button>\n            )}\n\n            {/* User Profile */}\n            {isSectionVisible(showProfile, isMobile ? \"mobile\" : \"desktop\") && (\n              <div\n                className={cn(\n                  \"flex items-center space-x-3 pl-3 border-l border-gray-200\",\n                  onProfileClick ? \"cursor-pointer hover:bg-gray-100 transition\" : \"\"\n                )}\n                onClick={onProfileClick}\n                tabIndex={onProfileClick ? 0 : undefined}\n                role={onProfileClick ? \"button\" : undefined}\n                onKeyDown={onProfileClick ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onProfileClick();\n                  }\n                } : undefined}\n                aria-label={onProfileClick ? \"Profile section\" : undefined}\n              >\n                <div className=\"hidden sm:block text-right\">\n              <p className=\"text-sm font-medium text-gray-900 dark:text-white\">John Doe</p>\n              <p className=\"text-xs text-gray-500 dark:text-gray-400\">Administrator</p>\n                </div>\n                <Avatar size=\"sm\">\n                  <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n                  <AvatarFallback>JD</AvatarFallback>\n                </Avatar>\n              </div>\n            )}\n          </div>\n        </div>\n      </header>\n    );\n  }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAsDA,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EACC,SAAS,EACT,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,EACtC,YAAY,EACZ,gBAAgB,GAAG,KAAK,EACxB,UAAU,GAAG,IAAI,EACjB,iBAAiB,GAAG,WAAW,EAC/B,cAAc,EACd,eAAe,GAAG,IAAI,EACtB,iBAAiB,GAAG,IAAI,EACxB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,IAAI,EAClB,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,GAAG,KAAI;AACR,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;AACxD,IAAA,MAAM,EAAE,iBAAiB,EAAE,GAAG,aAAa,EAAE;;AAG7C,IAAA,MAAM,gBAAgB,GAAG,CACvB,IAAgC,EAChC,IAA0B,KACf;QACX,IAAI,OAAO,IAAI,KAAK,SAAS;AAAE,YAAA,OAAO,IAAI;AAC1C,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,IAAI;QACtB,IAAI,IAAI,KAAK,QAAQ;AAAE,YAAA,OAAO,IAAI,CAAC,MAAM,IAAI,KAAK;QAClD,IAAI,IAAI,KAAK,SAAS;AAAE,YAAA,OAAO,IAAI,CAAC,OAAO,IAAI,KAAK;AACpD,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;IAED,MAAM,QAAQ,GAAG,iBAAiB,KAAK,IAAI,IAAI,iBAAiB,KAAK,IAAI;AAGzE,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAsC,KAAI;AACpE,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC5B,cAAc,CAAC,KAAK,CAAC;AACrB,QAAA,cAAc,GAAG,KAAK,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,0GAA0G,EAC1G,SAAS,CACV,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,GACd,KAAK,EAAA,QAAA,EAETC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oDAAoD,EAAA,QAAA,EAAA,CAEjEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAAA,CAE3E,KAAK,CAAC,OAAO,CAAC,QAAQ;8BACnB,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,MACrBD,cAEE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA,QAAA,EAErD,IAAI,CAAC,OAAO,IAJR,IAAI,CAAC,EAAE,IAAI,GAAG,CAKd,CACR;AACH,8BAAE,QAAQ,EAGX,CAAC,gBAAgB,CAAC,cAAc,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,MACjEA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,CAAC,IAAG;gCACX,iBAAiB,IAAI;gCACrB,YAAY,IAAI;4BAClB,CAAC,EACD,SAAS,EAAC,WAAW,YAErBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,EAAA,CACrB,CACV,EAGA,gBAAgB,CAAC,eAAe,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,KACjEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,qCAAqC,EACrC,QAAQ,GAAG,+CAA+C,GAAG,EAAE,CAChE,EAAA,QAAA,EAEA,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3BC,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACZ,KAAK,GAAG,CAAC,KACRD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,GAAA,EAAA,CAAS,CACzC,EACA,IAAI,CAAC,IAAI,IACRA,GAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAC,8FAA8F,EACxG,OAAO,EAAE,CAAC,IAAG;AACX,4CAAA,iBAAiB,GAAG,IAAI,EAAE,KAAK,CAAC;AAClC,wCAAA,CAAC,YAEA,IAAI,CAAC,KAAK,EAAA,CACT,KAEJA,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAC,2CAA2C,EACrD,OAAO,EAAE,CAAC,IAAG;AACX,4CAAA,iBAAiB,GAAG,IAAI,EAAE,KAAK,CAAC;wCAClC,CAAC,EACD,KAAK,EAAE,iBAAiB,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,YAE3D,IAAI,CAAC,KAAK,EAAA,CACN,CACR,CAAA,EAAA,EAxBkB,KAAK,CAyBT,CAClB,CAAC,EAAA,CACE,CACP,IACG,EAGL,UAAU,IACTA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAChD,KAAK,CAAC,OAAO,CAAC,UAAU;0BACrB,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,MACvBA,cAEE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA,QAAA,EAErD,IAAI,CAAC,OAAO,IAJR,IAAI,CAAC,EAAE,IAAI,GAAG,CAKd,CACR;AACH,0BAAE,UAAU,EAAA,CACV,KAEN,gBAAgB,CAAC,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,KAC3DA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAClCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EAAA,QAAA,EAAA,CACvBD,IAAC,MAAM,EAAA,EAAC,SAAS,EAAC,6FAA6F,EAAA,CAAG,EAClHA,IAAC,KAAK,EAAA,EACJ,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAC,qIAAqI,EAAA,CAC/I,CAAA,EAAA,CACE,EAAA,CACF,CACP,CACF,EAGDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+DAA+D,EAAA,QAAA,EAAA,CAE3E,KAAK,CAAC,OAAO,CAAC,SAAS;8BACpB,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,MACtBD,cAEE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA,QAAA,EAErD,IAAI,CAAC,OAAO,IAJR,IAAI,CAAC,EAAE,IAAI,GAAG,CAKd,CACR;AACH,8BAAE,SAAS,EAGZ,gBAAgB,CAAC,iBAAiB,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,KACnEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EAAA,QAAA,EACvBC,IAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,mBAAmB,EAAA,QAAA,EAAA,CAE5BD,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAC5BA,IAAC,KAAK,EAAA,EACJ,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAC,+EAA+E,EAAA,QAAA,EAAA,GAAA,EAAA,CAGnF,CAAA,EAAA,CACD,GACL,CACP,EAGA,gBAAgB,CAAC,YAAY,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,KAC9DA,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,eAAe,EAAA,QAAA,EAExBA,IAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACzB,CACV,EAGA,gBAAgB,CAAC,WAAW,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC,KAC7DC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,cAAc,GAAG,6CAA6C,GAAG,EAAE,CACpE,EACD,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,cAAc,GAAG,CAAC,GAAG,SAAS,EACxC,IAAI,EAAE,cAAc,GAAG,QAAQ,GAAG,SAAS,EAC3C,SAAS,EAAE,cAAc,GAAG,CAAC,CAAC,KAAI;AAChC,gCAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;oCACtC,CAAC,CAAC,cAAc,EAAE;AAClB,oCAAA,cAAc,EAAE;gCAClB;4BACF,CAAC,GAAG,SAAS,EAAA,YAAA,EACD,cAAc,GAAG,iBAAiB,GAAG,SAAS,EAAA,QAAA,EAAA,CAE1DA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CAC7CD,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,mDAAmD,EAAA,QAAA,EAAA,UAAA,EAAA,CAAa,EAC7EA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,0CAA0C,EAAA,QAAA,EAAA,eAAA,EAAA,CAAkB,CAAA,EAAA,CACjE,EACNC,IAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAAA,CACfD,GAAA,CAAC,WAAW,EAAA,EAAC,GAAG,EAAC,iGAAiG,EAAA,CAAG,EACrHA,GAAA,CAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,CAAA,EAAA,CAC5B,CAAA,EAAA,CACL,CACP,CAAA,EAAA,CACG,CAAA,EAAA,CACF,EAAA,CACC;AAEb,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\ntype ResponsiveShow = boolean | { mobile?: boolean; desktop?: boolean };\n\ntype DashboardHeaderSlotItem = {\n  element: React.ReactNode;\n  onClick?: () => void;\n  id?: string;\n};\ntype DashboardHeaderSlot = React.ReactNode | DashboardHeaderSlotItem[];\n\ninterface DashboardHeaderProps {\n  className?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onMenuToggle?: () => void;\n  sidebarCollapsed?: boolean;\n  showSearch?: ResponsiveShow;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  style?: React.CSSProperties;\n\n  // New flexible API\n  showBreadcrumbs?: ResponsiveShow; // default true\n  showNotifications?: ResponsiveShow; // default true\n  showSettings?: ResponsiveShow; // default true\n  showProfile?: ResponsiveShow; // default true\n  showMenuButton?: ResponsiveShow; // default true\n\n  // OnClick handlers for standard components\n  onMenuButtonClick?: () => void;\n  onNotificationClick?: () => void;\n  onSettingsClick?: () => void;\n  onProfileClick?: () => void;\n  onBreadcrumbClick?: (item: BreadcrumbItem, index: number) => void;\n\n  // Custom slots\n  leftSlot?: DashboardHeaderSlot;\n  centerSlot?: DashboardHeaderSlot;\n  rightSlot?: DashboardHeaderSlot;\n}\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n  ({\n    className,\n    breadcrumbs = [{ label: \"Dashboard\" }],\n    onMenuToggle,\n    sidebarCollapsed = false,\n    showSearch = true,\n    searchPlaceholder = \"Search...\",\n    onSearchChange,\n    showBreadcrumbs = true,\n    showNotifications = true,\n    showSettings = true,\n    showProfile = true,\n    showMenuButton = true,\n    leftSlot,\n    centerSlot,\n    rightSlot,\n    onMenuButtonClick,\n    onNotificationClick,\n    onSettingsClick,\n    onProfileClick,\n    onBreadcrumbClick,\n    ...props\n  }, ref) => {\n    const [searchValue, setSearchValue] = React.useState(\"\");\n\n    // Helper to resolve ResponsiveShow prop directly to Tailwind display classes\n    const getVisibilityClasses = (\n      prop: ResponsiveShow | undefined,\n      baseDisplayClass: string = \"flex\"\n    ): string => {\n      if (typeof prop === \"boolean\") return prop ? baseDisplayClass : \"hidden\";\n      if (prop === undefined) return baseDisplayClass;\n      \n      const showMobile = prop.mobile ?? false;\n      const showDesktop = prop.desktop ?? false;\n      \n      if (showMobile && showDesktop) return baseDisplayClass;\n      if (!showMobile && !showDesktop) return \"hidden\";\n      if (showMobile && !showDesktop) return `${baseDisplayClass} lg:hidden`;\n      if (!showMobile && showDesktop) return `hidden lg:${baseDisplayClass}`;\n      return baseDisplayClass;\n    };\n\n    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      setSearchValue(value);\n      onSearchChange?.(value);\n    };\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-all duration-300\",\n          className\n        )}\n        style={props.style}\n        {...props}\n      >\n        <div className=\"flex w-full items-center justify-between px-6 py-4\">\n          {/* Left Section */}\n          <div className=\"flex items-center space-x-4 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom left slot */}\n            {Array.isArray(leftSlot)\n              ? leftSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : leftSlot}\n\n            {/* Mobile Menu Button */}\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className={cn(\n                getVisibilityClasses(showMenuButton, \"flex lg:hidden\"),\n                \"p-2 -ml-2 shrink-0 mr-2\"\n              )}\n              aria-label=\"Open mobile menu\"\n              onClick={e => {\n                onMenuButtonClick?.();\n                onMenuToggle?.();\n              }}\n            >\n              <Menu className=\"h-5 w-5 text-gray-700 dark:text-gray-300\" />\n            </Button>\n\n            {/* Breadcrumbs */}\n              <nav\n                className={cn(\n                  getVisibilityClasses(showBreadcrumbs, \"flex\"),\n                  \"items-center space-x-2 text-sm\",\n                  \"min-w-0 max-w-full overflow-x-auto whitespace-nowrap py-1 lg:w-auto lg:overflow-visible lg:whitespace-normal lg:py-0\"\n                )}\n              >\n                {breadcrumbs.map((item, index) => (\n                  <React.Fragment key={index}>\n                    {index > 0 && (\n                      <span className=\"text-gray-400\">/</span>\n                    )}\n                    {item.href ? (\n                      <a\n                        href={item.href}\n                        className=\"text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                      >\n                        {item.label}\n                      </a>\n                    ) : (\n                      <span\n                        className=\"text-gray-900 dark:text-white font-medium\"\n                        onClick={e => {\n                          onBreadcrumbClick?.(item, index);\n                        }}\n                        style={onBreadcrumbClick ? { cursor: \"pointer\" } : undefined}\n                      >\n                        {item.label}\n                      </span>\n                    )}\n                  </React.Fragment>\n                ))}\n              </nav>\n          </div>\n\n          {/* Center Section - Search or custom center slot */}\n          {centerSlot ? (\n            <div className=\"flex-1 min-w-0 flex justify-center\">\n              {Array.isArray(centerSlot)\n                ? centerSlot.map((item, idx) => (\n                    <span\n                      key={item.id || idx}\n                      onClick={item.onClick}\n                      className={item.onClick ? \"cursor-pointer\" : undefined}\n                    >\n                      {item.element}\n                    </span>\n                  ))\n                : centerSlot}\n            </div>\n          ) : (\n              <div className={cn(getVisibilityClasses(showSearch, \"flex\"), \"flex-1 min-w-0 mx-2\")}>\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                    type=\"text\"\n                    placeholder={searchPlaceholder}\n                    value={searchValue}\n                    onChange={handleSearchChange}\n                    className=\"pl-10 bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 focus:bg-white dark:focus:bg-gray-900 dark:text-white w-full\"\n                  />\n                </div>\n              </div>\n          )}\n\n          {/* Right Section */}\n          <div className=\"flex items-center space-x-3 flex-shrink-0 flex-grow-0 min-w-0\">\n            {/* Custom right slot */}\n            {Array.isArray(rightSlot)\n              ? rightSlot.map((item, idx) => (\n                  <span\n                    key={item.id || idx}\n                    onClick={item.onClick}\n                    className={item.onClick ? \"cursor-pointer\" : undefined}\n                  >\n                    {item.element}\n                  </span>\n                ))\n              : rightSlot}\n\n            {/* Notifications */}\n              <div className={cn(getVisibilityClasses(showNotifications, \"block\"), \"relative\")}>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"relative\"\n                  onClick={onNotificationClick}\n                >\n                  <Bell className=\"h-5 w-5\" />\n                  <Badge\n                    variant=\"danger\"\n                    className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n                  >\n                    3\n                  </Badge>\n                </Button>\n              </div>\n\n            {/* Settings */}\n            <div className={getVisibilityClasses(showSettings, \"block\")}>\n               <Button\n                 variant=\"ghost\"\n                 size=\"sm\"\n                 onClick={onSettingsClick}\n               >\n                 <Settings className=\"h-5 w-5\" />\n               </Button>\n            </div>\n\n            {/* User Profile */}\n              <div\n                className={cn(\n                  getVisibilityClasses(showProfile, \"flex\"),\n                  \"items-center space-x-3 pl-3 border-l border-gray-200\",\n                  onProfileClick ? \"cursor-pointer hover:bg-gray-100 transition\" : \"\"\n                )}\n                onClick={onProfileClick}\n                tabIndex={onProfileClick ? 0 : undefined}\n                role={onProfileClick ? \"button\" : undefined}\n                onKeyDown={onProfileClick ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onProfileClick();\n                  }\n                } : undefined}\n                aria-label={onProfileClick ? \"Profile section\" : undefined}\n              >\n                <div className=\"hidden sm:block text-right\">\n              <p className=\"text-sm font-medium text-gray-900 dark:text-white\">John Doe</p>\n              <p className=\"text-xs text-gray-500 dark:text-gray-400\">Administrator</p>\n                </div>\n                <Avatar size=\"sm\">\n                  <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n                  <AvatarFallback>JD</AvatarFallback>\n                </Avatar>\n              </div>\n          </div>\n        </div>\n      </header>\n    );\n  }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/DashboardLayout/DashboardLayout.js

@@ -3,35 +3,41 @@ import * as React from 'react';
 import { cn } from '../../utils/cn.js';
 import { Sidebar } from '../Sidebar/Sidebar.js';
 import { DashboardHeader } from '../DashboardHeader/DashboardHeader.js';
+import { useBreakpoint } from '../../hooks/useBreakpoint.js';
 
 const DashboardLayout = React.forwardRef(({ children, className, sidebarMenuItems, activeSidebarItem, breadcrumbs, onSidebarItemClick, showSearch, searchPlaceholder, onSearchChange, sidebarTitle, sidebarTitleLetter, sidebarHeaderClassName, profileButtonProps, logoutButtonProps, profileSectionProps, dashboardHeaderProps, ...props }, ref) => {
-    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+    const { currentBreakpoint } = useBreakpoint();
+    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(() => {
+        if (typeof window !== "undefined") {
+            return window.innerWidth < 1024;
+        }
+        return true; // Default to mobile/hidden on SSR
+    });
+    React.useEffect(() => {
+        if (typeof window !== "undefined") {
+            setSidebarCollapsed(window.innerWidth < 1024);
+        }
+    }, [currentBreakpoint]);
     const toggleSidebar = () => {
         setSidebarCollapsed(prev => !prev);
     };
-    return (jsxs("div", { ref: ref, className: cn("bg-gray-50 dark:bg-gray-900 w-full h-screen overflow-hidden", className), ...props, children: [jsx(Sidebar, { collapsed: sidebarCollapsed, onToggle: toggleSidebar, menuItems: sidebarMenuItems, activeItem: activeSidebarItem, onItemClick: onSidebarItemClick, className: props.sidebarClassName, title: sidebarTitle, titleLetter: sidebarTitleLetter, headerClassName: sidebarHeaderClassName, style: {
+    return (jsxs("div", { ref: ref, className: cn("bg-gray-50 dark:bg-gray-900 w-full h-screen overflow-hidden", className), ...props, children: [jsx(Sidebar, { collapsed: sidebarCollapsed, onToggle: toggleSidebar, menuItems: sidebarMenuItems, activeItem: activeSidebarItem, onItemClick: (id) => {
+                    onSidebarItemClick?.(id);
+                    if (typeof window !== "undefined" && window.innerWidth < 1024) {
+                        setSidebarCollapsed(true);
+                    }
+                }, className: cn(props.sidebarClassName, "max-lg:z-50"), title: sidebarTitle, titleLetter: sidebarTitleLetter, headerClassName: sidebarHeaderClassName, style: {
                     zIndex: 50,
-                    position: "fixed",
-                    left: 0,
-                    top: 0,
-                    height: "100vh",
-                    width: sidebarCollapsed ? "4rem" : "18rem", // Tailwind: w-16 or w-72
-                    transition: "width 0.3s",
-                }, profileButtonProps: profileButtonProps, logoutButtonProps: logoutButtonProps, profileSectionProps: profileSectionProps }), jsx(DashboardHeader, { sidebarCollapsed: sidebarCollapsed, onMenuToggle: toggleSidebar, breadcrumbs: breadcrumbs, showSearch: showSearch, searchPlaceholder: searchPlaceholder, onSearchChange: onSearchChange, style: {
+                }, profileButtonProps: profileButtonProps, logoutButtonProps: logoutButtonProps, profileSectionProps: profileSectionProps }), jsx(DashboardHeader, { sidebarCollapsed: sidebarCollapsed, onMenuToggle: toggleSidebar, breadcrumbs: breadcrumbs, showSearch: showSearch, searchPlaceholder: searchPlaceholder, onSearchChange: onSearchChange, ...dashboardHeaderProps, className: cn("transition-all duration-300 ease-in-out", "max-lg:left-0 max-lg:w-full", sidebarCollapsed ? "lg:left-16 lg:w-[calc(100%-4rem)]" : "lg:left-72 lg:w-[calc(100%-18rem)]", dashboardHeaderProps?.className), style: {
                     zIndex: 30,
                     position: "fixed",
                     top: 0,
-                    left: sidebarCollapsed ? "4rem" : "18rem",
-                    right: 0,
-                    width: `calc(100% - ${sidebarCollapsed ? "4rem" : "18rem"})`,
-                    transition: "left 0.3s, width 0.3s",
-                }, ...dashboardHeaderProps }), jsx("div", { className: cn("relative w-full h-full", props.disableSidebarMargin ? "" : ""), style: {
-                    marginLeft: sidebarCollapsed ? "4rem" : "18rem",
+                    ...dashboardHeaderProps?.style
+                } }), jsx("div", { className: cn("relative h-full transition-all duration-300 ease-in-out", props.disableSidebarMargin ? "w-full" : cn("max-lg:ml-0 max-lg:w-full", sidebarCollapsed ? "lg:ml-16 lg:w-[calc(100%-4rem)]" : "lg:ml-72 lg:w-[calc(100%-18rem)]")), style: {
                     marginTop: "4.5rem", // Header height (py-4 + border)
                     height: "calc(100vh - 4.5rem)",
                     overflowY: "auto",
-                    transition: "margin-left 0.3s",
-                }, children: jsx("main", { className: "p-10 w-[90vw]", children: children }) }), !sidebarCollapsed && (jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden", onClick: toggleSidebar }))] }));
+                }, children: jsx("main", { className: "p-4 md:p-10 w-full max-w-full overflow-x-hidden", children: children }) }), !sidebarCollapsed && (jsx("div", { className: "fixed inset-0 bg-black/50 dark:bg-black/80 z-40 backdrop-blur-sm transition-opacity lg:hidden cursor-pointer", onClick: toggleSidebar, "aria-label": "Close sidebar overlay" }))] }));
 });
 DashboardLayout.displayName = "DashboardLayout";
 

package/dist/components/DashboardLayout/DashboardLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Sidebar, type MenuItem, type SidebarProfileSectionProps } from \"../Sidebar\";\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\n\n/**\n * DashboardLayoutProps\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\n * - sidebarHeaderClassName: Optional className for SidebarHeader\n *\n * These props are forwarded to Sidebar for dynamic header branding.\n */\nimport type { DashboardHeaderProps } from \"../DashboardHeader\";\n\ninterface DashboardLayoutProps {\n  children: React.ReactNode;\n  className?: string;\n  sidebarMenuItems?: MenuItem[];\n  activeSidebarItem?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onSidebarItemClick?: (itemId: string) => void;\n  showSearch?: boolean;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  sidebarClassName?: string;\n  disableSidebarMargin?: boolean;\n  /** Sidebar header title (default: \"Beyond\") */\n  sidebarTitle?: string;\n  /** Sidebar header letter (default: \"B\") */\n  sidebarTitleLetter?: string;\n  /** Optional className for SidebarHeader */\n  sidebarHeaderClassName?: string;\n  /** Props for ProfileButton in Sidebar */\n  profileButtonProps?: import(\"../Sidebar/ProfileButton\").ProfileButtonProps;\n  /** Props for LogoutButton in Sidebar */\n  logoutButtonProps?: import(\"../Sidebar/LogoutButton\").LogoutButtonProps;\n  /** Props for Sidebar profile section (avatar, name, email, etc.) */\n  profileSectionProps?: SidebarProfileSectionProps;\n\n  /** Props to customize DashboardHeader */\n  dashboardHeaderProps?: DashboardHeaderProps;\n}\n\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\n  ({\n    children,\n    className,\n    sidebarMenuItems,\n    activeSidebarItem,\n    breadcrumbs,\n    onSidebarItemClick,\n    showSearch,\n    searchPlaceholder,\n    onSearchChange,\n    sidebarTitle,\n    sidebarTitleLetter,\n    sidebarHeaderClassName,\n    profileButtonProps,\n    logoutButtonProps,\n    profileSectionProps,\n    dashboardHeaderProps,\n    ...props\n  }, ref) => {\n    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);\n\n    const toggleSidebar = () => {\n      setSidebarCollapsed(prev => !prev);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"bg-gray-50 dark:bg-gray-900 w-full h-screen overflow-hidden\", className)} {...props}>\n        {/* Fixed Sidebar */}\n        <Sidebar\n          collapsed={sidebarCollapsed}\n          onToggle={toggleSidebar}\n          menuItems={sidebarMenuItems}\n          activeItem={activeSidebarItem}\n          onItemClick={onSidebarItemClick}\n          className={props.sidebarClassName}\n          title={sidebarTitle}\n          titleLetter={sidebarTitleLetter}\n          headerClassName={sidebarHeaderClassName}\n          style={{\n            zIndex: 50,\n            position: \"fixed\",\n            left: 0,\n            top: 0,\n            height: \"100vh\",\n            width: sidebarCollapsed ? \"4rem\" : \"18rem\", // Tailwind: w-16 or w-72\n            transition: \"width 0.3s\",\n          }}\n          profileButtonProps={profileButtonProps}\n          logoutButtonProps={logoutButtonProps}\n          profileSectionProps={profileSectionProps}\n        />\n\n        {/* Fixed Header */}\n        <DashboardHeader\n          sidebarCollapsed={sidebarCollapsed}\n          onMenuToggle={toggleSidebar}\n          breadcrumbs={breadcrumbs}\n          showSearch={showSearch}\n          searchPlaceholder={searchPlaceholder}\n          onSearchChange={onSearchChange}\n          style={{\n            zIndex: 30,\n            position: \"fixed\",\n            top: 0,\n            left: sidebarCollapsed ? \"4rem\" : \"18rem\",\n            right: 0,\n            width: `calc(100% - ${sidebarCollapsed ? \"4rem\" : \"18rem\"})`,\n            transition: \"left 0.3s, width 0.3s\",\n          }}\n          {...dashboardHeaderProps}\n        />\n\n        {/* Main Content Area (scrollable) */}\n        <div\n          className={cn(\n            \"relative w-full h-full\",\n            props.disableSidebarMargin ? \"\" : \"\"\n          )}\n          style={{\n            marginLeft: sidebarCollapsed ? \"4rem\" : \"18rem\",\n            marginTop: \"4.5rem\", // Header height (py-4 + border)\n            height: \"calc(100vh - 4.5rem)\",\n            overflowY: \"auto\",\n            transition: \"margin-left 0.3s\",\n          }}\n        >\n          <main className=\"p-10 w-[90vw]\">\n            {children}\n          </main>\n        </div>\n\n        {/* Mobile Overlay */}\n        {!sidebarCollapsed && (\n          <div\n            className=\"fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden\"\n            onClick={toggleSidebar}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nDashboardLayout.displayName = \"DashboardLayout\";\n\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"DashboardLayout.js","sources":["../../../src/components/DashboardLayout/DashboardLayout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Sidebar, type MenuItem, type SidebarProfileSectionProps } from \"../Sidebar\";\nimport { DashboardHeader, type BreadcrumbItem } from \"../DashboardHeader\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\n/**\n * DashboardLayoutProps\n * - sidebarTitle: Title text for Sidebar header (default: \"Beyond\")\n * - sidebarTitleLetter: Letter/initial for Sidebar header (default: \"B\")\n * - sidebarHeaderClassName: Optional className for SidebarHeader\n *\n * These props are forwarded to Sidebar for dynamic header branding.\n */\nimport type { DashboardHeaderProps } from \"../DashboardHeader\";\n\ninterface DashboardLayoutProps {\n  children: React.ReactNode;\n  className?: string;\n  sidebarMenuItems?: MenuItem[];\n  activeSidebarItem?: string;\n  breadcrumbs?: BreadcrumbItem[];\n  onSidebarItemClick?: (itemId: string) => void;\n  showSearch?: boolean;\n  searchPlaceholder?: string;\n  onSearchChange?: (value: string) => void;\n  sidebarClassName?: string;\n  disableSidebarMargin?: boolean;\n  /** Sidebar header title (default: \"Beyond\") */\n  sidebarTitle?: string;\n  /** Sidebar header letter (default: \"B\") */\n  sidebarTitleLetter?: string;\n  /** Optional className for SidebarHeader */\n  sidebarHeaderClassName?: string;\n  /** Props for ProfileButton in Sidebar */\n  profileButtonProps?: import(\"../Sidebar/ProfileButton\").ProfileButtonProps;\n  /** Props for LogoutButton in Sidebar */\n  logoutButtonProps?: import(\"../Sidebar/LogoutButton\").LogoutButtonProps;\n  /** Props for Sidebar profile section (avatar, name, email, etc.) */\n  profileSectionProps?: SidebarProfileSectionProps;\n\n  /** Props to customize DashboardHeader */\n  dashboardHeaderProps?: DashboardHeaderProps;\n}\n\nconst DashboardLayout = React.forwardRef<HTMLDivElement, DashboardLayoutProps>(\n  ({\n    children,\n    className,\n    sidebarMenuItems,\n    activeSidebarItem,\n    breadcrumbs,\n    onSidebarItemClick,\n    showSearch,\n    searchPlaceholder,\n    onSearchChange,\n    sidebarTitle,\n    sidebarTitleLetter,\n    sidebarHeaderClassName,\n    profileButtonProps,\n    logoutButtonProps,\n    profileSectionProps,\n    dashboardHeaderProps,\n    ...props\n  }, ref) => {\n    const { currentBreakpoint } = useBreakpoint();\n\n    const [sidebarCollapsed, setSidebarCollapsed] = React.useState(() => {\n      if (typeof window !== \"undefined\") {\n        return window.innerWidth < 1024;\n      }\n      return true; // Default to mobile/hidden on SSR\n    });\n\n    React.useEffect(() => {\n      if (typeof window !== \"undefined\") {\n        setSidebarCollapsed(window.innerWidth < 1024);\n      }\n    }, [currentBreakpoint]);\n\n    const toggleSidebar = () => {\n      setSidebarCollapsed(prev => !prev);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"bg-gray-50 dark:bg-gray-900 w-full h-screen overflow-hidden\", className)} {...props}>\n        {/* Fixed Sidebar */}\n        <Sidebar\n          collapsed={sidebarCollapsed}\n          onToggle={toggleSidebar}\n          menuItems={sidebarMenuItems}\n          activeItem={activeSidebarItem}\n          onItemClick={(id) => {\n            onSidebarItemClick?.(id);\n            if (typeof window !== \"undefined\" && window.innerWidth < 1024) {\n              setSidebarCollapsed(true);\n            }\n          }}\n          className={cn(\n            props.sidebarClassName,\n            \"max-lg:z-50\"\n          )}\n          title={sidebarTitle}\n          titleLetter={sidebarTitleLetter}\n          headerClassName={sidebarHeaderClassName}\n          style={{\n            zIndex: 50,\n          }}\n          profileButtonProps={profileButtonProps}\n          logoutButtonProps={logoutButtonProps}\n          profileSectionProps={profileSectionProps}\n        />\n\n        {/* Fixed Header */}\n        <DashboardHeader\n          sidebarCollapsed={sidebarCollapsed}\n          onMenuToggle={toggleSidebar}\n          breadcrumbs={breadcrumbs}\n          showSearch={showSearch}\n          searchPlaceholder={searchPlaceholder}\n          onSearchChange={onSearchChange}\n          {...dashboardHeaderProps}\n          className={cn(\n            \"transition-all duration-300 ease-in-out\",\n            \"max-lg:left-0 max-lg:w-full\",\n            sidebarCollapsed ? \"lg:left-16 lg:w-[calc(100%-4rem)]\" : \"lg:left-72 lg:w-[calc(100%-18rem)]\",\n            dashboardHeaderProps?.className\n          )}\n          style={{\n            zIndex: 30,\n            position: \"fixed\",\n            top: 0,\n            ...dashboardHeaderProps?.style\n          }}\n        />\n\n        {/* Main Content Area (scrollable) */}\n        <div\n          className={cn(\n            \"relative h-full transition-all duration-300 ease-in-out\",\n            props.disableSidebarMargin ? \"w-full\" : cn(\n              \"max-lg:ml-0 max-lg:w-full\",\n              sidebarCollapsed ? \"lg:ml-16 lg:w-[calc(100%-4rem)]\" : \"lg:ml-72 lg:w-[calc(100%-18rem)]\"\n            )\n          )}\n          style={{\n            marginTop: \"4.5rem\", // Header height (py-4 + border)\n            height: \"calc(100vh - 4.5rem)\",\n            overflowY: \"auto\",\n          }}\n        >\n          <main className=\"p-4 md:p-10 w-full max-w-full overflow-x-hidden\">\n            {children}\n          </main>\n        </div>\n\n        {/* Mobile Overlay */}\n        {!sidebarCollapsed && (\n          <div\n            className=\"fixed inset-0 bg-black/50 dark:bg-black/80 z-40 backdrop-blur-sm transition-opacity lg:hidden cursor-pointer\"\n            onClick={toggleSidebar}\n            aria-label=\"Close sidebar overlay\"\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nDashboardLayout.displayName = \"DashboardLayout\";\n\nexport { DashboardLayout };"],"names":["_jsxs","_jsx"],"mappings":"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"}