oneslash-design-system 1.1.13 → 1.1.14

package/components/menuItem.tsx

@@ -64,10 +64,10 @@ export default function MenuItem({
       >
         {/* render userImage. render dynamic icon if userImage is not available */}
         {userImgUrl || userHandle ? (
-        <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''} />
-      ) : (
-        IconLeft && <IconLeft className="w-6 h-6" />
-      )}
+            <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''} />
+          ) : (
+            IconLeft && <IconLeft className="w-6 h-6" />
+          )}
 
         {/* label */}
         <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">

package/components/tab.tsx

@@ -64,20 +64,20 @@ export default function Tab({
   return (
     <div
       className={`
-        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start 
+        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-all duration-300 ease-in-out
         ${isSelected 
-          ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast' 
-          : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover'}
+          ? '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'}
       `}
       onClick={handleClick}
     >
-      {IconLeft && <IconLeft className="w-5 h-5" />}
-      <span className="whitespace-nowrap text-body1 px-2">
+      {IconLeft && <IconLeft className="w-6 h-6" />}
+      <span className="whitespace-nowrap text-body1 px-[6px]">
         {label}
       </span>
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-5 h-5" />
+          <IconRight className="w-6 h-6" />
         </div>
       )}
     </div>

package/components/tabsContainer.tsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react';
+
+interface TabsContainerProps {
+  children: React.ReactNode;
+}
+
+export default function TabsContainer({
+  children,
+}: TabsContainerProps) {
+  const tabCount = React.Children.count(children);
+
+  return (
+    <div
+      className={`
+        flex space-x-2 p-1 rounded-[12px]
+        ${tabCount > 0 ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : 'bg-transparent'}
+      `}
+    >
+      {children}
+    </div>
+  );
+}

package/dist/components/menuItem.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 interface MenuItemProps {
     href?: string;
     iconName?: string;
+    userHandle?: string;
+    userImgUrl?: string;
     label: string;
     isSelected?: boolean;
-    onClick: any;
+    onClick?: any;
 }
-export default function MenuItem({ href, iconName, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -37,10 +37,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import React, { useState, useEffect, useCallback } from 'react';
 import NextLink from 'next/link';
+import UserImage from './userImage';
 export default function MenuItem(_a) {
     var _this = this;
-    var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
-    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
+    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;
@@ -72,7 +73,7 @@ export default function MenuItem(_a) {
                 switch (_b.label) {
                     case 0:
                         if (!iconName) return [3 /*break*/, 2];
-                        _a = setIcon;
+                        _a = setIconLeft;
                         return [4 /*yield*/, loadIcon(iconName)];
                     case 1:
                         _a.apply(void 0, [_b.sent()]);

package/dist/components/tab.jsx

@@ -99,15 +99,15 @@ export default function Tab(_a) {
             router.push(href);
         }
     };
-    return (<div className={"\n        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start \n        ".concat(isSelected
+    return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-all duration-300 ease-in-out\n        ".concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
-            : 'bg-transparent dark:bg-transparent hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
-      {IconLeft && <IconLeft className="w-5 h-5"/>}
-      <span className="whitespace-nowrap text-body1 px-2">
+            : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
+      {IconLeft && <IconLeft className="w-6 h-6"/>}
+      <span className="whitespace-nowrap text-body1 px-[6px]">
         {label}
       </span>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-5 h-5"/>
+          <IconRight className="w-6 h-6"/>
         </div>)}
     </div>);
 }

package/dist/components/tabsContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TabsContainerProps {
+    children: React.ReactNode;
+}
+export default function TabsContainer({ children, }: TabsContainerProps): React.JSX.Element;
+export {};

package/dist/components/tabsContainer.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function TabsContainer(_a) {
+    var children = _a.children;
+    var tabCount = React.Children.count(children);
+    return (<div className={"\n        flex space-x-2 p-1 rounded-[12px]\n        ".concat(tabCount > 0 ? 'bg-light-background-accent200 dark:bg-dark-background-accent200' : 'bg-transparent', "\n      ")}>
+      {children}
+    </div>);
+}

package/dist/output.css

@@ -698,6 +698,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-\[12px\] {
+  border-radius: 12px;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -755,10 +758,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(238 174 3 / var(--tw-bg-opacity));
 }
-.bg-light-action-selected {
-  --tw-bg-opacity: 1;
-  background-color: rgb(227 227 227 / var(--tw-bg-opacity));
-}
 .bg-light-actionBackground-disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(238 238 238 / var(--tw-bg-opacity));
@@ -783,6 +782,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 135 212 / var(--tw-bg-opacity));
 }
+.bg-light-primary-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .bg-light-primary-main {
   --tw-bg-opacity: 1;
   background-color: rgb(69 69 69 / var(--tw-bg-opacity));
@@ -824,6 +827,10 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-\[6px\] {
+  padding-left: 6px;
+  padding-right: 6px;
+}
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -988,14 +995,14 @@ body {
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-background-accent300:hover {
+.hover\:bg-light-background-accent200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-background-default:hover {
+.hover\:bg-light-background-accent300:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-light-primary-dark:hover {
@@ -1034,11 +1041,6 @@ body {
     background-color: rgb(255 205 41 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-dark-action-selected {
-    --tw-bg-opacity: 1;
-    background-color: rgb(78 78 78 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-dark-actionBackground-disabled {
     --tw-bg-opacity: 1;
     background-color: rgb(56 56 56 / var(--tw-bg-opacity));
@@ -1069,6 +1071,11 @@ body {
     background-color: rgb(0 175 255 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-dark-primary-dark {
+    --tw-bg-opacity: 1;
+    background-color: rgb(233 233 233 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-dark-primary-main {
     --tw-bg-opacity: 1;
     background-color: rgb(213 213 213 / var(--tw-bg-opacity));
@@ -1138,9 +1145,9 @@ body {
     background-color: rgb(78 78 78 / var(--tw-bg-opacity));
   }
 
-  .dark\:hover\:bg-dark-action-hover:hover {
+  .dark\:hover\:bg-dark-background-accent200:hover {
     --tw-bg-opacity: 1;
-    background-color: rgb(61 61 61 / var(--tw-bg-opacity));
+    background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
   .dark\:hover\:bg-dark-background-accent300:hover {

package/package.json

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