import { ComponentRenderer } from '@rilaykit/core';

interface InputProps {
  label: string;
  type?: string;
  placeholder?: string;
}

export const Input: ComponentRenderer<InputProps> = ({
  id, value, onChange, onBlur, error, props
}) => (
  <div className="mb-4">
    <label htmlFor={id} className="block text-sm font-medium mb-1">
      {props.label}
    </label>
    <input
      id={id}
      type={props.type || 'text'}
      value={value || ''}
      onChange={(e) => onChange?.(e.target.value)}
      onBlur={onBlur}
      placeholder={props.placeholder}
      className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500"
    />
    {error && <p className="text-red-500 text-sm mt-1">{error[0].message}</p>}
  </div>
);

import { ril } from '@rilaykit/core';
import { Input } from '../components/Input';

export const rilay = ril.create()
  .addComponent('input', { renderer: Input });

import { required, email } from '@rilaykit/core';
import { rilay } from '../lib/rilay';

export const loginForm = rilay
  .form('login')
  .add({
    id: 'email',
    type: 'input',
    props: { label: 'Email', type: 'email' },
    validation: [required(), email()]
  })
  .add({
    id: 'password',
    type: 'input',
    props: { label: 'Password', type: 'password' },
    validation: [required()]
  });

import { Form, FormField } from '@rilaykit/forms';
import { loginForm } from '../forms/login';

export function LoginForm() {
  const handleSubmit = (data: { email: string; password: string }) => {
    console.log('Login:', data);
    // Handle login logic
  };

  return (
    <Form formConfig={loginForm} onSubmit={handleSubmit}>
      <FormField fieldId="email" />
      <FormField fieldId="password" />
      <button 
        type="submit" 
        className="w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700"
      >
        Sign In
      </button>
    </Form>
  );
}

import { LoginForm } from '../components/LoginForm';

export default function LoginPage() {
  return (
    <div className="max-w-md mx-auto mt-8">
      <h1 className="text-2xl font-bold mb-6">Sign In</h1>
      <LoginForm />
    </div>
  );
}

// Support different input types with one component
export const rilay = ril.create()
  .addComponent('input', { renderer: Input })
  .addComponent('textarea', { 
    renderer: Input,
    defaultProps: { multiline: true }
  })
  .addComponent('select', { renderer: SelectInput });

import { zodFieldValidator } from '@rilaykit/validation-adapters/zod';
import { z } from 'zod';

const form = rilay.form('user')
  .add({
    id: 'email',
    type: 'input',
    validation: [zodFieldValidator(z.string().email())]
  });

import { when } from '@rilaykit/core';

const form = rilay.form('account')
  .add({
    id: 'accountType',
    type: 'select',
    props: { options: [{ value: 'business', label: 'Business' }] }
  })
  .add({
    id: 'companyName',
    type: 'input',
    conditions: { visible: when('accountType').equals('business') }
  });

import { custom } from '@rilaykit/core';

const passwordMatch = (confirmPassword: string) => 
  custom((password: string) => {
    if (password !== confirmPassword) {
      throw new Error('Passwords do not match');
    }
    return password;
  });

// Usage
.add({
  id: 'confirmPassword',
  type: 'input',
  validation: [required(), passwordMatch(formData.password)]
})