import { TextField } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <TextField
          description="入力方法などに関するヘルプテキスト"
          invalidMessage="入力の誤りに関するテキスト"
          label="ラベル"
          placeholder="プレースホルダー"
          required
        />
      </Dd>
      <Dt>Filled</Dt>
      <Dd>
        <TextField
          description="入力方法などに関するヘルプテキスト"
          invalidMessage="入力の誤りに関するテキスト"
          label="ラベル"
          placeholder="プレースホルダー"
          required
          value="入力中"
        />
      </Dd>
      <Dt>Error</Dt>
      <Dd>
        <TextField
          description="入力方法などに関するヘルプテキスト"
          invalidMessage="入力の誤りに関するテキスト"
          label="ラベル"
          placeholder="プレースホルダー"
          required
          invalid
          value="入力中"
        />
      </Dd>
      <Dt>Focus</Dt>
      <Dd>
        <TextField
          description="入力方法などに関するヘルプテキスト"
          invalidMessage="入力の誤りに関するテキスト"
          label="ラベル"
          placeholder="プレースホルダー"
          data-focus
        />
      </Dd>
      <Dt>Disabled</Dt>
      <Dd>
        <TextField
          description="入力方法などに関するヘルプテキスト"
          invalidMessage="入力の誤りに関するテキスト"
          label="ラベル"
          placeholder="プレースホルダー"
          disabled
        />
      </Dd>
    </Dl>
  );
}

import { PasswordField, TextField } from "@serendie/ui";
import { HBox } from "src/components/LayoutUtils";

export function PasswordFieldSample() {
  return (
    <HBox>
      <PasswordField
        placeholder="パスワードを入力"
        label="パスワード"
        required
      />
    </HBox>
  );
}