oneslash-design-system 1.1.32 → 1.1.34

package/components/tableCell.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableCellProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableCell({children}: TableCellProps) {
+
+		return (
+				<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider">
+						{children}
+				</div>
+		);
+};

package/components/tableContainer.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableContainerProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableContainer({children}: TableContainerProps) {
+
+		return (
+				<div className="w-full overflow-x-auto bg-light-background-default dark:bg-dark-background-default">
+						{children}
+				</div>
+		);
+};

package/components/tableHeader.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableHeaderProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableHeader({children}: TableHeaderProps) {
+
+		return (
+				<div className="py-2 bg-light-background-default dark:bg-dark-background-default">
+						{children}
+				</div>
+		);
+};

package/components/tableHeaderCell.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableHeaderCellProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableHeaderCell({children}: TableHeaderCellProps) {
+
+		return (
+				<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary">
+						{children}
+				</div>
+		);
+};

package/components/tableRow.tsx

@@ -0,0 +1,15 @@
+'use client';
+import React from 'react';
+
+interface TableRowProps{
+		children: React.ReactNode;
+	}
+	
+export default function TableRow({children}: TableRowProps) {
+
+		return (
+				<div className="flex w-full">
+						{children}
+				</div>
+		);
+};

package/components/userImage.tsx

@@ -6,18 +6,48 @@ interface UserImageProps {
   userImgUrl?: string;
 }
 
