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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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';

package/dist/esm/components/Button.js

@@ -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';