oneslash-design-system 1.1.4 → 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 (
@@ -55,28 +55,31 @@ export default function Modal({
       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 ${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 space-y-4">
+        <div className="flex-grow overflow-auto">
           {children}
         </div>
         {actions && (
-          <div className="flex justify-between">
-            {actions}
+          <div className='pt-6 border-t border-light-misc-divider dark:border-dark-misc-divider'>
+            <div className="flex justify-between" >
+              {actions}
+            </div>
           </div>
         )}
       </div>

package/components/popover.tsx

@@ -57,7 +57,11 @@ export default function Popover({
     <div
       id={id}
       ref={setPopoverElement}
-      style={{ ...styles.popper, display: open ? 'block' : 'none' }}
+      style={{ 
+        ...styles.popper, 
+        display: open ? 'block' : 'none',
+        zIndex: 10000, 
+      }}
       {...attributes.popper}
       className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2"
       role="dialog"

package/dist/components/modal.jsx

@@ -26,7 +26,7 @@ export default function Modal(_a) {
     var modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
     var maxWidth = size === 'large' ? '1200px' : '600px';
     return (<div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={handleOverlayClick} 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 ".concat(modalWidth)} style={{
+      <div className={"flex flex-col bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ".concat(modalWidth)} style={{
             maxWidth: maxWidth,
             width: 'calc(100vw - 64px)',
             maxHeight: '800px',
@@ -36,11 +36,13 @@ export default function Modal(_a) {
         {title && (<h2 id="modal-title" className="text-h6">
             {title}
           </h2>)}
-        <div className="text-body1 space-y-4">
+        <div className="text-body1">
           {children}
         </div>
-        {actions && (<div className="flex justify-between">
-            {actions}
+        {actions && (<div className='pt-6 border-t border-light-misc-divider dark:border-dark-misc-divider'>
+            <div className="flex justify-between">
+              {actions}
+            </div>
           </div>)}
       </div>
     </div>);

package/dist/components/popover.jsx

@@ -45,7 +45,7 @@ export default function Popover(_a) {
     if (!open || !hasMounted || !anchorEl)
         return null;
     // Render popover in a portal to prevent layout shifts and positioning issues
-    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, styles.popper), { display: open ? 'block' : 'none' })} {...attributes.popper} className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2" role="dialog">
+    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, styles.popper), { display: open ? 'block' : 'none', zIndex: 10000 })} {...attributes.popper} className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2" role="dialog">
       {children}
     </div>, document.body // Mounting the popover in the document body for isolation
     );

package/dist/output.css

@@ -702,6 +702,9 @@ video {
 .border-4 {
   border-width: 4px;
 }
+.border-t {
+  border-top-width: 1px;
+}
 .border-none {
   border-style: none;
 }
@@ -713,6 +716,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(238 174 3 / var(--tw-border-opacity));
 }
+.border-light-misc-divider {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 209 209 / var(--tw-border-opacity));
+}
 .border-light-text-secondary {
   --tw-border-opacity: 1;
   border-color: rgb(109 109 109 / var(--tw-border-opacity));
@@ -823,6 +830,9 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1000,6 +1010,11 @@ body {
 
 @media (prefers-color-scheme: dark) {
 
+  .dark\:border-dark-misc-divider {
+    --tw-border-opacity: 1;
+    border-color: rgb(64 64 64 / var(--tw-border-opacity));
+  }
+
   .dark\:border-dark-text-secondary {
     --tw-border-opacity: 1;
     border-color: rgb(176 176 176 / var(--tw-border-opacity));

package/dist/tailwind.config.js

@@ -1,7 +1,20 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var designTokens = require('./designTokens');
 var config = {
     content: [
-        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./app/**/*.{js,ts,jsx,tsx}",
+        "./components/**/*.{js,ts,jsx,tsx}",
+        "./pages/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
         extend: {
@@ -125,10 +138,9 @@ var config = {
                 'dark-misc-scrollbar-bg': designTokens.colors.dark.background.default,
                 'dark-misc-scrollbar-thumb': designTokens.colors.dark.background.accent200,
             },
-            spacing: {
-                small: designTokens.spacing.small,
-                medium: designTokens.spacing.medium,
-                large: designTokens.spacing.large,
+            spacing: function (_a) {
+                var theme = _a.theme;
+                return (__assign(__assign({}, theme('spacing')), { small: designTokens.spacing.small, medium: designTokens.spacing.medium, large: designTokens.spacing.large }));
             },
             fontSize: {
                 h1: designTokens.typography.h1.size,

package/package.json

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

package/tailwind.config.ts

@@ -4,7 +4,9 @@ const designTokens = require('./designTokens');
 
 const config: Config = {
   content: [
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -154,11 +156,12 @@ const config: Config = {
         'dark-misc-scrollbar-bg': designTokens.colors.dark.background.default,
         'dark-misc-scrollbar-thumb': designTokens.colors.dark.background.accent200,
       },
-      spacing: {
+      spacing: ({ theme }) => ({
+        ...theme('spacing'), // Retain default spacing
         small: designTokens.spacing.small,
         medium: designTokens.spacing.medium,
         large: designTokens.spacing.large,
-      },
+      }),
       fontSize: {
         h1: designTokens.typography.h1.size,
         h2: designTokens.typography.h2.size,