-export default function UserImage({ 
-	userHandle, 
-	userImgUrl,
- }: UserImageProps) {
+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 displayInitial = userHandle.charAt(0).toUpperCase() || 'A';
+  const seed = getColorSeed(userHandle);
+  const hue = Math.abs(getHash(seed)) % 360;
 
-  const defaultInitial = userHandle.charAt(0).toUpperCase();
+  // Light mode: vibrant pastel
+  const lightBg = `hsl(${hue}, 80%, 80%)`;
+  // Dark mode: darker, vibrant variant
+  const darkBg = `hsl(${hue}, 80%, 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 +55,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/tableCell.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableCellProps {
+    children: React.ReactNode;
+}
+export default function TableCell({ children }: TableCellProps): React.JSX.Element;
+export {};

package/dist/components/tableCell.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function TableCell(_a) {
+    var children = _a.children;
+    return (<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider">
+						{children}
+				</div>);
+}
+;

package/dist/components/tableContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableContainerProps {
+    children: React.ReactNode;
+}
+export default function TableContainer({ children }: TableContainerProps): React.JSX.Element;
+export {};

package/dist/components/tableContainer.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function TableContainer(_a) {
+    var children = _a.children;
+    return (<div className="w-full overflow-x-auto bg-light-background-default dark:bg-dark-background-default">
+						{children}
+				</div>);
+}
+;

package/dist/components/tableHeader.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableHeaderProps {
+    children: React.ReactNode;
+}
+export default function TableHeader({ children }: TableHeaderProps): React.JSX.Element;
+export {};

package/dist/components/tableHeader.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function TableHeader(_a) {
+    var children = _a.children;
+    return (<div className="py-2 bg-light-background-default dark:bg-dark-background-default">
+						{children}
+				</div>);
+}
+;

package/dist/components/tableHeaderCell.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableHeaderCellProps {
+    children: React.ReactNode;
+}
+export default function TableHeaderCell({ children }: TableHeaderCellProps): React.JSX.Element;
+export {};

package/dist/components/tableHeaderCell.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function TableHeaderCell(_a) {
+    var children = _a.children;
+    return (<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary">
+						{children}
+				</div>);
+}
+;

package/dist/components/tableRow.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TableRowProps {
+    children: React.ReactNode;
+}
+export default function TableRow({ children }: TableRowProps): React.JSX.Element;
+export {};

package/dist/components/tableRow.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function TableRow(_a) {
+    var children = _a.children;
+    return (<div className="flex w-full">
+						{children}
+				</div>);
+}
+;

package/dist/components/textarea.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface TextareaProps {
+    id: string;
+    label?: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    autoFocus?: boolean;
+    maxRows?: number;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'large' | 'medium' | 'small';
+}
+export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, maxRows, disabled, error, size, }: TextareaProps): React.JSX.Element;
+export {};

package/dist/components/textarea.jsx

@@ -0,0 +1,56 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+export default function Textarea(_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, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f;
+    var textareaRef = useRef(null);
+    var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    useEffect(function () {
+        var textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        var adjustHeight = function () {
+            textarea.style.height = 'auto'; // Reset height to calculate scrollHeight
+            var lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
+            var maxHeight = lineHeight * maxRows;
+            var scrollHeight = textarea.scrollHeight;
+            // Set height to scrollHeight, capped at maxRows, but at least 1 line
+            textarea.style.height = "".concat(Math.max(Math.min(scrollHeight, maxHeight), lineHeight), "px");
+            // Enable vertical scroll if content exceeds maxRows
+            textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+        };
+        // Set initial rows to 1 for single-line height
+        textarea.rows = 1;
+        adjustHeight();
+        textarea.addEventListener('input', adjustHeight);
+        return function () { return textarea.removeEventListener('input', adjustHeight); };
+    }, [maxRows]);
+    // Define classes for size: text size and padding
+    var sizeClasses = {
+        large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
+        medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
+        small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+    }[size];
+    var baseClasses = 'w-full border rounded-[8px]';
+    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  ");
+    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">
+        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+            setIsFocused(true);
+            if (onFocus)
+                onFocus(e);
+        }} onBlur={function (e) {
+            setIsFocused(false);
+            if (onBlur)
+                onBlur(e);
+        }} onKeyDown={onKeyDown} autoFocus={autoFocus} disabled={disabled} autoComplete="off"/>
+      </div>
+      {error && (<p className="mt-1 text-light-error-main text-body2">
+          This field is required
+        </p>)}
+    </div>);
+}

package/dist/components/userImage.jsx

@@ -1,13 +1,41 @@
 'use client';
 import React from 'react';
+function getColorSeed(userHandle) {
+    var words = userHandle.trim().split(/\s+/);
+    var letters = words.map(function (word) { return 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) {
+    var hash = 0;
+    for (var i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return hash;
+}
 export default function UserImage(_a) {
     var userHandle = _a.userHandle, userImgUrl = _a.userImgUrl;
-    var defaultInitial = userHandle.charAt(0).toUpperCase();
-    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 ">
-      {userImgUrl ? (<img src={userImgUrl} alt={userHandle} className="w-full h-full object-cover rounded-full"/>) : (<span className="text-body1">
-					{defaultInitial}
-				</span>)}
+    var displayInitial = userHandle.charAt(0).toUpperCase() || 'A';
+    var seed = getColorSeed(userHandle);
+    var hue = Math.abs(getHash(seed)) % 360;
+    // Light mode: vibrant pastel
+    var lightBg = "hsl(".concat(hue, ", 80%, 80%)");
+    // Dark mode: darker, vibrant variant
+    var darkBg = "hsl(".concat(hue, ", 80%, 30%)");
+    return (<div style={{
+            '--light-bg': lightBg,
+            '--dark-bg': darkBg,
+        }} 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} alt={userHandle} className="w-full h-full object-cover rounded-full"/>) : (<span className="text-body1 text-light-text-secondary dark:text-dark-text-secondary">
+          {displayInitial}
+        </span>)}
     </div>);
 }

package/dist/output.css

@@ -579,6 +579,9 @@ video {
 .flex {
   display: flex;
 }
+.hidden {
+  display: none;
+}
 .size-5 {
   width: 1.25rem;
   height: 1.25rem;
@@ -641,6 +644,9 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -708,6 +714,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -737,6 +746,9 @@ video {
 .border-4 {
   border-width: 4px;
 }
+.border-t {
+  border-top-width: 1px;
+}
 .border-none {
   border-style: none;
 }
@@ -767,6 +779,9 @@ video {
 .border-t-transparent {
   border-top-color: transparent;
 }
+.bg-\[var\(--light-bg\)\] {
+  background-color: var(--light-bg);
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -870,6 +885,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -1052,6 +1071,10 @@ body {
     border-color: rgb(176 176 176 / var(--tw-border-opacity));
   }
 
+  .dark\:bg-\[var\(--dark-bg\)\] {
+    background-color: var(--dark-bg);
+  }
+
   .dark\:bg-dark-accent-main {
     --tw-bg-opacity: 1;
     background-color: rgb(255 205 41 / var(--tw-bg-opacity));

package/package.json

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