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

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TimelineItemProps {
+  title: string;
+  description?: string;
+  timestamp?: string;
+  icon?: React.ReactNode;
+  status?: 'pending' | 'completed' | 'active' | 'error';
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TimelineProps {
+  items: TimelineItemProps[];
+  orientation?: 'vertical' | 'horizontal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
+  (
+    {
+      title,
+      description,
+      timestamp,
+      icon,
+      status = 'pending',
+      children,
+      className,
+    },
+    ref
+  ) => {
+    const statusColors = {
+      pending: 'bg-gray-300',
+      completed: 'bg-green-500',
+      active: 'bg-blue-500',
+      error: 'bg-red-500',
+    };
+
+    return (
+      <div ref={ref} className={cn('timeline-item flex gap-4', className)}>
+        <div className="flex flex-col items-center">
+          <div
+            className={cn(
+              'w-6 h-6 rounded-full flex items-center justify-center text-white relative',
+              statusColors[status]
+            )}
+          >
+            {icon || (
+              <div className="w-2 h-2 bg-white rounded-full" />
+            )}
+          </div>
+          <div className="w-0.5 h-16 bg-gray-300 mt-2" />
+        </div>
+        <div className="flex-1 pb-8">
+          <h4 className="font-semibold text-gray-900">{title}</h4>
+          {timestamp && (
+            <p className="text-xs text-gray-500 mt-1">{timestamp}</p>
+          )}
+          {description && (
+            <p className="text-sm text-gray-600 mt-2">{description}</p>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+TimelineItem.displayName = 'TimelineItem';
+
+export const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(
+  (
+    {
+      items,
+      orientation = 'vertical',
+      size = 'md',
+      className,
+      children,
+    },
+    ref
+  ) => {
+    const sizeClasses = {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'timeline',
+          {
+            'flex flex-col': orientation === 'vertical',
+            'flex flex-row overflow-x-auto': orientation === 'horizontal',
+          },
+          sizeClasses[size],
+          className
+        )}
+      >
+        {items.length > 0 ? (
+          items.map((item, index) => (
+            <TimelineItem
+              key={index}
+              {...item}
+              className={cn({
+                '[&_>.timeline-item:last-child_>.flex:last-child_.h-16]:h-0':
+                  index === items.length - 1,
+              })}
+            />
+          ))
+        ) : (
+          children
+        )}
+      </div>
+    );
+  }
+);
+
+Timeline.displayName = 'Timeline';
+export { TimelineItem };

package/dist/cjs/components/Timeline.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TimelineItemProps {
+  title: string;
+  description?: string;
+  timestamp?: string;
+  icon?: React.ReactNode;
+  status?: 'pending' | 'completed' | 'active' | 'error';
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface TimelineProps {
+  items: TimelineItemProps[];
+  orientation?: 'vertical' | 'horizontal';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
+  (
+    {
+      title,
+      description,
+      timestamp,
+      icon,
+      status = 'pending',
+      children,
+      className,
+    },
+    ref
+  ) => {
+    const statusColors = {
+      pending: 'bg-gray-300',
+      completed: 'bg-green-500',
+      active: 'bg-blue-500',
+      error: 'bg-red-500',
+    };
+
+    return (
+      <div ref={ref} className={cn('timeline-item flex gap-4', className)}>
+        <div className="flex flex-col items-center">
+          <div
+            className={cn(
+              'w-6 h-6 rounded-full flex items-center justify-center text-white relative',
+              statusColors[status]
+            )}
+          >
+            {icon || (
+              <div className="w-2 h-2 bg-white rounded-full" />
+            )}
+          </div>
+          <div className="w-0.5 h-16 bg-gray-300 mt-2" />
+        </div>
+        <div className="flex-1 pb-8">
+          <h4 className="font-semibold text-gray-900">{title}</h4>
+          {timestamp && (
+            <p className="text-xs text-gray-500 mt-1">{timestamp}</p>
+          )}
+          {description && (
+            <p className="text-sm text-gray-600 mt-2">{description}</p>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+TimelineItem.displayName = 'TimelineItem';
+
+export const Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(
+  (
+    {
+      items,
+      orientation = 'vertical',
+      size = 'md',
+      className,
+      children,
+    },
+    ref
+  ) => {
+    const sizeClasses = {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'timeline',
+          {
+            'flex flex-col': orientation === 'vertical',
+            'flex flex-row overflow-x-auto': orientation === 'horizontal',
+          },
+          sizeClasses[size],
+          className
+        )}
+      >
+        {items.length > 0 ? (
+          items.map((item, index) => (
+            <TimelineItem
+              key={index}
+              {...item}
+              className={cn({
+                '[&_>.timeline-item:last-child_>.flex:last-child_.h-16]:h-0':
+                  index === items.length - 1,
+              })}
+            />
+          ))
+        ) : (
+          children
+        )}
+      </div>
+    );
+  }
+);
+
+Timeline.displayName = 'Timeline';
+export { TimelineItem };

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

@@ -0,0 +1,155 @@
+import React, { useEffect } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ToastProps {
+  id?: string;
+  title: string;
+  description?: string;
+  type?: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+  onClose?: () => void;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  className?: string;
+  icon?: React.ReactNode;
+}
+
+export interface ToastContextType {
+  toasts: ToastProps[];
+  addToast: (toast: Omit<ToastProps, 'id'>) => string;
+  removeToast: (id: string) => void;
+  clearAll: () => void;
+}
+
+export const ToastContext = React.createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = () => {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider');
+  }
+  return context;
+};
+
+const Toast = React.forwardRef<HTMLDivElement, ToastProps & { onClose: () => void }>(
+  (
+    {
+      title,
+      description,
+      type = 'info',
+      action,
+      onClose,
+      className,
+      icon,
+    },
+    ref
+  ) => {
+    const typeStyles = {
+      success: 'bg-green-50 border-green-200 text-green-900',
+      error: 'bg-red-50 border-red-200 text-red-900',
+      warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
+      info: 'bg-blue-50 border-blue-200 text-blue-900',
+    };
+
+    const iconMap = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ',
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          'rounded-lg border-l-4 p-4 shadow-lg flex gap-3 items-start max-w-md',
+          'animate-in fade-in slide-in-from-top-2 duration-300',
+          typeStyles[type],
+          className
+        )}
+      >
+        <div className="text-xl font-bold flex-shrink-0">
+          {icon || iconMap[type]}
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="font-semibold">{title}</h3>
+          {description && (
+            <p className="text-sm mt-1 opacity-90">{description}</p>
+          )}
+        </div>
+        <div className="flex gap-2 flex-shrink-0">
+          {action && (
+            <button
+              onClick={action.onClick}
+              className="text-sm font-medium hover:underline"
+            >
+              {action.label}
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="text-xl font-bold hover:opacity-70 transition-opacity"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+Toast.displayName = 'Toast';
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = React.useState<ToastProps[]>([]);
+
+  const addToast = (toast: Omit<ToastProps, 'id'>) => {
+    const id = `toast-${Date.now()}-${Math.random()}`;
+    const newToast: ToastProps = { ...toast, id };
+
+    setToasts((prev) => [...prev, newToast]);
+
+    if (toast.duration !== 0) {
+      setTimeout(() => removeToast(id), toast.duration ?? 5000);
+    }
+
+    return id;
+  };
+
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const clearAll = () => {
+    setToasts([]);
+  };
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAll }}>
+      {children}
+      <div className="fixed bottom-4 right-4 flex flex-col gap-2 pointer-events-none">
+        {toasts.map((toast) => (
+          <div key={toast.id} className="pointer-events-auto">
+            <Toast
+              {...toast}
+              onClose={() => removeToast(toast.id!)}
+            />
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+ToastProvider.displayName = 'ToastProvider';
+
+export { Toast };

package/dist/cjs/components/Toast.js

@@ -0,0 +1,155 @@
+import React, { useEffect } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ToastProps {
+  id?: string;
+  title: string;
+  description?: string;
+  type?: 'success' | 'error' | 'warning' | 'info';
+  duration?: number;
+  onClose?: () => void;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  className?: string;
+  icon?: React.ReactNode;
+}
+
+export interface ToastContextType {
+  toasts: ToastProps[];
+  addToast: (toast: Omit<ToastProps, 'id'>) => string;
+  removeToast: (id: string) => void;
+  clearAll: () => void;
+}
+
+export const ToastContext = React.createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = () => {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider');
+  }
+  return context;
+};
+
+const Toast = React.forwardRef<HTMLDivElement, ToastProps & { onClose: () => void }>(
+  (
+    {
+      title,
+      description,
+      type = 'info',
+      action,
+      onClose,
+      className,
+      icon,
+    },
+    ref
+  ) => {
+    const typeStyles = {
+      success: 'bg-green-50 border-green-200 text-green-900',
+      error: 'bg-red-50 border-red-200 text-red-900',
+      warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
+      info: 'bg-blue-50 border-blue-200 text-blue-900',
+    };
+
+    const iconMap = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ',
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          'rounded-lg border-l-4 p-4 shadow-lg flex gap-3 items-start max-w-md',
+          'animate-in fade-in slide-in-from-top-2 duration-300',
+          typeStyles[type],
+          className
+        )}
+      >
+        <div className="text-xl font-bold flex-shrink-0">
+          {icon || iconMap[type]}
+        </div>
+        <div className="flex-1 min-w-0">
+          <h3 className="font-semibold">{title}</h3>
+          {description && (
+            <p className="text-sm mt-1 opacity-90">{description}</p>
+          )}
+        </div>
+        <div className="flex gap-2 flex-shrink-0">
+          {action && (
+            <button
+              onClick={action.onClick}
+              className="text-sm font-medium hover:underline"
+            >
+              {action.label}
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="text-xl font-bold hover:opacity-70 transition-opacity"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+Toast.displayName = 'Toast';
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = React.useState<ToastProps[]>([]);
+
+  const addToast = (toast: Omit<ToastProps, 'id'>) => {
+    const id = `toast-${Date.now()}-${Math.random()}`;
+    const newToast: ToastProps = { ...toast, id };
+
+    setToasts((prev) => [...prev, newToast]);
+
+    if (toast.duration !== 0) {
+      setTimeout(() => removeToast(id), toast.duration ?? 5000);
+    }
+
+    return id;
+  };
+
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const clearAll = () => {
+    setToasts([]);
+  };
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAll }}>
+      {children}
+      <div className="fixed bottom-4 right-4 flex flex-col gap-2 pointer-events-none">
+        {toasts.map((toast) => (
+          <div key={toast.id} className="pointer-events-auto">
+            <Toast
+              {...toast}
+              onClose={() => removeToast(toast.id!)}
+            />
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+ToastProvider.displayName = 'ToastProvider';
+
+export { Toast };

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const sizeStyles = {
+  sm: 'w-10 h-6',
+  md: 'w-12 h-7',
+  lg: 'w-14 h-8',
+};
+
+const toggleSizeStyles = {
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+};
+
+const translateStyles = {
+  sm: 'translate-x-5',
+  md: 'translate-x-6',
+  lg: 'translate-x-7',
+};
+
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    {
+      checked = false,
+      onChange,
+      size = 'md',
+      disabled = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const handleClick = () => {
+      onChange?.(!checked);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={handleClick}
+        className={cn(
+          'relative inline-flex rounded-full transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          sizeStyles[size],
+          checked ? 'bg-blue-600' : 'bg-gray-300',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            'absolute top-1/2 left-1 -translate-y-1/2 bg-white rounded-full transition-transform',
+            toggleSizeStyles[size],
+            checked && translateStyles[size],
+          )}
+        />
+      </button>
+    );
+  },
+);
+
+Toggle.displayName = 'Toggle';

package/dist/cjs/components/Toggle.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+}
+
+const sizeStyles = {
+  sm: 'w-10 h-6',
+  md: 'w-12 h-7',
+  lg: 'w-14 h-8',
+};
+
+const toggleSizeStyles = {
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+};
+
+const translateStyles = {
+  sm: 'translate-x-5',
+  md: 'translate-x-6',
+  lg: 'translate-x-7',
+};
+
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    {
+      checked = false,
+      onChange,
+      size = 'md',
+      disabled = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const handleClick = () => {
+      onChange?.(!checked);
+    };
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={handleClick}
+        className={cn(
+          'relative inline-flex rounded-full transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          sizeStyles[size],
+          checked ? 'bg-blue-600' : 'bg-gray-300',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            'absolute top-1/2 left-1 -translate-y-1/2 bg-white rounded-full transition-transform',
+            toggleSizeStyles[size],
+            checked && translateStyles[size],
+          )}
+        />
+      </button>
+    );
+  },
+);
+
+Toggle.displayName = 'Toggle';