oneslash-design-system 1.1.29 → 1.1.31

package/components/tag.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { useState, useEffect, JSX } from 'react';
+import React, { useState, useEffect } from 'react';
 import * as HeroIcons from '@heroicons/react/24/outline';
 
 interface TagProps {

package/components/textField.tsx

@@ -8,10 +8,8 @@ interface TextFieldProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Specify the event type for both input and textarea
   onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Handle blur event for input/textarea
   onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Handle focus event for input/textarea
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void; // Add onKeyDown
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   autoFocus?: boolean;
-  iconLeft?: React.ReactNode;
-  iconRight?: React.ReactNode | React.ComponentType<any>;
   multiline?: boolean;
   maxRows?: number;
   disabled?: boolean;
@@ -28,8 +26,6 @@ export default function TextField({
   onFocus,
   onKeyDown,
   autoFocus = false, // Accept the autoFocus prop with default value
-  iconLeft,
-  iconRight,
   multiline = false,
   maxRows = 6,
   disabled = false,
@@ -60,16 +56,6 @@ export default function TextField({
     border-gray-300
   `;
 
-  const renderIconRight = () => {
-    if (React.isValidElement(iconRight)) {
-      return iconRight;
-    }
-    if (typeof iconRight === 'function') {
-      return React.createElement(iconRight); 
-    }
-    return null;
-  };
-
   return (
     <div className="flex flex-col w-full">
       {label && (
@@ -78,16 +64,6 @@ export default function TextField({
         </label>
       )}
       <div className="relative">
-        {iconLeft && (
-          <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
-            {iconLeft}
-          </span>
-        )}
-        {iconRight && (
-          <span className="absolute inset-y-0 right-0 pr-3 flex items-center">
-            {renderIconRight()}
-          </span>
-        )}
         {multiline ? (
           <textarea
             id={id}

package/components/userImage.tsx

@@ -6,18 +6,57 @@ interface UserImageProps {
   userImgUrl?: string;
 }
 
+//read initials from userHandle
+function getInitials(userHandle: string): string {
+  const words = userHandle.trim().split(/\s+/);
+  return words.slice(0, 2).map(word => word.charAt(0).toUpperCase()).join('');
+}
+
+function getColorSeed(userHandle: string): string {
+  const words = userHandle.trim().split(/\s+/);
+  let letters = words.map(word => word.charAt(0).toLowerCase());
+  if (letters.length === 1 && words[0].length >= 2) {
+    letters.push(words[0].charAt(1).toLowerCase());
+  } else if (letters.length > 2) {
+    letters = letters.slice(0, 2);
+  } else if (letters.length === 0) {
+    letters = ['x', 'x'];
+  }
+  return letters.join('');
+}
+
+function getHash(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash;
+}
+
 export default function UserImage({ 
 	userHandle, 
 	userImgUrl,
  }: UserImageProps) {
 
-  const defaultInitial = userHandle.charAt(0).toUpperCase();
+  const displayInitial = userHandle.charAt(0).toUpperCase() || 'A';
+  const seed = getColorSeed(userHandle);
+  const hue = Math.abs(getHash(seed)) % 360;
+
+  // Light mode: lighter pastel
+  const lightBg = `hsl(${hue}, 20%, 80%)`;
+  // Dark mode: darker variant
+  const darkBg = `hsl(${hue}, 20%, 30%)`;
 
   return (
-    <div 
-			className="flex items-center justify-center w-6 h-6 rounded-full overflow-hidden
-			bg-light-background-accent200 dark:bg-dark-background-accent200 
-			text-light-text-secondary dark:text-dark-text-secondary ">
+    <div
+      style={{
+        '--light-bg': lightBg,
+        '--dark-bg': darkBg,
+      } as React.CSSProperties}
+      className={`flex items-center justify-center w-6 h-6 rounded-full overflow-hidden
+        bg-[var(--light-bg)] dark:bg-[var(--dark-bg)]
+        text-light-text-secondary dark:text-dark-text-secondary`}
+    >
       {userImgUrl ? (
         <img
           src={userImgUrl}
@@ -25,9 +64,9 @@ export default function UserImage({
           className="w-full h-full object-cover rounded-full"
         />
       ) : (
-        <span className="text-body1">
-					{defaultInitial}
-				</span>
+        <span className="text-body1 text-light-text-secondary dark:text-dark-text-secondary">
+          {displayInitial}
+        </span>
       )}
     </div>
   );

package/dist/components/button.jsx

@@ -124,9 +124,9 @@ export default function Button(_a) {
         setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
         setIsHovered(false); }} onClick={onClickButton}>
       {/* Group IconLeft and label in a flex container for left alignment */}
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center">
         {IconLeft && <IconLeft className={sizeIcon}/>}
-        <div className="whitespace-nowrap overflow-hidden truncate">{label}</div>
+        <div className="whitespace-nowrap overflow-hidden truncate px-2">{label}</div>
       </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon}/>

package/dist/components/textField.d.ts

@@ -8,8 +8,6 @@ interface TextFieldProps {
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     autoFocus?: boolean;
-    iconLeft?: React.ReactNode;
-    iconRight?: React.ReactNode | React.ComponentType<any>;
     multiline?: boolean;
     maxRows?: number;
     disabled?: boolean;
@@ -17,5 +15,5 @@ interface TextFieldProps {
     size?: 'large' | 'medium' | 'small';
 }
 export default function TextField({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, // Accept the autoFocus prop with default value
-iconLeft, iconRight, multiline, maxRows, disabled, error, size, }: TextFieldProps): React.JSX.Element;
+multiline, maxRows, disabled, error, size, }: TextFieldProps): React.JSX.Element;
 export {};

package/dist/components/textField.jsx

@@ -2,7 +2,8 @@
 import React, { useState } from 'react';
 export default function TextField(_a) {
     var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, // Accept the autoFocus prop with default value
-    iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.multiline, multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'medium' : _g;
+    _c = _a.multiline, // Accept the autoFocus prop with default value
+    multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'medium' : _g;
     var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
     // Define classes for size: text size and padding
     var sizeClasses = {
@@ -14,26 +15,11 @@ export default function TextField(_a) {
     var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
     var borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
     var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
-    var renderIconRight = function () {
-        if (React.isValidElement(iconRight)) {
-            return iconRight;
-        }
-        if (typeof iconRight === 'function') {
-            return React.createElement(iconRight);
-        }
-        return null;
-    };
     return (<div className="flex flex-col w-full">
       {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
         </label>)}
       <div className="relative">
-        {iconLeft && (<span className="absolute inset-y-0 left-0 pl-3 flex items-center">
-            {iconLeft}
-          </span>)}
-        {iconRight && (<span className="absolute inset-y-0 right-0 pr-3 flex items-center">
-            {renderIconRight()}
-          </span>)}
         {multiline ? (<textarea id={id} rows={maxRows} className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
                 setIsFocused(true);
                 if (onFocus)

package/dist/output.css

@@ -549,16 +549,6 @@ video {
   left: 0px;
   right: 0px;
 }
-.inset-y-0 {
-  top: 0px;
-  bottom: 0px;
-}
-.left-0 {
-  left: 0px;
-}
-.right-0 {
-  right: 0px;
-}
 .top-4 {
   top: 1rem;
 }
@@ -888,12 +878,6 @@ video {
   padding-top: 3px;
   padding-bottom: 3px;
 }
-.pl-3 {
-  padding-left: 0.75rem;
-}
-.pr-3 {
-  padding-right: 0.75rem;
-}
 .text-center {
   text-align: center;
 }

package/package.json

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