oneslash-design-system 1.2.18 → 1.2.20

package/dist/components/alert.jsx

@@ -1,6 +1,6 @@
 'use client';
 import React, { useEffect, useState } from 'react';
-import { InformationCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/react/24/outline';
+import { Info, AlertCircle, AlertTriangle, CheckCircle } from 'lucide-react';
 import IconButton from './iconButton';
 export default function Alert(_a) {
     var open = _a.open, type = _a.type, message = _a.message, onClose = _a.onClose, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b;
@@ -46,16 +46,16 @@ export default function Alert(_a) {
     var getIcon = function () {
         switch (type) {
             case 'error':
-                return <ExclamationCircleIcon className="w-6 h-6"/>;
+                return <AlertCircle className="w-6 h-6" strokeWidth={2}/>;
             case 'warning':
-                return <ExclamationTriangleIcon className="w-6 h-6"/>;
+                return <AlertTriangle className="w-6 h-6" strokeWidth={2}/>;
             case 'info':
-                return <InformationCircleIcon className="w-6 h-6"/>;
+                return <Info className="w-6 h-6" strokeWidth={2}/>;
             case 'success':
-                return <CheckCircleIcon className="w-6 h-6"/>;
+                return <CheckCircle className="w-6 h-6" strokeWidth={2}/>;
             case 'default':
             default:
-                return <InformationCircleIcon className="w-6 h-6"/>;
+                return <Info className="w-6 h-6" strokeWidth={2}/>;
         }
     };
     var bgColor;
@@ -86,7 +86,7 @@ export default function Alert(_a) {
           <span className="body1">{message}</span>
         </div>
         {showCloseButton && (<div className="ml-4">
-            <IconButton color="iconOnly" state="enabled" size="small" iconName="XMarkIcon" onClick={handleClose}/>
+            <IconButton color="iconOnly" state="enabled" size="small" iconName="X" onClick={handleClose}/>
           </div>)}
       </div>
     </div>);

package/dist/components/button.jsx

@@ -52,7 +52,7 @@ export default function Button(_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                    return [4 /*yield*/, import('lucide-react')];
                 case 2:
                     module_1 = _a.sent();
                     Icon = module_1[iconName];
@@ -125,11 +125,11 @@ export default function Button(_a) {
         setIsHovered(false); }} onClick={onClickButton}>
       {/* Group IconLeft and label in a flex container for left alignment */}
       <div className="flex items-center">
-        {IconLeft && <IconLeft className={sizeIcon}/>}
+        {IconLeft && <IconLeft className={sizeIcon} strokeWidth={2}/>}
         <div className="whitespace-nowrap overflow-hidden truncate px-2">{label}</div>
       </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className={sizeIcon}/>
+          <IconRight className={sizeIcon} strokeWidth={2}/>
         </div>)}
     </button>);
 }

package/dist/components/emptyBox.jsx

@@ -1,13 +1,13 @@
 'use client';
 import React from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
+import { AlertCircle } from 'lucide-react';
 export default function EmptyBox(_a) {
     var text = _a.text, size = _a.size;
     var color = 'text-light-text-disabled dark:text-dark-text-disabled';
     var height = size === 'small' ? 'py-6' : 'h-full';
     var iconSize = 'size-6';
     return (<div className={"flex flex-col space-y-2 justify-center items-center w-full ".concat(height)}>
-            <ExclamationCircleIcon className={"".concat(iconSize, " ").concat(color)}/>
+            <AlertCircle className={"".concat(iconSize, " ").concat(color)} strokeWidth={2}/>
             <p className={"text-body1 text-center ".concat(color)}>
                 {text}
             </p>

package/dist/components/iconButton.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import * as HeroIcons24 from '@heroicons/react/24/outline';
-import * as HeroIcons20 from '@heroicons/react/20/solid';
+import * as LucideIcons from 'lucide-react';
 interface IconButtonProps {
     color: "primary" | "secondary" | "tertiary" | "iconOnly";
     state: "enabled" | "selected" | "disabled";
     size: "large" | "medium" | "small";
-    iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
+    iconName: keyof typeof LucideIcons;
     onClick?: any;
     loading?: boolean;
 }

package/dist/components/iconButton.jsx

@@ -1,15 +1,17 @@
 'use client';
-import React, { useState } from 'react';
-import * as HeroIcons24 from '@heroicons/react/24/outline';
-import * as HeroIcons20 from '@heroicons/react/20/solid';
+import React, { useState, useEffect } from 'react';
+import * as LucideIcons from 'lucide-react';
 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, _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]
-        : HeroIcons24[iconName];
+    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
+    // Load icon from Lucide
+    useEffect(function () {
+        if (iconName) {
+            setIcon(LucideIcons[iconName]);
+        }
+    }, [iconName]);
     // Size-based classes
     var sizeClasses = {
         large: 'p-2', // 8px padding
@@ -59,8 +61,6 @@ export default function IconButton(_a) {
                     : '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
-        )}
+      {loading ? (<LoadingSmall size={size}/>) : (Icon && <Icon className={iconSizeClasses[size]} strokeWidth={2}/>)}
     </button>);
 }

