Field experimental

<script lang="ts">
  import * as Field from '@odbd/svelte/field'
  import * as Select from '@odbd/svelte/select'
  import { createListCollection } from '@odbd/svelte/select'

  const roles = createListCollection({
    items: [
      { label: '디자이너', value: 'designer' },
      { label: '엔지니어', value: 'engineer' },
      { label: 'PM', value: 'pm' },
    ],
    itemToString: (item) => item.label,
    itemToValue: (item) => item.value,
  })
</script>

<div class="field-demo">
  <Field.Root required>
    <Field.Label>이름 <Field.RequiredIndicator /></Field.Label>
    <Field.Input placeholder="이름을 입력하세요" />
    <Field.HelperText>표시될 이름을 입력하세요.</Field.HelperText>
  </Field.Root>

  <Field.Root invalid>
    <Field.Label>이메일</Field.Label>
    <Field.Input placeholder="[email protected]" />
    <Field.ErrorText>올바른 이메일 형식을 입력하세요.</Field.ErrorText>
  </Field.Root>

  <!-- Field 안에서도 native select 대신 디자인 시스템 Select를 그대로 결합한다 -->
  <Field.Root>
    <Select.Root collection={roles}>
      <Select.Label>역할</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="역할을 선택하세요" />
          <Select.Indicator>▾</Select.Indicator>
        </Select.Trigger>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          {#each roles.items as item}
            <Select.Item {item}>
              <Select.ItemText>{item.label}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          {/each}
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
    <Field.HelperText>팀에서 맡은 역할을 선택하세요.</Field.HelperText>
  </Field.Root>

  <Field.Root>
    <Field.Label>소개</Field.Label>
    <Field.Textarea rows={3} placeholder="자신을 소개하세요" />
    <Field.HelperText>한 문장으로 간단히 작성하세요.</Field.HelperText>
  </Field.Root>
</div>

<style>
  .field-demo {
    display: flex;
    width: 100%;
    max-width: 24rem;
    flex-direction: column;
    gap: var(--odbd-space-5);
  }
</style>