@beyondcorp/beyond-ui 1.1.9 → 1.1.13

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.
@@ -6,15 +6,17 @@ import { Input } from '../Input/Input.js';
6
6
  import { Button } from '../Button/Button.js';
7
7
  import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
8
8
  import { Badge } from '../Badge/Badge.js';
9
+ import { useBreakpoint } from '../../hooks/useBreakpoint.js';
9
10
 
10
11
  const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, ...props }, ref) => {
11
12
  const [searchValue, setSearchValue] = React.useState("");
13
+ const { isAbove } = useBreakpoint();
12
14
  const handleSearchChange = (e) => {
13
15
  const value = e.target.value;
14
16
  setSearchValue(value);
15
17
  onSearchChange?.(value);
16
18
  };
17
- 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: [jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), 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))) })] }), 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: [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" })] }) }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) }), 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: [jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), 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))) }))] }), 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: [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" })] }) }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) }), 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" })] })] })] })] }) }));
18
20
  });
19
21
  DashboardHeader.displayName = "DashboardHeader";
20
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\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 ...props \n }, ref) => {\n const [searchValue, setSearchValue] = React.useState(\"\");\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 {/* Mobile Menu Button */}\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 {/* Breadcrumbs */}\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 </div>\n\n {/* Center Section - Search */}\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 {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Notifications */}\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 {/* Settings */}\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n\n {/* User Profile */}\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 </div>\n </div>\n </header>\n );\n }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem };"],"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\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\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 ...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 {/* Mobile Menu Button */}\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 {/* Breadcrumbs */}\n {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 */}\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 {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Notifications */}\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 {/* Settings */}\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n\n {/* User Profile */}\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 </div>\n </div>\n </header>\n );\n }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem };"],"names":["_jsx","_jsxs"],"mappings":"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"}
@@ -1,11 +1,11 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import * as React from 'react';
2
3
  import { Modal, ModalHeader, ModalTitle, ModalContent, ModalFooter } from './Modal.js';
3
4
  import { Button } from '../Button/Button.js';
4
- import { useToggle } from '../../hooks/useToggle.js';
5
5
 
6
6
  const ModalExample = () => {
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" }) })] })] }));
7
+ const [open, setOpen] = React.useState(false);
8
+ return (jsxs("div", { children: [jsx(Button, { onClick: () => setOpen(true), 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\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
+ {"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] = React.useState(false);\r\n return (\r\n <div>\r\n <Button onClick={() => setOpen(true)}>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":";;;;;AAIO,MAAM,YAAY,GAAa,MAAK;AACzC,IAAA,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAC7C,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAA,QAAA,EAAA,YAAA,EAAA,CAAqB,EACzDD,IAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAA,QAAA,EAAA,CACtCC,GAAA,CAAC,WAAW,cACVA,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,IAAC,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,10 +1,9 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import * as React from 'react';
3
2
  import { X } from 'lucide-react';
4
3
  import { cva } from 'class-variance-authority';
5
4
  import { cn } from '../../utils/cn.js';
6
5
 
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", {
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-white p-6 shadow-lg duration-200 sm:rounded-lg", {
8
7
  variants: {
9
8
  size: {
10
9
  sm: "max-w-sm",
@@ -22,58 +21,9 @@ const Modal = ({ open, onOpenChange, children, size, }) => {
22
21
  const handleClose = () => {
23
22
  onOpenChange?.(false);
24
23
  };
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]);
74
24
  if (!open)
75
25
  return null;
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] })] }));
26
+ return (jsxs(Fragment, { children: [jsx("div", { className: "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", onClick: handleClose }), jsxs("div", { className: cn(modalVariants({ size })), 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", children: [jsx(X, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Close" })] }), children] })] }));
77
27
  };
