oneslash-design-system 1.1.6 → 1.1.7

package/components/button.tsx

@@ -113,7 +113,8 @@ export default function Button({
       onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
       onClick={onClickButton} // Button click action
     >
-      {/* left icon or userImage */}
+      {/* conditionally render left section */}
+      {(IconLeft || userImgUrl || userHandle) && (
       <div className="flex items-center space-x-2">
         {/* Render dynamic icon if available */}
         {IconLeft && (
@@ -125,6 +126,7 @@ export default function Button({
           <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl} />
         )}
       </div>
+    )}
 
       {/* label */}
       <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2 text-left">

package/components/menuItem.tsx

@@ -1,12 +1,15 @@
 'use client';
 import React, { useState, useEffect, useCallback, SVGProps } from 'react';
 import NextLink from 'next/link';
+import UserImage from './userImage';
 
 type IconType = (props: SVGProps<SVGSVGElement>) => JSX.Element;
 
 interface MenuItemProps {
   href?: string;
   iconName?: string;
+  userHandle?: string;
+  userImgUrl?: string;
   label: string;
   isSelected?: boolean;
   onClick: any;
@@ -14,13 +17,15 @@ interface MenuItemProps {
 
 export default function MenuItem({ 
 	href = '#', 
-	iconName, 
+	iconName,
+  userHandle,
+  userImgUrl,
 	label, 
 	isSelected, 
 	onClick, }
 : MenuItemProps) {
 
-	const [Icon, setIcon] = useState<IconType | null>(null);
+	const [IconLeft, setIconLeft] = useState<IconType | null>(null);
 
   // Import icon dynamically
   const loadIcon = useCallback(async (iconName?: string) => {
@@ -38,7 +43,7 @@ export default function MenuItem({
   useEffect(() => {
     const fetchIcon = async () => {
       if (iconName) {
-        setIcon(await loadIcon(iconName));
+        setIconLeft(await loadIcon(iconName));
       }
     };
     fetchIcon();
@@ -57,10 +62,18 @@ export default function MenuItem({
         style={{ width: '100%' }}
         onClick={onClick}
       >
-        {Icon && <Icon className="w-6 h-6" />}
+        {/* render userImage. render dynamic icon if userImage is not available */}
+        {userImgUrl || userHandle ? (
+        <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''} />
+      ) : (
+        IconLeft && <IconLeft className="w-6 h-6" />
+      )}
+
+        {/* label */}
         <span className="whitespace-nowrap text-body1 px-2">
           {label}
         </span>
+
       </div>
     </NextLink>
   );

package/components/radioGroup.tsx

@@ -0,0 +1,66 @@
+'use client';
+import React from 'react';
+
+interface RadioOption {
+  label: string;
+  value: string;
+}
+
+interface RadioGroupProps {
+  options: RadioOption[];
+  selectedValue: string;
+  onChange: (value: string) => void;
+  name: string;
+  direction?: 'horizontal' | 'vertical';
+}
+
+export default function RadioGroup({
+  options,
+  selectedValue,
+  onChange,
+  name,
+  direction = 'vertical',
+}: RadioGroupProps) {
+  return (
+    <div
+      className={`flex ${
+        direction === 'horizontal' ? 'space-x-4' : 'flex-col space-y-2'
+      }`}
+    >
+      {options.map((option) => (
+        <label
+          key={option.value}
+          className="flex items-center cursor-pointer"
+        >
+          <div
+            onClick={() => onChange(option.value)}
+            className="relative flex items-center justify-center w-6 h-6 group"
+          >
+            {/* Hover background circle */}
+            <div
+              className={`absolute w-6 h-6 rounded-full transition-all 
+                hover:bg-light-action-hovered dark:group-hover:bg-dark-action-hovered 
+                bg-transparent group-hover:w-7 group-hover:h-7`}
+            ></div>
+
+            {/* Outer circle */}
+            <div
+              className={`relative z-10 w-4 h-4 border-2 rounded-full transition-colors 
+                ${selectedValue === option.value ? 'border-light-text-primary dark:border-dark-text-primary' : 'border-light-text-secondary dark:border-dark-text-secondary'}
+              `}
+            >
+
+              {/* Inner circle when selected */}
+              {selectedValue === option.value && (
+                <div
+                  className="w-2 h-2 bg-light-text-primary dark:bg-dark-text-primary rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                />
+              )}
+            </div>
+          </div>
+          <span className="ml-2 text-body1">{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}

package/package.json

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

package/{tailwind.config.ts → tailwind.config.js}

@@ -1,12 +1,11 @@
-import type { Config } from "tailwindcss";
-
 const designTokens = require('./designTokens');
 
-const config: Config = {
+module.exports = {
+  darkMode: 'class',
   content: [
-    "./app/**/*.{js,ts,jsx,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./dist/**/*.{html,js}",
     "./components/**/*.{js,ts,jsx,tsx}",
-    "./pages/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
@@ -156,12 +155,11 @@ const config: Config = {
         'dark-misc-scrollbar-bg': designTokens.colors.dark.background.default,
         'dark-misc-scrollbar-thumb': designTokens.colors.dark.background.accent200,
       },
-      spacing: ({ theme }) => ({
-        ...theme('spacing'), // Retain default spacing
+      spacing: {
         small: designTokens.spacing.small,
         medium: designTokens.spacing.medium,
         large: designTokens.spacing.large,
-      }),
+      },
       fontSize: {
         h1: designTokens.typography.h1.size,
         h2: designTokens.typography.h2.size,
@@ -229,7 +227,100 @@ const config: Config = {
     require('tailwindcss'),
     require('autoprefixer'),
     require('tailwind-scrollbar'),
-    
+    function({ addUtilities, theme }) {
+      const newUtilities = {
+        '.text-h1': {
+          fontSize: theme('fontSize.h1'),
+          fontWeight: theme('fontWeight.h1'),
+          letterSpacing: theme('letterSpacing.h1'),
+          lineHeight: theme('lineHeight.h1'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-h2': {
+          fontSize: theme('fontSize.h2'),
+          fontWeight: theme('fontWeight.h2'),
+          letterSpacing: theme('letterSpacing.h2'),
+          lineHeight: theme('lineHeight.h2'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-h3': {
+          fontSize: theme('fontSize.h3'),
+          fontWeight: theme('fontWeight.h3'),
+          letterSpacing: theme('letterSpacing.h3'),
+          lineHeight: theme('lineHeight.h3'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-h4': {
+          fontSize: theme('fontSize.h4'),
+          fontWeight: theme('fontWeight.h4'),
+          letterSpacing: theme('letterSpacing.h4'),
+          lineHeight: theme('lineHeight.h4'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-h5': {
+          fontSize: theme('fontSize.h5'),
+          fontWeight: theme('fontWeight.h5'),
+          letterSpacing: theme('letterSpacing.h5'),
+          lineHeight: theme('lineHeight.h5'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-h6': {
+          fontSize: theme('fontSize.h6'),
+          fontWeight: theme('fontWeight.h6'),
+          letterSpacing: theme('letterSpacing.h6'),
+          lineHeight: theme('lineHeight.h6'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-subtitle1': {
+          fontSize: theme('fontSize.subtitle1'),
+          fontWeight: theme('fontWeight.subtitle1'),
+          letterSpacing: theme('letterSpacing.subtitle1'),
+          lineHeight: theme('lineHeight.subtitle1'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-subtitle2': {
+          fontSize: theme('fontSize.subtitle2'),
+          fontWeight: theme('fontWeight.subtitle2'),
+          letterSpacing: theme('letterSpacing.subtitle2'),
+          lineHeight: theme('lineHeight.subtitle2'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-body1': {
+          fontSize: theme('fontSize.body1'),
+          fontWeight: theme('fontWeight.body1'),
+          letterSpacing: theme('letterSpacing.body1'),
+          lineHeight: theme('lineHeight.body1'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-body2': {
+          fontSize: theme('fontSize.body2'),
+          fontWeight: theme('fontWeight.body2'),
+          letterSpacing: theme('letterSpacing.body2'),
+          lineHeight: theme('lineHeight.body2'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-caption': {
+          fontSize: theme('fontSize.caption'),
+          fontWeight: theme('fontWeight.caption'),
+          letterSpacing: theme('letterSpacing.caption'),
+          lineHeight: theme('lineHeight.caption'),
+          fontFamily: theme('fontFamily.inter'),
+        },
+        '.text-left': {
+          textAlign: theme('textAlign.left'),
+        },
+        '.text-center': {
+          textAlign: theme('textAlign.center'),
+        },
+        '.text-right': {
+          textAlign: theme('textAlign.right'),
+        },
+        '.text-justify': {
+          textAlign: theme('textAlign.justify'),
+        },
+      };
+
+      addUtilities(newUtilities);
+    },
   ],
-};
-export default config;
+}

package/dist/components/alert.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface AlertProps {
-    open?: boolean;
-    type: 'success' | 'warning' | 'error' | 'info';
-    message: string;
-    onClose: () => void;
-}
-export default function Alert({ open, type, message, onClose }: AlertProps): React.JSX.Element | null;
-export {};

package/dist/components/alert.jsx

@@ -1,38 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-export default function Alert(_a) {
-    var open = _a.open, type = _a.type, message = _a.message, onClose = _a.onClose;
-    useEffect(function () {
-        if (open) {
-            var timer_1 = setTimeout(function () {
-                onClose();
-            }, 3000);
-            return function () { return clearTimeout(timer_1); };
-        }
-    }, [open, onClose]);
-    if (!open)
-        return null;
-    var bgColor;
-    switch (type) {
-        case 'error':
-            bgColor = 'bg-light-error-main dark:bg-dark-error-main';
-            break;
-        case 'warning':
-            bgColor = 'bg-light-warning-main dark:bg-dark-warning-main';
-            break;
-        case 'info':
-            bgColor = 'bg-light-info-main dark:bg-dark-info-main';
-            break;
-        case 'success':
-            bgColor = 'bg-light-success-main dark:bg-dark-success-main';
-            break;
-    }
-    return (<div className="fixed top-4 inset-x-0 z-50 flex justify-center">
-      <div className={"flex items-center justify-between w-full max-w-md p-4 rounded-[8px] shadow-lg text-light-text-contrast dark:text-dark-text-contrast ".concat(bgColor)}>
-        <span>{message}</span>
-        <button onClick={onClose} className="ml-4 text-xl font-bold">
-          &times;
-        </button>
-      </div>
-    </div>);
-}

package/dist/components/button.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-interface ButtonProps {
-    size: 'small' | 'medium' | 'large';
-    type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
-    state: 'enabled' | 'hovered' | 'focused' | 'disabled';
-    label: string;
-    decoIcon?: string;
-    actionIcon?: string;
-    onClickButton?: any;
-    onClickActionIcon?: () => void;
-}
-export default function Button({ size, type, state, label, decoIcon, actionIcon, onClickButton, onClickActionIcon, }: ButtonProps): React.JSX.Element;
-export {};

package/dist/components/button.jsx

@@ -1,141 +0,0 @@
-'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 };
-    }
-};
-import React, { useState, useEffect, useCallback } from 'react';
-export default function Button(_a) {
-    var _this = this;
-    var size = _a.size, type = _a.type, state = _a.state, label = _a.label, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon;
-    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
-    var _d = useState(null), IconRight = _d[0], setIconRight = _d[1];
-    // Import icon dynamically
-    var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
-        var module_1, Icon, 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();
-                    Icon = module_1[iconName];
-                    return [2 /*return*/, Icon || 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 fetchIcons = function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        if (!decoIcon) return [3 /*break*/, 2];
-                        _a = setIconLeft;
-                        return [4 /*yield*/, loadIcon(decoIcon)];
-                    case 1:
-                        _a.apply(void 0, [_c.sent()]);
-                        _c.label = 2;
-                    case 2:
-                        if (!actionIcon) return [3 /*break*/, 4];
-                        _b = setIconRight;
-                        return [4 /*yield*/, loadIcon(actionIcon)];
-                    case 3:
-                        _b.apply(void 0, [_c.sent()]);
-                        _c.label = 4;
-                    case 4: return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchIcons();
-    }, [decoIcon, actionIcon, loadIcon]);
-    // Define classes for size
-    var sizeClasses = {
-        large: 'text-body1 p-2',
-        medium: 'text-body1 p-1',
-        small: 'text-body2 p-1',
-    }[size];
-    // Define icon size classes
-    var sizeIcon = {
-        large: 'w-6 h-6',
-        medium: 'w-5 h-5',
-        small: 'w-4 h-4',
-    }[size];
-    // Define classes for button types
-    var baseTypeClasses = {
-        primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
-        secondary: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
-        tertiary: 'bg-light-background-accent200 dark:bg-dark-background-accent200 text-light-text-primary dark:text-dark-text-primary',
-        textOnly: 'text-light-text-primary dark:text-dark-text-primary',
-    }[type];
-    var hoverTypeClasses = {
-        primary: 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark',
-        secondary: 'hover:bg-light-primary-dark dark:hover:bg-dark-primary-dark',
-        tertiary: 'hover:bg-light-background-accent300 hover:dark:bg-dark-background-accent300',
-        textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
-    }[type];
-    // State classes
-    var stateClasses = {
-        enabled: 'cursor-pointer',
-        focused: 'ring-2 ring-offset-4 ring-offset-light-background-default dark:ring-offset-dark-background-default ring-light-accent-main dark:ring-dark-accent-main',
-        disabled: type === 'textOnly'
-            ? 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-transparent'
-            : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
-    };
-    // Build the button classes dynamically
-    var buttonClasses = "\n    flex flex-row space-x-2 items-center rounded-[8px]\n    ".concat(sizeClasses, "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? stateClasses.focused : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : baseTypeClasses, "\n    ").concat(state !== 'disabled' && isHovered ? hoverTypeClasses : '', "\n    ");
-    return (<button className={buttonClasses} onMouseEnter={function () { if (state !== 'disabled')
-        setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
-        setIsHovered(false); }} onClick={onClickButton} // Button click action
-    >
-      {IconLeft && (<IconLeft className={sizeIcon}/>)}
-      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
-        {label}
-      </div>
-      {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className={sizeIcon}/>
-        </div>)}
-    </button>);
-}

package/dist/components/checkBox.d.ts

@@ -1,7 +0,0 @@
-interface CheckboxProps {
-    label?: string;
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-}
-export default function Checkbox({ label, checked, onChange }: CheckboxProps): import("react").JSX.Element;
-export {};

package/dist/components/checkBox.jsx

@@ -1,29 +0,0 @@
-'use client';
-import { useState } from 'react';
-export default function Checkbox(_a) {
-    var label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange;
-    var _c = useState(checked), isChecked = _c[0], setIsChecked = _c[1];
-    var handleToggle = function () {
-        var newChecked = !isChecked;
-        setIsChecked(newChecked);
-        if (onChange) {
-            onChange(newChecked);
-        }
-    };
-    return (<label className="flex items-center cursor-pointer">
-      <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group">
-        {/* Circle behind the checkbox */}
-        <div className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected transition-all"></div>
-        
-        {/* Checkbox */}
-        <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(isChecked
-            ? 'bg-light-accent-main dark:bg-dark-accent-main border-none'
-            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center transition-colors")}>
-          {isChecked && (<svg className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast" fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-              <path strokeWidth="2" d="M1 6l4 3 6-7"/>
-            </svg>)}
-        </div>
-      </div>
-      {label && <span className="ml-2">{label}</span>}
-    </label>);
-}

package/dist/components/emptyBox.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface EmptyBoxProps {
-    text: string;
-    size: "small" | "large";
-}
-export default function EmptyBox({ text, size, }: EmptyBoxProps): React.JSX.Element;
-export {};

package/dist/components/emptyBox.jsx

@@ -1,17 +0,0 @@
-'use client';
-import React from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
-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)}/>
-            <p className={"text-body1 ".concat(color)} text-center>
-                {text}
-            </p>
-        </div>);
-}

package/dist/components/iconButton.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import * as HeroIcons from '@heroicons/react/24/outline';
-interface IconButtonProps {
-    variant: "contained" | "iconOnly";
-    color: "primary" | "secondary";
-    state: "enabled" | "selected" | "disabled";
-    iconName: keyof typeof HeroIcons;
-    onClick?: any;
-}
-export default function IconButton({ variant, color, state, iconName, onClick, }: IconButtonProps): React.JSX.Element;
-export {};