@beyondcorp/beyond-ui 1.1.9 → 1.1.11
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 +2 -52
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/ProfileManagement/EditModal.js +1 -1
- package/dist/components/ProfileManagement/EditModal.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';
|
|
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,
|
|
8
|
-
return (jsxs("div", { children: [jsx(Button, { onClick:
|
|
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\
|
|
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-
|
|
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:
|
|
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-
|
|
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":";;;;;;;;AAgDO,MAAM,SAAS,GAA6B,CAAC,EAClD,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,GAAG,cAAc,EAC1B,UAAU,GAAG,OAAO,EACpB,SAAS,GACV,MACCA,
|
|
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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"}
|