oneslash-design-system 1.2.9 → 1.2.11

package/dist/components/menuItem.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react';
+import React, { JSX } from 'react';
 interface MenuItemProps {
     href?: string;
     iconName?: string;
@@ -8,6 +8,12 @@ interface MenuItemProps {
     isSelected?: boolean;
     onClick?: any;
     className?: string;
+    size?: 'medium' | 'large';
+    tag?: {
+        label: React.ReactNode;
+        iconName?: string;
+    };
+    iconRight?: string;
 }
-export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, className, }: MenuItemProps): JSX.Element;
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, className, size, tag, iconRight, }: MenuItemProps): JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -38,10 +38,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useState, useEffect, useCallback } from 'react';
 import NextLink from 'next/link';
 import UserImage from './userImage';
+import Tag from './tag';
 export default function MenuItem(_a) {
     var _this = this;
-    var href = _a.href, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b;
-    var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
+    var href = _a.href, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight;
+    var _d = useState(null), IconLeft = _d[0], setIconLeft = _d[1];
+    var _e = useState(null), IconRight = _e[0], setIconRight = _e[1];
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
         return __generator(this, function (_a) {
@@ -67,29 +69,47 @@ export default function MenuItem(_a) {
     }); }, []);
     useEffect(function () {
         var fetchIcon = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
                     case 0:
                         if (!iconName) return [3 /*break*/, 2];
                         _a = setIconLeft;
                         return [4 /*yield*/, loadIcon(iconName)];
                     case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        _b.label = 2;
-                    case 2: return [2 /*return*/];
+                        _a.apply(void 0, [_c.sent()]);
+                        _c.label = 2;
+                    case 2:
+                        if (!iconRight) return [3 /*break*/, 4];
+                        _b = setIconRight;
+                        return [4 /*yield*/, loadIcon(iconRight)];
+                    case 3:
+                        _b.apply(void 0, [_c.sent()]);
+                        _c.label = 4;
+                    case 4: return [2 /*return*/];
                 }
             });
         }); };
         fetchIcon();
-    }, [iconName, loadIcon]);
-    var content = (<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
+    }, [iconName, iconRight, loadIcon]);
+    // Size-based icon and text classes
+    var iconSize = size === 'large' ? 'w-6 h-6' : 'w-5 h-5';
+    var labelClass = size === 'large' ? 'text-body1' : 'text-body2';
+    var tagSize = size === 'large' ? 'medium' : 'small';
+    var content = (<div className={"\n        flex items-center p-2 rounded-[8px] cursor-pointer justify-between transition-colors duration-200 ease-in-out\n        ".concat(isSelected
             ? 'bg-light-background-accent300 dark:bg-dark-background-accent300 hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'
             : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
-      {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className="w-6 h-6 text-light-text-secondary dark:text-dark-text-secondary"/>))}
-      <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
-        {label}
-      </span>
+      {/* Left group: icon/userImg + label + tag with 8px gap */}
+      <div className="flex items-center gap-1">
+        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " text-light-text-secondary dark:text-dark-text-secondary")}/>))}
+        <span className={"whitespace-nowrap ".concat(labelClass, " text-light-text-primary dark:text-dark-text-primary")}>
+          {label}
+        </span>
+        {tag && (<Tag variant="contained" size={tagSize} label={tag.label} iconName={tag.iconName}/>)}
+      </div>
+
+      {/* Right icon aligned to the right */}
+      {IconRight && (<IconRight className={"".concat(iconSize, " text-light-text-secondary dark:text-dark-text-secondary flex-shrink-0")}/>)}
     </div>);
     return href ? <NextLink href={href}>{content}</NextLink> : content;
 }

package/dist/components/tag.d.ts

@@ -7,7 +7,6 @@ interface TagProps {
     label: React.ReactNode;
     iconName?: keyof typeof HeroIcons;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
-    color?: 'default' | 'info';
 }
-export default function Tag({ variant, size, state, label, iconName, onClick, color, }: TagProps): JSX.Element;
+export default function Tag({ variant, size, state, label, iconName, onClick, }: TagProps): JSX.Element;
 export {};

