@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/dist/cjs/components/LoadingFeedbackComponents.js

@@ -0,0 +1,230 @@
+import React from 'react';
+
+export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg';
+  color?: string;
+  children?: React.ReactNode;
+}
+
+export const SpinnerDots: React.FC<LoadingProps> = ({ size = 'md', color = 'blue', className = '', ...props }) => {
+  const sizeClass = { sm: 'w-6 h-6', md: 'w-8 h-8', lg: 'w-12 h-12' }[size];
+
+  return (
+    <div className={`flex gap-1 items-center justify-center ${className}`} {...props}>
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className={`${sizeClass} bg-${color}-600 rounded-full animate-bounce`}
+          style={{ animationDelay: `${i * 0.1}s` }}
+        ></div>
+      ))}
+    </div>
+  );
+};
+
+export const SpinnerRing: React.FC<LoadingProps> = ({ size = 'md', color = 'blue', className = '', ...props }) => {
+  const sizeClass = { sm: 'w-6 h-6', md: 'w-8 h-8', lg: 'w-12 h-12' }[size];
+
+  return (
+    <div className={`${sizeClass} border-4 border-gray-200 border-t-${color}-600 rounded-full animate-spin ${className}`} {...props}></div>
+  );
+};
+
+export const SpinnerBar: React.FC<LoadingProps> = ({ size = 'md', color = 'blue', className = '', ...props }) => {
+  const heightClass = { sm: 'h-1', md: 'h-2', lg: 'h-3' }[size];
+
+  return (
+    <div className={`w-full ${heightClass} bg-gray-200 rounded-full overflow-hidden ${className}`} {...props}>
+      <div
+        className={`h-full w-1/3 bg-${color}-600 animate-pulse`}
+        style={{
+          animation: 'slide 1.5s ease-in-out infinite',
+        }}
+      ></div>
+    </div>
+  );
+};
+
+export const SpinnerBounce: React.FC<LoadingProps> = ({ size = 'md', color = 'blue', className = '', ...props }) => {
+  const sizeClass = { sm: 'w-6 h-6', md: 'w-8 h-8', lg: 'w-12 h-12' }[size];
+
+  return (
+    <div className={`flex gap-2 items-end justify-center ${className}`} {...props}>
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          className={`${sizeClass} bg-${color}-600 rounded-full`}
+          style={{
+            animation: 'bounce 1.4s ease-in-out infinite',
+            animationDelay: `${i * 0.16}s`,
+          }}
+        ></div>
+      ))}
+    </div>
+  );
+};
+
+export const SpinnerPulse: React.FC<LoadingProps> = ({ size = 'md', color = 'blue', className = '', ...props }) => {
+  const sizeClass = { sm: 'w-6 h-6', md: 'w-8 h-8', lg: 'w-12 h-12' }[size];
+
+  return (
+    <div
+      className={`${sizeClass} bg-${color}-600 rounded-full animate-pulse ${className}`}
+      {...props}
+    ></div>
+  );
+};
+
+export const SkeletonText: React.FC<LoadingProps & { lines?: number }> = ({
+  lines = 3,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`space-y-2 ${className}`} {...props}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div key={i} className="h-4 bg-gray-200 rounded animate-pulse"></div>
+      ))}
+    </div>
+  );
+};
+
+export const SkeletonCard: React.FC<LoadingProps> = ({ className = '', ...props }) => {
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-6 space-y-4 ${className}`} {...props}>
+      <div className="h-8 bg-gray-200 rounded animate-pulse w-1/3"></div>
+      <div className="h-4 bg-gray-200 rounded animate-pulse"></div>
+      <div className="h-4 bg-gray-200 rounded animate-pulse w-5/6"></div>
+      <div className="h-32 bg-gray-200 rounded animate-pulse"></div>
+    </div>
+  );
+};
+
+export const SkeletonImage: React.FC<LoadingProps> = ({
+  size = 'md',
+  className = '',
+  ...props
+}) => {
+  const sizeClass = {
+    sm: 'w-24 h-24',
+    md: 'w-48 h-48',
+    lg: 'w-96 h-96',
+  }[size];
+
+  return <div className={`${sizeClass} bg-gray-200 rounded animate-pulse ${className}`} {...props}></div>;
+};
+
+export const SkeletonTable: React.FC<LoadingProps & { rows?: number; cols?: number }> = ({
+  rows = 5,
+  cols = 4,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`space-y-2 ${className}`} {...props}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-2">
+          {Array.from({ length: cols }).map((_, j) => (
+            <div key={j} className="flex-1 h-6 bg-gray-200 rounded animate-pulse"></div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const ProgressLinear: React.FC<
+  LoadingProps & {
+    value: number;
+    max?: number;
+    showLabel?: boolean;
+    color?: 'blue' | 'green' | 'red' | 'yellow';
+  }
+> = ({ value, max = 100, showLabel = false, color = 'blue', className = '', ...props }) => {
+  const percentage = (value / max) * 100;
+
+  return (
+    <div className={`w-full ${className}`} {...props}>
+      <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+        <div
+          className={`h-full bg-${color}-600 transition-all duration-300`}
+          style={{ width: `${Math.min(percentage, 100)}%` }}
+        ></div>
+      </div>
+      {showLabel && <p className="text-sm text-gray-600 mt-1">{Math.round(percentage)}%</p>}
+    </div>
+  );
+};
+
+export const ProgressCircular: React.FC<
+  LoadingProps & {
+    value: number;
+    max?: number;
+    showLabel?: boolean;
+    color?: 'blue' | 'green' | 'red' | 'yellow';
+  }
+> = ({ value, max = 100, showLabel = false, size = 'md', color = 'blue', className = '', ...props }) => {
+  const percentage = (value / max) * 100;
+  const sizeClass = { sm: 'w-16 h-16', md: 'w-24 h-24', lg: 'w-32 h-32' }[size];
+  const circumference = 2 * Math.PI * 45;
+
+  return (
+    <div className={`flex flex-col items-center ${className}`} {...props}>
+      <div className={`${sizeClass} relative`}>
+        <svg className="transform -rotate-90 w-full h-full">
+          <circle cx="50%" cy="50%" r="45" fill="none" stroke="#e5e7eb" strokeWidth="4"></circle>
+          <circle
+            cx="50%"
+            cy="50%"
+            r="45"
+            fill="none"
+            stroke={`currentColor`}
+            strokeWidth="4"
+            strokeDasharray={circumference}
+            strokeDashoffset={circumference - (percentage / 100) * circumference}
+            className={`text-${color}-600 transition-all duration-300`}
+          ></circle>
+        </svg>
+        {showLabel && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-sm font-semibold">{Math.round(percentage)}%</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ProgressStepped: React.FC<
+  LoadingProps & {
+    current: number;
+    total: number;
+    color?: 'blue' | 'green' | 'red' | 'yellow';
+  }
+> = ({ current, total, color = 'blue', className = '', ...props }) => {
+  return (
+    <div className={`flex gap-2 ${className}`} {...props}>
+      {Array.from({ length: total }).map((_, i) => (
+        <div
+          key={i}
+          className={`flex-1 h-2 rounded-full ${i < current ? `bg-${color}-600` : 'bg-gray-200'} transition-colors`}
+        ></div>
+      ))}
+    </div>
+  );
+};
+
+export const Overlay: React.FC<LoadingProps & { isVisible?: boolean }> = ({
+  isVisible = true,
+  className = '',
+  children,
+  ...props
+}) => {
+  if (!isVisible) return null;
+
+  return (
+    <div className={`absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};

