oneslash-design-system 1.1.5 → 1.1.6

package/components/button.tsx

@@ -1,5 +1,6 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
+import UserImage from './userImage';
 
 interface ButtonProps{
   size: 'small' | 'medium' | 'large';
@@ -7,6 +8,8 @@ interface ButtonProps{
   state: 'enabled' | 'hovered' | 'focused' | 'disabled';
   label: string;
   decoIcon?: string;
+  userHandle?: string;
+  userImgUrl?: string;
   actionIcon?: string;
   onClickButton?: any; 
   onClickActionIcon?: () => void;
@@ -20,6 +23,8 @@ export default function Button({
   state,
   label,
   decoIcon,
+  userHandle,
+  userImgUrl,
   actionIcon,
   onClickButton,
   onClickActionIcon,
@@ -108,12 +113,25 @@ export default function Button({
       onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
       onClick={onClickButton} // Button click action
     >
-      {IconLeft && (
+      {/* left icon or userImage */}
+      <div className="flex items-center space-x-2">
+        {/* Render dynamic icon if available */}
+        {IconLeft && (
           <IconLeft className={sizeIcon} />
-      )}
-      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
+        )}
+        
+        {/* Render UserImage if userImgUrl or userHandle is provided */}
+        {(userImgUrl || userHandle) && (
+          <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl} />
+        )}
+      </div>
+
+      {/* label */}
+      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2 text-left">
         {label}
       </div>
+      
+      {/* right icon */}
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon} />

package/components/modal.tsx

@@ -41,10 +41,10 @@ export default function Modal({
     };
   }, [onClose]);
 
-  // Determine width based on size prop
-  const modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
-  const maxWidth = size === 'large' ? '1200px' : '600px';
-
+  // Define dimensions based on size
+  const dimensions = size === 'large' 
+    ? { width: '1200px', height: '800px' }
+    : { width: '600px' };
   
 
   return (
@@ -57,21 +57,22 @@ export default function Modal({
       tabIndex={-1}
       >
       <div 
-        className={`flex flex-col bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ${modalWidth}`}
         style={{
-          maxWidth,
+          maxWidth: dimensions.width,
+          ...(size === 'large' && { maxHeight: dimensions.height }),          
           width: 'calc(100vw - 64px)',
-          maxHeight: '800px',
-          height: 'auto',
-          overflowY: 'auto',
+          height: size === 'large' ? 'calc(100vh - 64px)' : 'auto', 
+          overflowY: size === 'large' ? 'auto' : 'visible',
         }}
+        className={`flex flex-col bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4`}
+        
         >
         {title && (
           <h2 id="modal-title" className="text-h6">
             {title}
           </h2>
         )}
-        <div className="text-body1">
+        <div className="flex-grow overflow-auto">
           {children}
         </div>
         {actions && (

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": false,
   "main": "./dist/index.js",  
   "types": "./dist/index.d.ts",