package/dist/components/menuItem.jsx

@@ -54,7 +54,7 @@ export default function MenuItem(_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                    return [4 /*yield*/, import('lucide-react')];
                 case 2:
                     module_1 = _a.sent();
                     IconComponent = module_1[iconName];
@@ -101,7 +101,7 @@ export default function MenuItem(_a) {
             : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
       {/* Left group: icon/userImg + label + tag with 8px gap */}
       <div className="flex items-center gap-2">
-        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " text-light-text-secondary dark:text-dark-text-secondary")}/>))}
+        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " text-light-text-secondary dark:text-dark-text-secondary")} strokeWidth={2}/>))}
         <span className={"whitespace-nowrap ".concat(labelClass, " text-light-text-primary dark:text-dark-text-primary")}>
           {label}
         </span>
@@ -109,7 +109,7 @@ export default function MenuItem(_a) {
       </div>
 
       {/* Right icon aligned to the right */}
-      {IconRight && (<IconRight className={"".concat(iconSize, " text-light-text-secondary dark:text-dark-text-secondary flex-shrink-0")}/>)}
+      {IconRight && (<IconRight className={"".concat(iconSize, " text-light-text-secondary dark:text-dark-text-secondary flex-shrink-0")} strokeWidth={2}/>)}
     </div>);
     return href ? <NextLink href={href}>{content}</NextLink> : content;
 }

package/dist/components/select.jsx

