oneslash-design-system 1.2.11 → 1.2.13

package/designTokens.js

@@ -0,0 +1,234 @@
+// design tokens definitions
+module.exports = {
+  colors: {
+    // light
+    light:{
+      text:{
+        primary: '#000000',
+        secondary: '#6D6D6D',
+        disabled: '#9E9E9E',
+        contrast: '#ffffff',
+      },
+      accent:{
+        main: '#EEAE03',
+        dark: '#CE8602',
+        light: '#FFDD43',
+        contrast: '#000000',
+      },
+      primary:{
+        main: '#454545',
+        dark: '#262626',
+        light: '#888888',
+      },
+      secondary:{
+        main: '#B0B0B0',
+        dark: '#888888',
+        light: '#D1D1D1',
+      },
+      error:{
+        main: '#D32F2F',
+        dark: '#B22323',
+        light: '#F27777',
+      },
+      warning:{
+        main: '#EF6C00',
+        dark: '#CC5302',
+        light: '#FFA732',
+      },
+      info:{
+        main: '#0087D4',
+        dark: '#006BAB',
+        light: '#2CC1FF',
+      },
+      success:{
+        main: '#328736',
+        dark: '#2A6B2D',
+        light: '#67C16B',
+      },
+      background:{
+        default: '#e8e8e8',
+        accent100:'#f1f1f1',
+        accent200:'#f7f7f7',
+        accent300:'#FFFFFF',
+      },
+      action:{
+        active: '#888888',
+        hover: '#F3F3F3',
+        selected: '#E3E3E3',
+        disabledBackground: '#D1D1D1',
+        disabled: '#B0B0B0',
+      },
+      actionBackground:{
+        enabled: '#FFFFFF',
+        hovered: '#FFFFFF',
+        selected: '#FFFFFF',
+        disabled: '#EEEEEE',
+      },
+      actionOutlinedBorder:{
+        enabled: '#888888',
+        hovered: '#CDCDCD',
+        selected: '#E8E8E8',
+        disabled: '#B0B0B0',
+      },
+      misc:{
+        divider: '#D1D1D1',
+      },
+    },
+
+    // dark
+    dark:{
+      text:{
+        primary: '#eeeeee',
+        secondary: '#B0B0B0',
+        disabled: '#6D6D6D',
+        contrast: '#000000',
+      },
+      accent:{
+        main: '#FFCD29',
+        dark: '#CE8602',
+        light: '#FFDD43',
+        contrast: '#000000',
+      },
+      primary:{
+        main: '#D5D5D5',
+        dark: '#E9E9E9',
+        light: '#9A9A9A',
+      },
+      secondary:{
+        main: '#4F4F4F',
+        dark: '#454545',
+        light: '#6D6D6D',
+      },
+      error:{
+        main: '#E74C4C',
+        dark: '#B22323',
+        light: '#F27777',
+      },
+      warning:{
+        main: '#FF8C0A',
+        dark: '#CC5302',
+        light: '#FFA732',
+      },
+      info:{
+        main: '#00AFFF',
+        dark: '#006BAB',
+        light: '#2CC1FF',
+      },
+      success:{
+        main: '#42A547',
+        dark: '#2A6B2D',
+        light: '#67C16B',
+      },
+      background:{
+        default: '#262626',
+        accent100:'#333333',
+        accent200:'#454545',
+        accent300:'#4F4F4F',
+      },
+      action:{
+        active: '#171717',
+        hover: '#3D3D3D',
+        selected: '#4E4E4E',
+        disabledBackground: '#3C3C3C',
+        disabled: '#383838',
+      },
+      actionBackground:{
+        enabled: '#FFFFFF',
+        hovered: '#FFFFFF',
+        selected: '#FFFFFF',
+        disabled: '#383838',
+      },
+      actionOutlinedBorder:{
+        enabled: '#7B7B7B',
+        hovered: '#2F2F2F',
+        selected: '#404040',
+        disabled: '#383838',
+      },
+      misc:{
+        divider: '#404040',
+      },
+    },
+  },
+
+  spacing: {
+    small: '4px',
+    medium: '8px',
+    large: '16px',
+  },
+  
+  typography: {
+    family: 'Inter, sans-serif',
+    h1: {
+      weight: '300',
+      size: '96px',
+      lineHeight: '120%',
+      letterSpacing: '-1.5px',
+    },
+    h2: {
+      weight: '300',
+      size: '60px',
+      lineHeight: '120%',
+      letterSpacing: '-0.5px',
+    },
+    h3: {
+      weight: '400',
+      size: '48px',
+      lineHeight: '120%',
+      letterSpacing: '0px',
+    },
+    h4: {
+      weight: '400',
+      size: '34px',
+      lineHeight: '120%',
+      letterSpacing: '0.3px',
+    },
+    h5: {
+      weight: '400',
+      size: '24px',
+      lineHeight: '120%',
+      letterSpacing: '0px',
+    },
+    h6: {
+      weight: '500',
+      size: '20px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    subtitle1: {
+      weight: '500',
+      size: '16px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    subtitle2: {
+      weight: '500',
+      size: '14px',
+      lineHeight: '150%',
+      letterSpacing: '0.1px',
+    },
+    body1: {
+      weight: '400',
+      size: '16px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    body2: {
+      weight: '400',
+      size: '14px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    caption: {
+      weight: '400',
+      size: '12px',
+      lineHeight: '150%',
+      letterSpacing: '0.5px',
+    },
+    alignments: {
+      left: 'left',
+      center: 'center',
+      right: 'right',
+      justify: 'justify',
+    },
+  },
+};

