oneslash-design-system 1.1.33 → 1.2.1

package/components/menu.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React, { forwardRef } from 'react';
+
+interface MenuProps {
+  children: React.ReactNode;
+  width?: number | string;
+  className?: string;
+}
+
+const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  ({ children, width, className = '' }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={`
+          bg-light-background-accent300 dark:bg-dark-background-accent300
+          rounded-[8px]
+          shadow-lg
+          overflow-hidden
+          ${className}
+        `}
+        style={{ width: width || 'auto' }}
+      >
+        <div className="p-[10px]">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+export default Menu;
+export { Menu };

package/components/navigation.tsx

@@ -0,0 +1,27 @@
+'use client';
+import React from 'react';
+
+interface NavigationProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function Navigation({
+  children,
+  className = '',
+}: NavigationProps) {
+  return (
+    <nav
+      className={`
+        bg-light-background-default dark:bg-dark-background-default
+        border-r border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled
+        p-[10px]
+        ${className}
+      `}
+    >
+      {children}
+    </nav>
+  );
+}
+
+export { Navigation };

package/components/select.tsx

@@ -0,0 +1,253 @@
+'use client';
+import React, { useState, useEffect, useRef, useCallback, SVGProps, JSX } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import Menu from './menu';
+import MenuItem from './menuItem';
+
+type IconType = (props: SVGProps<SVGSVGElement>) => JSX.Element;
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  iconName?: string;
+}
+
+interface SelectProps {
+  value?: string | string[];
+  options: SelectOption[];
+  onChange?: (value: string | string[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  decoIconName?: string;
+  width?: number | string;
+  multiple?: boolean;
+  className?: string;
+}
+
+export default function Select({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  placeholder = 'Label',
+  decoIconName,
+  width,
+  multiple = false,
+  className = '',
+}: SelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [DecoIcon, setDecoIcon] = useState<IconType | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  const selectRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Handle SSR
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Load decoration icon
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const IconComponent = module[iconName as keyof typeof module] as IconType;
+      return IconComponent || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcon = async () => {
+      if (decoIconName) {
+        setDecoIcon(await loadIcon(decoIconName));
+      }
+    };
+    fetchIcon();
+  }, [decoIconName, loadIcon]);
+
+  // Close menu when clicking outside
+  useEffect(() => {
+    if (!mounted) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        selectRef.current &&
+        menuRef.current &&
+        !selectRef.current.contains(event.target as Node) &&
+        !menuRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, mounted]);
+
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    setIsFocused(!isOpen);
+  };
+
+  const handleSelect = (optionValue: string) => {
+    if (multiple) {
+      const currentValues = Array.isArray(value) ? value : [];
+      const newValues = currentValues.includes(optionValue)
+        ? currentValues.filter(v => v !== optionValue)
+        : [...currentValues, optionValue];
+      onChange?.(newValues);
+    } else {
+      onChange?.(optionValue);
+      setIsOpen(false);
+      setIsFocused(false);
+    }
+  };
+
+  const getDisplayLabel = () => {
+    if (!value) return placeholder;
+
+    if (multiple && Array.isArray(value)) {
+      if (value.length === 0) return placeholder;
+      const labels = value
+        .map(v => options.find(opt => opt.value === v)?.label)
+        .filter(Boolean);
+      return labels.join(', ');
+    }
+
+    return options.find(opt => opt.value === value)?.label || placeholder;
+  };
+
+  const isSelected = (optionValue: string) => {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(optionValue);
+    }
+    return value === optionValue;
+  };
+
+  // Determine border styles based on state
+  const getBorderStyles = () => {
+    if (disabled) {
+      return 'border border-light-actionOutlinedBorder-disabled dark:border-dark-actionOutlinedBorder-disabled';
+    }
+    if (isFocused || isOpen) {
+      return 'border border-light-accent-main dark:border-dark-accent-main outline outline-1 outline-light-accent-main dark:outline-dark-accent-main outline-offset-0';
+    }
+    if (isHovered) {
+      return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled';
+    }
+    return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled';
+  };
+
+  // Determine background color
+  const getBackgroundColor = () => {
+    if (isHovered && !isOpen && !disabled) {
+      return 'bg-light-action-hover dark:bg-dark-action-hover';
+    }
+    return 'bg-light-background-default dark:bg-dark-background-default';
+  };
+
+  // Determine text color
+  const getTextColor = () => {
+    if (disabled) {
+      return 'text-light-text-disabled dark:text-dark-text-disabled';
+    }
+    return 'text-light-text-primary dark:text-dark-text-primary';
+  };
+
+  // Determine icon color
+  const getIconColor = () => {
+    if (disabled) {
+      return 'text-light-text-disabled dark:text-dark-text-disabled';
+    }
+    return 'text-light-text-secondary dark:text-dark-text-secondary';
+  };
+
+  return (
+    <div className={`relative ${className}`} style={{ width: width || '100%' }}>
+      {/* Select Button */}
+      <div
+        ref={selectRef}
+        className={`
+          rounded-[8px]
+          ${getBorderStyles()}
+          ${getBackgroundColor()}
+          ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
+          transition-all duration-200 ease-in-out
+          outline-none
+        `}
+        onClick={handleToggle}
+        onMouseEnter={() => !disabled && setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        tabIndex={disabled ? -1 : 0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleToggle();
+          }
+        }}
+      >
+        {/* Inner Content Container with Padding */}
+        <div className={`flex items-center justify-between p-2 ${getTextColor()}`}>
+          {/* 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 ${getIconColor()}`} />
+            )}
+
+            {/* Display Text */}
+            <span className="text-body1 truncate">
+              {getDisplayLabel()}
+            </span>
+          </div>
+
+          {/* Chevron Icon */}
+          <ChevronDownIcon
+            className={`
+              w-6 h-6 flex-shrink-0 ml-1
+              ${getIconColor()}
+              transition-transform duration-200
+              ${isOpen ? 'transform rotate-180' : ''}
+            `}
+          />
+        </div>
+      </div>
+
+      {/* Dropdown Menu */}
+      {mounted && isOpen && (
+        <div
+          className="absolute z-50 mt-1 left-0"
+          style={{ width: width || '100%' }}
+        >
+          <Menu ref={menuRef} width={width || '100%'}>
+            {options.map((option) => (
+              <MenuItem
+                key={option.value}
+                label={option.label}
+                iconName={option.iconName}
+                isSelected={isSelected(option.value)}
+                onClick={() => handleSelect(option.value)}
+                className="w-full"
+              />
+            ))}
+          </Menu>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Select };

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/dist/components/menu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface MenuProps {
+    children: React.ReactNode;
+    width?: number | string;
+    className?: string;
+}
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+export default Menu;
+export { Menu };

package/dist/components/menu.jsx

@@ -0,0 +1,13 @@
+'use client';
+import React, { forwardRef } from 'react';
+var Menu = forwardRef(function (_a, ref) {
+    var children = _a.children, width = _a.width, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (<div ref={ref} className={"\n          bg-light-background-accent300 dark:bg-dark-background-accent300\n          rounded-[8px]\n          shadow-lg\n          overflow-hidden\n          ".concat(className, "\n        ")} style={{ width: width || 'auto' }}>
+        <div className="p-[10px]">
+          {children}
+        </div>
+      </div>);
+});
+Menu.displayName = 'Menu';
+export default Menu;
+export { Menu };

package/dist/components/navigation.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NavigationProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export default function Navigation({ children, className, }: NavigationProps): React.JSX.Element;
+export { Navigation };

package/dist/components/navigation.jsx

@@ -0,0 +1,9 @@
+'use client';
+import React from 'react';
+export default function Navigation(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return (<nav className={"\n        bg-light-background-default dark:bg-dark-background-default\n        border-r border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled\n        p-[10px]\n        ".concat(className, "\n      ")}>
+      {children}
+    </nav>);
+}
+export { Navigation };

package/dist/components/select.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    iconName?: string;
+}
+interface SelectProps {
+    value?: string | string[];
+    options: SelectOption[];
+    onChange?: (value: string | string[]) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    decoIconName?: string;
+    width?: number | string;
+    multiple?: boolean;
+    className?: string;
+}
+export default function Select({ value, options, onChange, disabled, placeholder, decoIconName, width, multiple, className, }: SelectProps): JSX.Element;
+export { Select };