78
28
  const ModalHeader = ({ className, ...props }) => (jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
79
29
  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-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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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { X } from \"lucide-react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nconst modalVariants = cva(\r\n \"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 sm:rounded-lg\",\r\n {\r\n variants: {\r\n size: {\r\n sm: \"max-w-sm\",\r\n md: \"max-w-lg\",\r\n lg: \"max-w-2xl\",\r\n xl: \"max-w-4xl\",\r\n full: \"max-w-[95vw] max-h-[95vh]\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n },\r\n }\r\n);\r\n\r\ninterface ModalProps extends VariantProps<typeof modalVariants> {\r\n open?: boolean;\r\n onOpenChange?: (open: boolean) => void;\r\n children: React.ReactNode;\r\n}\r\n\r\nconst Modal: React.FC<ModalProps> = ({ \r\n open, \r\n onOpenChange, \r\n children, \r\n size,\r\n}) => {\r\n const handleClose = () => {\r\n onOpenChange?.(false);\r\n };\r\n\r\n if (!open) return null;\r\n\r\n return (\r\n <>\r\n {/* Backdrop */}\r\n <div\r\n className=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\"\r\n onClick={handleClose}\r\n />\r\n \r\n {/* Modal Content */}\r\n <div className={cn(modalVariants({ size }))}>\r\n <button\r\n onClick={handleClose}\r\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\"\r\n >\r\n <X className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Close</span>\r\n </button>\r\n {children}\r\n </div>\r\n </>\r\n );\r\n};\r\n\r\nconst ModalHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\r\n className,\r\n ...props\r\n}) => (\r\n <div\r\n className={cn(\r\n \"flex flex-col space-y-1.5 text-center sm:text-left\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n);\r\n\r\nconst ModalTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({\r\n className,\r\n ...props\r\n}) => (\r\n <h2\r\n className={cn(\r\n \"text-lg font-semibold leading-none tracking-tight\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n);\r\n\r\nconst ModalDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({\r\n className,\r\n ...props\r\n}) => (\r\n <p\r\n className={cn(\"text-sm text-gray-500\", className)}\r\n {...props}\r\n />\r\n);\r\n\r\nconst ModalContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\r\n className,\r\n ...props\r\n}) => (\r\n <div className={cn(\"grid gap-4 py-4\", className)} {...props} />\r\n);\r\n\r\nconst ModalFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({\r\n className,\r\n ...props\r\n}) => (\r\n <div\r\n className={cn(\r\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n);\r\n\r\nexport {\r\n Modal,\r\n ModalHeader,\r\n ModalTitle,\r\n ModalDescription,\r\n ModalContent,\r\n ModalFooter,\r\n modalVariants,\r\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAKA,MAAM,aAAa,GAAG,GAAG,CACvB,2JAA2J,EAC3J;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,UAAU;AACd,YAAA,EAAE,EAAE,UAAU;AACd,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,EAAE,EAAE,WAAW;AACf,YAAA,IAAI,EAAE,2BAA2B;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACX,KAAA;AACF,CAAA;AASH,MAAM,KAAK,GAAyB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,IAAI,GACL,KAAI;IACH,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,YAAY,GAAG,KAAK,CAAC;AACvB,IAAA,CAAC;AAED,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;IAEtB,QACEA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAEEC,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,WAAW,EAAA,CACpB,EAGFF,cAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,EAAA,QAAA,EAAA,CACzCA,IAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,6MAA6M,aAEvNE,GAAA,CAAC,CAAC,EAAA,EAAC,SAAS,EAAC,SAAS,GAAG,EACzBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,SAAS,EAAA,QAAA,EAAA,OAAA,EAAA,CAAa,CAAA,EAAA,CAC/B,EACR,QAAQ,CAAA,EAAA,CACL,CAAA,EAAA,CACL;AAEP;AAEA,MAAM,WAAW,GAAmD,CAAC,EACnE,SAAS,EACT,GAAG,KAAK,EACT,MACCA,aACE,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT;AAGJ,MAAM,UAAU,GAAuD,CAAC,EACtE,SAAS,EACT,GAAG,KAAK,EACT,MACCA,YACE,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT;AAGJ,MAAM,gBAAgB,GAAyD,CAAC,EAC9E,SAAS,EACT,GAAG,KAAK,EACT,MACCA,WACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAA,GAC7C,KAAK,EAAA,CACT;AAGJ,MAAM,YAAY,GAAmD,CAAC,EACpE,SAAS,EACT,GAAG,KAAK,EACT,MACCA,aAAK,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI;AAGjE,MAAM,WAAW,GAAmD,CAAC,EACnE,SAAS,EACT,GAAG,KAAK,EACT,MACCA,aACE,SAAS,EAAE,EAAE,CACX,+DAA+D,EAC/D,SAAS,CACV,EAAA,GACG,KAAK,EAAA,CACT;;;;"}
@@ -6,7 +6,7 @@ import { Input } from '../Input/Input.js';
6
6
  import { Textarea } from '../Textarea/Textarea.js';
7
7
  import { cn } from '../../utils/cn.js';
8
8
 
