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

package/dist/cjs/components/Table.js

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

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultTab?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ defaultTab, onTabChange, children, className, ...props }, ref) => {
+    const [activeTab, setActiveTab] = React.useState(defaultTab);
+
+    const handleTabChange = (tabId: string) => {
+      setActiveTab(tabId);
+      onTabChange?.(tabId);
+    };
+
+    return (
+      <div ref={ref} className={cn('', className)} {...props}>
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as React.ReactElement<any>, {
+              activeTab,
+              onTabChange: handleTabChange,
+            });
+          }
+          return child;
+        })}
+      </div>
+    );
+  },
+);
+
+Tabs.displayName = 'Tabs';
+
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex border-b border-gray-200 gap-1', className)}
+      role="tablist"
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+TabList.displayName = 'TabList';
+
+export interface TabTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  activeTab?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+export const TabTrigger = React.forwardRef<HTMLButtonElement, TabTriggerProps>(
+  ({ value, activeTab, onTabChange, className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        'px-4 py-2 font-medium border-b-2 transition-colors',
+        activeTab === value
+          ? 'border-blue-600 text-blue-600'
+          : 'border-transparent text-gray-600 hover:text-gray-900',
+        className,
+      )}
+      onClick={() => onTabChange?.(value)}
+      role="tab"
+      aria-selected={activeTab === value}
+      {...props}
+    />
+  ),
+);
+
+TabTrigger.displayName = 'TabTrigger';
+
+export interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  activeTab?: string;
+}
+
+export const TabContent = React.forwardRef<HTMLDivElement, TabContentProps>(
+  ({ value, activeTab, className, children, ...props }, ref) => {
+    if (activeTab !== value) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn('py-4', className)}
+        role="tabpanel"
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+TabContent.displayName = 'TabContent';

package/dist/cjs/components/Tabs.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultTab?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ defaultTab, onTabChange, children, className, ...props }, ref) => {
+    const [activeTab, setActiveTab] = React.useState(defaultTab);
+
+    const handleTabChange = (tabId: string) => {
+      setActiveTab(tabId);
+      onTabChange?.(tabId);
+    };
+
+    return (
+      <div ref={ref} className={cn('', className)} {...props}>
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as React.ReactElement<any>, {
+              activeTab,
+              onTabChange: handleTabChange,
+            });
+          }
+          return child;
+        })}
+      </div>
+    );
+  },
+);
+
+Tabs.displayName = 'Tabs';
+
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const TabList = React.forwardRef<HTMLDivElement, TabListProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex border-b border-gray-200 gap-1', className)}
+      role="tablist"
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+
+TabList.displayName = 'TabList';
+
+export interface TabTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  activeTab?: string;
+  onTabChange?: (tabId: string) => void;
+}
+
+export const TabTrigger = React.forwardRef<HTMLButtonElement, TabTriggerProps>(
+  ({ value, activeTab, onTabChange, className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        'px-4 py-2 font-medium border-b-2 transition-colors',
+        activeTab === value
+          ? 'border-blue-600 text-blue-600'
+          : 'border-transparent text-gray-600 hover:text-gray-900',
+        className,
+      )}
+      onClick={() => onTabChange?.(value)}
+      role="tab"
+      aria-selected={activeTab === value}
+      {...props}
+    />
+  ),
+);
+
+TabTrigger.displayName = 'TabTrigger';
+
+export interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  activeTab?: string;
+}
+
+export const TabContent = React.forwardRef<HTMLDivElement, TabContentProps>(
+  ({ value, activeTab, className, children, ...props }, ref) => {
+    if (activeTab !== value) return null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn('py-4', className)}
+        role="tabpanel"
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+TabContent.displayName = 'TabContent';

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TagProps {
+  label: string;
+  onRemove?: () => void;
+  variant?: 'default' | 'outlined' | 'solid';
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  size?: 'sm' | 'md' | 'lg';
+  closeable?: boolean;
+  className?: string;
+}
+
+export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  (
+    {
+      label,
+      onRemove,
+      variant = 'default',
+      color = 'primary',
+      size = 'md',
+      closeable = true,
+      className,
+    },
+    ref
+  ) => {
+    const sizeClasses = {
+      sm: 'text-xs px-2 py-1',
+      md: 'text-sm px-2.5 py-1.5',
+      lg: 'text-base px-3 py-2',
+    };
+
+    const colorMap = {
+      primary: { bg: 'bg-blue-100', text: 'text-blue-700', border: 'border-blue-300' },
+      secondary: { bg: 'bg-purple-100', text: 'text-purple-700', border: 'border-purple-300' },
+      success: { bg: 'bg-green-100', text: 'text-green-700', border: 'border-green-300' },
+      warning: { bg: 'bg-yellow-100', text: 'text-yellow-700', border: 'border-yellow-300' },
+      error: { bg: 'bg-red-100', text: 'text-red-700', border: 'border-red-300' },
+    };
+
+    const colors = colorMap[color];
+
+    const variantClasses = {
+      default: cn(colors.bg, colors.text),
+      outlined: cn('border', colors.border, colors.text),
+      solid: cn('bg-' + color + '-600 text-white'),
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center gap-1 rounded-md font-medium',
+          sizeClasses[size],
+          variantClasses[variant],
+          className
+        )}
+      >
+        {label}
+        {closeable && onRemove && (
+          <button
+            onClick={onRemove}
+            className="hover:opacity-70 transition-opacity ml-0.5"
+            aria-label={`Remove ${label}`}
+          >
+            ×
+          </button>
+        )}
+      </span>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';

package/dist/cjs/components/Tag.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TagProps {
+  label: string;
+  onRemove?: () => void;
+  variant?: 'default' | 'outlined' | 'solid';
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  size?: 'sm' | 'md' | 'lg';
+  closeable?: boolean;
+  className?: string;
+}
+
+export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  (
+    {
+      label,
+      onRemove,
+      variant = 'default',
+      color = 'primary',
+      size = 'md',
+      closeable = true,
+      className,
+    },
+    ref
+  ) => {
+    const sizeClasses = {
+      sm: 'text-xs px-2 py-1',
+      md: 'text-sm px-2.5 py-1.5',
+      lg: 'text-base px-3 py-2',
+    };
+
+    const colorMap = {
+      primary: { bg: 'bg-blue-100', text: 'text-blue-700', border: 'border-blue-300' },
+      secondary: { bg: 'bg-purple-100', text: 'text-purple-700', border: 'border-purple-300' },
+      success: { bg: 'bg-green-100', text: 'text-green-700', border: 'border-green-300' },
+      warning: { bg: 'bg-yellow-100', text: 'text-yellow-700', border: 'border-yellow-300' },
+      error: { bg: 'bg-red-100', text: 'text-red-700', border: 'border-red-300' },
+    };
+
+    const colors = colorMap[color];
+
+    const variantClasses = {
+      default: cn(colors.bg, colors.text),
+      outlined: cn('border', colors.border, colors.text),
+      solid: cn('bg-' + color + '-600 text-white'),
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center gap-1 rounded-md font-medium',
+          sizeClasses[size],
+          variantClasses[variant],
+          className
+        )}
+      >
+        {label}
+        {closeable && onRemove && (
+          <button
+            onClick={onRemove}
+            className="hover:opacity-70 transition-opacity ml-0.5"
+            aria-label={`Remove ${label}`}
+          >
+            ×
+          </button>
+        )}
+      </span>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  helpText?: string;
+  fullWidth?: boolean;
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+}
+
+const resizeStyles = {
+  none: 'resize-none',
+  vertical: 'resize-y',
+  horizontal: 'resize-x',
+  both: 'resize',
+};
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      error = false,
+      errorMessage,
+      helpText,
+      fullWidth = false,
+      resize = 'vertical',
+      id,
+      className,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className={cn(fullWidth && 'w-full')}>
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="block text-sm font-medium text-gray-700 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          className={cn(
+            'w-full px-3 py-2 border rounded-md text-base font-family-inherit',
+            'focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all duration-200',
+            'disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed',
+            error
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:ring-blue-500',
+            resizeStyles[resize],
+            className,
+          )}
+          disabled={disabled}
+          {...props}
+        />
+        {error && errorMessage && (
+          <p className="mt-1 text-sm text-red-600">{errorMessage}</p>
+        )}
+        {!error && helpText && (
+          <p className="mt-1 text-sm text-gray-500">{helpText}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';

package/dist/cjs/components/Textarea.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  helpText?: string;
+  fullWidth?: boolean;
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+}
+
+const resizeStyles = {
+  none: 'resize-none',
+  vertical: 'resize-y',
+  horizontal: 'resize-x',
+  both: 'resize',
+};
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      label,
+      error = false,
+      errorMessage,
+      helpText,
+      fullWidth = false,
+      resize = 'vertical',
+      id,
+      className,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className={cn(fullWidth && 'w-full')}>
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="block text-sm font-medium text-gray-700 mb-1.5"
+          >
+            {label}
+          </label>
+        )}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          className={cn(
+            'w-full px-3 py-2 border rounded-md text-base font-family-inherit',
+            'focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all duration-200',
+            'disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed',
+            error
+              ? 'border-red-500 focus:ring-red-500'
+              : 'border-gray-300 focus:ring-blue-500',
+            resizeStyles[resize],
+            className,
+          )}
+          disabled={disabled}
+          {...props}
+        />
+        {error && errorMessage && (
+          <p className="mt-1 text-sm text-red-600">{errorMessage}</p>
+        )}
+        {!error && helpText && (
+          <p className="mt-1 text-sm text-gray-500">{helpText}</p>
+        )}
+      </div>
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';