package/dist/components/select.jsx

@@ -0,0 +1,235 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    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 Menu from './menu';
+import MenuItem from './menuItem';
+export default function Select(_a) {
+    var _this = this;
+    var value = _a.value, options = _a.options, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Label' : _c, decoIconName = _a.decoIconName, width = _a.width, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var _h = useState(false), isHovered = _h[0], setIsHovered = _h[1];
+    var _j = useState(null), DecoIcon = _j[0], setDecoIcon = _j[1];
+    var _k = useState(false), mounted = _k[0], setMounted = _k[1];
+    var selectRef = useRef(null);
+    var menuRef = useRef(null);
+    // Handle SSR
+    useEffect(function () {
+        setMounted(true);
+    }, []);
+    // Load decoration icon
+    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
+        var module_1, IconComponent, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!iconName)
+                        return [2 /*return*/, null];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, import('@heroicons/react/24/outline')];
+                case 2:
+                    module_1 = _a.sent();
+                    IconComponent = module_1[iconName];
+                    return [2 /*return*/, IconComponent || null];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error("Failed to load icon ".concat(iconName, ":"), error_1);
+                    return [2 /*return*/, null];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    useEffect(function () {
+        var fetchIcon = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!decoIconName) return [3 /*break*/, 2];
+                        _a = setDecoIcon;
+                        return [4 /*yield*/, loadIcon(decoIconName)];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchIcon();
+    }, [decoIconName, loadIcon]);
+    // Close menu when clicking outside
+    useEffect(function () {
+        if (!mounted)
+            return;
+        var handleClickOutside = function (event) {
+            if (selectRef.current &&
+                menuRef.current &&
+                !selectRef.current.contains(event.target) &&
+                !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setIsFocused(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, mounted]);
+    var handleToggle = function () {
+        if (disabled)
+            return;
+        setIsOpen(!isOpen);
+        setIsFocused(!isOpen);
+    };
+    var handleSelect = function (optionValue) {
+        if (multiple) {
+            var currentValues = Array.isArray(value) ? value : [];
+            var newValues = currentValues.includes(optionValue)
+                ? currentValues.filter(function (v) { return v !== optionValue; })
+                : __spreadArray(__spreadArray([], currentValues, true), [optionValue], false);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(optionValue);
+            setIsOpen(false);
+            setIsFocused(false);
+        }
+    };
+    var getDisplayLabel = function () {
+        var _a;
+        if (!value)
+            return placeholder;
+        if (multiple && Array.isArray(value)) {
+            if (value.length === 0)
+                return placeholder;
+            var labels = value
+                .map(function (v) { var _a; return (_a = options.find(function (opt) { return opt.value === v; })) === null || _a === void 0 ? void 0 : _a.label; })
+                .filter(Boolean);
+            return labels.join(', ');
+        }
+        return ((_a = options.find(function (opt) { return opt.value === value; })) === null || _a === void 0 ? void 0 : _a.label) || placeholder;
+    };
+    var isSelected = function (optionValue) {
+        if (multiple && Array.isArray(value)) {
+            return value.includes(optionValue);
+        }
+        return value === optionValue;
+    };
+    // Determine border styles based on state
+    var getBorderStyles = function () {
+        if (disabled) {
+            return 'border border-light-actionOutlinedBorder-disabled dark:border-dark-actionOutlinedBorder-disabled';
+        }
+        if (isFocused || isOpen) {
+            return 'border border-light-accent-main dark:border-dark-accent-main outline outline-1 outline-light-accent-main dark:outline-dark-accent-main outline-offset-0';
+        }
+        if (isHovered) {
+            return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled';
+        }
+        return 'border border-light-actionOutlinedBorder-enabled dark:border-dark-actionOutlinedBorder-enabled';
+    };
+    // Determine background color
+    var getBackgroundColor = function () {
+        if (isHovered && !isOpen && !disabled) {
+            return 'bg-light-action-hover dark:bg-dark-action-hover';
+        }
+        return 'bg-light-background-default dark:bg-dark-background-default';
+    };
+    // Determine text color
+    var getTextColor = function () {
+        if (disabled) {
+            return 'text-light-text-disabled dark:text-dark-text-disabled';
+        }
+        return 'text-light-text-primary dark:text-dark-text-primary';
+    };
+    // Determine icon color
+    var getIconColor = function () {
+        if (disabled) {
+            return 'text-light-text-disabled dark:text-dark-text-disabled';
+        }
+        return 'text-light-text-secondary dark:text-dark-text-secondary';
+    };
+    return (<div className={"relative ".concat(className)} style={{ width: width || '100%' }}>
+      {/* Select Button */}
+      <div ref={selectRef} className={"\n          rounded-[8px]\n          ".concat(getBorderStyles(), "\n          ").concat(getBackgroundColor(), "\n          ").concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer', "\n          transition-all duration-200 ease-in-out\n          outline-none\n        ")} onClick={handleToggle} onMouseEnter={function () { return !disabled && setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} tabIndex={disabled ? -1 : 0} onKeyDown={function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleToggle();
+            }
+        }}>
+        {/* Inner Content Container with Padding */}
+        <div className={"flex items-center justify-between p-2 ".concat(getTextColor())}>
+          {/* 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())}/>)}
+
+            {/* Display Text */}
+            <span className="text-body1 truncate">
+              {getDisplayLabel()}
+            </span>
+          </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            ")}/>
+        </div>
+      </div>
+
+      {/* Dropdown Menu */}
+      {mounted && isOpen && (<div className="absolute z-50 mt-1 left-0" style={{ width: width || '100%' }}>
+          <Menu ref={menuRef} width={width || '100%'}>
+            {options.map(function (option) { return (<MenuItem key={option.value} label={option.label} iconName={option.iconName} isSelected={isSelected(option.value)} onClick={function () { return handleSelect(option.value); }} className="w-full"/>); })}
+          </Menu>
+        </div>)}
+    </div>);
+}
+export { Select };

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/index.d.ts

