oneslash-design-system 1.2.2 → 1.2.4

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "next dev",
     "build": "tsc && postcss index.css -o dist/output.css",

package/.claude/settings.local.json

@@ -1,9 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm install)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

package/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": ["next/core-web-vitals", "next/typescript"]
-}

package/components/alert.tsx

@@ -1,55 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-
-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(() => {
-        onClose();
-      }, 3000);
-      return () => clearTimeout(timer);
-    }
-  }, [open, onClose]);
-
-  if (!open) return null;
-
-  let 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 ${bgColor}`}>
-        <span>{message}</span>
-        <button onClick={onClose} className="ml-4 text-xl font-bold">
-          &times;
-        </button>
-      </div>
-    </div>
-  );
-}

package/components/button.tsx

@@ -1,120 +0,0 @@
-'use client';
-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;
-  className?: string;
-}
-
-type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-export default function Button({
-  size,
-  type,
-  state,
-  label,
-  decoIcon,
-  actionIcon,
-  onClickButton,
-  onClickActionIcon,
-  className = '',
-}: ButtonProps) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [IconLeft, setIconLeft] = useState<IconType | null>(null);
-  const [IconRight, setIconRight] = useState<IconType | null>(null);
-
-  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 sizeClasses = {
-    large: 'text-body1 p-2',
-    medium: 'text-body1 p-1',
-    small: 'text-body2 p-1',
-  }[size];
-
-  const sizeIcon = {
-    large: 'w-6 h-6',
-    medium: 'w-5 h-5',
-    small: 'w-4 h-4',
-  }[size];
-
-  const baseTypeClasses = {
-    primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
-    secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
-    tertiary: 'bg-light-background-accent100 dark:bg-dark-background-accent100 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-secondary-dark dark:hover:bg-dark-secondary-dark',
-    tertiary: 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200',
-    textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
-  }[type];
-
-  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',
-  };
-
-  const buttonClasses = `
-    flex flex-row items-center rounded-[8px] transition-colors duration-200 ease-in-out justify-between
-    ${sizeClasses}
-    ${state === 'enabled' ? baseTypeClasses : ''}
-    ${state === 'focused' ? stateClasses.focused : ''}
-    ${state === 'disabled' ? stateClasses.disabled : baseTypeClasses}
-    ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''}
-    ${className}
-  `;
-
-  return (
-    <button
-      className={buttonClasses}
-      onMouseEnter={() => { if (state !== 'disabled') setIsHovered(true); }}
-      onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
-      onClick={onClickButton}
-    >
-      {/* Group IconLeft and label in a flex container for left alignment */}
-      <div className="flex items-center">
-        {IconLeft && <IconLeft className={sizeIcon} />}
-        <div className="whitespace-nowrap overflow-hidden truncate px-2">{label}</div>
-      </div>
-      {IconRight && (
-        <div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className={sizeIcon} />
-        </div>
-      )}
-    </button>
-  );
-}

package/components/checkBox.tsx

@@ -1,60 +0,0 @@
-'use client';
-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 = () => {
-    const 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 transition-colors duration-200 ease-in-out"
-      >
-        {/* 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"
-        ></div>
-        
-        {/* Checkbox */}
-        <div
-          className={`relative z-10 w-4 h-4 border-2 rounded ${
-            isChecked
-              ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
-              : 'border-light-text-secondary dark:border-dark-text-secondary'
-          } flex items-center justify-center`}
-        >
-          {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 text-body1 text-light-text-primary dark:text-dark-text-primary">{label}</span>}
-    </label>
-  );
-}

package/components/emptyBox.tsx

@@ -1,33 +0,0 @@
-'use client'
-import React from 'react';
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
-
-interface EmptyBoxProps{
-    text: string;
-    size: "small" | "large";
-  }
-  
-export default function EmptyBox ({ 
-    text,
-    size,
-}: EmptyBoxProps) {
-
-    const color = 'text-light-text-disabled dark:text-dark-text-disabled';
-
-    const height = size === 'small' 
-    ? 'py-6' 
-    : 'h-full';
-
-    const iconSize = 'size-6' ;
-
-    return (
-        <div className={`flex flex-col space-y-2 justify-center items-center w-full ${height}`}>
-            <ExclamationCircleIcon 
-                className={`${iconSize} ${color}`}
-            />
-            <p className={`text-body1 ${color}`} text-center>
-                {text}
-            </p>
-        </div>
-    );
-}

package/components/iconButton.tsx

@@ -1,103 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import * as HeroIcons24 from '@heroicons/react/24/outline';
-import * as HeroIcons20 from '@heroicons/react/20/solid';
-import { LoadingSmall } from './loadingScreen';
-
-interface IconButtonProps {
-  color: "primary" | "secondary" | "tertiary" | "iconOnly";
-  state: "enabled" | "selected" | "disabled";
-  size: "large" | "medium" | "small";
-  iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
-  onClick?: any;
-  loading?: boolean;
-}
-
-type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-export default function IconButton({
-  color,
-  state,
-  size,
-  iconName,
-  onClick,
-  loading = false, // Default to false
-}: IconButtonProps) {
-  const [isHovered, setIsHovered] = useState(false);
-
-  // Select icon based on size
-  const Icon: IconType = size === 'small' 
-    ? HeroIcons20[iconName] 
-    : HeroIcons24[iconName];
-
-  // Size-based classes
-  const sizeClasses = {
-    large: 'p-2',  // 8px padding
-    medium: 'p-1', // 4px padding
-    small: 'p-1',  // 4px padding
-  };
-
-  const iconSizeClasses = {
-    large: 'size-6',   // 24px
-    medium: 'size-6',  // 24px
-    small: 'size-5',   // 20px
-  };
-
-  // Base classes (padding and corner radius)
-  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none relative`;
-
-  // Background color
-  const bgColor = color === 'primary'
-    ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
-    : color === 'secondary'
-    ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
-    : color === 'tertiary'
-    ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
-    : ' '; // iconOnly: none
-
-  // Background hover color
-  const bgColorHover = color === 'primary'
-    ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
-    : color === 'secondary'
-    ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
-    : color === 'tertiary'
-    ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
-    : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'; // iconOnly
-
-  // Icon color
-  const iconColor = color === 'primary'
-    ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
-    : color === 'secondary'
-    ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
-    : color === 'tertiary'
-    ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
-    : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
-
-  // State classes, including loading
-  const stateClasses = loading
-    ? 'cursor-wait' // Show a waiting cursor during loading
-    : state === 'disabled'
-    ? 'cursor-not-allowed opacity-50'
-    : state === 'selected'
-    ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
-    : isHovered
-    ? 'cursor-pointer hover:bg-opacity-75'
-    : 'cursor-pointer';
-
-  return (
-    <button
-      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out flex items-center justify-center`}
-      disabled={state === 'disabled' || loading} // Disable button during loading
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-      onClick={onClick}
-      aria-label={loading ? 'Loading' : 'Reload'}
-    >
-      {loading ? (
-        <LoadingSmall size={size} /> // Pass the size prop to match the icon
-      ) : (
-        Icon && <Icon className={iconSizeClasses[size]} /> // Show icon when not loading
-      )}
-    </button>
-  );
-}

package/components/loadingScreen.tsx

@@ -1,30 +0,0 @@
-'use client';
-import React from 'react';
-
-interface LoadingSmallProps {
-  size?: 'large' | 'medium' | 'small'; // Match IconButton sizes
-}
-
-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-accent-main rounded-full animate-spin"></div>
-    </div>
-  );
-};
-
-export function LoadingSmall({ size = 'medium' }: LoadingSmallProps) {
-  const spinnerSizeClasses = {
-    large: 'w-6 h-6 border-2',  // 24px, border-2 for proportional thickness
-    medium: 'w-6 h-6 border-2', // 24px, border-2
-    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-accent-main rounded-full animate-spin ${spinnerSizeClasses[size]}`}
-      />
-    </div>
-  );
-}

