@beyondcorp/beyond-ui 1.1.15 → 1.1.17
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.
|
@@ -8,7 +8,7 @@ import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
|
|
|
8
8
|
import { Badge } from '../Badge/Badge.js';
|
|
9
9
|
import { useBreakpoint } from '../../hooks/useBreakpoint.js';
|
|
10
10
|
|
|
11
|
-
const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, showBreadcrumbs = true, showNotifications = true, showSettings = true, showProfile = true, leftSlot, centerSlot, rightSlot, ...props }, ref) => {
|
|
11
|
+
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, ...props }, ref) => {
|
|
12
12
|
const [searchValue, setSearchValue] = React.useState("");
|
|
13
13
|
const { isAbove } = useBreakpoint();
|
|
14
14
|
const handleSearchChange = (e) => {
|
|
@@ -16,7 +16,7 @@ const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "
|
|
|
16
16
|
setSearchValue(value);
|
|
17
17
|
onSearchChange?.(value);
|
|
18
18
|
};
|
|
19
|
-
return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4", children: [leftSlot, jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), showBreadcrumbs && isAbove('md') && (jsx("nav", { className: "flex items-center space-x-2 text-sm", 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 hover:text-gray-900 transition-colors", children: item.label })) : (jsx("span", { className: "text-gray-900 font-medium", children: item.label }))] }, index))) }))] }), centerSlot ? (jsx("div", { className: "flex-1 flex justify-center", children: centerSlot })) : (showSearch && (jsx("div", { className: "flex-1 max-w-md mx-8", 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" })] }) }))), jsxs("div", { className: "flex items-center space-x-3", children: [rightSlot, showNotifications && (jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", 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" })] }) })), showSettings && (jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) })), showProfile && (jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", 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" })] })] }))] })] }) }));
|
|
19
|
+
return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4", children: [leftSlot, showMenuButton && (jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) })), showBreadcrumbs && isAbove('md') && (jsx("nav", { className: "flex items-center space-x-2 text-sm", 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 hover:text-gray-900 transition-colors", children: item.label })) : (jsx("span", { className: "text-gray-900 font-medium", children: item.label }))] }, index))) }))] }), centerSlot ? (jsx("div", { className: "flex-1 flex justify-center", children: centerSlot })) : (showSearch && (jsx("div", { className: "flex-1 max-w-md mx-8", 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" })] }) }))), jsxs("div", { className: "flex items-center space-x-3", children: [rightSlot, showNotifications && (jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", 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" })] }) })), showSettings && (jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) })), showProfile && (jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", 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" })] })] }))] })] }) }));
|
|
20
20
|
});
|
|
21
21
|
DashboardHeader.displayName = "DashboardHeader";
|
|
22
22
|
|
|
@@ -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\ninterface DashboardHeaderProps {\n className?: string;\n breadcrumbs?: BreadcrumbItem[];\n onMenuToggle?: () => void;\n sidebarCollapsed?: boolean;\n showSearch?: boolean;\n searchPlaceholder?: string;\n onSearchChange?: (value: string) => void;\n style?: React.CSSProperties;\n\n // New flexible API\n showBreadcrumbs?: boolean; // default true\n showNotifications?: boolean; // default true\n showSettings?: boolean; // default true\n showProfile?: boolean; // default true\n\n leftSlot?: React.ReactNode;\n centerSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\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 leftSlot,\n centerSlot,\n rightSlot,\n ...props\n }, ref) => {\n const [searchValue, setSearchValue] = React.useState(\"\");\n const { isAbove } = useBreakpoint();\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 items-center justify-between px-6 py-4\">\n {/* Left Section */}\n <div className=\"flex items-center space-x-4\">\n {/* Custom left slot */}\n {leftSlot}\n\n {/* Mobile Menu Button */}\n <Button\n
|
|
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\ninterface DashboardHeaderProps {\n className?: string;\n breadcrumbs?: BreadcrumbItem[];\n onMenuToggle?: () => void;\n sidebarCollapsed?: boolean;\n showSearch?: boolean;\n searchPlaceholder?: string;\n onSearchChange?: (value: string) => void;\n style?: React.CSSProperties;\n\n // New flexible API\n showBreadcrumbs?: boolean; // default true\n showNotifications?: boolean; // default true\n showSettings?: boolean; // default true\n showProfile?: boolean; // default true\n showMenuButton?: boolean; // default true\n\n leftSlot?: React.ReactNode;\n centerSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\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 ...props\n }, ref) => {\n const [searchValue, setSearchValue] = React.useState(\"\");\n const { isAbove } = useBreakpoint();\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 items-center justify-between px-6 py-4\">\n {/* Left Section */}\n <div className=\"flex items-center space-x-4\">\n {/* Custom left slot */}\n {leftSlot}\n\n {/* Mobile Menu Button */}\n {showMenuButton && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={onMenuToggle}\n className=\"md:hidden\"\n >\n <Menu className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* Breadcrumbs */}\n {showBreadcrumbs && isAbove('md') && (\n <nav className=\"flex items-center space-x-2 text-sm\">\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 >\n {item.label}\n </a>\n ) : (\n <span className=\"text-gray-900 font-medium\">\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 flex justify-center\">{centerSlot}</div>\n ) : (\n showSearch && (\n <div className=\"flex-1 max-w-md mx-8\">\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\"\n />\n </div>\n </div>\n )\n )}\n\n {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Custom right slot */}\n {rightSlot}\n\n {/* Notifications */}\n {showNotifications && (\n <div className=\"relative\">\n <Button variant=\"ghost\" size=\"sm\" className=\"relative\">\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 {showSettings && (\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* User Profile */}\n {showProfile && (\n <div className=\"flex items-center space-x-3 pl-3 border-l border-gray-200\">\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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"}
|