@lets-events/react 12.2.11 → 12.2.13

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.2.11 build
+> @lets-events/react@12.2.13 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,11 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 380.26 KB
-ESM ⚡️ Build success in 222ms
-CJS dist\index.js 394.23 KB
-CJS ⚡️ Build success in 223ms
+ESM dist\index.mjs 380.64 KB
+ESM ⚡️ Build success in 231ms
+CJS dist\index.js 394.61 KB
+CJS ⚡️ Build success in 232ms
 DTS Build start
-DTS ⚡️ Build success in 4608ms
-DTS dist\index.d.mts 398.55 KB
-DTS dist\index.d.ts  398.55 KB
+DTS ⚡️ Build success in 4562ms
+DTS dist\index.d.mts 398.61 KB
+DTS dist\index.d.ts  398.61 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.2.13
+
+### Patch Changes
+
+- new modal props
+
+## 12.2.12
+
+### Patch Changes
+
+- add extra modal props
+
 ## 12.2.11
 
 ### Patch Changes

package/dist/index.d.mts

@@ -4280,8 +4280,10 @@ type ModalProps = ComponentProps<typeof Dialog.Root> & {
     trigger?: React.ReactNode;
     title?: string;
     children: React.ReactNode;
+    zIndex?: number;
+    maxWidth?: number;
 };
-declare function Modal({ children, title, trigger, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, title, trigger, zIndex, maxWidth, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type MenuDropdownProps = HTMLAttributes<HTMLDivElement> & {
     children: ReactNode;

package/dist/index.d.ts

@@ -4280,8 +4280,10 @@ type ModalProps = ComponentProps<typeof Dialog.Root> & {
     trigger?: React.ReactNode;
     title?: string;
     children: React.ReactNode;
+    zIndex?: number;
+    maxWidth?: number;
 };
-declare function Modal({ children, title, trigger, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, title, trigger, zIndex, maxWidth, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type MenuDropdownProps = HTMLAttributes<HTMLDivElement> & {
     children: ReactNode;

package/dist/index.js

@@ -3691,7 +3691,7 @@ var ModalContentStyled = styled(import_radix_ui.Dialog.Content, {
   lineHeight: "$base",
   fontSize: "$13",
   maxWidth: "502px",
-  width: "100%",
+  width: "calc(100% - 2rem)",
   border: "1px solid $neutral",
   borderRadius: "$2xl",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
@@ -3732,16 +3732,45 @@ var ModalTitleStyled = styled(import_radix_ui.Dialog.Title, {
   textTransform: "uppercase"
 });
 function Modal(_a) {
-  var _b = _a, { children, title, trigger } = _b, props = __objRest(_b, ["children", "title", "trigger"]);
+  var _b = _a, {
+    children,
+    title,
+    trigger,
+    zIndex,
+    maxWidth
+  } = _b, props = __objRest(_b, [
+    "children",
+    "title",
+    "trigger",
+    "zIndex",
+    "maxWidth"
+  ]);
+  const { onOpenChange } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_radix_ui.Dialog.Root, __spreadProps(__spreadValues({}, props), { children: [
     trigger && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalContentStyled, { children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalHeaderStyled, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalIconClose, { name: "close", size: "xl" }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children })
-    ] }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ModalOverlay,
+      {
+        css: {
+          zIndex
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          ModalContentStyled,
+          {
+            css: {
+              maxWidth
+            },
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalHeaderStyled, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
+                (onOpenChange || trigger) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalIconClose, { name: "close", size: "xl" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children })
+            ]
+          }
+        )
+      }
+    ) })
   ] }));
 }
 

package/dist/index.mjs