@@ -6,9 +6,12 @@ export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
 export * from './components/loadingScreen';
+export * from './components/menu';
 export * from './components/menuItem';
 export * from './components/modal';
+export * from './components/navigation';
 export * from './components/popover';
+export * from './components/select';
 export * from './components/tab';
 export * from './components/tag';
 export * from './components/textField';

package/dist/index.js

@@ -6,9 +6,12 @@ export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
 export * from './components/loadingScreen';
+export * from './components/menu';
 export * from './components/menuItem';
 export * from './components/modal';
+export * from './components/navigation';
 export * from './components/popover';
+export * from './components/select';
 export * from './components/tab';
 export * from './components/tag';
 export * from './components/textField';

package/dist/output.css

@@ -549,6 +549,9 @@ video {
   left: 0px;
   right: 0px;
 }
+.left-0 {
+  left: 0px;
+}
 .top-4 {
   top: 1rem;
 }
@@ -561,6 +564,9 @@ video {
 .mb-1 {
   margin-bottom: 0.25rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -579,6 +585,9 @@ video {
 .flex {
   display: flex;
 }
+.hidden {
+  display: none;
+}
 .size-5 {
   width: 1.25rem;
   height: 1.25rem;
@@ -641,6 +650,16 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.rotate-180 {
+  --tw-rotate: 180deg;
+  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));
+}
 .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 +727,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -737,6 +759,12 @@ video {
 .border-4 {
   border-width: 4px;
 }
+.border-r {
+  border-right-width: 1px;
+}
+.border-t {
+  border-top-width: 1px;
+}
 .border-none {
   border-style: none;
 }
@@ -748,6 +776,14 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(238 174 3 / var(--tw-border-opacity));
 }
+.border-light-actionOutlinedBorder-disabled {
+  --tw-border-opacity: 1;
+  border-color: rgb(176 176 176 / var(--tw-border-opacity));
+}
+.border-light-actionOutlinedBorder-enabled {
+  --tw-border-opacity: 1;
+  border-color: rgb(136 136 136 / var(--tw-border-opacity));
+}
 .border-light-misc-divider {
   --tw-border-opacity: 1;
   border-color: rgb(209 209 209 / var(--tw-border-opacity));
@@ -767,6 +803,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));
@@ -783,6 +822,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(238 174 3 / var(--tw-bg-opacity));
 }
