@bluefly/openstandardagents 0.2.7 → 0.2.8

package/website/components/ui/Card.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-
-type CardVariant = 'default' | 'featured' | 'interactive' | 'ghost';
-type CardPadding = 'sm' | 'md' | 'lg';
-type CardElevation = 0 | 1 | 2 | 3;
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Card content */
-  children: React.ReactNode;
-  /** Visual variant */
-  variant?: CardVariant;
-  /** Padding size */
-  padding?: CardPadding;
-  /** Shadow elevation level */
-  elevation?: CardElevation;
-  /** Enable hover effects */
-  hover?: boolean;
-  /** Make card clickable */
-  onClick?: () => void;
-}
-
-const variantClasses: Record<CardVariant, string> = {
-  default: 'bg-white border border-gray-200 rounded-xl',
-  featured:
-    'bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-primary/20 rounded-xl',
-  interactive:
-    'bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-primary',
-  ghost: 'bg-transparent border-none',
-};
-
-const paddingClasses: Record<CardPadding, string> = {
-  sm: 'p-4',
-  md: 'p-6',
-  lg: 'p-8',
-};
-
-const elevationClasses: Record<CardElevation, string> = {
-  0: 'shadow-none',
-  1: 'shadow-sm',
-  2: 'shadow-md',
-  3: 'shadow-lg',
-};
-
-const hoverClasses = 'hover:shadow-xl hover:-translate-y-1 transition-all duration-300';
-
-export const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  (
-    {
-      className = '',
-      variant = 'default',
-      padding = 'md',
-      elevation = 1,
-      hover = false,
-      children,
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    const classes = [
-      variantClasses[variant],
-      paddingClasses[padding],
-      elevationClasses[elevation],
-      hover || onClick ? hoverClasses : '',
-      onClick ? 'cursor-pointer' : '',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <div
-        ref={ref}
-        className={classes}
-        onClick={onClick}
-        role={onClick ? 'button' : undefined}
-        tabIndex={onClick ? 0 : undefined}
-        onKeyDown={
-          onClick
-            ? (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  onClick();
-                }
-              }
-            : undefined
-        }
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-Card.displayName = 'Card';
-
-// Card sub-components for better composition
-export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className = '',
-  children,
-  ...props
-}) => {
-  return (
-    <div className={`mb-4 ${className}`} {...props}>
-      {children}
-    </div>
-  );
-};
-
-CardHeader.displayName = 'CardHeader';
-
-export const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  className = '',
-  children,
-  ...props
-}) => {
-  return (
-    <h3 className={`text-2xl font-semibold text-gray-900 ${className}`} {...props}>
-      {children}
-    </h3>
-  );
-};
-
-CardTitle.displayName = 'CardTitle';
-
-export const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
-  className = '',
-  children,
-  ...props
-}) => {
-  return (
-    <p className={`text-gray-600 ${className}`} {...props}>
-      {children}
-    </p>
-  );
-};
-
-CardDescription.displayName = 'CardDescription';
-
-export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className = '',
-  children,
-  ...props
-}) => {
-  return (
-    <div className={className} {...props}>
-      {children}
-    </div>
-  );
-};
-
-CardContent.displayName = 'CardContent';
-
-export const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  className = '',
-  children,
-  ...props
-}) => {
-  return (
-    <div className={`mt-4 pt-4 border-t border-gray-200 ${className}`} {...props}>
-      {children}
-    </div>
-  );
-};
-
-CardFooter.displayName = 'CardFooter';

package/website/components/ui/Checkbox.tsx

@@ -1,141 +0,0 @@
-'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(' ');
-}
-
-// ============================================================================
-// CHECKBOX COMPONENT
-// ============================================================================
-// Checkbox with label, error states, and accessibility
-// ============================================================================
-
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-}
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (
-    {
-      className,
-      label,
-      error,
-      helperText,
-      id,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    // Generate ID if not provided
-    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-    const errorId = `${checkboxId}-error`;
-    const helperId = `${checkboxId}-helper`;
-
-    // Base checkbox styles
-    const baseStyles = [
-      'w-5',
-      'h-5',
-      'rounded',
-      '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">
-          {/* Checkbox */}
-          <input
-            ref={ref}
-            type="checkbox"
-            id={checkboxId}
-            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={checkboxId}
-                  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>
-    );
-  }
-);
-
-Checkbox.displayName = 'Checkbox';
-
-export { Checkbox };

package/website/components/ui/Input.tsx

@@ -1,169 +0,0 @@
-'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

@@ -1,141 +0,0 @@
-'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 };