@beyondcorp/beyond-ui 1.1.25 → 1.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -42,7 +42,12 @@ const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "
|
|
|
42
42
|
? centerSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
|
|
43
43
|
: 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" }), jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 border-gray-200 focus:bg-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)
|
|
44
44
|
? rightSlot.map((item, idx) => (jsx("span", { onClick: item.onClick, className: item.onClick ? "cursor-pointer" : undefined, children: item.element }, item.id || idx)))
|
|
45
|
-
: 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: "flex items-center space-x-3 pl-3 border-l border-gray-200",
|
|
45
|
+
: 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) => {
|
|
46
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
47
|
+
e.preventDefault();
|
|
48
|
+
onProfileClick();
|
|
49
|
+
}
|
|
50
|
+
} : 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", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500", 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" })] })] }))] })] }) }));
|
|
46
51
|
});
|
|
47
52
|
DashboardHeader.displayName = "DashboardHeader";
|
|
48
53
|
|
|
@@ -1 +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 border-b border-gray-200 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 hover:text-gray-900 transition-colors\"\n onClick={e => {\n onBreadcrumbClick?.(item, index);\n }}\n >\n {item.label}\n </a>\n ) : (\n <span\n className=\"text-gray-900 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\" />\n <Input\n type=\"text\"\n placeholder={searchPlaceholder}\n value={searchValue}\n onChange={handleSearchChange}\n className=\"pl-10 bg-gray-50 border-gray-200 focus:bg-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 className=\"flex items-center space-x-3 pl-3 border-l border-gray-200\">\n <div\n className=\"hidden sm:block text-right\"\n onClick={onProfileClick}\n style={onProfileClick ? { cursor: \"pointer\" } : undefined}\n >\n <p className=\"text-sm font-medium text-gray-900\">John Doe</p>\n <p className=\"text-xs text-gray-500\">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":"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"}
|
|
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 border-b border-gray-200 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 hover:text-gray-900 transition-colors\"\n onClick={e => {\n onBreadcrumbClick?.(item, index);\n }}\n >\n {item.label}\n </a>\n ) : (\n <span\n className=\"text-gray-900 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\" />\n <Input\n type=\"text\"\n placeholder={searchPlaceholder}\n value={searchValue}\n onChange={handleSearchChange}\n className=\"pl-10 bg-gray-50 border-gray-200 focus:bg-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\">John Doe</p>\n <p className=\"text-xs text-gray-500\">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":"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"}
|