package/dist/components/tag.jsx

@@ -2,9 +2,9 @@
 import React, { useState, useEffect } from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 export default function Tag(_a) {
-    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, label = _a.label, iconName = _a.iconName, onClick = _a.onClick, _c = _a.color, color = _c === void 0 ? 'default' : _c;
-    var _d = useState(false), isHovered = _d[0], setIsHovered = _d[1];
-    var _e = useState(null), Icon = _e[0], setIcon = _e[1];
+    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, label = _a.label, iconName = _a.iconName, onClick = _a.onClick;
+    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
     // Load icon directly from HeroIcons
     useEffect(function () {
         if (iconName) {
@@ -13,30 +13,30 @@ export default function Tag(_a) {
     }, [iconName]);
     // Size and padding
     var sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
+    // Selected state styles
+    var isSelected = state === 'selected';
     // Background color
-    var bgClasses = variant === 'contained'
-        ? (color === 'info'
-            ? 'bg-light-info-main dark:bg-dark-info-main'
-            : 'bg-light-background-accent300 dark:bg-dark-background-accent300')
-        : '';
+    var bgClasses = isSelected && variant === 'contained'
+        ? 'bg-light-accent-main dark:bg-dark-accent-main'
+        : variant === 'contained'
+            ? 'bg-light-background-accent300 dark:bg-dark-background-accent300'
+            : '';
     // Font color
-    var fontClasses = variant === 'textOnly'
-        ? (color === 'info'
-            ? 'text-light-info-main dark:text-dark-info-main'
-            : 'text-light-text-primary dark:text-dark-text-primary')
+    var fontClasses = isSelected
+        ? 'text-white'
         : 'text-light-text-primary dark:text-dark-text-primary';
-    // Border for contained variant
-    var borderClasses = variant === 'contained'
-        ? 'border border-light-misc-divider dark:border-dark-misc-divider'
-        : '';
-    // State and hover
-    var stateClasses = state === 'selected'
-        ? 'bg-light-accent-main dark:bg-dark-accent-main text-white'
-        : 'cursor-pointer';
-    var hoverClasses = variant === 'contained' && isHovered
+    // Border styles
+    var borderClasses = isSelected && variant === 'textOnly'
+        ? 'border border-light-accent-main dark:border-dark-accent-main'
+        : variant === 'contained'
+            ? 'border border-light-misc-divider dark:border-dark-misc-divider'
+            : '';
+    // Hover (only when not selected and onClick is provided)
+    var hoverClasses = !isSelected && variant === 'contained' && isHovered && onClick
         ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
         : '';
-    return (<div className={"\n        flex items-center space-x-1 rounded-full \n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(stateClasses, " ").concat(hoverClasses, "\n        transition-colors duration-200 ease-in-out\n      ")} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
+    var cursorClass = onClick && !isSelected ? 'cursor-pointer' : '';
+    return (<div className={"\n        flex items-center space-x-1 rounded-full\n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass, "\n        transition-colors duration-200 ease-in-out\n      ")} onMouseEnter={function () { return onClick && setIsHovered(true); }} onMouseLeave={function () { return onClick && setIsHovered(false); }} onClick={onClick}>
       {Icon && <Icon className="w-4 h-4"/>}
       <span>{label}</span>
     </div>);

package/dist/output.css

@@ -708,6 +708,9 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-1 {
+  gap: 0.25rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
@@ -973,10 +976,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(211 47 47 / var(--tw-text-opacity));
 }
-.text-light-info-main {
-  --tw-text-opacity: 1;
-  color: rgb(0 135 212 / var(--tw-text-opacity));
-}
 .text-light-text-contrast {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1250,11 +1249,6 @@ body {
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
-  .dark\:text-dark-info-main {
-    --tw-text-opacity: 1;
-    color: rgb(0 175 255 / var(--tw-text-opacity));
-  }
-
   .dark\:text-dark-text-contrast {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity));