@bluefly/openstandardagents 0.2.4 → 0.2.7

package/website/components/ui/Checkbox.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(' ');
+}
+
+// ============================================================================
+// 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

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