forge/examples/form.tsx

import { define } from '../src'
import { ExampleSection } from './ssr/helpers'

const Input = define('Input', {
  base: 'input',

  padding: '12px 16px',
  fontSize: 16,
  border: '2px solid #e5e7eb',
  borderRadius: 8,
  background: 'white',
  color: '#111827',
  transition: 'all 0.2s ease',
  width: '100%',
  boxSizing: 'border-box',

  states: {
    ':focus': {
      outline: 'none',
      borderColor: '#3b82f6',
      boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
    },
    ':disabled': {
      background: '#f3f4f6',
      color: '#9ca3af',
      cursor: 'not-allowed'
    }
  },

  variants: {
    status: {
      error: {
        borderColor: '#ef4444',
        states: {
          ':focus': {
            borderColor: '#ef4444',
            boxShadow: '0 0 0 3px rgba(239, 68, 68, 0.1)'
          }
        }
      },
      success: {
        borderColor: '#10b981',
        states: {
          ':focus': {
            borderColor: '#10b981',
            boxShadow: '0 0 0 3px rgba(16, 185, 129, 0.1)'
          }
        }
      }
    }
  }
})

const Textarea = define('Textarea', {
  base: 'textarea',

  padding: '12px 16px',
  fontSize: 16,
  border: '2px solid #e5e7eb',
  borderRadius: 8,
  background: 'white',
  color: '#111827',
  transition: 'all 0.2s ease',
  width: '100%',
  minHeight: 120,
  boxSizing: 'border-box',
  fontFamily: 'inherit',
  resize: 'vertical',

  states: {
    ':focus': {
      outline: 'none',
      borderColor: '#3b82f6',
      boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
    }
  }
})

const FormGroup = define('FormGroup', {
  marginBottom: 24,

  parts: {
    Label: {
      base: 'label',
      display: 'block',
      fontSize: 14,
      fontWeight: 600,
      color: '#374151',
      marginBottom: 8
    },
    Helper: {
      fontSize: 13,
      color: '#6b7280',
      marginTop: 6
    },
    Error: {
      fontSize: 13,
      color: '#ef4444',
      marginTop: 6
    }
  },

  render({ props, parts: { Root, Label, Helper, Error } }) {
    return (
      <Root>
        {props.label && <Label>{props.label}</Label>}
        {props.children}
        {props.helper && <Helper>{props.helper}</Helper>}
        {props.error && <Error>{props.error}</Error>}
      </Root>
    )
  }
})

const Checkbox = define('Checkbox', {
  parts: {
    Input: {
      base: 'input[type=checkbox]',
      width: 20,
      height: 20,
      cursor: 'pointer'
    },
    Label: {
      base: 'label',
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      cursor: 'pointer',
      fontSize: 16,
      color: '#374151',

      states: {
        ':hover': {
          color: '#111827'
        }
      },

      selectors: {
        '@Input:disabled + &': {
          cursor: 'not-allowed',
          color: '#9ca3af'
        }
      }
    }
  },

  render({ props, parts: { Root, Input, Label } }) {
    return (
      <Root>
        <Label>
          <Input id={props.id} checked={props.checked} disabled={props.disabled} />
          {props.label}
        </Label>
      </Root>
    )
  }
})

export const FormExamplesContent = () => (
  <>
    <ExampleSection title="Text Inputs">
      <FormGroup label="Email" helper="We'll never share your email">
        <Input type="email" placeholder="you@example.com" />
      </FormGroup>

      <FormGroup label="Password">
        <Input type="password" placeholder="Enter your password" />
      </FormGroup>

      <FormGroup label="Disabled Input">
        <Input value="This field is disabled" disabled />
      </FormGroup>
    </ExampleSection>

    <ExampleSection title="Validation States">
      <FormGroup label="Valid Email" helper="Looks good!">
        <Input status="success" type="email" value="user@example.com" />
      </FormGroup>

      <FormGroup label="Invalid Email" error="Please enter a valid email address">
        <Input status="error" type="email" value="not-an-email" />
      </FormGroup>
    </ExampleSection>

    <ExampleSection title="Textarea">
      <FormGroup label="Bio" helper="Tell us about yourself">
        <Textarea placeholder="Write something interesting..." />
      </FormGroup>
    </ExampleSection>

    <ExampleSection title="Checkboxes">
      <FormGroup>
        <Checkbox id="cb1" label="I agree to the terms and conditions" checked />
        <Checkbox id="cb2" label="Subscribe to newsletter" />
        <Checkbox id="cb3" label="This option is disabled" disabled />
      </FormGroup>
    </ExampleSection>
  </>
)