oneslash-design-system 1.0.3 → 1.0.6

package/components/{alert/alert.tsx → alert.tsx}

@@ -1,7 +1,20 @@
 'use client';
 import React, { useEffect } from 'react';
 
-export default function Alert({ open, type, message, onClose }: AlertProps) {
+interface AlertProps {
+  open?: boolean;
+  type: 'success' | 'warning' | 'error' | 'info';
+  message: string;
+  onClose: () => void;
+}
+
+export default function Alert({ 
+  open, 
+  type, 
+  message, 
+  onClose 
+}: AlertProps) {
+  
   useEffect(() => {
     if (open) {
       const timer = setTimeout(() => {

package/components/button.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback } 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;
+}
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Button({
+  size,
+  type,
+  state,
+  label,
+  decoIcon,
+  actionIcon,
+  onClickButton,
+  onClickActionIcon,
+}: ButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [IconLeft, setIconLeft] = useState<IconType | null>(null);
+  const [IconRight, setIconRight] = useState<IconType | null>(null);
+
+  // Import icon dynamically
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcons = async () => {
+      if (decoIcon) {
+        setIconLeft(await loadIcon(decoIcon));
+      }
+      if (actionIcon) {
+        setIconRight(await loadIcon(actionIcon));
+      }
+    };
+    fetchIcons();
+  }, [decoIcon, actionIcon, loadIcon]);
+
+  // Define classes for size
+  const sizeClasses = {
+    large: 'text-body1 p-2',
+    medium: 'text-body1 p-1',
+    small: 'text-body2 p-1',
+  }[size];
+
+  // Define icon size classes
+  const sizeIcon = {
+    large: 'w-6 h-6',
+    medium: 'w-5 h-5',
+    small: 'w-4 h-4',
+  }[size];
+
+  // Define classes for button types
+  const 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];
+
+  const 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
+  const 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
+  const buttonClasses = `
+    flex flex-row space-x-2 items-center rounded-[8px]
+    ${sizeClasses}
+    ${state === 'enabled' ? baseTypeClasses : ''}
+    ${state === 'focused' ? stateClasses.focused : ''}
+    ${state === 'disabled' ? stateClasses.disabled : baseTypeClasses}
+    ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''}
+    `;
+
+  return (
+    <button
+      className={buttonClasses}
+      onMouseEnter={() => { if (state !== 'disabled') setIsHovered(true); }}
+      onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
+      onClick={onClickButton} // Button click action
+    >
+      {IconLeft && (
+          <IconLeft className={sizeIcon} />
+      )}
+      <div className="whitespace-nowrap px-2">{label}</div>
+      {IconRight && (
+        <div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className={sizeIcon} />
+        </div>
+      )}
+    </button>
+  );
+}

package/components/{checkBox/checkBox.tsx → checkBox.tsx}

@@ -1,14 +1,18 @@
 'use client';
-import React, { useState } from 'react';
 
+import { useState } from 'react';
 
+interface CheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
 
 export default function Checkbox({
   label, 
   checked = false, 
   onChange
 }: CheckboxProps) {
-  
   const [isChecked, setIsChecked] = useState(checked);
 
   const handleToggle = () => {

package/components/{iconButton/iconButton.tsx → iconButton.tsx}

@@ -1,5 +1,14 @@
 'use client';
 import React, { useState, useEffect, useCallback } 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;
+}
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 

package/components/{menuItem/menuItem.tsx → menuItem.tsx}

@@ -2,6 +2,14 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import NextLink from 'next/link';
 
+interface MenuItemProps {
+  href?: string;
+  iconName?: string;
+  label: string;
+  isSelected?: boolean;
+  onClick: any;
+}
+
 export default function MenuItem({ 
 	href = '#', 
 	iconName, 

package/components/modal.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+
+interface ModalProps {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  actions: React.ReactNode;
+}
+
+export default function Modal({ 
+  isOpen, 
+  title, 
+  children, 
+  onClose, 
+  actions, 
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  return (
+    <div 
+      className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50"
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-labelledby="modal-title"
+      aria-modal="true"
+    >
+      <div 
+        className="bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 w-[600px]"
+        style={{
+          maxHeight: 'calc(100vh - 64px)',
+          overflowY: 'auto',
+        }}
+      >
+        <h2 id="modal-title" className="text-h6">
+          {title}
+        </h2>
+        <div className="text-body1 space-y-4">
+          {children}
+        </div>
+        <div className="flex justify-between">
+          {actions}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/popover.tsx

@@ -0,0 +1,98 @@
+'use client';
+import React, { useState, useRef, useLayoutEffect } from 'react';
+
+interface PopoverProps {
+  id?: string;
+  anchorEl?: HTMLElement | null;
+  open?: boolean;
+  onClose?: () => void;
+  children: any;
+}
+
+export default function Popover({ 
+  anchorEl, 
+  open = false, 
+  onClose, 
+  children 
+}: PopoverProps) {
+
+  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Close popover when clicking outside
+  useLayoutEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchorEl) {
+        onClose?.(); // Safe call for optional onClose
+      }
+    };
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [open, anchorEl, onClose]);
+
+  // Calculate position and handle scroll/resize
+  useLayoutEffect(() => {
+    if (anchorEl && open) {
+      const handlePositioning = () => {
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const popoverRect = popoverRef.current?.getBoundingClientRect();
+
+        if (popoverRect) {
+          const spaceBelow = window.innerHeight - anchorRect.bottom;
+          const spaceAbove = anchorRect.top;
+          
+          // Decide whether to place the popover above or below the anchor
+          const shouldPlaceAbove = spaceBelow < popoverRect.height + 8 && spaceAbove > popoverRect.height + 8;
+
+          // Calculate top and left positions
+          const topPosition = shouldPlaceAbove
+            ? anchorRect.top + window.scrollY - popoverRect.height - 8
+            : anchorRect.bottom + window.scrollY + 8;
+          
+          let leftPosition = anchorRect.left + window.scrollX + (anchorRect.width / 2) - (popoverRect.width / 2);
+
+          // Ensure the popover doesn't overflow off the left or right of the screen
+          if (leftPosition < 8) {
+            leftPosition = 8; // Prevent overflow on the left
+          } else if (leftPosition + popoverRect.width > window.innerWidth - 8) {
+            leftPosition = window.innerWidth - popoverRect.width - 8; // Prevent overflow on the right
+          }
+
+          setPopoverStyle({
+            position: 'absolute',
+            top: `${topPosition}px`,
+            left: `${leftPosition}px`,
+            zIndex: 10000,
+            visibility: 'visible',
+          });
+        }
+      };
+
+      handlePositioning(); // Initial positioning calculation
+      window.addEventListener('resize', handlePositioning);
+      window.addEventListener('scroll', handlePositioning, true);
+
+      return () => {
+        window.removeEventListener('resize', handlePositioning);
+        window.removeEventListener('scroll', handlePositioning, true);
+      };
+    }
+  }, [anchorEl, open]);
+
+  if (!open || !anchorEl) return null;
+
+  return (
+    <div
+      ref={popoverRef}
+      style={popoverStyle}
+      className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2"
+      role="dialog"
+    >
+      {children}
+    </div>
+  );
+}

package/components/tab.tsx

@@ -0,0 +1,85 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+
+type TabProps = {
+  label: string;
+  href?: string;
+  isSelected: boolean;
+  onClickTab: () => void;
+  onClickActionIcon?: any;
+  decoIcon?: string;
+  actionIcon?: string;
+};
+
+type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+export default function Tab({
+  label,
+  href,
+  isSelected,
+  onClickTab,
+  onClickActionIcon,
+  decoIcon,
+  actionIcon
+}: TabProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  
+  const [IconLeft, setIconLeft] = useState<IconType | null>(null);
+  const [IconRight, setIconRight] = useState<IconType | null>(null);
+
+  // Load icon dynamically
+  const loadIcon = useCallback(async (iconName?: string) => {
+    if (!iconName) return null;
+    try {
+      const module = await import('@heroicons/react/24/outline');
+      const Icon = module[iconName as keyof typeof module] as IconType;
+      return Icon || null;
+    } catch (error) {
+      console.error(`Failed to load icon ${iconName}:`, error);
+      return null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const fetchIcons = async () => {
+      if (decoIcon) {
+        setIconLeft(await loadIcon(decoIcon));
+      }
+      if (actionIcon) {
+        setIconRight(await loadIcon(actionIcon));
+      }
+    };
+    fetchIcons();
+  }, [decoIcon, actionIcon, loadIcon]);
+
+  const handleClick = () => {
+    onClickTab();
+    if (href) {
+      router.push(href);
+    }
+  };
+
+  return (
+    <div
+      className={`
+        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start
+        ${isSelected 
+          ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast' 
+          : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover'}
+      `}
+      onClick={handleClick}
+    >
+      {IconLeft && <IconLeft className="w-5 h-5" />}
+      <span className="whitespace-nowrap text-body1 px-2">
+        {label}
+      </span>
+      {IconRight && (
+        <div onClick={onClickActionIcon} className="cursor-pointer">
+          <IconRight className="w-5 h-5" />
+        </div>
+      )}
+    </div>
+  );
+}

package/components/{tag/tag.tsx → tag.tsx}

@@ -1,5 +1,18 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
+import * as HeroIcons from '@heroicons/react/24/outline';
+
+interface TagProps{
+  key?: any;
+  variant: "contained" | "textOnly";
+  size: "medium" | "small";
+  state?: "enabled" | "selected" ;
+  label: any;
+  iconName?: keyof typeof HeroIcons;
+  isDeletable?: keyof typeof HeroIcons;
+  onClick?: any;
+  color?: 'default' | 'info';
+}
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
 
@@ -89,6 +102,7 @@ export default function Tag({
         >
           {DeleteIcon && <DeleteIcon className="w-4 h-4" />}
         </button>
+        
       )}
     </div>
   );

package/components/textField.tsx

@@ -0,0 +1,128 @@
+'use client';
+import React, { useState } from 'react';
+
+interface TextFieldProps {
+  id: string;
+  label?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Specify the event type for both input and textarea
+  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Handle blur event for input/textarea
+  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;// Handle focus event for input/textarea
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void; // Add onKeyDown
+  autoFocus?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode | React.ComponentType<any>;
+  multiline?: boolean;
+  maxRows?: number;
+  disabled?: boolean;
+  error?: boolean;
+}
+
+export default function TextField({
+  id,
+  label,
+  value,
+  onChange,
+  onBlur,
+  onFocus,
+  onKeyDown,
+  autoFocus = false, // Accept the autoFocus prop with default value
+  iconLeft,
+  iconRight,
+  multiline = false,
+  maxRows = 6,
+  disabled = false,
+  error = false,
+}: TextFieldProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const baseClasses = 'w-full border rounded-[8px] p-2';
+  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
+  const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
+  const containerClasses = `
+    ${bgColor}
+    ${borderColor}
+    ${baseClasses}
+    ${disabled ? 'bg-gray-200 cursor-not-allowed' : ''}
+    ${error ? 'border-red-500 focus:ring-red-500' : ''}
+    ${isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : ''}
+    ${!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : ''}
+    border-gray-300
+  `;
+
+  const renderIconRight = () => {
+    if (React.isValidElement(iconRight)) {
+      return iconRight;
+    }
+    if (typeof iconRight === 'function') {
+      return React.createElement(iconRight); 
+    }
+    return null;
+  };
+
+  return (
+    <div className="flex flex-col w-full">
+      {label && (
+        <label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {iconLeft && (
+          <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
+            {iconLeft}
+          </span>
+        )}
+        {iconRight && (
+          <span className="absolute inset-y-0 right-0 pr-3 flex items-center">
+            {renderIconRight()}
+          </span>
+        )}
+        {multiline ? (
+          <textarea
+            id={id}
+            rows={maxRows}
+            className={containerClasses}
+            value={value}
+            onChange={onChange}
+            onFocus={(e) => {
+              setIsFocused(true);
+              if (onFocus) onFocus(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              if (onBlur) onBlur(e);
+            }}
+            onKeyDown={onKeyDown}
+            autoFocus={autoFocus} // Pass autoFocus to textarea
+            disabled={disabled}
+          />
+        ) : (
+          <input
+            id={id}
+            type="text"
+            className={containerClasses}
+            value={value}
+            onChange={onChange}
+            onFocus={(e) => {
+              setIsFocused(true);
+              if (onFocus) onFocus(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              if (onBlur) onBlur(e);
+            }}
+            onKeyDown={onKeyDown}
+            autoFocus={autoFocus} // Pass autoFocus to input
+            disabled={disabled}
+          />
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-light-error-main text-body2">
+          This field is required
+        </p>
+      )}
+    </div>
+  );
+}

package/components/timeStamp.tsx

@@ -0,0 +1,65 @@
+'use client';
+import React from 'react';
+
+interface TimeStampProps{
+    createdAt: string | number | Date;
+    dateFormat: 'absolute' | 'relative';
+  }
+  
+export default function TimeStamp({
+    createdAt,
+    dateFormat,
+}: TimeStampProps) {
+
+    // absolute timestamp
+    const absoluteTimeStamp = (createdAt: string | number | Date): string => {
+        const date = new Date(createdAt);
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        const year = date.getFullYear();
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        const formattedHours = hours.toString().padStart(2, '0');
+        const formattedMinutes = minutes.toString().padStart(2, '0');
+        const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+        const dayOfWeek = daysOfWeek[date.getDay()];
+        return `${month}/${day}/${year} ${dayOfWeek} ${formattedHours}:${formattedMinutes}`;
+    };
+
+    // relative timestamp
+    const relativeTimeStamp = (createdAt: string | number | Date): string => {
+        const date = new Date(createdAt);
+        const now = new Date();
+        const diff = now.getTime() - date.getTime();
+        const seconds = Math.floor(diff / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        const weeks = Math.floor(days / 7);
+        const months = Math.floor(days / 30);
+        const years = Math.floor(days / 365);
+        if (years > 0) {
+            return `${years} year${years > 1 ? 's' : ''} ago`;
+        } else if (months > 0) {
+            return `${months} month${months > 1 ? 's' : ''} ago`;
+        } else if (weeks > 0) {
+            return `${weeks} week${weeks > 1 ? 's' : ''} ago`;
+        } else if (days > 0) {
+            return `${days} day${days > 1 ? 's' : ''} ago`;
+        } else if (hours > 0) {
+            return `${hours} hour${hours > 1 ? 's' : ''} ago`;
+        } else if (minutes > 0) {
+            return `${minutes} minute${minutes > 1 ? 's' : ''} ago`;
+        } else {
+            return `${seconds} second${seconds > 1 ? 's' : ''} ago`;
+        }
+    };
+    
+    const timeStamp = dateFormat === 'absolute' ? absoluteTimeStamp(createdAt) : relativeTimeStamp(createdAt);
+
+    return (
+        <p className="text-caption text-light-text-secondary dark:text-dark-text-secondary">
+            {timeStamp}
+        </p>
+    );
+};

package/components/{tooltip/tooltip.tsx → tooltip.tsx}

@@ -1,6 +1,11 @@
 'use client';
 import React, { useState, useRef, useEffect } from 'react';
 
+interface TooltipProps {
+  title: string;
+  children: React.ReactElement;
+}
+
 export default function Tooltip({ title, children }: TooltipProps) {
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState<'top' | 'bottom'>('bottom');

package/components/{userImage/userImage.tsx → userImage.tsx}

@@ -1,5 +1,11 @@
+'use client';
 import React from 'react';
 
+interface UserImageProps {
+  userHandle: string;
+  userImgUrl?: string;
+}
+
 export default function UserImage({ 
 	userHandle, 
 	userImgUrl,

package/global.d.ts

@@ -122,7 +122,7 @@ declare global {
 
     interface AlertProps {
       open: boolean;
-      type: string;
+      type: 'success' | 'warning' | 'error' | 'info';
       message: string;
       onClose: () => void;
     }

package/index.css

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

package/index.ts

@@ -1,16 +1,15 @@
-import './index.css';  
-import  Button from './components/button/button'; 
-export { Button };
-
-export * from './components/alert/alert';
-export * from './components/button/button';
-export * from './components/checkBox/checkBox';
-export * from './components/iconButton/iconButton';
-export * from './components/menuItem/menuItem';
-export * from './components/modal/modal';
-export * from './components/popover/popover';
-export * from './components/tab/tab';
-export * from './components/tag/tag';
-export * from './components/textField/textField';
-export * from './components/tooltip/tooltip';
-export * from './components/userImage/userImage';
+import './index.css';
+import './designTokens';
+export * from './components/button';
+export * from './components/alert';
+export * from './components/button';
+export * from './components/checkBox';
+export * from './components/iconButton';
+export * from './components/menuItem';
+export * from './components/modal';
+export * from './components/popover';
+export * from './components/tab';
+export * from './components/tag';
+export * from './components/textField';
+export * from './components/tooltip';
+export * from './components/userImage';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "oneslash-design-system",
-  "version": "1.0.3",
+  "description": "A design system for the Oneslash projects",
+  "version": "1.0.6",
   "private": false,
   "scripts": {
     "dev": "next dev",

package/tsconfig.json

@@ -32,9 +32,10 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "types/**/*.d.ts"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}

package/components/button/button.tsx

@@ -1,107 +0,0 @@
-'use client';
-import React, { useState, useEffect, useCallback } from 'react';
-
-type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-export default function Button({
-  size,
-  type,
-  state,
-  label,
-  iconLeftName,
-  iconRightName,
-  onClick,
-}: ButtonProps) {
-
-  const [isHovered, setIsHovered] = useState(false);
-  const [IconLeft, setIconLeft] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
-  const [IconRight, setIconRight] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
-
-  // import icon
-  const loadIcon = useCallback(async (iconName?: string) => {
-    if (!iconName) return null;
-    try {
-      const module = await import('@heroicons/react/24/outline');
-      const Icon = module[iconName as keyof typeof module] as IconType;
-      return Icon || null;
-    } catch (error) {
-      console.error(`Failed to load icon ${iconName}:`, error);
-      return null;
-    }
-  }, []);
-
-  // Load icons on mount and when props change
-  useEffect(() => {
-    const fetchIcons = async () => {
-      if (typeof iconLeftName === 'string') {
-        setIconLeft(await loadIcon(iconLeftName));
-      }
-      if (typeof iconRightName === 'string') {
-        setIconRight(await loadIcon(iconRightName));
-      }
-    };
-    fetchIcons();
-  }, [iconLeftName, iconRightName, loadIcon]);
-
-  // size
-  const sizeClasses = 
-    size === 'large' ? 'text-body1 p-2'
-    : size === 'small' ? 'text-body2 p-1'
-    : 'text-body1 p-1'; // medium size
-
-  // icon size
-  const sizeIcon = 
-    size === 'large' ? 'w-6 h-6' 
-    : size === 'small' ? 'w-4 h-4' 
-    : 'w-5 h-5'; // medium size
-
-  // type
-  const typeClasses = {
-    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];
-
-  const 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
-  const stateClasses = {
-    enabled: 'cursor-pointer',
-    hovered: 'cursor-pointer',
-    selected: 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast',
-    focused: 'ring-2 ring-light-accent-main dark:ring-dark-accent-main',
-    disabled: 'text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
-  }[state];
-
-  
-
-  return (
-    <button
-      className={`flex flex-row space-x-2 items-center rounded-[8px] 
-        ${sizeClasses} 
-        ${typeClasses} 
-        ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''} 
-        ${stateClasses}`}
-      disabled={state === 'disabled'}
-      onMouseEnter={() => {
-        if (state !== 'disabled') setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        if (state !== 'disabled') setIsHovered(false);
-      }}
-      onClick={onClick}
-    >
-      {IconLeft && <IconLeft className={sizeIcon} />}
-      <div className="whitespace-nowrap px-2">
-        {label}
-      </div>
-      {IconRight && <IconRight className={sizeIcon} />}
-    </button>
-  );
-}

package/components/modal/modal.tsx

@@ -1,41 +0,0 @@
-'use client';
-import React from 'react';
-
-export default function Modal({ 
-	isOpen, 
-	title, 
-	children, 
-	onClose, 
-	actions, 
-}: ModalProps) {
-
-  if (!isOpen) return null;
-
-	const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  return (
-    <div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50 " 
-      onClick={handleOverlayClick}
-    >
-      <div className="bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 w-[600px]"
-      style={{
-        position: 'relative',
-        margin: '0 auto'
-      }}>
-        <h2 className="text-h6">
-					{title}
-				</h2>
-        <div className="text-body1 space-y-4">
-          {children}
-        </div>
-        <div className="flex justify-between">
-          {actions}
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/popover/popover.tsx

@@ -1,74 +0,0 @@
-'use client';
-import React, { useState, useRef, useEffect } from 'react';
-
-export default function Popover({ anchorEl, open, onClose, children }: PopoverProps) {
-  const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  // Close popover when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (popoverRef.current && !popoverRef.current.contains(event.target as Node) && anchorEl) {
-        onClose();
-      }
-    };
-    if (open) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [open, anchorEl, onClose]);
-
-  // Calculate position
-  useEffect(() => {
-    if (anchorEl && open) {
-      const anchorRect = anchorEl.getBoundingClientRect();
-      const popoverRect = popoverRef.current?.getBoundingClientRect();
-      if (popoverRect) {
-        const spaceBelow = window.innerHeight - anchorRect.bottom;
-        const spaceAbove = anchorRect.top;
-
-        // Determine if we should place the popover above
-        const shouldPlaceAbove = spaceBelow < popoverRect.height + 8 && spaceAbove > popoverRect.height + 8;
-
-        // Calculate top position, correcting for popover height when placing above
-        const topPosition = shouldPlaceAbove
-          ? anchorRect.top + window.scrollY - popoverRect.height - 8 // Adjust by 8px to maintain spacing
-          : anchorRect.bottom + window.scrollY + 8; // Add 8px for spacing below
-
-        // Calculate left position with viewport boundary checks
-        let leftPosition = anchorRect.left + (anchorRect.width / 2) - (popoverRect.width / 2);
-
-        if (leftPosition < 8) {
-          // Adjust to align with the left boundary of the viewport
-          leftPosition = 8;
-        } else if (leftPosition + popoverRect.width > window.innerWidth - 8) {
-          // Adjust to align with the right boundary of the viewport
-          leftPosition = window.innerWidth - popoverRect.width - 8;
-        }
-
-        setPopoverStyle({
-          position: 'absolute',
-          top: topPosition,
-          left: leftPosition,
-          zIndex: 10000,
-          pointerEvents: 'auto',
-        });
-      }
-    }
-  }, [anchorEl, open]);
-
-  if (!open || !anchorEl) return null;
-
-  return (
-    <div
-      ref={popoverRef}
-      style={popoverStyle}
-      className="bg-light-background-default dark:bg-dark-background-default border rounded-[8px] shadow-lg"
-      role="dialog"
-    >
-      {children}
-    </div>
-  );
-}

package/components/tab/tab.tsx

@@ -1,62 +0,0 @@
-'use client';
-import React, { useState, useEffect, useCallback } from 'react';
-import { useRouter, usePathname } from 'next/navigation';
-
-
-const TabIcon: React.FC<{ iconName?: string }> = ({ iconName }) => {
-  const [Icon, setIcon] = useState<React.ComponentType<React.SVGProps<SVGSVGElement>> | null>(null);
-
-  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 React.ComponentType<React.SVGProps<SVGSVGElement>>;
-      return IconComponent || null;
-    } catch (error) {
-      console.error(`Failed to load icon ${iconName}:`, error);
-      return null;
-    }
-  }, []);
-
-  useEffect(() => {
-    const fetchIcon = async () => {
-      if (iconName) {
-        setIcon(await loadIcon(iconName));
-      }
-    };
-    fetchIcon();
-  }, [iconName, loadIcon]);
-
-  return Icon ? <Icon className="w-5 h-5" /> : null;
-};
-
-const Tab: React.FC<TabProps> = ({ label, href, isSelected, onClick, iconName }) => {
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const handleClick = () => {
-    onClick();
-    if (href) {
-    router.push(href);
-    }
-  };
-
-  return (
-    <div
-      className={`
-        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start
-        ${isSelected 
-          ? 'bg-light-primary-main dark:bg-dark-primary-main text-light-text-contrast dark:text-dark-text-contrast' 
-          : 'bg-light-action-selected dark:bg-dark-action-selected hover:bg-light-background-default dark:hover:bg-dark-action-hover'}
-      `}
-      onClick={handleClick}
-    >
-      {iconName && <TabIcon iconName={iconName} />}
-      <span className="whitespace-nowrap text-body1">
-        {label}
-      </span>
-    </div>
-  );
-};
-
-export default Tab;

package/components/textField/textField.tsx

@@ -1,107 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-
-export default function TextField({
-  id,
-  label,
-  value,
-  onChange,
-  iconLeft,
-  iconRight,
-  multiline = false,
-  maxRows = 6,
-  disabled = false,
-  error = false,
-}: TextFieldProps) {
-	
-  const [isFocused, setIsFocused] = useState(false);
-
-  // Base styles
-  const baseClasses = 'w-full border rounded-[8px] p-2';
-
-  // Background color
-  const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-300 ease-in-out';
-
-  // Border color
-  const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
-
-  // State styles
-  const disabledClasses = 'bg-gray-200 cursor-not-allowed';
-  const errorClasses = 'border-red-500 focus:ring-red-500';
-  const focusClasses = 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none';
-  const hoverClasses = 'hover:border-light-outlinedBorder-hover';
-  const defaultClasses = 'border-gray-300';
-
-  // Container styles
-  const containerClasses = `
-    ${bgColor}
-    ${borderColor}
-    ${baseClasses}
-    ${disabled ? disabledClasses : ''}
-    ${error ? errorClasses : ''}
-    ${isFocused ? focusClasses : ''}
-    ${!disabled && !error ? hoverClasses : ''}
-    ${defaultClasses}
-  `;
-
-	// Render iconRight in TextField
-	const renderIconRight = () => {
-		if (React.isValidElement(iconRight)) {
-			return iconRight;
-		}
-		if (typeof iconRight === 'function') {
-			return React.createElement(iconRight); 
-		}
-		return null;
-	};
-
-  return (
-    <div className="flex flex-col w-full">
-      {label && (
-        <label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
-          {label}
-        </label>
-      )}
-      <div className="relative">
-        {iconLeft && (
-          <span className="absolute inset-y-0 left-0 pl-3 flex items-center">
-            {iconLeft}
-          </span>
-        )}
-        {iconRight && (
-          <span className="absolute inset-y-0 right-0 pr-3 flex items-center">
-            {renderIconRight()}
-          </span>
-        )}
-        {multiline ? (
-          <textarea
-            id={id}
-            rows={maxRows}
-            className={containerClasses}
-            value={value}
-            onChange={onChange}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            disabled={disabled}
-          />
-        ) : (
-          <input
-            id={id}
-            type="text"
-            className={containerClasses}
-            value={value}
-            onChange={onChange}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            disabled={disabled}
-          />
-        )}
-      </div>
-      {error && (
-        <p className="mt-1 text-light-error-main text-body2">
-          This field is required
-        </p>
-      )}
-    </div>
-  );
-}