oneslash-design-system 1.1.12 → 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/components/tag.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 
 interface TagProps{
+  key?: any;
   variant: "contained" | "textOnly";
   size: "medium" | "small";
   state?: "enabled" | "selected" ;
@@ -16,6 +17,7 @@ interface TagProps{
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 export default function Tag({
+  key,
   variant,
   size,
   state,

package/designTokens.js

@@ -46,10 +46,10 @@ module.exports = {
         light: '#67C16B',
       },
       background:{
-        default: '#FFFFFF',
-        accent100:'#F6F6F6',
-        accent200:'#E7E7E7',
-        accent300:'#D1D1D1',
+        default: '#F2F2F2',
+        accent100:'#F5F5F5',
+        accent200:'#FAFAFA',
+        accent300:'#FFFFFF',
       },
       action:{
         active: '#888888',

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
-            ? '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', "\n      ")} onClick={handleClick}>
-      {IconLeft && <IconLeft className="w-5 h-5"/>}
-      <span className="whitespace-nowrap text-body1 px-2">
+    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'
+            : '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/components/tag.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 interface TagProps {
+    key?: any;
     variant: "contained" | "textOnly";
     size: "medium" | "small";
     state?: "enabled" | "selected";
@@ -10,5 +11,5 @@ interface TagProps {
     onClick?: any;
     color?: 'default' | 'info';
 }
-export default function Tag({ variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
+export default function Tag({ key, variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
 export {};

package/dist/components/tag.jsx

@@ -38,7 +38,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useState, useEffect, useCallback } from 'react';
 export default function Tag(_a) {
     var _this = this;
-    var variant = _a.variant, size = _a.size, state = _a.state, label = _a.label, iconName = _a.iconName, isDeletable = _a.isDeletable, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'default' : _b;
+    var key = _a.key, variant = _a.variant, size = _a.size, state = _a.state, label = _a.label, iconName = _a.iconName, isDeletable = _a.isDeletable, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'default' : _b;
     var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
     var _d = useState(null), Icon = _d[0], setIcon = _d[1];
     var _e = useState(null), DeleteIcon = _e[0], setDeleteIcon = _e[1];

package/dist/designTokens.js

@@ -47,10 +47,10 @@ module.exports = {
                 light: '#67C16B',
             },
             background: {
-                default: '#FFFFFF',
-                accent100: '#F6F6F6',
-                accent200: '#E7E7E7',
-                accent300: '#D1D1D1',
+                default: '#F2F2F2',
+                accent100: '#F5F5F5',
+                accent200: '#FAFAFA',
+                accent300: '#FFFFFF',
             },
             action: {
                 active: '#888888',

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,25 +758,21 @@ 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));
 }
 .bg-light-background-accent100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 .bg-light-background-accent200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(231 231 231 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 .bg-light-background-default {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(242 242 242 / var(--tw-bg-opacity));
 }
 .bg-light-error-main {
   --tw-bg-opacity: 1;
@@ -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;
@@ -935,7 +942,7 @@ video {
   --tw-ring-offset-width: 4px;
 }
 .ring-offset-light-background-default {
-  --tw-ring-offset-color: #FFFFFF;
+  --tw-ring-offset-color: #F2F2F2;
 }
 .blur {
   --tw-blur: blur(8px);
@@ -985,15 +992,15 @@ body {
 
 .hover\:bg-light-background-accent100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
+  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(209 209 209 / 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(255 255 255 / var(--tw-bg-opacity));
 }
@@ -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));
@@ -1091,7 +1098,7 @@ body {
 
   .dark\:bg-light-background-accent300 {
     --tw-bg-opacity: 1;
-    background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
   .dark\:text-dark-info-main {
@@ -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.12",
+  "version": "1.1.14",
   "private": false,
   "main": "./dist/index.js",  
   "types": "./dist/index.d.ts",