@@ -45,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { ChevronDown } from 'lucide-react';
 import Menu from './menu';
 import MenuItem from './menuItem';
 export default function Select(_a) {
@@ -73,7 +73,7 @@ export default function Select(_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                    return [4 /*yield*/, import('lucide-react')];
                 case 2:
                     module_1 = _a.sent();
                     IconComponent = module_1[iconName];
@@ -211,7 +211,7 @@ export default function Select(_a) {
           {/* Content Container */}
           <div className="flex items-center space-x-1 flex-1 overflow-hidden">
             {/* Optional Decoration Icon */}
-            {DecoIcon && (<DecoIcon className={"w-6 h-6 flex-shrink-0 ".concat(getIconColor())}/>)}
+            {DecoIcon && (<DecoIcon className={"w-6 h-6 flex-shrink-0 ".concat(getIconColor())} strokeWidth={2}/>)}
 
             {/* Display Text */}
             <span className="text-body1 truncate">
@@ -220,7 +220,7 @@ export default function Select(_a) {
           </div>
 
           {/* Chevron Icon */}
-          <ChevronDownIcon className={"\n              w-6 h-6 flex-shrink-0 ml-1\n              ".concat(getIconColor(), "\n              transition-transform duration-200\n              ").concat(isOpen ? 'transform rotate-180' : '', "\n            ")}/>
+          <ChevronDown className={"\n              w-6 h-6 flex-shrink-0 ml-1\n              ".concat(getIconColor(), "\n              transition-transform duration-200\n              ").concat(isOpen ? 'transform rotate-180' : '', "\n            ")} strokeWidth={2}/>
         </div>
       </div>
 

package/dist/components/tab.jsx

@@ -55,7 +55,7 @@ export default function Tab(_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                    return [4 /*yield*/, import('lucide-react')];
                 case 2:
                     module_1 = _a.sent();
                     Icon = module_1[iconName];
@@ -102,12 +102,12 @@ export default function Tab(_a) {
     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"/>}
+      {IconLeft && <IconLeft className="w-6 h-6" strokeWidth={2}/>}
       <span className="whitespace-nowrap text-body1 px-[6px]">
         {label}
       </span>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-6 h-6"/>
+          <IconRight className="w-6 h-6" strokeWidth={2}/>
         </div>)}
     </div>);
 }

package/dist/components/tag.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
+import * as LucideIcons from 'lucide-react';
 interface TagProps {
     variant: 'contained' | 'textOnly';
     size: 'medium' | 'small';
     state?: 'enabled' | 'selected';
     label: React.ReactNode;
-    iconName?: keyof typeof HeroIcons;
+    iconName?: keyof typeof LucideIcons;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 export default function Tag({ variant, size, state, label, iconName, onClick, }: TagProps): JSX.Element;

package/dist/components/tag.jsx

@@ -1,14 +1,14 @@
 'use client';
 import React, { useState, useEffect } from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
+import * as LucideIcons from 'lucide-react';
 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;
     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
+    // Load icon directly from Lucide
     useEffect(function () {
         if (iconName) {
-            setIcon(HeroIcons[iconName]);
+            setIcon(LucideIcons[iconName]);
         }
     }, [iconName]);
     // Size and padding
@@ -37,7 +37,7 @@ export default function Tag(_a) {
         : '';
     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"/>}
+      {Icon && <Icon className="w-4 h-4" strokeWidth={2}/>}
       <span>{label}</span>
     </div>);
 }

package/dist/components/timeStamp.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 interface TimeStampProps {
     createdAt: string | number | Date;
     dateFormat: 'absolute' | 'relative';
+    textSize?: 'small' | 'medium' | 'large';
+    textColor?: 'secondary' | 'primary';
+    data?: 'date-and-time' | 'date' | 'time';
 }
-export default function TimeStamp({ createdAt, dateFormat, }: TimeStampProps): React.JSX.Element;
+export default function TimeStamp({ createdAt, dateFormat, textSize, textColor, data, }: TimeStampProps): React.JSX.Element;
 export {};

package/dist/components/timeStamp.jsx

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 export default function TimeStamp(_a) {
-    var createdAt = _a.createdAt, dateFormat = _a.dateFormat;
+    var createdAt = _a.createdAt, dateFormat = _a.dateFormat, _b = _a.textSize, textSize = _b === void 0 ? 'small' : _b, _c = _a.textColor, textColor = _c === void 0 ? 'secondary' : _c, _d = _a.data, data = _d === void 0 ? 'date-and-time' : _d;
     // absolute timestamp
     var absoluteTimeStamp = function (createdAt) {
         var date = new Date(createdAt);
@@ -14,7 +14,17 @@ export default function TimeStamp(_a) {
         var formattedMinutes = minutes.toString().padStart(2, '0');
         var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
         var dayOfWeek = daysOfWeek[date.getDay()];
-        return "".concat(month, "/").concat(day, "/").concat(year, " ").concat(dayOfWeek, " ").concat(formattedHours, ":").concat(formattedMinutes);
+        var dateString = "".concat(month, "/").concat(day, "/").concat(year, " ").concat(dayOfWeek);
+        var timeString = "".concat(formattedHours, ":").concat(formattedMinutes);
+        if (data === 'date') {
+            return dateString;
+        }
+        else if (data === 'time') {
+            return timeString;
+        }
+        else {
+            return "".concat(dateString, " ").concat(timeString);
+        }
     };
     // relative timestamp
     var relativeTimeStamp = function (createdAt) {
@@ -28,6 +38,37 @@ export default function TimeStamp(_a) {
         var weeks = Math.floor(days / 7);
         var months = Math.floor(days / 30);
         var years = Math.floor(days / 365);
+        // Date-based relativity (years, months, weeks, days)
+        if (data === 'date') {
+            if (years > 0) {
+                return "".concat(years, " year").concat(years > 1 ? 's' : '', " ago");
+            }
+            else if (months > 0) {
+                return "".concat(months, " month").concat(months > 1 ? 's' : '', " ago");
+            }
+            else if (weeks > 0) {
+                return "".concat(weeks, " week").concat(weeks > 1 ? 's' : '', " ago");
+            }
+            else if (days > 0) {
+                return "".concat(days, " day").concat(days > 1 ? 's' : '', " ago");
+            }
+            else {
+                return 'today';
+            }
+        }
+        // Time-based relativity (hours, minutes, seconds)
+        if (data === 'time') {
+            if (hours > 0) {
+                return "".concat(hours, " hour").concat(hours > 1 ? 's' : '', " ago");
+            }
+            else if (minutes > 0) {
+                return "".concat(minutes, " minute").concat(minutes > 1 ? 's' : '', " ago");
+            }
+            else {
+                return "".concat(seconds, " second").concat(seconds > 1 ? 's' : '', " ago");
+            }
+        }
+        // Default: date-and-time (full relativity)
         if (years > 0) {
             return "".concat(years, " year").concat(years > 1 ? 's' : '', " ago");
         }
@@ -51,7 +92,13 @@ export default function TimeStamp(_a) {
         }
     };
     var timeStamp = dateFormat === 'absolute' ? absoluteTimeStamp(createdAt) : relativeTimeStamp(createdAt);
-    return (<p className="text-caption text-light-text-secondary dark:text-dark-text-secondary">
+    // Determine text size class
+    var sizeClass = textSize === 'medium' ? 'text-body2' : textSize === 'large' ? 'text-body1' : 'text-caption';
+    // Determine text color classes
+    var colorClass = textColor === 'primary'
+        ? 'text-light-text-primary dark:text-dark-text-primary'
+        : 'text-light-text-secondary dark:text-dark-text-secondary';
+    return (<p className={"".concat(sizeClass, " ").concat(colorClass)}>
             {timeStamp}
         </p>);
 }