package/dist/cjs/components/Menu.d.ts

@@ -0,0 +1,167 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface MenuItemProps {
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  divider?: boolean;
+  submenu?: MenuItemProps[];
+  className?: string;
+}
+
+export interface MenuProps {
+  items: MenuItemProps[];
+  trigger: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+  menuClassName?: string;
+}
+
+const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps & { onClose?: () => void }>(
+  (
+    {
+      label,
+      icon,
+      onClick,
+      disabled = false,
+      divider = false,
+      submenu,
+      className,
+      onClose,
+    },
+    ref
+  ) => {
+    const [submenuOpen, setSubmenuOpen] = useState(false);
+    const submenuRef = useRef<HTMLDivElement>(null);
+
+    if (divider) {
+      return <div ref={ref} className="my-1 border-t border-gray-200" />;
+    }
+
+    return (
+      <div ref={ref} className="relative">
+        <button
+          onClick={() => {
+            if (submenu) {
+              setSubmenuOpen(!submenuOpen);
+            } else {
+              onClick?.();
+              onClose?.();
+            }
+          }}
+          disabled={disabled}
+          className={cn(
+            'w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors',
+            {
+              'text-gray-700 hover:bg-gray-100': !disabled,
+              'text-gray-400 cursor-not-allowed': disabled,
+            },
+            className
+          )}
+        >
+          {icon && <span className="w-4 h-4 flex-shrink-0">{icon}</span>}
+          <span className="flex-1">{label}</span>
+          {submenu && (
+            <span className={cn('transition-transform', { 'rotate-180': submenuOpen })}>
+              ▼
+            </span>
+          )}
+        </button>
+
+        {submenu && submenuOpen && (
+          <div
+            ref={submenuRef}
+            className="absolute left-full top-0 ml-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-max"
+          >
+            {submenu.map((item, index) => (
+              <MenuItem key={index} {...item} onClose={onClose} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+MenuItem.displayName = 'MenuItem';
+
+export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
+  (
+    {
+      items,
+      trigger,
+      position = 'bottom',
+      className,
+      menuClassName,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const handleClickOutside = (e: MouseEvent) => {
+        if (
+          menuRef.current &&
+          triggerRef.current &&
+          !menuRef.current.contains(e.target as Node) &&
+          !triggerRef.current.contains(e.target as Node)
+        ) {
+          setIsOpen(false);
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+          document.removeEventListener('mousedown', handleClickOutside);
+        };
+      }
+    }, [isOpen]);
+
+    const positionClasses = {
+      top: 'bottom-full mb-2',
+      bottom: 'top-full mt-2',
+      left: 'right-full mr-2',
+      right: 'left-full ml-2',
+    };
+
+    return (
+      <div ref={ref} className={cn('relative inline-block', className)}>
+        <div
+          ref={triggerRef}
+          onClick={() => setIsOpen(!isOpen)}
+          className="cursor-pointer"
+        >
+          {trigger}
+        </div>
+
+        {isOpen && (
+          <div
+            ref={menuRef}
+            className={cn(
+              'absolute z-50 bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-max',
+              positionClasses[position],
+              menuClassName
+            )}
+          >
+            {items.map((item, index) => (
+              <MenuItem
+                key={index}
+                {...item}
+                onClose={() => setIsOpen(false)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+export { MenuItem };

package/dist/cjs/components/Menu.js

@@ -0,0 +1,167 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface MenuItemProps {
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  divider?: boolean;
+  submenu?: MenuItemProps[];
+  className?: string;
+}
+
+export interface MenuProps {
+  items: MenuItemProps[];
+  trigger: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+  menuClassName?: string;
+}
+
+const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps & { onClose?: () => void }>(
+  (
+    {
+      label,
+      icon,
+      onClick,
+      disabled = false,
+      divider = false,
+      submenu,
+      className,
+      onClose,
+    },
+    ref
+  ) => {
+    const [submenuOpen, setSubmenuOpen] = useState(false);
+    const submenuRef = useRef<HTMLDivElement>(null);
+
+    if (divider) {
+      return <div ref={ref} className="my-1 border-t border-gray-200" />;
+    }
+
+    return (
+      <div ref={ref} className="relative">
+        <button
+          onClick={() => {
+            if (submenu) {
+              setSubmenuOpen(!submenuOpen);
+            } else {
+              onClick?.();
+              onClose?.();
+            }
+          }}
+          disabled={disabled}
+          className={cn(
+            'w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors',
+            {
+              'text-gray-700 hover:bg-gray-100': !disabled,
+              'text-gray-400 cursor-not-allowed': disabled,
+            },
+            className
+          )}
+        >
+          {icon && <span className="w-4 h-4 flex-shrink-0">{icon}</span>}
+          <span className="flex-1">{label}</span>
+          {submenu && (
+            <span className={cn('transition-transform', { 'rotate-180': submenuOpen })}>
+              ▼
+            </span>
+          )}
+        </button>
+
+        {submenu && submenuOpen && (
+          <div
+            ref={submenuRef}
+            className="absolute left-full top-0 ml-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-max"
+          >
+            {submenu.map((item, index) => (
+              <MenuItem key={index} {...item} onClose={onClose} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+MenuItem.displayName = 'MenuItem';
+
+export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
+  (
+    {
+      items,
+      trigger,
+      position = 'bottom',
+      className,
+      menuClassName,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const handleClickOutside = (e: MouseEvent) => {
+        if (
+          menuRef.current &&
+          triggerRef.current &&
+          !menuRef.current.contains(e.target as Node) &&
+          !triggerRef.current.contains(e.target as Node)
+        ) {
+          setIsOpen(false);
+        }
+      };
+
+      if (isOpen) {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+          document.removeEventListener('mousedown', handleClickOutside);
+        };
+      }
+    }, [isOpen]);
+
+    const positionClasses = {
+      top: 'bottom-full mb-2',
+      bottom: 'top-full mt-2',
+      left: 'right-full mr-2',
+      right: 'left-full ml-2',
+    };
+
+    return (
+      <div ref={ref} className={cn('relative inline-block', className)}>
+        <div
+          ref={triggerRef}
+          onClick={() => setIsOpen(!isOpen)}
+          className="cursor-pointer"
+        >
+          {trigger}
+        </div>
+
+        {isOpen && (
+          <div
+            ref={menuRef}
+            className={cn(
+              'absolute z-50 bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-max',
+              positionClasses[position],
+              menuClassName
+            )}
+          >
+            {items.map((item, index) => (
+              <MenuItem
+                key={index}
+                {...item}
+                onClose={() => setIsOpen(false)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Menu.displayName = 'Menu';
+
+export { MenuItem };

package/dist/cjs/components/Modal.d.ts

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef } from 'react';
+import { cn } from '../utilities/classNames';
+import { Button } from './Button';
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  size?: 'sm' | 'md' | 'lg';
+  closeButton?: boolean;
+  children: React.ReactNode;
+}
+
+export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      open,
+      onClose,
+      title,
+      size = 'md',
+      closeButton = true,
+      children,
+    },
+    ref,
+  ) => {
+    const dialogRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (open) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'unset';
+      }
+
+      return () => {
+        document.body.style.overflow = 'unset';
+      };
+    }, [open]);
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    };
+
+    if (!open) return null;
+
+    const sizeStyles = {
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-lg',
+    };
+
+    return (
+      <div
+        className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+        onClick={handleBackdropClick}
+      >
+        <div
+          ref={ref || dialogRef}
+          className={cn(
+            'bg-white rounded-lg shadow-xl w-full mx-4',
+            sizeStyles[size],
+          )}
+        >
+          {(title || closeButton) && (
+            <div className="flex items-center justify-between p-6 border-b border-gray-200">
+              {title && <h2 className="text-xl font-semibold text-gray-900">{title}</h2>}
+              {closeButton && (
+                <button
+                  onClick={onClose}
+                  className="ml-auto text-gray-400 hover:text-gray-600 transition-colors"
+                  aria-label="Close modal"
+                >
+                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              )}
+            </div>
+          )}
+          <div className="p-6">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+Modal.displayName = 'Modal';
+
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('px-6 py-4 border-b border-gray-200', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+ModalHeader.displayName = 'ModalHeader';
+
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('px-6 py-4', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+ModalBody.displayName = 'ModalBody';
+
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('px-6 py-4 border-t border-gray-200 flex justify-end gap-3', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+ModalFooter.displayName = 'ModalFooter';