oneslash-design-system 1.1.24 → 1.1.25

package/components/iconButton.tsx

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import * as HeroIcons24 from '@heroicons/react/24/outline';
 import * as HeroIcons20 from '@heroicons/react/20/solid';
+import { LoadingSmall } from './loadingScreen';
 
 interface IconButtonProps {
   color: "primary" | "secondary" | "tertiary" | "iconOnly";
@@ -9,6 +10,7 @@ interface IconButtonProps {
   size: "large" | "medium" | "small";
   iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
   onClick?: any;
+  loading?: boolean;
 }
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
@@ -19,6 +21,7 @@ export default function IconButton({
   size,
   iconName,
   onClick,
+  loading = false, // Default to false
 }: IconButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -41,7 +44,7 @@ export default function IconButton({
   };
 
   // Base classes (padding and corner radius)
-  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none`;
+  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none relative`;
 
   // Background color
   const bgColor = color === 'primary'
@@ -70,8 +73,10 @@ export default function IconButton({
     ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
     : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
 
-  // state
-  const stateClasses = state === 'disabled'
+  // State classes, including loading
+  const stateClasses = loading
+    ? 'cursor-wait' // Show a waiting cursor during loading
+    : state === 'disabled'
     ? 'cursor-not-allowed opacity-50'
     : state === 'selected'
     ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
@@ -81,13 +86,18 @@ export default function IconButton({
 
   return (
     <button
-      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out`}
-      disabled={state === 'disabled'}
+      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out flex items-center justify-center`}
+      disabled={state === 'disabled' || loading} // Disable button during loading
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={onClick}
+      aria-label={loading ? 'Loading' : 'Reload'}
     >
-      {Icon && <Icon className={iconSizeClasses[size]} />}
+      {loading ? (
+        <LoadingSmall size={size} /> // Pass the size prop to match the icon
+      ) : (
+        Icon && <Icon className={iconSizeClasses[size]} /> // Show icon when not loading
+      )}
     </button>
   );
 }

package/components/loadingScreen.tsx

@@ -1,6 +1,10 @@
 'use client';
 import React from 'react';
 
+interface LoadingSmallProps {
+  size?: 'large' | 'medium' | 'small'; // Match IconButton sizes
+}
+
 export default function LoadingScreen() {
   return (
     <div className="flex justify-center items-center h-full w-full min-h-[200px]">
@@ -9,10 +13,18 @@ export default function LoadingScreen() {
   );
 };
 
-export function LoadingSmall() {
+export function LoadingSmall({ size = 'medium' }: LoadingSmallProps) {
+  const spinnerSizeClasses = {
+    large: 'w-6 h-6 border-2',  // 24px, border-2 for proportional thickness
+    medium: 'w-6 h-6 border-2', // 24px, border-2
+    small: 'w-5 h-5 border-2', // 20px, slightly thinner border
+  };
+
   return (
-    <div className="flex justify-center items-center h-[40px] w-[40px]">
-      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    <div className="flex justify-center items-center">
+      <div
+        className={`border-t-transparent border-light-accent-main rounded-full animate-spin ${spinnerSizeClasses[size]}`}
+      />
     </div>
   );
-};
+}

package/dist/components/button.jsx

@@ -125,7 +125,7 @@ export default function Button(_a) {
             : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
     };
     // Build the button classes dynamically
-    var buttonClasses = "\n    flex flex-row space-x-2 items-center rounded-[8px]\n    ".concat(sizeClasses, "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? stateClasses.focused : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : baseTypeClasses, "\n    ").concat(state !== 'disabled' && isHovered ? hoverTypeClasses : '', "\n    ");
+    var buttonClasses = "\n    flex flex-row space-x-2 items-center rounded-[8px] transition-colors duration-200 ease-in-out\n    ".concat(sizeClasses, "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? stateClasses.focused : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : baseTypeClasses, "\n    ").concat(state !== 'disabled' && isHovered ? hoverTypeClasses : '', "\n    ");
     return (<button className={buttonClasses} onMouseEnter={function () { if (state !== 'disabled')
         setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
         setIsHovered(false); }} onClick={onClickButton} // Button click action

package/dist/components/checkBox.jsx

@@ -11,14 +11,14 @@ export default function Checkbox(_a) {
         }
     };
     return (<label className="flex items-center cursor-pointer">
-      <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group">
+      <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group transition-colors duration-200 ease-in-out">
         {/* Circle behind the checkbox */}
-        <div className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected transition-all"></div>
+        <div className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected"></div>
         
         {/* Checkbox */}
         <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(isChecked
             ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
-            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center transition-colors duration-200 ease-in-out")}>
+            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center")}>
           {isChecked && (<svg className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast" fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
               <path strokeWidth="2" d="M1 6l4 3 6-7"/>
             </svg>)}

package/dist/components/iconButton.d.ts

@@ -7,6 +7,7 @@ interface IconButtonProps {
     size: "large" | "medium" | "small";
     iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
     onClick?: any;
+    loading?: boolean;
 }
-export default function IconButton({ color, state, size, iconName, onClick, }: IconButtonProps): React.JSX.Element;
+export default function IconButton({ color, state, size, iconName, onClick, loading, }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/components/iconButton.jsx

@@ -2,9 +2,10 @@
 import React, { useState } from 'react';
 import * as HeroIcons24 from '@heroicons/react/24/outline';
 import * as HeroIcons20 from '@heroicons/react/20/solid';
+import { LoadingSmall } from './loadingScreen';
 export default function IconButton(_a) {
-    var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick;
-    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick, _b = _a.loading, loading = _b === void 0 ? false : _b;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
     // Select icon based on size
     var Icon = size === 'small'
         ? HeroIcons20[iconName]
@@ -21,7 +22,7 @@ export default function IconButton(_a) {
         small: 'size-5', // 20px
     };
     // Base classes (padding and corner radius)
-    var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none");
+    var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none relative");
     // Background color
     var bgColor = color === 'primary'
         ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
@@ -46,15 +47,20 @@ export default function IconButton(_a) {
             : color === 'tertiary'
                 ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
                 : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
-    // state
-    var stateClasses = state === 'disabled'
-        ? 'cursor-not-allowed opacity-50'
-        : state === 'selected'
-            ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
-            : isHovered
-                ? 'cursor-pointer hover:bg-opacity-75'
-                : 'cursor-pointer';
-    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses)} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
-      {Icon && <Icon className={iconSizeClasses[size]}/>}
+    // State classes, including loading
+    var stateClasses = loading
+        ? 'cursor-wait' // Show a waiting cursor during loading
+        : state === 'disabled'
+            ? 'cursor-not-allowed opacity-50'
+            : state === 'selected'
+                ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
+                : isHovered
+                    ? 'cursor-pointer hover:bg-opacity-75'
+                    : 'cursor-pointer';
+    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " transition-colors duration-200 ease-in-out flex items-center justify-center")} disabled={state === 'disabled' || loading} // Disable button during loading
+     onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick} aria-label={loading ? 'Loading' : 'Reload'}>
+      {loading ? (<LoadingSmall size={size}/> // Pass the size prop to match the icon
+        ) : (Icon && <Icon className={iconSizeClasses[size]}/> // Show icon when not loading
+        )}
     </button>);
 }

package/dist/components/loadingScreen.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+interface LoadingSmallProps {
+    size?: 'large' | 'medium' | 'small';
+}
 export default function LoadingScreen(): React.JSX.Element;
-export declare function LoadingSmall(): React.JSX.Element;
+export declare function LoadingSmall({ size }: LoadingSmallProps): React.JSX.Element;
+export {};

package/dist/components/loadingScreen.jsx

@@ -6,9 +6,14 @@ export default function LoadingScreen() {
     </div>);
 }
 ;
-export function LoadingSmall() {
-    return (<div className="flex justify-center items-center h-[40px] w-[40px]">
-      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+export function LoadingSmall(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b;
+    var spinnerSizeClasses = {
+        large: 'w-6 h-6 border-2', // 24px, border-2 for proportional thickness
+        medium: 'w-6 h-6 border-2', // 24px, border-2
+        small: 'w-5 h-5 border-2', // 20px, slightly thinner border
+    };
+    return (<div className="flex justify-center items-center">
+      <div className={"border-t-transparent border-light-accent-main rounded-full animate-spin ".concat(spinnerSizeClasses[size])}/>
     </div>);
 }
-;

package/dist/components/menuItem.jsx

@@ -42,7 +42,6 @@ export default function MenuItem(_a) {
     var _this = this;
     var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
     var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
-    // Import icon dynamically
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
         return __generator(this, function (_a) {
@@ -85,14 +84,14 @@ export default function MenuItem(_a) {
         fetchIcon();
     }, [iconName, loadIcon]);
     return (<NextLink href={href}>
-      <div className={"\n          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start\n          ".concat(isSelected
+      <div className={"\n          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out\n          ".concat(isSelected
             ? 'bg-light-background-accent200 dark:bg-dark-background-accent200 hover:bg-light-background-accent300 dark:hover:bg-dark-background-accent300'
             : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100', "\n        ")} style={{ width: '100%' }} onClick={onClick}>
-        {/* render userImage. render dynamic icon if userImage is not available */}
-        {userImgUrl || userHandle ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''}/>) : (IconLeft && <IconLeft className="w-6 h-6"/>)}
+        {/* Render UserImage or dynamic icon */}
+        {userImgUrl || userHandle ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''}/>) : (IconLeft && (<IconLeft className="w-6 h-6 text-light-text-secondary dark:text-dark-text-secondary"/>))}
 
-        {/* label */}
-        <span className="whitespace-nowrap text-body1 px-2 text-light-text-secondary dark:text-dark-text-secondary">
+        {/* Label */}
+        <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
           {label}
         </span>
       </div>

package/dist/components/tab.jsx

@@ -99,7 +99,7 @@ export default function Tab(_a) {
             router.push(href);
         }
     };
-    return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-outh\n        ".concat(isSelected
+    return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out\n        ".concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
             : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
       {IconLeft && <IconLeft className="w-6 h-6"/>}

package/dist/components/tag.d.ts

@@ -4,7 +4,7 @@ interface TagProps {
     variant: 'contained' | 'textOnly';
     size: 'medium' | 'small';
     state?: 'enabled' | 'selected';
-    label: string;
+    label: React.ReactNode;
     iconName?: keyof typeof HeroIcons;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     color?: 'default' | 'info';

package/dist/designTokens.js

@@ -78,7 +78,7 @@ module.exports = {
         // dark
         dark: {
             text: {
-                primary: '#ebebeb',
+                primary: '#eeeeee',
                 secondary: '#B0B0B0',
                 disabled: '#6D6D6D',
                 contrast: '#000000',
@@ -220,7 +220,7 @@ module.exports = {
             weight: '400',
             size: '12px',
             lineHeight: '150%',
-            letterSpacing: '0.3px',
+            letterSpacing: '0.5px',
         },
         alignments: {
             left: 'left',

package/dist/output.css

@@ -582,9 +582,6 @@ video {
 .h-6 {
   height: 1.5rem;
 }
-.h-\[40px\] {
-  height: 40px;
-}
 .h-full {
   height: 100%;
 }
@@ -612,9 +609,6 @@ video {
 .w-\[1200px\] {
   width: 1200px;
 }
-.w-\[40px\] {
-  width: 40px;
-}
 .w-\[600px\] {
   width: 600px;
 }
@@ -645,6 +639,9 @@ video {
 .cursor-pointer {
   cursor: pointer;
 }
+.cursor-wait {
+  cursor: wait;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -888,7 +885,7 @@ video {
 }
 .text-dark-text-primary {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(238 238 238 / var(--tw-text-opacity));
 }
 .text-light-error-main {
   --tw-text-opacity: 1;
@@ -956,18 +953,13 @@ video {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-300 {
-  transition-duration: 300ms;
+.duration-200 {
+  transition-duration: 200ms;
 }
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1031,7 +1023,7 @@ body {
 
   .dark\:border-dark-text-primary {
     --tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-border-opacity));
+    border-color: rgb(238 238 238 / var(--tw-border-opacity));
   }
 
   .dark\:border-dark-text-secondary {
@@ -1096,7 +1088,7 @@ body {
 
   .dark\:bg-dark-text-primary {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(238 238 238 / var(--tw-bg-opacity));
   }
 
   .dark\:bg-dark-warning-main {
@@ -1126,7 +1118,7 @@ body {
 
   .dark\:text-dark-text-primary {
     --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
+    color: rgb(238 238 238 / var(--tw-text-opacity));
   }
 
   .dark\:text-dark-text-secondary {

package/package.json

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