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

package/dist/cjs/components/NavigationComponents.js

@@ -0,0 +1,276 @@
+import React from 'react';
+
+export interface NavItem {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+  active?: boolean;
+  badge?: string | number;
+  submenu?: NavItem[];
+}
+
+export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
+  items: NavItem[];
+  orientation?: 'horizontal' | 'vertical';
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'filled' | 'pills' | 'minimal';
+  onItemClick?: (item: NavItem) => void;
+}
+
+export const NavHorizontal: React.FC<NavigationProps> = ({
+  items,
+  size = 'md',
+  variant = 'default',
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  const sizeClass = { sm: 'px-2 py-1 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg' }[size];
+
+  return (
+    <nav className={`flex gap-4 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <button
+          key={idx}
+          onClick={() => onItemClick?.(item)}
+          className={`flex items-center gap-2 rounded ${sizeClass} transition-colors ${item.active ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'}`}
+        >
+          {item.icon}
+          {item.label}
+          {item.badge && <span className="ml-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">{item.badge}</span>}
+        </button>
+      ))}
+    </nav>
+  );
+};
+
+export const NavVertical: React.FC<NavigationProps> = ({
+  items,
+  size = 'md',
+  variant = 'default',
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  const sizeClass = { sm: 'px-3 py-2 text-sm', md: 'px-4 py-3 text-base', lg: 'px-6 py-4 text-lg' }[size];
+
+  return (
+    <nav className={`flex flex-col gap-1 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <button
+          key={idx}
+          onClick={() => onItemClick?.(item)}
+          className={`w-full text-left flex items-center gap-2 rounded ${sizeClass} transition-colors ${item.active ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'}`}
+        >
+          {item.icon}
+          {item.label}
+          {item.badge && <span className="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">{item.badge}</span>}
+        </button>
+      ))}
+    </nav>
+  );
+};
+
+export const NavTabs: React.FC<NavigationProps> = ({
+  items,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  return (
+    <nav className={`flex border-b border-gray-200 gap-1 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <button
+          key={idx}
+          onClick={() => onItemClick?.(item)}
+          className={`px-6 py-3 border-b-2 transition-colors font-medium ${item.active ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-900'}`}
+        >
+          {item.label}
+        </button>
+      ))}
+    </nav>
+  );
+};
+
+export const NavPills: React.FC<NavigationProps> = ({
+  items,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  return (
+    <nav className={`flex gap-2 flex-wrap ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <button
+          key={idx}
+          onClick={() => onItemClick?.(item)}
+          className={`px-4 py-2 rounded-full font-medium transition-colors ${item.active ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
+        >
+          {item.label}
+        </button>
+      ))}
+    </nav>
+  );
+};
+
+export const NavBreadcrumbs: React.FC<NavigationProps> = ({
+  items,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  return (
+    <nav className={`flex items-center gap-2 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <React.Fragment key={idx}>
+          <button
+            onClick={() => onItemClick?.(item)}
+            className="text-blue-600 hover:text-blue-700 hover:underline"
+          >
+            {item.label}
+          </button>
+          {idx < items.length - 1 && <span className="text-gray-400">/</span>}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+};
+
+export const NavSteps: React.FC<
+  NavigationProps & {
+    currentStep?: number;
+  }
+> = ({
+  items,
+  currentStep = 0,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`flex items-center gap-4 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <React.Fragment key={idx}>
+          <div className="flex flex-col items-center gap-2">
+            <div
+              className={`w-10 h-10 rounded-full flex items-center justify-center font-bold ${idx <= currentStep ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-600'}`}
+            >
+              {idx + 1}
+            </div>
+            <span className="text-sm text-gray-600">{item.label}</span>
+          </div>
+          {idx < items.length - 1 && (
+            <div
+              className={`flex-1 h-1 ${idx < currentStep ? 'bg-blue-600' : 'bg-gray-200'}`}
+              style={{ minWidth: '40px' }}
+            ></div>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export const NavTree: React.FC<NavigationProps & { expandable?: boolean }> = ({
+  items,
+  expandable = true,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  const [expanded, setExpanded] = React.useState<Set<number>>(new Set());
+
+  const toggleExpanded = (idx: number) => {
+    const newExpanded = new Set(expanded);
+    if (newExpanded.has(idx)) {
+      newExpanded.delete(idx);
+    } else {
+      newExpanded.add(idx);
+    }
+    setExpanded(newExpanded);
+  };
+
+  return (
+    <nav className={`space-y-1 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <div key={idx}>
+          <div className="flex items-center gap-2">
+            {item.submenu && expandable && (
+              <button
+                onClick={() => toggleExpanded(idx)}
+                className="w-4 h-4 flex items-center justify-center"
+              >
+                {expanded.has(idx) ? '▼' : '▶'}
+              </button>
+            )}
+            <button
+              onClick={() => onItemClick?.(item)}
+              className="flex-1 text-left px-3 py-2 rounded text-gray-700 hover:bg-gray-100"
+            >
+              {item.label}
+            </button>
+          </div>
+          {item.submenu && expanded.has(idx) && (
+            <div className="ml-4 border-l border-gray-200">
+              {item.submenu.map((subitem, sidx) => (
+                <button
+                  key={sidx}
+                  onClick={() => onItemClick?.(subitem)}
+                  className="w-full text-left px-3 py-2 rounded text-gray-600 hover:bg-gray-100 text-sm"
+                >
+                  {subitem.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+};
+
+export const NavMegamenu: React.FC<
+  NavigationProps & {
+    columns?: number;
+  }
+> = ({
+  items,
+  columns = 3,
+  onItemClick,
+  className = '',
+  ...props
+}) => {
+  const [openMenu, setOpenMenu] = React.useState<number | null>(null);
+
+  return (
+    <nav className={`relative ${className}`} {...props}>
+      <div className="flex gap-6">
+        {items.map((item, idx) => (
+          <div key={idx} className="relative group">
+            <button
+              onClick={() => setOpenMenu(openMenu === idx ? null : idx)}
+              className="px-4 py-3 font-medium text-gray-700 hover:text-gray-900"
+            >
+              {item.label}
+            </button>
+            {item.submenu && (
+              <div className="absolute top-full left-0 hidden group-hover:block bg-white shadow-lg rounded-lg p-6 min-w-max">
+                <div className={`grid grid-cols-${columns} gap-6`}>
+                  {item.submenu.map((subitem, sidx) => (
+                    <button
+                      key={sidx}
+                      onClick={() => onItemClick?.(subitem)}
+                      className="text-left text-gray-700 hover:text-blue-600"
+                    >
+                      <div className="font-medium">{subitem.label}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </nav>
+  );
+};

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  maxVisible?: number;
+}
+
+export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      maxVisible = 5,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const getPageNumbers = () => {
+      const pages: (number | string)[] = [];
+      let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+      let end = Math.min(totalPages, start + maxVisible - 1);
+
+      if (end - start < maxVisible - 1) {
+        start = Math.max(1, end - maxVisible + 1);
+      }
+
+      if (start > 1) {
+        pages.push(1);
+        if (start > 2) pages.push('...');
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (end < totalPages) {
+        if (end < totalPages - 1) pages.push('...');
+        pages.push(totalPages);
+      }
+
+      return pages;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center gap-1', className)}
+        {...props}
+      >
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="px-3 py-2 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+          aria-label="Previous page"
+        >
+          ←
+        </button>
+
+        {getPageNumbers().map((page, index) => (
+          <button
+            key={index}
+            onClick={() => typeof page === 'number' && onPageChange(page)}
+            disabled={page === '...'}
+            className={cn(
+              'px-3 py-2 border rounded-md transition-colors',
+              page === currentPage
+                ? 'bg-blue-600 text-white border-blue-600'
+                : 'border-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed',
+            )}
+            aria-current={page === currentPage ? 'page' : undefined}
+          >
+            {page}
+          </button>
+        ))}
+
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className="px-3 py-2 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+          aria-label="Next page"
+        >
+          →
+        </button>
+      </div>
+    );
+  },
+);
+
+Pagination.displayName = 'Pagination';

package/dist/cjs/components/Pagination.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  maxVisible?: number;
+}
+
+export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      onPageChange,
+      maxVisible = 5,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const getPageNumbers = () => {
+      const pages: (number | string)[] = [];
+      let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+      let end = Math.min(totalPages, start + maxVisible - 1);
+
+      if (end - start < maxVisible - 1) {
+        start = Math.max(1, end - maxVisible + 1);
+      }
+
+      if (start > 1) {
+        pages.push(1);
+        if (start > 2) pages.push('...');
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (end < totalPages) {
+        if (end < totalPages - 1) pages.push('...');
+        pages.push(totalPages);
+      }
+
+      return pages;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-center gap-1', className)}
+        {...props}
+      >
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="px-3 py-2 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+          aria-label="Previous page"
+        >
+          ←
+        </button>
+
+        {getPageNumbers().map((page, index) => (
+          <button
+            key={index}
+            onClick={() => typeof page === 'number' && onPageChange(page)}
+            disabled={page === '...'}
+            className={cn(
+              'px-3 py-2 border rounded-md transition-colors',
+              page === currentPage
+                ? 'bg-blue-600 text-white border-blue-600'
+                : 'border-gray-300 hover:bg-gray-50 disabled:cursor-not-allowed',
+            )}
+            aria-current={page === currentPage ? 'page' : undefined}
+          >
+            {page}
+          </button>
+        ))}
+
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className="px-3 py-2 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+          aria-label="Next page"
+        >
+          →
+        </button>
+      </div>
+    );
+  },
+);
+
+Pagination.displayName = 'Pagination';

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface PopoverProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  trigger?: 'hover' | 'click';
+  className?: string;
+  contentClassName?: string;
+  arrow?: boolean;
+  offset?: number;
+}
+
+export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
+  (
+    {
+      children,
+      content,
+      position = 'top',
+      trigger = 'hover',
+      className,
+      contentClassName,
+      arrow = true,
+      offset = 8,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (trigger === 'click') {
+        const handleClickOutside = (e: MouseEvent) => {
+          if (
+            popoverRef.current &&
+            triggerRef.current &&
+            !popoverRef.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, trigger]);
+
+    const positionClasses = {
+      top: 'bottom-full mb-2 left-1/2 -translate-x-1/2',
+      bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
+      left: 'right-full mr-2 top-1/2 -translate-y-1/2',
+      right: 'left-full ml-2 top-1/2 -translate-y-1/2',
+    };
+
+    const arrowClasses = {
+      top: 'bottom-[-4px] left-1/2 -translate-x-1/2 border-t-gray-900 border-l-transparent border-r-transparent border-b-transparent',
+      bottom: 'top-[-4px] left-1/2 -translate-x-1/2 border-b-gray-900 border-l-transparent border-r-transparent border-t-transparent',
+      left: 'left-[-4px] top-1/2 -translate-y-1/2 border-l-gray-900 border-t-transparent border-b-transparent border-r-transparent',
+      right: 'right-[-4px] top-1/2 -translate-y-1/2 border-r-gray-900 border-t-transparent border-b-transparent border-l-transparent',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn('relative inline-block', className)}
+        onMouseEnter={() => trigger === 'hover' && setIsOpen(true)}
+        onMouseLeave={() => trigger === 'hover' && setIsOpen(false)}
+      >
+        <div
+          ref={triggerRef}
+          onClick={() => trigger === 'click' && setIsOpen(!isOpen)}
+        >
+          {children}
+        </div>
+
+        {isOpen && (
+          <div
+            ref={popoverRef}
+            className={cn(
+              'absolute z-50 bg-gray-900 text-white text-sm rounded-lg shadow-lg p-3 max-w-xs',
+              positionClasses[position],
+              contentClassName
+            )}
+          >
+            {content}
+            {arrow && (
+              <div
+                className={cn(
+                  'absolute w-0 h-0 border-4',
+                  arrowClasses[position]
+                )}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';

package/dist/cjs/components/Popover.js

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface PopoverProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  trigger?: 'hover' | 'click';
+  className?: string;
+  contentClassName?: string;
+  arrow?: boolean;
+  offset?: number;
+}
+
+export const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
+  (
+    {
+      children,
+      content,
+      position = 'top',
+      trigger = 'hover',
+      className,
+      contentClassName,
+      arrow = true,
+      offset = 8,
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const popoverRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      if (trigger === 'click') {
+        const handleClickOutside = (e: MouseEvent) => {
+          if (
+            popoverRef.current &&
+            triggerRef.current &&
+            !popoverRef.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, trigger]);
+
+    const positionClasses = {
+      top: 'bottom-full mb-2 left-1/2 -translate-x-1/2',
+      bottom: 'top-full mt-2 left-1/2 -translate-x-1/2',
+      left: 'right-full mr-2 top-1/2 -translate-y-1/2',
+      right: 'left-full ml-2 top-1/2 -translate-y-1/2',
+    };
+
+    const arrowClasses = {
+      top: 'bottom-[-4px] left-1/2 -translate-x-1/2 border-t-gray-900 border-l-transparent border-r-transparent border-b-transparent',
+      bottom: 'top-[-4px] left-1/2 -translate-x-1/2 border-b-gray-900 border-l-transparent border-r-transparent border-t-transparent',
+      left: 'left-[-4px] top-1/2 -translate-y-1/2 border-l-gray-900 border-t-transparent border-b-transparent border-r-transparent',
+      right: 'right-[-4px] top-1/2 -translate-y-1/2 border-r-gray-900 border-t-transparent border-b-transparent border-l-transparent',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn('relative inline-block', className)}
+        onMouseEnter={() => trigger === 'hover' && setIsOpen(true)}
+        onMouseLeave={() => trigger === 'hover' && setIsOpen(false)}
+      >
+        <div
+          ref={triggerRef}
+          onClick={() => trigger === 'click' && setIsOpen(!isOpen)}
+        >
+          {children}
+        </div>
+
+        {isOpen && (
+          <div
+            ref={popoverRef}
+            className={cn(
+              'absolute z-50 bg-gray-900 text-white text-sm rounded-lg shadow-lg p-3 max-w-xs',
+              positionClasses[position],
+              contentClassName
+            )}
+          >
+            {content}
+            {arrow && (
+              <div
+                className={cn(
+                  'absolute w-0 h-0 border-4',
+                  arrowClasses[position]
+                )}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';