oneslash-design-system 1.1.1 → 1.1.3

package/components/button.tsx

@@ -111,7 +111,9 @@ export default function Button({
       {IconLeft && (
           <IconLeft className={sizeIcon} />
       )}
-      <div className="whitespace-nowrap px-2">{label}</div>
+      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
+        {label}
+      </div>
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon} />

package/components/modal.tsx

@@ -1,12 +1,12 @@
-'use client';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface ModalProps {
   isOpen: boolean;
-  title: string;
+  title?: string;
   children: React.ReactNode;
   onClose: () => void;
-  actions: React.ReactNode;
+  actions?: React.ReactNode;
+  size?: 'medium' | 'large'; 
 }
 
 export default function Modal({ 
@@ -15,28 +15,37 @@ export default function Modal({
   children, 
   onClose, 
   actions, 
+  size = 'medium', // Default size is medium
 }: ModalProps) {
+  
   if (!isOpen) return null;
 
+  // close modal by clicking elsewhere
   const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   };
 
+  // close modal by esc keypress
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         onClose();
       }
     };
-
     window.addEventListener('keydown', handleKeyDown);
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [onClose]);
 
+  // Determine width based on size prop
+  const modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
+  const maxWidth = size === 'large' ? '1200px' : '600px';
+
+  
+
   return (
     <div 
       className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50"
@@ -44,23 +53,31 @@ export default function Modal({
       role="dialog"
       aria-labelledby="modal-title"
       aria-modal="true"
+      tabIndex={-1}
     >
       <div 
-        className="bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 w-[600px]"
+        className={`bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ${modalWidth}`}
         style={{
-          maxHeight: 'calc(100vh - 64px)',
+          maxWidth,
+          width: 'calc(100vw - 64px)',
+          maxHeight: '800px',
+          height: 'auto',
           overflowY: 'auto',
         }}
       >
-        <h2 id="modal-title" className="text-h6">
-          {title}
-        </h2>
+        {title && (
+          <h2 id="modal-title" className="text-h6">
+            {title}
+          </h2>
+        )}
         <div className="text-body1 space-y-4">
           {children}
         </div>
-        <div className="flex justify-between">
-          {actions}
-        </div>
+        {actions && (
+          <div className="flex justify-between">
+            {actions}
+          </div>
+        )}
       </div>
     </div>
   );

package/components/popover.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "private": false,
   "scripts": {
     "dev": "next dev",