@bluefly/openstandardagents 0.2.5-RC → 0.2.7

package/website/components/ui/Input.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+import React, { InputHTMLAttributes, forwardRef } from 'react';
+
+// Simple className merger utility
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// ============================================================================
+// INPUT COMPONENT
+// ============================================================================
+// Form input with label, error states, helper text, and accessibility
+// ============================================================================
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      label,
+      error,
+      helperText,
+      leftIcon,
+      rightIcon,
+      fullWidth = false,
+      id,
+      disabled,
+      required,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate ID if not provided
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    const errorId = `${inputId}-error`;
+    const helperId = `${inputId}-helper`;
+
+    // Base input styles
+    const baseStyles = [
+      'block',
+      'w-full',
+      'rounded-lg',
+      'border',
+      'px-4',
+      'py-2',
+      'text-base',
+      'transition-colors',
+      'duration-200',
+      'focus:outline-none',
+      'focus:ring-2',
+      'focus:ring-offset-1',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed',
+      'disabled:bg-gray-100',
+    ];
+
+    // State-based styles
+    const stateStyles = error
+      ? [
+          'border-error-500',
+          'text-error-900',
+          'focus:border-error-500',
+          'focus:ring-error-500',
+        ]
+      : [
+          'border-gray-300',
+          'text-gray-900',
+          'focus:border-primary-500',
+          'focus:ring-primary-500',
+        ];
+
+    // Icon padding adjustments
+    const iconPaddingStyles = [];
+    if (leftIcon) iconPaddingStyles.push('pl-10');
+    if (rightIcon) iconPaddingStyles.push('pr-10');
+
+    return (
+      <div className={cn(fullWidth ? 'w-full' : 'w-auto')}>
+        {/* Label */}
+        {label && (
+          <label
+            htmlFor={inputId}
+            className={cn(
+              'block',
+              'text-sm',
+              'font-medium',
+              'mb-1',
+              error ? 'text-error-700' : 'text-gray-700'
+            )}
+          >
+            {label}
+            {required && <span className="text-error-500 ml-1">*</span>}
+          </label>
+        )}
+
+        {/* Input wrapper */}
+        <div className="relative">
+          {/* Left icon */}
+          {leftIcon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+              {leftIcon}
+            </div>
+          )}
+
+          {/* Input */}
+          <input
+            ref={ref}
+            id={inputId}
+            className={cn(
+              ...baseStyles,
+              ...stateStyles,
+              ...iconPaddingStyles,
+              className
+            )}
+            disabled={disabled}
+            required={required}
+            aria-invalid={error ? 'true' : 'false'}
+            aria-describedby={cn(
+              error ? errorId : undefined,
+              helperText ? helperId : undefined
+            )}
+            {...props}
+          />
+
+          {/* Right icon */}
+          {rightIcon && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
+              {rightIcon}
+            </div>
+          )}
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <p
+            id={errorId}
+            className="mt-1 text-sm text-error-600"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+
+        {/* Helper text */}
+        {helperText && !error && (
+          <p
+            id={helperId}
+            className="mt-1 text-sm text-gray-500"
+          >
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };

package/website/components/ui/Radio.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import React, { InputHTMLAttributes, forwardRef } from 'react';
+
+// Simple className merger utility
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// ============================================================================
+// RADIO COMPONENT
+// ============================================================================
+// Radio button with label, error states, and accessibility
+// ============================================================================
+
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+}
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      className,
+      label,
+      error,
+      helperText,
+      id,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate ID if not provided
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+    const errorId = `${radioId}-error`;
+    const helperId = `${radioId}-helper`;
+
+    // Base radio styles
+    const baseStyles = [
+      'w-5',
+      'h-5',
+      'rounded-full',
+      'border-2',
+      'transition-all',
+      'duration-200',
+      'cursor-pointer',
+      'focus:outline-none',
+      'focus:ring-2',
+      'focus:ring-offset-2',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed',
+    ];
+
+    // State-based styles
+    const stateStyles = error
+      ? [
+          'border-error-500',
+          'text-error-600',
+          'focus:ring-error-500',
+        ]
+      : [
+          'border-gray-300',
+          'text-primary-600',
+          'focus:ring-primary-500',
+          'checked:bg-primary-600',
+          'checked:border-primary-600',
+        ];
+
+    return (
+      <div>
+        <div className="flex items-start gap-3">
+          {/* Radio */}
+          <input
+            ref={ref}
+            type="radio"
+            id={radioId}
+            className={cn(
+              ...baseStyles,
+              ...stateStyles,
+              className
+            )}
+            disabled={disabled}
+            aria-invalid={error ? 'true' : 'false'}
+            aria-describedby={cn(
+              error ? errorId : undefined,
+              helperText ? helperId : undefined
+            )}
+            {...props}
+          />
+
+          {/* Label and helper text */}
+          {(label || helperText) && (
+            <div className="flex-1">
+              {label && (
+                <label
+                  htmlFor={radioId}
+                  className={cn(
+                    'block',
+                    'text-sm',
+                    'font-medium',
+                    'cursor-pointer',
+                    error ? 'text-error-700' : 'text-gray-700',
+                    disabled && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  {label}
+                </label>
+              )}
+
+              {helperText && !error && (
+                <p
+                  id={helperId}
+                  className="mt-0.5 text-sm text-gray-500"
+                >
+                  {helperText}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <p
+            id={errorId}
+            className="mt-1 ml-8 text-sm text-error-600"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';
+
+export { Radio };

package/website/components/ui/Select.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import React, { SelectHTMLAttributes, forwardRef } from 'react';
+
+// Simple className merger utility
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// ============================================================================
+// SELECT COMPONENT
+// ============================================================================
+// Form select with label, error states, and accessibility
+// ============================================================================
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  fullWidth?: boolean;
+  options?: Array<{ value: string; label: string; disabled?: boolean }>;
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      className,
+      label,
+      error,
+      helperText,
+      fullWidth = false,
+      options,
+      id,
+      disabled,
+      required,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Generate ID if not provided
+    const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+    const errorId = `${selectId}-error`;
+    const helperId = `${selectId}-helper`;
+
+    // Base select styles
+    const baseStyles = [
+      'block',
+      'w-full',
+      'rounded-lg',
+      'border',
+      'px-4',
+      'py-2',
+      'pr-10',
+      'text-base',
+      'transition-colors',
+      'duration-200',
+      'focus:outline-none',
+      'focus:ring-2',
+      'focus:ring-offset-1',
+      'disabled:opacity-50',
+      'disabled:cursor-not-allowed',
+      'disabled:bg-gray-100',
+      'appearance-none',
+      'bg-white',
+      'cursor-pointer',
+    ];
+
+    // State-based styles
+    const stateStyles = error
+      ? [
+          'border-error-500',
+          'text-error-900',
+          'focus:border-error-500',
+          'focus:ring-error-500',
+        ]
+      : [
+          'border-gray-300',
+          'text-gray-900',
+          'focus:border-primary-500',
+          'focus:ring-primary-500',
+        ];
+
+    return (
+      <div className={cn(fullWidth ? 'w-full' : 'w-auto')}>
+        {/* Label */}
+        {label && (
+          <label
+            htmlFor={selectId}
+            className={cn(
+              'block',
+              'text-sm',
+              'font-medium',
+              'mb-1',
+              error ? 'text-error-700' : 'text-gray-700'
+            )}
+          >
+            {label}
+            {required && <span className="text-error-500 ml-1">*</span>}
+          </label>
+        )}
+
+        {/* Select wrapper */}
+        <div className="relative">
+          {/* Select */}
+          <select
+            ref={ref}
+            id={selectId}
+            className={cn(
+              ...baseStyles,
+              ...stateStyles,
+              className
+            )}
+            disabled={disabled}
+            required={required}
+            aria-invalid={error ? 'true' : 'false'}
+            aria-describedby={cn(
+              error ? errorId : undefined,
+              helperText ? helperId : undefined
+            )}
+            {...props}
+          >
+            {options
+              ? options.map((option) => (
+                  <option
+                    key={option.value}
+                    value={option.value}
+                    disabled={option.disabled}
+                  >
+                    {option.label}
+                  </option>
+                ))
+              : children}
+          </select>
+
+          {/* Dropdown icon */}
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-400">
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </div>
+        </div>
+
+        {/* Error message */}
+        {error && (
+          <p
+            id={errorId}
+            className="mt-1 text-sm text-error-600"
+            role="alert"
+          >
+            {error}
+          </p>
+        )}
+
+        {/* Helper text */}
+        {helperText && !error && (
+          <p
+            id={helperId}
+            className="mt-1 text-sm text-gray-500"
+          >
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+export { Select };

package/website/components/ui/Tag.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import React, { HTMLAttributes, forwardRef } from 'react';
+
+// Simple className merger utility
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// ============================================================================
+// TAG COMPONENT
+// ============================================================================
+// Tag/chip component with removable option and color variants
+// ============================================================================
+
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'primary' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+  removable?: boolean;
+  onRemove?: () => void;
+}
+
+const Tag = forwardRef<HTMLSpanElement, TagProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      size = 'md',
+      removable = false,
+      onRemove,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    // Base styles
+    const baseStyles = [
+      'inline-flex',
+      'items-center',
+      'gap-1.5',
+      'font-medium',
+      'rounded-md',
+      'transition-colors',
+      'duration-200',
+    ];
+
+    // Variant styles
+    const variantStyles = {
+      default: [
+        'bg-gray-200',
+        'text-gray-800',
+        'hover:bg-gray-300',
+      ],
+      success: [
+        'bg-success-200',
+        'text-success-900',
+        'hover:bg-success-300',
+      ],
+      warning: [
+        'bg-warning-200',
+        'text-warning-900',
+        'hover:bg-warning-300',
+      ],
+      error: [
+        'bg-error-200',
+        'text-error-900',
+        'hover:bg-error-300',
+      ],
+      info: [
+        'bg-info-200',
+        'text-info-900',
+        'hover:bg-info-300',
+      ],
+      primary: [
+        'bg-primary-200',
+        'text-primary-900',
+        'hover:bg-primary-300',
+      ],
+      secondary: [
+        'bg-secondary-200',
+        'text-secondary-900',
+        'hover:bg-secondary-300',
+      ],
+    };
+
+    // Size styles
+    const sizeStyles = {
+      sm: ['text-xs', 'px-2', 'py-0.5'],
+      md: ['text-sm', 'px-2.5', 'py-1'],
+      lg: ['text-base', 'px-3', 'py-1.5'],
+    };
+
+    // Remove button colors
+    const removeButtonColors = {
+      default: 'hover:bg-gray-400',
+      success: 'hover:bg-success-400',
+      warning: 'hover:bg-warning-400',
+      error: 'hover:bg-error-400',
+      info: 'hover:bg-info-400',
+      primary: 'hover:bg-primary-400',
+      secondary: 'hover:bg-secondary-400',
+    };
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          ...baseStyles,
+          ...variantStyles[variant],
+          ...sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {children}
+        
+        {removable && onRemove && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className={cn(
+              'flex-shrink-0',
+              'rounded-full',
+              'p-0.5',
+              'transition-colors',
+              'duration-200',
+              'focus:outline-none',
+              'focus:ring-2',
+              'focus:ring-offset-1',
+              'focus:ring-current',
+              removeButtonColors[variant]
+            )}
+            aria-label="Remove tag"
+          >
+            <svg
+              className="w-3 h-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        )}
+      </span>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';
+
+export { Tag };