Reeca Design System Components

<Typography variant="display0">Display 0 Text</Typography>

<Typography variant="display1">Display 1 Text</Typography>

<Typography variant="display2">Display 2 Text</Typography>

<Typography variant="heading1">Heading 1 Text</Typography>

<Typography variant="body1">Body 1 Text</Typography>

<Typography variant="caption1">Caption 1 Text</Typography>

<Button variant="primary">Primary Button</Button>

<Button variant="secondary">Secondary Button</Button>

<Button variant="plain">Plain Button</Button>

<Button variant="text">Text Button</Button>

<Button size="large">Large Button</Button>

<Button size="small">Small Button</Button>

<Button size="mini">Mini Button</Button>

<Button disabled>Disabled Button</Button>

<Button fullWidth>Full Width Button</Button>

<TextField label="이메일" />

<TextField 
  label="검색" 
  startElem={<SearchIcon />}
  endElem={<ChevronDownIcon />}
/>

<TextField 
  label="이메일" 
  error
  errorMessage="올바른 이메일 형식을 입력해 주세요."
/>

<TextField label="이메일" disabled />

<TextField 
  label="메시지" 
  maxLength={100}
  showCounter
  helperText="메시지를 입력해주세요"
/>

<TextArea 
  label="추가 요청 사항"
/>

<TextArea 
  label="추가 요청 사항" 
  placeholder="ex) 이력서에 있는 수상경력을 강조해서 작성해줘"
/>

<TextArea 
  label="설명" 
  maxLength={500}
  showCounter
  helperText="자세한 내용을 입력해주세요"
/>

<TextArea 
  label="추가 요청 사항" 
  error
  errorMessage="필수 입력 항목입니다."
/>

<TextArea label="추가 요청 사항" disabled />

<TextArea 
  label="긴 내용" 

  maxRows={6} 
/>

<RadioGroup value={value} onChange={setValue}>
  <Radio value="option1" label="옵션 1" />
  <Radio value="option2" label="옵션 2" />
  <Radio value="option3" label="옵션 3" />
</RadioGroup>

<RadioGroup disabled>
  <Radio value="option1" label="비활성화된 옵션 1" />
  <Radio value="option2" label="비활성화된 옵션 2" />
</RadioGroup>