+.bg-light-action-hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 243 243 / var(--tw-bg-opacity));
+}
 .bg-light-actionBackground-disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(238 238 238 / var(--tw-bg-opacity));
@@ -852,6 +895,9 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-\[10px\] {
+  padding: 10px;
+}
 .p-\[3px\] {
   padding: 3px;
 }
@@ -870,6 +916,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;
@@ -953,6 +1003,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.outline {
+  outline-style: solid;
+}
+.outline-1 {
+  outline-width: 1px;
+}
+.outline-offset-0 {
+  outline-offset: 0px;
+}
+.outline-light-accent-main {
+  outline-color: #EEAE03;
+}
 .ring-2 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -979,11 +1041,24 @@ video {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1037,6 +1112,21 @@ body {
 
 @media (prefers-color-scheme: dark) {
 
+  .dark\:border-dark-accent-main {
+    --tw-border-opacity: 1;
+    border-color: rgb(255 205 41 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-dark-actionOutlinedBorder-disabled {
+    --tw-border-opacity: 1;
+    border-color: rgb(56 56 56 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-dark-actionOutlinedBorder-enabled {
+    --tw-border-opacity: 1;
+    border-color: rgb(123 123 123 / var(--tw-border-opacity));
+  }
+
   .dark\:border-dark-misc-divider {
     --tw-border-opacity: 1;
     border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -1052,11 +1142,20 @@ 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));
   }
 
+  .dark\:bg-dark-action-hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(61 61 61 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-dark-actionBackground-disabled {
     --tw-bg-opacity: 1;
     background-color: rgb(56 56 56 / var(--tw-bg-opacity));
@@ -1152,6 +1251,10 @@ body {
     color: rgb(0 0 0 / var(--tw-text-opacity));
   }
 
+  .dark\:outline-dark-accent-main {
+    outline-color: #FFCD29;
+  }
+
   .dark\:ring-dark-accent-main {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(255 205 41 / var(--tw-ring-opacity));

package/index.ts

@@ -7,9 +7,12 @@ export * from './components/checkBox';
 export * from './components/emptyBox';
 export * from './components/iconButton';
 export * from './components/loadingScreen';
+export * from './components/menu';
 export * from './components/menuItem';
 export * from './components/modal';
+export * from './components/navigation';
 export * from './components/popover';
+export * from './components/select';
 export * from './components/tab';
 export * from './components/tag';
 export * from './components/textField';

package/package.json

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