package/components/menu.tsx

@@ -1,35 +0,0 @@
-'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/menuItem.tsx

@@ -1,80 +0,0 @@
-'use client';
-import React, { useState, useEffect, useCallback, SVGProps, JSX } 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;
-  className?: string;
-}
-
-export default function MenuItem({
-  href,
-  iconName,
-  userHandle,
-  userImgUrl,
-  label,
-  isSelected,
-  onClick,
-  className = '',
-}: MenuItemProps) {
-  const [IconLeft, setIconLeft] = useState<IconType | 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 IconType;
-      return IconComponent || null;
-    } catch (error) {
-      console.error(`Failed to load icon ${iconName}:`, error);
-      return null;
-    }
-  }, []);
-
-  useEffect(() => {
-    const fetchIcon = async () => {
-      if (iconName) {
-        setIconLeft(await loadIcon(iconName));
-      }
-    };
-    fetchIcon();
-  }, [iconName, loadIcon]);
-
-  const content = (
-    <div
-      className={`
-        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out
-        ${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'}
-        ${className}
-      `}
-      style={{ width: '100%' }}
-      onClick={onClick}
-    >
-      {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/components/modal.tsx

@@ -1,85 +0,0 @@
-'use client';
-import React, { useEffect, useRef } from 'react';
-
-interface ModalProps {
-  isOpen: boolean;
-  title?: string;
-  children: React.ReactNode;
-  onClose: () => void;
-  actions?: React.ReactNode;
-  size?: 'medium' | 'large'; 
-}
-
-export default function Modal({ 
-  isOpen, 
-  title, 
-  children, 
-  onClose, 
-  actions, 
-  size = 'medium', // Default size is medium
-}: ModalProps) {
-  
-  if (!isOpen) return null;
-
-  // close modal by clicking elsewhere
-  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  // close modal by esc keypress
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [onClose]);
-
-  // Determine width based on size prop
-  const modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
-  const maxWidth = size === 'large' ? '1200px' : '600px';
-
-  
-
-  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"
-      tabIndex={-1}
-    >
-      <div 
-        className={`bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ${modalWidth}`}
-        style={{
-          maxWidth,
-          width: 'calc(100vw - 64px)',
-          maxHeight: '800px',
-          height: 'auto',
-          overflowY: 'auto',
-        }}
-      >
-        {title && (
-          <h2 id="modal-title" className="text-h6">
-            {title}
-          </h2>
-        )}
-        <div className="text-body1 space-y-4">
-          {children}
-        </div>
-        {actions && (
-          <div className="flex justify-between">
-            {actions}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/components/navigation.tsx

@@ -1,27 +0,0 @@
-'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-misc-divider dark:border-dark-misc-divider
-        p-[10px]
-        ${className}
-      `}
-    >
-      {children}
-    </nav>
-  );
-}
-
-export { Navigation };