@bluefly/openstandardagents 0.2.7 → 0.2.8

package/website/components/ui/Select.tsx

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

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

package/website/components/ui/Textarea.tsx

@@ -1,195 +0,0 @@
-'use client';
-
-import React, { TextareaHTMLAttributes, forwardRef, useState } from 'react';
-
-// Simple className merger utility
-function cn(...classes: (string | undefined | null | false)[]): string {
-  return classes.filter(Boolean).join(' ');
-}
-
-// ============================================================================
-// TEXTAREA COMPONENT
-// ============================================================================
-// Textarea with label, error states, character count, and accessibility
-// ============================================================================
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  error?: string;
-  helperText?: string;
-  fullWidth?: boolean;
-  showCharCount?: boolean;
-  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
-}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      className,
-      label,
-      error,
-      helperText,
-      fullWidth = false,
-      showCharCount = false,
-      resize = 'vertical',
-      id,
-      disabled,
-      required,
-      maxLength,
-      value,
-      defaultValue,
-      onChange,
-      ...props
-    },
-    ref
-  ) => {
-    // Track character count
-    const [charCount, setCharCount] = useState(
-      (value?.toString() || defaultValue?.toString() || '').length
-    );
-
-    // Generate ID if not provided
-    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
-    const errorId = `${textareaId}-error`;
-    const helperId = `${textareaId}-helper`;
-
-    // Handle change to update character count
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setCharCount(e.target.value.length);
-      onChange?.(e);
-    };
-
-    // Base textarea 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',
-      'min-h-[100px]',
-    ];
-
-    // Resize styles
-    const resizeStyles = {
-      none: 'resize-none',
-      vertical: 'resize-y',
-      horizontal: 'resize-x',
-      both: 'resize',
-    };
-
-    // 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={textareaId}
-            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>
-        )}
-
-        {/* Textarea */}
-        <textarea
-          ref={ref}
-          id={textareaId}
-          className={cn(
-            ...baseStyles,
-            resizeStyles[resize],
-            ...stateStyles,
-            className
-          )}
-          disabled={disabled}
-          required={required}
-          maxLength={maxLength}
-          value={value}
-          defaultValue={defaultValue}
-          onChange={handleChange}
-          aria-invalid={error ? 'true' : 'false'}
-          aria-describedby={cn(
-            error ? errorId : undefined,
-            helperText ? helperId : undefined
-          )}
-          {...props}
-        />
-
-        {/* Character count and helper text row */}
-        <div className="flex items-center justify-between mt-1">
-          <div className="flex-1">
-            {/* Error message */}
-            {error && (
-              <p
-                id={errorId}
-                className="text-sm text-error-600"
-                role="alert"
-              >
-                {error}
-              </p>
-            )}
-
-            {/* Helper text */}
-            {helperText && !error && (
-              <p
-                id={helperId}
-                className="text-sm text-gray-500"
-              >
-                {helperText}
-              </p>
-            )}
-          </div>
-
-          {/* Character count */}
-          {showCharCount && maxLength && (
-            <p
-              className={cn(
-                'text-sm',
-                'ml-2',
-                'flex-shrink-0',
-                charCount > maxLength ? 'text-error-600' : 'text-gray-500'
-              )}
-              aria-live="polite"
-            >
-              {charCount} / {maxLength}
-            </p>
-          )}
-        </div>
-      </div>
-    );
-  }
-);
-
-Textarea.displayName = 'Textarea';
-
-export { Textarea };

package/website/components/ui/index.ts

@@ -1,11 +0,0 @@
-export { Button, type ButtonProps } from './Button';
-export {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  type CardProps,
-} from './Card';
-export { Badge, type BadgeProps } from './Badge';