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

package/dist/cjs/components/LayoutComponents.js

@@ -0,0 +1,258 @@
+import React from 'react';
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  autoFit?: boolean;
+  minWidth?: string;
+}
+
+const gapClass = {
+  xs: 'gap-2',
+  sm: 'gap-4',
+  md: 'gap-6',
+  lg: 'gap-8',
+  xl: 'gap-12',
+};
+
+export const GridAuto: React.FC<GridProps> = ({
+  gap = 'md',
+  autoFit = true,
+  minWidth = '250px',
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={`grid ${gapClass[gap]} ${className}`}
+      style={{
+        gridTemplateColumns: autoFit ? `repeat(auto-fit, minmax(${minWidth}, 1fr))` : undefined,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const GridResponsive: React.FC<
+  GridProps & {
+    cols?: { sm?: number; md?: number; lg?: number; xl?: number };
+  }
+> = ({
+  gap = 'md',
+  cols = { sm: 1, md: 2, lg: 3, xl: 4 },
+  className = '',
+  children,
+  ...props
+}) => {
+  const colClass = `grid-cols-${cols.sm || 1} sm:grid-cols-${cols.md || 2} lg:grid-cols-${cols.lg || 3} xl:grid-cols-${cols.xl || 4}`;
+
+  return (
+    <div className={`grid ${gapClass[gap]} ${colClass} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const GridMasonry: React.FC<GridProps> = ({ gap = 'md', className = '', children, ...props }) => {
+  return (
+    <div
+      className={`grid ${gapClass[gap]} ${className}`}
+      style={{ columnCount: 'auto', columnFill: 'balance' }}
+      {...props}
+    >
+      {React.Children.map(children, (child) => (
+        <div style={{ breakInside: 'avoid' }}>{child}</div>
+      ))}
+    </div>
+  );
+};
+
+export const GridFixedCol: React.FC<
+  GridProps & {
+    columns: number;
+  }
+> = ({ gap = 'md', columns = 3, className = '', children, ...props }) => {
+  return (
+    <div className={`grid grid-cols-${columns} ${gapClass[gap]} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const GridDynamic: React.FC<
+  GridProps & {
+    minColWidth?: string;
+  }
+> = ({
+  gap = 'md',
+  minColWidth = '200px',
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={`grid ${gapClass[gap]} ${className}`}
+      style={{
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minColWidth}, 1fr))`,
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const GridNested: React.FC<GridProps> = ({
+  gap = 'md',
+  className = '',
+  children,
+  ...props
+}) => {
+  return (
+    <div className={`grid ${gapClass[gap]} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const GridAligned: React.FC<
+  GridProps & {
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between';
+  }
+> = ({
+  gap = 'md',
+  align = 'stretch',
+  justify = 'start',
+  className = '',
+  children,
+  ...props
+}) => {
+  const alignClass = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+  }[align];
+
+  const justifyClass = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+  }[justify];
+
+  return (
+    <div className={`grid ${gapClass[gap]} ${alignClass} ${justifyClass} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const Container: React.FC<GridProps & { maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' }> = ({
+  maxWidth = 'lg',
+  className = '',
+  children,
+  ...props
+}) => {
+  const maxWidthClass = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+  }[maxWidth];
+
+  return (
+    <div className={`mx-auto px-4 ${maxWidthClass} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const Flex: React.FC<
+  GridProps & {
+    direction?: 'row' | 'col';
+    wrap?: boolean;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  }
+> = ({
+  direction = 'row',
+  wrap = false,
+  gap = 'md',
+  align = 'stretch',
+  justify = 'start',
+  className = '',
+  children,
+  ...props
+}) => {
+  const directionClass = direction === 'col' ? 'flex-col' : 'flex-row';
+  const wrapClass = wrap ? 'flex-wrap' : 'flex-nowrap';
+  const alignClass = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+  }[align];
+
+  const justifyClass = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly',
+  }[justify];
+
+  return (
+    <div className={`flex ${directionClass} ${wrapClass} ${gapClass[gap]} ${alignClass} ${justifyClass} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const Stack: React.FC<GridProps & { direction?: 'vertical' | 'horizontal' }> = ({
+  direction = 'vertical',
+  gap = 'md',
+  className = '',
+  children,
+  ...props
+}) => {
+  const directionClass = direction === 'vertical' ? 'flex-col' : 'flex-row';
+
+  return (
+    <div className={`flex ${directionClass} ${gapClass[gap]} ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const AspectRatio: React.FC<
+  GridProps & {
+    ratio?: 'square' | '16/9' | '4/3' | '21/9';
+  }
+> = ({
+  ratio = 'square',
+  className = '',
+  children,
+  ...props
+}) => {
+  const ratioClass = {
+    square: 'aspect-square',
+    '16/9': 'aspect-video',
+    '4/3': 'aspect-video', // fallback
+    '21/9': 'aspect-auto',
+  }[ratio];
+
+  return (
+    <div className={`${ratioClass} overflow-hidden ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+  underline?: 'always' | 'hover' | 'none';
+  external?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      href,
+      children,
+      variant = 'primary',
+      underline = 'hover',
+      external = false,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const variantClasses = {
+      primary: 'text-blue-600 hover:text-blue-800',
+      secondary: 'text-gray-600 hover:text-gray-800',
+      danger: 'text-red-600 hover:text-red-800',
+      success: 'text-green-600 hover:text-green-800',
+    };
+
+    const underlineClasses = {
+      always: 'underline',
+      hover: 'hover:underline',
+      none: 'no-underline',
+    };
+
+    return (
+      <a
+        ref={ref}
+        href={disabled ? undefined : href}
+        target={external ? '_blank' : undefined}
+        rel={external ? 'noopener noreferrer' : undefined}
+        className={cn(
+          'transition-colors font-medium',
+          variantClasses[variant],
+          underlineClasses[underline],
+          {
+            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled,
+          },
+          className
+        )}
+        onClick={(e) => {
+          if (disabled) {
+            e.preventDefault();
+          }
+        }}
+        {...props}
+      >
+        {children}
+        {external && <span className="ml-1">↗</span>}
+      </a>
+    );
+  }
+);
+
+Link.displayName = 'Link';

package/dist/cjs/components/Link.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+  underline?: 'always' | 'hover' | 'none';
+  external?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      href,
+      children,
+      variant = 'primary',
+      underline = 'hover',
+      external = false,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const variantClasses = {
+      primary: 'text-blue-600 hover:text-blue-800',
+      secondary: 'text-gray-600 hover:text-gray-800',
+      danger: 'text-red-600 hover:text-red-800',
+      success: 'text-green-600 hover:text-green-800',
+    };
+
+    const underlineClasses = {
+      always: 'underline',
+      hover: 'hover:underline',
+      none: 'no-underline',
+    };
+
+    return (
+      <a
+        ref={ref}
+        href={disabled ? undefined : href}
+        target={external ? '_blank' : undefined}
+        rel={external ? 'noopener noreferrer' : undefined}
+        className={cn(
+          'transition-colors font-medium',
+          variantClasses[variant],
+          underlineClasses[underline],
+          {
+            'opacity-50 cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled,
+          },
+          className
+        )}
+        onClick={(e) => {
+          if (disabled) {
+            e.preventDefault();
+          }
+        }}
+        {...props}
+      >
+        {children}
+        {external && <span className="ml-1">↗</span>}
+      </a>
+    );
+  }
+);
+
+Link.displayName = 'Link';

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

@@ -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>
+  );
+};