oneslash-design-system 1.1.11 → 1.1.12

package/components/tag.tsx

@@ -3,7 +3,6 @@ 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" ;
@@ -17,7 +16,6 @@ interface TagProps{
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
 export default function Tag({
-  key,
   variant,
   size,
   state,

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

@@ -100,8 +100,8 @@ export default function Tab(_a) {
         }
     };
     return (<div className={"\n        flex items-center space-x-1 p-1 rounded-[8px] cursor-pointer justify-start \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}>
+            ? '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">
         {label}

package/dist/components/tag.d.ts

@@ -1,7 +1,6 @@
 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";
@@ -11,5 +10,5 @@ interface TagProps {
     onClick?: any;
     color?: 'default' | 'info';
 }
-export default function Tag({ key, variant, size, state, label, iconName, isDeletable, onClick, color, }: TagProps): React.JSX.Element;
+export default function Tag({ 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 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 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/output.css

@@ -563,6 +563,9 @@ video {
 .h-12 {
   height: 3rem;
 }
+.h-2 {
+  height: 0.5rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -587,6 +590,9 @@ video {
 .w-12 {
   width: 3rem;
 }
+.w-2 {
+  width: 0.5rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -663,6 +669,11 @@ video {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -713,6 +724,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(238 174 3 / var(--tw-border-opacity));
 }
+.border-light-text-primary {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
 .border-light-text-secondary {
   --tw-border-opacity: 1;
   border-color: rgb(109 109 109 / var(--tw-border-opacity));
@@ -740,6 +755,10 @@ 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));
@@ -772,6 +791,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 135 54 / var(--tw-bg-opacity));
 }
+.bg-light-text-primary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .bg-light-warning-main {
   --tw-bg-opacity: 1;
   background-color: rgb(239 108 0 / var(--tw-bg-opacity));
@@ -996,15 +1019,25 @@ body {
 
 @media (prefers-color-scheme: dark) {
 
+  .dark\:border-dark-text-primary {
+    --tw-border-opacity: 1;
+    border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  }
+
   .dark\:border-dark-text-secondary {
     --tw-border-opacity: 1;
     border-color: rgb(176 176 176 / var(--tw-border-opacity));
   }
 
-.dark\:bg-dark-accent-main:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 205 41 / var(--tw-bg-opacity));
-}
+  .dark\:bg-dark-accent-main {
+    --tw-bg-opacity: 1;
+    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;
@@ -1046,6 +1079,11 @@ body {
     background-color: rgb(66 165 71 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-dark-text-primary {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-dark-warning-main {
     --tw-bg-opacity: 1;
     background-color: rgb(255 140 10 / var(--tw-bg-opacity));
@@ -1100,15 +1138,15 @@ body {
     background-color: rgb(78 78 78 / var(--tw-bg-opacity));
   }
 
-.dark\:hover\:bg-dark-background-accent200:hover:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(69 69 69 / var(--tw-bg-opacity));
-}
+  .dark\:hover\:bg-dark-action-hover:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(61 61 61 / var(--tw-bg-opacity));
+  }
 
-.dark\:hover\:bg-dark-background-accent300:hover:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 79 79 / var(--tw-bg-opacity));
-}
+  .dark\:hover\:bg-dark-background-accent300:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(79 79 79 / var(--tw-bg-opacity));
+  }
 
   .dark\:hover\:bg-dark-primary-dark:hover {
     --tw-bg-opacity: 1;

package/package.json

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