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

package/dist/cjs/components/Spinner.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'secondary' | 'danger' | 'success';
+}
+
+const sizeStyles = {
+  sm: 'w-4 h-4',
+  md: 'w-8 h-8',
+  lg: 'w-12 h-12',
+};
+
+const variantStyles = {
+  primary: 'text-blue-600',
+  secondary: 'text-gray-600',
+  danger: 'text-red-600',
+  success: 'text-green-600',
+};
+
+export const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+  (
+    {
+      size = 'md',
+      variant = 'primary',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-block animate-spin',
+          sizeStyles[size],
+          variantStyles[variant],
+          className,
+        )}
+        role="status"
+        aria-label="Loading"
+        {...props}
+      >
+        <svg
+          className="w-full h-full"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+Spinner.displayName = 'Spinner';

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface StackProps {
+  children: React.ReactNode;
+  direction?: 'row' | 'column';
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  wrap?: boolean;
+  className?: string;
+}
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      children,
+      direction = 'column',
+      gap = 'md',
+      align = 'stretch',
+      justify = 'start',
+      wrap = false,
+      className,
+    },
+    ref
+  ) => {
+    const directionClasses = {
+      row: 'flex-row',
+      column: 'flex-col',
+    };
+
+    const gapClasses = {
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    };
+
+    const alignClasses = {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+    };
+
+    const justifyClasses = {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          directionClasses[direction],
+          gapClasses[gap],
+          alignClasses[align],
+          justifyClasses[justify],
+          { 'flex-wrap': wrap },
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Stack.displayName = 'Stack';

package/dist/cjs/components/Stack.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface StackProps {
+  children: React.ReactNode;
+  direction?: 'row' | 'column';
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  wrap?: boolean;
+  className?: string;
+}
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      children,
+      direction = 'column',
+      gap = 'md',
+      align = 'stretch',
+      justify = 'start',
+      wrap = false,
+      className,
+    },
+    ref
+  ) => {
+    const directionClasses = {
+      row: 'flex-row',
+      column: 'flex-col',
+    };
+
+    const gapClasses = {
+      xs: 'gap-1',
+      sm: 'gap-2',
+      md: 'gap-4',
+      lg: 'gap-6',
+      xl: 'gap-8',
+    };
+
+    const alignClasses = {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+    };
+
+    const justifyClasses = {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          directionClasses[direction],
+          gapClasses[gap],
+          alignClasses[align],
+          justifyClasses[justify],
+          { 'flex-wrap': wrap },
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Stack.displayName = 'Stack';

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface StepProps {
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  status?: 'pending' | 'active' | 'completed' | 'error';
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export interface StepperProps {
+  steps: StepProps[];
+  activeStep: number;
+  onStepClick?: (index: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+  variant?: 'default' | 'dots' | 'numbers';
+  className?: string;
+  editable?: boolean;
+}
+
+export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      steps,
+      activeStep,
+      onStepClick,
+      orientation = 'horizontal',
+      variant = 'default',
+      className,
+      editable = false,
+    },
+    ref
+  ) => {
+    const getStepStatus = (index: number): StepProps['status'] => {
+      if (index < activeStep) return 'completed';
+      if (index === activeStep) return 'active';
+      return 'pending';
+    };
+
+    const statusColors = {
+      pending: 'bg-gray-200 text-gray-600',
+      active: 'bg-blue-500 text-white',
+      completed: 'bg-green-500 text-white',
+      error: 'bg-red-500 text-white',
+    };
+
+    const renderStepIndicator = (step: StepProps, index: number) => {
+      const status = getStepStatus(index);
+
+      if (variant === 'dots') {
+        return (
+          <div
+            key={index}
+            className={cn(
+              'w-3 h-3 rounded-full',
+              {
+                'bg-gray-300': status === 'pending',
+                'bg-blue-500': status === 'active',
+                'bg-green-500': status === 'completed',
+                'bg-red-500': status === 'error',
+              }
+            )}
+          />
+        );
+      }
+
+      if (variant === 'numbers') {
+        return (
+          <div
+            key={index}
+            className={cn(
+              'w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm',
+              statusColors[status]
+            )}
+          >
+            {status === 'completed' ? '✓' : index + 1}
+          </div>
+        );
+      }
+
+      return (
+        <div key={index} className="flex flex-col items-center gap-2">
+          <div
+            className={cn(
+              'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-colors',
+              statusColors[status],
+              {
+                'cursor-pointer hover:opacity-80': editable && !step.disabled,
+                'cursor-not-allowed opacity-50': step.disabled,
+              }
+            )}
+            onClick={() => editable && !step.disabled && onStepClick?.(index)}
+          >
+            {step.icon || (status === 'completed' ? '✓' : index + 1)}
+          </div>
+          <div className="text-center">
+            <p className="font-medium text-sm text-gray-900">{step.label}</p>
+            {step.description && (
+              <p className="text-xs text-gray-500 mt-0.5">{step.description}</p>
+            )}
+          </div>
+        </div>
+      );
+    };
+
+    const containerClass = cn(
+      {
+        'flex items-center gap-4': orientation === 'horizontal',
+        'flex flex-col gap-4': orientation === 'vertical',
+      },
+      className
+    );
+
+    return (
+      <div ref={ref} className={containerClass}>
+        {orientation === 'horizontal' && variant === 'default' ? (
+          steps.map((step, index) => (
+            <React.Fragment key={index}>
+              {renderStepIndicator(step, index)}
+              {index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'h-1 flex-1 rounded-full',
+                    {
+                      'bg-green-500': index < activeStep,
+                      'bg-gray-300': index >= activeStep,
+                    }
+                  )}
+                />
+              )}
+            </React.Fragment>
+          ))
+        ) : (
+          steps.map((step, index) => (
+            <div key={index} className="flex gap-4 items-start w-full">
+              {renderStepIndicator(step, index)}
+              {orientation === 'vertical' && index < steps.length - 1 && (
+                <div className="h-16 w-0.5 bg-gray-300 ml-5" />
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    );
+  }
+);
+
+Stepper.displayName = 'Stepper';

package/dist/cjs/components/Stepper.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface StepProps {
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  status?: 'pending' | 'active' | 'completed' | 'error';
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export interface StepperProps {
+  steps: StepProps[];
+  activeStep: number;
+  onStepClick?: (index: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+  variant?: 'default' | 'dots' | 'numbers';
+  className?: string;
+  editable?: boolean;
+}
+
+export const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      steps,
+      activeStep,
+      onStepClick,
+      orientation = 'horizontal',
+      variant = 'default',
+      className,
+      editable = false,
+    },
+    ref
+  ) => {
+    const getStepStatus = (index: number): StepProps['status'] => {
+      if (index < activeStep) return 'completed';
+      if (index === activeStep) return 'active';
+      return 'pending';
+    };
+
+    const statusColors = {
+      pending: 'bg-gray-200 text-gray-600',
+      active: 'bg-blue-500 text-white',
+      completed: 'bg-green-500 text-white',
+      error: 'bg-red-500 text-white',
+    };
+
+    const renderStepIndicator = (step: StepProps, index: number) => {
+      const status = getStepStatus(index);
+
+      if (variant === 'dots') {
+        return (
+          <div
+            key={index}
+            className={cn(
+              'w-3 h-3 rounded-full',
+              {
+                'bg-gray-300': status === 'pending',
+                'bg-blue-500': status === 'active',
+                'bg-green-500': status === 'completed',
+                'bg-red-500': status === 'error',
+              }
+            )}
+          />
+        );
+      }
+
+      if (variant === 'numbers') {
+        return (
+          <div
+            key={index}
+            className={cn(
+              'w-8 h-8 rounded-full flex items-center justify-center font-semibold text-sm',
+              statusColors[status]
+            )}
+          >
+            {status === 'completed' ? '✓' : index + 1}
+          </div>
+        );
+      }
+
+      return (
+        <div key={index} className="flex flex-col items-center gap-2">
+          <div
+            className={cn(
+              'w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-colors',
+              statusColors[status],
+              {
+                'cursor-pointer hover:opacity-80': editable && !step.disabled,
+                'cursor-not-allowed opacity-50': step.disabled,
+              }
+            )}
+            onClick={() => editable && !step.disabled && onStepClick?.(index)}
+          >
+            {step.icon || (status === 'completed' ? '✓' : index + 1)}
+          </div>
+          <div className="text-center">
+            <p className="font-medium text-sm text-gray-900">{step.label}</p>
+            {step.description && (
+              <p className="text-xs text-gray-500 mt-0.5">{step.description}</p>
+            )}
+          </div>
+        </div>
+      );
+    };
+
+    const containerClass = cn(
+      {
+        'flex items-center gap-4': orientation === 'horizontal',
+        'flex flex-col gap-4': orientation === 'vertical',
+      },
+      className
+    );
+
+    return (
+      <div ref={ref} className={containerClass}>
+        {orientation === 'horizontal' && variant === 'default' ? (
+          steps.map((step, index) => (
+            <React.Fragment key={index}>
+              {renderStepIndicator(step, index)}
+              {index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'h-1 flex-1 rounded-full',
+                    {
+                      'bg-green-500': index < activeStep,
+                      'bg-gray-300': index >= activeStep,
+                    }
+                  )}
+                />
+              )}
+            </React.Fragment>
+          ))
+        ) : (
+          steps.map((step, index) => (
+            <div key={index} className="flex gap-4 items-start w-full">
+              {renderStepIndicator(step, index)}
+              {orientation === 'vertical' && index < steps.length - 1 && (
+                <div className="h-16 w-0.5 bg-gray-300 ml-5" />
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    );
+  }
+);
+
+Stepper.displayName = 'Stepper';

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

@@ -0,0 +1,173 @@
+import React, { useMemo } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TableColumn<T> {
+  key: keyof T;
+  header: string;
+  render?: (value: T[keyof T], row: T, index: number) => React.ReactNode;
+  sortable?: boolean;
+  width?: string;
+}
+
+export interface TableProps<T> {
+  data: T[];
+  columns: TableColumn<T>[];
+  striped?: boolean;
+  hover?: boolean;
+  bordered?: boolean;
+  compact?: boolean;
+  sortable?: boolean;
+  sortKey?: string;
+  sortOrder?: 'asc' | 'desc';
+  onSort?: (key: string, order: 'asc' | 'desc') => void;
+  selectable?: boolean;
+  selectedRows?: (keyof T)[];
+  onRowSelect?: (row: T) => void;
+  onSelectAll?: (selected: boolean) => void;
+  className?: string;
+  rowClassName?: (row: T, index: number) => string;
+}
+
+export const Table = React.forwardRef(
+  <T extends Record<string, any>>(
+    {
+      data,
+      columns,
+      striped = false,
+      hover = true,
+      bordered = false,
+      compact = false,
+      sortable = false,
+      sortKey,
+      sortOrder = 'asc',
+      onSort,
+      selectable = false,
+      selectedRows = [],
+      onRowSelect,
+      onSelectAll,
+      className,
+      rowClassName,
+    }: TableProps<T>,
+    ref: React.Ref<HTMLTableElement>
+  ) => {
+    const [internalSortKey, setInternalSortKey] = React.useState(sortKey);
+    const [internalSortOrder, setInternalSortOrder] = React.useState<'asc' | 'desc'>(sortOrder);
+
+    const handleSort = (key: string) => {
+      if (!sortable) return;
+      const newOrder = internalSortKey === key && internalSortOrder === 'asc' ? 'desc' : 'asc';
+      setInternalSortKey(key);
+      setInternalSortOrder(newOrder);
+      onSort?.(key, newOrder);
+    };
+
+    const sortedData = useMemo(() => {
+      if (!internalSortKey) return data;
+      const sorted = [...data].sort((a, b) => {
+        const aVal = a[internalSortKey];
+        const bVal = b[internalSortKey];
+        if (aVal < bVal) return internalSortOrder === 'asc' ? -1 : 1;
+        if (aVal > bVal) return internalSortOrder === 'asc' ? 1 : -1;
+        return 0;
+      });
+      return sorted;
+    }, [data, internalSortKey, internalSortOrder]);
+
+    const allSelected = data.length > 0 && selectedRows.length === data.length;
+
+    return (
+      <div className="table-wrapper overflow-x-auto">
+        <table
+          ref={ref}
+          className={cn(
+            'w-full border-collapse text-sm',
+            {
+              'border border-gray-300': bordered,
+              'striped-table': striped,
+            },
+            className
+          )}
+        >
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-300">
+              {selectable && (
+                <th className="p-3 text-left w-12">
+                  <input
+                    type="checkbox"
+                    checked={allSelected}
+                    onChange={(e) => onSelectAll?.(e.target.checked)}
+                    className="w-4 h-4 cursor-pointer"
+                  />
+                </th>
+              )}
+              {columns.map((col) => (
+                <th
+                  key={String(col.key)}
+                  className={cn(
+                    'p-3 text-left font-semibold text-gray-700',
+                    { 'cursor-pointer hover:bg-gray-100': sortable && col.sortable },
+                    col.width && { width: col.width }
+                  )}
+                  onClick={() => col.sortable && handleSort(String(col.key))}
+                >
+                  <div className="flex items-center gap-2">
+                    {col.header}
+                    {sortable && col.sortable && internalSortKey === String(col.key) && (
+                      <span className="text-xs">
+                        {internalSortOrder === 'asc' ? '▲' : '▼'}
+                      </span>
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedData.map((row, rowIndex) => (
+              <tr
+                key={rowIndex}
+                className={cn(
+                  'border-b border-gray-200 transition-colors',
+                  {
+                    'hover:bg-gray-50': hover,
+                    'bg-gray-50': striped && rowIndex % 2 === 1,
+                  },
+                  rowClassName?.(row, rowIndex)
+                )}
+              >
+                {selectable && (
+                  <td className="p-3">
+                    <input
+                      type="checkbox"
+                      checked={selectedRows.includes(row)}
+                      onChange={() => onRowSelect?.(row)}
+                      className="w-4 h-4 cursor-pointer"
+                    />
+                  </td>
+                )}
+                {columns.map((col) => (
+                  <td
+                    key={String(col.key)}
+                    className={cn('p-3 text-gray-700', {
+                      'text-xs py-2': compact,
+                    })}
+                    style={col.width ? { width: col.width } : undefined}
+                  >
+                    {col.render
+                      ? col.render(row[col.key], row, rowIndex)
+                      : String(row[col.key] ?? '')}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {data.length === 0 && (
+          <div className="text-center py-8 text-gray-500">No data available</div>
+        )}
+      </div>
+    );
+  }
+);
+
+Table.displayName = 'Table';