@@ -3579,7 +3579,7 @@ var ModalContentStyled = styled(ModalRadix.Content, {
   lineHeight: "$base",
   fontSize: "$13",
   maxWidth: "502px",
-  width: "100%",
+  width: "calc(100% - 2rem)",
   border: "1px solid $neutral",
   borderRadius: "$2xl",
   boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
@@ -3620,16 +3620,45 @@ var ModalTitleStyled = styled(ModalRadix.Title, {
   textTransform: "uppercase"
 });
 function Modal(_a) {
-  var _b = _a, { children, title, trigger } = _b, props = __objRest(_b, ["children", "title", "trigger"]);
+  var _b = _a, {
+    children,
+    title,
+    trigger,
+    zIndex,
+    maxWidth
+  } = _b, props = __objRest(_b, [
+    "children",
+    "title",
+    "trigger",
+    "zIndex",
+    "maxWidth"
+  ]);
+  const { onOpenChange } = props;
   return /* @__PURE__ */ jsxs4(ModalRadix.Root, __spreadProps(__spreadValues({}, props), { children: [
     trigger && /* @__PURE__ */ jsx13(ModalRadix.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx13(ModalRadix.Portal, { children: /* @__PURE__ */ jsx13(ModalOverlay, { children: /* @__PURE__ */ jsxs4(ModalContentStyled, { children: [
-      title && /* @__PURE__ */ jsxs4(ModalHeaderStyled, { children: [
-        /* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
-        /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
-      ] }),
-      /* @__PURE__ */ jsx13(Box, { children })
-    ] }) }) })
+    /* @__PURE__ */ jsx13(ModalRadix.Portal, { children: /* @__PURE__ */ jsx13(
+      ModalOverlay,
+      {
+        css: {
+          zIndex
+        },
+        children: /* @__PURE__ */ jsxs4(
+          ModalContentStyled,
+          {
+            css: {
+              maxWidth
+            },
+            children: [
+              title && /* @__PURE__ */ jsxs4(ModalHeaderStyled, { children: [
+                /* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
+                (onOpenChange || trigger) && /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
+              ] }),
+              /* @__PURE__ */ jsx13(Box, { children })
+            ]
+          }
+        )
+      }
+    ) })
   ] }));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.2.11",
+  "version": "12.2.13",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Modal.tsx

@@ -10,7 +10,7 @@ const ModalContentStyled = styled(ModalRadix.Content, {
   lineHeight: "$base",
   fontSize: "$13",
   maxWidth: "502px",
-  width: "100%",
+  width: "calc(100% - 2rem)",
   border: "1px solid $neutral",
   borderRadius: "$2xl",
   boxShadow:
@@ -20,7 +20,7 @@ const ModalContentStyled = styled(ModalRadix.Content, {
   left: "50%",
   transform: "translate(-50%, -50%)",
   backgroundColor: "$dark50",
-  zIndex: '10001'
+  zIndex: "10001",
 });
 
 const ModalOverlay = styled(ModalRadix.Overlay, {
@@ -28,7 +28,7 @@ const ModalOverlay = styled(ModalRadix.Overlay, {
   inset: 0,
   opacity: 1,
   backgroundColor: "rgba(0, 0, 0, .5)",
-  zIndex: '10000'
+  zIndex: "10000",
 });
 
 const ModalHeaderStyled = styled("div", {
@@ -60,15 +60,33 @@ export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
   trigger?: React.ReactNode;
   title?: string;
   children: React.ReactNode;
+  zIndex?: number;
+  maxWidth?: number;
 };
 
-export function Modal({ children, title, trigger, ...props }: ModalProps) {
+export function Modal({
+  children,
+  title,
+  trigger,
+  zIndex,
+  maxWidth,
+  ...props
+}: ModalProps) {
+  const { onOpenChange } = props;
   return (
     <ModalRadix.Root {...props}>
       {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
       <ModalRadix.Portal>
-        <ModalOverlay>
-          <ModalContentStyled>
+        <ModalOverlay
+          css={{
+            zIndex,
+          }}
+        >
+          <ModalContentStyled
+            css={{
+              maxWidth,
+            }}
+          >
             {title && (
               <ModalHeaderStyled>
                 <ModalTitleStyled asChild>
@@ -76,9 +94,11 @@ export function Modal({ children, title, trigger, ...props }: ModalProps) {
                     {title}
                   </Text>
                 </ModalTitleStyled>
-                <ModalRadix.Close asChild>
-                  <ModalIconClose name="close" size="xl" />
-                </ModalRadix.Close>
+                {(onOpenChange || trigger) && (
+                  <ModalRadix.Close asChild>
+                    <ModalIconClose name="close" size="xl" />
+                  </ModalRadix.Close>
+                )}
               </ModalHeaderStyled>
             )}
             <Box>{children}</Box>