package/dist/components/loadingScreen.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 export default function LoadingScreen() {
     return (<div className="flex justify-center items-center h-full w-full min-h-[200px]">
-        <div className="w-12 h-12 border-4 border-t-transparent border-light-text-primary dark:border-dark-text-primary dark:border-t-transparent rounded-full animate-spin"></div>
+        <div className="w-12 h-12 border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
     </div>);
 }
 ;
@@ -14,6 +14,6 @@ export function LoadingSmall(_a) {
         small: 'w-5 h-5 border-2', // 20px, slightly thinner border
     };
     return (<div className="flex justify-center items-center">
-      <div className={"border-t-transparent border-light-text-primary dark:border-dark-text-primary dark:border-t-transparent rounded-full animate-spin ".concat(spinnerSizeClasses[size])}/>
+      <div className={"border-t-transparent border-light-accent-main rounded-full animate-spin ".concat(spinnerSizeClasses[size])}/>
     </div>);
 }

package/dist/components/menuItem.d.ts

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import { JSX } from 'react';
 interface MenuItemProps {
     href?: string;
     iconName?: string;
@@ -8,12 +8,6 @@ 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, size, tag, iconRight, }: MenuItemProps): JSX.Element;
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, className, }: MenuItemProps): JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -38,12 +38,10 @@ 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, _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 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 loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
         return __generator(this, function (_a) {
@@ -69,47 +67,29 @@ export default function MenuItem(_a) {
     }); }, []);
     useEffect(function () {
         var fetchIcon = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
                         if (!iconName) return [3 /*break*/, 2];
                         _a = setIconLeft;
                         return [4 /*yield*/, loadIcon(iconName)];
                     case 1:
-                        _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*/];
+                        _a.apply(void 0, [_b.sent()]);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
                 }
             });
         }); };
         fetchIcon();
-    }, [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
+    }, [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
             ? '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}>
-      {/* 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")}/>)}
+      {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>
     </div>);
     return href ? <NextLink href={href}>{content}</NextLink> : content;
 }

package/dist/components/tag.d.ts

@@ -7,6 +7,7 @@ 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, }: TagProps): JSX.Element;
+export default function Tag({ variant, size, state, label, iconName, onClick, color, }: 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;
-    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[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, _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];
     // 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 = isSelected && variant === 'contained'
-        ? 'bg-light-accent-main dark:bg-dark-accent-main'
-        : variant === 'contained'
-            ? 'bg-light-background-accent300 dark:bg-dark-background-accent300'
-            : '';
+    var bgClasses = variant === 'contained'
+        ? (color === 'info'
+            ? 'bg-light-info-main dark:bg-dark-info-main'
+            : 'bg-light-background-accent300 dark:bg-dark-background-accent300')
+        : '';
     // Font color
-    var fontClasses = isSelected
-        ? 'text-white'
+    var fontClasses = variant === 'textOnly'
+        ? (color === 'info'
+            ? 'text-light-info-main dark:text-dark-info-main'
+            : 'text-light-text-primary dark:text-dark-text-primary')
         : 'text-light-text-primary dark:text-dark-text-primary';
-    // 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
+    // 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
         ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
         : '';
-    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}>
+    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}>
       {Icon && <Icon className="w-4 h-4"/>}
       <span>{label}</span>
     </div>);

package/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
+
+body {
+  font-family: 'Inter', sans-serif;
+}

package/index.ts

@@ -0,0 +1,21 @@
+import './index.css';
+import './designTokens';
+
+export * from './components/alert';
+export * from './components/button';
+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';
+export * from './components/timeStamp'
+export * from './components/tooltip';
+export * from './components/userImage';

package/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/package.json

@@ -1,46 +1,25 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "default": "./dist/components/*.jsx"
-    },
-    "./designTokens": {
-      "types": "./dist/designTokens.d.ts",
-      "default": "./dist/designTokens.js"
-    },
-    "./styles": "./dist/output.css",
-    "./dist/*": "./dist/*"
-  },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "next dev",
     "build": "tsc && postcss index.css -o dist/output.css",
     "build:css": "postcss index.css -o dist/output.css",
-    "watch": "tsc --watch",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@popperjs/core": "^2.11.8",
+    "next": "14.2.13",
+    "react": "^18",
+    "react-dom": "^18",
     "react-popper": "^2.3.0"
   },
-  "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  },
   "devDependencies": {
     "@types/node": "20.16.10",
     "@types/react": "18.3.10",
@@ -48,11 +27,8 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
-    "next": "14.2.13",
     "postcss": "^8",
     "postcss-cli": "^11.0.0",
-    "react": "^18",
-    "react-dom": "^18",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "5.6.2"

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;