9
- const EditModal = ({ open, title, description, fields, onChange, onSave, onClose, saving, saveLabel = "Save Changes", closeLabel = "Close", className, }) => (jsx(Modal, { open: open, children: jsxs("div", { className: cn("max-w-2xl rounded-2xl p-0 p-8 mx-auto bg-white", className), children: [title && jsx("h2", { className: "text-2xl font-bold mb-1 text-gray-900", children: title }), description && jsx("p", { className: "text-gray-500 mb-6", children: description }), jsxs("form", { className: "space-y-6", onSubmit: e => {
9
+ const EditModal = ({ open, title, description, fields, onChange, onSave, onClose, saving, saveLabel = "Save Changes", closeLabel = "Close", className, }) => (jsx(Modal, { open: open, onOpenChange: () => onClose(), children: jsxs("div", { className: cn("max-w-2xl rounded-2xl p-0 p-8 mx-auto bg-white", className), children: [title && jsx("h2", { className: "text-2xl font-bold mb-1 text-gray-900", children: title }), description && jsx("p", { className: "text-gray-500 mb-6", children: description }), jsxs("form", { className: "space-y-6", onSubmit: e => {
10
10
  e.preventDefault();
11
11
  onSave();
12
12
  }, children: [jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: fields.map((field, idx) => {
@@ -1 +1 @@
1
- {"version":3,"file":"EditModal.js","sources":["../../../src/components/ProfileManagement/EditModal.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Modal } from \"../Modal/Modal\";\r\nimport { Button } from \"../Button\";\r\nimport { Input } from \"../Input\";\r\nimport { Textarea } from \"../Textarea\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport type EditModalField =\r\n | {\r\n type: \"text\" | \"email\" | \"tel\" | \"url\" | \"password\";\r\n label: string;\r\n name: string;\r\n value?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n autoFocus?: boolean;\r\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\r\n }\r\n | {\r\n type: \"textarea\";\r\n label: string;\r\n name: string;\r\n value?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n rows?: number;\r\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\r\n }\r\n | {\r\n type: \"custom\";\r\n name: string;\r\n render: () => React.ReactNode;\r\n };\r\n\r\nexport interface EditModalProps {\r\n open: boolean;\r\n title?: string;\r\n description?: string;\r\n fields: EditModalField[];\r\n onChange: (name: string, value: string) => void;\r\n onSave: () => void;\r\n onClose: () => void;\r\n saving?: boolean;\r\n saveLabel?: string;\r\n closeLabel?: string;\r\n className?: string;\r\n}\r\n\r\nexport const EditModal: React.FC<EditModalProps> = ({\r\n open,\r\n title,\r\n description,\r\n fields,\r\n onChange,\r\n onSave,\r\n onClose,\r\n saving,\r\n saveLabel = \"Save Changes\",\r\n closeLabel = \"Close\",\r\n className,\r\n}) => (\r\n <Modal open={open}>\r\n <div className={cn(\"max-w-2xl rounded-2xl p-0 p-8 mx-auto bg-white\", className)}>\r\n {title && <h2 className=\"text-2xl font-bold mb-1 text-gray-900\">{title}</h2>}\r\n {description && <p className=\"text-gray-500 mb-6\">{description}</p>}\r\n <form\r\n className=\"space-y-6\"\r\n onSubmit={e => {\r\n e.preventDefault();\r\n onSave();\r\n }}\r\n >\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n {fields.map((field, idx) => {\r\n if (field.type === \"custom\") {\r\n return <div key={field.name}>{field.render()}</div>;\r\n }\r\n // Title above every input/textarea\r\n const title = (\r\n <div key={field.name + \"-title\"} className=\"mb-1 font-medium text-gray-700\">\r\n {field.label}\r\n </div>\r\n );\r\n if (field.type === \"textarea\") {\r\n return (\r\n <React.Fragment key={field.name}>\r\n {title}\r\n <Textarea\r\n name={field.name}\r\n value={field.value}\r\n placeholder={field.placeholder}\r\n rows={field.rows || 3}\r\n required={field.required}\r\n onChange={e => field.onChange ? field.onChange(e) : onChange(field.name, e.target.value)}\r\n className=\"w-full\"\r\n />\r\n </React.Fragment>\r\n );\r\n }\r\n // Default: Input\r\n return (\r\n <React.Fragment key={field.name}>\r\n {title}\r\n <Input\r\n type={field.type}\r\n name={field.name}\r\n value={field.value}\r\n placeholder={field.placeholder}\r\n required={field.required}\r\n autoFocus={field.autoFocus}\r\n onChange={e => field.onChange ? field.onChange(e) : onChange(field.name, e.target.value)}\r\n className=\"w-full\"\r\n />\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n <div className=\"flex justify-end space-x-2 mt-8\">\r\n <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\r\n {closeLabel}\r\n </Button>\r\n <Button type=\"submit\" variant=\"primary\" disabled={saving}>\r\n {saveLabel}\r\n </Button>\r\n </div>\r\n </form>\r\n </div>\r\n </Modal>\r\n);\r\n\r\nEditModal.displayName = \"EditModal\";"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"EditModal.js","sources":["../../../src/components/ProfileManagement/EditModal.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Modal } from \"../Modal/Modal\";\r\nimport { Button } from \"../Button\";\r\nimport { Input } from \"../Input\";\r\nimport { Textarea } from \"../Textarea\";\r\nimport { cn } from \"../../utils/cn\";\r\n\r\nexport type EditModalField =\r\n | {\r\n type: \"text\" | \"email\" | \"tel\" | \"url\" | \"password\";\r\n label: string;\r\n name: string;\r\n value?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n autoFocus?: boolean;\r\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\r\n }\r\n | {\r\n type: \"textarea\";\r\n label: string;\r\n name: string;\r\n value?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n rows?: number;\r\n onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;\r\n }\r\n | {\r\n type: \"custom\";\r\n name: string;\r\n render: () => React.ReactNode;\r\n };\r\n\r\nexport interface EditModalProps {\r\n open: boolean;\r\n title?: string;\r\n description?: string;\r\n fields: EditModalField[];\r\n onChange: (name: string, value: string) => void;\r\n onSave: () => void;\r\n onClose: () => void;\r\n saving?: boolean;\r\n saveLabel?: string;\r\n closeLabel?: string;\r\n className?: string;\r\n}\r\n\r\nexport const EditModal: React.FC<EditModalProps> = ({\r\n open,\r\n title,\r\n description,\r\n fields,\r\n onChange,\r\n onSave,\r\n onClose,\r\n saving,\r\n saveLabel = \"Save Changes\",\r\n closeLabel = \"Close\",\r\n className,\r\n}) => (\r\n <Modal open={open} onOpenChange={() => onClose()}>\r\n <div className={cn(\"max-w-2xl rounded-2xl p-0 p-8 mx-auto bg-white\", className)}>\r\n {title && <h2 className=\"text-2xl font-bold mb-1 text-gray-900\">{title}</h2>}\r\n {description && <p className=\"text-gray-500 mb-6\">{description}</p>}\r\n <form\r\n className=\"space-y-6\"\r\n onSubmit={e => {\r\n e.preventDefault();\r\n onSave();\r\n }}\r\n >\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n {fields.map((field, idx) => {\r\n if (field.type === \"custom\") {\r\n return <div key={field.name}>{field.render()}</div>;\r\n }\r\n // Title above every input/textarea\r\n const title = (\r\n <div key={field.name + \"-title\"} className=\"mb-1 font-medium text-gray-700\">\r\n {field.label}\r\n </div>\r\n );\r\n if (field.type === \"textarea\") {\r\n return (\r\n <React.Fragment key={field.name}>\r\n {title}\r\n <Textarea\r\n name={field.name}\r\n value={field.value}\r\n placeholder={field.placeholder}\r\n rows={field.rows || 3}\r\n required={field.required}\r\n onChange={e => field.onChange ? field.onChange(e) : onChange(field.name, e.target.value)}\r\n className=\"w-full\"\r\n />\r\n </React.Fragment>\r\n );\r\n }\r\n // Default: Input\r\n return (\r\n <React.Fragment key={field.name}>\r\n {title}\r\n <Input\r\n type={field.type}\r\n name={field.name}\r\n value={field.value}\r\n placeholder={field.placeholder}\r\n required={field.required}\r\n autoFocus={field.autoFocus}\r\n onChange={e => field.onChange ? field.onChange(e) : onChange(field.name, e.target.value)}\r\n className=\"w-full\"\r\n />\r\n </React.Fragment>\r\n );\r\n })}\r\n </div>\r\n <div className=\"flex justify-end space-x-2 mt-8\">\r\n <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\r\n {closeLabel}\r\n </Button>\r\n <Button type=\"submit\" variant=\"primary\" disabled={saving}>\r\n {saveLabel}\r\n </Button>\r\n </div>\r\n </form>\r\n </div>\r\n </Modal>\r\n);\r\n\r\nEditModal.displayName = \"EditModal\";"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beyondcorp/beyond-ui",
3
- "version": "1.1.09",
3
+ "version": "1.1.13",
4
4
  "description": "A comprehensive React UI component library built with TypeScript, TailwindCSS, and CVA",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",