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>
    )
  }
})

const FormExamples = define('FormExamples', {
  maxWidth: 600,
  margin: '0 auto'
})

const Button = define('FormButton', {
  base: 'button',

  padding: '12px 24px',
  fontSize: 16,
  fontWeight: 600,
  border: 'none',
  borderRadius: 8,
  cursor: 'pointer',
  transition: 'all 0.2s ease',
  background: '#3b82f6',
  color: 'white',

  states: {
    ':hover': {
      background: '#2563eb'
    },
    ':active': {
      transform: 'translateY(1px)'
    }
  },

  variants: {
    variant: {
      secondary: {
        background: '#6b7280',
        color: 'white',
        states: {
          ':hover': {
            background: '#4b5563'
          }
        }
      }
    }
  }
})

const ButtonGroup = define('FormButtonGroup', {
  display: 'flex',
  gap: 12,
  marginTop: 24
})

export const FormExamplesContent = () => (
  <FormExamples>
    <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>

    <ButtonGroup>
      <Button type="submit">Submit</Button>
      <Button type="reset" variant="secondary">Reset</Button>
    </ButtonGroup>
  </FormExamples>
)