@beyondcorp/beyond-ui 1.1.5 → 1.1.9
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.
- package/dist/components/Modal/Modal.example.js +3 -3
- package/dist/components/Modal/Modal.example.js.map +1 -1
- package/dist/components/Modal/Modal.js +52 -2
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.js +2 -1
- package/dist/components/Sidebar/Sidebar.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import * as React from 'react';
|
|
3
2
|
import { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from './Modal.js';
|
|
4
3
|
import { Button } from '../Button/Button.js';
|
|
4
|
+
import { useToggle } from '../../hooks/useToggle.js';
|
|
5
5
|
|
|
6
6
|
const ModalExample = () => {
|
|
7
|
-
const [open, setOpen] =
|
|
8
|
-
return (jsxs("div", { children: [jsx(Button, { onClick:
|
|
7
|
+
const [open, toggleOpen, setOpen] = useToggle(false);
|
|
8
|
+
return (jsxs("div", { children: [jsx(Button, { onClick: toggleOpen, children: "Show Modal" }), jsxs(Modal, { open: open, onOpenChange: setOpen, children: [jsx(ModalHeader, { children: jsx(ModalTitle, { children: "Demo Modal" }) }), jsx(ModalContent, { children: jsx("p", { children: "This is a basic modal dialog." }) }), jsx(ModalFooter, { children: jsx(Button, { variant: "primary", onClick: () => setOpen(false), children: "Close" }) })] })] }));
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { ModalExample };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.example.js","sources":["../../../src/components/Modal/Modal.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from \"./Modal\";\r\nimport { Button } from \"../Button\";\r\n\r\nexport const ModalExample: React.FC = () => {\r\n const [open, setOpen] =
|
|
1
|
+
{"version":3,"file":"Modal.example.js","sources":["../../../src/components/Modal/Modal.example.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from \"./Modal\";\r\nimport { Button } from \"../Button\";\r\n\r\nimport { useToggle } from \"../../hooks/useToggle\";\r\n\r\nexport const ModalExample: React.FC = () => {\r\n const [open, toggleOpen, setOpen] = useToggle(false);\r\n return (\r\n <div>\r\n <Button onClick={toggleOpen}>Show Modal</Button>\r\n <Modal open={open} onOpenChange={setOpen}>\r\n <ModalHeader>\r\n <ModalTitle>Demo Modal</ModalTitle>\r\n </ModalHeader>\r\n <ModalContent>\r\n <p>This is a basic modal dialog.</p>\r\n </ModalContent>\r\n <ModalFooter>\r\n <Button variant=\"primary\" onClick={() => setOpen(false)}>Close</Button>\r\n </ModalFooter>\r\n </Modal>\r\n </div>\r\n );\r\n};"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAMO,MAAM,YAAY,GAAa,MAAK;AACzC,IAAA,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC;IACpD,QACEA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,UAAU,EAAA,QAAA,EAAA,YAAA,EAAA,CAAqB,EAChDD,IAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAA,QAAA,EAAA,CACtCC,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,UAAU,EAAA,EAAA,QAAA,EAAA,YAAA,EAAA,CAAwB,EAAA,CACvB,EACdA,GAAA,CAAC,YAAY,EAAA,EAAA,QAAA,EACXA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,CAAoC,EAAA,CACvB,EACfA,GAAA,CAAC,WAAW,EAAA,EAAA,QAAA,EACVA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAA,QAAA,EAAA,OAAA,EAAA,CAAgB,EAAA,CAC3D,CAAA,EAAA,CACR,CAAA,EAAA,CACJ;AAEV;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { X } from 'lucide-react';
|
|
3
4
|
import { cva } from 'class-variance-authority';
|
|
4
5
|
import { cn } from '../../utils/cn.js';
|
|
5
6
|
|
|
6
|
-
const modalVariants = cva("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-
|
|
7
|
+
const modalVariants = cva("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg", {
|
|
7
8
|
variants: {
|
|
8
9
|
size: {
|
|
9
10
|
sm: "max-w-sm",
|
|
@@ -21,9 +22,58 @@ const Modal = ({ open, onOpenChange, children, size, }) => {
|
|
|
21
22
|
const handleClose = () => {
|
|
22
23
|
onOpenChange?.(false);
|
|
23
24
|
};
|
|
25
|
+
const modalContentRef = React.useRef(null);
|
|
26
|
+
// Only close if click is on backdrop, not inside modal content
|
|
27
|
+
const handleBackdropClick = (e) => {
|
|
28
|
+
if (e.target === e.currentTarget) {
|
|
29
|
+
handleClose();
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
// Close on Escape key
|
|
33
|
+
React.useEffect(() => {
|
|
34
|
+
if (!open)
|
|
35
|
+
return;
|
|
36
|
+
const onKeyDown = (e) => {
|
|
37
|
+
if (e.key === "Escape") {
|
|
38
|
+
handleClose();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
window.addEventListener("keydown", onKeyDown);
|
|
42
|
+
return () => window.removeEventListener("keydown", onKeyDown);
|
|
43
|
+
}, [open]);
|
|
44
|
+
// Focus trap
|
|
45
|
+
React.useEffect(() => {
|
|
46
|
+
if (!open || !modalContentRef.current)
|
|
47
|
+
return;
|
|
48
|
+
const focusableEls = modalContentRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
49
|
+
const firstEl = focusableEls[0];
|
|
50
|
+
const lastEl = focusableEls[focusableEls.length - 1];
|
|
51
|
+
const trap = (e) => {
|
|
52
|
+
if (e.key !== "Tab")
|
|
53
|
+
return;
|
|
54
|
+
if (focusableEls.length === 0)
|
|
55
|
+
return;
|
|
56
|
+
if (e.shiftKey) {
|
|
57
|
+
if (document.activeElement === firstEl) {
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
lastEl.focus();
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
if (document.activeElement === lastEl) {
|
|
64
|
+
e.preventDefault();
|
|
65
|
+
firstEl.focus();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
document.addEventListener("keydown", trap);
|
|
70
|
+
// Focus first element
|
|
71
|
+
firstEl?.focus();
|
|
72
|
+
return () => document.removeEventListener("keydown", trap);
|
|
73
|
+
}, [open]);
|
|
24
74
|
if (!open)
|
|
25
75
|
return null;
|
|
26
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", onClick:
|
|
76
|
+
return (jsxs(Fragment, { children: [jsx("div", { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", onClick: handleBackdropClick, "aria-hidden": "true" }), jsxs("div", { ref: modalContentRef, className: cn(modalVariants({ size })), role: "dialog", "aria-modal": "true", children: [jsxs("button", { onClick: handleClose, className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:pointer-events-none", "aria-label": "Close", children: [jsx(X, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Close" })] }), children] })] }));
|
|
27
77
|
};
|
|
28
78
|
const ModalHeader = ({ className, ...props }) => (jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
|
|
29
79
|
const ModalTitle = ({ className, ...props }) => (jsx("h2", { className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst modalVariants = cva(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../utils/cn\";\n\nconst modalVariants = cva(\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg\",\n {\n variants: {\n size: {\n sm: \"max-w-sm\",\n md: \"max-w-lg\",\n lg: \"max-w-2xl\",\n xl: \"max-w-4xl\",\n full: \"max-w-[95vw] max-h-[95vh]\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n }\n);\n\ninterface ModalProps extends VariantProps<typeof modalVariants> {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n children: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({ \n open, \n onOpenChange, \n children, \n size,\n}) => {\n const handleClose = () => {\n onOpenChange?.(false);\n };\n\n const modalContentRef = React.useRef<HTMLDivElement>(null);\n\n // Only close if click is on backdrop, not inside modal content\n const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {\n if (e.target === e.currentTarget) {\n handleClose();\n }\n };\n\n // Close on Escape key\n React.useEffect(() => {\n if (!open) return;\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n handleClose();\n }\n };\n window.addEventListener(\"keydown\", onKeyDown);\n return () => window.removeEventListener(\"keydown\", onKeyDown);\n }, [open]);\n\n // Focus trap\n React.useEffect(() => {\n if (!open || !modalContentRef.current) return;\n const focusableEls = modalContentRef.current.querySelectorAll<HTMLElement>(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n );\n const firstEl = focusableEls[0];\n const lastEl = focusableEls[focusableEls.length - 1];\n\n const trap = (e: KeyboardEvent) => {\n if (e.key !== \"Tab\") return;\n if (focusableEls.length === 0) return;\n if (e.shiftKey) {\n if (document.activeElement === firstEl) {\n e.preventDefault();\n lastEl.focus();\n }\n } else {\n if (document.activeElement === lastEl) {\n e.preventDefault();\n firstEl.focus();\n }\n }\n };\n\n document.addEventListener(\"keydown\", trap);\n // Focus first element\n firstEl?.focus();\n return () => document.removeEventListener(\"keydown\", trap);\n }, [open]);\n\n if (!open) return null;\n\n return (\n <>\n {/* Backdrop */}\n <div\n className=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\"\n onClick={handleBackdropClick}\n aria-hidden=\"true\"\n />\n\n {/* Modal Content */}\n <div\n ref={modalContentRef}\n className={cn(modalVariants({ size }))}\n role=\"dialog\"\n aria-modal=\"true\"\n >\n <button\n onClick={handleClose}\n className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:pointer-events-none\"\n aria-label=\"Close\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n {children}\n </div>\n </>\n );\n};\n\nconst ModalHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n className,\n ...props\n}) => (\n <div\n className={cn(\n \"flex flex-col space-y-1.5 text-center sm:text-left\",\n className\n )}\n {...props}\n />\n);\n\nconst ModalTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h2\n className={cn(\n \"text-lg font-semibold leading-none tracking-tight\",\n className\n )}\n {...props}\n />\n);\n\nconst ModalDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({\n className,\n ...props\n}) => (\n <p\n className={cn(\"text-sm text-gray-500\", className)}\n {...props}\n />\n);\n\nconst ModalContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n className,\n ...props\n}) => (\n <div className={cn(\"grid gap-4 py-4\", className)} {...props} />\n);\n\nconst ModalFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\n className,\n ...props\n}) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className\n )}\n {...props}\n />\n);\n\nexport {\n Modal,\n ModalHeader,\n ModalTitle,\n ModalDescription,\n ModalContent,\n ModalFooter,\n modalVariants,\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
@@ -114,7 +114,8 @@ const Sidebar = React.forwardRef(({ className, collapsed = false, onToggle, menu
|
|
|
114
114
|
};
|
|
115
115
|
// Profile section props with fallbacks
|
|
116
116
|
const { avatarUrl = "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64", name = "John Doe", email = "john@company.com", avatarFallback = "JD", collapsedAvatarSize = "sm", expandedAvatarSize = "sm", onClick } = profileSectionProps || {};
|
|
117
|
-
return (jsxs("div", { ref: ref, className: cn("flex flex-col h-screen", sidebarVariants({ collapsed }), className), style: props.style, ...props, children: [jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [!collapsed && (jsx(SidebarHeader, { title: title, letter: titleLetter, className: headerClassName })), jsx("button", { onClick: onToggle, className: "p-1.5 rounded-lg hover:bg-gray-100 transition-colors", children: collapsed ? (jsx(ChevronRight, { className: "h-4 w-4 text-gray-600" })) : (jsx(ChevronLeft, { className: "h-4 w-4 text-gray-600" })) })] }), jsx("nav", { className: "flex-1 px-4 py-6 space-y-2 overflow-y-auto", children: menuItems.map(item => renderMenuItem(item)) }), jsx("div", { className: "border-t border-gray-200 p-4", children: collapsed ? (jsx("div", { className: "flex justify-center", children:
|
|
117
|
+
return (jsxs("div", { ref: ref, className: cn("flex flex-col h-screen", sidebarVariants({ collapsed }), className), style: props.style, ...props, children: [jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [!collapsed && (jsx(SidebarHeader, { title: title, letter: titleLetter, className: headerClassName })), jsx("button", { onClick: onToggle, className: "p-1.5 rounded-lg hover:bg-gray-100 transition-colors", children: collapsed ? (jsx(ChevronRight, { className: "h-4 w-4 text-gray-600" })) : (jsx(ChevronLeft, { className: "h-4 w-4 text-gray-600" })) })] }), jsx("nav", { className: "flex-1 px-4 py-6 space-y-2 overflow-y-auto", children: menuItems.map(item => renderMenuItem(item)) }), jsx("div", { className: "border-t border-gray-200 p-4", children: collapsed ? (jsx("div", { className: "flex justify-center", children: jsx("div", { className: cn("rounded-lg transition-colors", onClick && "cursor-pointer hover:bg-primary-50 focus:bg-primary-100 outline-none ring-2 ring-transparent focus:ring-primary-300"), tabIndex: onClick ? 0 : undefined, role: onClick ? "button" : undefined, "aria-label": onClick ? "View profile" : undefined, onClick: onClick, onKeyDown: onClick ? (e) => { if (e.key === "Enter" || e.key === " ")
|
|
118
|
+
onClick(e); } : undefined, children: jsxs(Avatar, { size: collapsedAvatarSize, children: [jsx(AvatarImage, { src: avatarUrl }), jsx(AvatarFallback, { children: avatarFallback })] }) }) })) : (jsxs("div", { className: "space-y-3", children: [jsxs("div", { className: cn("flex items-center space-x-3 rounded-lg transition-colors", onClick && "cursor-pointer hover:bg-primary-50 focus:bg-primary-100 outline-none ring-2 ring-transparent focus:ring-primary-300"), tabIndex: onClick ? 0 : undefined, role: onClick ? "button" : undefined, "aria-label": onClick ? "View profile" : undefined, onClick: onClick, onKeyDown: onClick ? (e) => { if (e.key === "Enter" || e.key === " ")
|
|
118
119
|
onClick(e); } : undefined, children: [jsxs(Avatar, { size: expandedAvatarSize, children: [jsx(AvatarImage, { src: avatarUrl }), jsx(AvatarFallback, { children: avatarFallback })] }), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: name }), jsx("p", { className: "text-xs text-gray-500 truncate", children: email })] })] }), jsxs("div", { className: "flex space-x-2", children: [jsx(ProfileButton, { className: "flex-1", ...profileButtonProps }), jsx(LogoutButton, { className: "flex-1", ...logoutButtonProps })] })] })) })] }));
|
|
119
120
|
});
|
|
120
121
|
Sidebar.displayName = "Sidebar";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { \r\n ChevronLeft, \r\n ChevronRight, \r\n ChevronDown, \r\n Home, \r\n BarChart3, \r\n Users, \r\n Settings, \r\n FileText, \r\n Calendar, \r\n Mail, \r\n Bell,\r\n LogOut,\r\n User\r\n} from \"lucide-react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\r\nimport { Badge } from \"../Badge\";\r\nimport { ProfileButton } from \"./ProfileButton\";\r\nimport { LogoutButton } from \"./LogoutButton\";\r\n\r\nconst sidebarVariants = cva(\r\n \"fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out\",\r\n {\r\n variants: {\r\n collapsed: {\r\n false: \"w-72\",\r\n true: \"w-16\",\r\n },\r\n },\r\n defaultVariants: {\r\n collapsed: false,\r\n },\r\n }\r\n);\r\n\r\nconst menuItemVariants = cva(\r\n \"flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group\",\r\n {\r\n variants: {\r\n active: {\r\n true: \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\",\r\n false: \"text-gray-700 hover:bg-gray-50 hover:text-gray-900\",\r\n },\r\n collapsed: {\r\n true: \"justify-center px-2\",\r\n false: \"justify-start\",\r\n },\r\n },\r\n defaultVariants: {\r\n active: false,\r\n collapsed: false,\r\n },\r\n }\r\n);\r\n\r\ninterface MenuItem {\r\n id: string;\r\n label: string;\r\n icon: React.ReactNode;\r\n href?: string;\r\n badge?: string;\r\n children?: MenuItem[];\r\n}\r\n\r\nimport { SidebarHeader } from \"./SidebarHeader\";\r\n\r\nexport interface SidebarProfileSectionProps {\r\n avatarUrl?: string;\r\n name?: string;\r\n email?: string;\r\n avatarFallback?: string;\r\n collapsedAvatarSize?: \"sm\" | \"md\" | \"lg\";\r\n expandedAvatarSize?: \"sm\" | \"md\" | \"lg\";\r\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\r\n}\r\n\r\ninterface SidebarProps extends VariantProps<typeof sidebarVariants> {\r\n className?: string;\r\n onToggle?: () => void;\r\n menuItems?: MenuItem[];\r\n activeItem?: string;\r\n onItemClick?: (itemId: string) => void;\r\n /** Sidebar header title (default: \"Beyond\") */\r\n title?: string;\r\n /** Sidebar header letter (default: \"B\") */\r\n titleLetter?: string;\r\n /** Optional className for SidebarHeader */\r\n headerClassName?: string;\r\n style?: React.CSSProperties;\r\n /** Props for ProfileButton (stateless usage) */\r\n profileButtonProps?: import(\"./ProfileButton\").ProfileButtonProps;\r\n /** Props for LogoutButton (stateless usage) */\r\n logoutButtonProps?: import(\"./LogoutButton\").LogoutButtonProps;\r\n /** Dynamic profile section props */\r\n profileSectionProps?: SidebarProfileSectionProps;\r\n}\r\n\r\nconst defaultMenuItems: MenuItem[] = [\r\n {\r\n id: \"dashboard\",\r\n label: \"Dashboard\",\r\n icon: <Home className=\"h-5 w-5\" />,\r\n href: \"/dashboard\",\r\n },\r\n {\r\n id: \"analytics\",\r\n label: \"Analytics\",\r\n icon: <BarChart3 className=\"h-5 w-5\" />,\r\n href: \"/analytics\",\r\n badge: \"New\",\r\n },\r\n {\r\n id: \"users\",\r\n label: \"Users\",\r\n icon: <Users className=\"h-5 w-5\" />,\r\n children: [\r\n { id: \"all-users\", label: \"All Users\", icon: <Users className=\"h-4 w-4\" /> },\r\n { id: \"user-roles\", label: \"User Roles\", icon: <Settings className=\"h-4 w-4\" /> },\r\n ],\r\n },\r\n {\r\n id: \"reports\",\r\n label: \"Reports\",\r\n icon: <FileText className=\"h-5 w-5\" />,\r\n href: \"/reports\",\r\n },\r\n {\r\n id: \"calendar\",\r\n label: \"Calendar\",\r\n icon: <Calendar className=\"h-5 w-5\" />,\r\n href: \"/calendar\",\r\n },\r\n {\r\n id: \"messages\",\r\n label: \"Messages\",\r\n icon: <Mail className=\"h-5 w-5\" />,\r\n href: \"/messages\",\r\n badge: \"3\",\r\n },\r\n {\r\n id: \"notifications\",\r\n label: \"Notifications\",\r\n icon: <Bell className=\"h-5 w-5\" />,\r\n href: \"/notifications\",\r\n },\r\n {\r\n id: \"settings\",\r\n label: \"Settings\",\r\n icon: <Settings className=\"h-5 w-5\" />,\r\n href: \"/settings\",\r\n },\r\n];\r\n\r\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\r\n ({\r\n className,\r\n collapsed = false,\r\n onToggle,\r\n menuItems = defaultMenuItems,\r\n activeItem = \"dashboard\",\r\n onItemClick,\r\n title = \"Beyond\",\r\n titleLetter = \"B\",\r\n headerClassName,\r\n profileButtonProps,\r\n logoutButtonProps,\r\n profileSectionProps,\r\n ...props\r\n }, ref) => {\r\n const [expandedItems, setExpandedItems] = React.useState<string[]>([]);\r\n\r\n const toggleExpanded = (itemId: string) => {\r\n setExpandedItems(prev => \r\n prev.includes(itemId) \r\n ? prev.filter(id => id !== itemId)\r\n : [...prev, itemId]\r\n );\r\n };\r\n\r\n const handleItemClick = (item: MenuItem) => {\r\n if (item.children) {\r\n toggleExpanded(item.id);\r\n } else {\r\n onItemClick?.(item.id);\r\n }\r\n };\r\n\r\n const renderMenuItem = (item: MenuItem, level = 0) => {\r\n const isActive = activeItem === item.id;\r\n const isExpanded = expandedItems.includes(item.id);\r\n const hasChildren = item.children && item.children.length > 0;\r\n\r\n return (\r\n <div key={item.id}>\r\n <button\r\n onClick={() => handleItemClick(item)}\r\n className={cn(\r\n menuItemVariants({ active: isActive, collapsed }),\r\n level > 0 && \"ml-4 pl-8\",\r\n \"relative\"\r\n )}\r\n >\r\n <div className=\"flex items-center min-w-0 flex-1\">\r\n <div className=\"flex-shrink-0\">\r\n {item.icon}\r\n </div>\r\n {!collapsed && (\r\n <>\r\n <span className=\"ml-3 truncate\">{item.label}</span>\r\n {item.badge && (\r\n <Badge variant=\"danger\" className=\"ml-auto text-xs\">\r\n {item.badge}\r\n </Badge>\r\n )}\r\n {hasChildren && (\r\n <ChevronDown \r\n className={cn(\r\n \"ml-auto h-4 w-4 transition-transform duration-200\",\r\n isExpanded && \"rotate-180\"\r\n )}\r\n />\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </button>\r\n \r\n {hasChildren && !collapsed && isExpanded && (\r\n <div className=\"mt-1 space-y-1\">\r\n {item.children?.map(child => renderMenuItem(child, level + 1))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n };\r\n\r\n // Profile section props with fallbacks\r\n const {\r\n avatarUrl = \"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\",\r\n name = \"John Doe\",\r\n email = \"john@company.com\",\r\n avatarFallback = \"JD\",\r\n collapsedAvatarSize = \"sm\",\r\n expandedAvatarSize = \"sm\",\r\n onClick\r\n } = profileSectionProps || {};\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-col h-screen\",\r\n sidebarVariants({ collapsed }),\r\n className\r\n )}\r\n style={props.style}\r\n {...props}\r\n >\r\n {/* Sidebar Header */}\r\n <div className=\"flex items-center justify-between p-4 border-b border-gray-200\">\r\n {!collapsed && (\r\n <SidebarHeader\r\n title={title}\r\n letter={titleLetter}\r\n className={headerClassName}\r\n />\r\n )}\r\n <button\r\n onClick={onToggle}\r\n className=\"p-1.5 rounded-lg hover:bg-gray-100 transition-colors\"\r\n >\r\n {collapsed ? (\r\n <ChevronRight className=\"h-4 w-4 text-gray-600\" />\r\n ) : (\r\n <ChevronLeft className=\"h-4 w-4 text-gray-600\" />\r\n )}\r\n </button>\r\n </div>\r\n\r\n {/* Navigation Menu */}\r\n <nav className=\"flex-1 px-4 py-6 space-y-2 overflow-y-auto\">\r\n {menuItems.map(item => renderMenuItem(item))}\r\n </nav>\r\n\r\n {/* User Profile Section */}\r\n <div className=\"border-t border-gray-200 p-4\">\r\n {collapsed ? (\r\n <div className=\"flex justify-center\">\r\n <Avatar size={collapsedAvatarSize}>\r\n <AvatarImage src={avatarUrl} />\r\n <AvatarFallback>{avatarFallback}</AvatarFallback>\r\n </Avatar>\r\n </div>\r\n ) : (\r\n <div className=\"space-y-3\">\r\n <div\r\n className={cn(\r\n \"flex items-center space-x-3 rounded-lg transition-colors\",\r\n onClick && \"cursor-pointer hover:bg-primary-50 focus:bg-primary-100 outline-none ring-2 ring-transparent focus:ring-primary-300\"\r\n )}\r\n tabIndex={onClick ? 0 : undefined}\r\n role={onClick ? \"button\" : undefined}\r\n aria-label={onClick ? \"View profile\" : undefined}\r\n onClick={onClick}\r\n onKeyDown={onClick ? (e) => { if (e.key === \"Enter\" || e.key === \" \") onClick(e as any); } : undefined}\r\n >\r\n <Avatar size={expandedAvatarSize}>\r\n <AvatarImage src={avatarUrl} />\r\n <AvatarFallback>{avatarFallback}</AvatarFallback>\r\n </Avatar>\r\n <div className=\"flex-1 min-w-0\">\r\n <p className=\"text-sm font-medium text-gray-900 truncate\">\r\n {name}\r\n </p>\r\n <p className=\"text-xs text-gray-500 truncate\">\r\n {email}\r\n </p>\r\n </div>\r\n </div>\r\n <div className=\"flex space-x-2\">\r\n {/* Reusable, theme-agnostic profile/logout buttons */}\r\n <ProfileButton className=\"flex-1\" {...profileButtonProps} />\r\n <LogoutButton className=\"flex-1\" {...logoutButtonProps} />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nSidebar.displayName = \"Sidebar\";\r\n\r\nexport { Sidebar, sidebarVariants, type MenuItem };"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Sidebar.js","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { \r\n ChevronLeft, \r\n ChevronRight, \r\n ChevronDown, \r\n Home, \r\n BarChart3, \r\n Users, \r\n Settings, \r\n FileText, \r\n Calendar, \r\n Mail, \r\n Bell,\r\n LogOut,\r\n User\r\n} from \"lucide-react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\r\nimport { Badge } from \"../Badge\";\r\nimport { ProfileButton } from \"./ProfileButton\";\r\nimport { LogoutButton } from \"./LogoutButton\";\r\n\r\nconst sidebarVariants = cva(\r\n \"fixed left-0 top-0 z-40 h-screen bg-white border-r border-gray-200 transition-all duration-300 ease-in-out\",\r\n {\r\n variants: {\r\n collapsed: {\r\n false: \"w-72\",\r\n true: \"w-16\",\r\n },\r\n },\r\n defaultVariants: {\r\n collapsed: false,\r\n },\r\n }\r\n);\r\n\r\nconst menuItemVariants = cva(\r\n \"flex items-center w-full px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 group\",\r\n {\r\n variants: {\r\n active: {\r\n true: \"bg-primary-50 text-primary-700 border-r-2 border-primary-600\",\r\n false: \"text-gray-700 hover:bg-gray-50 hover:text-gray-900\",\r\n },\r\n collapsed: {\r\n true: \"justify-center px-2\",\r\n false: \"justify-start\",\r\n },\r\n },\r\n defaultVariants: {\r\n active: false,\r\n collapsed: false,\r\n },\r\n }\r\n);\r\n\r\ninterface MenuItem {\r\n id: string;\r\n label: string;\r\n icon: React.ReactNode;\r\n href?: string;\r\n badge?: string;\r\n children?: MenuItem[];\r\n}\r\n\r\nimport { SidebarHeader } from \"./SidebarHeader\";\r\n\r\nexport interface SidebarProfileSectionProps {\r\n avatarUrl?: string;\r\n name?: string;\r\n email?: string;\r\n avatarFallback?: string;\r\n collapsedAvatarSize?: \"sm\" | \"md\" | \"lg\";\r\n expandedAvatarSize?: \"sm\" | \"md\" | \"lg\";\r\n onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\r\n}\r\n\r\ninterface SidebarProps extends VariantProps<typeof sidebarVariants> {\r\n className?: string;\r\n onToggle?: () => void;\r\n menuItems?: MenuItem[];\r\n activeItem?: string;\r\n onItemClick?: (itemId: string) => void;\r\n /** Sidebar header title (default: \"Beyond\") */\r\n title?: string;\r\n /** Sidebar header letter (default: \"B\") */\r\n titleLetter?: string;\r\n /** Optional className for SidebarHeader */\r\n headerClassName?: string;\r\n style?: React.CSSProperties;\r\n /** Props for ProfileButton (stateless usage) */\r\n profileButtonProps?: import(\"./ProfileButton\").ProfileButtonProps;\r\n /** Props for LogoutButton (stateless usage) */\r\n logoutButtonProps?: import(\"./LogoutButton\").LogoutButtonProps;\r\n /** Dynamic profile section props */\r\n profileSectionProps?: SidebarProfileSectionProps;\r\n}\r\n\r\nconst defaultMenuItems: MenuItem[] = [\r\n {\r\n id: \"dashboard\",\r\n label: \"Dashboard\",\r\n icon: <Home className=\"h-5 w-5\" />,\r\n href: \"/dashboard\",\r\n },\r\n {\r\n id: \"analytics\",\r\n label: \"Analytics\",\r\n icon: <BarChart3 className=\"h-5 w-5\" />,\r\n href: \"/analytics\",\r\n badge: \"New\",\r\n },\r\n {\r\n id: \"users\",\r\n label: \"Users\",\r\n icon: <Users className=\"h-5 w-5\" />,\r\n children: [\r\n { id: \"all-users\", label: \"All Users\", icon: <Users className=\"h-4 w-4\" /> },\r\n { id: \"user-roles\", label: \"User Roles\", icon: <Settings className=\"h-4 w-4\" /> },\r\n ],\r\n },\r\n {\r\n id: \"reports\",\r\n label: \"Reports\",\r\n icon: <FileText className=\"h-5 w-5\" />,\r\n href: \"/reports\",\r\n },\r\n {\r\n id: \"calendar\",\r\n label: \"Calendar\",\r\n icon: <Calendar className=\"h-5 w-5\" />,\r\n href: \"/calendar\",\r\n },\r\n {\r\n id: \"messages\",\r\n label: \"Messages\",\r\n icon: <Mail className=\"h-5 w-5\" />,\r\n href: \"/messages\",\r\n badge: \"3\",\r\n },\r\n {\r\n id: \"notifications\",\r\n label: \"Notifications\",\r\n icon: <Bell className=\"h-5 w-5\" />,\r\n href: \"/notifications\",\r\n },\r\n {\r\n id: \"settings\",\r\n label: \"Settings\",\r\n icon: <Settings className=\"h-5 w-5\" />,\r\n href: \"/settings\",\r\n },\r\n];\r\n\r\nconst Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(\r\n ({\r\n className,\r\n collapsed = false,\r\n onToggle,\r\n menuItems = defaultMenuItems,\r\n activeItem = \"dashboard\",\r\n onItemClick,\r\n title = \"Beyond\",\r\n titleLetter = \"B\",\r\n headerClassName,\r\n profileButtonProps,\r\n logoutButtonProps,\r\n profileSectionProps,\r\n ...props\r\n }, ref) => {\r\n const [expandedItems, setExpandedItems] = React.useState<string[]>([]);\r\n\r\n const toggleExpanded = (itemId: string) => {\r\n setExpandedItems(prev => \r\n prev.includes(itemId) \r\n ? prev.filter(id => id !== itemId)\r\n : [...prev, itemId]\r\n );\r\n };\r\n\r\n const handleItemClick = (item: MenuItem) => {\r\n if (item.children) {\r\n toggleExpanded(item.id);\r\n } else {\r\n onItemClick?.(item.id);\r\n }\r\n };\r\n\r\n const renderMenuItem = (item: MenuItem, level = 0) => {\r\n const isActive = activeItem === item.id;\r\n const isExpanded = expandedItems.includes(item.id);\r\n const hasChildren = item.children && item.children.length > 0;\r\n\r\n return (\r\n <div key={item.id}>\r\n <button\r\n onClick={() => handleItemClick(item)}\r\n className={cn(\r\n menuItemVariants({ active: isActive, collapsed }),\r\n level > 0 && \"ml-4 pl-8\",\r\n \"relative\"\r\n )}\r\n >\r\n <div className=\"flex items-center min-w-0 flex-1\">\r\n <div className=\"flex-shrink-0\">\r\n {item.icon}\r\n </div>\r\n {!collapsed && (\r\n <>\r\n <span className=\"ml-3 truncate\">{item.label}</span>\r\n {item.badge && (\r\n <Badge variant=\"danger\" className=\"ml-auto text-xs\">\r\n {item.badge}\r\n </Badge>\r\n )}\r\n {hasChildren && (\r\n <ChevronDown \r\n className={cn(\r\n \"ml-auto h-4 w-4 transition-transform duration-200\",\r\n isExpanded && \"rotate-180\"\r\n )}\r\n />\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </button>\r\n \r\n {hasChildren && !collapsed && isExpanded && (\r\n <div className=\"mt-1 space-y-1\">\r\n {item.children?.map(child => renderMenuItem(child, level + 1))}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n };\r\n\r\n // Profile section props with fallbacks\r\n const {\r\n avatarUrl = \"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\",\r\n name = \"John Doe\",\r\n email = \"john@company.com\",\r\n avatarFallback = \"JD\",\r\n collapsedAvatarSize = \"sm\",\r\n expandedAvatarSize = \"sm\",\r\n onClick\r\n } = profileSectionProps || {};\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex flex-col h-screen\",\r\n sidebarVariants({ collapsed }),\r\n className\r\n )}\r\n style={props.style}\r\n {...props}\r\n >\r\n {/* Sidebar Header */}\r\n <div className=\"flex items-center justify-between p-4 border-b border-gray-200\">\r\n {!collapsed && (\r\n <SidebarHeader\r\n title={title}\r\n letter={titleLetter}\r\n className={headerClassName}\r\n />\r\n )}\r\n <button\r\n onClick={onToggle}\r\n className=\"p-1.5 rounded-lg hover:bg-gray-100 transition-colors\"\r\n >\r\n {collapsed ? (\r\n <ChevronRight className=\"h-4 w-4 text-gray-600\" />\r\n ) : (\r\n <ChevronLeft className=\"h-4 w-4 text-gray-600\" />\r\n )}\r\n </button>\r\n </div>\r\n\r\n {/* Navigation Menu */}\r\n <nav className=\"flex-1 px-4 py-6 space-y-2 overflow-y-auto\">\r\n {menuItems.map(item => renderMenuItem(item))}\r\n </nav>\r\n\r\n {/* User Profile Section */}\r\n <div className=\"border-t border-gray-200 p-4\">\r\n {collapsed ? (\r\n <div className=\"flex justify-center\">\r\n <div\r\n className={cn(\r\n \"rounded-lg transition-colors\",\r\n onClick && \"cursor-pointer hover:bg-primary-50 focus:bg-primary-100 outline-none ring-2 ring-transparent focus:ring-primary-300\"\r\n )}\r\n tabIndex={onClick ? 0 : undefined}\r\n role={onClick ? \"button\" : undefined}\r\n aria-label={onClick ? \"View profile\" : undefined}\r\n onClick={onClick}\r\n onKeyDown={onClick ? (e) => { if (e.key === \"Enter\" || e.key === \" \") onClick(e as any); } : undefined}\r\n >\r\n <Avatar size={collapsedAvatarSize}>\r\n <AvatarImage src={avatarUrl} />\r\n <AvatarFallback>{avatarFallback}</AvatarFallback>\r\n </Avatar>\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"space-y-3\">\r\n <div\r\n className={cn(\r\n \"flex items-center space-x-3 rounded-lg transition-colors\",\r\n onClick && \"cursor-pointer hover:bg-primary-50 focus:bg-primary-100 outline-none ring-2 ring-transparent focus:ring-primary-300\"\r\n )}\r\n tabIndex={onClick ? 0 : undefined}\r\n role={onClick ? \"button\" : undefined}\r\n aria-label={onClick ? \"View profile\" : undefined}\r\n onClick={onClick}\r\n onKeyDown={onClick ? (e) => { if (e.key === \"Enter\" || e.key === \" \") onClick(e as any); } : undefined}\r\n >\r\n <Avatar size={expandedAvatarSize}>\r\n <AvatarImage src={avatarUrl} />\r\n <AvatarFallback>{avatarFallback}</AvatarFallback>\r\n </Avatar>\r\n <div className=\"flex-1 min-w-0\">\r\n <p className=\"text-sm font-medium text-gray-900 truncate\">\r\n {name}\r\n </p>\r\n <p className=\"text-xs text-gray-500 truncate\">\r\n {email}\r\n </p>\r\n </div>\r\n </div>\r\n <div className=\"flex space-x-2\">\r\n {/* Reusable, theme-agnostic profile/logout buttons */}\r\n <ProfileButton className=\"flex-1\" {...profileButtonProps} />\r\n <LogoutButton className=\"flex-1\" {...logoutButtonProps} />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nSidebar.displayName = \"Sidebar\";\r\n\r\nexport { Sidebar, sidebarVariants, type MenuItem };"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|