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

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'success' | 'warning' | 'danger' | 'info';
+  title?: string;
+  onClose?: () => void;
+  closeable?: boolean;
+}
+
+const variantStyles = {
+  success: {
+    container: 'bg-green-50 border-green-200 text-green-800',
+    icon: 'text-green-600',
+  },
+  warning: {
+    container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    icon: 'text-yellow-600',
+  },
+  danger: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: 'text-red-600',
+  },
+  info: {
+    container: 'bg-blue-50 border-blue-200 text-blue-800',
+    icon: 'text-blue-600',
+  },
+};
+
+const icons = {
+  success: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+    </svg>
+  ),
+  danger: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+    </svg>
+  ),
+  info: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+    </svg>
+  ),
+};
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = 'info',
+      title,
+      onClose,
+      closeable = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = variantStyles[variant];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border rounded-lg p-4 flex gap-3',
+          styles.container,
+          className,
+        )}
+        role="alert"
+        {...props}
+      >
+        <div className={cn('flex-shrink-0 mt-0.5', styles.icon)}>
+          {icons[variant]}
+        </div>
+        <div className="flex-1">
+          {title && <h3 className="font-semibold mb-1">{title}</h3>}
+          <div>{children}</div>
+        </div>
+        {closeable && (
+          <button
+            onClick={onClose}
+            className="ml-auto text-current opacity-70 hover:opacity-100 transition-opacity flex-shrink-0"
+            aria-label="Close alert"
+          >
+            <svg className="w-5 h-5" 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>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/dist/cjs/components/Alert.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'success' | 'warning' | 'danger' | 'info';
+  title?: string;
+  onClose?: () => void;
+  closeable?: boolean;
+}
+
+const variantStyles = {
+  success: {
+    container: 'bg-green-50 border-green-200 text-green-800',
+    icon: 'text-green-600',
+  },
+  warning: {
+    container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    icon: 'text-yellow-600',
+  },
+  danger: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: 'text-red-600',
+  },
+  info: {
+    container: 'bg-blue-50 border-blue-200 text-blue-800',
+    icon: 'text-blue-600',
+  },
+};
+
+const icons = {
+  success: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+    </svg>
+  ),
+  danger: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+    </svg>
+  ),
+  info: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+    </svg>
+  ),
+};
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = 'info',
+      title,
+      onClose,
+      closeable = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = variantStyles[variant];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border rounded-lg p-4 flex gap-3',
+          styles.container,
+          className,
+        )}
+        role="alert"
+        {...props}
+      >
+        <div className={cn('flex-shrink-0 mt-0.5', styles.icon)}>
+          {icons[variant]}
+        </div>
+        <div className="flex-1">
+          {title && <h3 className="font-semibold mb-1">{title}</h3>}
+          <div>{children}</div>
+        </div>
+        {closeable && (
+          <button
+            onClick={onClose}
+            className="ml-auto text-current opacity-70 hover:opacity-100 transition-opacity flex-shrink-0"
+            aria-label="Close alert"
+          >
+            <svg className="w-5 h-5" 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>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'circle' | 'square' | 'rounded';
+  initials?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+const sizeStyles = {
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-12 h-12',
+  xl: 'w-16 h-16',
+};
+
+const variantStyles = {
+  circle: 'rounded-full',
+  square: 'rounded-none',
+  rounded: 'rounded-md',
+};
+
+const statusColors = {
+  online: 'bg-green-500',
+  offline: 'bg-gray-400',
+  away: 'bg-yellow-500',
+  busy: 'bg-red-500',
+};
+
+export const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(
+  (
+    {
+      size = 'md',
+      variant = 'circle',
+      initials,
+      status,
+      className,
+      src,
+      alt = 'Avatar',
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className="relative inline-block">
+        {src ? (
+          <img
+            ref={ref}
+            src={src}
+            alt={alt}
+            className={cn(
+              'bg-gray-200 object-cover',
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            )}
+            {...props}
+          />
+        ) : (
+          <div
+            className={cn(
+              'bg-blue-600 text-white font-semibold flex items-center justify-center',
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            )}
+          >
+            {initials || alt.charAt(0).toUpperCase()}
+          </div>
+        )}
+        {status && (
+          <div
+            className={cn(
+              'absolute bottom-0 right-0 rounded-full border-2 border-white',
+              statusColors[status],
+              size === 'sm' && 'w-2 h-2',
+              size === 'md' && 'w-3 h-3',
+              size === 'lg' && 'w-3 h-3',
+              size === 'xl' && 'w-4 h-4',
+            )}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+Avatar.displayName = 'Avatar';

package/dist/cjs/components/Avatar.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'circle' | 'square' | 'rounded';
+  initials?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+const sizeStyles = {
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-12 h-12',
+  xl: 'w-16 h-16',
+};
+
+const variantStyles = {
+  circle: 'rounded-full',
+  square: 'rounded-none',
+  rounded: 'rounded-md',
+};
+
+const statusColors = {
+  online: 'bg-green-500',
+  offline: 'bg-gray-400',
+  away: 'bg-yellow-500',
+  busy: 'bg-red-500',
+};
+
+export const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(
+  (
+    {
+      size = 'md',
+      variant = 'circle',
+      initials,
+      status,
+      className,
+      src,
+      alt = 'Avatar',
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className="relative inline-block">
+        {src ? (
+          <img
+            ref={ref}
+            src={src}
+            alt={alt}
+            className={cn(
+              'bg-gray-200 object-cover',
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            )}
+            {...props}
+          />
+        ) : (
+          <div
+            className={cn(
+              'bg-blue-600 text-white font-semibold flex items-center justify-center',
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            )}
+          >
+            {initials || alt.charAt(0).toUpperCase()}
+          </div>
+        )}
+        {status && (
+          <div
+            className={cn(
+              'absolute bottom-0 right-0 rounded-full border-2 border-white',
+              statusColors[status],
+              size === 'sm' && 'w-2 h-2',
+              size === 'md' && 'w-3 h-3',
+              size === 'lg' && 'w-3 h-3',
+              size === 'xl' && 'w-4 h-4',
+            )}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+Avatar.displayName = 'Avatar';

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  dot?: boolean;
+}
+
+const variantStyles = {
+  primary: 'bg-blue-100 text-blue-800',
+  secondary: 'bg-gray-100 text-gray-800',
+  success: 'bg-green-100 text-green-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  danger: 'bg-red-100 text-red-800',
+  info: 'bg-cyan-100 text-cyan-800',
+};
+
+const sizeStyles = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-1.5 text-base',
+};
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      dot = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-full font-medium',
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        )}
+        {...props}
+      >
+        {dot && (
+          <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        )}
+        {children}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = 'Badge';

package/dist/cjs/components/Badge.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  dot?: boolean;
+}
+
+const variantStyles = {
+  primary: 'bg-blue-100 text-blue-800',
+  secondary: 'bg-gray-100 text-gray-800',
+  success: 'bg-green-100 text-green-800',
+  warning: 'bg-yellow-100 text-yellow-800',
+  danger: 'bg-red-100 text-red-800',
+  info: 'bg-cyan-100 text-cyan-800',
+};
+
+const sizeStyles = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-3 py-1 text-sm',
+  lg: 'px-4 py-1.5 text-base',
+};
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      dot = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center gap-1.5 rounded-full font-medium',
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        )}
+        {...props}
+      >
+        {dot && (
+          <span className="w-1.5 h-1.5 rounded-full bg-current" />
+        )}
+        {children}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = 'Badge';

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLNavElement> {
+  items: Array<{ label: string; href?: string }>;
+  separator?: string;
+}
+
+export const Breadcrumb = React.forwardRef<HTMLNavElement, BreadcrumbProps>(
+  (
+    {
+      items,
+      separator = '/',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <nav
+        ref={ref}
+        className={cn('', className)}
+        aria-label="Breadcrumb"
+        {...props}
+      >
+        <ol className="flex items-center gap-2">
+          {items.map((item, index) => (
+            <li key={index} className="flex items-center gap-2">
+              {item.href ? (
+                <a
+                  href={item.href}
+                  className="text-blue-600 hover:text-blue-700 hover:underline"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span className="text-gray-700">{item.label}</span>
+              )}
+              {index < items.length - 1 && (
+                <span className="text-gray-400">{separator}</span>
+              )}
+            </li>
+          ))}
+        </ol>
+      </nav>
+    );
+  },
+);
+
+Breadcrumb.displayName = 'Breadcrumb';

package/dist/cjs/components/Breadcrumb.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLNavElement> {
+  items: Array<{ label: string; href?: string }>;
+  separator?: string;
+}
+
+export const Breadcrumb = React.forwardRef<HTMLNavElement, BreadcrumbProps>(
+  (
+    {
+      items,
+      separator = '/',
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <nav
+        ref={ref}
+        className={cn('', className)}
+        aria-label="Breadcrumb"
+        {...props}
+      >
+        <ol className="flex items-center gap-2">
+          {items.map((item, index) => (
+            <li key={index} className="flex items-center gap-2">
+              {item.href ? (
+                <a
+                  href={item.href}
+                  className="text-blue-600 hover:text-blue-700 hover:underline"
+                >
+                  {item.label}
+                </a>
+              ) : (
+                <span className="text-gray-700">{item.label}</span>
+              )}
+              {index < items.length - 1 && (
+                <span className="text-gray-400">{separator}</span>
+              )}
+            </li>
+          ))}
+        </ol>
+      </nav>
+    );
+  },
+);
+
+Breadcrumb.displayName = 'Breadcrumb';

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+}
+
+const variantStyles = {
+  primary: 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800',
+  secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 active:bg-gray-400',
+  danger: 'bg-red-600 text-white hover:bg-red-700 active:bg-red-800',
+  ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 border border-gray-300',
+};
+
+const sizeStyles = {
+  sm: 'px-3 py-1.5 text-sm rounded-md',
+  md: 'px-4 py-2 text-base rounded-md',
+  lg: 'px-6 py-3 text-lg rounded-lg',
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      fullWidth = false,
+      loading = false,
+      icon,
+      disabled,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center font-medium transition-colors duration-200',
+          'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          variantStyles[variant],
+          sizeStyles[size],
+          fullWidth && 'w-full',
+          className,
+        )}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="animate-spin -ml-1 mr-3 h-5 w-5"
+            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>
+        )}
+        {icon && !loading && <span className="mr-2">{icon}</span>}
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';